手搓一个ChatUI需要分几步

只关注项目代码的同学可以直接跳转目录中的正文部分,查看项目仓库和功能介绍。

引言

Chatbot的UI界面设计,是和传统软件不同的:都是当面一个简洁的对话框,框里预备着热乎的工具,可以随时更新。

像我这样做工的牛马,午休傍晚下了班,每每花几个token,问一两句弱智吧的问题,——这是一年多前的事,现在一个问题都得设计个COT,——不用登录,在主页改改prompt,测完了就发群里刷一下存在感。

倘肯多费点心思,便可以问问3.11和3.9谁大,或者让姥姥念CD-Key哄你睡,姑且当作谈资了。如果充点真金白金,那就能获得一个API-Key,但我们这些牛马,多是白嫖党,大抵没有这样阔绰。只有公司报销的领域专家,才能点进绑定支付方式的页面里,买这买那的,写个脚本直接调用API慢慢跑着测。

我从毕业起,就在IT通信行业当伙计,父母和掌柜都说,不是e人,怕侍候不了VIP客户,就在组里开发开发后端。

公司内的stackholder,虽然容易说话,但是唠唠叨叨缠夹不清的也很不少。他们往往要亲眼看着代码跑起来,看过消息交互的抓包格式对了没有,又亲看将服务器整到shutdown,还能定时恢复,然后放心:在这严重监督之下,出一点小问题也很为难。

所以过了几天,掌柜说这些活太简单了,让去看看AI。幸亏大学里有点底子,也算对口,便改为既要开发后端,又要设计前端,还要兼顾AI算法和应用场景的奇怪职务了。

我从此便每天挂在Github上,看看有什么可以拿来用的App做个Demo。虽然没什么失职,但是总觉有些单调。

有些App太臃肿,npm install跑完就带上了全家;

有些太简单,没法适配微信群里一天更新三回的模型和后端框架。

只有最后狠下心来自己悄悄写一个,取个名就叫Chat-UI,算是勉强满意,所以来说说。

https://github.com/AI-QL/chat-uiicon-default.png?t=O83Ahttps://github.com/AI-QL/chat-ui

Chat-UI是不需要npm install和run time就能运行的,只需唯一的html单文件。

它身材很小巧;蓝白配色,底部夹杂着一些mdi图标;只有简单的light主题。

用的虽然是VUE,可是只用CDN引入了JS库,简单快捷,而且都是latest版本,似乎不用更新,也不用安装。

    <script src="https://cdn.jsdelivr.org/npm/vue/dist/vue.global.prod.min.js"></script><script src="https://cdn.jsdelivr.org/npm/vuetify/dist/vuetify.js"></script><link href="https://cdn.jsdelivr.org/npm/vuetify/dist/vuetify.css" rel="stylesheet">


LLM对人说话,总是满口markdown,教人半懂不懂的。又因为我自己前端开发经验不过关,便直接引入了md-editor-v3,替我可视化markdown。

fetch回来的JSON body刚收到,所有的组件就都看着它笑,有的叫道,

“OpenAI,你又增加新的限制区域了!”它不回答,只是吐出一行,“Fail to fetch XXX”便不再多言。

他们又故意的高声嚷道,“Nidia NIM 都免费提供 Llama 405B 了!”

OpenAI睁大眼睛说,“哪有什么免费的...”

“就是免费的,只要注册时候额外申请一下免费token就行了,随便用。”

OpenAI便涨红了脸,额上的青筋条条绽出,争辩道,“那也是有数量上限的,而且不支持跨域,跨域你懂吗?”接连便是难懂的话,什么“CORS”, 什么“Allow Headers”之类,

引得众后端都哄笑起来:那我再开发一个Proxy不就搞定了吗,workflow内充满了开源的空气。

简单小巧的OpenAI API访问:一键部署,轻松上手-CSDN博客文章浏览阅读1.6k次,点赞62次,收藏16次。OpenAI Proxy Docker项目不仅简单小巧,而且易于上手。通过使用最新的Bun运行时,你可以在保持高性能的同时,得到可靠的代理服务解决方案。https://blog.csdn.net/aiqlcom/article/details/144684140

