基于Flask框架添加多個AI模型的API并進行交互

更新時間：2025年03月28日 10:48:39 作者：欣然～

這篇文章主要介紹了如何基于 Flask 框架開發(fā) AI 模型 API 管理系統(tǒng),允許用戶添加、刪除不同 AI 模型的 API 密鑰,感興趣的可以了解下

1. 概述

該應用是一個基于 Flask 框架的 AI 模型 API 管理系統(tǒng)，允許用戶添加、刪除不同 AI 模型（如 DeepSeek、阿里云、智譜、百度、科大訊飛等）的 API 密鑰，并通過這些配置好的 API 與相應的 AI 模型進行交互，獲取回復。應用包含后端的 Flask 服務和前端的 HTML 頁面及 JavaScript 腳本。

2. 后端代碼說明

2.1 依賴庫導入

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

Flask：用于構建 Web 應用的輕量級框架。

request：用于處理 HTTP 請求，獲取請求中的數據。

render_template：用于渲染 HTML 模板。

jsonify：用于將 Python 對象轉換為 JSON 格式并作為 HTTP 響應返回。

requests：用于發(fā)送 HTTP 請求，與外部 API 進行交互。

2.2 應用初始化

app = Flask(__name__)

創(chuàng)建一個 Flask 應用實例，__name__參數用于指定應用的名稱。

2.3 API 存儲字典

# 存儲用戶配置的API
apis = {
    "deepseek": None,
    "aliyun": None,
    "zhipu": None,
    "baidu": None,
    "iflytek": None
}

定義一個字典apis，用于存儲不同 AI 模型的 API 密鑰，初始值均為None。

2.4 路由函數

1.首頁路由：

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

當用戶訪問根路徑時，渲染index.html模板，并將apis字典傳遞給模板，以便在頁面上顯示和操作。

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請求，從請求中獲取 JSON 數據，提取model和api_key。

檢查數據的完整性，若缺少必要參數或模型不合法，則返回相應的錯誤信息。

若模型存在于apis字典中，則將對應的 API 密鑰存入字典，并返回成功消息；否則返回錯誤消息。

若發(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請求，從請求中獲取 JSON 數據，提取model。

檢查數據的完整性，若缺少模型參數或模型不合法，則返回相應的錯誤信息。

若模型存在于apis字典中，則將其 API 密鑰設置為None，并返回成功消息；否則返回錯誤消息。

若發(fā)生異常，返回異常信息和 500 狀態(tài)碼。

4.獲取響應路由：

@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:
                # 這里根據不同的模型調用相應的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",  # 需要替換為實際AppID
                        "X-CurTime": str(int(time.time())),
                        "X-Param": json.dumps({"scene": "main"}),
                        "X-CheckSum": ""  # 需要計算校驗和
                    }
                    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()
                    # 根據不同API的響應格式提取回復
                    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  # 添加請求負載用于調試
                    }), 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請求，從請求中獲取 JSON 數據，提取model和prompt。

檢查數據的完整性，若缺少必要參數或模型未配置 API 密鑰，則返回相應的錯誤信息。

根據不同的模型，構造相應的請求頭和請求負載，發(fā)送POST請求到對應的 API 端點。

若 API 調用成功（狀態(tài)碼為 200），根據不同模型的響應格式提取回復內容，并返回成功消息；否則返回錯誤消息，包括狀態(tài)碼、響應文本和請求負載（用于調試）。

若發(fā)生網絡錯誤或其他異常，返回相應的錯誤信息和狀態(tài)碼。

2.5 應用運行

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

當腳本直接運行時，啟動 Flask 應用，并設置debug模式為True，以便在開發(fā)過程中查看錯誤信息和自動重新加載應用。

3. 前端代碼說明

3.1 HTML 結構

頭部部分：

<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>

設置頁面的字符編碼、視口等基本信息。

引入 Bootstrap 的 CSS 樣式表，用于頁面布局和樣式。

