用Python搭建一個ChatGPT聊天頁面
搭建一個基于Python的ChatGPT聊天頁面通常涉及以下幾個步驟：
- 創建Web應用框架
- 創建HTML聊天界面
- 實現后端邏輯
- 完善前端JavaScript
創建Web應用框架： 使用Python的Web開發框架，如Flask或Django，來構建基礎的Web應用程序。這里以Flask為例，首先安裝Flask：
pip install Flask創建一個名為app.py的文件，初始化Flask應用：
from flask import Flask, render_template, request
app = Flask(__name__)
@app.route('/')
def chat_page():
return render_template('chat.html')
if __name__ == '__main__':
app.run(debug=True)上述代碼定義了一個簡單的路由/，當訪問根URL時，會渲染并返回chat.html模板。
創建HTML聊天界面： 在項目目錄下創建一個名為templates的文件夾（Flask默認查找此路徑下的模板文件），并在其中創建chat.html文件，編寫HTML、CSS和JavaScript代碼，構建聊天界面。以下是一個簡化的示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat with ChatGPT</title>
<style>
/* Add your CSS styles for the chat page here */
</style>
</head>
<body>
<div id="chat-container">
<!-- Render chat history here -->
</div>
<form id="message-form">
<input type="text" id="user-input" placeholder="Type your message...">
<button type="submit">Send</button>
</form>
<script>
// Add your JavaScript code for handling user input and sending requests to the server here
</script>
</body>
</html>這里創建了聊天區域（#chat-container）和用戶輸入表單（#message-form）。你需要添加CSS樣式以美化界面，并編寫JavaScript代碼來處理用戶輸入、發送請求到服務器以及在頁面上動態顯示聊天記錄。
實現后端邏輯：修改app.py，添加一個新的路由，用于處理來自前端的聊天請求。在這個路由中，調用ChatGPT API獲取回復，然后返回給前端。同時，確保已經按照上一節的步驟設置了OpenAI API密鑰。
from flask import jsonify
import openai
openai.api_key = 'your-api-key-here'
@app.route('/chat', methods=['POST'])
def chat_with_chatgpt():
user_message = request.form.get('user_message')
prompt = f"User: {user_message}\nExpert: "
response = openai.ChatCompletion.create(
model="gpt-3.5-turbo",
messages=[
{"role": "system", "content": "You are an expert in early childhood education."},
{"role": "user", "content": prompt}
]
)
chatbot_reply = response['choices'][0]['message']['content']
return jsonify({'chatbot_reply': chatbot_reply})這個路由接收POST請求，從請求數據中提取用戶輸入的消息，構造ChatGPT的提示，并調用ChatGPT API獲取回復。最后，將ChatGPT的回復以JSON格式返回給前端。
完善前端JavaScript： 在chat.html中的
document.addEventListener('DOMContentLoaded', function () {
const messageForm = document.getElementById('message-form');
const userInput = document.getElementById('user-input');
const chatContainer = document.getElementById('chat-container');
messageForm.addEventListener('submit', async (event) => {
event.preventDefault();
const userMessage = userInput.value.trim();
if (userMessage) {
// Send AJAX POST request to /chat endpoint
const response = await fetch('/chat', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: `user_message=${encodeURIComponent(userMessage)}`
});
const data = await response.json();
const chatbotReply = data.chatbot_reply;
// Append user and chatbot messages to the chat container
chatContainer.innerHTML += `
User: ${userMessage}`;
chatContainer.innerHTML += `
ChatGPT: ${chatbotReply}`;
userInput.value = '';
chatContainer.scrollTop = chatContainer.scrollHeight;
}
});
});這段代碼首先監聽表單提交事件，阻止默認提交行為。然后，提取用戶輸入，發送POST請求到/chat，接收并解析返回的JSON數據，將用戶消息和ChatGPT回復添加到聊天記錄中，并滾動到聊天記錄底部。
完成以上步驟后，運行app.py啟動Web應用。訪問http://localhost:5000/（默認端口為5000），您應該能看到一個與ChatGPT進行交互的聊天頁面。用戶在頁面上輸入消息后，前端會發送請求到后端，后端調用ChatGPT API獲取回復，并返回給前端，前端再將回復顯示在聊天界面上。
請注意，這只是一個基礎示例，實際應用中可能需要考慮更多細節，如錯誤處理、用戶體驗優化、API調用頻率限制、安全性等。同時，確保遵循OpenAI的服務條款和使用指南。
