1.環(huán)境準備

1.1安裝相應包

1.1.1  安裝Flask 

Flask 是一個輕量級的 Python Web 框架，適用于快速構(gòu)建 Web 應用和 API。它提供了基本的 Web 應用功能，比如路由、請求處理、模板渲染等，并且易于擴展。Flask 通常用于構(gòu)建 RESTful API、Web 應用等。

輕量、易上手、靈活，可以根據(jù)需要選擇添加擴展。

pip install Flask

1.1.2 安裝Flask-CORS（允許跨域請求）

Flask-CORS 是 Flask 的一個擴展，允許跨域請求（CORS，Cross-Origin Resource Sharing）。當你的前端和后端分布在不同的域名或端口時，需要啟用 CORS，以允許瀏覽器進行跨域請求。Flask-CORS 提供了方便的配置方式來允許或限制哪些域名能夠訪問你的 API。

簡化了 Flask 應用的跨域資源共享配置，適合構(gòu)建前后端分離的應用。

pip install flask-cors

1.1.3 安裝OpenAI

OpenAI 是一個 Python 客戶端庫，用于與 OpenAI 的 API 進行交互。通過該庫，開發(fā)者可以訪問 OpenAI 提供的各種模型，如 GPT-3、Codex 和 DALL·E 等，進行文本生成、代碼生成、圖像生成等操作。它通常用于構(gòu)建基于 OpenAI 模型的應用，如聊天機器人、智能助手等。

簡化了與 OpenAI API 的交互，提供了便捷的接口調(diào)用方式，支持各種 OpenAI 提供的 AI 模型。

pip install openai

1.2 注冊相應服務(wù)商的開發(fā)者賬戶（我這里選擇的是KiMi）

這是官網(wǎng)鏈接 Moonshot AI：https://www.moonshot.cn/

選擇Kimi開放平臺，進去注冊登錄，會有15元的贈送余額，供學習完全夠用。

1.3獲取API key

在左側(cè)導航欄找到API key管理-->點擊新建

這時會彈出一個表單，隨便輸入名字即可，然后點擊確認

點擊確認后會出現(xiàn)你的API key,這里一定要記得保存，否則只有重新創(chuàng)建。

2.測試請求

2.1打開開發(fā)者文檔，選擇Chat

2.2然后找到下面的單輪對話，將代碼進行復制

2.3 打開編輯器（我用的PyCharm）測試

創(chuàng)建一個python文件進行測式，將上面復制的代碼粘貼過來，然后將你保存的API key 將其替換

  如果前面已經(jīng)安裝了OpenAI就可以直接運行了，運行后控制臺會輸出相應信息

此時已經(jīng)成功用上API的服務(wù)了

3.Flask改造

1. 導入必要的包

from flask import Flask, request, jsonify
from flask_cors import CORS
from openai import OpenAI

• Flask：用來創(chuàng)建 Web 應用。Flask 是一個輕量級的 Web 框架，用于構(gòu)建 HTTP 服務(wù)。
• request：用于獲取 HTTP 請求中的數(shù)據(jù)，通常是從客戶端（例如瀏覽器）發(fā)來的 POST 請求。
• jsonify：用于將 Python 對象轉(zhuǎn)換為 JSON 格式的響應，方便與前端進行數(shù)據(jù)交換。
• CORS：這個包允許跨域請求，意味著不同域之間的前端和后端可以相互通信，解決瀏覽器的同源策略問題。
• OpenAI：這是與 OpenAI API 進行交互的客戶端庫，通過它可以向 OpenAI 提交請求并獲取 AI 模型的響應。

2. 初始化 OpenAI 客戶端 

client = OpenAI(
    api_key="這里換成你自己的API key",
    base_url="https://api.moonshot.cn/v1",
)

 client：通過 OpenAI 客戶端類實例化一個對象，用來訪問 OpenAI 的 API。api_key 是訪問 OpenAI API 所需的認證密鑰，base_url 是 API 的基礎(chǔ) URL。

3. 初始化聊天歷史

history = [
    {"role": "system",
     "content": "你是 Kimi，由 Moonshot AI 提供的人工智能助手，你更擅長中文和英文的對話。你會為用戶提供安全，有幫助，準確的回答。同時，你會拒絕一切涉及恐怖主義，種族歧視，黃色暴力等問題的回答。Moonshot AI 為專有名詞，不可翻譯成其他語言。。"}
]

 history：這個列表保存了聊天的歷史記錄，最初只有一個系統(tǒng)角色的消息，內(nèi)容描述了機器人的角色和對話規(guī)則。隨著對話進行，歷史記錄會更新，包含用戶和助手的對話內(nèi)容。

4. Flask 應用初始化

app = Flask(__name__)
CORS(app)  # 啟用跨域請求支持

app：創(chuàng)建一個 Flask 應用實例，__name__ 是 Flask 需要的參數(shù)，告訴它在哪里找到應用的根目錄。

CORS(app)：啟用跨域資源共享支持，這樣前端可以通過不同域的請求訪問該 API 服務(wù)。

5. 定義聊天函數(shù)

def chat(query):
    history.append({
        "role": "user",
        "content": query
    })
    completion = client.chat.completions.create(
        model="moonshot-v1-8k",
        messages=history,
        temperature=0.3,
    )
    result = completion.choices[0].message.content
    history.append({
        "role": "assistant",
        "content": result
    })
    return result

