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

1. 安装 Flask 和 OpenAI Python 库:

   立即学习“前端免费学习笔记（深入）”；

   pip install Flask openai

2. 创建 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，更加安全。

3. 设置 OpenAI API Key:

   将你的 OpenAI API Key 设置为环境变量。 在 Linux 或 macOS 上，可以使用以下命令：

   

   PHP的使用技巧集

   PHP 独特的语法混合了 C、Java、Perl 以及 PHP 自创新的语法。它可以比 CGI或者Perl更快速的执行动态网页。用PHP做出的动态页面与其他的编程语言相比，PHP是将程序嵌入到HTML文档中去执行，执行效率比完全生成HTML标记的CGI要高许多。下面介绍了十个PHP高级应用技巧。 1, 使用 ip2long() 和 long2ip() 函数来把 IP 地址转化成整型存储到数据库里

   下载

   export OPENAI_API_KEY="你的API密钥"

   在 Windows 上，可以使用以下命令：

   set OPENAI_API_KEY=你的API密钥

3. 前端实现 (HTML/JavaScript)

1. 修改 HTML (index.html):

   
   
   
       
       
       
       
   
   
       
   
           
   ChatGPT Chatbot
           
   
           
   
               
               Send
           
       
   
       
   
   

   代码解释:

   • HTML 结构包含聊天区域、输入框和发送按钮。
   • JavaScript 使用 fetch API 向后端发送 POST 请求。
   • displayMessage() 函数用于将消息添加到聊天区域。
   • getBotReply() 函数异步调用后端 API 并处理响应。
   • 添加了错误处理，以便在出现问题时显示错误消息。
   • 监听了 Enter 键，以便用户可以通过按 Enter 键发送消息。

4. 运行应用

1. 启动 Flask 后端:

   在终端中，导航到包含 app.py 的目录，并运行：

   python app.py

2. 打开 HTML 页面:

   在浏览器中打开 index.html 文件。 确保Flask应用正在运行，并且前端代码中的API地址正确。

5. 注意事项和总结

• 安全性: 在生产环境中，务必对API Key进行安全管理，不要直接在代码中硬编码。可以使用环境变量或更安全的密钥管理方案。
• 错误处理: 完善前后端的错误处理机制，以便在出现问题时能够及时发现并解决。
• 用户体验: 优化用户界面，例如添加加载指示器、优化聊天窗口的滚动行为等。
• 跨域问题: 如果前端和后端运行在不同的域名或端口上，需要配置 CORS 允许跨域请求。
• API 速率限制: OpenAI API 有速率限制，需要合理控制请求频率，避免超出限制。
• 异步处理: 使用 async/await 可以使 JavaScript 代码更加简洁易读，并且能够更好地处理异步操作。
• 部署: 将Flask应用部署到服务器上，例如使用Gunicorn和Nginx。

通过以上步骤，你就可以成功将 OpenAI ChatGPT 集成到 HTML 网页中，实现一个简单的聊天机器人。