1.環(huán)境準(zhǔn)備

1.1安裝相應(yīng)包

1.1.1  安裝Flask 

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

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

pip install Flask

1.1.2 安裝Flask-CORS（允許跨域請(qǐng)求）

Flask-CORS 是 Flask 的一個(gè)擴(kuò)展，允許跨域請(qǐng)求（CORS，Cross-Origin Resource Sharing）。當(dāng)你的前端和后端分布在不同的域名或端口時(shí)，需要啟用 CORS，以允許瀏覽器進(jìn)行跨域請(qǐng)求。Flask-CORS 提供了方便的配置方式來(lái)允許或限制哪些域名能夠訪問(wèn)你的 API。

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

pip install flask-cors

1.1.3 安裝OpenAI

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

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

pip install openai

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

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

選擇Kimi開(kāi)放平臺(tái)，進(jìn)去注冊(cè)登錄，會(huì)有15元的贈(zèng)送余額，供學(xué)習(xí)完全夠用。

1.3獲取API key

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

這時(shí)會(huì)彈出一個(gè)表單，隨便輸入名字即可，然后點(diǎn)擊確認(rèn)

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

2.測(cè)試請(qǐng)求

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

2.2然后找到下面的單輪對(duì)話，將代碼進(jìn)行復(fù)制

2.3 打開(kāi)編輯器（我用的PyCharm）測(cè)試

創(chuàng)建一個(gè)python文件進(jìn)行測(cè)式，將上面復(fù)制的代碼粘貼過(guò)來(lái)，然后將你保存的API key 將其替換

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

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

3.Flask改造

1. 導(dǎo)入必要的包

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

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

2. 初始化 OpenAI 客戶端 

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

 client：通過(guò) OpenAI 客戶端類實(shí)例化一個(gè)對(duì)象，用來(lái)訪問(wèn) OpenAI 的 API。api_key 是訪問(wèn) OpenAI API 所需的認(rèn)證密鑰，base_url 是 API 的基礎(chǔ) URL。

3. 初始化聊天歷史

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

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

4. Flask 應(yīng)用初始化

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

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

CORS(app)：?jiǎn)⒂每缬蛸Y源共享支持，這樣前端可以通過(guò)不同域的請(qǐng)求訪問(wèn)該 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，并將其添加到歷史記錄中。

• 通過(guò)調(diào)用 OpenAI API 的 client.chat.completions.create 方法，發(fā)送歷史對(duì)話記錄給 AI 模型進(jìn)行處理。
• model="moonshot-v1-8k"：指定使用的 AI 模型，這里是自定義的一個(gè) "moonshot-v1-8k" 模型。
• messages=history：將所有的對(duì)話歷史傳給模型，讓其能夠根據(jù)上下文生成回答。
• temperature=0.3：控制生成文本的隨機(jī)性，值越低，生成的文本越保守，越符合預(yù)期。
• 獲取模型生成的響應(yīng)并將其添加到歷史記錄中，最終返回生成的文本內(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 請(qǐng)求，即客戶端發(fā)送數(shù)據(jù)到這個(gè)路由時(shí)，會(huì)執(zhí)行 AIChat() 函數(shù)。

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

7. 啟動(dòng) Flask 服務(wù)

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

app.run(...)：?jiǎn)?dòng) Flask Web 服務(wù)器，監(jiān)聽(tīng) 0.0.0.0 地址上的 5000 端口，使得外部訪問(wèn)應(yīng)用。debug=True 可以啟用調(diào)試模式，這樣 Flask 在開(kāi)發(fā)過(guò)程中會(huì)自動(dòng)重新加載代碼，方便開(kāi)發(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 提供的人工智能助手，你更擅長(zhǎng)中文和英文的對(duì)話。你會(huì)為用戶提供安全，有幫助，準(zhǔn)確的回答。同時(shí)，你會(huì)拒絕一切涉及恐怖主義，種族歧視，黃色暴力等問(wèn)題的回答。Moonshot AI 為專有名詞，不可翻譯成其他語(yǔ)言。"}
]

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


# 定義聊天函數(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

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

5.前端頁(yè)面

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

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

這里有文件傳輸，但是后端沒(méi)有實(shí)現(xiàn)相應(yīng)功能，只能進(jìn)行聊天對(duì)話。

6.啟動(dòng)python

啟動(dòng)后控制臺(tái)會(huì)輸出以下信息。表示啟動(dòng)成功。占用端口為5000這里如果端口號(hào)不為5000就要根據(jù)打印的端口號(hào)來(lái)修改一下前端的端口號(hào)。

找到前端頁(yè)面的js文件修改請(qǐng)求路徑

(注：127.0.0.1就是localhost)

7.聊天測(cè)試

后端python啟動(dòng)后我們回到前端頁(yè)面進(jìn)行聊天

 簡(jiǎn)單的AI聊天頁(yè)面就搭建成功了。對(duì)于文段回復(fù)稍長(zhǎng)的要多等待一些時(shí)間，因?yàn)檫@里沒(méi)有做流式傳輸。

總結(jié)

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

最新評(píng)論