本文旨在指导开发者如何将基于OpenAI API的ChatGPT模型集成到HTML网页中。通过结合Python后端和JavaScript前端，实现用户在网页上与ChatGPT进行实时对话的功能。教程将详细介绍如何搭建后端API、处理前后端通信，以及在HTML页面上展示聊天内容。
1. 架构概述
将ChatGPT集成到HTML网页需要一个前后端协同的架构。
- 前端 (HTML/JavaScript): 负责用户界面，包括聊天窗口、输入框和发送按钮。JavaScript处理用户输入，并通过API将输入发送到后端，然后将后端返回的ChatGPT响应显示在聊天窗口中。
- 后端 (Python): 负责与OpenAI API交互。接收来自前端的请求，调用OpenAI API获取ChatGPT的响应，并将响应返回给前端。
2. 后端API的搭建 (Python)
使用Flask框架可以快速搭建一个简单的API。
-
安装 Flask 和 OpenAI Python 库:
立即学习“前端免费学习笔记（深入）”；
pip install Flask openai
-
创建 Flask 应用 (app.py):
from flask import Flask, request, jsonify from flask_cors import CORS import openai import os app = Flask(__name__) CORS(app) # 允许跨域请求 openai.api_key = os.environ.get("OPENAI_API_KEY") # 从环境变量获取API Key @app.route('/chat', methods=['POST']) def chat(): data = request.get_json() message = data['message'] try: response = openai.chat.completions.create( model="gpt-3.5-turbo", messages=[{"role": "user", "content": message}] ) reply = response.choices[0].message.content.strip() return jsonify({'reply': reply}) except Exception as e: return jsonify({'error': str(e)}), 500 if __name__ == '__main__': app.run(debug=True)代码解释:
-
设置 OpenAI API Key:
将你的 OpenAI API Key 设置为环境变量。 在 Linux 或 macOS 上，可以使用以下命令：
export OPENAI_API_KEY="你的API密钥"
在 Windows 上，可以使用以下命令：
set OPENAI_API_KEY=你的API密钥
3. 前端实现 (HTML/JavaScript)
-
修改 HTML (index.html):
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ChatGPT Chatbot</title> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0; } #chatbot-container { width: 400px; background-color: #fff; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); padding: 20px; } #chat-area { height: 300px; overflow-y: scroll; padding: 10px; border: 1px solid #ccc; margin-bottom: 10px; } .message { margin-bottom: 8px; padding: 8px; border-radius: 4px; } .user-message { background-color: #DCF8C6; text-align: right; } .bot-message { background-color: #ECE5DD; text-align: left; } #input-area { display: flex; } #user-input { flex-grow: 1; padding: 8px; border: 1px solid #ccc; border-radius: 4px; } #send-button { padding: 8px 12px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; } </style> </head> <body> <div id="chatbot-container"> <h1>ChatGPT Chatbot</h1> <div id="chat-area"></div> <div id="input-area"> <input type="text" id="user-input" placeholder="Type your message..."> <button id="send-button">Send</button> </div> </div> <script> const chatArea = document.getElementById('chat-area'); const userInput = document.getElementById('user-input'); const sendButton = document.getElementById('send-button'); sendButton.addEventListener('click', sendMessage); userInput.addEventListener('keydown', (event) => { if (event.key === 'Enter') { sendMessage(); } }); function sendMessage() { const message = userInput.value.trim(); if (message) { displayMessage(message, 'user'); userInput.value = ''; getBotReply(message); } } function displayMessage(message, sender) { const messageElement = document.createElement('div'); messageElement.classList.add('message'); messageElement.classList.add(sender + '-message'); messageElement.textContent = message; chatArea.appendChild(messageElement); chatArea.scrollTop = chatArea.scrollHeight; // Scroll to bottom } async function getBotReply(message) { try { const response = await fetch('http://127.0.0.1:5000/chat', { // 修改为你的Flask应用地址 method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ message: message }) }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); displayMessage(data.reply, 'bot'); } catch (error) { console.error('Error fetching bot reply:', error); displayMessage('Error: Could not get reply from the bot.', 'bot'); } } </script> </body> </html>代码解释:
- HTML 结构包含聊天区域、输入框和发送按钮。
- JavaScript 使用 fetch API 向后端发送 POST 请求。
- displayMessage() 函数用于将消息添加到聊天区域。
- getBotReply() 函数异步调用后端 API 并处理响应。
- 添加了错误处理，以便在出现问题时显示错误消息。
- 监听了 Enter 键，以便用户可以通过按 Enter 键发送消息。
4. 运行应用
-
启动 Flask 后端:
在终端中，导航到包含 app.py 的目录，并运行：
python app.py
-
打开 HTML 页面:
在浏览器中打开 index.html 文件。 确保Flask应用正在运行，并且前端代码中的API地址正确。
5. 注意事项和总结
- 安全性: 在生产环境中，务必对API Key进行安全管理，不要直接在代码中硬编码。可以使用环境变量或更安全的密钥管理方案。
- 错误处理: 完善前后端的错误处理机制，以便在出现问题时能够及时发现并解决。
- 用户体验: 优化用户界面，例如添加加载指示器、优化聊天窗口的滚动行为等。
- 跨域问题: 如果前端和后端运行在不同的域名或端口上，需要配置 CORS 允许跨域请求。
- API 速率限制: OpenAI API 有速率限制，需要合理控制请求频率，避免超出限制。
- 异步处理: 使用 async/await 可以使 JavaScript 代码更加简洁易读，并且能够更好地处理异步操作。
- 部署: 将Flask应用部署到服务器上，例如使用Gunicorn和Nginx。
通过以上步骤，你就可以成功将 OpenAI ChatGPT 集成到 HTML 网页中，实现一个简单的聊天机器人。
相关标签：
linux javascript python java html js 前端 json windows nginx Python JavaScript nginx flask 架构 json html gunicorn 异步 windows macos chatgpt linux