JS

THChatUI

by Unagi-cq/THChatUI

0 views

浏览器插件端、智能体、MCP开发中,欢迎Star

pythonnodejsjavascriptapiChat & Messaging

LM的Web会话管理方案THChatUI v3.0.4

GitHub China Docs

嗨喽~朋友!🤖 欢迎使用THWebUI ,一个基于Vue2/Vue3和Element Plus的Web对话方案。项目持续集成与升级中,敬请期待更多功能与优化。

THChatUI介绍

THChatUI V3 是一个专为数据敏感型个人/组织/公司设计的开源大模型对话WebUI,基于Vue和Element Plus开发,可简便快捷的接入本地大模型,保护信息安全。本项目基于Apache 2.0协议开源。

前端采用Vue更适合中国宝宝体质~

后端采用Python的Flask快速启动接口,项目提供了若干个调用示例(并不是必须的)。

不需额外数据库,数据存浏览器IndexedDB中。

目前支持以下平台:Web PC端、Web 移动端、Wins桌面端。

Wins桌面端请移步至发布页下载。

THChatUI

功能介绍

接口请求模式

本项目支持自定义模型接口第三方HTTP请求两种模式:

  1. (开发者友好)自定义模型接口:需要加载本地模型,并运行THChatUI提供的Python脚本。提供SSE、WS两种请求方式写法模板,支持HF平台所有对话大模型,可以完全保护隐私不被第三方获取。我们已经在/thchat-server目录下提供了若干个示例,可以参考。
  2. (使用者友好)第三方HTTP请求:仅需要去第三方申请KEY填入“设置”——“API KEY”中。本项目永久开放讯飞星火Spark Lite模型作为本仓库平台体验用。

功能

本项目支持的功能有:

  • 会话管理:支持会话创建、删除、编辑
  • 知识库管理:支持文件管理、文件上传、文件分片、文本召回、知识库问答(RAG)
  • 多轮对话:支持多轮对话、对话轮数配置
  • 联网搜索:支持使用LLM内置联网搜索、Tavily Search外挂联网搜索
  • 多平台集成,支持以下平台模型的调用:
    • 阿里云百炼
    • 百度千帆
    • 轨基流动
    • 月之暗面
    • 讯飞星火
    • 智谱AI
    • OpenAI(包括类OpenAI式服务)
    • Google AI(Gemini)
    • Dify
  • 系统主题切换:支持浅色、深色、毛玻璃三种主题,支持自定义背景图片
  • 响应式设计:支持PC、移动端
  • 多模态:
    • 支持普通对话、联网搜索对话、知识库对话
    • 支持图片输入模型
    • 支持图片绘制模型
  • 国际化:支持简中、英文
  • APIKEY管理:支持APIKEY的添加、删除、编辑
  • 模型管理:可手动添加各个平台的模型
  • 看板娘:支持看板娘,提供了200+模型

设计特性

本项目具有以下特性:

  • 专注于轻量化设计,纯前端项目,开箱即用,不需要繁琐的配置
  • 完全基于Vue和Element Plus开发
  • 不需要额外数据库,数据存浏览器IndexedDB中
  • 为开发者提供了丰富的接口示例,支持本地模型请求模式和第三方HTTP请求模式
  • 项目内部提供了丰富的配置项,持久化层采用面向对象设计,方便开发者进行二次开发,接入db存储接口

界面展示

Web PC端Web 移动端Windows 桌面端
THChatUITHChatUITHChatUI

在线体验与代码仓库

THChatUI国内加速体验地址 THChatUI永久体验地址

【注】THChatUI在线体验版只提供了讯飞星火Lite模型调用,其他平台的模型调用需要去对应平台申请Key并填入设置中,Key只会保存在本地浏览器缓存中,绝对安全。

THChatUI代码仓库

【注】代码仓提供了前端项目和后端接口示例。

THChatUI V2 代码视频讲解教程 个人博客

公众号【三黄工作室】

THChatUI

快速开发

THChatUI不仅提供了为开发者提供了前端项目,还提供了基于Python的Flask、FastAPI库启动的12个接口示例。

