feat: add general video generation workflow

This commit is contained in:
xuejianwu
2026-08-05 17:59:38 +08:00
parent 8c044424c4
commit e53d21a819
6 changed files with 494 additions and 13 deletions

View File

@@ -3,14 +3,14 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>营响力AI 短剧数字人 Demo</title>
<link rel="stylesheet" href="./styles.css?v=25" />
<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>
<h1>AI 视频与短剧生产</h1>
</div>
<div class="topbar-actions">
<button class="key-change-button hidden" type="button" id="changeVideoKeyButton">更换客户令牌</button>
@@ -26,6 +26,9 @@
<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>
@@ -200,6 +203,56 @@
<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>
@@ -351,6 +404,6 @@
</div>
<div class="toast hidden" id="toast"></div>
<script src="./app.js?v=34"></script>
<script src="./app.js?v=35"></script>
</body>
</html>