快捷构建AI大模型,源码自取可直接运行

Node.jsWebSocket 实现一个基于kimi(Moonshot 月之暗大模型)的AI工具

  • 前端:前端界面比较容易,只需要简单的额css + js即可,本文使用vue作为作为demo。

  • 后端:我java很垃圾,写不出好的代码,所以后端只能用koa代替,实现接口调用即可。

  • 前后端通信:为了实现前后端的数据交互,完成AI即时问答功能,我采用WebSocket进行通信。

  • AI大模型:要实现AI问答,核心就是需要使用现有的AI大模型。比如OpenAI 的 GPT-4、 字节跳动的豆包大模型、Kimi的月之暗Moonshot模型等等。由于Kimi的Moonshot模型兼容了 OpenAI 的SDK,调用简单、学习成本低,因此本文使用此模型。

也有接其他大模型源码,github仓库自取 

1.首先要登录其官网,申请属于自己的API Key,通过这个key,我们就可以实现接口调用,完成自己的AI助手搭建。 

kimi官网注册Moonshot AI - 开放平台 申请api key,登录后台后,选择【API Key管理】面板,点击【创建】按钮,即可创建自己的密钥。这个密钥就是我们需要使用的API Key。创建好后,把它复制保存起来。

 注册后,系统免费赠送15

Kimi API 兼容了 OpenAI 的接口规范,因此,我们可以直接使用 OpenAI 提供的NodeJS(opens in a new tab)[2] 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[0]?.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 的 temperature 参数的取值范围是 [0, 1],官方推荐取值为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 格式发送到服务端。

本文实现了一个简易的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 回复逐块发送至前端,提升用户体验。

 

完整代码地址 ,开箱即用,样式自己调整

lien0219/ai-tool: 便捷构建私有ai工具 

 

server是后端直接node index.js运行,如果对你有帮助辛苦stars一下,谢谢

其他大模型仓库里自己找 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/486951.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

探索云原生安全解决方案的未来

我们是否充分意识到云端所面临的网络安全威胁&#xff1f; 在当今互联互通的世界中&#xff0c;维护安全的环境至关重要。云的出现扩大了潜在威胁的范围&#xff0c;因为它催生了机器身份&#xff08;称为非人类身份 (NHI)&#xff09;及其秘密。随着组织越来越多地转向云原生…

关于利用 EtherNet/IP 转 Profinet 网关模块实现罗克韦尔变频器接入西门子 PLC 的配置范例

在现代工业自动化领域&#xff0c;不同品牌设备之间的通信兼容性问题一直是企业面临的挑战之一。某智能工厂为了优化生产流程&#xff0c;提高设备的协同工作效率&#xff0c;决定对其生产线上的控制系统进行升级改造。该生产线中&#xff0c;AB罗克韦尔PowerFlex变频器作为关键…

Ajax--实现检测用户名是否存在功能

&#xff08;一&#xff09;什么是Ajax Ajax&#xff08;Asynchronous Javascript And XML&#xff09; 翻译成中文就是“异步JavaScript和XML”&#xff0c;即使用JavaScript与服务器进行异步交互&#xff0c;传输的数据为XML。 AJAX还可以在浏览器实现局部刷新的效果&#xf…

【LC】160. 相交链表

题目描述&#xff1a; 给你两个单链表的头节点 headA 和 headB &#xff0c;请你找出并返回两个单链表相交的起始节点。如果两个链表不存在相交节点&#xff0c;返回 null 。 图示两个链表在节点 c1 开始相交&#xff1a; 题目数据 保证 整个链式结构中不存在环。 注意&…

算法设计1_分治

递归的概念 递归算法&#xff1a;一个直接或间接地调用自身的算法递归函数&#xff1a;使用函数自身给出定义的函数递归方程&#xff1a;对于递归算法&#xff0c;一般可把时间代价表示为一个递归方程解递归方程最常用的方法是进行递归扩展 阶乘函数 边界条件递归关系 n ! {…

基于yolov8的SAR影像目标检测系统,支持图像、视频和摄像实时检测【pytorch框架、python源码】

更多目标检测、图像分类识别、目标追踪等项目可看我主页其他文章 功能演示&#xff1a; 基于yolov8的SAR影像目标检测系统&#xff0c;支持图像、视频和摄像实时检测【pytorch框架、python源码】_哔哩哔哩_bilibili &#xff08;一&#xff09;简介 基于yolov8的SAR影像目标…

uni-app 设置缓存过期时间【跨端开发系列】

&#x1f517; uniapp 跨端开发系列文章&#xff1a;&#x1f380;&#x1f380;&#x1f380; uni-app 组成和跨端原理 【跨端开发系列】 uni-app 各端差异注意事项 【跨端开发系列】uni-app 离线本地存储方案 【跨端开发系列】uni-app UI库、框架、组件选型指南 【跨端开…

