用 Flask + OpenAI API 打造一个智能聊天机器人（附完整源码与部署教程）

一、项目简介

本项目的目标是实现一个网页端的聊天机器人，能够根据用户输入调用 OpenAI API（GPT 模型）生成回复，实现类似 ChatGPT 的效果。

技术栈如下：

后端框架：Flask
API接口：OpenAI API
前端：HTML + CSS + JavaScript（简单交互界面）
运行环境：Python 3.8 及以上

最终效果👇：

用户在网页输入框中输入问题 → 点击发送 → Flask 调用 OpenAI 接口 → 页面实时显示回复内容。

⚙️ 二、环境准备

1️⃣ 安装依赖

在终端或命令行执行：

复制代码
pip install flask openai

注意：请确保你的 Python 已安装并可正常运行。

OpenAI API 需要有效的 API Key，可前往 https://platform.openai.com 申请。

2️⃣ 项目结构

复制代码

chatbot/
├── app.py                # Flask 后端主程序
├── templates/
│   └── index.html        # 前端网页
└── static/
    └── style.css         # 样式文件

💡 三、后端核心代码（Flask）

app.py：

复制代码

from flask import Flask, render_template, request, jsonify
import openai

app = Flask(__name__)

# 在此处填写你的 OpenAI API key
openai.api_key = "你的_API_KEY"

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/chat', methods=['POST'])
def chat():
    user_message = request.json.get("message")

    response = openai.ChatCompletion.create(
        model="gpt-3.5-turbo",
        messages=[
            {"role": "system", "content": "你是一个友好且聪明的AI助手。"},
            {"role": "user", "content": user_message}
        ]
    )

    reply = response["choices"][0]["message"]["content"]
    return jsonify({"reply": reply})

if __name__ == '__main__':
    app.run(debug=True)

🔍 代码说明：

index()：返回主页面。
/chat 路由：接收前端发送的消息并调用 OpenAI API。
openai.ChatCompletion.create()：使用 GPT 模型生成自然语言回复。
最后返回 JSON 数据供前端展示。

🖥️ 四、前端页面设计

templates/index.html：

复制代码

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>智能聊天机器人</title>
  <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
  <div class="chat-container">
    <h2> 智能聊天机器人</h2>
    <div id="chat-box" class="chat-box"></div>
    <div class="input-area">
      <input type="text" id="user-input" placeholder="请输入你的问题..." />
      <button onclick="sendMessage()">发送</button>
    </div>
  </div>

  <script>
    async function sendMessage() {
      const input = document.getElementById("user-input");
      const message = input.value.trim();
      if (!message) return;

      const chatBox = document.getElementById("chat-box");
      chatBox.innerHTML += `<div class='user-msg'>：${message}</div>`;
      input.value = '';

      const response = await fetch('/chat', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ message })
      });

      const data = await response.json();
      chatBox.innerHTML += `<div class='bot-msg'>：${data.reply}</div>`;
      chatBox.scrollTop = chatBox.scrollHeight;
    }
  </script>
</body>
</html>

🎨 五、CSS样式美化

static/style.css：

复制代码

body {
  background-color: #f1f5f9;
  font-family: 'Microsoft Yahei', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.chat-container {
  width: 400px;
  background: white;
  border-radius: 15px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  overflow: hidden;
}

h2 {
  background-color: #2563eb;
  color: white;
  padding: 15px;
  text-align: center;
  margin: 0;
}

.chat-box {
  height: 400px;
  overflow-y: auto;
  padding: 10px;
}

.user-msg, .bot-msg {
  margin: 8px 0;
  line-height: 1.5;
}

.user-msg {
  text-align: right;
  color: #1d4ed8;
}

.bot-msg {
  text-align: left;
  color: #333;
}

.input-area {
  display: flex;
  border-top: 1px solid #ddd;
}

input {
  flex: 1;
  padding: 10px;
  border: none;
  outline: none;
}

button {
  background-color: #2563eb;
  color: white;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
}

button:hover {
  background-color: #1e40af;
}

🧩 六、运行项目

在终端中进入项目目录，执行：

复制代码
python app.py

看到如下输出即成功：

复制代码

 * Running on http://127.0.0.1:5000/

打开浏览器访问：http://127.0.0.1:5000/

即可与自己的智能机器人愉快对话 🎉

🧠 七、可扩展功能建议

如果想让项目更智能、更实用，可以尝试：

对话上下文记忆：记录前几轮对话，让AI更连贯。
用户登录系统：为每个用户保存独立对话记录。
添加语音输入 / 语音合成：实现语音聊天机器人。
接入数据库（如SQLite）：存储聊天记录或统计数据。
部署上线：可用 Render / Vercel / 阿里云部署成公网网站。

🧾 八、总结

通过本项目你掌握了：

Flask Web 后端开发的基础流程
OpenAI API 的调用方法
前后端交互的实现逻辑
前端动态渲染和简易UI设计

这就是一个从零开始的智能聊天机器人雏形。

你可以进一步改造成"学习助手"、"写作伙伴"或"客服机器人"等实际应用。