edit user-guide/frontend

docs/user-guide/frontend/mode.md

@@ -2,4 +2,45 @@
 sidebar_position: 1
 ---
 
-# 模式介绍
+# 模式介绍
+
+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)
+

docs/user-guide/frontend/web-window-mode.md

@@ -2,4 +2,161 @@
 sidebar_position: 2
 ---
 
-# Web & 窗口模式
+# 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)