听人家背地里谈论,OpenAI原来也免费送过5刀的token,但没有境外手机号,又不会绑境外信用卡;于是愈用愈少,弄到将要过期了。幸而开源vllm跑得一手好模型,便换一个模型当后端用用。

可惜OpenAI又传染的一样坏脾气,就是API版本控制。坐不到几天,便连JSON和定义,一齐更新了。如是几次,没有办法,便免不了再开发一个API UI,偶然查看一下最新格式。

https://api-ui.aiql.com/ 第一次登陆比较慢,可以下载html修改CDNicon-default.png?t=O83Ahttps://api-ui.aiql.com/

但是OpenAI在我们这里,品行比别家都好,格式支持的最全,报错最详细;虽然间或没有在文档里更新,暂时记在Issue里,但不出一月,定然修复,从Issue里done掉了名字。


OpenAI融了几回资,涨红的股价渐渐走了高,旁人便又问道,“OpenAI,AGI当真有出路么”,OpenAI看着问他的人,显出不屑置辩的神气。

他们便接着说道,“你怎的连半个开源的模型也没有呢?”OpenAI立刻显出颓唐不安模样,脸上笼上了一层灰色,嘴里说些话;这回可是全是金鍂鑫𨰻之类,一下全懂了。在这时候,众人也都哄笑起来:workflow内充满了闭源的空气。

在这些时候,我可以附和着challenge,掌柜是决不责备的。而且掌柜见了那些用OpenAI模型的项目,也每每这样发难,引人发笑。

OpenAI自己知道不能开源,便只好向各方面发力。有一回对我发邮件,“你知道多模态和Function call么?”

我略略点一点头。

他说,“用过,……我便要考你一考。request里的messages,怎样写的?”

我想,API文档里都写着的,也配考我么? 便回过脸去,不再理会。

OpenAI等了许久,很恳切的说道,“不会用吧?……我教给你,记着!这些format应该记着。将来做掌柜的时候,装逼要用。”

我暗想我和掌柜的等级还很远呢,而且我们掌柜也从不看开发细节;又好笑,又不耐烦,懒懒的答他道,

“谁要你教,不就是content里面一个string么?”OpenAI显出极高兴的样子,将一个长长的schema敲着我的脑袋,点头说,“对呀对呀!……messages光是role就有六样写法,你知道么?”我愈不耐烦了,努着嘴走远。

OpenAI刚写了个oneOf,想在后面跟上[developer, system, user, assistent, tool, function],见我毫不热心,便又叹一口气,显出极惋惜的样子, 把function标为了deprecated,然后又把user和tool定义了不一样的content parts。

(user, assistent, tool 里面的支持格式其实不一样哟)

有几回,隔壁开发组见得着KPI,也赶热闹,围住了OpenAI。它便给他们模型吃,一周一更新。开发组从年初加班到年尾,仍然不散,眼睛都望着array里不断新增的 [o1, o1-2024-12-17, o1-preview, o1-preview-2024-09-12, o1-mini, o1-mini-2024-09-12, gpt-4o, gpt-4o-2024-11-20, gpt-4o-2024-08-06, gpt-4o-2024-05-13, gpt-4o-audio-preview, gpt-4o-audio-preview-2024-10-01, gpt-4o-audio-preview-2024-12-17, gpt-4o-mini-audio-preview, gpt-4o-mini-audio-preview-2024-12-17, chatgpt-4o-latest, gpt-4o-mini, gpt-4o-mini-2024-07-18, gpt-4-turbo, gpt-4-turbo-2024-04-09, gpt-4-0125-preview, gpt-4-turbo-preview, gpt-4-1106-preview, gpt-4-vision-preview, gpt-4, gpt-4-0314, gpt-4-0613, gpt-4-32k, gpt-4-32k-0314, gpt-4-32k-0613, gpt-3.5-turbo, gpt-3.5-turbo-16k, gpt-3.5-turbo-0301, gpt-3.5-turbo-0613, gpt-3.5-turbo-1106, gpt-3.5-turbo-0125, gpt-3.5-turbo-16k-0613]。

