在构建一个交互式web应用时，纯粹的html页面无法直接执行服务器端的python脚本，也无法直接访问openai api。为了实现用户在html页面输入消息，python脚本调用openai api获取回复，并将回复展示在页面上的需求，核心在于建立前端（html/javascript）与后端（python）之间的通信机制。最常见的解决方案是利用python构建一个web api服务。当用户在前端提交消息时，javascript通过http请求将消息发送到python后端，后端处理后将结果通过http响应返回给前端，通常以json格式传输数据。
首先，我们需要改造原有的Python脚本，使其成为一个可以响应HTTP请求的Web服务。
安装Flask和OpenAI库：
pip install Flask openai python-dotenv
python-dotenv用于安全地管理API密钥等环境变量。
创建Flask应用： 创建一个名为app.py的文件，包含以下内容：
import os
from flask import Flask, request, jsonify
from flask_cors import CORS
import openai
from 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) # 在开发模式下运行，端口为5000API密钥管理： 在与app.py同级目录下创建一个.env文件，并添加你的OpenAI API密钥：
OPENAI_API_KEY="你的OpenAI API密钥"
注意： 永远不要将API密钥直接硬编码到代码中，尤其是在部署到生产环境时。使用环境变量是更安全的做法。
立即学习“前端免费学习笔记（深入）”；
运行Flask应用： 在终端中进入app.py所在的目录，执行：
python app.py
此时，你的后端服务将在http://127.0.0.1:5000运行。
接下来，我们需要修改原有的HTML文件，使其能够与我们刚刚创建的Flask后端进行通信。
修改HTML文件： 将你的HTML文件（例如index.html）中的JavaScript部分更新为以下内容。HTML和CSS部分保持不变，它们已经足够构建UI。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text 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: #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 */
}
</style>
</head>
<body>
<div id="chatbot-content">
<h1>Text Chatbot</h1>
<!-- Chat Area -->
<div id="chat-area"></div>
<!-- User Input -->
<input type="text" id="user-input" placeholder="Type your message here">
<!-- Send Button -->
<button id="send-btn">Send</button>
</div>
<script>
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();
}
});
</script>
</body>
</html>通过上述步骤，你已经成功地将一个基于Python和OpenAI API的ChatGPT功能集成到了一个交互式的HTML网页中，实现了前后端的有效通信。
以上就是将OpenAI API驱动的ChatGPT集成到HTML网页的完整教程的详细内容，更多请关注php中文网其它相关文章！
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
504
收藏
