使用 Flask 接入阿里云通义 AI 大模型 API 实现简单的 AI 聊天 Web 项目
随着人工智能技术的飞速发展，越来越多的开发者开始关注 AI 聊天应用的开发。在本文中，我们将介绍如何使用 Flask 框架接入阿里云的通义 AI 大模型 API，构建一个简单的 AI 聊天 Web 项目。该项目支持流式传输、多轮对话、会话记录以及代码高亮展示。
1. 环境准备
首先，你需要在你的计算机上安装 Python 和 Flask。可以通过以下命令安装 Flask：
pip install Flask
此外，我们还需要 requests 库与前端代码高亮支持库 highlight.js。用以下命令安装 requests：
pip install requests
2. 创建 Flask 项目
接下来，创建一个新的 Flask 项目结构：
my_chatbot/
│
├── app.py
└── templates/
└── index.html
2.1 app.py
在 app.py 文件中，我们配置 Flask 和与阿里云通义 AI 大模型 API 的连接。
from flask import Flask, render_template, request, jsonify
import requests
app = Flask(__name__)
# 阿里云通义AI大模型 API 配置
API_URL = "https://api.aliyun.com/tongyi/ai/chat" # 请根据实际 API 地址替换
API_KEY = "your_api_key" # 你的 API 密钥
session_history = []
@app.route('/')
def index():
return render_template('index.html')
@app.route('/chat', methods=['POST'])
def chat():
user_message = request.json['message']
session_history.append({"role": "user", "content": user_message})
# 发送消息到阿里云通义 AI 应用程序
response = requests.post(API_URL, json={
"messages": [{"role": "user", "content": user_message}],
"session_history": session_history # 保持会话记录
}, headers={"Authorization": f"Bearer {API_KEY}"})
if response.status_code == 200:
ai_message = response.json()['data']['content']
session_history.append({"role": "ai", "content": ai_message})
return jsonify({"message": ai_message})
else:
return jsonify({"error": "Response error"}), 500
if __name__ == '__main__':
app.run(debug=True)
2.2 index.html
在 templates/index.html 文件中，我们创建前端界面。用户可以输入消息，并接收 AI 的回复。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI 聊天机器人</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/styles/default.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/highlight.min.js"></script>
<style>
body { font-family: Arial, sans-serif; }
#chat { border: 1px solid #ccc; padding: 10px; height: 300px; overflow-y: scroll; }
.message { margin: 5px 0; }
.message.user { color: blue; }
.message.ai { color: green; }
</style>
</head>
<body>
<h1>AI 聊天机器人</h1>
<div id="chat"></div>
<input type="text" id="user-input" placeholder="输入你的消息...">
<button id="send-button">发送</button>
<script>
$(document).ready(function() {
$('#send-button').click(function() {
const message = $('#user-input').val();
$('#chat').append(`<div class="message user">用户: ${message}</div>`);
$('#user-input').val('');
$.post('/chat', JSON.stringify({ message: message }), function(data) {
$('#chat').append(`<div class="message ai">AI: ${data.message}</div>`);
// 调用代码高亮
hljs.highlightAll();
}, 'json')
.fail(function() {
alert('出现错误！请重试。');
});
});
});
</script>
</body>
</html>
3. 启动项目
在项目目录中，使用以下命令启动 Flask 应用：
python app.py
访问 http://127.0.0.1:5000/，你将看到一个简单的用户界面。在输入框中输入消息，点击发送后，AI 将会回复你。
4. 总结
通过本文的介绍，我们实现了一个使用 Flask 框架接入阿里云通义 AI 大模型 API 的简单聊天项目。这个项目支持多轮对话和会话记录，同时利用代码高亮库提升展示效果。你可以根据需要继续扩展功能，比如添加用户身份验证、改进界面设计等。希望这能为你的 AI 项目开发提供一个良好的基础！
