VeeAI: 基于Vue3+ElementPlus+Express的AI框架，AI服务端是基于Ollama+ChromaDB的RAG应用

# 项目介绍

VeeAI是一款基于Vue3+ElementPlus+Express构建的一套完全本地部署的大语言模型应用，包含完整的路由管理功能，管理员登录采用本地缓存方式，暂未设计账户相关模块，项目已经集成一套完整的AI调用系统以及其他工具（如包括arcgis，ffmpeg）的示例应用。

## 相较于网上其他的的AI对话有以下几个优势：

1. 完全不需要网络更不用梯子 
2. 数据、模型全在本地，不存在数据安全问题 
3. 可以自由选择开源大模型及自由定义模型的提示词 
4. 自己搭的系统，免费，免费，免费
5. 能图像识别能通过RAG高度自定义自己的模型

另外当然目前也有一定的缺点：

- 大部分基于国外开源大模型因此中文支持度不够完美（除阿里出品的Qwen）
- 由于是预训练模型，相较于ChatGPT这种持续训练的模型而言，相对没有那么“聪明”，有时候会有点恨铁不成钢的感觉O(∩_∩)O
- 由于目前主要是大语言模型，项目暂时还没有研究AI作画，生成视频，TTS克隆语音，换脸这些功能，这些和语言模型不太一样，后面也许会陆续集成进来

> 考虑到可能有的同学不知道RAG，这里简单直白的说下，即可以通过将大量垂直行业或自己的文档资料交给数据库管理，当与AI对话的时候，AI会根据你说的话去检索这些数据，并根据这些数据回答，相当于微调了这些开源大模型，也相当于给AI传授知识的一个过程，举个最简单的例子，当你不使用RAG的时候你问AI：“某某公司第一次迟到罚款多少钱”，大概率AI会说需要你提供更多信息或者给你举个例子之类的，但是当你使用了RAG，你将公司的规章管理制度文档提交给了数据库之后，AI就会给你明确的回复，并且文档内任何它所知道的你都可以问，或者你还可以让它提出建议修改哪些不合理的制度，根据现有制度扩展哪些制度等等，让它能够做到它原先有知识盲区不能做到的事情。

## 项目调用链及流程图

项目正常运行需要以下服务运行作为前提：

1. Mysql
2. Nginx (生产环境下)

3. Express

4. Ollama

5. ChromaDB

## 前端运行Vue+Vite （开发环境）

1.安装依赖

```shell
npm install
```

2.运行程序

```shell
npm run dev
```

3.打包程序

```shell
npm run build
```

## 后端运行Express

1.安装依赖

```shell
npm install
```

2.运行程序

```shell
npm start
```

## 服务器相关配置 （生产环境）

1.搭建好Mysql环境，并导入gogogo.sql数据库文件，并确保Mysql服务已经开始运行 （无论生产环境还是开发环境）

2.配置Nginx服务器及反向代理（所有IP端口均为各个程序的默认IP及端口，如有修改请自行自定义本配置）

```nginx
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'User-Agent,Keep-Alive,Content-Type,Authorization,Accept,Origin,DNT,Cache-Control,X-Mx-ReqToken,X-Requested-With';

include mime.types;

# 服务器配置，解决上线刷新404问题
location / {
    try_files $uri $uri/ /index.html;	
}

# 调用Express接口的反向代理
location /api {
    rewrite ^/api/(.*) /$1 break;
    proxy_http_version 1.1;
    proxy_pass http://127.0.0.1:3000;
}

# 调用Ollama服务接口的反向代理
location /ai {
    rewrite ^/ai/(.*) /$1 break;
    proxy_http_version 1.1;
    proxy_pass http://localhost:11434;
}

# 调用chromadb向量数据库服务接口的反向代理
location /chromadb {
    rewrite ^/chromadb/(.*) /$1 break;
    proxy_http_version 1.1;
    proxy_pass http://localhost:8000;
}
```

## 安装AI相关本地服务

### 安装Ollama本地大模型运行框架

