【好玩儿的Docker项目】支持图片识别+语音输入！10分钟搭建无门槛ChatGPT WEB应用——LobeChat，随时随地使用ChatGPT！｜GPT-4模型

1.前言

之前给大家介绍过搭建一个私人 ChatGPT 网页应用 ——ChatGPT Next Web，让你随时随地方便使用 ChatGPT！

今天我们再来介绍一个更高级的版本，除了可以免注册，免代理，随时随地访问之外，它还支持语音输入输出，识别图像信息的功能！

2. 项目展示

2.1 视觉模型支持

LobeChat现在支持OpenAI最新的 gpt-4-vision 模型，具备视觉识别能力，这是一种能够感知视觉内容的多模态智能。用户可以轻松上传或拖放图片到对话框中，代理将能够识别图片内容，并基于此进行智能对话，创造更智能、更多样化的聊天场景。

这一功能开启了新的互动方式，让交流超越文本，包含丰富的视觉元素。无论是在日常使用中分享图片，还是在特定行业内解读图片，该代理提供了卓越的对话体验。

2.2 TTS和STT语音识别

LobeChat支持文本到语音（TTS）和语音到文本（STT）技术，使我们的应用程序能够将文本消息转换成清晰的语音输出，允许用户与我们的会话代理进行交互，就像他们在与真人交谈一样。用户可以从多种声音中选择一种与代理搭配。

此外，TTS为那些偏好听觉学习或希望在忙碌时接收信息的人提供了一个极佳的解决方案。在LobeChat中，我们精心挑选了一系列高质量的语音选项（OpenAI Audio、Microsoft Edge Speech），以满足来自不同地区和文化背景用户的需求。用户可以选择适合他们个人喜好或特定场景的语音，从而获得个性化的沟通体验。

2.3 函数调用插件系统

LobeChat的插件生态系统是其核心功能的重要扩展，极大地增强了ChatGPT的实用性和灵活性。通过利用插件，ChatGPT可以执行实时信息检索和处理，例如自动获取最新新闻头条，为用户提供即时且相关的信息。此外，这些插件不仅限于新闻聚合，还可以扩展到其他实用功能，如快速文档检索、电子商务平台数据访问以及各种第三方服务。

2.4 自带很多Prompt “角色”

在LobeChat代理市场中，创作者可以发现一个充满活力和创新的社区，这里汇集了众多设计精良的代理，它们不仅在工作场景中扮演着重要角色，还在学习过程中提供了极大的便利。我们的市场不仅仅是一个展示平台，也是一个协作空间。在这里，每个人都可以贡献自己的智慧，并分享他们开发的代理。

支持PWA

我们深刻理解在当今多设备环境中为用户提供无缝体验的重要性。因此，我们采用了渐进式网页应用（PWA）技术，这是一种现代网络技术，它使网页应用的体验接近于原生应用。

通过PWA，LobeChat能够在桌面和移动设备上提供高度优化的用户体验，同时保持其轻量级和高性能的特点。在视觉和感觉方面，我们还精心设计了界面，确保它与原生应用无法区分，提供流畅的动画、响应式布局，并适应不同设备屏幕分辨率。

2.5 移动设备适配

2.6 各种主题模式选择

...

3. 相关地址

官方GitHub地址：https://github.com/lobehub/lobe-chat
官方Demo：https://chat-preview.lobehub.com
官方文档：https://github.com/lobehub/lobe-chat/wiki

4. 搭建环境

• 服务器：咕咕这边用的腾讯轻量应用服务器 ，（最好选 非大陆的，而且线路还不错的机器）如果是小白刚开始玩的话，也可以选择Racknerd的高性价比服务器（注意地区选美国西部城市的）或者莱卡云的香港或者美国CN2 GIA

• 系统：Debian 11 （DD 脚本 非必需 DD，用原来的系统也 OK，之后教程都是用 Debian 或者 Ubuntu 搭建～）

