商城首页欢迎来到中国正版软件门户
文章教程　|　产品大全　|　软件问答

您的位置：首页 >用Python和OpenAI打造交互式HTML聊天机器人

用Python和OpenAI打造交互式HTML聊天机器人

　　发布于2025-10-27　阅读（0）

扫一扫，手机访问

使用Python和OpenAI API构建交互式HTML聊天机器人

本教程详细介绍了如何将基于Python和OpenAI API的ChatGPT功能集成到HTML网页中，实现前后端双向通信。通过利用Flask等Python Web框架创建API接口，前端JavaScript可以通过HTTP请求发送用户输入并接收AI响应，从而构建一个功能完善、交互性强的聊天机器人应用。

前言：Python后端与HTML前端的桥梁

在开发Web应用程序时，常常需要将强大的后端逻辑（例如与OpenAI API交互）与用户友好的前端界面（HTML、CSS、JavaScript）结合起来。直接将Python脚本的输出展示在HTML页面上，并从HTML页面获取输入并回传给Python脚本，这在技术上是不可行的。浏览器执行的是HTML、CSS和JavaScript，而Python脚本运行在服务器端。为了实现两者之间的通信，我们需要引入一个中间层：Web服务器和API。

本教程将指导您如何使用Python的Flask Web框架创建一个简单的API，该API将作为前端HTML页面与OpenAI API之间的桥梁，实现实时的聊天交互。

核心概念：Web API与HTTP通信

要连接Python后端和HTML前端，关键在于理解Web API（应用程序编程接口）和HTTP通信。

  • Web API：后端（Python）提供的一组URL，前端可以通过这些URL发送请求（例如用户消息）并接收响应（例如AI回复）。
  • HTTP通信：前端（JavaScript）使用fetch或XMLHttpRequest等API通过HTTP协议向后端API发送请求，并处理后端返回的HTTP响应。通常，数据会以JSON（JavaScript Object Notation）格式进行交换，因为它易于JavaScript解析和生成。

步骤一：构建Python后端API (使用Flask)

我们将使用Flask来创建一个轻量级的Web服务器，它将暴露一个API端点供前端调用。

1. 安装Flask

如果您尚未安装Flask，请通过pip安装：

pip install Flask openai python-dotenv

python-dotenv用于安全地管理API密钥。

2. 修改Python脚本以创建Flask应用

将您的OpenAI API调用逻辑封装在一个Flask路由中。为了安全起见，OpenAI API密钥应从环境变量中加载，而不是硬编码在代码中。

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) # 允许所有来源的跨域请求，生产环境中应限制特定来源

# 从环境变量中获取API密钥
openai.api_key = os.getenv("OPENAI_API_KEY")

def chat_with_gpt(prompt):
    """
    调用OpenAI API获取ChatGPT响应。
    """
    try:
        response = openai.chat.completions.create(
            model="gpt-3.5-turbo",
            messages=[{"role": "user", "content": prompt}]
        )
        return response.choices[0].message.content.strip()
    except Exception as e:
        print(f"Error calling OpenAI API: {e}")
        return "抱歉，AI服务暂时不可用。"

@app.route('/chat', methods=['POST'])
def chat_endpoint():
    """
    API端点，接收前端的用户消息，调用ChatGPT，并返回AI响应。
    """
    data = request.get_json()
    user_message = data.get('message')

    if not user_message:
        return jsonify({"error": "No message provided"}), 400

    bot_response = chat_with_gpt(user_message)
    return jsonify({"response": bot_response})

if __name__ == '__main__':
    # 在开发模式下运行Flask应用
    # host='0.0.0.0' 允许从外部IP访问
    # port=5000 是默认端口
    app.run(debug=True, host='0.0.0.0', port=5000)

.env文件 (与app.py同目录)

OPENAI_API_KEY="YOUR_OPENAI_API_KEY"

请将YOUR_OPENAI_API_KEY替换为您的实际OpenAI API密钥。

3. 运行Python后端

在终端中，导航到app.py所在的目录，然后运行：

python app.py

您会看到Flask服务器启动，通常在http://0.0.0.0:5000上监听请求。

步骤二：修改HTML前端以与API通信

