pipeline-registry.ts 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. /**
  2. * Pipeline 注册中心
  3. *
  4. * 借鉴 Pixelle-Video 的双层 Pipeline 抽象(前端 PipelineUI + 后端 BasePipeline),
  5. * 在本项目中以"插件元数据 + 路由 tab key"的最小可用形式落地。
  6. *
  7. * 后续每新增一种生成模式:
  8. * 1. 在 PIPELINES 数组中追加一条
  9. * 2. 在 app.ts 的 setCurrentTab / restoreCurrentTab 类型联合中加入对应 route
  10. * 3. 在 app.html 中为 currentTab === route 添加对应 <section>
  11. * 4. 等模式稳定后,再将该 section 抽离为独立 Angular 组件
  12. */
  13. export type PipelineStatus = 'stable' | 'beta' | 'planned';
  14. export type PipelineRoute =
  15. | 'digital-human' // 数字人口播(已成熟)
  16. | 'video-generation' // 标准 AI 重塑(旧版主入口,逐步迁移)
  17. | 'image-to-video' // 图生视频(P1 计划)
  18. | 'action-transfer' // 动作迁移(P2 计划)
  19. | 'asset-remix' // 素材→视频(P3 计划)
  20. | 'topic-to-video'; // 主题→视频(P4 计划)
  21. export interface PipelineDef {
  22. /** 唯一 id,对应后端 pipelines/<id>.js */
  23. id: string;
  24. /** 显示名(中文) */
  25. displayName: string;
  26. /** 简短描述(中文,用于 hub 卡片) */
  27. description: string;
  28. /** 输入说明("上传 X / 输入 Y") */
  29. inputHint: string;
  30. /** 内联 SVG path 字符串(24x24 viewBox) */
  31. iconSvg: string;
  32. /** 路由 / tab key */
  33. route: PipelineRoute;
  34. /** 成熟度 */
  35. status: PipelineStatus;
  36. /** 是否在侧栏显示。planned 项默认仅在 hub 中显示 */
  37. showInSidebar: boolean;
  38. }
  39. export const PIPELINES: readonly PipelineDef[] = [
  40. {
  41. id: 'digital_human',
  42. displayName: '数字人合成',
  43. description: '上传参考视频或形象图,结合脚本与音色生成数字人口播视频',
  44. inputHint: '参考视频 / 形象图 + 脚本 + 音色',
  45. iconSvg:
  46. '<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle>',
  47. route: 'digital-human',
  48. status: 'stable',
  49. showInSidebar: true,
  50. },
  51. {
  52. id: 'video_generation',
  53. displayName: '标准视频生成',
  54. description: '上传视频后通过 AI 进行重塑、字幕与配音改造',
  55. inputHint: '原始视频 + 改造指令',
  56. iconSvg:
  57. '<polygon points="23 7 16 12 23 17 23 7"></polygon><rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect>',
  58. route: 'video-generation',
  59. status: 'beta',
  60. showInSidebar: true,
  61. },
  62. {
  63. id: 'image_to_video',
  64. displayName: '图生视频',
  65. description: '上传一张或两张图片(首帧/首尾帧),配合提示词生成动态短视频',
  66. inputHint: '图片 + 提示词 + 时长',
  67. iconSvg:
  68. '<rect x="3" y="3" width="18" height="14" rx="2"></rect><circle cx="9" cy="9" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline>',
  69. route: 'image-to-video',
  70. status: 'beta',
  71. showInSidebar: true,
  72. },
  73. {
  74. id: 'action_transfer',
  75. displayName: '动作迁移',
  76. description: '基于即梦 Actor v2:上传角色图 + 参考视频,让角色按视频动作驱动起来',
  77. inputHint: '角色图 + 参考动作视频',
  78. iconSvg:
  79. '<circle cx="12" cy="5" r="2"></circle><path d="M12 7v6"></path><path d="M8 21l4-8 4 8"></path><path d="M6 11l6-3 6 3"></path>',
  80. route: 'action-transfer',
  81. status: 'beta',
  82. showInSidebar: true,
  83. },
  84. {
  85. id: 'asset_remix',
  86. displayName: '素材合成视频',
  87. description: '上传多张图片 + 主题,AI 生成口播文案 + TTS 配音 + ffmpeg 拼接成片',
  88. inputHint: '3-10 张图片 + 主题 + 音色',
  89. iconSvg:
  90. '<rect x="3" y="3" width="7" height="7" rx="1"></rect><rect x="14" y="3" width="7" height="7" rx="1"></rect><rect x="3" y="14" width="7" height="7" rx="1"></rect><rect x="14" y="14" width="7" height="7" rx="1"></rect>',
  91. route: 'asset-remix',
  92. status: 'beta',
  93. showInSidebar: true,
  94. },
  95. {
  96. id: 'topic_to_video',
  97. displayName: '主题生视频',
  98. description: '一句话主题,LLM 拆分镜 → 即梦文生图 → TTS 配音 → ffmpeg 全自动拼接',
  99. inputHint: '一句话主题(全自动)',
  100. iconSvg:
  101. '<circle cx="12" cy="12" r="9"></circle><path d="M12 7v5l3 2"></path>',
  102. route: 'topic-to-video',
  103. status: 'beta',
  104. showInSidebar: true,
  105. },
  106. ] as const;
  107. /** 仅返回侧栏显示的 pipelines */
  108. export function getSidebarPipelines(): readonly PipelineDef[] {
  109. return PIPELINES.filter((p) => p.showInSidebar);
  110. }
  111. /** 全部允许的 route,供类型守卫与 setCurrentTab 校验 */
  112. export const PIPELINE_ROUTES: readonly PipelineRoute[] = PIPELINES.map(
  113. (p) => p.route,
  114. );