+
+
${escapeHtmlAttr(_t('batchKfPanelTitle'))}
+
+ ${escapeHtmlAttr(_t('batchTotalDur'))} — ${escapeHtmlAttr(_t('batchTotalSec'))}
+
+
+
${escapeHtmlAttr(_t('batchPanelHint'))}
+
+ ${blocks}
+
+
等待中...
+ `;
+ historyContainer.prepend(loadingCard);
+ }
+
+ // ---- 构建请求 ----
+ let endpoint, payload;
+ if (currentMode === 'image') {
+ const w = parseInt(document.getElementById('img-w').value);
+ const h = parseInt(document.getElementById('img-h').value);
+ endpoint = '/api/generate-image';
+ payload = {
+ prompt, width: w, height: h,
+ numSteps: parseInt(document.getElementById('img-steps').value),
+ numImages: 1
+ };
+ addLog(`正在发起图像渲染: ${w}x${h}, Steps: ${payload.numSteps}`);
+
+ } else if (currentMode === 'video') {
+ const res = updateResPreview();
+ const dur = parseFloat(document.getElementById('vid-duration').value);
+ const fps = document.getElementById('vid-fps').value;
+ if (dur > 20) addLog(_t('warnVideoLong').replace('{n}', String(dur)));
+
+ const audio = document.getElementById('vid-audio').checked ? "true" : "false";
+ const audioPath = document.getElementById('uploaded-audio-path').value;
+ const startFramePathValue = document.getElementById('start-frame-path').value;
+ const endFramePathValue = document.getElementById('end-frame-path').value;
+
+ let finalImagePath = null, finalStartFramePath = null, finalEndFramePath = null;
+ if (startFramePathValue && endFramePathValue) {
+ finalStartFramePath = startFramePathValue;
+ finalEndFramePath = endFramePathValue;
+ } else if (startFramePathValue) {
+ finalImagePath = startFramePathValue;
+ }
+
+ endpoint = '/api/generate';
+ const modelSelect = document.getElementById('vid-model');
+ const loraSelect = document.getElementById('vid-lora');
+ const loraStrengthInput = document.getElementById('lora-strength');
+ const modelPath = modelSelect ? modelSelect.value : '';
+ const loraPath = loraSelect ? loraSelect.value : '';
+ const loraStrength = loraStrengthInput ? (parseFloat(loraStrengthInput.value) || 1.0) : 1.0;
+ console.log("modelPath:", modelPath);
+ console.log("loraPath:", loraPath);
+ console.log("loraStrength:", loraStrength);
+ payload = {
+ prompt, resolution: res, model: "ltx-2",
+ cameraMotion: document.getElementById('vid-motion').value,
+ negativePrompt: "low quality, blurry, noisy, static noise, distorted",
+ duration: String(dur), fps, audio,
+ imagePath: finalImagePath,
+ audioPath: audioPath || null,
+ startFramePath: finalStartFramePath,
+ endFramePath: finalEndFramePath,
+ aspectRatio: document.getElementById('vid-ratio').value,
+ modelPath: modelPath || null,
+ loraPath: loraPath || null,
+ loraStrength: loraStrength,
+ };
+ addLog(`正在发起视频渲染: ${res}, 时长: ${dur}s, FPS: ${fps}, 模型: ${modelPath ? modelPath.split(/[/\\]/).pop() : _t('modelDefaultLabel')}, LoRA: ${loraPath ? loraPath.split(/[/\\]/).pop() : _t('loraNoneLabel')}`);
+
+ } else if (currentMode === 'upscale') {
+ const videoPath = document.getElementById('upscale-video-path').value;
+ const targetRes = document.getElementById('upscale-res').value;
+ if (!videoPath) throw new Error(_t('errUpscaleNoVideo'));
+ endpoint = '/api/system/upscale-video';
+ payload = { video_path: videoPath, resolution: targetRes, prompt: "high quality, detailed, 4k", strength: 0.7 };
+ addLog(`正在发起视频超分: 目标 ${targetRes}`);
+ } else if (currentMode === 'batch') {
+ const res = updateBatchResPreview();
+ const commonPromptEl = document.getElementById('batch-common-prompt');
+ const commonPrompt = commonPromptEl ? commonPromptEl.value : '';
+ const modelSelect = document.getElementById('batch-model');
+ const loraSelect = document.getElementById('batch-lora');
+ const loraStrengthInput = document.getElementById('batch-lora-strength');
+ const modelPath = modelSelect ? modelSelect.value : '';
+ const loraPath = loraSelect ? loraSelect.value : '';
+ const loraStrength = loraStrengthInput ? (parseFloat(loraStrengthInput.value) || 1.2) : 1.2;
+
+ if (batchImages.length < 2) {
+ throw new Error(_t('errBatchMinImages'));
+ }
+
+ if (batchWorkflowIsSingle()) {
+ captureBatchKfTimelineFromDom();
+ const fps = document.getElementById('vid-fps').value;
+ const parts = [prompt.trim(), commonPrompt.trim()].filter(Boolean);
+ const combinedPrompt = parts.join(', ');
+ if (!combinedPrompt) {
+ throw new Error(_t('errSingleKfPrompt'));
+ }
+ const nKf = batchImages.length;
+ const minSeg = 0.1;
+ const segDurs = [];
+ for (let j = 0; j < nKf - 1; j++) {
+ let v = parseFloat(document.getElementById(`batch-kf-seg-dur-${j}`)?.value);
+ if (!Number.isFinite(v) || v < minSeg) v = minSeg;
+ segDurs.push(v);
+ }
+ const sumSec = segDurs.reduce((a, b) => a + b, 0);
+ const dur = Math.max(2, Math.ceil(sumSec - 1e-9));
+ const times = [0];
+ let acc = 0;
+ for (let j = 0; j < nKf - 1; j++) {
+ acc += segDurs[j];
+ times.push(acc);
+ }
+ const strengths = [];
+ for (let i = 0; i < nKf; i++) {
+ const sEl = document.getElementById(`batch-kf-strength-${i}`);
+ let sv = parseFloat(sEl?.value);
+ if (!Number.isFinite(sv)) {
+ sv = parseFloat(defaultKeyframeStrengthForIndex(i, nKf));
+ }
+ if (!Number.isFinite(sv)) sv = 1;
+ sv = Math.max(0.1, Math.min(1.0, sv));
+ strengths.push(sv);
+ }
+ endpoint = '/api/generate';
+ payload = {
+ prompt: combinedPrompt,
+ resolution: res,
+ model: "ltx-2",
+ cameraMotion: document.getElementById('vid-motion').value,
+ negativePrompt: "low quality, blurry, noisy, static noise, distorted",
+ duration: String(dur),
+ fps,
+ audio: "false",
+ imagePath: null,
+ audioPath: null,
+ startFramePath: null,
+ endFramePath: null,
+ keyframePaths: batchImages.map((b) => b.path),
+ keyframeStrengths: strengths,
+ keyframeTimes: times,
+ aspectRatio: document.getElementById('batch-ratio').value,
+ modelPath: modelPath || null,
+ loraPath: loraPath || null,
+ loraStrength: loraStrength,
+ };
+ addLog(
+ `单次多关键帧: ${nKf} 锚点, 轴长合计 ${sumSec.toFixed(1)}s → 请求时长 ${dur}s, ${res}, FPS ${fps}`
+ );
+ } else {
+ const segments = [];
+ for (let i = 0; i < batchImages.length - 1; i++) {
+ const duration = parseFloat(document.getElementById(`batch-segment-duration-${i}`)?.value || 5);
+ const segmentPrompt = document.getElementById(`batch-segment-prompt-${i}`)?.value || '';
+ const segParts = [prompt.trim(), commonPrompt.trim(), segmentPrompt.trim()].filter(Boolean);
+ const combinedSegPrompt = segParts.join(', ');
+ segments.push({
+ startImage: batchImages[i].path,
+ endImage: batchImages[i + 1].path,
+ duration: duration,
+ prompt: combinedSegPrompt
+ });
+ }
+
+ endpoint = '/api/generate-batch';
+ const bgAudioEl = document.getElementById('batch-background-audio-path');
+ const backgroundAudioPath = (bgAudioEl && bgAudioEl.value) ? bgAudioEl.value.trim() : null;
+ payload = {
+ segments: segments,
+ resolution: res,
+ model: "ltx-2",
+ aspectRatio: document.getElementById('batch-ratio').value,
+ modelPath: modelPath || null,
+ loraPath: loraPath || null,
+ loraStrength: loraStrength,
+ negativePrompt: "low quality, blurry, noisy, static noise, distorted",
+ backgroundAudioPath: backgroundAudioPath || null
+ };
+ addLog(`分段拼接: ${segments.length} 段, ${res}${backgroundAudioPath ? '，含统一配乐' : ''}`);
+ }
+ }
+
+ // ---- 发送请求 ----
+ const res = await fetch(BASE + endpoint, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(payload)
+ });
+ const data = await res.json();
+ if (!res.ok) {
+ const errMsg = data.error || data.detail || "API 拒绝了请求";
+ throw new Error(typeof errMsg === 'string' ? errMsg : JSON.stringify(errMsg));
+ }
+
+ // ---- 显示结果 ----
+ const rawPath = data.image_paths ? data.image_paths[0] : data.video_path;
+ if (rawPath) {
+ try { displayOutput(rawPath); } catch (dispErr) { addLog(`⚠️ 播放器显示异常: ${dispErr.message}`); }
+ }
+
+ // 强制刷新历史记录（不依赖 isLoadingHistory 标志，确保新生成的视频立即显示）
+ setTimeout(() => {
+ isLoadingHistory = false; // 强制重置状态
+ if (typeof fetchHistory === 'function') fetchHistory(1);
+ }, 500);
+
+ } catch (e) {
+ const errText = e && e.message ? e.message : String(e);
+ addLog(`❌ 渲染中断: ${errText}`);
+ const loader = document.getElementById('loading-txt');
+ if (loader) {
+ loader.style.display = 'flex';
+ loader.textContent = '';
+ const span = document.createElement('span');
+ span.style.cssText = 'color:var(--text-sub);font-size:13px;padding:12px;text-align:center;';
+ span.textContent = `渲染失败：${errText}`;
+ loader.appendChild(span);
+ }
+
+ } finally {
+ // ✅ 无论发生什么，这里一定执行，确保按钮永远可以再次点击
+ _isGeneratingFlag = false;
+ btn.disabled = false;
+ stopProgressPolling();
+ checkStatus();
+ // 生成完毕后自动释放显存（不 await 避免阻塞 UI 解锁）
+ setTimeout(() => { clearGpu(); }, 500);
+ }
+ }
+
+ async function clearGpu() {
+ const btn = document.getElementById('clearGpuBtn');
+ btn.disabled = true;
+ btn.innerText = _t('clearingVram');
+ try {
+ const res = await fetch(`${BASE}/api/system/clear-gpu`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' }
+ });
+ const data = await res.json();
+ if (res.ok) {
+ addLog(`🧹 显存清理成功: ${data.message}`);
+ // 立即触发状态刷新
+ checkStatus();
+ setTimeout(checkStatus, 1000);
+ } else {
+ const errMsg = data.error || data.detail || "后端未实现此接口 (404)";
+ throw new Error(errMsg);
+ }
+ } catch(e) {
+ addLog(`❌ 清理显存失败: ${e.message}`);
+ } finally {
+ btn.disabled = false;
+ btn.innerText = _t('clearVram');
+ }
+ }
+
+ async function listGpus() {
+ try {
+ const res = await fetch(`${BASE}/api/system/list-gpus`);
+ const data = await res.json();
+ if (res.ok && data.gpus) {
+ const selector = document.getElementById('gpu-selector');
+ selector.innerHTML = data.gpus.map(g =>
+ `
+
${item.type === 'video' ? '🎬 VID' : '🎨 IMG'}
+
+ ${media}
+
+
+
${escapeHtmlAttr(_t('batchKfPanelTitle'))}
+
+ ${escapeHtmlAttr(_t('batchTotalDur'))} — ${escapeHtmlAttr(_t('batchTotalSec'))}
+
+
+
${escapeHtmlAttr(_t('batchPanelHint'))}
+
+ ${blocks}
+
+
等待中...
+ `;
+ historyContainer.prepend(loadingCard);
+ }
+
+ // ---- 构建请求 ----
+ let endpoint, payload;
+ if (currentMode === 'image') {
+ const w = parseInt(document.getElementById('img-w').value);
+ const h = parseInt(document.getElementById('img-h').value);
+ endpoint = '/api/generate-image';
+ payload = {
+ prompt, width: w, height: h,
+ numSteps: parseInt(document.getElementById('img-steps').value),
+ numImages: 1
+ };
+ addLog(`正在发起图像渲染: ${w}x${h}, Steps: ${payload.numSteps}`);
+
+ } else if (currentMode === 'video') {
+ const res = updateResPreview();
+ const dur = parseFloat(document.getElementById('vid-duration').value);
+ const fps = document.getElementById('vid-fps').value;
+ if (dur > 20) addLog(_t('warnVideoLong').replace('{n}', String(dur)));
+
+ const audio = document.getElementById('vid-audio').checked ? "true" : "false";
+ const audioPath = document.getElementById('uploaded-audio-path').value;
+ const startFramePathValue = document.getElementById('start-frame-path').value;
+ const endFramePathValue = document.getElementById('end-frame-path').value;
+
+ let finalImagePath = null, finalStartFramePath = null, finalEndFramePath = null;
+ if (startFramePathValue && endFramePathValue) {
+ finalStartFramePath = startFramePathValue;
+ finalEndFramePath = endFramePathValue;
+ } else if (startFramePathValue) {
+ finalImagePath = startFramePathValue;
+ }
+
+ endpoint = '/api/generate';
+ const modelSelect = document.getElementById('vid-model');
+ const loraSelect = document.getElementById('vid-lora');
+ const loraStrengthInput = document.getElementById('lora-strength');
+ const modelPath = modelSelect ? modelSelect.value : '';
+ const loraPath = loraSelect ? loraSelect.value : '';
+ const loraStrength = loraStrengthInput ? (parseFloat(loraStrengthInput.value) || 1.0) : 1.0;
+ console.log("modelPath:", modelPath);
+ console.log("loraPath:", loraPath);
+ console.log("loraStrength:", loraStrength);
+ payload = {
+ prompt, resolution: res, model: "ltx-2",
+ cameraMotion: document.getElementById('vid-motion').value,
+ negativePrompt: "low quality, blurry, noisy, static noise, distorted",
+ duration: String(dur), fps, audio,
+ imagePath: finalImagePath,
+ audioPath: audioPath || null,
+ startFramePath: finalStartFramePath,
+ endFramePath: finalEndFramePath,
+ aspectRatio: document.getElementById('vid-ratio').value,
+ modelPath: modelPath || null,
+ loraPath: loraPath || null,
+ loraStrength: loraStrength,
+ };
+ addLog(`正在发起视频渲染: ${res}, 时长: ${dur}s, FPS: ${fps}, 模型: ${modelPath ? modelPath.split(/[/\\]/).pop() : _t('modelDefaultLabel')}, LoRA: ${loraPath ? loraPath.split(/[/\\]/).pop() : _t('loraNoneLabel')}`);
+
+ } else if (currentMode === 'upscale') {
+ const videoPath = document.getElementById('upscale-video-path').value;
+ const targetRes = document.getElementById('upscale-res').value;
+ if (!videoPath) throw new Error(_t('errUpscaleNoVideo'));
+ endpoint = '/api/system/upscale-video';
+ payload = { video_path: videoPath, resolution: targetRes, prompt: "high quality, detailed, 4k", strength: 0.7 };
+ addLog(`正在发起视频超分: 目标 ${targetRes}`);
+ } else if (currentMode === 'batch') {
+ const res = updateBatchResPreview();
+ const commonPromptEl = document.getElementById('batch-common-prompt');
+ const commonPrompt = commonPromptEl ? commonPromptEl.value : '';
+ const modelSelect = document.getElementById('batch-model');
+ const loraSelect = document.getElementById('batch-lora');
+ const loraStrengthInput = document.getElementById('batch-lora-strength');
+ const modelPath = modelSelect ? modelSelect.value : '';
+ const loraPath = loraSelect ? loraSelect.value : '';
+ const loraStrength = loraStrengthInput ? (parseFloat(loraStrengthInput.value) || 1.2) : 1.2;
+
+ if (batchImages.length < 2) {
+ throw new Error(_t('errBatchMinImages'));
+ }
+
+ if (batchWorkflowIsSingle()) {
+ captureBatchKfTimelineFromDom();
+ const fps = document.getElementById('vid-fps').value;
+ const parts = [prompt.trim(), commonPrompt.trim()].filter(Boolean);
+ const combinedPrompt = parts.join(', ');
+ if (!combinedPrompt) {
+ throw new Error(_t('errSingleKfPrompt'));
+ }
+ const nKf = batchImages.length;
+ const minSeg = 0.1;
+ const segDurs = [];
+ for (let j = 0; j < nKf - 1; j++) {
+ let v = parseFloat(document.getElementById(`batch-kf-seg-dur-${j}`)?.value);
+ if (!Number.isFinite(v) || v < minSeg) v = minSeg;
+ segDurs.push(v);
+ }
+ const sumSec = segDurs.reduce((a, b) => a + b, 0);
+ const dur = Math.max(2, Math.ceil(sumSec - 1e-9));
+ const times = [0];
+ let acc = 0;
+ for (let j = 0; j < nKf - 1; j++) {
+ acc += segDurs[j];
+ times.push(acc);
+ }
+ const strengths = [];
+ for (let i = 0; i < nKf; i++) {
+ const sEl = document.getElementById(`batch-kf-strength-${i}`);
+ let sv = parseFloat(sEl?.value);
+ if (!Number.isFinite(sv)) {
+ sv = parseFloat(defaultKeyframeStrengthForIndex(i, nKf));
+ }
+ if (!Number.isFinite(sv)) sv = 1;
+ sv = Math.max(0.1, Math.min(1.0, sv));
+ strengths.push(sv);
+ }
+ endpoint = '/api/generate';
+ payload = {
+ prompt: combinedPrompt,
+ resolution: res,
+ model: "ltx-2",
+ cameraMotion: document.getElementById('vid-motion').value,
+ negativePrompt: "low quality, blurry, noisy, static noise, distorted",
+ duration: String(dur),
+ fps,
+ audio: "false",
+ imagePath: null,
+ audioPath: null,
+ startFramePath: null,
+ endFramePath: null,
+ keyframePaths: batchImages.map((b) => b.path),
+ keyframeStrengths: strengths,
+ keyframeTimes: times,
+ aspectRatio: document.getElementById('batch-ratio').value,
+ modelPath: modelPath || null,
+ loraPath: loraPath || null,
+ loraStrength: loraStrength,
+ };
+ addLog(
+ `单次多关键帧: ${nKf} 锚点, 轴长合计 ${sumSec.toFixed(1)}s → 请求时长 ${dur}s, ${res}, FPS ${fps}`
+ );
+ } else {
+ const segments = [];
+ for (let i = 0; i < batchImages.length - 1; i++) {
+ const duration = parseFloat(document.getElementById(`batch-segment-duration-${i}`)?.value || 5);
+ const segmentPrompt = document.getElementById(`batch-segment-prompt-${i}`)?.value || '';
+ const segParts = [prompt.trim(), commonPrompt.trim(), segmentPrompt.trim()].filter(Boolean);
+ const combinedSegPrompt = segParts.join(', ');
+ segments.push({
+ startImage: batchImages[i].path,
+ endImage: batchImages[i + 1].path,
+ duration: duration,
+ prompt: combinedSegPrompt
+ });
+ }
+
+ endpoint = '/api/generate-batch';
+ const bgAudioEl = document.getElementById('batch-background-audio-path');
+ const backgroundAudioPath = (bgAudioEl && bgAudioEl.value) ? bgAudioEl.value.trim() : null;
+ payload = {
+ segments: segments,
+ resolution: res,
+ model: "ltx-2",
+ aspectRatio: document.getElementById('batch-ratio').value,
+ modelPath: modelPath || null,
+ loraPath: loraPath || null,
+ loraStrength: loraStrength,
+ negativePrompt: "low quality, blurry, noisy, static noise, distorted",
+ backgroundAudioPath: backgroundAudioPath || null
+ };
+ addLog(`分段拼接: ${segments.length} 段, ${res}${backgroundAudioPath ? '，含统一配乐' : ''}`);
+ }
+ }
+
+ // ---- 发送请求 ----
+ const res = await fetch(BASE + endpoint, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(payload)
+ });
+ const data = await res.json();
+ if (!res.ok) {
+ const errMsg = data.error || data.detail || "API 拒绝了请求";
+ throw new Error(typeof errMsg === 'string' ? errMsg : JSON.stringify(errMsg));
+ }
+
+ // ---- 显示结果 ----
+ const rawPath = data.image_paths ? data.image_paths[0] : data.video_path;
+ if (rawPath) {
+ try { displayOutput(rawPath); } catch (dispErr) { addLog(`⚠️ 播放器显示异常: ${dispErr.message}`); }
+ }
+
+ // 强制刷新历史记录（不依赖 isLoadingHistory 标志，确保新生成的视频立即显示）
+ setTimeout(() => {
+ isLoadingHistory = false; // 强制重置状态
+ if (typeof fetchHistory === 'function') fetchHistory(1);
+ }, 500);
+
+ } catch (e) {
+ const errText = e && e.message ? e.message : String(e);
+ addLog(`❌ 渲染中断: ${errText}`);
+ const loader = document.getElementById('loading-txt');
+ if (loader) {
+ loader.style.display = 'flex';
+ loader.textContent = '';
+ const span = document.createElement('span');
+ span.style.cssText = 'color:var(--text-sub);font-size:13px;padding:12px;text-align:center;';
+ span.textContent = `渲染失败：${errText}`;
+ loader.appendChild(span);
+ }
+
+ } finally {
+ // ✅ 无论发生什么，这里一定执行，确保按钮永远可以再次点击
+ _isGeneratingFlag = false;
+ btn.disabled = false;
+ stopProgressPolling();
+ checkStatus();
+ // 生成完毕后自动释放显存（不 await 避免阻塞 UI 解锁）
+ setTimeout(() => { clearGpu(); }, 500);
+ }
+ }
+
+ async function clearGpu() {
+ const btn = document.getElementById('clearGpuBtn');
+ btn.disabled = true;
+ btn.innerText = _t('clearingVram');
+ try {
+ const res = await fetch(`${BASE}/api/system/clear-gpu`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' }
+ });
+ const data = await res.json();
+ if (res.ok) {
+ addLog(`🧹 显存清理成功: ${data.message}`);
+ // 立即触发状态刷新
+ checkStatus();
+ setTimeout(checkStatus, 1000);
+ } else {
+ const errMsg = data.error || data.detail || "后端未实现此接口 (404)";
+ throw new Error(errMsg);
+ }
+ } catch(e) {
+ addLog(`❌ 清理显存失败: ${e.message}`);
+ } finally {
+ btn.disabled = false;
+ btn.innerText = _t('clearVram');
+ }
+ }
+
+ async function listGpus() {
+ try {
+ const res = await fetch(`${BASE}/api/system/list-gpus`);
+ const data = await res.json();
+ if (res.ok && data.gpus) {
+ const selector = document.getElementById('gpu-selector');
+ selector.innerHTML = data.gpus.map(g =>
+ `
+
${item.type === 'video' ? '🎬 VID' : '🎨 IMG'}
+
+ ${media}
+