现在，我们需要修改HTML文件中的JavaScript代码，使其不再使用硬编码的本地回复逻辑，而是通过HTTP请求与我们刚刚创建的Flask API进行通信。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI 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: #f4f7f6; /* Set the background color */
        }

        #chatbot-content {
            text-align: center;
            width: 400px;
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }

        h1 {
            color: #333;
            margin-bottom: 20px;
        }

        #chat-area {
            width: 100%;
            height: 300px;
            padding: 10px;
            border: 1px solid #e0e0e0;
            background-color: #f9f9f9;
            margin-bottom: 15px;
            overflow-y: auto; /* Changed to auto for better UX */
            text-align: left;
            border-radius: 5px;
        }

        .message {
            margin-bottom: 8px;
            padding: 5px 10px;
            border-radius: 5px;
            max-width: 80%;
        }

        .user-message {
            background-color: #dcf8c6;
            margin-left: auto;
            text-align: right;
        }

        .bot-message {
            background-color: #e8e8e8;
            margin-right: auto;
            text-align: left;
        }

        #user-input {
            width: calc(100% - 70px); /* Adjust width for button */
            padding: 12px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin-right: 10px;
            vertical-align: middle;
        }

        #send-btn {
            padding: 12px 20px;
            background-color: #007bff; /* Bootstrap's Primary Color */
            color: #fff;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            vertical-align: middle;
        }

        #send-btn:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>

    <div id="chatbot-content">
        <h1>AI Chatbot</h1>

        <!-- Chat Area -->
        <div id="chat-area"></div>

        <!-- Input and Button Container -->
        <div>
            <input type="text" id="user-input" placeholder="输入你的消息...">
            <button id="send-btn">发送</button>
        </div>
    </div>

    <script>
        // Flask后端API的URL
        const API_URL = 'http://localhost:5000/chat'; // 如果部署在VM上，请替换为VM的IP或域名

        function displayMessage(message, sender) {
            const chatArea = document.getElementById("chat-area");
            const messageElement = document.createElement("div");
            messageElement.classList.add("message");
            messageElement.classList.add(sender === "You" ? "user-message" : "bot-message");
            messageElement.textContent = `${sender}: ${message}`;
            chatArea.appendChild(messageElement);
            chatArea.scrollTop = chatArea.scrollHeight; // 滚动到底部
        }

        async function sendUserMessage() {
            const userInputField = document.getElementById("user-input");
            const userInput = userInputField.value.trim();

            if (userInput === "") {
                return; // 不发送空消息
            }

            displayMessage(userInput, "You");
            userInputField.value = ""; // 清空输入框

            // 禁用输入和发送按钮，等待AI回复
            userInputField.disabled = true;
            document.getElementById("send-btn").disabled = true;

            try {
                const response = await fetch(API_URL, {
                    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(data.response, "Bot");

            } catch (error) {
                console.error('Error:', error);
                displayMessage("抱歉，无法连接到AI服务或发生错误。", "Bot");
            } finally {
                // 重新启用输入和发送按钮
                userInputField.disabled = false;
                document.getElementById("send-btn").disabled = false;
                userInputField.focus(); // 聚焦输入框
            }
        }

        document.getElementById("send-btn").addEventListener("click", sendUserMessage);

        document.getElementById("user-input").addEventListener("keypress", function(event) {
            if (event.key === "Enter") {
                sendUserMessage();
            }
        });
    </script>

</body>
</html>

步骤三：部署与测试

  1. 本地测试：

    • 确保您的Python Flask应用正在运行（python app.py）。
    • 在浏览器中打开index.html文件。
    • 在聊天框中输入消息，点击“发送”按钮或按回车键。您应该能看到消息发送到Python后端，然后AI的回复显示在页面上。

  2. VM部署：

    • 如果您将Flask应用部署在Google Cloud VM或其他云服务器上，请确保：
      • Flask应用在VM上运行，并且监听0.0.0.0（如app.run(host='0.0.0.0', port=5000)）。
      • VM的防火墙规则允许外部流量访问Flask应用所使用的端口（例如5000）。
      • 在index.html的JavaScript代码中，将API_URL更改为VM的公共IP地址或域名，例如http://YOUR_VM_IP:5000/chat。
    • 将index.html文件也部署到VM上（例如通过一个简单的Web服务器，或者直接访问VM的IP地址如果您的Flask应用也提供静态文件服务）。最简单的方法是确保您的前端HTML文件能够通过浏览器访问到，并且能够正确地向您的VM上的Flask API发送请求。

注意事项与最佳实践

  • API密钥安全： 绝不要将OpenAI API密钥直接暴露在前端JavaScript代码中。始终在后端（Python）处理API密钥，并通过环境变量加载。
  • 跨域资源共享 (CORS)： 由于前端HTML文件通常运行在不同的域或端口（例如本地文件系统或另一个Web服务器），而后端Flask应用运行在localhost:5000，浏览器会阻止跨域请求。flask_cors库可以解决这个问题。在生产环境中，应将CORS(app)配置为只允许特定的前端源访问，而不是CORS(app)允许所有来源。
  • 错误处理： 在前端和后端都应加入健壮的错误处理机制。例如，当OpenAI API调用失败或网络请求出现问题时，应向用户显示友好的错误消息。
  • 用户体验： 在等待AI回复时，可以禁用输入框和发送按钮，并显示加载指示器，以提升用户体验。
  • 聊天历史： 当前示例仅处理单轮对话。要实现多轮对话，您需要在后端维护一个对话历史列表，并在每次调用OpenAI API时将其作为messages参数的一部分发送。
  • 部署： 对于生产环境，Flask应用通常会使用Gunicorn、uWSGI等WSGI服务器配合Nginx或Apache等反向代理服务器进行部署，以提高性能和稳定性。

总结

通过本教程，您已经成功地将一个独立的Python ChatGPT脚本改造为一个功能完善的Web API，并将其与HTML前端页面连接起来，实现了实时的、双向的聊天交互。这种前后端分离的架构是现代Web开发中的标准实践，它使得后端逻辑和前端界面可以独立开发和部署，极大地提高了开发效率和应用的可扩展性。掌握这种集成方式，将为您构建更复杂的Web应用打下坚实的基础。

本文转载于：互联网 如有侵犯，请联系zhengruancom@outlook.com删除。
免责声明：正软商城发布此文仅为传递信息，不代表正软商城认同其观点或证实其描述。

上一篇：小红书直播回放观看方法详解

下一篇：抖音视频火了第二天要接着发吗？视频火了有哪些因素？

产品推荐

最新发布

相关推荐

热门关注
网站备案号： 湘ICP备19013367号-1 联系邮箱：zhengruancom@outlook.com
Copyright ©2018-2020