410 lines
22 KiB
HTML
410 lines
22 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>营响力｜AI 视频与短剧生产</title>
|
||
<link rel="stylesheet" href="./styles.css?v=26" />
|
||
</head>
|
||
<body data-active-module="library">
|
||
<header class="topbar">
|
||
<div>
|
||
<span class="eyebrow">营响力 · 真实客户验证</span>
|
||
<h1>AI 视频与短剧生产</h1>
|
||
</div>
|
||
<div class="topbar-actions">
|
||
<button class="key-change-button hidden" type="button" id="changeVideoKeyButton">更换客户令牌</button>
|
||
<div class="connection" id="connectionState">正在检查接口配置…</div>
|
||
</div>
|
||
</header>
|
||
|
||
<main>
|
||
<nav class="module-tabs" aria-label="功能模块">
|
||
<button class="module-tab active" type="button" data-module="library">
|
||
<b>人物素材库</b><span>上传 1～3 张人物图片，审核后组合人物</span>
|
||
</button>
|
||
<button class="module-tab" type="button" data-module="generic-library">
|
||
<b>通用素材库</b><span>上传、审核并复用图片与视频素材</span>
|
||
</button>
|
||
<button class="module-tab" type="button" data-module="general-video">
|
||
<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="person-library-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–9 张属于同一人物/形象的历史素材</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>正面、侧面、背面任选 1～3 张上传</li>
|
||
<li>格式：JPG / PNG / WebP 等</li>
|
||
<li>宽或高 300–6000 px，单张小于 30MB</li>
|
||
<li>已上传图片全部通过后组成一个人物素材组</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="generic-library-only video-library-summary">
|
||
<div class="sidebar-title">
|
||
<span>通用素材</span>
|
||
<button class="link-button" type="button" id="refreshGenericAssets">刷新</button>
|
||
</div>
|
||
<div class="video-library-count"><strong id="genericAssetHistoryCount">0</strong><span>条已就绪图片/视频素材</span></div>
|
||
<div class="rule-box">
|
||
<strong>通用素材入库要求</strong>
|
||
<ul>
|
||
<li>提供公网可访问的图片或视频 URL</li>
|
||
<li>图片：JPG / PNG / WebP 等</li>
|
||
<li>视频：MP4 / MOV</li>
|
||
<li>入库审核通过后获得 asset:// 引用</li>
|
||
<li>可直接作为片段参考图片或参考视频</li>
|
||
</ul>
|
||
</div>
|
||
</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" placeholder="https://example.com/front.png" />
|
||
<small>五官与服装正面细节</small>
|
||
</label>
|
||
<label class="view-field">
|
||
<span><b>02</b> 侧面图</span>
|
||
<input id="assetSideUrl" type="url" placeholder="https://example.com/side.png" />
|
||
<small>轮廓、发型和体态</small>
|
||
</label>
|
||
<label class="view-field">
|
||
<span><b>03</b> 背面图</span>
|
||
<input id="assetBackUrl" type="url" 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>已上传的 1～3 张图片全部通过后，会绑定为一个可复用人物。</p>
|
||
<div class="reference-list" id="assetReferences"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="panel-header generic-library-only">
|
||
<div>
|
||
<span class="section-kicker">通用素材</span>
|
||
<h2>上传图片或视频素材</h2>
|
||
</div>
|
||
<span class="status-badge neutral" id="genericAssetStatus">未提交</span>
|
||
</div>
|
||
|
||
<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>
|
||
</label>
|
||
<label class="field">
|
||
<span>素材名称</span>
|
||
<input id="genericAssetPurpose" required placeholder="例如：办公室场景 / 角色走路参考" />
|
||
</label>
|
||
<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>
|
||
</div>
|
||
</form>
|
||
|
||
<div class="result-card hidden generic-library-only" id="genericAssetResult">
|
||
<div class="result-icon">✓</div>
|
||
<div><strong>通用素材已通过审核</strong><p id="genericAssetResultText">可在下方历史素材中查看并用于短剧生产。</p></div>
|
||
</div>
|
||
|
||
<section class="video-asset-history generic-library-only">
|
||
<div class="video-asset-history-head">
|
||
<div><span class="section-kicker">历史素材</span><h3>已就绪图片与视频</h3></div>
|
||
<span>点击“用于当前片段”可直接带入短剧生产</span>
|
||
</div>
|
||
<div class="video-asset-grid" id="genericAssetList"><div class="empty-small">暂无已就绪通用素材</div></div>
|
||
</section>
|
||
|
||
<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>
|
||
|
||
<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>可填写公网 MP4/MOV，或从通用素材库选择视频；选择“引用上一片段”后系统会自动加入。</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="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="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>
|
||
|
||
<div class="key-gate hidden" id="videoKeyGate">
|
||
<form class="key-gate-card" id="videoKeyForm">
|
||
<span class="section-kicker">首次使用</span>
|
||
<h2>输入客户令牌</h2>
|
||
<p>素材库与视频生成共用该令牌，相关费用归属此令牌，仅保存在当前浏览器。</p>
|
||
<label class="field">
|
||
<span>客户令牌</span>
|
||
<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>
|
||
|
||
<div class="toast hidden" id="toast"></div>
|
||
<script src="./app.js?v=35"></script>
|
||
</body>
|
||
</html>
|