112 lines
4.8 KiB
Markdown
112 lines
4.8 KiB
Markdown
|
# 美图 Agent — 视频创作可视化界面设计
|
|||
|
|
|
|||
|
|
## 概述
|
|||
|
|
|
|||
|
|
基于 pi-agent 为 video-from-script 工作流构建现代 Web 可视化界面。
|
|||
|
|
独立 React SPA + Express 后端 + pi-agent-core SDK 引擎。
|
|||
|
|
|
|||
|
|
## 技术栈
|
|||
|
|
|
|||
|
|
| 层 | 技术 |
|
|||
|
|
|----|------|
|
|||
|
|
| 前端 | Vite + React 18 + Tailwind CSS + shadcn/ui |
|
|||
|
|
| 后端 | Express + WebSocket (ws) + pi-agent-core |
|
|||
|
|
| 数据库 | SQLite (better-sqlite3) |
|
|||
|
|
| 语言 | TypeScript 全栈 |
|
|||
|
|
|
|||
|
|
## 布局
|
|||
|
|
|
|||
|
|
三栏布局 1:3:6：
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
┌──┬───────────────────────┬────────────────────────────────────────────────┐
|
|||
|
|
│💬│ 搜索对话... │ 主区域：聊天 / 账户编辑 / 资产画廊 │
|
|||
|
|
│📁│ 最近对话 │ │
|
|||
|
|
│🖼️│ 历史列表... │ │
|
|||
|
|
│⚙️│ [+ 新对话] │ [输入框] │
|
|||
|
|
└──┴───────────────────────┴────────────────────────────────────────────────┘
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
| 图标 | 中间栏 | 右侧主区域 |
|
|||
|
|
|------|--------|-----------|
|
|||
|
|
| 💬 对话 | 对话历史列表 + 新对话 | 聊天界面 |
|
|||
|
|
| 📁 账户 | 账户列表 | 账户编辑表单 / 提示词分屏编辑器 |
|
|||
|
|
| 🖼️ 资产 | 筛选：按账号/日期/类型 | 图片+视频画廊（瀑布流、预览、删除） |
|
|||
|
|
| ⚙️ 设置 | — | 全局配置表单 |
|
|||
|
|
|
|||
|
|
## 后端架构
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
Express Server
|
|||
|
|
├── pi-agent-core (SDK)
|
|||
|
|
│ ├── 对话编排 + 流式输出
|
|||
|
|
│ └── 工具注册 (createAccount, editPrompt, runPipeline, deleteAsset...)
|
|||
|
|
├── Tool Layer → 调用 pipeline.js + 文件系统操作
|
|||
|
|
├── Data Layer → SQLite + FS (accounts/, output/)
|
|||
|
|
└── WebSocket → 聊天流 + pipeline 进度推送
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 核心数据流
|
|||
|
|
|
|||
|
|
| 流 | 协议 | 内容 |
|
|||
|
|
|----|------|------|
|
|||
|
|
| 对话 | WebSocket | 流式 LLM 回复 + 工具调用进度 + pipeline 状态 |
|
|||
|
|
| CRUD | REST | 账户/提示词/资产的增删改查 |
|
|||
|
|
| Pipeline | 工具调用 | Agent 调用工具 → 后端执行 pipeline.js → WebSocket 推送进度 |
|
|||
|
|
|
|||
|
|
### 数据库表
|
|||
|
|
|
|||
|
|
| 表 | 存什么 | 关键字段 |
|
|||
|
|
|----|--------|---------|
|
|||
|
|
| conversations | 对话会话 | id, title, account_id, created_at |
|
|||
|
|
| messages | 消息记录 | id, conversation_id, role, content, tool_calls, created_at |
|
|||
|
|
| assets | 产物记录 | id, account_id, manifest_path, type, file_path, url, shot_index, created_at |
|
|||
|
|
| pipeline_runs | 执行记录 | id, manifest_path, phase, status, started_at, finished_at |
|
|||
|
|
| configs | 全局配置 | id, key, value (JSON), updated_at |
|
|||
|
|
|
|||
|
|
## 分阶段实施
|
|||
|
|
|
|||
|
|
| 阶段 | 内容 | 产出 |
|
|||
|
|
|------|------|------|
|
|||
|
|
| P0 | 项目脚手架 | Vite + React + Tailwind + shadcn/ui + Express + SQLite 初始化，三栏布局壳子 |
|
|||
|
|
| P1 | 账户管理 | 账户 CRUD + account.json 表单 + references 上传 + 配置页 |
|
|||
|
|
| P2 | 提示词编辑器 | 分屏 Markdown 编辑 + 模板变量高亮 + 示例数据预览 |
|
|||
|
|
| P3 | 聊天 + Pipeline | pi-agent-core 集成 + 工具注册 + WebSocket 流式 + 进度内嵌 |
|
|||
|
|
| P4 | 资产画廊 | SQLite 资产记录 + 瀑布流展示 + 预览/删除 + 按账号筛选 |
|
|||
|
|
| P5 | 对话历史 | 会话持久化 + 搜索 + 断点续跑 |
|
|||
|
|
|
|||
|
|
## 目录结构
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
web/
|
|||
|
|
├── package.json
|
|||
|
|
├── server/
|
|||
|
|
│ ├── index.ts # Express + WebSocket 入口
|
|||
|
|
│ ├── agent/
|
|||
|
|
│ │ ├── index.ts # pi-agent-core 初始化
|
|||
|
|
│ │ └── tools.ts # 自定义工具注册
|
|||
|
|
│ ├── routes/
|
|||
|
|
│ │ ├── accounts.ts # 账号 CRUD
|
|||
|
|
│ │ ├── prompts.ts # 提示词文件读写
|
|||
|
|
│ │ └── pipeline.ts # Pipeline 触发/状态
|
|||
|
|
│ ├── db/
|
|||
|
|
│ │ ├── schema.ts # SQLite 建表
|
|||
|
|
│ │ └── queries.ts # 查询函数
|
|||
|
|
│ └── ws/
|
|||
|
|
│ └── chat.ts # 聊天 WebSocket
|
|||
|
|
├── client/
|
|||
|
|
│ ├── src/
|
|||
|
|
│ │ ├── components/
|
|||
|
|
│ │ │ ├── ui/ # shadcn/ui 组件
|
|||
|
|
│ │ │ ├── chat/ # 聊天面板
|
|||
|
|
│ │ │ ├── accounts/ # 账户表单
|
|||
|
|
│ │ │ ├── prompts/ # Markdown 编辑器
|
|||
|
|
│ │ │ ├── assets/ # 资产画廊
|
|||
|
|
│ │ │ └── layout/ # 三栏布局壳
|
|||
|
|
│ │ ├── hooks/ # useWebSocket, useAccounts 等
|
|||
|
|
│ │ ├── lib/ # API client
|
|||
|
|
│ │ └── App.tsx
|
|||
|
|
│ └── vite.config.ts
|
|||
|
|
└── tsconfig.json
|
|||
|
|
```
|