这些接口提供了最简洁的实现方式(文件名含_simple_)与基于langchain的实现方式(文件名含_langchain_),并且分别提供了普通聊天、知识库检索、联网搜索、多模态输入和图片生成5种类型的接口示例。

安装

在安装项目前,请先移步node中文官网安装node.js环境,理论上v14以上版本皆可,建议安装最新版,截至目前,node已经更新至v20.12.2。

查看node是否安装成功:

node -v

下载并运行:

# 下载到本地
git clone https://github.com/Unagi-cq/THChatUI
# 进入web ui目录
cd ./thchat-ui
# 安装npm依赖
npm install
# 本地运行
npm run serve

访问:

http://localhost:8080/

项目项目启动后,使用教程请参考“使用教程”栏目。

对于开发人员,强烈建议使用本地接口调用的模式。参考仓库根目录下的thchat-serve文件夹:

thchat-serve
├─igm
│      5_zhipuai_ZHIPUAI_igm.py
├─llm
│  ├─chat
│  │      1_simple_local_chat.py
│  │      2_langchain_local_chat.py
│  │      3_langchain_SparkLLM_chat.py
│  │      4_langchain_TongyiQwen_chat.py
│  │      5_langchain_ZHIPUAI_chat.py
│  │      6_langgraph_ZHIPUAI_chat.py
│  ├─rag
│  │      1_simple_local_rag.py
│  │      4_langchain_TongyiQwen_rag.py
│  │      rag_example.pdf
│  └─search
│          1_simple_local_search.py
│          3_langchain_SparkLLM_search.py
│          5_langchain_ZHIPUAI_search.py
└─vim
        5_langchain_ZHIPUAI_vim.py

后端接口提供了三大类请求示例,分别是对话(llm)、多模态输入(igm)、图片生成(vim)。

在对话(llm)中,提供了普通聊天(chat)、知识库检索(rag)、联网搜索(search)示例。

每一种请求方式都提供了最简洁的实现方式(文件名含_simple_)和基于langchain、langgraph的实现方式(文件名含_langchain_等)。 每一种请求方式都提供了加载本地模型的写法示例(安全、免费、要显卡)与用KEY请求第三方远程模型的写法示例(安全未知、收费、无须显卡资源)。

后端文件的运行需要python3.10环境。先创建conda镜像,可以执行:

# 进入web serve目录
cd ./thchat-serve
# 创建conda镜像
conda_env.sh
# 激活conda镜像
conda activate thchat

启动接口可以运行:

# 启动某个接口
python ./llm/chat/1_simple_local_chat.py

【注】如果项目启动失败,请检查前端项目端口8080和后端服务端口5000是否被占用。

打包部署

前端项目打包:

npm run bulid

打包成功会生成dist文件夹,把dist文件夹里面的内容上传到服务器即可。

除此之外,阿里云平台的请求是需要配置代理的,还需要给站点的服务器添加如下nginx代理配置:

location ^~ /ali/remote/
    {
        proxy_pass https://dashscope.aliyuncs.com/;
        proxy_ssl_server_name on; 
        proxy_set_header Host dashscope.aliyuncs.com;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header REMOTE-HOST $remote_addr;
        proxy_set_header Upgrade $http_upgrade;
        proxy_http_version 1.1;
        # proxy_hide_header Upgrade;
    
        add_header X-Cache $upstream_cache_status;
        #Set Nginx Cache
    
        set $static_file8WLuNoD1 0;
        if ( $uri ~* "\.(gif|png|jpg|css|js|woff|woff2)$" )
        {
            set $static_file8WLuNoD1 1;
            expires 1m;
        }
        if ( $static_file8WLuNoD1 = 0 )
        {
            add_header Cache-Control no-cache;
        }
    }

【注】 本地运行调试时不需要额外配置。/ali/remote/ 是和前端项目的vue.config.js文件里的代理前缀对应的。

后端接口部署就很简单了,配置好python3.10环境,安装好包,直接运行就行。

项目目录与代码实现

请参考:THChatUI V2 代码视频讲解教程

Install

No configuration available
For more configuration details, refer to the content on the left

Related

Related projects feature coming soon

Will recommend related projects based on sub-categories