本文旨在指导开发者如何将基于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, jsonifyfrom flask_cors import CORSimport openaiimport osapp = 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)}), 500if __name__ == '__main__': app.run(debug=True)
代码解释:
Flask 用于创建 Web 应用。CORS 用于允许跨域请求，因为前端和后端可能运行在不同的端口上。/chat 路由处理来自前端的 POST 请求。request.get_json() 用于解析请求中的 JSON 数据。openai.chat.completions.create() 调用 OpenAI API 获取 ChatGPT 的响应。jsonify() 用于将 Python 字典转换为 JSON 格式的响应。从环境变量OPENAI_API_KEY中读取API Key，更加安全。
设置 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):
ChatGPT Chatbot 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; }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'); } }ChatGPT Chatbot
代码解释:
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 网页中，实现一个简单的聊天机器人。
以上就是将OpenAI ChatGPT集成到HTML网页的完整指南的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1372400.html
微信扫一扫 
支付宝扫一扫 
