超详细Chatbot UI的配置使用及问题汇总

huoyueyi

已于 2024-12-27 11:21:30 修改

阅读量2.5k

点赞数 18

文章标签： ui 前端 chatgpt

于 2024-12-20 16:51:16 首次发布

本文链接：https://blog.csdn.net/Kyrie_mvp/article/details/144614308

版权

首先 Chatbot UI是适合所有人的开源AI聊天应用程序

官网开源地址 GitHub - mckaywrigley/chatbot-ui: AI chat for any model.

准备阶段 --> 配置阶段 --> 运行项目 (请按照顺序且每一步都必不可少)
注 : 请全程配置稳定快速的vpn , 尽量减少因网络问题而产生的其他问题

准备阶段

1.npm和node (目前我node是18.20.5 ; npm是10.8.2)

2.安装docker

Get Docker | Docker Docs

终端执行 docker ps , 有下述内容表示安装成功

docker ps

3.安装scoop

打开powershell 输入 Set-ExecutionPolicy RemoteSigned -Scope CurrentUser (用于打开权限)

Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

下载scoop,可能会出现问题,我搜集了四种下载方法,有一种能下载即可

irm get.scoop.sh | iex

iwr -useb get.glimmer.ltd | iex

irm https://ghproxy.com/raw.githubusercontent.com/duzyn/scoop-cn/master/install.ps1 | iex

irm https://cdn.jsdelivr.net/gh/duzyn/scoop-cn/install.ps1 | iex

下载scoop的必装软件

scoop install aria2 git 7zip

scoop -v 检查是否安装成功

4.用scoop安装supabase CLI

mac / linux 版本

brew install supabase/tap/supabase

window 版本

scoop bucket add supabase https://github.com/supabase/scoop-bucket.git

scoop install supabase

同理用supabase -v 查看是否成功安装

supabase -v

配置阶段

1. 克隆地址

git clone https://github.com/mckaywrigley/chatbot-ui.git

2. 进入项目根目录(可能是chatbot-ui) 安装依赖

npm install

3. 进入项目根目录(可能是chatbot-ui) 启动supabase并拉镜像

特别注意 (镜像拉取成功后 , 不要再执行supabase start了 ,避免造成镜像的下载和删除 , 可以多执行 supabase status 和 docker ps 来查看镜像状态)

supabase start

3.1 成功状态应该如下

3.2 也可以换一种方法,去项目根目录外(可能是chatbot-ui)

git clone https://github.com/supabase/supabase.git

cd supabase

cd docker

docker-compose up -d

\supabase\docker中执行 docker-compose up -d , 启动成功后终端和docker内容如下

4.填写机密

4.1在本地根目录创建.env.local并终端运行

cp .env.local.example .env.local

4.2 执行supabase status 后 , 将里面的信息替换到.env.local和.env.local.example

// 这是.env.local的内容

# Supabase Public
NEXT_PUBLIC_SUPABASE_URL= http://127.0.0.1:54321
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjNni43kdQwgnWNReilDMblYTn_I0

# Supabase Private
SUPABASE_SERVICE_ROLE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6InNlcnZpY2Vfcm9sZSIsImV4cCI6MTk4MzgxMjk5Nn0.EGIM96RAZx35lJzdJsyH-qQwv8Hdp7fsn3W0YpN81IU

# Ollama
NEXT_PUBLIC_OLLAMA_URL=http://localhost:11434

# API Keys (Optional: Entering an API key here overrides the API keys globally for all users.)
OPENAI_API_KEY=
ANTHROPIC_API_KEY=
GOOGLE_GEMINI_API_KEY=
MISTRAL_API_KEY=
GROQ_API_KEY=
PERPLEXITY_API_KEY=
OPENROUTER_API_KEY=

# OpenAI API Information
NEXT_PUBLIC_OPENAI_ORGANIZATION_ID=sk-sBY_jJMt61s-JSN5HMrDFdalEVvaIJyRFQklxLS_oTT3BlbkFJRBpdVILQZKJTbJbGlNxb4IdGAcAtXOOgp8li0KcToA

