2026-07-30 08:58:38 +08:00
<!doctype html>
< html lang = "zh-CN" >
< head >
< meta charset = "UTF-8" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" / >
< title > 营响力｜ < / title >
2026-07-30 09:55:29 +08:00
< link rel = "stylesheet" href = "./styles.css?v=24" / >
2026-07-30 08:58:38 +08:00
< / head >
< body data-active-module = "library" >
< header class = "topbar" >
< div >
< span class = "eyebrow" > 营响力 · 真实客户验证< / span >
< h1 > AI 短剧数字人生产< / h1 >
< / div >
2026-07-30 09:12:42 +08:00
< div class = "topbar-actions" >
2026-07-30 09:35:06 +08:00
< button class = "key-change-button hidden" type = "button" id = "changeVideoKeyButton" > 更换客户令牌< / button >
2026-07-30 09:12:42 +08:00
< div class = "connection" id = "connectionState" > 正在检查接口配置…< / div >
< / div >
2026-07-30 08:58:38 +08:00
< / header >
< main >
< nav class = "module-tabs" aria-label = "功能模块" >
< button class = "module-tab active" type = "button" data-module = "library" >
< b > 人物素材库< / b > < span > 上传、审核、查看历史素材并组合人物< / span >
< / button >
< button class = "module-tab" type = "button" data-module = "production" >
< b > 短剧生产< / b > < span > 选择本场角色，输入图片和视频后生成< / span >
< / button >
< / nav >
< section class = "shot-overview production-only" aria-label = "片段进度与切换" >
< div class = "shot-overview-head" >
< div >
< strong > 片段进度< / strong >
< span id = "timelineSummary" > 0/1 已选定 · 预计 5 秒< / span >
< / div >
< button class = "link-button" type = "button" id = "addShotButton" > ＋ < / button >
< / div >
< div class = "shot-progress" aria-hidden = "true" > < i id = "shotProgressBar" > < / i > < / div >
< div class = "shot-list shot-overview-list" id = "shotList" > < / div >
< / section >
< div class = "workspace" >
< aside class = "sidebar" >
< div class = "sidebar-title production-only" >
< span > 本场角色< / span >
< button class = "link-button" id = "addRoleButton" > ＋ < / button >
< / div >
< div class = "scene-roles production-only" id = "sceneRoles" > < / div >
< div class = "sidebar-title asset-library-title" >
< span > 人物/形象素材库< / span >
< button class = "link-button" id = "refreshAssets" > 刷新素材库< / button >
< / div >
< div class = "character-list" id = "characterList" >
< div class = "empty-small" > 正在整理历史人物素材…< / div >
< / div >
< button class = "secondary full-button library-only" type = "button" id = "createCharacterButton" > ＋ < / button >
< div class = "character-editor hidden library-only" id = "characterEditor" >
< label class = "field" > < span > 人物名称< / span > < input id = "characterName" placeholder = "例如：女主角 / 宋度宗" / > < / label >
< p > 选择 1– < / p >
< div class = "asset-pick-list" id = "assetPickList" > < / div >
< div class = "editor-actions" >
< button class = "secondary" type = "button" id = "cancelCharacterButton" > 取消< / button >
< button class = "primary compact-button" type = "button" id = "saveCharacterButton" > 保存人物< / button >
< / div >
< / div >
< div class = "review-tracker production-only" id = "reviewTracker" >
< div class = "tracker-head" >
< strong id = "activeRoleLabel" > 角色 A · 三视图< / strong >
< span id = "reviewElapsed" > 等待提交< / span >
< / div >
< div class = "tracker-row" id = "reviewFront" > < span > 正面< / span > < b > 未提交< / b > < small > < / small > < / div >
< div class = "tracker-row" id = "reviewSide" > < span > 侧面< / span > < b > 未提交< / b > < small > < / small > < / div >
< div class = "tracker-row" id = "reviewBack" > < span > 背面< / span > < b > 未提交< / b > < small > < / small > < / div >
< / div >
< details class = "history-assets library-only" open >
< summary > 全部历史素材 < span id = "assetHistoryCount" > 0< / span > < / summary >
< p class = "selection-help" > 点击单张素材可增减当前场景角色；也可在上方将多张素材长期组合成人物。< / p >
< div class = "asset-list" id = "assetList" >
< div class = "empty-small" > 审核通过的历史素材会出现在这里< / div >
< / div >
< / details >
< div class = "rule-box library-only" >
< strong > 入库前检查< / strong >
< ul >
< li > 正面、侧面、背面分别提供公网 URL< / li >
< li > 格式： < / li >
< li > 宽或高 300– ， < / li >
< li > 三张全部通过后组成一个角色素材组< / li >
< / ul >
< / div >
< / aside >
< section class = "panel" >
< div class = "panel-header library-only" >
< div >
< span class = "section-kicker" > STEP 1—2< / span >
< h2 > 人物素材入库与审核< / h2 >
< / div >
< span class = "status-badge neutral" id = "assetStatus" > 未提交< / span >
< / div >
< form id = "assetForm" class = "form-grid library-only" >
< div class = "view-grid wide" >
< label class = "view-field" >
< span > < b > 01< / b > 正面图< / span >
< input id = "assetFrontUrl" type = "url" required placeholder = "https://example.com/front.png" / >
< small > 五官与服装正面细节< / small >
< / label >
< label class = "view-field" >
< span > < b > 02< / b > 侧面图< / span >
< input id = "assetSideUrl" type = "url" required placeholder = "https://example.com/side.png" / >
< small > 轮廓、发型和体态< / small >
< / label >
< label class = "view-field" >
< span > < b > 03< / b > 背面图< / span >
< input id = "assetBackUrl" type = "url" required placeholder = "https://example.com/back.png" / >
< small > 背部服装与发型细节< / small >
< / label >
< / div >
< p class = "mock-hint wide" id = "mockHint" > Mock 测试：任一图片 URL 中加入 < code > reject< / code > ，可验证单张未通过与原因展示。< / p >
< label class = "field" >
< span > 角色名称< / span >
< input id = "assetName" value = "客户数字人·女主角" / >
< / label >
< div class = "field action-field" >
< span > < / span >
< button class = "primary" type = "submit" id = "reviewButton" > 提交三视图审核< / button >
< / div >
< / form >
< div class = "result-card hidden library-only" id = "assetResult" >
< div class = "result-icon" > ✓< / div >
< div >
< strong > 人物素材已入库并完成组合< / strong >
< p > 审核通过的图片会绑定为一个可复用人物，也可在人物库中重新组合。< / p >
< div class = "reference-list" id = "assetReferences" > < / div >
< / div >
< / div >
< div class = "storyboard production-only" >
< label class = "field continuity-choice" >
< span > 与上一片段的衔接< / span >
< select id = "continuityMode" >
< option value = "previous_video" > 引用上一段< / option >
< option value = "none" > 不引用上一段< / option >
< / select >
< / label >
< / div >
< div class = "panel-header production-only production-panel-header" >
< div >
< span class = "section-kicker" > 当前片段< / span >
< h2 > 片段内容与生成参数< / h2 >
< / div >
< span class = "status-badge neutral" id = "videoStatus" > 等待角色< / span >
< / div >
< form id = "videoForm" class = "form-grid disabled-section production-only" >
< label class = "field wide" >
< span > 本片段分镜提示词< / span >
< textarea id = "prompt" rows = "6" > 竖屏双人对话短剧镜头：角色 A 站在办公楼电梯口，先低头查看手机消息；角色 B 从走廊走近并停在她身侧。角色 B 说：“你真的决定了吗？”角色 A 抬头回答：“这一次，我自己做决定。”保持两名角色外观与各自参考图一致，避免交换五官、服装或身份。镜头从双人中景缓慢推进至角色 A 近景，口型与中文台词同步，环境声自然。< / textarea >
< small id = "referenceMap" > 系统会根据本场角色自动生成图号映射。< / small >
< / label >
< div class = "multimodal-grid wide" >
< div class = "field media-field" >
< div class = "media-field-head" >
< span > 其他参考图片< / span >
< button class = "media-add-button" type = "button" id = "addExtraImageButton" > ＋ < / button >
< / div >
< div class = "media-url-list" id = "extraImageInputs" > < / div >
< small > 不进入人物库，但与人物图片共同占用本次最多 9 张图片额度。< / small >
< / div >
< div class = "field media-field" >
< div class = "media-field-head" >
< span > 参考视频< / span >
< button class = "media-add-button" type = "button" id = "addReferenceVideoButton" > ＋ < / button >
< / div >
< div class = "media-url-list" id = "referenceVideoInputs" > < / div >
< small > 手动补充 reference_video； ， < / small >
< / div >
< / div >
< div class = "input-quota wide" id = "inputQuota" > 人物图片 0 张 · 其他图片 0 张 · 图片合计 0/9 · 视频 0 条< / div >
< label class = "field" >
< span > 模型< / span >
< select id = "model" >
< option value = "doubao-seedance-2-0-260128" > Seedance 2.0 · 标准< / option >
< option value = "doubao-seedance-2-0-fast-260128" > Seedance 2.0 · 快速< / option >
< option value = "doubao-seedance-2-0-mini-260615" > Seedance 2.0 · Mini< / option >
< / select >
< / label >
< label class = "field" >
< span > 画面比例< / span >
< select id = "ratio" >
< option value = "9:16" > 9:16 · 竖屏短剧< / option >
< option value = "16:9" > 16:9 · 横屏< / option >
< option value = "1:1" > 1:1 · 方形< / option >
< option value = "adaptive" > 跟随参考图< / option >
< / select >
< / label >
< label class = "field" >
< span > 时长< / span >
< select id = "duration" >
< option value = "5" > 5 秒< / option >
< option value = "8" > 8 秒< / option >
< option value = "10" > 10 秒< / option >
< option value = "15" > 15 秒< / option >
< / select >
< / label >
< label class = "field" >
< span > 分辨率< / span >
< select id = "resolution" >
< option value = "720p" > 720p< / option >
< option value = "480p" > 480p< / option >
< / select >
< / label >
< label class = "toggle-row" > < input id = "generateAudio" type = "checkbox" checked / > < span > 生成同步音频< / span > < / label >
< label class = "toggle-row" > < input id = "watermark" type = "checkbox" / > < span > 保留平台水印< / span > < / label >
< div class = "field action-field wide" >
< button class = "primary video-button" type = "submit" id = "generateButton" > 生成当前片段候选< / button >
< / div >
< / form >
< div class = "generation hidden production-only" id = "generationResult" >
< div class = "video-stage" id = "videoStage" >
< div class = "mock-frame" >
< div class = "mock-person" > < / div >
< span > Seedance 2 正在生成镜头…< / span >
< / div >
< / div >
< div class = "progress-meta" >
< div >
< strong id = "generationTitle" > 任务已提交< / strong >
< span id = "generationTaskId" > < / span >
< span class = "generation-detail" id = "generationElapsed" > < / span >
< span class = "generation-detail" id = "generationLastChecked" > < / span >
< / div >
< span id = "generationProgress" > 0%< / span >
< / div >
< div class = "progress-track" > < i id = "progressBar" > < / i > < / div >
< / div >
< section class = "version-section production-only" >
< div class = "version-head" >
< div > < span class = "section-kicker" > 候选版本< / span > < h3 > 选择一个版本用于下一片段衔接< / h3 > < / div >
< span id = "versionCount" > 暂无候选< / span >
< / div >
< div class = "version-list" id = "versionList" >
< div class = "empty-small" > 生成当前片段后，候选视频会出现在这里< / div >
< / div >
< / section >
< section class = "assembly-panel hidden production-only" id = "assemblyPanel" >
< div class = "version-head" >
< div > < span class = "section-kicker" > 拼接清单< / span > < h3 > 按片段顺序汇总选定版本< / h3 > < / div >
< button class = "link-button" type = "button" id = "closeAssemblyButton" > 收起< / button >
< / div >
< div class = "assembly-list" id = "assemblyList" > < / div >
< p id = "assemblyHint" > 所有片段选定版本后，再交给拼接服务合成完整短剧。< / p >
< / section >
< / section >
< / div >
< / main >
2026-07-30 09:12:42 +08:00
< div class = "key-gate hidden" id = "videoKeyGate" >
< form class = "key-gate-card" id = "videoKeyForm" >
< span class = "section-kicker" > 首次使用< / span >
2026-07-30 09:35:06 +08:00
< h2 > 输入客户令牌< / h2 >
< p > 素材库与视频生成共用该令牌，相关费用归属此令牌，仅保存在当前浏览器。< / p >
2026-07-30 09:12:42 +08:00
< label class = "field" >
2026-07-30 09:35:06 +08:00
< span > 客户令牌< / span >
2026-07-30 09:12:42 +08:00
< input id = "videoKeyInput" type = "password" autocomplete = "off" spellcheck = "false" placeholder = "sk-..." required / >
< / label >
< p class = "key-gate-error hidden" id = "videoKeyError" > < / p >
< div class = "key-gate-actions" >
< button class = "secondary hidden" type = "button" id = "cancelVideoKeyButton" > 取消< / button >
< button class = "primary" type = "submit" > 进入使用< / button >
< / div >
< / form >
< / div >
2026-07-30 08:58:38 +08:00
< div class = "toast hidden" id = "toast" > < / div >
2026-07-30 09:55:29 +08:00
< script src = "./app.js?v=29" > < / script >
2026-07-30 08:58:38 +08:00
< / body >
< / html >
