53 lines
3.6 KiB
Markdown
53 lines
3.6 KiB
Markdown
项目名称：MyDearest — Live2D AI 聊天（跨平台）
|
||
|
||
一、项目目标
|
||
- 使用 Live2D（Web 技术）作为 AI 形象，实现可交互的动画人物。
|
||
- 支持单聊与群聊（即时通讯），并可在手机（Android/iOS）与桌面（Windows）端良好运行。
|
||
- 对接大模型/LLM（如 OpenAI/私有模型）实现智能对话、上下文记忆与多轮会话。
|
||
|
||
二、核心功能
|
||
1) Live2D 显示与互动：通过内嵌 WebView 渲染 Live2D 页面，实现表情、动作、播报与点击交互；Flutter 与 WebView 通过 JS Bridge 双向通信。
|
||
2) 聊天系统：消息列表、输入框、表情/图片/语音支持、群聊会话管理。
|
||
3) 实时通信：使用 WebSocket 做实时消息收发与 AI 流式响应（可选长连接用于多人在线场景）。
|
||
4) 本地存储：聊天历史、配置、用户信息本地缓存（使用 Hive 或 SharedPreferences）。
|
||
|
||
三、技术选型
|
||
- 框架：Flutter（已包含 Android/iOS/Windows/web 支持）
|
||
- Live2D 渲染：Web 技术（pixi + live2d）放在 `assets/web/`，通过 `webview_flutter` 加载；JS Bridge 用于触发动作与接收模型事件。
|
||
- 即时通讯：WebSocket（`web_socket_channel`）
|
||
- 网络请求：`dio`
|
||
- 聊天 UI：`flutter_chat_ui` + `flutter_chat_types`
|
||
- 本地存储：`hive` / `hive_flutter`（可替代 `sqflite`）
|
||
- 状态管理：`get`（快速），后期可替换为 `riverpod` 或 `bloc`。
|
||
|
||
四、里程碑（建议短迭代）
|
||
- M1（1 周）：依赖与骨架搭建，完成 `pubspec.yaml` 引入；能在 Flutter 页面内加载本地 Live2D 测试 HTML（WebView）。
|
||
- M2（1 周）：实现聊天 UI 基本框架（单聊），后端 WebSocket 回显服务（本地测试）。
|
||
- M3（1-2 周）：接入 LLM API，实现 AI 应答（含流式返回），并把 AI 输出与 Live2D 动作/表情联动。
|
||
- M4（2 周）：完善群聊逻辑、消息持久化、离线/回溯、性能优化与多端适配（Windows 特有处理）。
|
||
|
||
五、初始开发步骤（从这里开始）
|
||
1) 运行依赖安装：在项目根目录执行：
|
||
|
||
```bash
|
||
flutter pub get
|
||
```
|
||
|
||
2) 创建 Live2D 测试页面（建议路径 `assets/web/live2d/index.html`），放入一个最小的 pixi + live2d 页面（可先用示例模型）。
|
||
3) 在 Flutter 中新建页面 `lib/pages/live2d_test.dart`，使用 `WebView` 加载上面的本地 HTML（`WebView` 支持 file:// 或 asset 加载），并实现 JS 通信通道以便调用模型动作。
|
||
4) 验证 WebView 渲染：在 Android/iOS/Windows 端分别运行并确保模型可见且 JS 通信可用。
|
||
5) 创建聊天 UI 页面 `lib/pages/chat/chat_room.dart`，集成 `flutter_chat_ui` 的基本气泡、输入框与本地回显逻辑。
|
||
6) 启动一个简单的 WebSocket 回显服务（本地测试用，例如使用 Node.js 的 `ws`），并在 Flutter 端连接测试收发。
|
||
|
||
六、注意与风险点
|
||
- Live2D 原生 SDK 接入复杂度高，推荐先走 WebView 方案以快速验证体验并跨端复用。
|
||
- Windows 平台在 WebView 的文件加载与 JS 通信上可能与移动端存在差异，测试频繁验证。
|
||
- 如果选择使用商业 LLM（如 OpenAI），请注意 API Key 的安全管理与使用成本。
|
||
|
||
七、下一步我可以帮你的事（选择其一）
|
||
- A：我现在把 `pubspec.yaml` 补齐依赖（我已完成）。
|
||
- B：我可以生成 `lib/pages/live2d_test.dart` 的示例页面和 `assets/web/live2d/index.html` 的最小示例，并在本地引导你运行验证。
|
||
- C：我可以搭建聊天 UI 基础页面并连接到一个本地 WebSocket 回显服务示例。
|
||
|
||
请选择你现在想先做的任务（B 或 C），我会继续实现下一步的代码与文件修改说明。
|