OpenAI着了慌,伸开五指将文档罩住,弯腰下去说道,“不多了,我已经不多了。”直起身又看一看股价,自己摇头说,“不多不多!多乎哉?不多也。”于是这一群Prompt Engineer都在哭声里走散了。

OpenAI是这样的使人快活,可是没有他,别人也便这么过。vllm,TGI,部署个小模型当后端也不是不能用。

https://github.com/huggingface/text-generation-inferenceicon-default.png?t=O83Ahttps://github.com/huggingface/text-generation-inferencehttps://github.com/vllm-project/vllmicon-default.png?t=O83Ahttps://github.com/vllm-project/vllm

谁曾想TGI基于conda,而这玩意license不能给大组织商用:

我知道AI多半是个杀猪盘,但是没曾想,屠夫和刀子都没动手,甚至猪还没哼哼,砧板第一个跳起来给了我一巴掌:

Anaconda 许可变更解读icon-default.png?t=O83Ahttps://www.datacamp.com/blog/navigating-anaconda-licensing

有一天,大约是2024年圣诞前的两三天,掌柜正在慢慢的定OKR,取下粉板,忽然说,“OpenAI长久没有新东西了。”我才也觉得它的确长久没啥新闻了。

一个带着黑眼圈的人说道,“它怎么没更新? ……他o1-pro了。”

掌柜说,“哦!”

“它总仍旧是更新。这一回,是自己卷,竟连更12天。它家的新东西,200刀一个月,还只能Web访问,用得起么?”

“后来怎么样?”“怎么样?先充钱,后来是封号,信用卡记录被老婆看到了,再打折了腿。”

“后来呢?”“后来打折了腿了。”

“打折了怎样呢?”“怎样?……谁晓得?许是换用Llama了。”掌柜也不再问,仍然慢慢的算他的帐。

圣诞过后,东北风是一天凉比一天,看看将近元旦;

我整天的靠着AI的火,也须换开源模型了。

clone了一整天的模型,没有一个能用的,我正合了眼坐着。忽然间听得一个声音,“试试这MOE吧。”

这声音虽然极低,却很耳熟。看时又全没有人。站起来向外一望,竟是Deepseek在微信群里悄悄发着自己的照片:

它脸上全是benchmark,已经看不出原本的样子;穿一件自研的大衣,盘着两腿,下面垫一个MOE,用草绳在肩上挂住;见了我,又说道,“试一试MOE吧。”

掌柜也伸出头去,一面说,“新的开源模型么?训练成本才557.6万美元呢!”

Deepseek很疲惫的仰面答道,“这,v3不算新模型了……已经超过Llama 405B了。也赶上GPT-4o了,性能算好的了。”

掌柜仍然同平常一样,笑着对我说,“你看,又多了一个连部署都部署不起的模型”。但Deepseek这回却不十分分辩,单说了一句“我在Huggingface上开源了!”

“开源? 那要不我们试试?支持Function call吗” Deepseek低声说道,“支持,支,早就支持了……”他的眼色,很像恳求我,不要再细问(问就是官方文档更新慢)。

此时已经聚集了几个开发,便去查看文档了。我重新配置了Chat-UI,清空对话记录,重置了MCP server。他从新人注册里面摸出了一个月的免费token,放在我手里,见他满手都是卡,也不知是哪个哥布林洞穴里来的,想必模型便是用这2000张卡炼出来。不一会,我们调通了代码,他便又在旁人的说笑声中,去下一个交流群里了。

自此以后,就没有再看其他模型了。到了年底,掌柜取下粉板说,“还有Llama 3.3呢!”到了第二天的中午,又说,“Mistral最近有更新么?”到第三天又问,“Qwen是不是也在推新模型”,于是我狠狠心,把这些都用vllm测了一遍。