• 安装好 Docker、Docker-compose（相关脚本）

• 【非必需但建议】域名一枚，并做好解析到服务器上（域名购买、域名解析 视频教程）

• 【非必需】提前安装好宝塔面板海外版本 aapanel，并安装好 Nginx（安装地址）

• 【非必需本教程选用】安装好 Nginx Proxy Manager（相关教程）

服务器建议：1核1G即可，不要用大陆的服务器

5. 搭建视频

5.1 YouTube

视频地址：https://youtu.be/rqVLzs2mX20

5.2 哔哩哔哩

哔哩哔哩：https://www.bilibili.com/video/BV15N4y1h7zr/

6. 搭建方式

如果你不是用的腾讯云的轻量应用服务器，可以直接跳到 6.1 部分。

安装系统（腾讯云轻量应用服务器）

腾讯云轻量服务器最大的特点就是 “轻量”，相比 CVM，更适合小白上手，这边我们之间选择 Docker 基础镜像，就可以省去后面安装 Docker 的步骤 （如果你非要用国内的服务器，这边装的 Docker 镜像还会帮你配置好国内镜像源，让你加速访问 docker 镜像资源） 不建议用国内的 。

登陆（腾讯云轻量应用服务器）

6.1 安装 Docker 与 Nginx Proxy Manager

可以直接参考这篇内容：

https://blog.laoda.de/archives/nginxproxymanager/

6.2 创建安装目录

创建一下安装的目录：

sudo -i

mkdir -p /root/data/docker_data/lobe

cd /root/data/docker_data/lobe

vim docker-compose.yml

英文输入法下，按 i

version: "3"
services:
    lobe-chat:
        ports:
            - 8080:3210
        environment:
            - OPENAI_API_KEY=sk-L3EZKQX7fT9My50l9siUT3BlbkFJVqaB1zIrdO1rdAVyCCDXlu # 你的API Key
            - ACCESS_CODE=gugugpt # 设置一个密码
        image: lobehub/lobe-chat

简单说一下：

• OPENAI_API_KEY可以在这边获取: https://platform.openai.com/api-keys （如果你还没有注册过ChatGPT，没有申请过ChatGPT的API，可以看这篇文章：【保姆级教程】从零开通 ChatGPT Plus）
• ACCESS_CODE自己随意取一个密码，以后想要使用的人只要有这个密码即可使用，可以不用填API KEY（就用你的这个API KEY了）

切换成英文输入法，修改好之后，按一下 esc，然后 :wq 保存退出。

6.3 打开服务器防火墙（非必需）并访问网页

打开防火墙的端口 8080

举例，腾讯云打开方法如下（部分服务商没有自带的面板防火墙，就不用这步操作了）：

类似图中的，这边我们填 8080，示例填 lobe ，确定即可（如果你在 docker-compose 文件里换了 9009，这边就需要填 9009，以此类推）

查看端口是否被占用（以 8080 为例），输入：

lsof -i:8080  #查看 8080 端口是否被占用，如果被占用，重新自定义一个端口

如果啥也没出现，表示端口未被占用，我们可以继续下面的操作了～

如果出现：

-bash: lsof: command not found

运行：

apt install lsof  #安装 lsof

如果端口没有被占用（被占用了就修改一下端口，比如改成 8381，注意 docker 命令行里和防火墙都要改）

理论上我们就可以输入 http://ip:8080 访问了。

但是这边我们必须先搞一下反向代理！

做反向代理前，你需要一个域名！

namesilo 上面 xyz 后缀的域名一年就 7 块钱，可以年抛。（冷知识，namesilo上 6位数字的xyz续费永远都是0.99美元 = =）

如果想要长期使用，还是建议买 com 后缀的域名，更加正规一些，可以输入 laodade 来获得 1 美元的优惠（不知道现在还有没有）

