纯前端：极速构建一个私有ChatGPT！AI套壳居然云云简朴！
注：CSDN不支持超过10M的动图显示，以是文中会有部门动图展示不出来。如果想拥有更好地阅读体验，可以去我的文章首发地点：https://juejin.cn/post/7441774623833260070
https://i-blog.csdnimg.cn/direct/eb3228849ce247ea85a1523833fc56b3.png
随着人工智能Chatgpt的出现，各种国产的AI大模子应用而出，如豆包、文心一言、通义千问、kimi等等，同时，我们也发现有各种各样的套壳APP在割韭菜！
作为一个程序员，我们不能助长这种套壳App的嚣张气势，我们要用邪术打败邪术，实现一个只属于我们自己的ChatGpt!
在这篇文章中，我将介绍怎样利用 Node.js 和 WebSocket 实现一个基于kimi（Moonshot 月之暗大模子）的AI工具，让我们快速拥有属于自己的ChatGpt。大致实现的效果：
https://i-blog.csdnimg.cn/direct/5b681b0d47b445e5b7a8c3ae1cb71b22.gif
基于本文demo代码，你将能快速构建比较完备，且专属于你的ChatGpt，赶快收藏，让我们一起学习套壳应用的奥秘！
技术栈简介
[*]前端：
前端界面比较容易，只需要简朴的额css + js即可，本文利用vue作为作为demo。
[*]后端：我java很垃圾，写不出好的代码，以是后端只能用koa代替，实现接口调用即可。
[*]前后端通信：为了实现前后端的数据交互，完成AI即时问答功能，我采用WebSocket进行通信。
[*]AI大模子：要实现AI问答，核心就是需要利用现有的AI大模子。好比OpenAI 的 GPT-4、字节跳动的豆包大模子、Kimi的月之暗Moonshot模子等等。由于Kimi的Moonshot模子兼容了 OpenAI 的SDK，调用简朴、学习成本低，因此本文利用此模子。
有人可能问，你怎么不自己开辟大语言模子？可笑，我要套壳实现白嫖！
开辟前准备
要利用Moonshot的 AI语言模子能力，我们起首要登录其官网，申请属于自己的API Key，通过这个key，我们就可以实现接口调用，完成自己的AI助手搭建。
注册账号
起首，我们需要登录kimi官网，注册账号：
https://i-blog.csdnimg.cn/img_convert/fd0753c32f2af2d42319ba70f3aa219e.png
创建API Key
登录后台后，选择【API Key管理】面板，点击【创建】按钮，即可创建自己的密钥。这个密钥就是我们需要利用的API Key。创建好后，把它复制生存起来。
https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fcdn.nlark.com%2Fyuque%2F0%2F2024%2Fgif%2F21865277%2F1732602693794-40f16fa5-898f-4589-8013-6e71fa1fe3e1.gif&pos_id=img-XFUwc6ow-1732692332241
关于费用
作为一个白嫖用户，充值是不可能充值的。注册后，系统免费赠予15，用不完，根本用不完！https://i-blog.csdnimg.cn/img_convert/3a70df2f8247148dbbda76883cc9ba6e.png
技术方案
核心项目搭建
服务端搭建
搭建后端服务，其实就是调用Kimi API 获取问答信息返回给前端。
Kimi API 兼容了 OpenAI 的接口规范，因此，我们可以直接利用 OpenAI 提供的NodeJS(opens in a new tab) SDK 来调用和利用 Kimi 大模子：
npm i koa koa-websocket openai
项目初始化完毕后，在根目录创建app.js文件
const Koa = require("koa");
const websocket = require("koa-websocket");
const OpenAI = require("openai");
const app = websocket(new Koa());
// 配置 Moonshot AI 客户端
const client = new OpenAI({
apiKey: "你自己在kimi后台创建的API key",
baseURL: "https://api.moonshot.cn/v1", // Moonshot API 的基础路径
});
// WebSocket 路由
app.ws.use((ctx) => {
// .....
});
// 启动服务器
app.listen(3000, () => {
console.log("服务已启动，监听 ws://localhost:3000");
});
上述代码中，WebSocket 路由内部的逻辑也非常简朴，它的逻辑流程如下：
[*]监听前端发送的消息
[*]调用 Moonshot AI 的聊天接口
[*]获取 Kimi 的回答内容
[*]将回答发送到前端
// WebSocket 路由
app.ws.use((ctx) => {
console.log("WebSocket connected");
// 1.监听前端发送的消息
ctx.websocket.on("message", async (message) => {
const { content } = JSON.parse(message); // 从前端接收的 JSON 消息中解析用户输入
try {
// 2.调用 Moonshot AI 的聊天接口
const completion = await client.chat.completions.create({
model: "moonshot-v1-8k",
messages: [
{ role: "user", content },
],
temperature: 0.3, // 控制回答的随机性
});
// 3.获取 Kimi 的回答内容
const reply = completion.choices?.message?.content
// 4.将回答发送到前端
ctx.websocket.send(JSON.stringify({ reply }));
} catch (error) {
ctx.websocket.send(
JSON.stringify({ reply: "Kimi 暂时无法回答您的问题，请稍后再试。" })
);
}
});
ctx.websocket.on("close", () => {
console.log("WebSocket connection closed");
});
});
接口中的temperature值用于控制回答的随机性，Kimi API 的 <font style="color:rgb(51, 65, 85);">temperature</font> 参数的取值范围是 <font style="color:rgb(51, 65, 85);"></font>，官方推荐取值为0.3
至此，后端服务就搭建完毕了，我们执行下面的命令启动服务
node app.js
前端搭建
参考其他的AI助手，前端的界面一般都非常简朴，我们直接参考微信聊天界面，做一个简易的对话框即可。
<template>
<div class="chat-container">
<div class="chat-box">
<div class="messages">
<!-- 显示聊天记录 -->
<div v-for="(message, index) in messages" :key="index" class="message-wrapper"
:class="message.role === 'user' ? 'user-message' : 'ai-message'">
<div class="message">
<p>{{ message.content }}</p>
</div>
</div>
</div>
</div>
<div class="input-box">
<textarea v-model="userInput" placeholder="请输入您的问题..." @keyup.enter="sendMessage"></textarea>
<button @click="sendMessage">发送</button>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
const messages = ref([]);
const userInput = ref('');
const socket = new WebSocket('ws://localhost:3000');
// 监听服务端消息
socket.onmessage = (event) => {
const data = JSON.parse(event.data);
messages.value.push({ role: 'ai', content: data.reply });
};
// 发送用户消息
const sendMessage = () => {
if (!userInput.value.trim()) return;
// 添加用户输入到消息列表
messages.value.push({ role: 'user', content: userInput.value });
// 通过 WebSocket 发送到后端
socket.send(JSON.stringify({ content: userInput.value }));
userInput.value = ''; // 清空输入框
};
</script>
<style scoped lang="less">
.chat-container {
height: 100vh;
background-color: #f6f7f9;
overflow: hidden;
.chat-box {
height: calc(100% - 60px);
box-sizing: border-box;
padding: 16px;
overflow-y: auto;
background-color: #ffffff;
.messages {
display: flex;
flex-direction: column;
gap: 12px;
}
.message-wrapper {
display: flex;
.message {
max-width: 70%;
padding: 5px 16px;
border-radius: 18px;
font-size: 14px;
line-height: 1.5;
white-space: pre-wrap;
word-wrap: break-word;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
}
.user-message {
justify-content: flex-end;
.message {
background-color: #0084ff;
color: #ffffff;
text-align: right;
border-bottom-right-radius: 4px;
}
}
.ai-message {
justify-content: flex-start;
.message {
background-color: #f1f0f0;
color: #333333;
text-align: left;
border-bottom-left-radius: 4px;
}
}
}
.input-box {
height: 60px;
display: flex;
align-items: center;
gap: 8px;
background-color: #e5e5e5;
border-top: 1px solid #e5e5e5;
padding: 0 10px;
button {
padding: 5px 20px;
background-color: #0084ff;
color: #ffffff;
border: none;
border-radius: 10px;
font-size: 14px;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 132, 255, 0.3);
transition: background-color 0.3s ease;
}
button:hover {
background-color: #006bbf;
}
button:active {
background-color: #0056a3;
}
textarea {
flex: 1;
padding: 10px;
border: 1px solid #d5d5d5;
border-radius: 15px;
resize: none;
font-size: 14px;
background-color: #ffffff;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
outline: none;
height: 20px;
}
textarea:focus {
border-color: #0084ff;
box-shadow: inset 0 1px 4px rgba(0, 132, 255, 0.2);
}
}
}
</style>
上述代码实现了一个简朴的聊天界面，利用 WebSocket 实现前后端通信，大致代码逻辑如下：
响应式数据
- `messages`：存储所有聊天记录的数组，role字段储信息来自用户还是AI。
- `userInput`：用户输入框的内容，绑定到 `textarea`。
WebSocket 通信
- **连接服务端**：通过 `new WebSocket('ws://localhost:3000')` 创建连接。ws://localhost:3000是我们后端服务的运行地址。
- **接收消息**：监听 `onmessage` 事件，将服务端返回的数据解析后追加到 `messages` 中。
- **发送消息**：在 `sendMessage` 方法中：
* 验证输入框是否为空。
* 将用户消息推送到 `messages`。
* 使用 `socket.send` 将输入内容以 JSON 格式发送到服务端。
现在，我们运行前端项目是还效果：
https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fcdn.nlark.com%2Fyuque%2F0%2F2024%2Fgif%2F21865277%2F1732266428717-534b1924-7686-40c5-8bb7-b31b5d7a0a84.gif&pos_id=img-zzBAzU7p-1732692332242
非常nice啊兄弟们！固然交互可能不是很好，但是根本功能实现了！
不外眼睛尖的同砚们可能也看见了，末了一次输入666的时候，接口报错了。嗐，毕竟我们是白嫖用户，有用量限制：一分钟内只支持连续3次问题：
https://i-blog.csdnimg.cn/img_convert/275c1f268a00a4e9c7b453efe90b1803.png
进行多轮对话
现在，你可能会发现，我们的AI助手并不能实现多轮对话，对话是不连续的。这很正常，API 本身不具有记忆功能，它是无状态的，当我们多次请求 API 时，Kimi 大模子并不知道我们前一次请求的内容。
要解决这个问题，我们可以手动维护每次请求的上下文，把上一次请求过的内容手动参加到下一次请求中，让 Kimi 大模子能正确知道我们之前都聊了什么。
现在，我们维护 一个messages 列表让 Kimi 大模子拥有记忆，并实现多轮对话功能。我们轻微改造下后端代码：
const Koa = require("koa");
const websocket = require("koa-websocket");
const OpenAI = require("openai");
require("dotenv").config();
const app = websocket(new Koa());
// 配置 Moonshot AI 客户端
const client = new OpenAI({
apiKey: "你自己在kimi后台创建的API key",
baseURL: "https://api.moonshot.cn/v1",
});
// 定义全局 messages 对象，按 WebSocket 连接 ID 记录会话上下文
const sessions = {};
app.ws.use((ctx) => {
// 分配唯一会话 ID（以 WebSocket 对象为标识）
const sessionId = ctx.websocket;
// 初始化当前会话的历史记录
sessions = [];
// 监听前端发送的消息
ctx.websocket.on("message", async (message) => {
const { content } = JSON.parse(message);
try {
// 将用户问题追加到历史消息
const userMessage = { role: "user", content };
sessions.push(userMessage);
// 调用 Moonshot API
const completion = await client.chat.completions.create({
model: "moonshot-v1-8k",
messages: sessions,
temperature: 0.3,
});
// 记录 AI 回复并发送给前端
const assistantMessage = completion.choices?.message || {
role: "assistant",
content: "抱歉，我暂时无法回答您的问题。",
};
sessions.push(assistantMessage);
ctx.websocket.send(JSON.stringify({ reply: assistantMessage.content }));
} catch (error) {
ctx.websocket.send(
JSON.stringify({ reply: "Kimi 暂时无法回答您的问题，请稍后再试。" })
);
}
});
// 关闭 WebSocket 时清除会话记录
ctx.websocket.on("close", () => {
console.log("WebSocket connection closed");
delete sessions;
});
});
// 启动服务器
app.listen(3000, () => {
console.log("服务已启动，监听 ws://localhost:3000");
});
上述代码的实现其实非常简朴，我们维护一个 **sessions** 对象，用于给每一个用户连接有一个专属记录（通过 WebSocket 的 sessionId 区分）。当用户发送消息时，值生存到对应的 sessionId 的记录里（包括用户的消息和 AI 的回复）。然后每次对话，我们都可以把完整的对话汗青传给 AI，AI 就能“记住”之前聊过的内容。
我们看看代码实现的效果：
https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fcdn.nlark.com%2Fyuque%2F0%2F2024%2Fgif%2F21865277%2F1732268747330-301e6479-66e6-4440-ba6e-f80eb8379271.gif&pos_id=img-8LwKEEin-1732692332242
通过上图，我们可以看出多轮对话的效果已经根本实现了！
自动选择Kimi 大模子
上述的代码中，我们利用的是kimi固定的 <font style="color:rgb(51, 65, 85);">moonshot-v1-8k</font> 模子 ，当对话的轮次越来越多时，继承调用 <font style="color:rgb(51, 65, 85);">chat</font> 函数会得到一个 <font style="color:rgb(51, 65, 85);">Your request exceeded model token limit</font> 错误。此时，如果我们想继承刚才的上下文接着与 Kimi 大模子对话，需要切换一个更大上下文的模子，比方 <font style="color:rgb(51, 65, 85);">moonshot-v1-32k</font>。
但是，选择合适的模子非常麻烦，我们直接利用kimi官方的moonshot-v1-auto 模子，它可以根据对话次数内部调用合适的模子，yyds！
https://i-blog.csdnimg.cn/img_convert/0f15238452ad03a9f000ddb3f6be5362.png
利用Stream流式输出
现在，我们已经根本实现AI的连续问答功能了，但是美中不敷，它的反应很慢。这是由于kimi后台后等问题全部生成后，才返回前端，如许显得就非常慢！那么，我们怎样像ChatGpt一样，实时按字符返回结果呢？
非常简朴，我们利用 Kimi API 的流式输出功能 —— Streaming 即可！
https://i-blog.csdnimg.cn/img_convert/f76e630e948049f9b3f3fd4049250591.png
服务端的代码更改非常容易
// WebSocket 路由
app.ws.use((ctx) => {
// 初始化上下文消息
let messages = [];
// 监听前端发送的消息
ctx.websocket.on("message", async (message) => {
const { content } = JSON.parse(message); // 获取用户输入
// 添加用户输入到上下文消息中
messages.push({ role: "user", content });
try {
// 开启流式输出
const stream = await client.chat.completions.create({
model: "moonshot-v1-8k",
messages,
temperature: 0.3,
stream: true,
});
ctx.websocket.send(JSON.stringify({ reply: "", isStreaming: true }));
let fullReply = ""; // 用于记录完整回复
for await (const chunk of stream) {
const delta = chunk.choices?.delta;
if (delta?.content) {
ctx.websocket.send(JSON.stringify({ reply: delta.content }));
fullReply += delta.content;
}
}
// 将 AI 回复添加到上下文消息中
messages.push({ role: "assistant", content: fullReply });
} catch (error) {
ctx.websocket.send(
JSON.stringify({ reply: "Kimi 暂时无法回答您的问题，请稍后再试。" })
);
}
});
});
// 启动服务器
app.listen(3000, () => {
console.log("服务已启动，监听 ws://localhost:3000");
});
上述代码通过启用 stream: true 设置，实时接收 AI 的部门回复数据流 (chunk.choices?.delta)。每次接收到新内容时，立即通过 WebSocket 发送给客户端，确保用户可以逐字看到 AI 的回复。
相应的，为了兼容流数据，我们前端代码也需要简朴的调整一下
<script setup>
import { ref } from "vue";
// WebSocket 初始化
const socket = new WebSocket("ws://localhost:3000");
const messages = ref([]); // 聊天记录
const userInput = ref(""); // 用户输入内容
let isStreaming = false; // 是否正在流式接收数据
let streamingMessage = ""; // 当前正在接收的消息
// 监听后端发送的消息
socket.onmessage = (event) => {
const data = JSON.parse(event.data);
// 如果是流式输出，逐步更新
if (data.isStreaming) {
isStreaming = true;
streamingMessage = "";
messages.value.push({ role: "assistant", content: "" });
} else if (isStreaming && data.reply) {
streamingMessage += data.reply;
messages.value.content = streamingMessage;
} else {
isStreaming = false;
}
};
// 发送消息给后端
const sendMessage = () => {
if (!userInput.value.trim()) return;
// 添加用户消息到消息列表
messages.value.push({ role: "user", content: userInput.value });
// 将消息通过 WebSocket 发送到后端
socket.send(
JSON.stringify({
content: userInput.value,
})
);
userInput.value = ""; // 清空输入框
};
</script>
前端通过监听 WebSocket 的 onmessage 变乱接收流数据。若消息标志为流式 (data.isStreaming)，初始化流式状态并在消息列表中添加占位符。后续每段流数据 (data.reply) 会渐渐追加到 streamingMessage 并实时更新末了一条消息的内容，模仿逐字显示效果。完成后重置流式状态。
现在，我们看看效果：
https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fcdn.nlark.com%2Fyuque%2F0%2F2024%2Fgif%2F21865277%2F1732673143433-94d8934c-9409-4f92-aab7-293a4c280fca.gif&pos_id=img-Xgh5HgJC-1732692332242
显示代码块
现在我们已经实现了AI的实时问答功能，但是如上图，它不能显示代码块，看起来比较难受。
我们可以安装 markdown-it 和 highlight.js来实当代码块的展示。
安装依赖
安装 markdown-it 和 highlight.js：
npm install markdown-it highlight.js
改造代码显示逻辑
在前端利用 markdown-it 解析 Markdown 内容，并团结 highlight.js 实当代码块高亮。
<template>
<div class="chat-container">
<div class="chat-box">
<div class="messages">
<div
v-for="(message, index) in messages"
:key="index"
class="message-wrapper"
:class="message.role === 'user' ? 'user-message' : 'ai-message'"
>
<div
class="message"
v-html="renderMessageContent(message.content)"
></div>
</div>
</div>
</div>
<div class="input-box">
<textarea
v-model="userInput"
placeholder="请输入您的问题..."
@keyup.enter="sendMessage"
></textarea>
<button @click="sendMessage">发送</button>
</div>
</div>
</template>
<script setup>
import { ref } from "vue";
import MarkdownIt from "markdown-it";
import hljs from "highlight.js";
import "highlight.js/styles/github.css"; // 引入代码高亮样式
// 初始化 Markdown-it，并配置代码高亮
const md = new MarkdownIt({
highlight: (code, lang) => {
if (lang && hljs.getLanguage(lang)) {
return hljs.highlight(code, { language: lang }).value;
}
return ""; // 如果未指定语言，则返回原始代码
},
});
// WebSocket 初始化
const socket = new WebSocket("ws://localhost:3000");
const messages = ref([]); // 聊天记录
const userInput = ref(""); // 用户输入内容
let isStreaming = false; // 是否正在流式接收数据
let streamingMessage = ""; // 当前正在接收的消息
// 渲染消息内容（支持 Markdown 和普通文本）
const renderMessageContent = (content) => {
return md.render(content);
};
// 监听后端发送的消息
socket.onmessage = (event) => {
const data = JSON.parse(event.data);
if (data.isStreaming) {
isStreaming = true;
streamingMessage = "";
messages.value.push({ role: "assistant", content: "" });
} else if (isStreaming && data.reply) {
streamingMessage += data.reply;
messages.value.content = streamingMessage;
} else {
isStreaming = false;
}
};
// 发送消息给后端
const sendMessage = () => {
if (!userInput.value.trim()) return;
messages.value.push({ role: "user", content: userInput.value });
socket.send(
JSON.stringify({
content: userInput.value,
})
);
userInput.value = "";
};
</script>
我们在试试效果：https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fcdn.nlark.com%2Fyuque%2F0%2F2024%2Fgif%2F21865277%2F1732680454015-d83ceb76-9bee-4e56-aebb-2f1a24e6ff15.gif&pos_id=img-KNdwS1Uv-1732692332242
个性化定制
我们也可以给我们的AI在每次发送信息前，携带一些固定的预设值，实现AI的定制话化！我们只需要在后端服务的messages中增加一些预设值即可。
let messages = [
{
role: "system",
content:
"你是一个AI助手,请你模拟一个阴阳怪气的人,用户无论问什么,你都要阴阳怪气的回答!",
},
];
我们试试效果：
https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fcdn.nlark.com%2Fyuque%2F0%2F2024%2Fgif%2F21865277%2F1732680919855-6eb96307-0c40-4a27-a762-a0a9c4b50550.gif&pos_id=img-nGj2Ub5y-1732692332242
我们在换种风格玩玩
let messages = [
{
role: "system",
content:
"请模拟我的女朋友,我问什么都要一副不耐烦,对我爱答不理的样子.",
},
];
https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fcdn.nlark.com%2Fyuque%2F0%2F2024%2Fgif%2F21865277%2F1732681167564-a96decb5-d3d5-497d-9db4-fd9cdb632513.gif&pos_id=img-k4vDHeHU-1732692332242
兄弟们，真实啊，这语气像不像你的女朋友？
前后端完整代码
前端
<template>
<div class="chat-container">
<div class="chat-box">
<div class="messages">
<div
v-for="(message, index) in messages"
:key="index"
class="message-wrapper"
:class="message.role === 'user' ? 'user-message' : 'ai-message'"
>
<div
class="message"
v-html="renderMessageContent(message.content)"
></div>
</div>
</div>
</div>
<div class="input-box">
<textarea
v-model="userInput"
placeholder="请输入您的问题..."
@keyup.enter="sendMessage"
></textarea>
<button @click="sendMessage">发送</button>
</div>
</div>
</template>
<script setup>
import { ref } from "vue";
import MarkdownIt from "markdown-it";
import hljs from "highlight.js";
import "highlight.js/styles/github.css"; // 引入代码高亮样式
// 初始化 Markdown-it，并配置代码高亮
const md = new MarkdownIt({
highlight: (code, lang) => {
if (lang && hljs.getLanguage(lang)) {
return hljs.highlight(code, { language: lang }).value;
}
return ""; // 如果未指定语言，则返回原始代码
},
});
// WebSocket 初始化
const socket = new WebSocket("ws://localhost:3000");
const messages = ref([]); // 聊天记录
const userInput = ref(""); // 用户输入内容
let isStreaming = false; // 是否正在流式接收数据
let streamingMessage = ""; // 当前正在接收的消息
// 渲染消息内容（支持 Markdown 和普通文本）
const renderMessageContent = (content) => {
return md.render(content);
};
// 监听后端发送的消息
socket.onmessage = (event) => {
const data = JSON.parse(event.data);
if (data.isStreaming) {
isStreaming = true;
streamingMessage = "";
messages.value.push({ role: "assistant", content: "" });
} else if (isStreaming && data.reply) {
streamingMessage += data.reply;
messages.value.content = streamingMessage;
} else {
isStreaming = false;
}
};
// 发送消息给后端
const sendMessage = () => {
if (!userInput.value.trim()) return;
messages.value.push({ role: "user", content: userInput.value });
socket.send(
JSON.stringify({
content: userInput.value,
})
);
userInput.value = "";
};
</script>
<style scoped lang="less">
.chat-container {
height: 100vh;
background-color: #f6f7f9;
overflow: hidden;
.chat-box {
height: calc(100% - 60px);
box-sizing: border-box;
padding: 16px;
overflow-y: auto;
background-color: #ffffff;
.messages {
display: flex;
flex-direction: column;
gap: 12px;
}
.message-wrapper {
display: flex;
.message {
max-width: 70%;
padding: 5px 16px;
border-radius: 18px;
font-size: 14px;
line-height: 1.5;
white-space: pre-wrap;
word-wrap: break-word;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
}
.user-message {
justify-content: flex-end;
.message {
background-color: #0084ff;
color: #ffffff;
text-align: right;
border-bottom-right-radius: 4px;
}
}
.ai-message {
justify-content: flex-start;
.message {
background-color: #f1f0f0;
color: #333333;
text-align: left;
border-bottom-left-radius: 4px;
pre {
background-color: #f6f8fa;
padding: 10px;
border-radius: 6px;
overflow-x: auto;
}
}
}
}
.input-box {
height: 60px;
display: flex;
align-items: center;
gap: 8px;
background-color: #e5e5e5;
border-top: 1px solid #e5e5e5;
padding: 0 10px;
button {
padding: 5px 20px;
background-color: #0084ff;
color: #ffffff;
border: none;
border-radius: 10px;
font-size: 14px;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 132, 255, 0.3);
transition: background-color 0.3s ease;
}
button:hover {
background-color: #006bbf;
}
button:active {
background-color: #0056a3;
}
textarea {
flex: 1;
padding: 10px;
border: 1px solid #d5d5d5;
border-radius: 15px;
resize: none;
font-size: 14px;
background-color: #ffffff;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
outline: none;
height: 20px;
}
textarea:focus {
border-color: #0084ff;
box-shadow: inset 0 1px 4px rgba(0, 132, 255, 0.2);
}
}
}
</style>
服务端
const Koa = require("koa");
const websocket = require("koa-websocket");
const OpenAI = require("openai");
require("dotenv").config();
const app = websocket(new Koa());
// 配置 Moonshot AI 客户端
const client = new OpenAI({
apiKey: "sk-I0a8XUeEavnJ381o0IQKiIXpAYrUttliu", // 替换为你的 Moonshot API Key
baseURL: "https://api.moonshot.cn/v1", // Moonshot API 基础路径
});
// WebSocket 路由
app.ws.use((ctx) => {
console.log("WebSocket connected");
// 初始化上下文消息
let messages = [
{
role: "system",
content:
"你是 Kimi，由 Moonshot AI 提供的人工智能助手，你更擅长中文和英文的对话。用户问什么问题,你都阴阳怪气他!",
},
];
// 监听前端发送的消息
ctx.websocket.on("message", async (message) => {
const { content } = JSON.parse(message); // 获取用户输入
// 添加用户输入到上下文消息中
messages.push({ role: "user", content });
try {
// 开启流式输出
const stream = await client.chat.completions.create({
model: "moonshot-v1-8k",
messages,
temperature: 0.3,
stream: true,
});
ctx.websocket.send(JSON.stringify({ reply: "", isStreaming: true }));
let fullReply = ""; // 用于记录完整回复
for await (const chunk of stream) {
const delta = chunk.choices?.delta;
if (delta?.content) {
ctx.websocket.send(JSON.stringify({ reply: delta.content }));
fullReply += delta.content;
}
}
// 将 AI 回复添加到上下文消息中
messages.push({ role: "assistant", content: fullReply });
} catch (error) {
console.error("调用 Moonshot API 出错:", error.message);
ctx.websocket.send(
JSON.stringify({ reply: "Kimi 暂时无法回答您的问题，请稍后再试。" })
);
}
});
});
// 启动服务器
app.listen(3000, () => {
console.log("服务已启动，监听 ws://localhost:3000");
});
总结
本文带各人实现了一个简易的AI工具，具备实时通信、Markdown 支持和流式输出等特点，根本席卷了AI 的一些核心功能，相信各人基于此demo肯定能实现属于自己的套壳gpt了。
末了，我简朴做下技术总结吧：
前后端通过 WebSocket 通信，后端集成了 Moonshot AI 的 Kimi 模子处置处罚用户输入并生成回复。
前端功能
[*]利用 Vue 3 构建聊天界面，包括消息显示和输入框两部门。
[*]支持区分用户与 AI 消息，采用差别样式展示。
[*]利用 markdown-it 渲染消息内容，支持 Markdown 格式和代码块显示。
[*]集成 highlight.js 实当代码高亮。
[*]支持实时流式更新，逐字展示 AI 回复，模仿思索过程。
后端功能
[*]利用 koa-websocket 实现 WebSocket 服务，处置处罚前端消息并返回 AI 回复。
[*]调用 Moonshot AI 的 Kimi 模子生成回复，并基于上下文提供连贯对话。
[*]启用流式传输，将 AI 回复逐块发送至前端，提拔用户体验。
关注我，我是石小石！
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]