大家好,我是feng,感谢你阅读我的博文,如果你也关注AI应用开发,欢迎关注公众号和我一起探索。如果文章对你有所启发,请为我点赞!
欢迎关注公众号一起探索
一、引言:前端也能开发大模型应用!
举目望去,网络上的开发大模型应用的基本上全是Python代码。曾经私以为难道大模型应用都只能用Python开发?据说这P虽然语法简单、易于上手,但性能着实很不咋滴的。 这对于我这种用Java顺手了的,总以能开发出“高性能的企业级应用”而洋洋自得的“老猿”来说,咋会看得上眼呢?!
实际上,是我浅薄了。所谓存在即合理,只是自己无知、眼界窄而已!
抛开Python和Java不谈。本文要介绍的是:如何使用前端技术来开发一个简单的“ChatGPT”——大模型聊天对话应用。
前端的同学可以看过来了!
在上一篇《AI探索实践8 - 本地运行大模型》介绍过,如何在本地安装和运行大模型。在此篇的基础上,我们使用前端技术Vue来开发一个能在本地运行的大模型聊天对话应用。
二、运行Ollama
当启动Ollama应用以后,Ollama已经能够提供http访问形式的接口服务。在mac上,点击Ollama图标即可。(未在Windows、Linux上测试,逻辑上应是相同的)在顶部工具栏可以看到应用图标。如果想退出,点击该图标会显示退出的菜单,点击即可。
三、 编写前端代码
3.1 创建前端项目
我这里使用的是Quasar2.x版本,Quasar框架和Element UI、Antd等框架一样是一个前端组件库,不过能够提供更多的功能,比如可以自动集成i18n、VueRouter、Piana等等。
创建Quasar项目,本质上和其他框架创建前端项目一样。终端执行如下命令:
yarn create quasar
根据提示,自动创建项目架构。
3.2 安装必要的依赖
要想使用前端开发出大模型应用程序,依赖于LangChain库。在终端下执行命令安装必要的2个依赖: langchain 和 @langchain/community
yarn add langchain
yarn add @langchain/community
3.3 核心代码
<template>
<div class="demo full-height column q-pa-md">
<div class="chat-dialog flex justify-center ">
<q-scroll-area class="full-height full-width" :thumb-style="GlobalThumbStyle">
<div style="width: 100%;min-height: 400px; padding-right: 10px;">
<q-chat-message v-for="(msg, idx) in messages" :key="idx" :avatar="msg.avatar" :text="msg.text"
:sent="msg.sent" class="q-mb-lg" />
</div>
</q-scroll-area>
</div>
<div class="fixed-bottom flex justify-center">
<div class="chat-prompt-dialog q-pa-md">
<q-input v-model="prompt" borderless>
<template v-slot:append>
<q-icon name="mdi-send" class="cursor-pointer" @click="sent" />
</template>
</q-input>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { ChatOllama } from '@langchain/community/chat_models/ollama';
// 消息列表
const messages = ref<Array<any>>([]);
// 用户输入的内容
const prompt = ref('');
// 对滚动条进行设置样式
const GlobalThumbStyle = {
right: '0',
borderRadius: '5px',
backgroundColor: 'grey-10',
width: '5px',
};
// 核心代码:声明一个对象,确定了api访问地址,和使用的模型。
// qwen:4b 这个名称的大模型,必须已经在Ollama中安装。
const chatModel = new ChatOllama({
baseUrl: 'http://localhost:11434', // Default value
model: 'qwen:4b',
});
// 定义一个方法,提供想消息数组中添加数据。
// 用户发送prompt、大模型返回消息 这2个场景,都会需要将数据添加到消息数组
function addMessage(content: string, avatar: string, sent: boolean) {
const newMessage = {
text: [content],
avatar: avatar,
sent: sent || undefined
}
messages.value.push(newMessage);
}
// 点击按钮时触发事件。
// 1、首先,将用户发送的消息添加到消息数组中
// 2、其次,调用LangChain库中该对象方法,向模型发送prompt,注意这是一个异步方法。
async function sent() {
addMessage(prompt.value, '/images/man.png', true);
// 大模型返回值是个json对象,response.content就是大模型返回的数据
const response = await chatModel.invoke(prompt.value as string)
addMessage(response.content as string, '/images/robot.png', false);
prompt.value = '';
}
</script>
<style lang="scss">
.demo {
min-width: 375px;
}
.chat-dialog {
width: 80vw;
margin: auto;
height: calc(100vh - 160px);
}
.chat-prompt-dialog {
width: 80vw;
min-height: 80px;
background-color: #fff;
border-radius: 8px;
margin-bottom: 30px;
}
</style>
Index.vue
Index.vue是一个Vue3页面,React可以参考,在对LangChain库的调用逻辑上是一样的。
代码中的注释已经比较清楚,我们可以容易的理解。当然这个示例代码只是展示了LangChain框架的一个基础使用的方法。
四、运行项目
终端执行
quasar dev
效果如下
打开浏览器,访问页面(注,为简化起见,上面代码中没有配置路由),效果如下:
五、总结
借助LangChain,前端同学也可以开发大模型应用了。当然,如果想提高更好的体验、更高的性能,使用后端进行逻辑管理是更好的做法。无论怎样,开发一个大模型应用是你动动手就能做到事情。