1. 什么是 LobeChat

下面是 LobeChat 的官方介绍：

Lobe Chat – an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.

翻译过来就是，LobeChat 是一个创新的开源、高性能的聊天机器人框架，擅长多模式交互和语音合成、支持可扩展（函数调用）插件系统和一键免费部署私人 ChatGPT/LLM Web 应用程序。

LobeChat 凭借其先进的文本转语音 (TTS) 和语音转文本 (STT) 功能可提供个性化的听觉体验。该框架还以其可扩展的函数调用插件系统而著称，增强了其在各种场景中的实用性。从本质上讲，Lobe Chat 是一个多功能、社区驱动的平台，无需支付额外费用即可重新定义数字通信。

目前 LobeChat 在 Github 通过 MIT 协议开源，有超过 14.6k 的 star、2.6k 的 fork，是一个值得关注的人工智能开源项目。

2.LobeChat 有什么过人之处

2.1 视觉模型支持

LobeChat 支持 OpenAI 最新的具有视觉识别功能的 gpt-4-vision 模型，GPT-4 Turbo with Vision 多模态模型 LMM 可以分析图像并针对有关图像的问题提供文本响应，结合了自然语言处理和视觉理解。

gpt-4-vision 可以感知视觉的多模态，允许用户轻松上传或拖拽图片到对话框中，LobeChat 将能够识别图片内容并据此进行智能对话，打造更智能、更多样化的聊天场景。

这一功能开辟了新的交互方式，让沟通超越文本，包含丰富的视觉元素。无论是共享日常使用的图像，还是解释特定行业内的图像，代理都能提供出色的对话体验。

2.2 支持 TTS 和 STT 语音

LobeChat 支持文本转语音 (Text-to-Speech，即 TTS) 和语音转文本 (Speech-to-Text ，即 STT) 技术，使应用程序能够将文本消息转换为清晰的语音输出，允许用户与会话代理交互，就像与真人交谈一样。同时，用户可以自由选择多种声音来与代理配对。

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

OpenAI Audio：OpenAI 的 TTS API 是一个端点，使用户能够与其 TTS AI 模型进行交互，该模型将文本转换为听起来自然的口语。模型有两种变体： TTS-1 针对实时文本转语音用例进行优化的最新 AI 模型； TTS-1-HD 针对质量进行优化的最新 AI 模型。
Microsoft Edge Speech：Edge 具有内置的 “朗读” 功能。在 Canvas 中，用户可以右键单击页面并选择 “朗读”，也可以单击浏览器设置菜单（三个点）并在其中选择 “朗读”，用于选择语音类型和阅读速度的控件出现在页面上。

在实现该功能的过程中，由于市场上还没有好的 TTS（文本转语音）前端库。因此 LobeChat 投入了大量的精力，包括：数据转换、音频进度管理、语音可视化等任务。同时，顺利将其开源， @lobehub/tts 是一个用 TypeScript 开发的高质量 TTS 工具包，支持在服务器端和浏览器中使用。

$ git clone https://github.com/lobehub/lobe-tts.git
$ cd lobe-tts
$ bun install
$ bun dev
// 或者使用 bun 运行时安装
// bun add @lobehub/tts

借助于 @lobehub/tts，语音识别将会非常简单：

服务器端：只需少量代码即可实现媲美 OpenAI TTS 服务的高质量语音生成能力。目前支持 EdgeSpeechTTS、MicrosoftTTS、OpenAITTS 和 OpenAISTT。

// index.js
import { EdgeSpeechTTS } from '@lobehub/tts';
import {Buffer} from 'buffer';
import fs from 'fs';
import path from 'path';
// 实例化 EdgeSpeechTTS
const tts = new EdgeSpeechTTS({locale: 'en-US'});
// Create speech synthesis request payload
const payload = {
  input: 'This is a speech demonstration',
  options: {
    voice: 'en-US-GuyNeural',
  },
};
// Call create method to synthesize speech
const response = await tts.create(payload);
// generate speech file
const mp3Buffer = Buffer.from(await response.arrayBuffer());
const speechFile = path.resolve('./speech.mp3');
fs.writeFileSync(speechFile, mp3Buffer);

浏览器端：提供高质量 React Hooks 和可视化音频组件，支持：加载、播放、暂停、拖动时间线等常用功能。此外还提供一组非常丰富的功能来调整音轨风格。

import { AudioPlayer, AudioVisualizer, useAudioPlayer } from '@lobehub/tts/react';
// 导入包
export default () => {
  const {ref, isLoading, ...audio} = useAudioPlayer(url);

  return (
    <Flexbox align={'center'} gap={8}>
      <AudioPlayer audio={audio} isLoading={isLoading} style={{ width: '100%' }} />
      <AudioVisualizer audioRef={ref} isLoading={isLoading} />
    </Flexbox>
  );
};

值得注意的是，由于Node.js环境缺少WebSocket实例，需要对WebSocket进行polyfill，比如下面的示例：

// import at the top of the file
import WebSocket from 'ws';
global.WebSocket = WebSocket;

2.3 函数调用插件系统

