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 AIhttps://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聊天页面就搭建成功了。对于文段回复稍长的要多等待一些时间，因为这里没有做流式传输。