chat(query)：這是主要的聊天邏輯函數(shù)，接受用戶的查詢 query，并將其添加到歷史記錄中。

• 通過調(diào)用 OpenAI API 的 client.chat.completions.create 方法，發(fā)送歷史對話記錄給 AI 模型進行處理。
• model="moonshot-v1-8k"：指定使用的 AI 模型，這里是自定義的一個 "moonshot-v1-8k" 模型。
• messages=history：將所有的對話歷史傳給模型，讓其能夠根據(jù)上下文生成回答。
• temperature=0.3：控制生成文本的隨機性，值越低，生成的文本越保守，越符合預期。
• 獲取模型生成的響應并將其添加到歷史記錄中，最終返回生成的文本內(nèi)容。

6. 定義 API 路由 

@app.route('/AIChat', methods=['POST'])
def AIChat():
    # 獲取前端發(fā)送的 JSON 數(shù)據(jù)
    data = request.json
    if 'query' not in data:
        return jsonify({"error": "Missing 'query' parameter"}), 400

    query = data['query']
    try:
        # 調(diào)用 chat 函數(shù)
        response = chat(query)
        return jsonify({"response": response})
    except Exception as e:
        return jsonify({"error": str(e)}), 500

@app.route('/AIChat', methods=['POST'])：這是 Flask 中定義 API 路由的方式，/AIChat 路由接受 POST 請求，即客戶端發(fā)送數(shù)據(jù)到這個路由時，會執(zhí)行 AIChat() 函數(shù)。

• request.json：從客戶端請求中提取 JSON 數(shù)據(jù)。
• 如果 query 參數(shù)缺失，返回 400 錯誤和錯誤信息。
• 否則，調(diào)用 chat(query) 函數(shù)生成響應，并返回 JSON 格式的結(jié)果。如果發(fā)生異常，則返回 500 錯誤和異常信息。

7. 啟動 Flask 服務(wù)

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000, debug=True)

app.run(...)：啟動 Flask Web 服務(wù)器，監(jiān)聽 0.0.0.0 地址上的 5000 端口，使得外部訪問應用。debug=True 可以啟用調(diào)試模式，這樣 Flask 在開發(fā)過程中會自動重新加載代碼，方便開發(fā)者調(diào)試。

4.完整代碼

注： 一定要

        換自己的API Key!!!

        換自己的API Key!!!

        換自己的API Key!!!

from flask import Flask, request, jsonify
from flask_cors import CORS
from openai import OpenAI

# 初始化 OpenAI 客戶端
client = OpenAI(
    api_key="換成你自己的API key",
    base_url="https://api.moonshot.cn/v1",
)

# 初始化聊天歷史
history = [
    {"role": "system",
     "content": "你是 Kimi，由 Moonshot AI 提供的人工智能助手，你更擅長中文和英文的對話。你會為用戶提供安全，有幫助，準確的回答。同時，你會拒絕一切涉及恐怖主義，種族歧視，黃色暴力等問題的回答。Moonshot AI 為專有名詞，不可翻譯成其他語言。"}
]

# Flask 應用初始化
app = Flask(__name__)
CORS(app)  # 啟用跨域請求支持


# 定義聊天函數(shù)
def chat(query):
    history.append({
        "role": "user",
        "content": query
    })
    completion = client.chat.completions.create(
        model="moonshot-v1-8k",
        messages=history,
        temperature=0.3,
    )
    result = completion.choices[0].message.content
    history.append({
        "role": "assistant",
        "content": result
    })
    return result

# 定義 API 路由
@app.route('/AIChat', methods=['POST'])
def AIChat():
    # 獲取前端發(fā)送的 JSON 數(shù)據(jù)
    data = request.json
    if 'query' not in data:
        return jsonify({"error": "Missing 'query' parameter"}), 400

    query = data['query']
    try:
        # 調(diào)用 chat 函數(shù)
        response = chat(query)
        return jsonify({"response": response})
    except Exception as e:
        return jsonify({"error": str(e)}), 500

# 啟動 Flask 服務(wù)
if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000, debug=True)

5.前端頁面

前端頁面就不做詳解了，這里我提供源碼地址各位自行下載。
CSDN-API測試頁面: 簡單的AI前端交互頁面：https://gitee.com/fallen-grazing-and-red-dust/csdn-api-testing-page.git下載后解壓，打開根目錄的index.html

用瀏覽器打開后呈現(xiàn)下面的界面

這里有文件傳輸，但是后端沒有實現(xiàn)相應功能，只能進行聊天對話。

6.啟動python

啟動后控制臺會輸出以下信息。表示啟動成功。占用端口為5000這里如果端口號不為5000就要根據(jù)打印的端口號來修改一下前端的端口號。

找到前端頁面的js文件修改請求路徑

(注：127.0.0.1就是localhost)

7.聊天測試

后端python啟動后我們回到前端頁面進行聊天

 簡單的AI聊天頁面就搭建成功了。對于文段回復稍長的要多等待一些時間，因為這里沒有做流式傳輸。

總結(jié)

到此這篇關(guān)于Kimi模型調(diào)用聯(lián)動前端簡單交互頁面實現(xiàn)方法的文章就介紹到這了,更多相關(guān)Kimi模型調(diào)用聯(lián)動前端交互內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論