feat: add flexible character uploads and video asset library
This commit is contained in:
xuejianwu
@@ -4,7 +4,7 @@
|
||||
<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=24" />
|
||||
<link rel="stylesheet" href="./styles.css?v=25" />
|
||||
</head>
|
||||
<body data-active-module="library">
|
||||
<header class="topbar">
|
||||
@@ -21,7 +21,10 @@
|
||||
<main>
|
||||
<nav class="module-tabs" aria-label="功能模块">
|
||||
<button class="module-tab active" type="button" data-module="library">
|
||||
<b>人物素材库</b><span>上传、审核、查看历史素材并组合人物</span>
|
||||
<b>人物素材库</b><span>上传 1～3 张人物图片，审核后组合人物</span>
|
||||
</button>
|
||||
<button class="module-tab" type="button" data-module="video-library">
|
||||
<b>视频素材库</b><span>上传、审核并复用历史视频素材</span>
|
||||
</button>
|
||||
<button class="module-tab" type="button" data-module="production">
|
||||
<b>短剧生产</b><span>选择本场角色，输入图片和视频后生成</span>
|
||||
@@ -42,6 +45,7 @@
|
||||
|
||||
<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>
|
||||
@@ -83,12 +87,29 @@
|
||||
<div class="rule-box library-only">
|
||||
<strong>入库前检查</strong>
|
||||
<ul>
|
||||
<li>正面、侧面、背面分别提供公网 URL</li>
|
||||
<li>正面、侧面、背面任选 1～3 张上传</li>
|
||||
<li>格式：JPG / PNG / WebP 等</li>
|
||||
<li>宽或高 300–6000 px，单张小于 30MB</li>
|
||||
<li>三张全部通过后组成一个角色素材组</li>
|
||||
<li>已上传图片全部通过后组成一个人物素材组</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="video-library-only video-library-summary">
|
||||
<div class="sidebar-title">
|
||||
<span>视频素材</span>
|
||||
<button class="link-button" type="button" id="refreshVideoAssets">刷新</button>
|
||||
</div>
|
||||
<div class="video-library-count"><strong id="videoAssetHistoryCount">0</strong><span>条已就绪视频素材</span></div>
|
||||
<div class="rule-box">
|
||||
<strong>视频入库要求</strong>
|
||||
<ul>
|
||||
<li>提供公网可访问的视频 URL</li>
|
||||
<li>格式：MP4 / MOV</li>
|
||||
<li>入库审核通过后获得 asset:// 引用</li>
|
||||
<li>可直接用于短剧片段的参考视频</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<section class="panel">
|
||||
@@ -104,17 +125,17 @@
|
||||
<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" />
|
||||
<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" required placeholder="https://example.com/side.png" />
|
||||
<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" required placeholder="https://example.com/back.png" />
|
||||
<input id="assetBackUrl" type="url" placeholder="https://example.com/back.png" />
|
||||
<small>背部服装与发型细节</small>
|
||||
</label>
|
||||
</div>
|
||||
@@ -125,7 +146,7 @@
|
||||
</label>
|
||||
<div class="field action-field">
|
||||
<span> </span>
|
||||
<button class="primary" type="submit" id="reviewButton">提交三视图审核</button>
|
||||
<button class="primary" type="submit" id="reviewButton">提交人物素材审核</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -133,11 +154,48 @@
|
||||
<div class="result-icon">✓</div>
|
||||
<div>
|
||||
<strong>人物素材已入库并完成组合</strong>
|
||||
<p>审核通过的图片会绑定为一个可复用人物，也可在人物库中重新组合。</p>
|
||||
<p>已上传的 1～3 张图片全部通过后，会绑定为一个可复用人物。</p>
|
||||
<div class="reference-list" id="assetReferences"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel-header video-library-only">
|
||||
<div>
|
||||
<span class="section-kicker">视频素材</span>
|
||||
<h2>上传视频素材</h2>
|
||||
</div>
|
||||
<span class="status-badge neutral" id="videoAssetStatus">未提交</span>
|
||||
</div>
|
||||
|
||||
<form id="videoAssetForm" class="form-grid video-library-only">
|
||||
<label class="field wide">
|
||||
<span>视频公网 URL</span>
|
||||
<input id="videoAssetUrl" type="url" required placeholder="https://example.com/reference.mp4" />
|
||||
<small>支持 MP4 / MOV，必须可通过公网直接访问。</small>
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>素材名称</span>
|
||||
<input id="videoAssetPurpose" required placeholder="例如：电梯口上一片段 / 角色走路参考" />
|
||||
</label>
|
||||
<div class="field action-field">
|
||||
<span> </span>
|
||||
<button class="primary" type="submit" id="videoAssetSubmit">提交视频素材审核</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="result-card hidden video-library-only" id="videoAssetResult">
|
||||
<div class="result-icon">✓</div>
|
||||
<div><strong>视频素材已通过审核</strong><p id="videoAssetResultText">可在下方历史素材中查看并用于短剧生产。</p></div>
|
||||
</div>
|
||||
|
||||
<section class="video-asset-history video-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="videoAssetList"><div class="empty-small">暂无已就绪视频素材</div></div>
|
||||
</section>
|
||||
|
||||
<div class="storyboard production-only">
|
||||
<label class="field continuity-choice">
|
||||
<span>与上一片段的衔接</span>
|
||||
@@ -178,7 +236,7 @@
|
||||
<button class="media-add-button" type="button" id="addReferenceVideoButton">＋ 添加视频</button>
|
||||
</div>
|
||||
<div class="media-url-list" id="referenceVideoInputs"></div>
|
||||
<small>手动补充 reference_video；选择“引用上一片段”后系统会自动加入，无需重复填写。</small>
|
||||
<small>可填写公网 MP4/MOV，或从视频素材库选择 asset:// 引用；选择“引用上一片段”后系统会自动加入。</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-quota wide" id="inputQuota">人物图片 0 张 · 其他图片 0 张 · 图片合计 0/9 · 视频 0 条</div>
|
||||
@@ -289,6 +347,6 @@
|
||||
</div>
|
||||
|
||||
<div class="toast hidden" id="toast"></div>
|
||||
<script src="./app.js?v=30"></script>
|
||||
<script src="./app.js?v=31"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user