首页 > 其他分享 >使用Vue3实现Ollama WebUI

使用Vue3实现Ollama WebUI

时间:2025-01-03 20:11:39浏览次数:1  
标签:界面 Ollama 开源 WebUI LLM Vue3 ollama

开始

大家好呀,最近我在研究LLM,但是是本地大语言模型。其中我主要使用的软件是Ollama

Ollama可以方便的下载及运行LLM

Ollama提供了一套REST Api,并且已经有了ollama-js这个库,可以方便的调用接口,所以我们可以自己写一套WebUI。

那么为什么不用别人写好的呢?我找了些开源项目,但大多是python编写的,且较重量,而我想要的只是一个简便的聊天界面。

并且实际上自己写也不是特别麻烦,有许多开源项目可以参考,所以我花几天时间实现了一个功能齐全的前端界面。

开源地址:ollama-chat-ui: vue3 ollama webUI

截图如下。

界面

聊天

image

代理

image

系统提示词

image
image

多主题

image

image

详细说说

因为是专门设计于个人与LLM的聊天的,所以整个项目只涉及前端。

项目所有数据都存放在本地存储中,注意不要和其他项目混淆了。
image

其中的聊天记录每个代理都是分开的,可以一定程度避免加载慢的问题。

标签:界面,Ollama,开源,WebUI,LLM,Vue3,ollama
From: https://www.cnblogs.com/refiz/p/18650840

相关文章

  • Vue3 启动报错:failed to load config from D:\file\vue\examination_front\vite.c
    今天在创建vue3项目的时候报错了一个启动开发服务器时遇到了一个构建错误 查询了一下,执行npm i的时候,他并没有帮我安装vitePSD:\file\vue\hello_vue3>npmlistvitehello_vue3@0.0.0D:\file\vue\hello_vue3└──(empty)最后执行安装,就能启动了PSD:\file\vue\h......
  • vue3 在渲染md中的数学公式
    常规的md转数学公式插件无法解决此问题问题:在渲染过程中\t被转义导致渲染出错**方案为:将\t转义为\t**依赖的插件及版本"katex":"^0.16.15","markdown-it":"^14.1.0","markdown-it-katex":"^2.0.3","markdown-it-latex&......
  • 前端学习openLayers配合vue3(加载线上数据源)
    现在我们学习一下加载网上的线上数据再加上点矢量图层,紧接着上一步关键代码layers:[//瓦片图层source第三方,或者自带的,地图的底层newTileLayer({//source:newOSM(),//内置的国外地址,需要代理source:newXYZ({url......
  • vue3随记
    vue3父组件传值子组件,Vue3父组件给子组件传值父组件先引入组件importMbglUserDetailfrom"@/views/mbgl/user/mbglUserDetail.vue";定义传值数据响应式letdataOne=ref()使用组件并传值<MbglUserDetail:parentOneData="dataOne"/>子组件获取采用ts语法糖......
  • vue3整理
    vue3随记,idea启动前端vue项目前期工作,vue全局变量,vue3全局变量,vue循环、vue遍历、vue3循环、vue3遍历 vue项目异常报错记录Error:Cannotfindmodule'@vue/cli-plugin-babel'......
  • 大模型—Ollama 本地部署大模型,保姆级教程,收藏这一篇就够!
    Ollama本地部署大模型在当今的科技时代,AI已经成为许多领域的关键技术。AI的应用范围广泛,从自动驾驶汽车到语音助手,再到智能家居系统,都有着AI的身影,而随着Facebook开源LLama2更让越来越多的人接触到了开源大模型。今天我们推荐的是一条命令快速在本地运行大模型,在G......
  • 前端学习openLayers配合vue3(偏移动画效果,限制范围)
    我们原来的偏移感觉比较生硬,我们来学习一下偏移的动画,先列一下这节的知识点限制经纬度范围和缩放范围(view层)view=newView({center:[114.305469,30.592876],zoom:10,projection:'EPSG:4326',extent:[113.999999,30.25,114.666667,30.833333],//限制地图......
  • 前端学习openLayers配合vue3(图层中心点的偏移)
    有了上一步的学习,我们知道了如何创建一个地图,现在我们来尝试更改一下图层的中心点关键代码letview=map.getView();//获取视图层letcenter=view.getCenter();//表示当前中心点的位置,调增经纬度就可以进行位置的便宜,下移,左移右移也同理console.log(center);//[......
  • 前端学习openLayers配合vue3(简单的创建一个地图)
    首先搭建一个vue工程化环境,首先我们先来创建一个地图吧首先我们需要下载npmiol其次我们需要在main.js里面引入相关的cssimport'ol/ol.css'到现在我们就可以开始敲击我们的代码了,直接复制就可以展示出一个简单的地图啦,相关备注已经在代码中标注,有什么不懂的可以留言哦......
  • vue3 tsx ref dom获取方式
    在Vue3中使用TypeScript和TSX(TypeScript的JSX语法)时,获取DOM元素的方式与普通的Vue组件略有不同。Vue提供了ref和reactive等响应式API来帮助我们处理组件的状态,而当我们需要直接访问DOM节点时,我们可以使用ref。下面是一个简单的例子,展示如何在Vue3+TSX......