快捷构建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.mzph.cn/diannao/63520.shtml

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

相关文章

R语言 | 峰峦图 / 山脊图

目的&#xff1a;为展示不同数据分布的差异。 1. ggplot2 实现 # 准备数据 datmtcars[, c("mpg", "cyl")] colnames(dat)c("value", "type") head(dat) # value type #Mazda RX4 21.0 6 #Mazda RX4 Wag …

Redis性能优化18招

Redis性能优化的18招 目录 前言选择合适的数据结构避免使用过大的key和value[使用Redis Pipeline](#使用Redis Pipeline)控制连接数量合理使用过期策略使用Redis集群充分利用内存优化使用Lua脚本监控与调优避免热点key使用压缩使用Geo位置功能控制数据的持久化尽量减少事务使…

学习笔记063——通过使用 aspose-words 将 Word 转 PDF 时,遇到的字体改变以及乱码问题

文章目录 1、问题描述&#xff1a;2、解决方法&#xff1a; 1、问题描述&#xff1a; Java项目中&#xff0c;有个需要将word转pdf的需求。本人通过使用aspose-words来转换的。在Windows中&#xff0c;转换是完全正常的。但是当部署到服务器时&#xff0c;会出现转换生成的pdf…

(6)JS-Clipper2之ClipperOffset

1. 描述 ClipperOffset类封装了对打开路径和关闭路径进行偏移(膨胀/收缩)的过程。 这个类取代了现在已弃用的OffsetPaths函数&#xff0c;该函数不太灵活。可以使用不同的偏移量(增量)多次调用Execute方法&#xff0c;而不必重新分配路径。现在可以在一次操作中对开放和封闭路…

SpringCloudAlibaba教程之注册中心Nacos

目录 概念 架构 设计原则 架构分层 用户层 业务层 内核层 插件 单机部署 1.下载安装包 2.安装nacos 3.启动nacos 快速开始 1.添加Maven依赖 2.添加配置 3.启动 集群部署 搭建步骤 1.搭建数据库&#xff0c;初始化数据库表结构 2.配置nacos 3.启动nacos集群…

PostgreSQL 安装部署系列:使用YUM 方式在Centos 7.9 安装指定 PostgreSQL -15版本数据库

一、前言 千里之行始于足下&#xff0c;想学习一门数据库&#xff0c;首先要从安装部署开始&#xff0c;先拥有一套属于自己的学习测试库。为了更好的学习该数据库&#xff0c;可以选择一个在企业界使用率比较普及的操作系统&#xff0c;选择稳定版本的操作系统&#xff1b;如果…

李飞飞的生成式3D场景,对数字孪生的未来影响几何?

大家好&#xff0c;我是日拱一卒的攻城师不浪&#xff0c;致力于技术与艺术的融合。这是2024年输出的第47/100篇文章。 前言 这两天&#xff0c;AI界的教母李飞飞团队重磅发布了空间智能生成式AI大模型。 仅通过一张图片就能够生成一个可操作和交互的3D空间场景。 空间智能的…

Redis面试专题-持久化

目录 前言 持久化相关知识 1.三种持久化机制 2.RDB持久化 3.深入剖析一下RDB持久化过程 4.AOF持久化 5.RDB和AOF对比​编辑 面试题 1.redis持久化机制有哪些&#xff1f; 2.那仔细讲讲你对他们的理解 3.你刚刚说AOF的文件很大&#xff0c;那AOF文件会越来越大&#xf…

数据结构之初始二叉树(1)

找往期文章包括但不限于本期文章中不懂的知识点&#xff1a; 个人主页&#xff1a;我要学编程(ಥ_ಥ)-CSDN博客 所属专栏&#xff1a;数据结构&#xff08;Java版&#xff09; 目录 树型结构 树的概念 与树的有关概念 树的表示形式 树的应用 二叉树 概念 两种特殊的…

酷柚易汛生产管理系统PHP+Uniapp

生产管理系统&#xff0c;帮助企业数字化转型&#xff0c;打造智能工厂&#xff0c;专业为生产企业量身开发的一套完整的生产管理系统。主要包含以下模块&#xff1a;购货模块、生产模块、仓库模块、资料模块&#xff0c;可配合酷柚易汛进销存无缝衔接使用。 产品理念: 共享功…

从零开始学TiDB(2)深入了解TiDB Server模块

TiDB Server 架构 TiDB Server 的主要功能&#xff1a; 一条SQL的执行流程&#xff1a; 1.将整个SQL语句解析成一个个的token&#xff0c;生成一个树形结构。 2.编译模块 1.首先需要做一个合法性验证&#xff0c;比如表存不存在等。 2.做逻辑优化&#xff1a;依据关系型代数等…

贪心算法专题(四)

目录 1. 单调递增的数字 1.1 算法原理 1.2 算法代码 2. 坏了的计算器 2.1 算法原理 2.2 算法代码 3. 合并区间 3.1 算法原理 3.2 算法代码 4. 无重叠区间 4.1 算法原理 4.2 算法代码 5. 用最少数量的箭引爆气球 5.1 算法原理 ​5.2 算法代码 1. 单调递增的数字…

241207-通过Docker部署Wiki.JS并设置ElasticSearch进行中文搜索

A. 最终效果 B. 配置文件 version: "3" services:wiki:image: ghcr.io/requarks/wiki:2container_name: wikijsports:- "3000:3000"volumes:- /home/lgk/Projects/WikiJS/config:/configenvironment:- DB_TYPEpostgres- DB_HOSTdatabase- DB_PORT5432- DB…

Spring Boot如何实现防盗链

一、什么是盗链 盗链是个什么操作&#xff0c;看一下百度给出的解释&#xff1a;盗链是指服务提供商自己不提供服务的内容&#xff0c;通过技术手段绕过其它有利益的最终用户界面&#xff08;如广告&#xff09;&#xff0c;直接在自己的网站上向最终用户提供其它服务提供商的…

springboot394疫情居家办公系统(论文+源码)_kaic

摘 要 如今社会上各行各业&#xff0c;都喜欢用自己行业的专属软件工作&#xff0c;互联网发展到这个时候&#xff0c;人们已经发现离不开了互联网。新技术的产生&#xff0c;往往能解决一些老技术的弊端问题。因为传统疫情居家办公系统信息管理难度大&#xff0c;容错率低&a…

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

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

模型训练数据-MinerU一款Pdf转Markdown软件

模型训练数据-MinerU一款Pdf转Markdown软件-说明 简介&#xff1a; MinerU是什么 MinerU是上海人工智能实验室OpenDataLab团队推出的开源智能数据提取工具&#xff0c;专注于复杂PDF文档的高效解析与提取。MinerU能将包含图片、公式、表格等元素的多模态PDF文档转化为易于分析…

STM32F103 PWM配置

在《STM32F103定时器配置》中我们介绍了PWM的产生原理&#xff0c;本节介绍介绍如何编码实现PWM的输出。 一、PWM相关寄存器 TIMx如果要产生PWM&#xff0c;除了我们上一节提到的如下寄存器&#xff1a; 控制寄存器(TIMx_CR1)&#xff1b;DMA/中断使能寄存器(TIMx_DIER)&#x…

Flink Python作业快速入门

Flink Python快速入门_实时计算 Flink版(Flink)-阿里云帮助中心 import argparse # 用于处理命令行参数和选项&#xff0c;使程序能够接收用户通过命令行传递的参数 import logging import sysfrom pyflink.common import WatermarkStrategy, Encoder, Types from pyflink.data…

三菱CNC数采超详细,资料全备教程,后续更新发那科数采教程

三菱数采详细教程 文章目录 三菱数采详细教程一、介绍1.背景2.需要掌握知识3.需要资料①三菱SDK包&#xff1a;A2②三菱com接口文档③C#代码&#xff1a;④VStudio⑤资料存放网盘 二、程序运行1.调试设备①条件②命令 2.运行软件①打开软件②运行程序 三、数据采集1.代码了解2.…