LobeChat 的插件生态是其核心功能的重要扩展，大大增强了 ChatGPT 的实用性和灵活性。通过利用插件，ChatGPT 可以进行实时信息检索和处理，例如：自动获取最新的新闻标题，为用户提供即时的相关信息。

而且，插件不仅限于新闻聚合，还可以扩展到其他实用功能，例如：快速文档检索、电商平台数据访问以及各种第三方服务。

以下是目前可用的基础插件：

lobe-chat-plugins：这是 LobeChat 的插件索引，从存储库访问 index.json，以向用户显示 LobeChat 的可用插件列表。
chat-plugin-template：是 LobeChat 插件开发的插件模板。
@lobehub/chat-plugin-sdk：LobeChat 插件 SDK 可帮助开发者为 Lobe Chat 创建出色的聊天插件。
@lobehub/chat-plugins-gateway：LobeChat 插件网关是一项后端服务，为 LobeChat 插件提供网关，可以使用 Vercel 部署此服务。主要 API POST /api/v1/runner 部署为边缘函数。

下面是来自社区生态的优秀插件：

Weather GPT：Steven Tey 发表于 2023-12-16 获取特定位置的当前天气信息。
Ask Your PDF：发表于 2023 年 12 月 16 日释放 PDF 的力量！深入研究您的文档，找到答案，并将信息带到您的指尖。
Clock Time：作者 LobeHub 于 2023-11-01 显示时钟以显示当前时间
Mindmap：作者 Moonlit7 发表于 2023-12-19 思维导图生成助手

2.4 代理市场和 PWA 应用

在 LobeChat Agent Marketplace 中，创作者可以发现一个充满活力和创新的社区，汇集了众多精心设计的 Agent，不仅在工作场景中发挥着重要作用，而且在学习过程中也提供了极大的便利。

同时借助于渐进式 Web 应用程序 (PWA) 技术可将 Web 应用程序提升到接近原生应用程序的体验。

渐进式 Web 应用 (PWA) 是一款专为网站打造的应用，可提供与移动应用类似的体验。PWA 速度很快，并会提供移动设备所提供的许多功能。例如，他们可以离线工作并发送通知。

用户可以使用 PWA 在计算机或移动设备上享受快速网站体验，安装 PWA 可实现更快速的访问并享用额外功能，例如：有更多存储空间来储存离线浏览的内容。

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

3. 如何部署 LobeChat

用 Vercel、Zeabur 或 Sealos 进行部署

如果想在 Vercel 或 Zeabur 上自行部署此服务，可以按照以下步骤操作：

准备 OpenAI API 密钥，可以在这里查看 https://platform.openai.com/account/api-keys
单击下面的按钮开始部署：直接使用 GitHub 帐户登录，并记得在环境变量部分填写 OPENAI_API_KEY（必填）和 ACCESS_CODE（推荐）。
部署完成后，就可以开始使用了。
绑定自定义域名（可选）：Vercel 分配的域名的 DNS 在部分地区受到污染, 绑定自定义域名可以直接连接。

Docker 部署

LobeChat 提供了一个 Docker 镜像，用于在自己的私人设备上部署 LobeChat 服务。使用以下命令启动 LobeChat 服务：

// docker部署示例
$ docker run -d -p 3210:3210 \
  -e OPENAI_API_KEY=sk-xxxx \
  -e ACCESS_CODE=lobe66 \
  --name lobe-chat \
  lobehub/lobe-chat

如果需要通过代理使用 OpenAI 服务，可以使用 OPENAI_PROXY_URL 环境变量配置代理地址：

// 通过代理部署
$ docker run -d -p 3210:3210 \
  -e OPENAI_API_KEY=sk-xxxx \
  -e OPENAI_PROXY_URL=https://api-proxy.com/v1 \
  -e ACCESS_CODE=lobe66 \
  --name lobe-chat \
  lobehub/lobe-chat

本文总结

本文主要和大家介绍 LobeChat ，即一个创新的开源、高性能的聊天机器人框架，擅长多模式交互和语音合成、支持可扩展（函数调用）插件系统和一键免费部署私人 ChatGPT/LLM Web 应用程序。由于篇幅问题，文章没有做过多的介绍，但是文末的参考资料提供了大量优秀文档以供学习，如果有兴趣可以自行阅读。

如果有什么疑问欢迎在评论区参与讨论。

参考资料

https://github.com/lobehub/lobe-chat

https://gptpluginz.com/lobechat/

https://github.com/lobehub/lobe-tts

https://github.com/lobehub/lobe-chat/tree/main

https://support.google.com/chrome/answer/9658361

https://tts.lobehub.com/

https://zeabur.com/templates/VZGGTI

声明：本站文章，有些原创，有些转载，如发现侵权侵请联系删除。本站所有原创帖均可复制、搬运，开网站就是为了大家一起乐乐，不在乎版权。对了，本站小水管，垃圾服务器，请不要采集，吐槽君纯属用爱发电，经不起折腾。

{{userData.name}}已认证

【转载】为何 LobeChat 能一战封神？