对话页面新增,实现最最基础的部分
This commit is contained in:
54
README.md
54
README.md
@@ -1,2 +1,52 @@
|
||||
# 第一次Flutter项目开发
|
||||
这是第4次提交
|
||||
项目名称: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),我会继续实现下一步的代码与文件修改说明。
|
||||
|
||||
Reference in New Issue
Block a user