Skip to content

DEV_PLAN_extensions.md

Latest commit

 

History

History
191 lines (138 loc) · 8.19 KB

DEV_PLAN_extensions.md

File metadata and controls

191 lines (138 loc) · 8.19 KB

FrameRonin / PixelWork 功能扩展开发计划

本文档为规划文档，以「还能做什么」为主；V3 已落地能力见下方 「零、V3 已交付」，避免与代码脱节。

零、V3 已交付（与规划项的对应）

类别 已实现 备注
F1 / F7 Sprite Sheet 拆分、Sheet→GIF SpriteSheetTool、GifFrameConverter
纯前端 GIF GIF 拆帧/合成、多图合一、单图拆分网格、简易拼接 默认 Tab「多图合成单图」、默认输入「拆分单图」
E5（部分） 首页与应用级快捷键 B/C/V/G/R；Sprite Sheet 调整预览 A/D 切帧 App.tsx、SpriteSheetAdjust.tsx
产品线 RoninPro：自定义缩放、切片、统一尺寸；NFT 开关 frontend/src/config/features.ts 深链 R → 自定义缩放
首页结构 RoninPro 置于 Seedance + 素材分享之前 ModeSelector.tsx
Sprite Sheet 调整 分割预览、勾选、播放预览、方向按钮、偏移后 重组合 导出 SpriteSheetAdjust.tsx
实验场景 Top-down / 街机 控制测试 ControlTest.tsx（variant）
像素与抠图链 像素处理双入口、色度键、扩缩图、Gemini 去水印等 见根目录 README

部署现状：GitHub Pages 仅部署前端；带 rembg 的「视频转序列帧」服务端管线仍需自建后端（见 DEV_DOC_video2timesheet.md）。

一、当前功能概览（基线 + V3）

模块 功能 前端/后端 备注
视频转序列帧 视频→帧→抠图→Sprite Sheet 浏览器色度键 或 后端 API 后端路径：rembg、FFmpeg、Redis Worker
像素图片处理 裁切、抠图、缩放、内描边、精细编辑等 纯前端 ImageResizeStroke 等
GIF↔序列帧 GIF拆帧、多图合成、单图网格拆分等 纯前端 gifuct-js、gifenc
Sprite Sheet / 调整 拆分、合成 GIF、勾选与预览、重组合 纯前端（调整需 Ronin） SpriteSheetTool、SpriteSheetAdjust
RoninPro 缩放/切片/统一尺寸 纯前端 RoninPro*.tsx
nanobanana 生成器 外链 Gemini Gem 外链 不占核心开发资源

二、功能扩展方向

2.1 纯前端可做（无后端依赖，可上 Pages）

序号 功能 描述 预估难度
F1 Sprite Sheet 拆分 上传一张多帧 PNG，按列/行或单帧尺寸拆成单帧 PNG 或 ZIP 中
F2 图片像素化 上传任意图，缩小分辨率+调色板/抖动，输出像素风 PNG 中
F3 九宫格切图 上传 UI 图，标出四角拉伸区域，导出 9-slice 可用的资源 中高
F4 批量图片处理 多图上传，统一执行裁切/缩放/抠图/描边，批量下载 中
F5 调色板提取与换色 从像素图提取主色；指定颜色替换（换装/换阵营色） 中
F6 GIF 帧间隔调节 拆帧时保留/编辑每帧延迟；合成时可逐帧设 delay 低
F7 Sprite Sheet→GIF 上传 Sprite Sheet + 列数，自动拆帧并合成 GIF 低（复用现有）

2.2 后端增强（依赖 Python/Worker）

序号 功能 描述 预估难度
B1 视频链接抓取 支持 URL 输入，自动下载视频后处理 中
B2 抠图模型切换 支持 rembg/U2Net、MODNet、自定义模型选择 高
B3 历史任务与缓存 任务列表、hash 去重复用、近期结果预览 中
B4 WebSocket 进度 替换轮询为 WS，实时进度与阶段提示 中
B5 大图分块合成 超长序列帧时流式/分块合成，降低内存占用 高

2.3 体验与产品化

序号 功能 描述 预估难度
E1 暗色模式 主题切换，保持整体视觉一致性 低
E2 移动端优化 触控裁切、布局适配、大按钮 中
E3 参数预设 常用配置保存/加载（如 256×256 像素风） 低
E4 拖拽排序 序列帧转 GIF 时支持拖拽调整帧顺序 低
E5 键盘快捷键 预览时上一帧/下一帧/播放暂停等 低
E6 导出格式扩展 WebP、AVIF 序列；更多 Sprite 布局模板 中

