AI探索实践9 - Typescript开发AI应用1：不用Python！用前端也能开发一个本地运行的“ChatGPT”！

大家好，我是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，前端同学也可以开发大模型应用了。当然，如果想提高更好的体验、更高的性能，使用后端进行逻辑管理是更好的做法。无论怎样，开发一个大模型应用是你动动手就能做到事情。