本教程详细阐述了如何将基于Python的OpenAI ChatGPT后端与前端HTML网页进行集成。通过构建一个轻量级的Python Web API（如使用Flask框架），前端JavaScript能够向后端发送用户输入，后端处理后调用OpenAI API获取响应，并将结果以JSON格式返回给前端，最终在HTML页面上动态展示对话，实现一个功能完备的网页版聊天机器人。
概述：打通前后端通信的桥梁
在构建一个交互式web应用时，纯粹的html页面无法直接执行服务器端的python脚本，也无法直接访问openai api。为了实现用户在html页面输入消息，python脚本调用openai api获取回复，并将回复展示在页面上的需求，核心在于建立前端（html/javascript）与后端（python）之间的通信机制。最常见的解决方案是利用python构建一个web api服务。当用户在前端提交消息时，javascript通过http请求将消息发送到python后端，后端处理后将结果通过http响应返回给前端，通常以json格式传输数据。
核心技术栈选择
后端（Python）：Web框架： Flask或Django是Python中常用的Web框架，它们能帮助我们快速搭建RESTful API。本教程将以轻量级的Flask为例。OpenAI库： 用于与OpenAI API交互。前端（HTML/JavaScript）：HTML： 构建页面结构。CSS： 美化页面样式。JavaScript： 处理用户输入、发送HTTP请求到后端、接收并显示后端响应。
后端API构建（使用Flask）
首先，我们需要改造原有的Python脚本，使其成为一个可以响应HTTP请求的Web服务。
安装Flask和OpenAI库：
pip install Flask openai python-dotenv
python-dotenv用于安全地管理API密钥等环境变量。
创建Flask应用：创建一个名为app.py的文件，包含以下内容：
import osfrom flask import Flask, request, jsonifyfrom flask_cors import CORSimport openaifrom dotenv import load_dotenv# 加载环境变量load_dotenv()app = Flask(__name__)CORS(app) # 启用CORS，允许前端跨域请求# 从环境变量中获取OpenAI API密钥openai.api_key = os.getenv("OPENAI_API_KEY")# 全局对话历史，用于维持多轮对话上下文conversation_history = []def chat_with_gpt(prompt): # 将当前用户输入添加到对话历史 conversation_history.append({"role": "user", "content": prompt}) try: response = openai.chat.completions.create( model="gpt-3.5-turbo", messages=conversation_history ) bot_response = response.choices[0].message.content.strip() # 将AI回复添加到对话历史 conversation_history.append({"role": "assistant", "content": bot_response}) return bot_response except Exception as e: print(f"OpenAI API调用出错: {e}") return "抱歉，目前无法连接到AI。请稍后再试。"@app.route('/')def home(): return "ChatGPT Flask Backend is running!"@app.route('/chat', methods=['POST'])def chat(): data = request.json user_message = data.get('message') if not user_message: return jsonify({"error": "No message provided"}), 400 bot_reply = chat_with_gpt(user_message) return jsonify({"reply": bot_reply})if __name__ == '__main__': # 清空对话历史，确保每次启动服务都是新的会话 conversation_history = [] app.run(debug=True, port=5000) # 在开发模式下运行，端口为5000
API密钥管理：在与app.py同级目录下创建一个.env文件，并添加你的OpenAI API密钥：
OPENAI_API_KEY="你的OpenAI API密钥"
注意： 永远不要将API密钥直接硬编码到代码中，尤其是在部署到生产环境时。使用环境变量是更安全的做法。
立即学习“前端免费学习笔记（深入）”；
运行Flask应用：在终端中进入app.py所在的目录，执行：
python app.py
此时，你的后端服务将在http://127.0.0.1:5000运行。
前端HTML/JavaScript改造
接下来，我们需要修改原有的HTML文件，使其能够与我们刚刚创建的Flask后端进行通信。
修改HTML文件：将你的HTML文件（例如index.html）中的JavaScript部分更新为以下内容。HTML和CSS部分保持不变，它们已经足够构建UI。
Text Chatbot body { font-family: Arial, sans-serif; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #fff; /* Set the background color */ } #chatbot-content { text-align: center; width: 300px; box-shadow: 0 0 10px rgba(0,0,0,0.1); /* Add a subtle shadow */ padding: 20px; border-radius: 8px; } #chat-area { width: 100%; height: 200px; padding: 10px; border: 1px solid #ccc; /* Lighter border */ background-color: #f9f9f9; /* Lighter background */ margin-bottom: 10px; overflow-y: scroll; text-align: left; /* Align text left */ border-radius: 4px; } .message-user { color: #007bff; margin-bottom: 5px; } .message-bot { color: #28a745; margin-bottom: 5px; } #user-input { width: calc(100% - 22px); /* Adjust width for padding */ padding: 10px; font-size: 16px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 4px; } #send-btn { padding: 10px 20px; background-color: #007bff; /* Bootstrap's Primary Color */ color: #fff; text-decoration: none; border: none; border-radius: 5px; font-size: 16px; cursor: pointer; transition: background-color 0.3s ease; /* Smooth transition */ } #send-btn:hover { background-color: #0056b3; /* Darker on hover */ }const chatArea = document.getElementById("chat-area"); const userInputField = document.getElementById("user-input"); const sendButton = document.getElementById("send-btn"); function displayMessage(sender, message) { const messageElement = document.createElement("div"); messageElement.classList.add(sender === "You" ? "message-user" : "message-bot"); messageElement.textContent = `${sender}: ${message}`; chatArea.appendChild(messageElement); chatArea.scrollTop = chatArea.scrollHeight; // Scroll to bottom } async function sendMessage() { const userInput = userInputField.value.trim(); if (userInput === "") return; displayMessage("You", userInput); userInputField.value = ""; // Clear input immediately try { const response = await fetch('http://127.0.0.1:5000/chat', { // 指向你的Flask后端地址 method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ message: userInput }) }); if (!response.ok) { throw new Error(`HTTP error! Status: ${response.status}`); } const data = await response.json(); displayMessage("Bot", data.reply); } catch (error) { console.error("Error sending message to backend:", error); displayMessage("Bot", "抱歉，与AI连接失败，请检查网络或稍后再试。"); } } sendButton.addEventListener("click", sendMessage); userInputField.addEventListener("keypress", function(event) { if (event.key === "Enter") { sendMessage(); } });Text Chatbot
运行与测试
启动后端： 确保你的Python Flask应用正在运行（在终端中执行 python app.py）。打开前端： 在浏览器中打开 index.html 文件。交互： 在输入框中键入消息并点击“Send”按钮，或按回车键，即可看到聊天机器人通过OpenAI API返回的回复。
注意事项与扩展
API密钥安全： 在生产环境中，API密钥绝不能暴露在前端代码中。后端负责调用API，前端只与后端API通信。CORS： 如果你的前端和后端运行在不同的域或端口，你需要启用CORS（跨域资源共享）。Flask的flask_cors库可以轻松实现这一点。错误处理： 在前端和后端都应加入健壮的错误处理机制，例如网络请求失败、API调用失败等情况。多轮对话： 本教程的Flask后端通过维护conversation_history列表实现了简单的多轮对话。每次AI调用都会将完整的对话历史发送给OpenAI。用户体验： 可以添加加载状态指示器（例如在等待AI回复时显示“正在思考…”），禁用输入框和发送按钮，以提升用户体验。部署： 对于生产环境，不应使用Flask内置的开发服务器。推荐使用WSGI服务器（如Gunicorn或uWSGI）配合反向代理（如Nginx或Apache）来部署Flask应用。前端框架： 对于更复杂的UI，可以考虑使用React、Vue或Angular等前端框架来构建聊天界面。WebSocket： 对于实时性要求更高的聊天应用，可以考虑使用WebSocket协议，它提供全双工通信，减少HTTP请求的开销。
通过上述步骤，你已经成功地将一个基于Python和OpenAI API的ChatGPT功能集成到了一个交互式的HTML网页中，实现了前后端的有效通信。
以上就是将OpenAI API驱动的ChatGPT集成到HTML网页的完整教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1372402.html
微信扫一扫 
支付宝扫一扫 