2.4 性能与工程

序号 功能 描述 预估难度
P1 代码分割 按模块 lazy load，降低首屏体积 低
P2 Web Worker 抽离 GIF 编解码、大图处理迁到 Worker 中
P3 单元/集成测试 核心工具函数与关键流程测试 中
P4 E2E 测试 Playwright 覆盖主流程 中

三、开发阶段规划

第一阶段：纯前端高价值功能（1–2 周）

目标：在不依赖后端的前提下，扩展 Pages 可用的能力。

优先级 功能 理由
P0 F1 Sprite Sheet 拆分 与视频转序列帧形成闭环，需求明确
P0 F7 Sprite Sheet→GIF 复用 F1 拆帧 + 现有 GIF 合成，投入小
P1 F6 GIF 帧间隔调节 改善现有 GIF 模块，改动集中
P1 E4 拖拽排序 提升序列帧→GIF 的可用性

第二阶段：像素图片工具链深化（1 周）

目标：围绕「单张图处理」做工具链完善。

优先级 功能 理由
P0 F2 图片像素化 效果直观，易传播
P1 F4 批量图片处理 提升像素图片模块的批处理能力
P2 F5 调色板提取与换色 面向进阶像素美术用户

第三阶段：体验与性能（1 周）

目标：提升整体使用体验与可维护性。

优先级 功能 理由
P0 E1 暗色模式 用户常见需求
P1 E3 参数预设 降低重复配置成本
P1 P1 代码分割 减小首屏，改善加载
P2 E2 移动端优化 根据实际设备使用数据决定投入

第四阶段：后端与进阶能力（按需）

目标：在存在自建部署或云端后端时再推进。

优先级 功能 理由
- B4 WebSocket 进度 提升长任务体验
- B1 视频链接抓取 扩展输入来源
- B3 历史任务与缓存 提升重度使用体验
- F3 九宫格切图 面向 UI/游戏开发，需求相对垂直

四、技术要点与依赖

4.1 Sprite Sheet 拆分 (F1)

  • 使用 Canvas 按网格裁剪
  • 参数：列数、行数，或单帧宽高
  • 输出：单帧 PNG 数组 + JSZip 打包
  • 依赖：现有 ParamsStep/utils 可复用的图像工具

4.2 图片像素化 (F2)

  • 算法：缩小 + 调色板量化（如 16/32/256 色）
  • 可选：Floyd-Steinberg 等抖动
  • 依赖：Canvas、简单色量化实现或轻量库

4.3 九宫格切图 (F3)

  • 交互：在图上拖拽四条线，划分 9 宫
  • 输出：切片坐标或 9 张切图，供引擎使用
  • 复杂度主要来自交互与多种布局约定

4.4 批量处理 (F4)

  • 复用 ImageResizeStroke 的裁切、抠图、缩放、描边逻辑
  • 支持多文件上传与队列处理
  • 注意：大批量时需分批处理，避免卡顿

五、风险与约束

  1. 浏览器内存：大图、多帧、批量处理需控制单次处理量，必要时分块或提示用户。
  2. 兼容性：Canvas、Blob、Web Worker 等需考虑旧版浏览器降级策略。
  3. 后端依赖：视频转序列帧、rembg 抠图等若无法部署，需在 UI 中明确说明。
  4. 多语言：新增功能需在 zh/en/ja 的 locales.ts 中补齐文案。

六、里程碑建议

里程碑 内容 预计时间
M1 F1 Sprite Sheet 拆分 + F7 Sprite Sheet→GIF 上线 3–5 天
M2 F2 图片像素化 + F6 GIF 帧间隔 + E4 拖拽排序 3–5 天
M3 F4 批量处理 + E1 暗色模式 + E3 参数预设 3–5 天
M4 P1 代码分割 + 基础测试覆盖 2–3 天

七、附录：功能优先级速查

高价值且易实现：F1, F7, F6, E4, F2
体验提升：E1, E3, E5
中等投入：F4, F5, F3
后端相关：B4, B1, B3

文档版本：v3.0（与产品 V3 对齐）
更新说明：已增加「V3 已交付」对照；规划表仍保留待办项。