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" / >
2026-08-05 17:59:38 +08:00
< title > 营响力｜ < / title >
< link rel = "stylesheet" href = "./styles.css?v=26" / >
2026-07-30 08:58:38 +08:00
< / head >
< body data-active-module = "library" >
< header class = "topbar" >
< div >
< span class = "eyebrow" > 营响力 · 真实客户验证< / span >
2026-08-05 17:59:38 +08:00
< h1 > AI 视频与短剧生产< / h1 >
2026-07-30 08:58:38 +08:00
< / 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" >
2026-08-05 16:27:16 +08:00
< b > 人物素材库< / b > < span > 上传 1～ < / span >
< / button >
2026-08-05 17:04:06 +08:00
< button class = "module-tab" type = "button" data-module = "generic-library" >
< b > 通用素材库< / b > < span > 上传、审核并复用图片与视频素材< / span >
2026-07-30 08:58:38 +08:00
< / button >
2026-08-05 17:59:38 +08:00
< button class = "module-tab" type = "button" data-module = "general-video" >
< b > 通用视频生成< / b > < span > 直接输入提示词与参考素材生成单条视频< / span >
< / button >
2026-07-30 08:58:38 +08:00
< 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" >
2026-08-05 16:27:16 +08:00
< div class = "person-library-sidebar" >
2026-07-30 08:58:38 +08:00
< 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 >
2026-08-05 16:27:16 +08:00
< li > 正面、侧面、背面任选 1～ < / li >
2026-07-30 08:58:38 +08:00
< li > 格式： < / li >
< li > 宽或高 300– ， < / li >
2026-08-05 16:27:16 +08:00
< li > 已上传图片全部通过后组成一个人物素材组< / li >
2026-07-30 08:58:38 +08:00
< / ul >
< / div >
2026-08-05 16:27:16 +08:00
< / div >
2026-08-05 17:04:06 +08:00
< div class = "generic-library-only video-library-summary" >
2026-08-05 16:27:16 +08:00
< div class = "sidebar-title" >
2026-08-05 17:04:06 +08:00
< span > 通用素材< / span >
< button class = "link-button" type = "button" id = "refreshGenericAssets" > 刷新< / button >
2026-08-05 16:27:16 +08:00
< / div >
2026-08-05 17:04:06 +08:00
< div class = "video-library-count" > < strong id = "genericAssetHistoryCount" > 0< / strong > < span > 条已就绪图片/视频素材< / span > < / div >
2026-08-05 16:27:16 +08:00
< div class = "rule-box" >
2026-08-05 17:04:06 +08:00
< strong > 通用素材入库要求< / strong >
2026-08-05 16:27:16 +08:00
< ul >
2026-08-05 17:04:06 +08:00
< li > 提供公网可访问的图片或视频 URL< / li >
< li > 图片： < / li >
< li > 视频： < / li >
2026-08-05 16:27:16 +08:00
< li > 入库审核通过后获得 asset:// 引用< / li >
2026-08-05 17:04:06 +08:00
< li > 可直接作为片段参考图片或参考视频< / li >
2026-08-05 16:27:16 +08:00
< / ul >
< / div >
< / div >
2026-07-30 08:58:38 +08:00
< / 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 >
2026-08-05 16:27:16 +08:00
< input id = "assetFrontUrl" type = "url" placeholder = "https://example.com/front.png" / >
2026-07-30 08:58:38 +08:00
< small > 五官与服装正面细节< / small >
< / label >
< label class = "view-field" >
< span > < b > 02< / b > 侧面图< / span >
2026-08-05 16:27:16 +08:00
< input id = "assetSideUrl" type = "url" placeholder = "https://example.com/side.png" / >
2026-07-30 08:58:38 +08:00
< small > 轮廓、发型和体态< / small >
< / label >
< label class = "view-field" >
< span > < b > 03< / b > 背面图< / span >
2026-08-05 16:27:16 +08:00
< input id = "assetBackUrl" type = "url" placeholder = "https://example.com/back.png" / >
2026-07-30 08:58:38 +08:00
< 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 >
2026-08-05 16:27:16 +08:00
< button class = "primary" type = "submit" id = "reviewButton" > 提交人物素材审核< / button >
2026-07-30 08:58:38 +08:00
< / div >
< / form >
< div class = "result-card hidden library-only" id = "assetResult" >
< div class = "result-icon" > ✓< / div >
< div >
< strong > 人物素材已入库并完成组合< / strong >
2026-08-05 16:27:16 +08:00
< p > 已上传的 1～ < / p >
2026-07-30 08:58:38 +08:00
< div class = "reference-list" id = "assetReferences" > < / div >
< / div >
< / div >
2026-08-05 17:04:06 +08:00
< div class = "panel-header generic-library-only" >
2026-08-05 16:27:16 +08:00
< div >
2026-08-05 17:04:06 +08:00
< span class = "section-kicker" > 通用素材< / span >
< h2 > 上传图片或视频素材< / h2 >
2026-08-05 16:27:16 +08:00
< / div >
2026-08-05 17:04:06 +08:00
< span class = "status-badge neutral" id = "genericAssetStatus" > 未提交< / span >
2026-08-05 16:27:16 +08:00
< / div >
2026-08-05 17:04:06 +08:00
< form id = "genericAssetForm" class = "form-grid generic-library-only" >
< label class = "field" >
< span > 素材类型< / span >
< select id = "genericAssetType" > < option value = "image" > 图片素材< / option > < option value = "video" > 视频素材< / option > < / select >
2026-08-05 16:27:16 +08:00
< / label >
< label class = "field" >
< span > 素材名称< / span >
2026-08-05 17:04:06 +08:00
< input id = "genericAssetPurpose" required placeholder = "例如：办公室场景 / 角色走路参考" / >
2026-08-05 16:27:16 +08:00
< / label >
2026-08-05 17:04:06 +08:00
< label class = "field wide" >
< span > 素材公网 URL< / span >
< input id = "genericAssetUrl" type = "url" required placeholder = "https://example.com/reference.jpg" / >
< small id = "genericAssetHint" > 支持 JPG / PNG / WebP 等图片格式，必须可通过公网直接访问。< / small >
< / label >
< div class = "field action-field wide" >
< button class = "primary" type = "submit" id = "genericAssetSubmit" > 提交素材审核< / button >
2026-08-05 16:27:16 +08:00
< / div >
< / form >
2026-08-05 17:04:06 +08:00
< div class = "result-card hidden generic-library-only" id = "genericAssetResult" >
2026-08-05 16:27:16 +08:00
< div class = "result-icon" > ✓< / div >
2026-08-05 17:04:06 +08:00
< div > < strong > 通用素材已通过审核< / strong > < p id = "genericAssetResultText" > 可在下方历史素材中查看并用于短剧生产。< / p > < / div >
2026-08-05 16:27:16 +08:00
< / div >
2026-08-05 17:04:06 +08:00
< section class = "video-asset-history generic-library-only" >
2026-08-05 16:27:16 +08:00
< div class = "video-asset-history-head" >
2026-08-05 17:04:06 +08:00
< div > < span class = "section-kicker" > 历史素材< / span > < h3 > 已就绪图片与视频< / h3 > < / div >
2026-08-05 16:27:16 +08:00
< span > 点击“用于当前片段”可直接带入短剧生产< / span >
< / div >
2026-08-05 17:04:06 +08:00
< div class = "video-asset-grid" id = "genericAssetList" > < div class = "empty-small" > 暂无已就绪通用素材< / div > < / div >
2026-08-05 16:27:16 +08:00
< / section >
2026-08-05 17:59:38 +08:00
< div class = "panel-header general-video-only" >
< div >
< span class = "section-kicker" > 通用视频< / span >
< h2 > 生成一条视频< / h2 >
< / div >
< span class = "status-badge neutral" id = "generalVideoStatus" > 可提交< / span >
< / div >
< form id = "generalVideoForm" class = "form-grid general-video-only" >
< label class = "field wide" >
< span > 视频提示词< / span >
< textarea id = "generalPrompt" rows = "6" placeholder = "描述画面主体、场景、动作、镜头、风格与声音。" > < / textarea >
< / label >
< section class = "general-asset-picker wide" >
< div class = "media-field-head" >
< div > < strong > 从通用素材库选择< / strong > < small > 点击素材即可选中或取消< / small > < / div >
< button class = "media-add-button" type = "button" id = "refreshGeneralAssets" > 刷新素材< / button >
< / div >
< div class = "general-asset-grid" id = "generalAssetPicker" > < div class = "empty-small" > 暂无通用素材< / div > < / div >
< / section >
< 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 = "addGeneralImageButton" > ＋ < / button > < / div >
< div class = "media-url-list" id = "generalImageInputs" > < / div >
< small > 可填写公网图片 URL 或 asset:// 素材引用，最多 9 张。< / small >
< / div >
< div class = "field media-field" >
< div class = "media-field-head" > < span > 参考视频< / span > < button class = "media-add-button" type = "button" id = "addGeneralVideoButton" > ＋ < / button > < / div >
< div class = "media-url-list" id = "generalVideoInputs" > < / div >
< small > 可填写公网 MP4/MOV 或 asset:// 素材引用，最多 3 条。< / small >
< / div >
< / div >
< div class = "input-quota wide valid" id = "generalInputQuota" > 参考图片 0/9 · 参考视频 0/3< / div >
< label class = "field" > < span > 模型< / span > < select id = "generalModel" > < 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 = "generalRatio" > < 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 = "generalDuration" > < option value = "5" > 5 秒< / option > < option value = "6" > 6 秒< / option > < option value = "7" > 7 秒< / option > < option value = "8" > 8 秒< / option > < option value = "9" > 9 秒< / option > < option value = "10" > 10 秒< / option > < option value = "11" > 11 秒< / option > < option value = "12" > 12 秒< / option > < option value = "13" > 13 秒< / option > < option value = "14" > 14 秒< / option > < / select > < / label >
< label class = "field" > < span > 分辨率< / span > < select id = "generalResolution" > < option value = "720p" > 720p< / option > < option value = "480p" > 480p< / option > < / select > < / label >
< label class = "toggle-row" > < input id = "generalGenerateAudio" type = "checkbox" checked / > < span > 生成同步音频< / span > < / label >
< label class = "toggle-row" > < input id = "generalWatermark" type = "checkbox" / > < span > 保留平台水印< / span > < / label >
< div class = "field action-field wide" > < button class = "primary video-button" type = "submit" id = "generalGenerateButton" > 生成视频< / button > < / div >
< / form >
< section class = "general-video-results general-video-only" >
< div class = "version-head" > < div > < span class = "section-kicker" > 生成记录< / span > < h3 > 本浏览器生成的视频< / h3 > < / div > < span id = "generalResultCount" > 暂无记录< / span > < / div >
< div class = "version-list" id = "generalResultList" > < div class = "empty-small" > 提交任务后，生成状态和视频会出现在这里< / div > < / div >
< / section >
2026-07-30 08:58:38 +08:00
< 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 >
2026-08-05 17:04:06 +08:00
< small > 可填写公网 MP4/MOV， ； < / small >
2026-07-30 08:58:38 +08:00
< / 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 >
2026-07-31 13:41:09 +08:00
< option value = "6" > 6 秒< / option >
< option value = "7" > 7 秒< / option >
2026-07-30 08:58:38 +08:00
< option value = "8" > 8 秒< / option >
2026-07-31 13:41:09 +08:00
< option value = "9" > 9 秒< / option >
2026-07-30 08:58:38 +08:00
< option value = "10" > 10 秒< / option >
2026-07-31 13:41:09 +08:00
< option value = "11" > 11 秒< / option >
< option value = "12" > 12 秒< / option >
< option value = "13" > 13 秒< / option >
< option value = "14" > 14 秒< / option >
2026-07-30 08:58:38 +08:00
< / 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-08-05 17:59:38 +08:00
< script src = "./app.js?v=35" > < / script >
2026-07-30 08:58:38 +08:00
< / body >
< / html >
