NAS折腾日记

【重置版】免魔法 Nas搭建超美ui界面lobechatgpt 海量GPTs 支持画图

1.前言

之前出过搭建lobe chatgpt的教程，但是以vps服务器为主要载体的，加上那时候lobe刚出，各方面都不是很完善，插件只有几个凑数的，经过一段时间的疯狂更新，他已经不是当初的lobe，吧midfjourney都加进来了，并且依旧是不需要魔法就能使用GPT的各个模型，也能使用GPTs和谷歌的Gemini。这是一起以Nas搭建为主以及详细的使用心得的教程。

创作不易，如果你觉得有用，欢迎请橙子喝杯咖啡☕☕☕

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 Progress Web 应用程序

我们深知在当今的多设备环境中为用户提供无缝体验的重要性。因此，我们采用了渐进式 Web 应用程序（PWA）技术，一种现代 Web 技术，可将 Web 应用程序提升到接近本机应用程序的体验。

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

2.5 移动设备适配

我们针对移动设备进行了一系列优化设计，以增强用户的移动体验。目前，我们正在迭代移动用户体验，以实现更流畅、更直观的交互。如果您有任何建议或想法，我们欢迎您通过 GitHub 问题或拉取请求提供反馈。

2.6 文生图的加入

支持最新的文本到图片生成技术，LobeChat 现在能够让用户在与助手对话中直接调用文成图工具进行创作。通过利用 DALL-E 3、MidJourney 和 Pollinations 等 AI 工具的能力，助手们现在可以将你的想法转化为图像。同时可以更私密和沉浸式的完成你的创造过程。

3. 相关地址

官方GitHub地址：https://github.com/lobehub/lobe-chat
官方docker镜像地址：lobehub/lobe-chat

4. 搭建视频

4.1 YouTube
视频地址：后续补充…

4.2 哔哩哔哩
哔哩哔哩：后续补充…

5. 搭建方式

5.1 镜像拉取

进入nas，拉取镜像：lobehub/lobe-chat

5.2 前置准备

准备好你的 OpenAI API Key（从注册到畅玩ChatGPT）申请api要国外手机接收短信验证，nas需要魔法环境;
无魔法访问准备好CheersApi中转key 获取地址
访问的域名（如果需要优雅的外网和朋友一起用的话）

5.3 容器配置

网络选择桥接，不用创建存储映射，环境变量重要有3个，因为我这里用cheersapi所以需要填接口地址，其余的按照图中去配置就行

6.使用教程

如果是自己用或者是给你朋友用，直接输入你的内置访问密码就能聊天了，使用的是在环境变量里配置的密码

如果不想使用内置的key可以在语言模型设置新的接口地址和key吧支持的模型都加进去不仅仅只是gpt的模型，记得如果使用cheersapi接口地址后面要加个/v1如图所示，自定义模型用英文逗号分隔，配置完成胡记得点检查测试

如果你想隐藏端口，可以通过nginx添加反向代理（Nginx Proxy Manager安装搭建），不想通过ip访问，可以选择一个域名（摆脱IP 如何挑选购买域名）然后设置内网穿透（用NPS搭建内网穿透比frp更好用）实现外网的无端口域名访问