Kimi模型调用联动前端简单交互页面实现方法

1.环境准备

1.1安装相应包

1.1.1  安装Flask 

Flask 是一个轻量级的 Python Web 框架，适用于快速构建 Web 应用和 API。它提供了基本的 Web 应用功能，比如路由、请求处理、模板渲染等，并且易于扩展。Flask 通常用于构建 RESTful API、Web 应用等。

轻量、易上手、灵活，可以根据需要选择添加扩展。

pip install Flask

1.1.2 安装Flask-CORS（允许跨域请求）

Flask-CORS 是 Flask 的一个扩展，允许跨域请求（CORS，Cross-Origin Resource Sharing）。当你的前端和后端分布在不同的域名或端口时，需要启用 CORS，以允许浏览器进行跨域请求。Flask-CORS 提供了方便的配置方式来允许或限制哪些域名能够访问你的 API。

简化了 Flask 应用的跨域资源共享配置，适合构建前后端分离的应用。

pip install flask-cors

1.1.3 安装OpenAI

OpenAI 是一个 Python 客户端库，用于与 OpenAI 的 API 进行交互。通过该库，开发者可以访问 OpenAI 提供的各种模型，如 GPT-3、Codex 和 DALL·E 等，进行文本生成、代码生成、图像生成等操作。它通常用于构建基于 OpenAI 模型的应用，如聊天机器人、智能助手等。

简化了与 OpenAI API 的交互，提供了便捷的接口调用方式，支持各种 OpenAI 提供的 AI 模型。

pip install openai

1.2 注册相应服务商的开发者账户（我这里选择的是KiMi）

这是官网链接 Moonshot AI：https://www.moonshot.cn/

选择Kimi开放平台，进去注册登录，会有15元的赠送余额，供学习完全够用。

1.3获取API key

在左侧导航栏找到API key管理-->点击新建

这时会弹出一个表单，随便输入名字即可，然后点击确认

点击确认后会出现你的API key,这里一定要记得保存，否则只有重新创建。

2.测试请求

2.1打开开发者文档，选择Chat

2.2然后找到下面的单轮对话，将代码进行复制

2.3 打开编辑器（我用的PyCharm）测试

创建一个python文件进行测式，将上面复制的代码粘贴过来，然后将你保存的API key 将其替换

  如果前面已经安装了OpenAI就可以直接运行了，运行后控制台会输出相应信息

此时已经成功用上API的服务了

3.Flask改造

1. 导入必要的包

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

• Flask：用来创建 Web 应用。Flask 是一个轻量级的 Web 框架，用于构建 HTTP 服务。
• request：用于获取 HTTP 请求中的数据，通常是从客户端（例如浏览器）发来的 POST 请求。
• jsonify：用于将 Python 对象转换为 JSON 格式的响应，方便与前端进行数据交换。
• 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 的基础 URL。

3. 初始化聊天历史

history = [
    {"role": "system",
     "content": "你是 Kimi，由 Moonshot AI 提供的人工智能助手，你更擅长中文和英文的对话。你会为用户提供安全，有帮助，准确的回答。同时，你会拒绝一切涉及恐怖主义，种族歧视，黄色暴力等问题的回答。Moonshot AI 为专有名词，不可翻译成其他语言。。"}
]

 history：这个列表保存了聊天的历史记录，最初只有一个系统角色的消息，内容描述了机器人的角色和对话规则。随着对话进行，历史记录会更新，包含用户和助手的对话内容。

4. Flask 应用初始化

app = Flask(__name__)
CORS(app)  # 启用跨域请求支持

app：创建一个 Flask 应用实例，__name__ 是 Flask 需要的参数，告诉它在哪里找到应用的根目录。

CORS(app)：启用跨域资源共享支持，这样前端可以通过不同域的请求访问该 API 服务。

5. 定义聊天函数

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)：这是主要的聊天逻辑函数，接受用户的查询 query，并将其添加到历史记录中。

• 通过调用 OpenAI API 的 client.chat.completions.create 方法，发送历史对话记录给 AI 模型进行处理。
• model="moonshot-v1-8k"：指定使用的 AI 模型，这里是自定义的一个 "moonshot-v1-8k" 模型。
• messages=history：将所有的对话历史传给模型，让其能够根据上下文生成回答。
• temperature=0.3：控制生成文本的随机性，值越低，生成的文本越保守，越符合预期。
• 获取模型生成的响应并将其添加到历史记录中，最终返回生成的文本内容。

6. 定义 API 路由 

@app.route('/AIChat', methods=['POST'])
def AIChat():
    # 获取前端发送的 JSON 数据
    data = request.json
    if 'query' not in data:
        return jsonify({"error": "Missing 'query' parameter"}), 400

    query = data['query']
    try:
        # 调用 chat 函数
        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 请求，即客户端发送数据到这个路由时，会执行 AIChat() 函数。

• request.json：从客户端请求中提取 JSON 数据。
• 如果 query 参数缺失，返回 400 错误和错误信息。
• 否则，调用 chat(query) 函数生成响应，并返回 JSON 格式的结果。如果发生异常，则返回 500 错误和异常信息。

7. 启动 Flask 服务

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

app.run(...)：启动 Flask Web 服务器，监听 0.0.0.0 地址上的 5000 端口，使得外部访问应用。debug=True 可以启用调试模式，这样 Flask 在开发过程中会自动重新加载代码，方便开发者调试。

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)  # 启用跨域请求支持


# 定义聊天函数
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():
    # 获取前端发送的 JSON 数据
    data = request.json
    if 'query' not in data:
        return jsonify({"error": "Missing 'query' parameter"}), 400

    query = data['query']
    try:
        # 调用 chat 函数
        response = chat(query)
        return jsonify({"response": response})
    except Exception as e:
        return jsonify({"error": str(e)}), 500

# 启动 Flask 服务
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

用浏览器打开后呈现下面的界面

这里有文件传输，但是后端没有实现相应功能，只能进行聊天对话。

6.启动python

启动后控制台会输出以下信息。表示启动成功。占用端口为5000这里如果端口号不为5000就要根据打印的端口号来修改一下前端的端口号。

找到前端页面的js文件修改请求路径

(注：127.0.0.1就是localhost)

7.聊天测试

后端python启动后我们回到前端页面进行聊天

 简单的AI聊天页面就搭建成功了。对于文段回复稍长的要多等待一些时间，因为这里没有做流式传输。

总结

到此这篇关于Kimi模型调用联动前端简单交互页面实现方法的文章就介绍到这了,更多相关Kimi模型调用联动前端交互内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论