diff --git a/docs/user-guide/frontend/img/mode/pet.png b/docs/user-guide/frontend/img/mode/pet.png new file mode 100644 index 0000000..5ff0e82 Binary files /dev/null and b/docs/user-guide/frontend/img/mode/pet.png differ diff --git a/docs/user-guide/frontend/img/mode/web.png b/docs/user-guide/frontend/img/mode/web.png new file mode 100644 index 0000000..4afba3d Binary files /dev/null and b/docs/user-guide/frontend/img/mode/web.png differ diff --git a/docs/user-guide/frontend/img/web-window-mode/history.png b/docs/user-guide/frontend/img/web-window-mode/history.png new file mode 100644 index 0000000..2c80b32 Binary files /dev/null and b/docs/user-guide/frontend/img/web-window-mode/history.png differ diff --git a/docs/user-guide/frontend/img/web-window-mode/overview.png b/docs/user-guide/frontend/img/web-window-mode/overview.png new file mode 100644 index 0000000..1e062df Binary files /dev/null and b/docs/user-guide/frontend/img/web-window-mode/overview.png differ diff --git a/docs/user-guide/frontend/img/web-window-mode/setting.png b/docs/user-guide/frontend/img/web-window-mode/setting.png new file mode 100644 index 0000000..598ff0b Binary files /dev/null and b/docs/user-guide/frontend/img/web-window-mode/setting.png differ diff --git a/docs/user-guide/frontend/mode.md b/docs/user-guide/frontend/mode.md index 4e11934..f80c592 100644 --- a/docs/user-guide/frontend/mode.md +++ b/docs/user-guide/frontend/mode.md @@ -2,4 +2,45 @@ sidebar_position: 1 --- -# 模式介绍 \ No newline at end of file +# 模式介绍 + +Open LLM VTuber 提供了三种使用模式，以满足不同用户的需求：[Web 模式](web-window-mode)、[窗口模式](web-window-mode)和[桌宠模式](pet-mode)。Web 模式需要通过部署或访问他人部署的网页链接来使用。 + +三种模式都使用 localStorage 来存储用户的个性化设置。 + +窗口模式和桌宠模式是基于 Electron 应用的两个模式，支持 Windows 和 Mac 系统，但暂时不支持移动设备。你可以直接从 Github Release 下载对应平台的安装包（推荐），或者下载源码进行测试或打包。 + +Window 模式和 Pet 模式共享上下文，这意味着你可以在两种模式之间任意切换的同时，保持当前的设置、状态、和链接不变。 + +:::note 详细说明 + +关于每种模式的具体使用方法和功能特性，请参考 +- [Web/窗口模式 使用指南](./web-window-mode.md) +- [宠物模式 使用指南](./pet-mode.md) +::: + +## Web 模式 + +Web 模式是一个独立的网页版本，通过部署后，无需安装即可在任何平台的现代浏览器中在线使用。 + +:::tip 浏览器选择 +为确保最佳体验，建议使用 Google Chrome 浏览器访问 +::: + +:::warning 关于 iOS +iOS 禁止浏览器播放音频，需要不断点击才能使说话功能正常运行。 +::: + +![](img/mode/web.png) + +## 窗口模式 + +窗口模式是桌面客户端的默认显示模式，界面和功能与 Web 模式基本一致。 + + +## 桌宠模式 + +桌宠模式将角色转变为背景透明、全局置顶、自由拖拽的桌面伴侣，提供更加沉浸的体验。 + +![](img/mode/pet.png) + diff --git a/docs/user-guide/frontend/web-window-mode.md b/docs/user-guide/frontend/web-window-mode.md index 3295563..eb62b3f 100644 --- a/docs/user-guide/frontend/web-window-mode.md +++ b/docs/user-guide/frontend/web-window-mode.md @@ -2,4 +2,161 @@ sidebar_position: 2 --- -# Web & 窗口模式 \ No newline at end of file +# Web & 窗口模式 + +Web 模式和窗口模式共享相同的界面布局和功能。两种模式的主要区别在于: + +- Web 模式通过浏览器访问 +- 窗口模式作为独立的桌面应用运行 + +![](img/web-window-mode/overview.png) + +## 布局概览 +- 侧边栏 (可折叠) + - 设置按钮 + - 设置抽屉 + - General + - Live2D + - ASR + - TTS + - Agent + - About + - 对话记录 + - 历史聊天抽屉 + - 新建对话按钮 + - 聊天记录区域 + - 摄像头区域 +- 主界面 + - Live2D 模型 (可移动/调节大小) + - 背景图片 / 摄像头背景 (可设置) + - WebSocket 连接状态指示器 / 重连按钮 + - 字幕 (可隐藏) +- 底部控制栏 (可折叠) + - 状态指示器 + - 麦克风开关 + - 打断按钮 + - 输入框 + + +## 设置概览 + +![](img/web-window-mode/setting.png) + +:::info 特性 +所有设置都支持保存前预览 (TODO)。 +个性化设置使用 localStorage 在本地存储。 +::: + + + +### General (通用) +- 语言设置 (TODO) + - English + - 中文 +- 背景设置 + - 预设背景图片 + - 自定义背景图片 URL + - 是否开启摄像头背景 +- 角色预设选择 +- WebSocket 连接地址设置 +- 基础 URL 设置 +- 字幕显示开关 +- 恢复默认设置 (TODO) + +### Live2D +- 鼠标交互开关 + - 开启后支持鼠标点击触发动作 + - 开启后支持视线跟随鼠标 +- 滚轮缩放开关 + - 开启后可通过鼠标滚轮调整模型大小 + +### ASR (语音识别) +- 自动麦克风控制 + - AI 开始说话时自动关闭麦克风 + - AI 被打断后自动开启麦克风 +- 语音检测阈值设置 + - 语音检测阈值 (Speech Prob. Threshold) + - 范围: `1-100` + - 用于判断是否检测到语音的概率阈值 + - 值越大，需要越清晰的语音才会被判定为说话 + - 负语音检测阈值 (Negative Speech Threshold) + - 范围: `0-100` + - 用于判断语音是否结束的概率阈值 + - 值越小，越容易判定为语音结束 + - 恢复帧数 (Redemption Frames) + - 范围: `1-100` + - 当检测到语音结束后,需要等待多少帧才真正结束语音识别 + - 值越大，语音识别结束的延迟越长，但可以避免误判 +### TTS (语音合成) +- 暂无设置项 + +### Agent (AI 代理/智能体) +- AI 主动说话设置 + - 是否允许 AI 主动说话 + - 空闲多少秒后允许 AI 主动说话 + + +## 功能介绍 + +### WebSocket 连接 + +- 连接成功时显示绿色图标。 +- 连接断开时显示红色图标并自动变为重连按钮。 +- 连接地址设置 + - 默认连接地址为 `ws://127.0.0.1:12393/client-ws`。 + - 可在 Setting - General 中修改连接地址。 + +### AI 状态 +- `idle` (空闲) +- `thinkg-speaking` (思考/说话) +- `interrupted` (被打断) +- `loading` (加载) +- `listening` (检测到用户说话) +- `waiting` (检测到用户输入文本) + +### 对话交互 +提供多种与角色的对话交互方式 +- 语音对话 + - 可以 Setting - ASR 中设置自动麦克风控制和语音检测阈值。 + - 确保授予麦克风权限。 +- 文字输入 +- AI 主动说话 (在 Setting - Agent 中设置是否开启) + - 是否允许 AI 主动说话。 + - 处于空闲状态几秒后允许 AI 主动说话。 + +### 打断功能 +用于中断 AI 的当前发言。当点击打断按钮时，AI 会立即停止发言，并且聊天记录和 AI 的记忆将只保留打断前的内容。有以下几种操作会触发打断 +- 点击打断按钮 + - 在 Setting - ASR 中可以设置是否在点击打断按钮后，自动打开麦克风。 +- 在 AI 处于 `thinking-speaking` 状态时说话（需要麦克风为开启状态）。 + - 在 Setting - ASR 中可以设置是否在 AI 切换到 `thinking-speaking` 的状态后自动关闭麦克风。 +- 在 AI 处于 `thinking-speaking` 状态时发送消息。 + +### 消息记录 +![](img/web-window-mode/history.png) +- 可滚动查看消息记录 +- 支持流式响应，实时显示 AI 回复内容 +- 支持查看历史消息记录，可以加载/删除单条历史记录（存储在后端） + + +### Live2D +- 支持拖拽移动模型位置 +- 支持滚轮/双指缩放调节模型大小 (可在 Setting - General 中设置是否开启) +- 支持模型视线跟随鼠标（可在 Settings - Live2D 中设置是否开启） +- 支持鼠标点击触发动作（TODO: 可在 Setting - Live2D 中设置是否开启） + - 需要提前在后端进行配置 +- 支持说话时根据情感/后端指令自动应用表情/动作 + - 需要提前在后端进行配置 + +### 背景 +- 可在 Setting - General 中选择预设的背景图片 +- 可在 Setting - General 中输入图片 URL 作为背景 +- 摄像头实时画面 + - 可在 Setting - General 中开启摄像头作为背景 + - 需要授予摄像头权限 + +### UI 折叠与隐藏 +- 侧边栏可以通过点击右侧中央按钮折叠/展开 +- 底部控制栏可以通过点击底部中央按钮折叠/展开 +- 字幕显示可在 Setting - General 中开启/关闭 +- WebSocket连接状态显示可以 Setting - General 中开启/关闭 (TODO) \ No newline at end of file