用Python搭建一个ChatGPT聊天页面-51CTO.COM

搭建一个基于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的服务条款和使用指南。