namesilo 自带隐私保护，咕咕一直在用这家，价格也是这些注册商里面比较低的，关键是他家不像其他家域名注册商，没有七七八八的套路！（就是后台界面有些丑 古老 = =）

【域名购买】Namesilo 优惠码和域名解析教程（附带服务器购买推荐和注意事项）

我们接着往下看！

7. 反向代理

7.1 利用 Nginx Proxy Manager

在添加反向代理之前，确保你已经完成了域名解析，不会的可以看这个：域名一枚，并做好解析到服务器上（域名购买、域名解析 视频教程）

之后，登陆 Nginx Proxy Manager（不会的看这个：安装 Nginx Proxy Manager（相关教程））

注意：

Nginx Proxy Manager（以下简称 NPM）会用到 80、443 端口，所以本机不能占用（比如原来就有 Nginx）

直接丢几张图：

注意填写对应的 域名、IP 和 端口，按文章来的话，应该是 8080

IP 填写：

如果 Nginx Proxy Manager 和 lobe 在同一台服务器上，可以在终端输入：

ip addr show docker0

查看对应的 Docker 容器内部 IP。

否则直接填 lobe 所在的服务器 IP 就行。

7.2 利用宝塔面板

发现还是有不少小伙伴习惯用宝塔面板，这边也贴一个宝塔面板的反代配置：

直接新建一个站点，不要数据库，不要 php，纯静态即可。

然后打开下面的配置，修改 Nginx 的配置。

代码如下：

    location / {
      proxy_pass http://127.0.0.1:8080/;       # 注意改成你实际使用的端口
      rewrite ^/(.*)$ /$1 break;
      proxy_redirect off;
      proxy_set_header Host $host;
      proxy_set_header X-Forwarded-Proto $scheme;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Upgrade-Insecure-Requests 1;
      proxy_set_header X-Forwarded-Proto https;
    }

此方法对 90% 的反向代理都能生效，然后就可以用域名来安装访问了。

有同学可能会问，为什么不直接用宝塔自带的反向代理功能。

也可以，不过咕咕自己之前遇到过当有多个网站需要反代的时候，在这边设置会报错的情况 = =

所以后来就不用了，直接用上面的方法来操作了。

8. 使用教程

建议参考视频，或者自己尝试一下。

8.1 更新 lobe

项目最近更新比较频繁，建议大家及时跟着更新。

cd /root/data/docker_data/lobe

docker-compose pull

docker-compose up -d    # 请不要使用 docker-compose stop 来停止容器，因为这么做需要额外的时间等待容器停止；docker-compose up -d 直接升级容器时会自动停止并立刻重建新的容器，完全没有必要浪费那些时间。

docker image prune  # prune 命令用来删除不再使用的 docker 对象。删除所有未被 tag 标记和未被容器使用的镜像

提示：

WARNING! This will remove all dangling images.
Are you sure you want to continue? [y/N] 

输入 y

利用 Docker 搭建的应用，更新非常容易～

8.2 卸载 lobe

同样进入安装页面，先停止所有容器。

cd /root/data/docker_data/lobe

docker-compose down

cd ..

rm -rf /root/data/docker_data/lobe  # 完全删除

可以卸载得很干净。

9. 常见问题及注意点

1、如果你要使用读图功能，需要使用gpt-4-vision-preview这个模型

2、语音输入，如果设置关闭了自动结束语音识别说完话记得再点一下图标。

10. 结尾

祝大家用得开心，有问题可以去 GitHub 提 Issues，也可以在评论区互相交流探讨。

同时，有能力给项目做贡献的同学，也欢迎积极加入到 项目 中来，贡献自己的一份力量！

最后，感谢开发人员们的辛苦付出，让我们能用到这么优秀的项目！

参考资料

官方GitHub地址：https://github.com/lobehub/lobe-chat
官方Demo：https://chat-preview.lobehub.com
官方文档：https://github.com/lobehub/lobe-chat/wiki