自定義一些 CSS 樣式，用于聊天窗口、消息顯示、錯誤消息顯示等。

主體部分：

<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>

頁面主體部分使用 Bootstrap 的柵格系統(tǒng)布局。

左側部分用于 API 管理，包含添加 API 和移除 API 的表單，表單中包含模型選擇和 API 密鑰輸入框。

右側部分用于與 AI 聊天，包含聊天窗口和發(fā)送請求的表單，表單中包含模型選擇和提示輸入框。

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 表單的提交事件，阻止表單的默認提交行為。

獲取用戶選擇的模型和輸入的 API 密鑰。

使用fetch發(fā)送POST請求到/add_api端點，傳遞模型和 API 密鑰的 JSON 數據。

處理響應，若響應失敗，拋出錯誤；若成功，顯示提示信息并清空 API 密鑰輸入框；若發(fā)生異常，顯示錯誤提示。

app.py代碼

from flask import Flask, request, render_template, jsonify
import requests
 
app = Flask(__name__)
 
# 存儲用戶配置的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:
                # 這里根據不同的模型調用相應的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",  # 需要替換為實際AppID
                        "X-CurTime": str(int(time.time())),
                        "X-Param": json.dumps({"scene": "main"}),
                        "X-CheckSum": ""  # 需要計算校驗和
                    }
                    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()
                    # 根據不同API的響應格式提取回復
                    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  # 添加請求負載用于調試
                    }), 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結構不變，只修改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'}`);
        });
    });
 
    // 獲取響應
    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 {
                // 顯示更詳細的錯誤信息
                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>

到此這篇關于基于Flask框架添加多個AI模型的API并進行交互的文章就介紹到這了,更多相關Flask AI模型API管理內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

Flask
API

python溫度轉換華氏溫度實現代碼
這篇文章主要介紹了python溫度轉換華氏溫度實現代碼內容，有需要的朋友們可以測試下。
2020-12-12
python3 下載網絡圖片代碼實例
這篇文章主要介紹了python3 下載網絡圖片代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2019-08-08
Python?PaddleGAN實現調整照片人物年齡
這篇文章主要介紹了通過PaddleGAN實現照片人物的老年化和年輕化處理，文中的示例代碼講解有效，對我們學習或工作有一定的幫助，感興趣的可以學習一下
2021-12-12
Python字符遍歷的藝術
通常我們要遍歷一個字符串中的每個字符，都要先獲取字符串的長度，然后用一個For循環(huán)把每個字符取出，進行處理。但是，又是我們的Python，為我們提供了很多便捷的方式去遍歷一個字符串中的字符。
2008-09-09
python Graham求凸包問題并畫圖操作
這篇文章主要介紹了python Graham求凸包問題并畫圖操作，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2021-06-06
Anaconda環(huán)境GDAL庫基于whl文件的配置方法
這篇文章主要介紹了Anaconda環(huán)境GDAL庫基于whl文件的配置方法,我們介紹了基于conda?install命令直接聯網安裝GDAL庫的方法，本文給大家介紹的非常詳細，需要的朋友可以參考下
2023-04-04
Python實現貪心算法的示例
這篇文章主要介紹了Python實現貪心算法的示例，幫助大家更好的理解和學習使用python，感興趣的朋友可以了解下
2021-04-04
Python3實現zip分卷壓縮過程解析
這篇文章主要介紹了Python3實現zip分卷壓縮過程解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2019-10-10
Python OpenCV實現視頻追蹤
這篇文章主要為大家詳細介紹了Python OpenCV實現視頻追蹤，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-08-08
python 爬蟲一鍵爬取淘寶天貓寶貝頁面主圖顏色圖和詳情圖的教程
今天小編就為大家分享一篇python 爬蟲一鍵爬取淘寶天貓寶貝頁面主圖顏色圖和詳情圖的教程，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-05-05