将OpenAI ChatGPT集成到HTML网页的完整指南

DDD

发布时间：2025-09-17 19:47:01

357人浏览过

来源于php中文网

原创

将openai chatgpt集成到html网页的完整指南

本文旨在指导开发者如何将基于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)

代码解释:

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 上，可以使用以下命令：

Rose.ai
一个云数据平台，帮助用户发现、可视化数据

下载
```
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>

代码解释: