基于Flask框架添加多個(gè)AI模型的API并進(jìn)行交互
更新時(shí)間：2025年03月28日 10:48:39 作者：欣然～
這篇文章主要介紹了如何基于 Flask 框架開發(fā) AI 模型 API 管理系統(tǒng),允許用戶添加、刪除不同 AI 模型的 API 密鑰,感興趣的可以了解下
1. 概述
該應(yīng)用是一個(gè)基于 Flask 框架的 AI 模型 API 管理系統(tǒng)，允許用戶添加、刪除不同 AI 模型（如 DeepSeek、阿里云、智譜、百度、科大訊飛等）的 API 密鑰，并通過(guò)這些配置好的 API 與相應(yīng)的 AI 模型進(jìn)行交互，獲取回復(fù)。應(yīng)用包含后端的 Flask 服務(wù)和前端的 HTML 頁(yè)面及 JavaScript 腳本。
2. 后端代碼說(shuō)明
2.1 依賴庫(kù)導(dǎo)入
from flask import Flask, request, render_template, jsonify import requests
Flask：用于構(gòu)建 Web 應(yīng)用的輕量級(jí)框架。
request：用于處理 HTTP 請(qǐng)求，獲取請(qǐng)求中的數(shù)據(jù)。
render_template：用于渲染 HTML 模板。
jsonify：用于將 Python 對(duì)象轉(zhuǎn)換為 JSON 格式并作為 HTTP 響應(yīng)返回。
requests：用于發(fā)送 HTTP 請(qǐng)求，與外部 API 進(jìn)行交互。
2.2 應(yīng)用初始化
app = Flask(__name__)
創(chuàng)建一個(gè) Flask 應(yīng)用實(shí)例，__name__參數(shù)用于指定應(yīng)用的名稱。
2.3 API 存儲(chǔ)字典
# 存儲(chǔ)用戶配置的API
apis = {
"deepseek": None,
"aliyun": None,
"zhipu": None,
"baidu": None,
"iflytek": None
}
定義一個(gè)字典apis，用于存儲(chǔ)不同 AI 模型的 API 密鑰，初始值均為None。
2.4 路由函數(shù)
1.首頁(yè)路由：
@app.route('/')
def index():
return render_template('index.html', apis=apis)
當(dāng)用戶訪問(wèn)根路徑時(shí)，渲染index.html模板，并將apis字典傳遞給模板，以便在頁(yè)面上顯示和操作。
2.添加 API 路由：
@app.route('/add_api', methods=['POST'])
def add_api():
try:
data = request.get_json()
if not data:
return jsonify({"status": "error", "message": "No data provided"}), 400
model = data.get('model')
api_key = data.get('api_key')
if not model or not api_key:
return jsonify({"status": "error", "message": "Missing required parameters"}), 400
if model in apis:
apis[model] = api_key
return jsonify({"status": "success", "message": f"{model} API added successfully!"})
else:
return jsonify({"status": "error", "message": "Invalid model specified."}), 400
except Exception as e:
return jsonify({"status": "error", "message": str(e)}), 500處理POST請(qǐng)求，從請(qǐng)求中獲取 JSON 數(shù)據(jù)，提取model和api_key。
檢查數(shù)據(jù)的完整性，若缺少必要參數(shù)或模型不合法，則返回相應(yīng)的錯(cuò)誤信息。
若模型存在于apis字典中，則將對(duì)應(yīng)的 API 密鑰存入字典，并返回成功消息；否則返回錯(cuò)誤消息。
若發(fā)生異常，返回異常信息和 500 狀態(tài)碼。
3.刪除 API 路由：
@app.route('/remove_api', methods=['POST'])
def remove_api():
try:
data = request.get_json()
if not data:
return jsonify({"status": "error", "message": "No data provided"}), 400
model = data.get('model')
if not model:
return jsonify({"status": "error", "message": "Missing model parameter"}), 400
if model in apis:
apis[model] = None
return jsonify({"status": "success", "message": f"{model} API removed successfully!"})
else:
return jsonify({"status": "error", "message": "Invalid model specified."}), 400
except Exception as e:
return jsonify({"status": "error", "message": str(e)}), 500處理POST請(qǐng)求，從請(qǐng)求中獲取 JSON 數(shù)據(jù)，提取model。
檢查數(shù)據(jù)的完整性，若缺少模型參數(shù)或模型不合法，則返回相應(yīng)的錯(cuò)誤信息。
若模型存在于apis字典中，則將其 API 密鑰設(shè)置為None，并返回成功消息；否則返回錯(cuò)誤消息。
若發(fā)生異常，返回異常信息和 500 狀態(tài)碼。
4.獲取響應(yīng)路由：
@app.route('/get_response', methods=['POST'])
def get_response():
try:
data = request.get_json()
if not data:
return jsonify({"status": "error", "message": "No data provided"}), 400
model = data.get('model')
prompt = data.get('prompt')
if not model or not prompt:
return jsonify({"status": "error", "message": "Missing required parameters"}), 400
if model in apis and apis[model]:
try:
# 這里根據(jù)不同的模型調(diào)用相應(yīng)的API
if model == "deepseek":
headers = {
"Authorization": f"Bearer {apis[model]}",
"Content-Type": "application/json"
}
payload = {
"model": "deepseek-chat",
"messages": [{"role": "user", "content": prompt}],
"temperature": 0.7
}
response = requests.post(
"https://api.deepseek.com/v1/chat/completions",
headers=headers,
json=payload
)
elif model == "aliyun":
headers = {
"Authorization": f"Bearer {apis[model]}",
"Content-Type": "application/json"
}
payload = {
"model": "bailian",
"input": {
"messages": [{"role": "user", "content": prompt}]
}
}
response = requests.post(
"https://bailian.aliyuncs.com/v2/app/completions",
headers=headers,
json=payload
)
elif model == "zhipu":
headers = {
"Authorization": f"Bearer {apis[model]}",
"Content-Type": "application/json"
}
payload = {
"model": "chatglm_turbo",
"messages": [{"role": "user", "content": prompt}]
}
response = requests.post(
"https://open.bigmodel.cn/api/paas/v3/model-api/chatglm_turbo/invoke",
headers=headers,
json=payload
)
elif model == "baidu":
headers = {
"Content-Type": "application/json",
"Accept": "application/json"
}
payload = {
"messages": [{"role": "user", "content": prompt}]
}
response = requests.post(
f"https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/completions?access_token={apis[model]}",
headers=headers,
json=payload
)
elif model == "iflytek":
headers = {
"Content-Type": "application/json",
"X-Appid": "your_app_id", # 需要替換為實(shí)際AppID
"X-CurTime": str(int(time.time())),
"X-Param": json.dumps({"scene": "main"}),
"X-CheckSum": "" # 需要計(jì)算校驗(yàn)和
}
payload = {
"text": prompt
}
response = requests.post(
"https://api.xfyun.cn/v1/aiui/v1/text",
headers=headers,
json=payload
)
if response.status_code == 200:
response_data = response.json()
# 根據(jù)不同API的響應(yīng)格式提取回復(fù)
if model == "deepseek":
reply = response_data['choices'][0]['message']['content']
elif model == "aliyun":
reply = response_data['output']['text']
elif model == "zhipu":
reply = response_data['data']['choices'][0]['content']
elif model == "baidu":
reply = response_data['result']
elif model == "iflytek":
reply = response_data['data'][0]['content']
return jsonify({
"status": "success",
"response": reply,
"model": model
})
else:
return jsonify({
"status": "error",
"message": f"API call failed with status code {response.status_code}",
"response_text": response.text,
"request_payload": payload # 添加請(qǐng)求負(fù)載用于調(diào)試
}), response.status_code
except requests.exceptions.RequestException as e:
return jsonify({
"status": "error",
"message": f"Network error: {str(e)}"
}), 500
except Exception as e:
return jsonify({
"status": "error",
"message": str(e),
"error_type": type(e).__name__
}), 500
else:
return jsonify({
"status": "error",
"message": "API not configured or invalid model."
}), 400
except Exception as e:
return jsonify({"status": "error", "message": str(e)}), 500處理POST請(qǐng)求，從請(qǐng)求中獲取 JSON 數(shù)據(jù)，提取model和prompt。
檢查數(shù)據(jù)的完整性，若缺少必要參數(shù)或模型未配置 API 密鑰，則返回相應(yīng)的錯(cuò)誤信息。
根據(jù)不同的模型，構(gòu)造相應(yīng)的請(qǐng)求頭和請(qǐng)求負(fù)載，發(fā)送POST請(qǐng)求到對(duì)應(yīng)的 API 端點(diǎn)。
若 API 調(diào)用成功（狀態(tài)碼為 200），根據(jù)不同模型的響應(yīng)格式提取回復(fù)內(nèi)容，并返回成功消息；否則返回錯(cuò)誤消息，包括狀態(tài)碼、響應(yīng)文本和請(qǐng)求負(fù)載（用于調(diào)試）。
若發(fā)生網(wǎng)絡(luò)錯(cuò)誤或其他異常，返回相應(yīng)的錯(cuò)誤信息和狀態(tài)碼。
2.5 應(yīng)用運(yùn)行
if __name__ == '__main__':
app.run(debug=True)
當(dāng)腳本直接運(yùn)行時(shí)，啟動(dòng) Flask 應(yīng)用，并設(shè)置debug模式為True，以便在開發(fā)過(guò)程中查看錯(cuò)誤信息和自動(dòng)重新加載應(yīng)用。
3. 前端代碼說(shuō)明
3.1 HTML 結(jié)構(gòu)
頭部部分：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Model API Manager</title>
<link rel="external nofollow" rel="external nofollow" rel="stylesheet">
<style>
.chat-window {
height: 400px;
overflow-y: auto;
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 20px;
background-color: #f9f9f9;
}
.message {
margin-bottom: 10px;
padding: 8px;
border-radius: 5px;
}
.user-message {
background-color: #e3f2fd;
margin-left: 20%;
}
.bot-message {
background-color: #f1f1f1;
margin-right: 20%;
}
.model-info {
font-size: 0.8em;
color: #666;
margin-top: 5px;
}
.error-message {
background-color: #ffebee;
color: #d32f2f;
}
</style>
</head>設(shè)置頁(yè)面的字符編碼、視口等基本信息。
引入 Bootstrap 的 CSS 樣式表，用于頁(yè)面布局和樣式。
自定義一些 CSS 樣式，用于聊天窗口、消息顯示、錯(cuò)誤消息顯示等。
主體部分：
<body>
<div class="container mt-5">
<h1 class="text-center mb-4">AI Model API Manager</h1>
<div class="row">
<div class="col-md-6">
<div class="card mb-3">
<div class="card-header">API Management</div>
<div class="card-body">
<form id="addApiForm" class="mb-3">
<div class="mb-3">
<label for="addModel" class="form-label">Model:</label>
<select id="addModel" name="model" class="form-select">
<option value="deepseek">DeepSeek</option>
<option value="aliyun">Aliyun</option>
<option value="zhipu">Zhipu</option>
<option value="baidu">Baidu</option>
<option value="iflytek">Iflytek</option>
</select>
</div>
<div class="mb-3">
<label for="api_key" class="form-label">API Key:</label>
<input type="text" id="api_key" name="api_key" class="form-control" required>
</div>
<button type="submit" class="btn btn-primary">Add API</button>
</form>
<form id="removeApiForm">
<div class="mb-3">
<label for="removeModel" class="form-label">Model:</label>
<select id="removeModel" name="model" class="form-select">
<option value="deepseek">DeepSeek</option>
<option value="aliyun">Aliyun</option>
<option value="zhipu">Zhipu</option>
<option value="baidu">Baidu</option>
<option value="iflytek">Iflytek</option>
</select>
</div>
<button type="submit" class="btn btn-danger">Remove API</button>
</form>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-header">Chat with AI</div>
<div class="card-body">
<div class="chat-window" id="chatWindow"></div>
<form id="getResponseForm">
<div class="mb-3">
<label for="chatModel" class="form-label">Model:</label>
<select id="chatModel" name="model" class="form-select">
<option value="deepseek">DeepSeek</option>
<option value="aliyun">Aliyun</option>
<option value="zhipu">Zhipu</option>
<option value="baidu">Baidu</option>
<option value="iflytek">Iflytek</option>
</select>
</div>
<div class="mb-3">
<label for="prompt" class="form-label">Prompt:</label>
<input type="text" id="prompt" name="prompt" class="form-control" required>
</div>
<button type="submit" class="btn btn-success">Get Response</button>
</form>
</div>
</div>
</div>
</div>
</div>頁(yè)面主體部分使用 Bootstrap 的柵格系統(tǒng)布局。
左側(cè)部分用于 API 管理，包含添加 API 和移除 API 的表單，表單中包含模型選擇和 API 密鑰輸入框。
右側(cè)部分用于與 AI 聊天，包含聊天窗口和發(fā)送請(qǐng)求的表單，表單中包含模型選擇和提示輸入框。
3.2 JavaScript 腳本
添加 API 功能：
document.getElementById('addApiForm').addEventListener('submit', function(e) {
e.preventDefault();
const model = document.getElementById('addModel').value;
const apiKey = document.getElementById('api_key').value;
fetch('/add_api', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
model: model,
api_key: apiKey
})
})
.then(response => {
if (!response.ok) {
return response.json().then(err => { throw err; });
}
return response.json();
})
.then(data => {
alert(data.message);
document.getElementById('api_key').value = '';
})
.catch(error => {
alert(`Error: ${error.message || 'Failed to add API'}`);
});
});監(jiān)聽添加 API 表單的提交事件，阻止表單的默認(rèn)提交行為。
獲取用戶選擇的模型和輸入的 API 密鑰。
使用fetch發(fā)送POST請(qǐng)求到/add_api端點(diǎn)，傳遞模型和 API 密鑰的 JSON 數(shù)據(jù)。
處理響應(yīng)，若響應(yīng)失敗，拋出錯(cuò)誤；若成功，顯示提示信息并清空 API 密鑰輸入框；若發(fā)生異常，顯示錯(cuò)誤提示。
app.py代碼
from flask import Flask, request, render_template, jsonify
import requests
app = Flask(__name__)
# 存儲(chǔ)用戶配置的API
apis = {
"deepseek": None,
"aliyun": None,
"zhipu": None,
"baidu": None,
"iflytek": None
}
@app.route('/')
def index():
return render_template('index.html', apis=apis)
@app.route('/add_api', methods=['POST'])
def add_api():
try:
data = request.get_json()
if not data:
return jsonify({"status": "error", "message": "No data provided"}), 400
model = data.get('model')
api_key = data.get('api_key')
if not model or not api_key:
return jsonify({"status": "error", "message": "Missing required parameters"}), 400
if model in apis:
apis[model] = api_key
return jsonify({"status": "success", "message": f"{model} API added successfully!"})
else:
return jsonify({"status": "error", "message": "Invalid model specified."}), 400
except Exception as e:
return jsonify({"status": "error", "message": str(e)}), 500
@app.route('/remove_api', methods=['POST'])
def remove_api():
try:
data = request.get_json()
if not data:
return jsonify({"status": "error", "message": "No data provided"}), 400
model = data.get('model')
if not model:
return jsonify({"status": "error", "message": "Missing model parameter"}), 400
if model in apis:
apis[model] = None
return jsonify({"status": "success", "message": f"{model} API removed successfully!"})
else:
return jsonify({"status": "error", "message": "Invalid model specified."}), 400
except Exception as e:
return jsonify({"status": "error", "message": str(e)}), 500
@app.route('/get_response', methods=['POST'])
def get_response():
try:
data = request.get_json()
if not data:
return jsonify({"status": "error", "message": "No data provided"}), 400
model = data.get('model')
prompt = data.get('prompt')
if not model or not prompt:
return jsonify({"status": "error", "message": "Missing required parameters"}), 400
if model in apis and apis[model]:
try:
# 這里根據(jù)不同的模型調(diào)用相應(yīng)的API
if model == "deepseek":
headers = {
"Authorization": f"Bearer {apis[model]}",
"Content-Type": "application/json"
}
payload = {
"model": "deepseek-chat",
"messages": [{"role": "user", "content": prompt}],
"temperature": 0.7
}
response = requests.post(
"https://api.deepseek.com/v1/chat/completions",
headers=headers,
json=payload
)
elif model == "aliyun":
headers = {
"Authorization": f"Bearer {apis[model]}",
"Content-Type": "application/json"
}
payload = {
"model": "bailian",
"input": {
"messages": [{"role": "user", "content": prompt}]
}
}
response = requests.post(
"https://bailian.aliyuncs.com/v2/app/completions",
headers=headers,
json=payload
)
elif model == "zhipu":
headers = {
"Authorization": f"Bearer {apis[model]}",
"Content-Type": "application/json"
}
payload = {
"model": "chatglm_turbo",
"messages": [{"role": "user", "content": prompt}]
}
response = requests.post(
"https://open.bigmodel.cn/api/paas/v3/model-api/chatglm_turbo/invoke",
headers=headers,
json=payload
)
elif model == "baidu":
headers = {
"Content-Type": "application/json",
"Accept": "application/json"
}
payload = {
"messages": [{"role": "user", "content": prompt}]
}
response = requests.post(
f"https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/completions?access_token={apis[model]}",
headers=headers,
json=payload
)
elif model == "iflytek":
headers = {
"Content-Type": "application/json",
"X-Appid": "your_app_id", # 需要替換為實(shí)際AppID
"X-CurTime": str(int(time.time())),
"X-Param": json.dumps({"scene": "main"}),
"X-CheckSum": "" # 需要計(jì)算校驗(yàn)和
}
payload = {
"text": prompt
}
response = requests.post(
"https://api.xfyun.cn/v1/aiui/v1/text",
headers=headers,
json=payload
)
if response.status_code == 200:
response_data = response.json()
# 根據(jù)不同API的響應(yīng)格式提取回復(fù)
if model == "deepseek":
reply = response_data['choices'][0]['message']['content']
elif model == "aliyun":
reply = response_data['output']['text']
elif model == "zhipu":
reply = response_data['data']['choices'][0]['content']
elif model == "baidu":
reply = response_data['result']
elif model == "iflytek":
reply = response_data['data'][0]['content']
return jsonify({
"status": "success",
"response": reply,
"model": model
})
else:
return jsonify({
"status": "error",
"message": f"API call failed with status code {response.status_code}",
"response_text": response.text,
"request_payload": payload # 添加請(qǐng)求負(fù)載用于調(diào)試
}), response.status_code
except requests.exceptions.RequestException as e:
return jsonify({
"status": "error",
"message": f"Network error: {str(e)}"
}), 500
except Exception as e:
return jsonify({
"status": "error",
"message": str(e),
"error_type": type(e).__name__
}), 500
else:
return jsonify({
"status": "error",
"message": "API not configured or invalid model."
}), 400
except Exception as e:
return jsonify({"status": "error", "message": str(e)}), 500
if __name__ == '__main__':
app.run(debug=True)index.html代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Model API Manager</title>
<link rel="external nofollow" rel="external nofollow" rel="stylesheet">
<style>
.chat-window {
height: 400px;
overflow-y: auto;
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 20px;
background-color: #f9f9f9;
}
.message {
margin-bottom: 10px;
padding: 8px;
border-radius: 5px;
}
.user-message {
background-color: #e3f2fd;
margin-left: 20%;
}
.bot-message {
background-color: #f1f1f1;
margin-right: 20%;
}
.model-info {
font-size: 0.8em;
color: #666;
margin-top: 5px;
}
.error-message {
background-color: #ffebee;
color: #d32f2f;
}
</style>
</head>
<body>
<div class="container mt-5">
<h1 class="text-center mb-4">AI Model API Manager</h1>
<div class="row">
<div class="col-md-6">
<div class="card mb-3">
<div class="card-header">API Management</div>
<div class="card-body">
<form id="addApiForm" class="mb-3">
<div class="mb-3">
<label for="addModel" class="form-label">Model:</label>
<select id="addModel" name="model" class="form-select">
<option value="deepseek">DeepSeek</option>
<option value="aliyun">Aliyun</option>
<option value="zhipu">Zhipu</option>
<option value="baidu">Baidu</option>
<option value="iflytek">Iflytek</option>
</select>
</div>
<div class="mb-3">
<label for="api_key" class="form-label">API Key:</label>
<input type="text" id="api_key" name="api_key" class="form-control" required>
</div>
<button type="submit" class="btn btn-primary">Add API</button>
</form>
<form id="removeApiForm">
<div class="mb-3">
<label for="removeModel" class="form-label">Model:</label>
<select id="removeModel" name="model" class="form-select">
<option value="deepseek">DeepSeek</option>
<option value="aliyun">Aliyun</option>
<option value="zhipu">Zhipu</option>
<option value="baidu">Baidu</option>
<option value="iflytek">Iflytek</option>
</select>
</div>
<button type="submit" class="btn btn-danger">Remove API</button>
</form>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-header">Chat with AI</div>
<div class="card-body">
<div class="chat-window" id="chatWindow"></div>
<form id="getResponseForm">
<div class="mb-3">
<label for="chatModel" class="form-label">Model:</label>
<select id="chatModel" name="model" class="form-select">
<option value="deepseek">DeepSeek</option>
<option value="aliyun">Aliyun</option>
<option value="zhipu">Zhipu</option>
<option value="baidu">Baidu</option>
<option value="iflytek">Iflytek</option>
</select>
</div>
<div class="mb-3">
<label for="prompt" class="form-label">Prompt:</label>
<input type="text" id="prompt" name="prompt" class="form-control" required>
</div>
<button type="submit" class="btn btn-success">Get Response</button>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- 保持之前的HTML結(jié)構(gòu)不變，只修改JavaScript部分 -->
<script>
// 添加API
document.getElementById('addApiForm').addEventListener('submit', function(e) {
e.preventDefault();
const model = document.getElementById('addModel').value;
const apiKey = document.getElementById('api_key').value;
fetch('/add_api', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
model: model,
api_key: apiKey
})
})
.then(response => {
if (!response.ok) {
return response.json().then(err => { throw err; });
}
return response.json();
})
.then(data => {
alert(data.message);
document.getElementById('api_key').value = '';
})
.catch(error => {
alert(`Error: ${error.message || 'Failed to add API'}`);
});
});
// 移除API
document.getElementById('removeApiForm').addEventListener('submit', function(e) {
e.preventDefault();
const model = document.getElementById('removeModel').value;
fetch('/remove_api', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
model: model
})
})
.then(response => {
if (!response.ok) {
return response.json().then(err => { throw err; });
}
return response.json();
})
.then(data => {
alert(data.message);
})
.catch(error => {
alert(`Error: ${error.message || 'Failed to remove API'}`);
});
});
// 獲取響應(yīng)
document.getElementById('getResponseForm').addEventListener('submit', function(e) {
e.preventDefault();
const model = document.getElementById('chatModel').value;
const prompt = document.getElementById('prompt').value;
const chatWindow = document.getElementById('chatWindow');
// 添加用戶消息
chatWindow.innerHTML += `
<div class="message user-message">
<strong>You:</strong> ${prompt}
</div>
`;
const submitBtn = document.querySelector('#getResponseForm button[type="submit"]');
submitBtn.disabled = true;
fetch('/get_response', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
model: model,
prompt: prompt
})
})
.then(response => {
if (!response.ok) {
return response.json().then(err => { throw err; });
}
return response.json();
})
.then(data => {
if (data.status === "success") {
chatWindow.innerHTML += `
<div class="message bot-message">
<strong>Bot (${data.model}):</strong> ${data.response}
</div>
`;
} else {
// 顯示更詳細(xì)的錯(cuò)誤信息
let errorMsg = data.message;
if (data.response_text) {
try {
const errorData = JSON.parse(data.response_text);
errorMsg += ` - ${errorData.error || errorData.message || ''}`;
} catch (e) {
errorMsg += ` - ${data.response_text}`;
}
}
chatWindow.innerHTML += `
<div class="message error-message">
<strong>Error:</strong> ${errorMsg}
</div>
`;
}
chatWindow.scrollTop = chatWindow.scrollHeight;
document.getElementById('prompt').value = '';
})
.catch(error => {
let errorMsg = error.message || 'Failed to get response';
if (error.response_text) {
errorMsg += ` - ${error.response_text}`;
}
chatWindow.innerHTML += `
<div class="message error-message">
<strong>Error:</strong> ${errorMsg}
</div>
`;
chatWindow.scrollTop = chatWindow.scrollHeight;
})
.finally(() => {
submitBtn.disabled = false;
});
});
</script>
</body>
</html>到此這篇關(guān)于基于Flask框架添加多個(gè)AI模型的API并進(jìn)行交互的文章就介紹到這了,更多相關(guān)Flask AI模型API管理內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Python docx庫(kù)刪除復(fù)制paragraph及行高設(shè)置圖片插入示例
這篇文章主要為大家介紹了Python docx庫(kù)刪除復(fù)制paragraph及行高設(shè)置圖片插入操作實(shí)現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
Python matplotlib的使用并自定義colormap的方法
今天小編就為大家分享一篇Python matplotlib的使用并自定義colormap的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
這篇文章主要為大家詳細(xì)介紹了Python讀寫Excel表格的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03
這篇文章主要講述了幾個(gè)例子,通過(guò)簡(jiǎn)單的demo讓有寫代碼經(jīng)驗(yàn)的你能夠快速的入門Python的使用,大大提升你的學(xué)習(xí)效率2021-06-06
Pandas借助Numpy實(shí)現(xiàn)優(yōu)化的條件檢索代碼
Numpy其實(shí)是最早的處理數(shù)據(jù)的Python庫(kù),它的核心ndarray對(duì)象,是一個(gè)高效的n維數(shù)組結(jié)構(gòu),本文主要介紹了Pandas如何借助Numpy優(yōu)化條件檢索,感興趣的可以了解下2024-03-03
Python實(shí)現(xiàn)鏈表反轉(zhuǎn)的方法分析【迭代法與遞歸法】
這篇文章主要介紹了Python實(shí)現(xiàn)鏈表反轉(zhuǎn)的方法,結(jié)合實(shí)例形式分析了Python迭代法與遞歸法實(shí)現(xiàn)鏈表反轉(zhuǎn)的相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2020-02-02
本文主要介紹了numpy.unique()使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
python實(shí)現(xiàn)智能語(yǔ)音天氣預(yù)報(bào)
今天小編就為大家分享一篇python實(shí)現(xiàn)智能語(yǔ)音天氣預(yù)報(bào)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-12-12
python驗(yàn)證碼識(shí)別教程之灰度處理、二值化、降噪與tesserocr識(shí)別
這篇文章主要給大家介紹了關(guān)于python驗(yàn)證碼識(shí)別教程之灰度處理、二值化、降噪與tesserocr識(shí)別的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-06-06
很多時(shí)候需要拆分PDF，但是大部分需要付費(fèi)，免費(fèi)的限制很多，本文就使用Python快速拆分PDF文檔，具有一定的參考價(jià)值，感興趣的可以了解一下2021-07-07