复现论文:PromptTA: Prompt-driven Text Adapter for Source-freeDomain Generalization

github&#xff1a;zhanghr2001/PromptTA: Source-free Domain Generalization 论文&#xff1a;[2409.14163] PromptTA: Prompt-driven Text Adapter for Source-free Domain Generalization 自己标注&#xff1a;PromptTA: Prompt-driven Text Adapter for Source-free Domai…

Dos脚本中的start命令

0 Preface/Foreword 1 Start介绍 start是用来启动一个应用或者一个bat脚本文件。 1.1 %*传递参数 %*&#xff1a;表示运行命令时传入的所有参数。 1.2 %processor_architecture% 系统处理器架构&#xff0c;内置变量。 echo %processor_architecture% 1.3 示例 echo He…

HTML笔记()蜘蛛纸牌之卡牌拖拽

效果 代码 <!DOCTYPE html> <html><head><style>body{display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #2b2b2b;position: relative;}.card{/*设置卡牌的外观*/width: 150px;height: 200px;background-…

基于SSM的线上考试系统的设计与实现(计算机毕业设计)+万字说明文档

系统合集跳转 源码获取链接 一、系统环境 运行环境: 最好是java jdk 1.8&#xff0c;我们在这个平台上运行的。其他版本理论上也可以。 IDE环境&#xff1a; Eclipse,Myeclipse,IDEA或者Spring Tool Suite都可以 tomcat环境&#xff1a; Tomcat 7.x,8.x,9.x版本均可 操作系统…

vue 封装全局方法及使用

1.找到项目中的utils定义js&#xff0c;这个js存放全局可使用的方法 2.去项目中main.js中引入注册 import publicFun from ./utils/test Vue.prototype.$publicFun publicFun;3.项目使用 ddd(){this.$publicFun.testwen()},

微信小程序中使用miniprogram-sm-crypto实现SM4加密攻略

在微信小程序开发过程中&#xff0c;数据安全至关重要。本文将为大家介绍如何在微信小程序中使用miniprogram-sm-crypto插件进行SM4加密&#xff0c;确保数据传输的安全性。 一、SM4加密简介 SM4是一种对称加密算法&#xff0c;由国家密码管理局发布&#xff0c;适用于商密领…

【论文阅读】相似误差订正方法在风电短期风速预报中的应用研究

文章目录 概述&#xff1a;摘要1. 引言2. 相似误差订正算法&#xff08;核心&#xff09;3. 订正实验3.1 相似因子选取3.2 相似样本数试验3.3 时间窗时长实验 4. 订正结果分析4.1 评估指标对比4.2 风速曲线对比4.3 分风速段订正效果评估4.4 风速频率统计 5. 结论与讨论 概述&am…

高中数学:计数原理-二项式定理

文章目录 一、二项式定理与通项公式二、二项式系数的性质 一、二项式定理与通项公式 我们先来看完全平方公式 二、二项式系数的性质

javaweb-Mybaits

1.Mybaits入门 &#xff08;1&#xff09;介绍 &#xff08;2&#xff09; 2.Mybaits VS JDBC 3.数据库连接池 &#xff08;1&#xff09;SpringBoot默认连接池为hikari&#xff0c;切换为Druid有两种方式 方式一&#xff1a;加依赖 方式二&#xff1a;直接修改配置文件 …

节点流和处理流

1. 基本介绍 节点流可以从一个特定的数据源读写数据&#xff0c;如FileReader、FileWriter 处理流(也叫包装流)是“连接”在已存在的流(节点流或处理流)之上&#xff0c;为程序提供更为强大的读写功能&#xff0c;也更加灵活&#xff0c;如BufferedReader、BufferedWriter 2. …

21个Python脚本自动执行日常任务(2)

引言 作为编程领域摸爬滚打超过十年的老手&#xff0c;我深刻体会到&#xff0c;自动化那些重复性工作能大大节省我们的时间和精力。 Python以其简洁的语法和功能强大的库支持&#xff0c;成为了编写自动化脚本的首选语言。无论你是专业的程序员&#xff0c;还是希望简化日常工…

数据结构--树和二叉树

树和二叉树的定义 树的定义 树是一种非线性的数据结构&#xff0c;它模拟了具有层次关系的数据的集合。在树结构中&#xff0c;存在以下基本概念&#xff1a; 节点&#xff08;Node&#xff09;&#xff1a;树的每个元素被称为节点。根节点&#xff08;Root Node&#xff09…

RabbitMQ七种工作模式之 RPC通信模式, 发布确认模式

文章目录 六. RPC(RPC通信模式)客户端服务端 七. Publisher Confirms(发布确认模式)1. Publishing Messages Individually(单独确认)2. Publishing Messages in Batches(批量确认)3. Handling Publisher Confirms Asynchronously(异步确认) 六. RPC(RPC通信模式) 客⼾端发送消息…