1.进入ollama官网 (https://ollama.com) 下载对应系统的包进行安装

2.使用ollama下载需要用到的模型

```shell
# 拉取下载嵌入模型
ollama pull nomic-embed-text
# 拉取下载大语言模型（本项目所用模型包含在Test/src/ai/model.js中，也可根据自己需要下载）
# 查看当前已下载模型 ollama list
ollama pull llama3
ollama pull llava-llama3
ollama pull mistral
# ollama还可以集成huggingface的其他预训练模型，但需要进行格式转换，具体请根据ollama官方文档的指引进行操作
```

3.配置项目的内置模型
>  ***注意事项***
 - 1.allowImg 代表模型是否为多模态模型，是否为多模态模型因不同模型而异，并非自己定义，项目中的llava-llama3及llava为多模态模型，其余为非多模态模型
 - 2.desc 代表模型的描述，将展现在页面下拉列表中，可根据需要自定义。
 - 3.id 必须从0开始递增，因为项目将id作为下标使用，请不要随意设置，且id为0的模型为默认模型。
 - 4.项目中内置的llama3chinese模型是通过huggingface下载后再通过ollama导入的，无法直接从ollama中拉取，因此需要自行修改删除，否则导致项目找不到模型而无法对话（重要！！！）

```javascript
// Test/src/ai/model.js
// 根据下载的模型（可使用ollama list查看已下载模型）进行配置，根据步骤二可配置如下
let modelList = [
    {id:0,model:'llama3',desc:'llama3',allowImg:false},
    {id:1,model:'llava-llama3',desc:'llava-llama3',allowImg:true},
    {id:2,model:'mistral',desc:'llava',allowImg:false},
]
```

4.运行ollama（如果提示端口占用，先关闭后台运行中的ollama程序，或根据官方文档切换端口）

```shell
# 如果是Windows可以直接运行ollama图标，将会在后台运行
ollama serve
```

4.ollama配置相关，通过环境变量设置

```shell
# 配置模型下载及读取地址
OLLAMA_MODELS = D:/ai/ollama/models
# 允许跨域设置
OLLAMA_ORIGINS = *
```

### 安装ChromaDB向量数据库

1.先安装Python3.11及pip等环境，此步骤本文档不再赘述

2.使用pip安装ChromaDB，并配置好相应的环境变量

```shell
pip install chromadb
# 下载完成后，如果控制台输入chroma提示命令不存在，请找到chroma的安装路径及运行程序，将其添加到环境变量
```

3.运行chromadb

```shell
# --path后跟数据持久化存储地址，建议存放在硬盘空间较大的位置
chroma run --path D:/ai/chromadb
# Windows系统下，为了方便以后一键启动，建议将该命令保存为.bat文件
```

## 访问项目

开发环境访问：http://localhost:5173

生产环境访问：Nginx配置的服务器地址及端口

现在开始享受本地AI的魅力吧！

## 登录管理员

打开浏览器开发者工具窗口，在Localstorage项中添加password键，值为yhwyhwyhw，可在项目配置文件Test/src/setting.js中修改

添加后刷新程序页面即可看到路由管理相关页面

## 已知问题

1.多模态模型下无法实现上下文，且无法将模型缓存到内存。

原因：通常多模态模型需要实现图像识别的功能，而Ollama中，如果使用上下文形式，将导致每次发起请求Ollama服务内部都会叠加此前的图像，引起AI识别混乱，该问题已经在Ollama社区得到其他开发者证实，且目前无完美解决方案，只能通过调用多模态模型时如果需要进行图像识别功能，则不缓存模型，每次请求都重新运行模型，从而引起无法实现上下文的问题。等待官方解决内部问题后再行进一步修复。

2.多模态模型下无法实现图片+RAG同时使用。

原因：当使用多模态模型进行图像识别时，提示词如果长度过大，将导致远程主机被强制关闭的错误，社区其他开发者表示可能是以下问题导致，Ollama与Windows系统兼容问题，Windows下内存容量不足，防火墙阻止等。由于测试结果表示，提示词如果简短，则问题修复，提示词长度过长，问题复现，由此初步判断是提示词过长为主因，导致该问题可能由于以下两个方面之一造成：①内存分配不足 ②Ollama对Windows兼容性问题。等待官方处理。具体代码及测试可参考如下（Test/src/views/AiChat.vue 288-290行）

```javascript
let embData = await chromaDB.get(message.content,5)
let data = embData[0].join('\n').replace(/\n/g, '');
query.prompt = `以下内容是向量数据库中与问题相关度最高的五条数据，现在请根据这些数据进行回答，并一一列出你引用或参考了哪些句子或文献:\n --------\n ${data} \n --------\n 。用中文回答我，${message.content}.`

// 如果data长度过长，且使用多模态模型进行图像识别时，问题将复现
// 另：当前程序已限制该操作，用户进行图像识别时，不允许使用RAG，反之使用RAG时，不允许进行图像识别
```

# 项目截图
#### AI对话
<img width="50%" src="./docs/img/example1.jpg" alt="AI对话"/>

#### 图像识别
<img width="50%" src="./docs/img/example2.jpg" alt="图像识别"/>

#### 向量数据库调用
<img width="50%" src="./docs/img/example3.jpg" alt="向量数据库调用"/>

#### 向量数据库结合AI实现RAG
<img width="50%" src="./docs/img/example4.jpg" alt="向量数据库结合AI实现RAG"/>

#### 结合提示词完成角色扮演
<img width="50%" src="./docs/img/example5.jpg" alt="结合提示词完成角色扮演"/>

#### 结合提示词实现代码补全
<img width="50%" src="./docs/img/example6.jpg" alt="结合提示词实现代码补全"/>

#### 动态路由管理
<img width="50%" src="./docs/img/example7.jpg" alt="动态路由管理"/>

#### 其他demo功能1
<img width="50%" src="./docs/img/example8.jpg" alt="其他demo功能1"/>

#### 其他demo功能2
<img width="50%" src="./docs/img/example9.jpg" alt="其他demo功能2"/>

#### 伴奏提取器功能（基于ffmpeg，需要自行安装ffmpeg）
<img width="50%" src="./docs/img/example10.jpg" alt="伴奏提取器功能（基于ffmpeg，需要自行安装ffmpeg）"/>

> ***题外话：***这个项目本来我是搭来给自己做各种测试的，包括自研低代码平台，arcgis的使用，AI的应用等等，做着做着突发奇想的打算给自己做个本地工具库，就像伴奏提取器之类的，结果后面想了半天好像其实很多东西都有现成的了，干脆就盯着AI研究了，调用下OpenAI的接口给自己搭个本地“chatGPT”，然后又发现，没梯子或者没网的时候又用不了，有网的时候我干嘛不去用网上现成的，继而把思路转向自己部署一个本地大语言模型对话系统，就衍生出了现在这个项目，

vee7z/VeeAI

简介

发行版 (1)

贡献者

语言

近期动态

vee7z/VeeAI .gitee-modal { width: 500px !important; }

简介

发行版 (1)

贡献者

语言

近期动态

搜索帮助

vee7z/VeeAI