我到现在终于差不多可以确定Chat-UI大概可以拿出来给大家用一用了。

https://github.com/AI-QL/chat-ui 帮忙点个赞吧icon-default.png?t=O83Ahttps://github.com/AI-QL/chat-ui

正文

其实要把一个项目说清楚,一篇短文或者回答是不够的。

然而我这人又不善言辞,只好自欺欺人:“一个纯粹的前端项目,不需要用复杂的介绍来丰富的,交互逻辑清晰,满足基本功能需求,就可以了。“

所以这里只是估摸着说一下基本的功能,具体的代码解读,等有时间再做吧。

配置

我开发部署后端的时候,经常头疼没有一个前端可以用,主要是后端的URL和model名称一直在变,有时候又需要给别人展示,直接curl太粗暴了,所以Chat-UI里可以随意配置URL,还可以通过Json文件快速导入写好的配置:

Prompts

支持插入多个prompts,会在messages里面帮你合并一起放到system role对应的text content里。这样可以测试不同提示词以及顺序对模型的影响。暂时用不上的,但是已经写好的prompt,可以放到backup里,随时拖拽交换对比。

MD格式支持

可以支持Markdown语法显示,比如Mermaid图和代码块:

同时也可以一键复制文本,或者显示原始文本。

历史记录

记录聊天历史,可以点击载入,或者下载并保存为Json文件,也可以单独或批量删除。

多模态

可以支持图片多模态,记得选择后端模型的时候要选择vision模型,比如Llama vision或者Pixtral。

i18n

提供基本的多语言支持,选了5种特殊字符比较多的语言,有需要的同学可以自己加

MCP

可以作为渲染端对接 MCP(Model Context Protocol)Servers,具体参考另一个项目:

MCP(Model Context Protocol)模型上下文协议 实战篇1_mcp协议内容-CSDN博客文章浏览阅读2.6k次,点赞70次,收藏10次。MCP 协议(Model Context Protocol)模型上下文协议,简单实战,快速开发一个AI Agent APP_mcp协议内容https://ai-ql.blog.csdn.net/article/details/144324496

这样可以扩展更多agent功能以及function call

Response兼容

对于一些正常OpenAI SDK兼容的后端都可以支持。对于一些特殊后端,比如Cloudflare的 Workers AI (如下这种Rest API定义):

{"result": {"response": "Hello, World first appeared in 1974 at Bell Labs when Brian Kernighan included it in the C programming language example. It became widely used as a basic test program due to simplicity and clarity. It represents an inviting greeting from a program to the world."},"success": true,"errors": [],"messages": []
}

或者python写的直接plain text返回的response,也都可以兼容(是的,真的有这样的后端,除非自己写一个不然真的找不到能支持这种离谱格式的玩意)。

也可以勾选支持流式输出(stream)。

Cloudflare Pages

项目比较简单,直接fork之后可以部署在自己的域名下,如果不熟悉Cloudflare pages请查看链接:

https://developers.cloudflare.com/pagesicon-default.png?t=O83Ahttps://developers.cloudflare.com/pages

Docker

也提供直接Docker部署的镜像:

Docker Image - AIQL/Chat-UIicon-default.png?t=O83Ahttps://hub.docker.com/repository/docker/aiql/chat-ui/tags?page=1&ordering=last_updated

既然有了镜像,所以默认可以支持其他容器化部署,比如K8s,或者在Huggingface上直接一行代码搞定:

From aiql/chat-ui

https://huggingface.co/spaces/AI-QL/chat-uiicon-default.png?t=O83Ahttps://huggingface.co/spaces/AI-QL/chat-ui

这里也提供一个例子。

HTML

最后,也是最推荐的用法,可以直接在Github上下载 index.html,双击打开即可,不用安装也不用run。