# Azure API Information
AZURE_OPENAI_API_KEY=
AZURE_OPENAI_ENDPOINT=
AZURE_GPT_35_TURBO_NAME=
AZURE_GPT_45_VISION_NAME=
AZURE_GPT_45_TURBO_NAME=
AZURE_EMBEDDINGS_NAME=

# General Configuration (Optional)
EMAIL_DOMAIN_WHITELIST=
EMAIL_WHITELIST=

# File size limit for uploads in bytes
NEXT_PUBLIC_USER_FILE_SIZE_LIMIT=10485760

-----------------------------------------------------------------------------------------

// 这是.env.local.example的内容

# Supabase Public
NEXT_PUBLIC_SUPABASE_URL= http://127.0.0.1:54321
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjNni43kdQwgnWNReilDMblYTn_I0

# Supabase Private
SUPABASE_SERVICE_ROLE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6InNlcnZpY2Vfcm9sZSIsImV4cCI6MTk4MzgxMjk5Nn0.EGIM96RAZx35lJzdJsyH-qQwv8Hdp7fsn3W0YpN81IU

# Ollama
NEXT_PUBLIC_OLLAMA_URL=http://localhost:11434

# API Keys (Optional: Entering an API key here overrides the API keys globally for all users.)
OPENAI_API_KEY=
ANTHROPIC_API_KEY=
GOOGLE_GEMINI_API_KEY=
MISTRAL_API_KEY=
GROQ_API_KEY=
PERPLEXITY_API_KEY=
OPENROUTER_API_KEY=

# OpenAI API Information
NEXT_PUBLIC_OPENAI_ORGANIZATION_ID=

# Azure API Information
AZURE_OPENAI_API_KEY=
AZURE_OPENAI_ENDPOINT=
AZURE_GPT_35_TURBO_NAME=
AZURE_GPT_45_VISION_NAME=
AZURE_GPT_45_TURBO_NAME=
AZURE_EMBEDDINGS_NAME=

# General Configuration (Optional)
EMAIL_DOMAIN_WHITELIST=
EMAIL_WHITELIST=

# File size limit for uploads in bytes
NEXT_PUBLIC_USER_FILE_SIZE_LIMIT=10485760

4.3 在本地根目录\supabase\migrations\20240108234540_setup.sql将 service_role_key TEXT := 更换成supabase status中的service_role_key

5. 安装Ollama https://github.com/ollama/ollama#macos

运行项目

1. 运行项目 npm run chat

前端地址是 http://localhost:3000/

后端GUI是http://localhost:54323/project/default/editor

2. 具体使用需要配置 OpenAI API Key

遇到的问题汇总

1. 后台服务地址无法访问 http://localhost:54323/project/default/editor

原因 : 服务端配置出错
解决 : 终端执行 supabase status // 查看是否能成功返回 API URL GraphQL URL ...等信息 , 查看是否有报错

如果supabase status 无报错 , 肯定是配置阶段-第4步-填写机密配置的不对

如果有报错 , 类似下图报错 supabase_db_chatbotui container is not running: exited

supabase status --debug          //查看报错具体原因


docker ps -a                    //查看所有的镜像包括停止镜像



docker start 对应的CONTAINER ID  //重新启动对应镜像


docker ps                        //查看报错的镜像是否正常运行

2.成功运行系统后 , AI 返回信息错误无法进行对话 , 查看页面发现接口500

原因 : 只是你的vpn网速太慢 ! (这问题研究了半天)
解决 : 更换更快的vpn

3. 运行系统后发现页面明显阻塞 , 报错 if (!homeWorkspace){ throw new Error(error.message) } , 且接口出现406

原因 : 系统不稳定
解决 : supabase status 无报错情况下 , 停止目前的npm run chat , 重新运行几次npm run chat