You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
466 lines
18 KiB
466 lines
18 KiB
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>MV Creator</title>
|
|
<style>
|
|
:root {
|
|
--bg: #0f0f0f; --card: #1a1a1a; --border: #2a2a2a;
|
|
--text: #e0e0e0; --text-dim: #888;
|
|
--accent: #f0c040; --green: #4ade80; --blue: #60a5fa; --red: #f87171;
|
|
--purple: #c084fc;
|
|
}
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
font-family: -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
|
|
background: var(--bg); color: var(--text);
|
|
line-height: 1.6; padding: 2rem 2rem 12rem;
|
|
max-width: 1400px; margin: 0 auto;
|
|
}
|
|
|
|
.header { margin-bottom: 2.5rem; text-align: center; }
|
|
.header h1 { font-size: 1.6rem; font-weight: 600; margin-bottom: 0.4rem; }
|
|
.header .sub { font-size: 0.85rem; color: var(--text-dim); }
|
|
|
|
/* --- 场景卡片 --- */
|
|
.scene-card {
|
|
margin-bottom: 2.5rem; padding: 1.5rem;
|
|
border: 2px solid var(--border); border-radius: 12px; background: var(--card);
|
|
transition: border-color 0.2s;
|
|
}
|
|
.scene-card:hover { border-color: #3a3a3a; }
|
|
.scene-header {
|
|
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
|
|
margin-bottom: 1rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--border);
|
|
}
|
|
.scene-header h2 { font-size: 1.2rem; font-weight: 600; color: var(--accent); }
|
|
.scene-time {
|
|
font-size: 0.8rem; color: var(--blue); background: rgba(96,165,250,0.1);
|
|
padding: 2px 10px; border-radius: 4px; font-family: monospace;
|
|
}
|
|
.scene-at-btn {
|
|
padding: 2px 10px; border-radius: 4px; font-size: 0.75rem;
|
|
cursor: pointer; border: 1px solid #444; background: #222; color: var(--text-dim);
|
|
transition: all 0.15s; margin-left: auto; flex-shrink: 0;
|
|
}
|
|
.scene-at-btn:hover { background: #333; color: var(--accent); border-color: var(--accent); }
|
|
|
|
/* 歌词引用 */
|
|
.lyrics-block {
|
|
margin-bottom: 1rem; padding: 0.6rem 1rem;
|
|
border-left: 3px solid var(--purple); background: rgba(192,132,252,0.05);
|
|
font-size: 0.85rem; color: #bbb; font-style: italic;
|
|
}
|
|
.lyrics-block p { margin: 2px 0; }
|
|
|
|
/* 出场角色 */
|
|
.char-tags { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
|
|
.char-tags .label { font-size: 0.8rem; color: var(--text-dim); margin-right: 4px; }
|
|
.char-tag {
|
|
display: inline-flex; align-items: center; gap: 6px;
|
|
padding: 3px 10px; border-radius: 16px; font-size: 0.8rem;
|
|
background: rgba(240,192,64,0.1); border: 1px solid rgba(240,192,64,0.3);
|
|
color: var(--accent); cursor: default; position: relative;
|
|
}
|
|
.char-tag img {
|
|
width: 20px; height: 20px; border-radius: 50%; object-fit: cover;
|
|
}
|
|
.char-tag-none {
|
|
color: var(--text-dim); background: rgba(136,136,136,0.1);
|
|
border-color: rgba(136,136,136,0.3);
|
|
}
|
|
|
|
/* 角色参考图弹出 */
|
|
.char-ref-popup {
|
|
display: none; position: absolute; top: calc(100% + 8px); left: 0; z-index: 100;
|
|
background: #222; border: 1px solid #444; border-radius: 8px;
|
|
padding: 6px; box-shadow: 0 8px 24px rgba(0,0,0,0.5);
|
|
}
|
|
.char-ref-popup img { width: 160px; height: auto; border-radius: 6px; display: block; }
|
|
.char-tag:hover .char-ref-popup { display: block; }
|
|
|
|
/* 场景描述 */
|
|
.desc-block { margin-bottom: 1rem; }
|
|
.desc-block h3 { font-size: 0.8rem; color: var(--blue); margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: 0.5px; }
|
|
.desc-block p { font-size: 0.85rem; color: var(--text-dim); }
|
|
|
|
/* 分镜图展示 */
|
|
.storyboard-img-area { margin-bottom: 1rem; }
|
|
.storyboard-img-area .label { font-size: 0.8rem; color: var(--green); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
|
|
.storyboard-img-area .label::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
|
|
.storyboard-img {
|
|
width: 100%; max-width: 720px; border-radius: 10px; object-fit: cover;
|
|
border: 2px solid #333; transition: border-color 0.2s; cursor: pointer;
|
|
}
|
|
.storyboard-img:hover { border-color: var(--accent); }
|
|
.storyboard-img-missing {
|
|
width: 100%; max-width: 720px; height: 200px; border-radius: 10px;
|
|
border: 2px dashed #333; display: flex; align-items: center; justify-content: center;
|
|
color: var(--text-dim); font-size: 0.85rem;
|
|
}
|
|
|
|
/* 参考图缩略图 */
|
|
.ref-images { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 1rem; align-items: flex-end; }
|
|
.ref-images .label { font-size: 0.8rem; color: var(--text-dim); width: 100%; margin-bottom: 2px; }
|
|
.ref-thumb {
|
|
width: 80px; height: 52px; border-radius: 6px; object-fit: cover;
|
|
border: 1px solid #333; transition: transform 0.15s;
|
|
}
|
|
.ref-thumb:hover { transform: scale(1.1); border-color: var(--accent); }
|
|
.ref-note { font-size: 0.65rem; color: #666; max-width: 80px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
|
|
/* 视频提示词（可折叠） */
|
|
.prompt-toggle {
|
|
display: flex; align-items: center; gap: 8px; cursor: pointer;
|
|
margin-bottom: 0.5rem; user-select: none;
|
|
}
|
|
.prompt-toggle h3 { font-size: 0.8rem; color: var(--blue); text-transform: uppercase; letter-spacing: 0.5px; }
|
|
.prompt-toggle .arrow { font-size: 0.7rem; color: #666; transition: transform 0.2s; }
|
|
.prompt-toggle.open .arrow { transform: rotate(90deg); }
|
|
.prompt-block {
|
|
display: none; margin-bottom: 1rem; padding: 0.8rem; background: #111;
|
|
border-radius: 8px; border: 1px solid #222;
|
|
}
|
|
.prompt-block.open { display: block; }
|
|
.prompt-text {
|
|
font-family: "JetBrains Mono", "Fira Code", monospace;
|
|
font-size: 0.8rem; color: #ccc; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
|
|
}
|
|
|
|
/* --- 底部提交区 --- */
|
|
.submit-area {
|
|
position: fixed; bottom: 0; left: 0; right: 0;
|
|
background: rgba(15,15,15,0.95); backdrop-filter: blur(8px);
|
|
border-top: 1px solid var(--border); padding: 1rem 2rem;
|
|
}
|
|
.submit-row { max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
|
|
.feedback-row { display: flex; align-items: flex-start; gap: 12px; }
|
|
.feedback-textarea {
|
|
flex: 1; min-height: 48px; max-height: 120px; padding: 8px 12px; resize: vertical;
|
|
background: #222; border: 1px solid #444; border-radius: 6px;
|
|
color: var(--text); font-size: 0.85rem; font-family: inherit;
|
|
}
|
|
.feedback-textarea::placeholder { color: #555; }
|
|
.feedback-textarea:focus { outline: none; border-color: var(--accent); }
|
|
.upload-at-btn {
|
|
padding: 6px 14px; background: #222; border: 1px solid #444; border-radius: 5px;
|
|
color: var(--text-dim); cursor: pointer; font-size: 0.8rem; white-space: nowrap;
|
|
flex-shrink: 0; align-self: center;
|
|
}
|
|
.upload-at-btn:hover { background: #333; }
|
|
|
|
.submit-top { display: flex; align-items: center; gap: 12px; }
|
|
.submit-info { font-size: 0.85rem; color: var(--text-dim); }
|
|
.submit-btn {
|
|
padding: 8px 24px; background: var(--accent); color: #1a1a1a; border: none;
|
|
border-radius: 8px; font-size: 0.9rem; font-weight: 600; cursor: pointer;
|
|
}
|
|
.submit-btn:hover { background: #e0b030; }
|
|
.submit-btn:disabled { background: #555; color: #999; cursor: not-allowed; }
|
|
#status-msg { font-size: 0.85rem; color: var(--green); margin-left: 8px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="header">
|
|
<h1>分镜预览</h1>
|
|
<p class="sub">审阅各幕分镜 · 点击 @ 引用场景到反馈框 · 留空直接确认</p>
|
|
</div>
|
|
|
|
<div id="scenes-container"></div>
|
|
|
|
<div class="submit-area">
|
|
<div class="submit-row">
|
|
<div class="feedback-row">
|
|
<textarea class="feedback-textarea" id="feedback-input"
|
|
placeholder="修改建议（选填）：点击场景的 @ 引用，描述需要修改的内容 如「@scene_03 场景描述改为两人在咖啡馆外偶遇」 留空 = 确认所有分镜，进入下一阶段"></textarea>
|
|
<input type="file" id="ref-file" accept="image/*" style="display:none"
|
|
onchange="handleRefUpload(this)">
|
|
<button class="upload-at-btn" onclick="document.getElementById('ref-file').click()"></button>
|
|
</div>
|
|
<div class="submit-top">
|
|
<span class="submit-info"><span id="total-info"></span></span>
|
|
<button class="submit-btn" id="submit-btn" onclick="submitAll()">提交</button>
|
|
<span id="status-msg"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const PREVIEW_LANG = null; /* __PREVIEW_LANG__ */
|
|
const LANG = PREVIEW_LANG || (navigator.language.startsWith('zh') ? 'zh' : 'en');
|
|
const I18N = {
|
|
zh: {
|
|
pageTitle: '分镜预览',
|
|
pageSub: '审阅各幕分镜 · 点击 @ 引用场景到反馈框 · 留空直接确认',
|
|
characters: '出场角色：',
|
|
sceneBackground: '场景背景：',
|
|
keyProps: '关键物件：',
|
|
emptyScene: '空镜',
|
|
sceneDesc: '场景描述',
|
|
storyboardImg: '分镜图',
|
|
videoPrompt: '视频提示词',
|
|
refImages: '参考图：',
|
|
feedbackPlaceholder: '修改建议（选填）：点击场景的 @ 引用，描述需要修改的内容\n如「@scene_03 场景描述改为两人在咖啡馆外偶遇」\n留空 = 确认所有分镜，进入下一阶段',
|
|
uploadRefBtn: '上传参考图 @',
|
|
uploadRefTitle: '上传图片并插入引用',
|
|
totalScenes: '共',
|
|
scenesUnit: '幕分镜',
|
|
submitBtn: '提交',
|
|
submitFailed: '提交失败，请重试',
|
|
confirmNext: '已提交，Hub 将继续下一步',
|
|
pageClosing: '页面将自动关闭...',
|
|
canClose: '可以关闭此页面了',
|
|
citeScene: '引用场景到反馈框',
|
|
charRefAlt: '参考图',
|
|
},
|
|
en: {
|
|
pageTitle: 'Storyboard Preview',
|
|
pageSub: 'Review each scene · Click @ to cite in feedback · Leave empty to confirm',
|
|
characters: 'Characters: ',
|
|
sceneBackground: 'Scene Background: ',
|
|
keyProps: 'Key Props: ',
|
|
emptyScene: 'Empty scene',
|
|
sceneDesc: 'Scene Description',
|
|
storyboardImg: 'Storyboard',
|
|
videoPrompt: 'Video Prompt',
|
|
refImages: 'References: ',
|
|
feedbackPlaceholder: 'Feedback (optional): Click @ on scenes to cite, describe changes needed\ne.g. "@scene_03 change description to two people meeting outside a cafe"\nLeave empty = confirm all storyboards, proceed to next phase',
|
|
uploadRefBtn: 'Upload Ref @',
|
|
uploadRefTitle: 'Upload image and insert reference',
|
|
totalScenes: '',
|
|
scenesUnit: ' scenes',
|
|
submitBtn: 'Submit',
|
|
submitFailed: 'Submit failed, please retry',
|
|
confirmNext: 'Submitted. Hub will proceed to next step.',
|
|
pageClosing: 'Page will close automatically...',
|
|
canClose: 'You can close this page now.',
|
|
citeScene: 'Cite scene in feedback',
|
|
charRefAlt: 'reference',
|
|
}
|
|
};
|
|
const t = (key) => (I18N[LANG] || I18N.en)[key] || key;
|
|
document.documentElement.lang = LANG === 'zh' ? 'zh-CN' : 'en';
|
|
|
|
const PREVIEW_TYPE = null; /* __PREVIEW_TYPE__ */
|
|
const PREVIEW_DATA = null; /* __PREVIEW_DATA__ */
|
|
|
|
function init() {
|
|
const data = typeof PREVIEW_DATA === 'string' ? JSON.parse(PREVIEW_DATA) : PREVIEW_DATA;
|
|
if (!data || !data.scenes) return;
|
|
|
|
// i18n: update static HTML elements
|
|
document.title = 'MV Creator - ' + t('pageTitle');
|
|
document.querySelector('.header h1').textContent = t('pageTitle');
|
|
document.querySelector('.header .sub').textContent = t('pageSub');
|
|
document.getElementById('feedback-input').placeholder = t('feedbackPlaceholder');
|
|
document.querySelector('.upload-at-btn').textContent = t('uploadRefBtn');
|
|
document.querySelector('.upload-at-btn').title = t('uploadRefTitle');
|
|
document.getElementById('submit-btn').textContent = t('submitBtn');
|
|
|
|
const container = document.getElementById('scenes-container');
|
|
const scenes = data.scenes;
|
|
document.getElementById('total-info').textContent = t('totalScenes') + scenes.length + t('scenesUnit');
|
|
|
|
scenes.forEach((scene, si) => {
|
|
const card = document.createElement('div');
|
|
card.className = 'scene-card';
|
|
let html = '';
|
|
|
|
// 从 candidates[0].filename 提取 scene id（去掉扩展名）
|
|
// 例如 "scene_09b.jpg" → "scene_09b"
|
|
// 避免用 si+1 推算导致 scene_09b 之后所有场景编号错位
|
|
// 注意：scene.selected 含有完整行文本（如 "selected.jpg (Candidate 01)"），不可直接用
|
|
const rawFilename = (scene.candidates && scene.candidates[0] && scene.candidates[0].filename) || `scene_${String(si+1).padStart(2,'0')}.jpg`;
|
|
const sceneFileId = rawFilename.replace(/\.[^.]+$/, '');
|
|
|
|
// 头部：幕名 + 时间码 + @
|
|
html += `<div class="scene-header">
|
|
<h2>${esc(scene.title)}</h2>
|
|
<span class="scene-time">${esc(scene.time_raw)}</span>
|
|
<button class="scene-at-btn" data-scene-id="${esc(sceneFileId)}" title="${t('citeScene')}">@</button>
|
|
</div>`;
|
|
|
|
// 歌词引用
|
|
if (scene.lyrics && scene.lyrics.length) {
|
|
html += `<div class="lyrics-block">`;
|
|
scene.lyrics.forEach(l => { html += `<p>${esc(l)}</p>`; });
|
|
html += `</div>`;
|
|
}
|
|
|
|
// 分镜图展示（候选图中的第一张或选定图）
|
|
const hasCandidates = scene.candidates && scene.candidates.length > 0;
|
|
if (hasCandidates) {
|
|
const displayImg = scene.candidates[0];
|
|
html += `<div class="storyboard-img-area">
|
|
<div class="label">${t('storyboardImg')}</div>
|
|
<img class="storyboard-img" src="${displayImg.url}" alt="${esc(displayImg.description || displayImg.filename)}"
|
|
title="${esc(displayImg.description || displayImg.filename)}"
|
|
onclick="window.open(this.src, '_blank')">
|
|
</div>`;
|
|
}
|
|
|
|
// 出场角色标签
|
|
html += `<div class="char-tags"><span class="label">${t('characters')}</span>`;
|
|
if (scene.character_names && scene.character_names.length) {
|
|
const charRefs = scene.char_refs || [];
|
|
const charNames = scene.character_names || [];
|
|
charNames.forEach(cname => {
|
|
const ref = charRefs.find(r => r.name === cname);
|
|
if (ref && ref.url) {
|
|
html += `<span class="char-tag">${esc(cname)}
|
|
<img src="${ref.url}" alt="${esc(cname)}">
|
|
<div class="char-ref-popup"><img src="${ref.url}" alt="${esc(cname)} ${t('charRefAlt')}"></div>
|
|
</span>`;
|
|
} else {
|
|
html += `<span class="char-tag">${esc(cname)}</span>`;
|
|
}
|
|
});
|
|
} else {
|
|
html += `<span class="char-tag char-tag-none">${t('emptyScene')}</span>`;
|
|
}
|
|
html += `</div>`;
|
|
|
|
// 场景背景
|
|
if (scene.scene_background) {
|
|
html += `<div class="desc-block"><h3>${t('sceneBackground')}</h3><p>${esc(scene.scene_background)}</p></div>`;
|
|
}
|
|
|
|
// 关键物件
|
|
if (scene.key_props) {
|
|
html += `<div class="desc-block"><h3>${t('keyProps')}</h3><p>${esc(scene.key_props)}</p></div>`;
|
|
}
|
|
|
|
// 场景描述
|
|
if (scene.description) {
|
|
html += `<div class="desc-block"><h3>${t('sceneDesc')}</h3><p>${esc(scene.description)}</p></div>`;
|
|
}
|
|
|
|
// 参考图缩略图
|
|
if (scene.ref_images && scene.ref_images.length) {
|
|
html += `<div class="ref-images"><span class="label">${t('refImages')}</span>`;
|
|
scene.ref_images.forEach(ref => {
|
|
if (ref.url) {
|
|
html += `<div style="text-align:center">
|
|
<img class="ref-thumb" src="${ref.url}" alt="${esc(ref.note || ref.path)}" title="${esc(ref.note || ref.path)}">
|
|
<div class="ref-note">${esc(ref.note || '')}</div>
|
|
</div>`;
|
|
}
|
|
});
|
|
html += `</div>`;
|
|
}
|
|
|
|
// 视频提示词（可折叠）
|
|
if (scene.prompt) {
|
|
html += `<div class="prompt-toggle" onclick="togglePrompt(this)">
|
|
<span class="arrow">▶</span><h3>${t('videoPrompt')}</h3>
|
|
</div>
|
|
<div class="prompt-block">
|
|
<div class="prompt-text">${esc(scene.prompt)}</div>
|
|
</div>`;
|
|
}
|
|
|
|
card.innerHTML = html;
|
|
container.appendChild(card);
|
|
});
|
|
|
|
container.addEventListener('click', function(e) {
|
|
const btn = e.target.closest('.scene-at-btn');
|
|
if (btn && btn.dataset.sceneId) atScene(btn.dataset.sceneId);
|
|
});
|
|
}
|
|
|
|
function esc(s) {
|
|
const d = document.createElement('div');
|
|
d.textContent = s;
|
|
return d.innerHTML;
|
|
}
|
|
|
|
function togglePrompt(el) {
|
|
el.classList.toggle('open');
|
|
el.nextElementSibling.classList.toggle('open');
|
|
}
|
|
|
|
function atScene(sceneFileId) {
|
|
const textarea = document.getElementById('feedback-input');
|
|
const val = textarea.value;
|
|
const insert = `@${sceneFileId} `;
|
|
const pos = textarea.selectionStart || val.length;
|
|
textarea.value = val.slice(0, pos) + insert + val.slice(pos);
|
|
textarea.focus();
|
|
textarea.selectionStart = textarea.selectionEnd = pos + insert.length;
|
|
}
|
|
|
|
async function handleRefUpload(input) {
|
|
const file = input.files[0];
|
|
if (!file) return;
|
|
const reader = new FileReader();
|
|
reader.onload = async () => {
|
|
const base64 = reader.result.split(',')[1];
|
|
try {
|
|
const resp = await fetch('/upload', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({ data: base64, filename: file.name, storyboard: true })
|
|
});
|
|
const result = await resp.json();
|
|
if (result.ok) {
|
|
const textarea = document.getElementById('feedback-input');
|
|
const val = textarea.value;
|
|
const insert = `@${result.path} `;
|
|
const pos = textarea.selectionStart || val.length;
|
|
textarea.value = val.slice(0, pos) + insert + val.slice(pos);
|
|
textarea.focus();
|
|
textarea.selectionStart = textarea.selectionEnd = pos + insert.length;
|
|
}
|
|
} catch (err) { console.error('Upload failed:', err); }
|
|
};
|
|
reader.readAsDataURL(file);
|
|
input.value = '';
|
|
}
|
|
|
|
async function submitAll() {
|
|
const feedbackText = document.getElementById('feedback-input').value.trim();
|
|
const feedback = feedbackText || 'LGTM';
|
|
await doSubmit(feedback);
|
|
}
|
|
|
|
async function doSubmit(feedback) {
|
|
try {
|
|
const resp = await fetch('/feedback', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({ feedback })
|
|
});
|
|
const result = await resp.json();
|
|
if (result.ok) {
|
|
showDone(t('confirmNext'));
|
|
}
|
|
} catch (err) {
|
|
document.getElementById('status-msg').textContent = t('submitFailed');
|
|
}
|
|
}
|
|
|
|
init();
|
|
function showDone(msg) {
|
|
document.body.innerHTML = `
|
|
<div style="display:flex;align-items:center;justify-content:center;height:100vh;background:#0f0f0f;">
|
|
<div style="text-align:center;color:#e0e0e0;font-family:-apple-system,sans-serif;">
|
|
<div style="font-size:3rem;color:#4ade80;margin-bottom:1rem;">✓</div>
|
|
<div style="font-size:1.2rem;font-weight:600;margin-bottom:0.5rem;">${msg}</div>
|
|
<div class="done-sub" style="font-size:0.85rem;color:#888;">${t('pageClosing')}</div>
|
|
</div>
|
|
</div>`;
|
|
setTimeout(() => {
|
|
window.close();
|
|
setTimeout(() => {
|
|
const sub = document.querySelector('.done-sub');
|
|
if (sub) sub.textContent = t('canClose');
|
|
}, 2000);
|
|
}, 800);
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|