https://github.com/AI-QL/chat-uiicon-default.png?t=O83Ahttps://github.com/AI-QL/chat-ui所有代码和部署教程已经同步至 GitHub 仓库,如果觉得项目对你有帮助,欢迎点个 ⭐️ 支持,非常感谢!

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

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

相关文章

linux更换yum源

1.备份系统源文件 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.bak2.下载国内的yum源到/etc/yum.repos.d/CentOS-Base.repo wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repo如无法使用wget命令也可以…

IDEA 社区版 SpringBoot不能启动

报错原因&#xff0c;Failed to load class [javax.servlet.Filter] <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-tomcat</artifactId><scope>provided</scope> </dependency>…

FPGA 4x4矩阵键盘 实现

1原理 FPGA(现场可编程门阵列)4x4矩阵键盘的实现原理主要基于行列扫描法,通过FPGA对键盘的扫描和识别,实现对键盘输入信号的采集和处理。以下是对FPGA 4x4矩阵键盘实现原理的详细解释: 一、矩阵键盘的基本原理 结构:4x4矩阵键盘由4行和4列组成,共16个按键。每个按键位…

如何进行有效沟通?

在信息化系统项目中进行有效沟通&#xff0c;可以参考以下策略和技巧&#xff1a; 沟通技巧 明确沟通目的&#xff1a;确保每次沟通都有明确的目标&#xff0c;了解沟通接收方的需求及偏好&#xff0c;并监督衡量沟通效果。 使用5C原则&#xff1a;正确的语法和拼写&#xff…

018-spring-基于aop的事务控制

1 先配置平台事务管理器 2 在配置 spring提供的advice 3 事务增强的aop 总结&#xff1a; 事务就是要做2个配置&#xff1a; <!-- 1 开启事务管理器 不同的框架对应不同的事务管理器 --> <bean id"transactionManager" class"org.springframework.j…

IDEA工具使用介绍、IDEA常用设置以及如何集成Git版本控制工具

文章目录 一、IDEA二、建立第一个 Java 程序三、IDEA 常用设置四、IDEA 集成版本控制工具&#xff08;Git、GitHub&#xff09;4.1 IDEA 拉 GitHub/Git 项目4.2 IDEA 上传 项目到 Git4.3 更新提交命令 一、IDEA 1、什么是IDEA&#xff1f; IDEA&#xff0c;全称为 IntelliJ ID…

Mybatis-Plus时间查询

