我一个前端仔，居然用 Python 搞起了 AI？从零到一，撸了个 AI 聊天框小 demo
1. 写在前面：一个前端仔的“跨界”冲动
作为一个天天跟 HTML、CSS、JavaScript 打交道的前端仔，我从来没想过自己会去碰 Python，更没想过会用 Python 去搞 AI。但事情就是这么发生了——起因很简单，某天刷到别人用大模型接口做的聊天机器人，心里痒痒的：要不我也试试？
于是，从装 Python 环境开始，到调通第一个 AI 接口，再到撸出一个能聊天的前端页面，前后折腾了几个晚上。这篇文章就记录一下我从零到一的过程，希望能给同样想“跨界”的前端朋友一点参考。
2. 准备工作：前端仔的 Python 环境搭建
既然是前端仔，第一步当然是装 Python。这里我踩了不少坑，简单梳理一下：
- 去 Python 官网下载安装包，安装时记得勾选 Add Python to PATH，不然命令行里敲
python会提示找不到命令。 - 装完验证一下：终端里输入
python --version，能输出版本号就说明装好了。 - 建议再装一个虚拟环境工具
venv，避免把依赖装得乱七八糟。
# 创建虚拟环境
python -m venv venv
# 激活虚拟环境（Windows）
venv\Scripts\activate
# 激活虚拟环境（Mac/Linux）
source venv/bin/activate
3. 选型：用哪个大模型接口？
既然是做 AI 聊天 demo，核心就是调用大模型的接口。市面上的选择很多，我最终选了 OpenAI 兼容接口的方案，原因很简单：
- 接口规范统一，很多国产模型也都兼容 OpenAI 的调用格式，换模型成本低。
- Python 生态里
openai这个库封装得很好，几行代码就能调通。
pip install openai
4. 后端：用 Python 写一个简单的聊天接口
前端仔写后端，第一反应是“会不会很难”？其实用 Python 的 Flask 框架，几行代码就能起一个服务。
from flask import Flask, request, jsonify
from openai import OpenAI
app = Flask(__name__)
client = OpenAI(
api_key="你的API_KEY",
base_url="https://api.openai.com/v1"
)
@app.route("/chat", methods=["POST"])
def chat():
data = request.get_json()
user_message = data.get("message", "")
response = client.chat.completions.create(
model="gpt-3.5-turbo",
messages=[
{"role": "user", "content": user_message}
]
)
reply = response.choices[0].message.content
return jsonify({"reply": reply})
if __name__ == "__main__":
app.run(port=5000)
这里有几个前端仔容易懵的点，我踩过坑，帮你标出来：
api_key不要硬编码在代码里，建议用环境变量存。base_url可以换成其他兼容 OpenAI 格式的服务商地址。- 跨域问题：前端页面如果和后端不同源，需要加 CORS 配置，否则浏览器会拦截请求。
5. 前端：把聊天框页面撸出来
后端接口有了，前端就回到我的主场了。一个最简单的聊天框页面，用原生 HTML + JavaScript 就能搞定，不需要任何框架。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>AI 聊天框</title>
<style>
body { font-family: sans-serif; max-width: 600px; margin: 40px auto; }
#chat-box { border: 1px solid #ccc; height: 400px; overflow-y: auto; padding: 10px; }
.msg { margin: 8px 0; }
.user { text-align: right; color: #007bff; }
.ai { text-align: left; color: #333; }
#input-row { display: flex; margin-top: 10px; }
#input { flex: 1; padding: 8px; }
button { padding: 8px 16px; }
</style>
</head>
<body>
<h2>AI 聊天框 Demo</h2>
<div id="chat-box"></div>
<div id="input-row">
<input id="input" placeholder="输入你的问题..." />
<button onclick="send()">发送</button>
</div>
<script>
async function send() {
const input = document.getElementById("input");
const message = input.value.trim();
if (!message) return;
const chatBox = document.getElementById("chat-box");
chatBox.innerHTML += `<div class="msg user">${message}</div>`;
input.value = "";
const res = await fetch("http://localhost:5000/chat", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ message })
});
const data = await res.json();
chatBox.innerHTML += `<div class="msg ai">${data.reply}</div>`;
chatBox.scrollTop = chatBox.scrollHeight;
}
</script>
</body>
</html>
6. 联调：前后端跑通的那一刻
把后端 python app.py 跑起来，再用浏览器打开前端页面，输入一句“你好”，看到 AI 回复的那一刻，成就感真的拉满。
这里分享几个联调时容易踩的坑：
- 端口冲突：5000 端口被占用时，换个端口即可。
- 跨域报错：浏览器控制台报 CORS 错误时，在后端加
flask-cors解决。 - 请求超时：大模型接口响应可能较慢，前端
fetch可以设置超时时间，避免一直转圈。
pip install flask-cors
from flask_cors import CORS
CORS(app) # 允许所有跨域请求
7. 总结与下一步
从零到一，我大概花了三个晚上，最终跑通了一个能对话的 AI 聊天框 demo。回头看，其实门槛没有想象中那么高：
- Python 基础语法和前端很像，上手不难。
- 大模型接口封装得很好，核心就是一次 HTTP 请求。
- 前端部分本来就是我的主场，写起来很顺手。
下一步我打算：
- 给聊天框加上流式输出，让 AI 回复像打字机一样逐字出现。
- 接入更多模型，对比不同模型的效果。
- 把对话历史存起来，让 AI 能记住上下文。
如果你也是个前端仔，想试试用 Python 搞 AI，别犹豫，动手就完了。踩坑是难免的，但跑通的那一刻，真的很有成就感。
DAMO开发者矩阵，由阿里巴巴达摩院和中国互联网协会联合发起，致力于探讨最前沿的技术趋势与应用成果，搭建高质量的交流与分享平台，推动技术创新与产业应用链接，围绕“人工智能与新型计算”构建开放共享的开发者生态。
更多推荐
2
0- 0
已为社区贡献4条内容
所有评论(0)