Mybatis-Plus时间查询 public List<HroAttendanceStatistics> listEffectiveByWorkNo(String workNo) {LambdaQueryWrapper<HroAttendanceStatistics> queryWrapper new QueryWrapper<HroAttendanceStatistics>().lambda();queryWrapper.eq(HroAttendanceSt…

让 Agent 具备语音交互能力:技术突破与应用前景(16/30)

让 Agent 具备语音交互能力&#xff1a;技术突破与应用前景 一、引言 在当今数字化时代&#xff0c;人机交互方式正经历着深刻的变革。从早期的命令行界面到图形用户界面&#xff0c;再到如今日益普及的语音交互&#xff0c;人们对于与机器沟通的便捷性和自然性有了更高的追求…

【Unity3d】C#浮点数丢失精度问题

一、float、double浮点数丢失精度问题 Unity3D研究院之被坑了的浮点数的精度&#xff08;一百零三&#xff09; | 雨松MOMO程序研究院 https://segmentfault.com/a/1190000041768195?sortnewest 浮点数丢失精度问题是由于大部分浮点数在IEEE754规范下就是无法准确以二进制…

再见24你好25

现在是2024年12月31日。 愿我们都有我与我周旋久&#xff0c;宁做我的勇气。一、验证24年的期望事件 1、 1.本身说要出去跑步&#xff0c;但是膝盖伤了&#xff0c;可能以后都跑不成了 2.linux内存方面的东西看过一遍&#xff0c;自己也写了博客&#xff0c;但还是缺乏真正的…

用 Python 从零开始创建神经网络(十八):模型对象(Model Object)

模型对象&#xff08;Model Object&#xff09; 引言到目前为止的完整代码&#xff1a; 引言 我们构建了一个可以执行前向传播、反向传播以及精度测量等辅助任务的模型。通过编写相当多的代码并在一些较大的代码块中进行修改&#xff0c;我们实现了这些功能。此时&#xff0c;…

单元测试3.0+ @RunWith(JMockit.class)+mock+Expectations

Jmockit使用笔记_基本功能使用Tested_Injectable_Mocked_Expectations_jmockit.class-CSDN博客 测试框架Jmockit集合junit使用 RunWith(JMockit.class) 写在测试案例类上的注解 Tested 在测试案例中,写在我们要测试的类上面, 一般用实现类 Injectable 在测试案例中声明…

npm install 安装选项 -d -s -g

在使用 npm install 时&#xff0c;-d、-g 和 -s 是不同的选项&#xff0c;它们分别代表不同的安装模式或行为。以下是它们的详细解释&#xff1a; 1. -d&#xff1a;--save-dev 含义&#xff1a;将包安装为开发依赖&#xff08;devDependencies&#xff09;。使用场景&#…

【复刻】数字化转型是否赋能企业新质生产力发展?(2015-2023年)

参照赵国庆&#xff08;2024&#xff09;的做法&#xff0c;对来自产业经济评论《企业数字化转型是否赋能企业新质生产力发展——基于中国上市企业的微观证据》一文中的基准回归部分进行复刻基于2015-2023年中国A股上市公司数据&#xff0c;实证分析企业数字化转型对新质生产力…

Vue axios 异步请求,请求响应拦截器

在 Vue.js 中使用 axios 进行网络请求是非常常见的做法&#xff0c;因为它提供了比原生的 Fetch API 更丰富的功能&#xff0c;并且更易于处理错误和配置。结合 Axios 的拦截器功能&#xff0c;你可以对所有的请求或响应进行预处理&#xff0c;比如添加认证头信息、统一处理错误…

px、em、rem,vw区别介绍

在网页设计中&#xff0c;px、em、rem 和 vw 都是常用的 CSS 单位&#xff0c;它们各自有不同的用途和特性。下面是这些单位的详细介绍及其区别&#xff1a; 1. px&#xff08;像素&#xff09; 定义&#xff1a; px 是最常用的绝对单位&#xff0c;表示屏幕上的一个物理像素…

【数据仓库】hadoop3.3.6 安装配置

文章目录 概述下载解压安装伪分布式模式配置hdfs配置hadoop-env.shssh免密登录模式设置初始化HDFS启动hdfs配置yarn启动yarn 概述 该文档是基于hadoop3.2.2版本升级到hadoop3.3.6版本&#xff0c;所以有些配置&#xff0c;是可以不用做的&#xff0c;下面仅记录新增操作&#…

使用 CSS 的 `::selection` 伪元素来改变 HTML 文本选中时的背景颜色

定义 ::selection 伪元素&#xff1a; 在你的 CSS 文件中&#xff0c;添加 ::selection 伪元素&#xff0c;并设置 background-color 属性来改变选中文本的背景颜色。 示例代码&#xff1a; ::selection {background-color: yellow; /* 你可以根据需要更改颜色 */color: black…

【Kafka 消息队列深度解析与应用】

Kafka 消息队列深度解析与应用 一、Kafka 概述 &#xff08;一&#xff09;产生背景 Kafka 最初是由 LinkedIn 开发&#xff0c;旨在解决其内部海量数据的实时传输问题。在现代大数据环境下&#xff0c;企业需要处理海量的数据流入和流出&#xff0c;包括用户的行为数据、系…

【测试】接口测试

长期更新好文,建议关注收藏! 目录 接口规范接口测试用例设计postmanRequests封装接口自动化框架实例复习HTTP超文本传输协议 复习cookie+session 实现方式 1.工具 如postman ,JMeter(后者功能更全) 2.代码 python+requests / java+httpclient【高级】接口规范 传统接口 RE…