@@ -835,29 +1639,96 @@
-
-
-
- ![]()
-
![]()
thumbnail over file://, so the backend
+ // writes a sibling ".jpg" poster. Map a video URL → its poster URL
+ // (preserving the ?t= cache-buster). Non-video URLs pass through unchanged.
+ function posterFor(url) {
+ if (!url) return url;
+ const q = url.indexOf('?');
+ const path = q === -1 ? url : url.slice(0, q);
+ const qs = q === -1 ? '' : url.slice(q);
+ if (!/\.(mp4|mov|webm|avi|mkv)$/i.test(path)) return url;
+ return path.replace(/\.[^.]+$/, '.jpg') + qs;
+ }
// Auto-refresh interval in seconds (default: 120 = 2 minutes)
let REFRESH_INTERVAL = 120;
@@ -1155,10 +2041,22 @@
let filePoses = {}; // filename → pose name
let filePrompts = {}; // filename → generation prompt
let fileHidden = {}; // filename → boolean (hidden from cycling)
- let fileHasBg = {}; // filename → boolean (has background, default true)
- let fileSourceRefs = {}; // filename → array of source filenames
- let fileHasClothing = {}; // filename → boolean|null (null = unknown)
- let privacyMode = localStorage.getItem('privacyMode') === 'true';
+ let fileHasBg = {}; // filename → boolean (has background, default true)
+ let fileSourceRefs = {}; // filename → array of source filenames
+ let fileHasClothing = {}; // filename → boolean|null (null = unknown)
+ let fileContentType = {}; // filename → 'image'|'video'
+ let fileFaceswapSrcVideo = {}; // filename → source video name
+ let privacyMode = localStorage.getItem('privacyMode') === 'true';
+
+ // ---- faceswap state ----
+ let _fsModelFilename = null; // model image selected for faceswap
+ let _fsSelectedVideo = null; // chosen template video name
+ let _fsJobId = null;
+ let _fsJobPollTimer = null;
+ let availableVideos = []; // populated from /videos
+ let _fsActiveTab = 'swap';
+ let _fsSelectedPoses = new Set();
+ let _fsTrimVideo = null;
function escHtml(s) {
return String(s).replace(/&/g,'&').replace(//g,'>').replace(/"/g,'"');
@@ -1226,47 +2124,75 @@
cycleTimers.set(base, id);
}
- // --- lightbox ---
+ // --- studio view (replaces lightbox) ---
let lbUrls = [], lbNames = [], lbIdx = 0;
+ let _activeSidebarTab = localStorage.getItem('studioSidebarTab') || 'info';
- function openLightbox(gid, startIdx) {
+ function openLightbox(gid, startIdx) { // kept for compat
+ openStudio(gid, startIdx);
+ }
+ function closeLightbox() { closeStudio(); }
+
+ function openStudio(gid, startIdx) {
const data = groupData.get(gid);
if (!data) return;
lbCurrentGid = gid;
lbUrls = data.urls;
lbNames = data.names;
lbIdx = startIdx !== undefined ? startIdx : (cycleIdx.get(gid) || 0);
- updateLightbox();
- document.getElementById('lightbox').classList.add('open');
+ updateStudio();
+ document.getElementById('studio').classList.add('open');
+ // Restore sidebar state
+ const sidebar = document.getElementById('studioSidebar');
+ const btn = document.getElementById('sidebarInnerToggle');
+ const wasCollapsed = localStorage.getItem('studioSidebarCollapsed') === '1';
+ sidebar.classList.toggle('collapsed', wasCollapsed);
+ if (btn) btn.textContent = wasCollapsed ? '⊞' : '⊟';
+ // Render current tab
+ switchSidebarTab(_activeSidebarTab, true);
}
- function closeLightbox() {
- document.getElementById('lightbox').classList.remove('open');
+ function closeStudio() {
+ document.getElementById('studio').classList.remove('open');
}
function lbNav(dir) {
lbIdx = (lbIdx + dir + lbUrls.length) % lbUrls.length;
- updateLightbox();
+ updateStudio();
}
function lbNavTo(idx) {
lbIdx = idx;
- updateLightbox();
+ updateStudio();
}
- function updateLightbox() {
- document.getElementById('lbImg').src = lbUrls[lbIdx];
+ function updateStudio() {
const fname = lbNames[lbIdx];
+ _fsModelFilename = fname; // keep faceswap/scenery/segment in sync
+ const isVid = isVideo(fname) || fileContentType[fname] === 'video';
+ const lbImgEl = document.getElementById('lbImg');
+ const lbVideoEl = document.getElementById('lbVideo');
+ if (isVid) {
+ lbImgEl.style.display = 'none';
+ lbVideoEl.style.display = '';
+ lbVideoEl.poster = posterFor(lbUrls[lbIdx]);
+ lbVideoEl.src = lbUrls[lbIdx];
+ } else {
+ lbVideoEl.style.display = 'none';
+ lbVideoEl.src = '';
+ lbImgEl.style.display = '';
+ lbImgEl.classList.remove('zoomed');
+ lbImgEl.src = lbUrls[lbIdx];
+ }
const groupNameInput = document.getElementById('lbGroupNameInput');
groupNameInput.value = groupNames[lbCurrentGid] || '';
- groupNameInput.placeholder = 'Group name…';
const nameInput = document.getElementById('lbNameInput');
- nameInput.value = imageNames[fname] || '';
- nameInput.placeholder = fname;
+ if (nameInput) { nameInput.value = imageNames[fname] || ''; nameInput.placeholder = fname; }
- document.getElementById('lbClipDesc').textContent = clipDescriptions[fname] || '';
+ const clipEl = document.getElementById('lbClipDesc');
+ if (clipEl) clipEl.textContent = clipDescriptions[fname] || '';
const pose = filePoses[fname];
const poseTag = document.getElementById('lbPoseTag');
@@ -1274,61 +2200,72 @@
else { poseTag.style.display = 'none'; }
const hidden = !!fileHidden[fname];
- const lb = document.getElementById('lightbox');
- lb.classList.toggle('img-hidden', hidden);
- document.getElementById('lbEyeBtn').textContent = hidden ? '🚫' : '👁';
- document.getElementById('lbEyeBtn').title = hidden ? 'Show in cycling' : 'Hide from cycling';
+ const studio = document.getElementById('studio');
+ studio.classList.toggle('st-hidden', hidden);
+ const eyeBtn = document.getElementById('lbEyeBtn');
+ if (eyeBtn) { eyeBtn.textContent = hidden ? '🚫 Hidden' : '👁 Visibility'; eyeBtn.title = hidden ? 'Show in cycling' : 'Hide from cycling'; }
- // No BG button — hide when image already has no background
- document.getElementById('lbNoBgBtn').style.display = fileHasBg[fname] !== false ? '' : 'none';
- document.getElementById('lbUndressBtn').style.display = fileHasClothing[fname] === true ? '' : 'none';
+ const noBgBtn = document.getElementById('lbNoBgBtn');
+ const undressBtn = document.getElementById('lbUndressBtn');
+ const faceswapBtn = document.getElementById('lbFaceswapBtn');
+ if (noBgBtn) noBgBtn.style.display = (!isVid && fileHasBg[fname] !== false) ? '' : 'none';
+ if (undressBtn) undressBtn.style.display = (!isVid && fileHasClothing[fname] === true) ? '' : 'none';
+ if (faceswapBtn)faceswapBtn.style.display = !isVid ? '' : 'none';
- // Source refs — show small clickable thumbnails
+ // Source refs
const refs = fileSourceRefs[fname];
const refsDiv = document.getElementById('lbSourceRefs');
- if (refs && refs.length > 0) {
- refsDiv.style.display = 'flex';
- refsDiv.innerHTML = `ref:` +
- refs.map(r => `
`).join('');
- } else {
- refsDiv.style.display = 'none';
+ if (refsDiv) {
+ if (refs && refs.length > 0) {
+ refsDiv.style.display = 'flex';
+ refsDiv.innerHTML = refs.map(r =>
+ ``
+ ).join('');
+ } else {
+ refsDiv.style.display = 'none';
+ }
}
+ // Download link
+ const dlBtn = document.getElementById('lbDownloadBtn');
+ if (dlBtn) { dlBtn.href = lbUrls[lbIdx]; dlBtn.setAttribute('download', fname); }
+
const multi = lbUrls.length > 1;
- document.getElementById('lbCounter').textContent = multi ? `${lbIdx + 1} / ${lbUrls.length}` : '';
- document.getElementById('lbPrev').style.display = multi ? '' : 'none';
- document.getElementById('lbNext').style.display = multi ? '' : 'none';
- document.getElementById('lbExtract').style.display= multi ? '' : 'none';
- document.getElementById('lbMoveUp').style.display = multi ? '' : 'none';
- document.getElementById('lbMoveDown').style.display= multi ? '' : 'none';
- // ★ Preferred — shown when not already the first image
+ document.getElementById('lbCounter').textContent = multi ? `${lbIdx + 1} / ${lbUrls.length}` : '';
+ const prevBtn = document.getElementById('lbPrev');
+ const nextBtn = document.getElementById('lbNext');
+ if (prevBtn) prevBtn.style.visibility = multi ? '' : 'hidden';
+ if (nextBtn) nextBtn.style.visibility = multi ? '' : 'hidden';
+ const extractBtn = document.getElementById('lbExtract');
+ if (extractBtn) extractBtn.style.display = multi ? '' : 'none';
+ const moveUp = document.getElementById('lbMoveUp');
+ const moveDown = document.getElementById('lbMoveDown');
+ if (moveUp) moveUp.style.display = multi ? '' : 'none';
+ if (moveDown) moveDown.style.display = multi ? '' : 'none';
const prefBtn = document.getElementById('lbPreferredBtn');
- prefBtn.style.display = multi && lbIdx > 0 ? '' : 'none';
+ if (prefBtn) prefBtn.style.display = multi && lbIdx > 0 ? '' : 'none';
- // Variant strip — thumbnails + pose labels for every image in the group
+ // Film strip
const strip = document.getElementById('lbVariantStrip');
- if (multi) {
- strip.style.display = 'flex';
- strip.innerHTML = lbUrls.map((url, i) => {
- const n = lbNames[i];
- const pose = filePoses[n] || '';
- const act = i === lbIdx ? ' active' : '';
- return '
`;
return `
Hidden from preview
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
@@ -880,6 +1751,8 @@
+
+
+
+
+
+
+
+
+
+
+
+
+ ![]()
+
+
+
+ Hidden from preview
+ Select reference image
@@ -1132,8 +2005,21 @@
];
// --- HYDRATION_END ---
- // Supported image extensions
- const EXTENSIONS = ['.jpg', '.jpeg', '.png', '.gif', '.webp', '.bmp', '.svg'];
+ // Supported extensions
+ const EXTENSIONS = ['.jpg', '.jpeg', '.png', '.gif', '.webp', '.bmp', '.svg', '.mp4', '.mov', '.webm'];
+ const VIDEO_EXTENSIONS = new Set(['.mp4', '.mov', '.webm', '.avi', '.mkv']);
+ function isVideo(name) { return VIDEO_EXTENSIONS.has((name.split('.').pop() ? '.'+name.split('.').pop().toLowerCase() : '')); }
+ // Videos can't render as an '
- + '
'
- + (pose ? '
';
- }).join('');
- // Scroll active thumb into view
- const active = strip.querySelector('.lb-var-thumb.active');
- if (active) active.scrollIntoView({ block: 'nearest', inline: 'center' });
- } else {
- strip.style.display = 'none';
- }
+ strip.innerHTML = lbUrls.map((url, i) => {
+ const n = lbNames[i];
+ const pose = filePoses[n] || '';
+ const act = i === lbIdx ? ' active' : '';
+ const thumbSrc = isVideo(n) ? posterFor(url) : url;
+ return '' + escHtml(pose) + '
' : '')
- + ''
+ + '
'
+ + (isVideo(n) ? '
';
+ }).join('');
+ const active = strip.querySelector('.lb-var-thumb.active');
+ if (active) active.scrollIntoView({ block: 'nearest', inline: 'center' });
}
+ // Alias for old callsites
+ function updateLightbox() { updateStudio(); }
+
async function updateName() {
const fname = lbNames[lbIdx];
const newName = document.getElementById('lbNameInput').value;
@@ -1655,10 +2592,12 @@
if (img.pose) filePoses[img.filename] = img.pose;
if (img.prompt) filePrompts[img.filename] = img.prompt;
if (img.group_name && img.group_id) groupNames[img.group_id] = img.group_name;
- fileSortOrders[img.filename] = img.sort_order ?? null;
- fileHidden[img.filename] = !!img.hidden;
- fileHasBg[img.filename] = img.has_background !== false;
- fileHasClothing[img.filename] = img.has_clothing ?? null;
+ fileSortOrders[img.filename] = img.sort_order ?? null;
+ fileHidden[img.filename] = !!img.hidden;
+ fileHasBg[img.filename] = img.has_background !== false;
+ fileHasClothing[img.filename] = img.has_clothing ?? null;
+ fileContentType[img.filename] = img.content_type || 'image';
+ fileFaceswapSrcVideo[img.filename]= img.faceswap_source_video || null;
if (img.source_refs) {
try { fileSourceRefs[img.filename] = JSON.parse(img.source_refs); } catch(e) {}
}
@@ -1689,6 +2628,9 @@
if (availablePoses && Object.keys(availablePoses).length === 0) {
loadPoses();
}
+ if (!availableVideos.length) {
+ loadTemplateVideos();
+ }
if (fileObjects.length === 0) {
// Only show "no images" if gallery is currently empty (avoid flash on slow API)
@@ -1739,16 +2681,28 @@
const label = groupDisplayName(group);
const safeGid = gid.replace(/"/g, '"');
const poses = [...new Set(gf.map(f => filePoses[f.cleanName]).filter(Boolean))];
- const firstVisUrl = visibleIdx.length ? urls[visibleIdx[0]] : urls[0];
+ const firstVisUrl = visibleIdx.length ? urls[visibleIdx[0]] : urls[0];
+ const firstVisName = visibleIdx.length ? names[visibleIdx[0]] : names[0];
+ const isVideoCard = isVideo(firstVisName) || fileContentType[firstVisName] === 'video';
+ const isFaceswap = !!fileFaceswapSrcVideo[firstVisName];
+
+ const mediaEl = isVideoCard
+ ? `
+ `
+ : `▶
' : '')
+ + (pose ? '' + escHtml(pose) + '
' : '')
+ + '
-
`;
@@ -1883,7 +2838,7 @@
: '';
return ``;
}).join('');
@@ -2247,12 +3202,11 @@
// Privacy mode init — apply stored state on load
(function applyPrivacyInit() {
const btn = document.getElementById('privacyBtn');
- if (privacyMode) btn.textContent = '🔒';
+ if (privacyMode) { btn.textContent = '🔒'; document.title = PRIV_TITLE; }
})();
- // Lightbox + variant picker + select-mode keyboard nav
+ // Studio + variant picker + select-mode keyboard nav
document.addEventListener('keydown', e => {
- // P — toggle privacy mode (only when no text input focused)
const tag = document.activeElement && document.activeElement.tagName;
if ((e.key === 'p' || e.key === 'P') && tag !== 'INPUT' && tag !== 'TEXTAREA') {
togglePrivacyMode(); return;
@@ -2261,27 +3215,51 @@
if (document.getElementById('variantPicker').classList.contains('open')) {
closeVariantPicker(); return;
}
- if (document.getElementById('lightbox').classList.contains('open')) {
- closeLightbox(); return;
+ if (document.getElementById('studio').classList.contains('open')) {
+ closeStudio(); return;
}
if (selectionMode) {
toggleSelectMode(); return;
}
}
- if (!document.getElementById('lightbox').classList.contains('open')) return;
- if (e.key === 'ArrowLeft') lbNav(-1);
- if (e.key === 'ArrowRight') lbNav(1);
+ if (!document.getElementById('studio').classList.contains('open')) return;
+ if (tag === 'INPUT' || tag === 'TEXTAREA') return;
+ if (e.key === 'ArrowLeft') { lbNav(-1); e.preventDefault(); }
+ if (e.key === 'ArrowRight') { lbNav(1); e.preventDefault(); }
+ if (e.key === ' ') {
+ const vid = document.getElementById('lbVideo');
+ if (vid && vid.style.display !== 'none') {
+ vid.paused ? vid.play() : vid.pause();
+ e.preventDefault();
+ }
+ }
+ if ((e.key === 'h' || e.key === 'H') && tag !== 'INPUT') { lbToggleHidden(); }
});
});
- // Privacy overlay — show on any focus loss; requires explicit dismiss (click overlay or P)
- window.addEventListener('blur', () => {
- if (privacyMode) document.getElementById('privacyOverlay').style.display = 'flex';
- });
+ // Privacy overlay — disguise the page as a study-chat on any focus loss.
+ const PRIV_TITLE = 'AI Image Processing Assistant';
+ const REAL_TITLE = document.title; // "Studio Monitor"
+
+ function showPrivacyOverlay() {
+ const ov = document.getElementById('privacyOverlay');
+ ov.style.display = 'flex';
+ // Force a synchronous layout+style flush so the disguise is painted
+ // BEFORE the window manager grabs the minimize thumbnail — otherwise
+ // the first minimize leaks the real content. Text-only overlay = no
+ // async asset loads to wait on.
+ void ov.offsetHeight;
+ document.title = PRIV_TITLE;
+ }
+
+ // blur fires before the minimize snapshot in every browser we target, so
+ // this is the line of defense for the taskbar thumbnail.
+ window.addEventListener('blur', () => { if (privacyMode) showPrivacyOverlay(); });
+ window.addEventListener('pagehide', () => { if (privacyMode) showPrivacyOverlay(); });
document.addEventListener('visibilitychange', () => {
if (document.hidden) {
- if (privacyMode) document.getElementById('privacyOverlay').style.display = 'flex';
+ if (privacyMode) showPrivacyOverlay();
} else {
// Don't auto-hide — user must click overlay or press P to dismiss
loadImages();
@@ -2293,10 +3271,16 @@
localStorage.setItem('privacyMode', privacyMode);
const btn = document.getElementById('privacyBtn');
btn.textContent = privacyMode ? '🔒' : '🔓';
- if (!privacyMode) document.getElementById('privacyOverlay').style.display = 'none';
+ if (privacyMode) {
+ document.title = PRIV_TITLE; // keep the taskbar label discreet even while active
+ } else {
+ document.title = REAL_TITLE;
+ document.getElementById('privacyOverlay').style.display = 'none';
+ }
}
function disablePrivacyOverlay() {
+ // Resume work, but privacy mode stays armed — keep the title discreet.
document.getElementById('privacyOverlay').style.display = 'none';
}
@@ -2342,22 +3326,708 @@
}
}
+ // ---- sidebar & studio ----
+
+ function toggleSidebar() {
+ const sidebar = document.getElementById('studioSidebar');
+ const btn = document.getElementById('sidebarInnerToggle');
+ const collapsed = sidebar.classList.toggle('collapsed');
+ if (btn) btn.textContent = collapsed ? '⊞' : '⊟';
+ localStorage.setItem('studioSidebarCollapsed', collapsed ? '1' : '0');
+ }
+
+ function switchSidebarTab(tab, initial) {
+ _activeSidebarTab = tab;
+ localStorage.setItem('studioSidebarTab', tab);
+ document.querySelectorAll('#studioSidebar .sb-tab').forEach(t =>
+ t.classList.toggle('active', t.dataset.tab === tab)
+ );
+ const panelId = 'sbPanel' + tab.charAt(0).toUpperCase() + tab.slice(1);
+ document.querySelectorAll('#studioSidebar .sb-panel').forEach(p =>
+ p.classList.toggle('active', p.id === panelId)
+ );
+ if (tab === 'generate') renderSidebarGenerate();
+ if (tab === 'faceswap') renderSidebarFaceswap();
+ if (tab === 'scenery') renderSidebarScenery();
+ if (tab === 'segment') renderSidebarSegment();
+ }
+
+ function toggleImageZoom() {
+ document.getElementById('lbImg')?.classList.toggle('zoomed');
+ }
+
+ // ---- sidebar panels ----
+
+ function renderSidebarGenerate() {
+ const panel = document.getElementById('sbPanelGenerate');
+ if (!panel) return;
+ const donePoses = new Set();
+ const gData = groupData.get(lbCurrentGid);
+ if (gData) gData.names.forEach(n => { if (filePoses[n]) donePoses.add(filePoses[n]); });
+
+ let html = 'Live Image Monitor
+ Studio Monitor
![]()
thumbnail over file://, so the backend
+ // writes a sibling ".jpg" poster. Map a video URL → its poster URL
+ // (preserving the ?t= cache-buster). Non-video URLs pass through unchanged.
+ function posterFor(url) {
+ if (!url) return url;
+ const q = url.indexOf('?');
+ const path = q === -1 ? url : url.slice(0, q);
+ const qs = q === -1 ? '' : url.slice(q);
+ if (!/\.(mp4|mov|webm|avi|mkv)$/i.test(path)) return url;
+ return path.replace(/\.[^.]+$/, '.jpg') + qs;
+ }
// Auto-refresh interval in seconds (default: 120 = 2 minutes)
let REFRESH_INTERVAL = 120;
@@ -1066,9 +1740,26 @@
let filePoses = {}; // filename → pose name
let filePrompts = {}; // filename → generation prompt
let fileHidden = {}; // filename → boolean (hidden from cycling)
- let fileHasBg = {}; // filename → boolean (has background, default true)
- let fileSourceRefs = {}; // filename → array of source filenames
- let privacyMode = localStorage.getItem('privacyMode') === 'true';
+ let fileHasBg = {}; // filename → boolean (has background, default true)
+ let fileSourceRefs = {}; // filename → array of source filenames
+ let fileHasClothing = {}; // filename → boolean|null (null = unknown)
+ let fileContentType = {}; // filename → 'image'|'video'
+ let fileFaceswapSrcVideo = {}; // filename → source video name
+ let privacyMode = localStorage.getItem('privacyMode') === 'true';
+
+ // ---- faceswap state ----
+ let _fsModelFilename = null; // model image selected for faceswap
+ let _fsSelectedVideo = null; // chosen template video name
+ let _fsJobId = null;
+ let _fsJobPollTimer = null;
+ let availableVideos = []; // populated from /videos
+ let _fsActiveTab = 'swap';
+ let _fsSelectedPoses = new Set();
+ let _fsTrimVideo = null;
+
+ function escHtml(s) {
+ return String(s).replace(/&/g,'&').replace(//g,'>').replace(/"/g,'"');
+ }
function getBaseName(name) {
return name.replace(/^(\d{8}_\d{6}_)+/, '');
@@ -1155,9 +1846,27 @@
updateLightbox();
}
+ function lbNavTo(idx) {
+ lbIdx = idx;
+ updateLightbox();
+ }
+
function updateLightbox() {
- document.getElementById('lbImg').src = lbUrls[lbIdx];
const fname = lbNames[lbIdx];
+ const isVid = isVideo(fname) || fileContentType[fname] === 'video';
+ const lbImgEl = document.getElementById('lbImg');
+ const lbVideoEl = document.getElementById('lbVideo');
+ if (isVid) {
+ lbImgEl.style.display = 'none';
+ lbVideoEl.style.display = '';
+ lbVideoEl.poster = posterFor(lbUrls[lbIdx]);
+ lbVideoEl.src = lbUrls[lbIdx];
+ } else {
+ lbVideoEl.style.display = 'none';
+ lbVideoEl.src = '';
+ lbImgEl.style.display = '';
+ lbImgEl.src = lbUrls[lbIdx];
+ }
const groupNameInput = document.getElementById('lbGroupNameInput');
groupNameInput.value = groupNames[lbCurrentGid] || '';
@@ -1180,8 +1889,10 @@
document.getElementById('lbEyeBtn').textContent = hidden ? '🚫' : '👁';
document.getElementById('lbEyeBtn').title = hidden ? 'Show in cycling' : 'Hide from cycling';
- // No BG button — hide when image already has no background
- document.getElementById('lbNoBgBtn').style.display = fileHasBg[fname] !== false ? '' : 'none';
+ // No BG / Undress / Faceswap — hide for video items
+ document.getElementById('lbNoBgBtn').style.display = (!isVid && fileHasBg[fname] !== false) ? '' : 'none';
+ document.getElementById('lbUndressBtn').style.display = (!isVid && fileHasClothing[fname] === true) ? '' : 'none';
+ document.getElementById('lbFaceswapBtn').style.display = !isVid ? '' : 'none';
// Source refs — show small clickable thumbnails
const refs = fileSourceRefs[fname];
@@ -1207,6 +1918,28 @@
// ★ Preferred — shown when not already the first image
const prefBtn = document.getElementById('lbPreferredBtn');
prefBtn.style.display = multi && lbIdx > 0 ? '' : 'none';
+
+ // Variant strip — thumbnails + pose labels for every image in the group
+ const strip = document.getElementById('lbVariantStrip');
+ if (multi) {
+ strip.style.display = 'flex';
+ strip.innerHTML = lbUrls.map((url, i) => {
+ const n = lbNames[i];
+ const pose = filePoses[n] || '';
+ const act = i === lbIdx ? ' active' : '';
+ const thumbSrc = isVideo(n) ? posterFor(url) : url;
+ return '`;
return `
+ ${!isVideoCard ? `
` : ''}
-
+ Poses
';
+ if (!availablePoses || Object.keys(availablePoses).length === 0) {
+ html += '
+
+ No poses loaded
';
+ } else {
+ html += Object.entries(availablePoses).map(([name, entry]) => {
+ let cls = 'sb-pose-btn';
+ if (donePoses.has(name)) cls += ' done';
+ if (_fsSelectedPoses.has(name)) cls += ' selected';
+ if (entry?.beta) cls += ' beta';
+ const nSafe = name.replace(/'/g, "\\'");
+ const tip = String(entry?.text ?? entry).replace(/"/g,'"');
+ return ``;
+ }).join('');
+ }
+ html += `Custom prompt
+
+
+
+
+
`;
+ panel.innerHTML = html;
+ updateSbGenBtn();
+ }
+
+ function toggleSbPose(name) {
+ if (_fsSelectedPoses.has(name)) _fsSelectedPoses.delete(name);
+ else _fsSelectedPoses.add(name);
+ renderSidebarGenerate();
+ }
+
+ function updateSbGenBtn() {
+ const btn = document.getElementById('sbGenBtn');
+ if (!btn) return;
+ const hasPrompt = (document.getElementById('sbGenPromptInput')?.value || '').trim().length > 0;
+ btn.disabled = _fsSelectedPoses.size === 0 && !hasPrompt;
+ const n = _fsSelectedPoses.size + (hasPrompt ? 1 : 0);
+ btn.textContent = n > 1 ? `Generate (${n})` : 'Generate';
+ }
+
+ async function submitSbGenerate() {
+ if (!_fsModelFilename) return;
+ const promptVal = (document.getElementById('sbGenPromptInput')?.value || '').trim();
+ const prompts = [], poses = [];
+ _fsSelectedPoses.forEach(name => {
+ poses.push(name);
+ prompts.push(availablePoses[name]?.text ?? availablePoses[name] ?? name);
+ });
+ if (promptVal) { prompts.push(promptVal); poses.push(null); }
+ if (prompts.length === 0) return;
+ const btn = document.getElementById('sbGenBtn');
+ btn.disabled = true; btn.textContent = 'Submitting…';
+ const statusEl = document.getElementById('sbGenJobStatus');
+ const textEl = document.getElementById('sbGenJobText');
+ statusEl.style.display = 'inline-flex';
+ textEl.textContent = `Queuing ${prompts.length} task(s)…`;
+ try {
+ const r = await fetch(`${API}/batch`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ filenames: [_fsModelFilename], prompt: prompts,
+ poses, seed: -1, max_area: 0, group_id: lbCurrentGid
+ }),
+ });
+ if (!r.ok) {
+ textEl.textContent = `Error: ${await r.text()}`;
+ btn.disabled = false; btn.textContent = 'Retry'; return;
+ }
+ const { job_id, total } = await r.json();
+ showToast(`Generating ${total} image${total !== 1 ? 's' : ''}…`, 'info');
+ textEl.textContent = `Generating… 0/${total}`;
+ const pollGen = () => {
+ clearTimeout(_fsJobPollTimer);
+ _fsJobPollTimer = setTimeout(async () => {
+ try {
+ const jr = await fetch(`${API}/batch/${job_id}`);
+ if (!jr.ok) { pollGen(); return; }
+ const job = await jr.json();
+ textEl.textContent = `Generating… ${job.done + job.failed}/${total}`;
+ if (job.status === 'running') { pollGen(); return; }
+ if (job.status === 'done') {
+ showToast('Generation complete!', 'success');
+ statusEl.style.display = 'none';
+ btn.disabled = false; btn.textContent = 'Generate';
+ _fsSelectedPoses.clear();
+ refreshNow();
+ } else {
+ textEl.textContent = `Error: ${job.error || 'unknown'}`;
+ btn.disabled = false; btn.textContent = 'Retry';
+ }
+ } catch (e) { pollGen(); }
+ }, 2500);
+ };
+ pollGen();
+ } catch (e) {
+ textEl.textContent = `API error: ${e}`;
+ btn.disabled = false; btn.textContent = 'Retry';
+ }
+ }
+
+ // ---- faceswap sidebar tab ----
+
+ async function loadTemplateVideos() {
+ try {
+ const r = await fetch(`${API}/videos`);
+ if (!r.ok) return;
+ availableVideos = (await r.json()).videos || [];
+ } catch (_) { availableVideos = []; }
+ }
+
+ async function lbFaceswap() {
+ const data = groupData.get(lbCurrentGid);
+ if (!data) return;
+ _fsModelFilename = data.names[lbIdx];
+ _fsSelectedVideo = null;
+ if (!availableVideos.length) await loadTemplateVideos();
+ switchSidebarTab('faceswap');
+ // Expand sidebar if collapsed
+ document.getElementById('studioSidebar')?.classList.remove('collapsed');
+ document.getElementById('sidebarInnerToggle').textContent = '⊟';
+ }
+
+ function renderSidebarFaceswap() {
+ const panel = document.getElementById('sbPanelFaceswap');
+ if (!panel) return;
+
+ if (_fsTrimVideo) {
+ // Clip timeline view
+ const vSafe = _fsTrimVideo.replace(/'/g, "\\'");
+ panel.innerHTML = `
+ ✂ ${escHtml(_fsTrimVideo)}
+
+
+
`;
+ requestAnimationFrame(() => initClipTimeline());
+ return;
+ }
+
+ // Template grid view
+ let html = '
+
+
+
+
+
+
+
+ 0:00
+ 0:00
+
+
+
+
+
+
+
+
+ Template videos
';
+ if (!availableVideos.length) {
+ html += 'No wireframe videos found
';
+ } else {
+ html += '';
+ availableVideos.forEach(v => {
+ const stem = v.replace(/\.[^.]+$/, '');
+ const vSafe = v.replace(/'/g, "\\'");
+ const sel = _fsSelectedVideo === v ? ' selected' : '';
+ html += `
';
+ }
+ html += `
+
+
+
`;
+ });
+ html += '${escHtml(stem)}
+
+
+
+
+
+
+
+
+
`;
+
+ panel.innerHTML = html;
+ requestAnimationFrame(() => {
+ panel.querySelectorAll('.sb-template-card video').forEach(v => v.play().catch(()=>{}));
+ });
+ // Check FaceFusion availability
+ fetch(`${API}/faceswap/check`).then(r => r.json()).then(s => {
+ const hairCb = document.getElementById('sbFsHair');
+ const hairBdg = document.getElementById('sbFsHairBadge');
+ if (!hairCb) return;
+ if (s.facefusion) { hairCb.disabled = false; hairBdg.style.display = 'none'; }
+ else { hairCb.disabled = true; hairBdg.style.display = ''; }
+ }).catch(()=>{});
+ }
+
+ function sbSelectTemplate(videoName) {
+ _fsSelectedVideo = videoName;
+ renderSidebarFaceswap();
+ }
+
+ function openTrimPanel(videoName) {
+ _fsTrimVideo = videoName;
+ renderSidebarFaceswap();
+ }
+
+ function closeTrimPanel() {
+ _fsTrimVideo = null;
+ renderSidebarFaceswap();
+ }
+
+ async function submitFaceswap() {
+ if (!_fsModelFilename || !_fsSelectedVideo) return;
+ const enhance = document.getElementById('sbFsEnhance')?.checked ?? true;
+ const hairEl = document.getElementById('sbFsHair');
+ const hair = (hairEl?.checked && !hairEl?.disabled) ?? false;
+ const btn = document.getElementById('sbFsStartBtn');
+ if (btn) { btn.disabled = true; btn.textContent = 'Starting…'; }
+ const statusEl = document.getElementById('sbFsJobStatus');
+ const textEl = document.getElementById('sbFsJobText');
+ if (statusEl) statusEl.style.display = 'inline-flex';
+ const modeLabel = hair ? 'FaceFusion + hair' : (enhance ? 'insightface + enhance' : 'insightface');
+ if (textEl) textEl.textContent = `Starting (${modeLabel})…`;
+ try {
+ const r = await fetch(`${API}/faceswap`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ model_filename: _fsModelFilename, video_name: _fsSelectedVideo, enhance, hair }),
+ });
+ if (!r.ok) {
+ if (textEl) textEl.textContent = `Error: ${await r.text()}`;
+ if (btn) { btn.disabled = false; btn.textContent = 'Start Faceswap'; }
+ return;
+ }
+ const { job_id } = await r.json();
+ _fsJobId = job_id;
+ showToast(`Faceswap started (${_fsSelectedVideo})`, 'info');
+ pollFaceswapJob(job_id);
+ } catch (e) {
+ if (textEl) textEl.textContent = `API error: ${e}`;
+ if (btn) { btn.disabled = false; btn.textContent = 'Start Faceswap'; }
+ }
+ }
+
+ function pollFaceswapJob(job_id) {
+ clearTimeout(_fsJobPollTimer);
+ _fsJobPollTimer = setTimeout(async () => {
+ try {
+ const r = await fetch(`${API}/batch/${job_id}`);
+ if (!r.ok) { pollFaceswapJob(job_id); return; }
+ const job = await r.json();
+ const pct = job.total > 1 ? ` ${job.done}/${job.total} frames` : '';
+ const textEl = document.getElementById('sbFsJobText');
+ const btn = document.getElementById('sbFsStartBtn');
+ if (job.status === 'running') {
+ if (textEl) textEl.textContent = `Processing${pct}…`;
+ pollFaceswapJob(job_id);
+ } else if (job.status === 'done') {
+ if (textEl) textEl.textContent = `Done! ${job.output || ''}`;
+ if (btn) btn.textContent = 'Done ✓';
+ showToast(`Faceswap complete: ${job.output || ''}`, 'success');
+ setTimeout(() => { refreshNow(); }, 1800);
+ } else {
+ if (textEl) textEl.textContent = `Error: ${job.error || 'unknown'}`;
+ if (btn) { btn.disabled = false; btn.textContent = 'Retry'; }
+ showToast(`Faceswap failed: ${job.error || ''}`, 'error');
+ }
+ } catch (e) { pollFaceswapJob(job_id); }
+ }, 2500);
+ }
+
+ // ---- clip timeline ----
+ let _cltDuration = 0, _cltStart = 0, _cltEnd = 0, _cltDragging = null;
+
+ function initClipTimeline() {
+ const video = document.getElementById('cltVideoPreview');
+ const track = document.getElementById('cltTrack');
+ if (!video || !track) return;
+ video.addEventListener('loadedmetadata', () => {
+ _cltDuration = video.duration || 10;
+ _cltStart = 0;
+ _cltEnd = _cltDuration;
+ updateCltUI();
+ });
+ video.addEventListener('timeupdate', () => {
+ if (_cltDragging || _cltDuration <= 0) return;
+ const ph = document.getElementById('cltPlayhead');
+ if (ph) ph.style.left = (video.currentTime / _cltDuration * 100) + '%';
+ });
+ track.addEventListener('pointerdown', e => {
+ const rect = track.getBoundingClientRect();
+ const pct = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+ const startPct = _cltDuration > 0 ? _cltStart / _cltDuration : 0;
+ const endPct = _cltDuration > 0 ? _cltEnd / _cltDuration : 1;
+ if (e.target.id === 'cltHandleStart' || (e.target.id !== 'cltHandleEnd' && Math.abs(pct - startPct) <= Math.abs(pct - endPct))) {
+ _cltDragging = 'start';
+ } else if (e.target.id === 'cltHandleEnd' || Math.abs(pct - endPct) < Math.abs(pct - startPct)) {
+ _cltDragging = 'end';
+ } else {
+ if (video) video.currentTime = pct * _cltDuration;
+ return;
+ }
+ track.setPointerCapture(e.pointerId);
+ e.preventDefault();
+ });
+ track.addEventListener('pointermove', e => {
+ if (!_cltDragging || _cltDuration <= 0) return;
+ const rect = track.getBoundingClientRect();
+ const t = Math.max(0, Math.min(_cltDuration, (e.clientX - rect.left) / rect.width * _cltDuration));
+ if (_cltDragging === 'start') _cltStart = Math.min(t, _cltEnd - 0.1);
+ else _cltEnd = Math.max(t, _cltStart + 0.1);
+ updateCltUI();
+ if (video) video.currentTime = _cltDragging === 'start' ? _cltStart : _cltEnd;
+ });
+ track.addEventListener('pointerup', e => {
+ _cltDragging = null;
+ track.releasePointerCapture(e.pointerId);
+ });
+ }
+
+ function updateCltUI() {
+ if (_cltDuration <= 0) return;
+ const sp = (_cltStart / _cltDuration) * 100;
+ const ep = (_cltEnd / _cltDuration) * 100;
+ const sh = document.getElementById('cltHandleStart');
+ const eh = document.getElementById('cltHandleEnd');
+ const rn = document.getElementById('cltRange');
+ const sl = document.getElementById('cltStartLabel');
+ const el = document.getElementById('cltEndLabel');
+ if (sh) sh.style.left = sp + '%';
+ if (eh) eh.style.left = ep + '%';
+ if (rn) { rn.style.left = sp + '%'; rn.style.width = (ep - sp) + '%'; }
+ if (sl) sl.textContent = formatSecs(_cltStart);
+ if (el) el.textContent = formatSecs(_cltEnd);
+ }
+
+ function formatSecs(s) {
+ const m = Math.floor(s / 60), sec = (s % 60).toFixed(1);
+ return m + ':' + (parseFloat(sec) < 10 ? '0' : '') + sec;
+ }
+
+ function cltPreviewRange() {
+ const video = document.getElementById('cltVideoPreview');
+ if (!video || _cltDuration <= 0) return;
+ video.currentTime = _cltStart;
+ video.play();
+ const stop = () => { if (video.currentTime >= _cltEnd) { video.pause(); video.currentTime = _cltStart; } };
+ video.addEventListener('timeupdate', stop);
+ setTimeout(() => video.removeEventListener('timeupdate', stop), (_cltEnd - _cltStart + 2) * 1000);
+ }
+
+ async function submitTrimFromTimeline() {
+ if (!_fsTrimVideo) return;
+ const name = (document.getElementById('cltOutputName')?.value || '').trim() || null;
+ const statusEl = document.getElementById('cltStatus');
+ if (_cltEnd <= _cltStart) { if (statusEl) statusEl.textContent = 'End must be > start'; return; }
+ if (statusEl) statusEl.textContent = 'Trimming…';
+ try {
+ const r = await fetch(`${API}/wireframe/trim`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ video_name: _fsTrimVideo, start: _cltStart, end: _cltEnd, output_name: name }),
+ });
+ if (!r.ok) { if (statusEl) statusEl.textContent = 'Error: ' + await r.text(); return; }
+ const d = await r.json();
+ showToast('Clip saved: ' + d.output_name, 'success');
+ availableVideos = [];
+ await loadTemplateVideos();
+ closeTrimPanel();
+ } catch (e) { if (statusEl) statusEl.textContent = 'Error: ' + e; }
+ }
+
+ // ---- scenery sidebar tab ----
+ let _sceneVideo = null, _sceneDuration = 0, _sceneFrameBytes = null, _sceneJobPollTimer = null;
+
+ function renderSidebarScenery() {
+ const panel = document.getElementById('sbPanelScenery');
+ if (!panel) return;
+ let html = 'Background reference
';
+ if (availableVideos.length) {
+ html += '';
+ availableVideos.forEach(v => {
+ const stem = v.replace(/\.[^.]+$/, '');
+ const vSafe = v.replace(/'/g, "\\'");
+ const sel = _sceneVideo === v ? ' selected' : '';
+ html += `
';
+ }
+ html += `
+
+
+
+
+
+
+
`;
+ });
+ html += '${escHtml(stem)}
+ Or upload image
+
+
+
+ Prompt (optional)
+
+
+
+
+
`;
+ panel.innerHTML = html;
+ if (_sceneVideo) {
+ const vid = document.getElementById('sceneVideoEl');
+ vid.src = `${API}/wireframe/${encodeURIComponent(_sceneVideo)}`;
+ if (_sceneDuration) {
+ const scrubber = document.getElementById('sceneScrubber');
+ if (scrubber) { scrubber.max = _sceneDuration; scrubber.step = Math.max(0.05, _sceneDuration / 500); }
+ }
+ }
+ requestAnimationFrame(() => {
+ panel.querySelectorAll('.sb-template-card video').forEach(v => v.play().catch(()=>{}));
+ });
+ }
+
+ async function sceneSelectVideo(v) {
+ _sceneVideo = v; _sceneFrameBytes = null;
+ renderSidebarScenery();
+ try {
+ const r = await fetch(`${API}/wireframe/duration/${encodeURIComponent(v)}`);
+ if (r.ok) {
+ _sceneDuration = (await r.json()).duration || 0;
+ const scrubber = document.getElementById('sceneScrubber');
+ if (scrubber) { scrubber.max = _sceneDuration; scrubber.step = Math.max(0.05, _sceneDuration / 500); }
+ }
+ } catch (_) {}
+ }
+
+ function sceneSeekVideo(val) {
+ const vid = document.getElementById('sceneVideoEl');
+ const lbl = document.getElementById('sceneTimeLabel');
+ if (vid) vid.currentTime = parseFloat(val);
+ if (lbl) lbl.textContent = formatSecs(parseFloat(val));
+ }
+
+ async function sceneExtractFrame() {
+ const scrubber = document.getElementById('sceneScrubber');
+ const t = parseFloat(scrubber?.value || '0');
+ const btn = document.getElementById('sceneExtractBtn');
+ if (btn) btn.textContent = 'Extracting…';
+ try {
+ const r = await fetch(`${API}/wireframe/frame`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ video_name: _sceneVideo, time: t }),
+ });
+ if (r.ok) {
+ const d = await r.json();
+ _sceneFrameBytes = d.frame_b64;
+ const img = document.getElementById('sceneFrameImg');
+ if (img) { img.src = 'data:image/png;base64,' + _sceneFrameBytes; img.style.display = ''; }
+ const genBtn = document.getElementById('sceneGenBtn');
+ if (genBtn) genBtn.disabled = false;
+ }
+ } catch (_) {}
+ if (btn) btn.textContent = 'Extract frame as reference';
+ }
+
+ function sceneHandleUpload(event) {
+ const file = event.target.files[0];
+ if (!file) return;
+ const reader = new FileReader();
+ reader.onload = e => {
+ _sceneFrameBytes = e.target.result.split(',')[1];
+ _sceneVideo = null;
+ renderSidebarScenery();
+ };
+ reader.readAsDataURL(file);
+ }
+
+ async function submitGenerateScenery() {
+ if (!_fsModelFilename) return;
+ if (!_sceneVideo && !_sceneFrameBytes) { showToast('Pick a scene reference first', 'error'); return; }
+ const scrubber = document.getElementById('sceneScrubber');
+ const prompt = (document.getElementById('scenePromptInput')?.value || '').trim() || null;
+ const btn = document.getElementById('sceneGenBtn');
+ const statusEl = document.getElementById('sceneJobStatus');
+ const textEl = document.getElementById('sceneJobText');
+ if (btn) btn.disabled = true;
+ if (statusEl) statusEl.style.display = 'inline-flex';
+ if (textEl) textEl.textContent = 'Submitting…';
+ const payload = {
+ model_filename: _fsModelFilename,
+ scene_bytes: _sceneFrameBytes || null,
+ scene_video: _sceneVideo || null,
+ scene_time: parseFloat(scrubber?.value || '0'),
+ prompt,
+ seed: -1,
+ };
+ try {
+ const r = await fetch(`${API}/generate-scenery`, {
+ method: 'POST', headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(payload),
+ });
+ if (!r.ok) {
+ if (textEl) textEl.textContent = 'Error: ' + await r.text();
+ if (btn) btn.disabled = false; return;
+ }
+ const { job_id } = await r.json();
+ showToast('Scenery generation started…', 'info');
+ if (textEl) textEl.textContent = 'Generating…';
+ const pollScene = () => {
+ _sceneJobPollTimer = setTimeout(async () => {
+ try {
+ const jr = await fetch(`${API}/batch/${job_id}`);
+ if (!jr.ok) { pollScene(); return; }
+ const job = await jr.json();
+ if (job.status === 'running') { if (textEl) textEl.textContent = 'Generating…'; pollScene(); return; }
+ if (job.status === 'done') {
+ showToast('Scenery generated!', 'success');
+ if (statusEl) statusEl.style.display = 'none';
+ if (btn) btn.disabled = false;
+ refreshNow();
+ } else {
+ if (textEl) textEl.textContent = 'Error: ' + (job.error || 'unknown');
+ if (btn) btn.disabled = false;
+ }
+ } catch (_) { pollScene(); }
+ }, 2500);
+ };
+ pollScene();
+ } catch (e) {
+ if (textEl) textEl.textContent = 'API error: ' + e;
+ if (btn) btn.disabled = false;
+ }
+ }
+
+ // ---- segment (SAM2 / rembg) sidebar tab ----
+
+ function renderSidebarSegment() {
+ const panel = document.getElementById('sbPanelSegment');
+ if (!panel) return;
+ panel.innerHTML = `
+
+ Remove the background using SAM2 (when available) or rembg fallback.
+ The result is a transparent PNG. Restore BG composites alpha back to white.
+
+
+
+
+
+
+
+
+
+ SAM2 segments the largest foreground subject.
+ Requires sam2_checkpoint in config.json. +
`;
+ // Check SAM2 availability
+ fetch(`${API}/sam2/check`).then(r => r.json()).then(d => {
+ const btn = document.getElementById('sbSam2Btn');
+ if (btn) btn.title = d.sam2 ? 'SAM2 available' : 'SAM2 not available — will use rembg fallback';
+ }).catch(()=>{});
+ }
+
+ async function sam2RemoveBg() {
+ const fname = lbNames[lbIdx];
+ if (!fname) return;
+ const btn = document.getElementById('sbSam2Btn');
+ const statusEl = document.getElementById('sbSegStatus');
+ if (btn) btn.disabled = true;
+ if (statusEl) statusEl.textContent = 'Removing background…';
+ try {
+ const r = await fetch(`${API}/remove-background-sam/${encodeURIComponent(fname)}`, { method: 'POST' });
+ if (!r.ok) {
+ if (statusEl) statusEl.textContent = 'Error: ' + await r.text();
+ } else {
+ const d = await r.json();
+ if (statusEl) statusEl.textContent = d.used_sam2 ? 'Done (SAM2)' : 'Done (rembg)';
+ showToast('Background removed', 'success');
+ const img = document.getElementById('lbImg');
+ if (img) { img.src = img.src.split('?')[0] + '?t=' + Date.now(); }
+ }
+ } catch (e) { if (statusEl) statusEl.textContent = 'Error: ' + e; }
+ if (btn) btn.disabled = false;
+ }
+
+ async function restoreBg() {
+ const fname = lbNames[lbIdx];
+ if (!fname) return;
+ const btn = document.getElementById('sbRestoreBgBtn');
+ const statusEl = document.getElementById('sbSegStatus');
+ if (btn) btn.disabled = true;
+ if (statusEl) statusEl.textContent = 'Restoring…';
+ try {
+ const r = await fetch(`${API}/restore-background/${encodeURIComponent(fname)}`, { method: 'POST' });
+ if (!r.ok) {
+ if (statusEl) statusEl.textContent = 'Error: ' + await r.text();
+ } else {
+ if (statusEl) statusEl.textContent = 'Background restored';
+ showToast('Background restored', 'success');
+ const img = document.getElementById('lbImg');
+ if (img) { img.src = img.src.split('?')[0] + '?t=' + Date.now(); }
+ }
+ } catch (e) { if (statusEl) statusEl.textContent = 'Error: ' + e; }
+ if (btn) btn.disabled = false;
+ }
+
+ function toggleCheckerboard(on) {
+ const viewer = document.getElementById('studioViewer');
+ if (viewer) viewer.classList.toggle('show-checker', on);
+ }
+
+ // ---- set preferred ----
+
async function lbSetPreferred() {
const fname = lbNames[lbIdx];
if (!fname) return;
try {
const r = await fetch(`/images/${encodeURIComponent(fname)}/set-preferred`, {method:'POST'});
if (!r.ok) return;
- const data = await r.json();
fileSortOrders[fname] = 0;
- // Move to front in both parallel arrays so lbIdx=0 lands on the promoted image
const url = lbUrls[lbIdx];
const otherUrls = lbUrls.filter((_, i) => i !== lbIdx);
const otherNames = lbNames.filter((_, i) => i !== lbIdx);
lbUrls = [url, ...otherUrls];
lbNames = [fname, ...otherNames];
lbIdx = 0;
- updateLightbox();
+ updateStudio();
} catch(e) { console.error(e); }
}
diff --git a/tour-comfy/old_car.html b/tour-comfy/car.html.bak
similarity index 62%
rename from tour-comfy/old_car.html
rename to tour-comfy/car.html.bak
index 5c4d7a8..9864c9d 100644
--- a/tour-comfy/old_car.html
+++ b/tour-comfy/car.html.bak
@@ -3,7 +3,7 @@
- + Requires sam2_checkpoint in config.json. +
@@ -705,7 +1282,7 @@
+
+
@@ -752,6 +1330,7 @@
![]()
+
@@ -791,6 +1374,84 @@
Hidden from preview
@@ -760,15 +1339,19 @@
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Studio
+ Select a template or generate poses
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Loading templates…
+
+
+
+
+
+
+ Loading poses…
+
+
+
+
+
+
+
+
+ Select reference image
@@ -1043,8 +1704,21 @@
];
// --- HYDRATION_END ---
- // Supported image extensions
- const EXTENSIONS = ['.jpg', '.jpeg', '.png', '.gif', '.webp', '.bmp', '.svg'];
+ // Supported extensions
+ const EXTENSIONS = ['.jpg', '.jpeg', '.png', '.gif', '.webp', '.bmp', '.svg', '.mp4', '.mov', '.webm'];
+ const VIDEO_EXTENSIONS = new Set(['.mp4', '.mov', '.webm', '.avi', '.mkv']);
+ function isVideo(name) { return VIDEO_EXTENSIONS.has((name.split('.').pop() ? '.'+name.split('.').pop().toLowerCase() : '')); }
+ // Videos can't render as an '
+ + ''
+ + (isVideo(n) ? '
';
+ }).join('');
+ // Scroll active thumb into view
+ const active = strip.querySelector('.lb-var-thumb.active');
+ if (active) active.scrollIntoView({ block: 'nearest', inline: 'center' });
+ } else {
+ strip.style.display = 'none';
+ }
}
async function updateName() {
@@ -1364,7 +2097,7 @@
const gid = el.closest('.image-card').dataset.group;
const data = groupData.get(gid);
const count = data ? data.names.length : 0;
- const msg = count > 1
+ const msg = count > 1
? `Are you sure you want to delete ENTIRE GROUP: ${gid}? (${count} images)`
: `Are you sure you want to delete this image?`;
@@ -1524,7 +2257,7 @@
// Primary: live list from API (always up to date, works after batch jobs)
try {
- const r = await fetch(`${API}/images`, { signal: AbortSignal.timeout(3000) });
+ const r = await fetch(`${API}/images`, { signal: AbortSignal.timeout(12000) });
if (r.ok) {
const data = await r.json();
files = data.images.map(img => img.filename);
@@ -1535,9 +2268,12 @@
if (img.pose) filePoses[img.filename] = img.pose;
if (img.prompt) filePrompts[img.filename] = img.prompt;
if (img.group_name && img.group_id) groupNames[img.group_id] = img.group_name;
- fileSortOrders[img.filename] = img.sort_order ?? null;
- fileHidden[img.filename] = !!img.hidden;
- fileHasBg[img.filename] = img.has_background !== false;
+ fileSortOrders[img.filename] = img.sort_order ?? null;
+ fileHidden[img.filename] = !!img.hidden;
+ fileHasBg[img.filename] = img.has_background !== false;
+ fileHasClothing[img.filename] = img.has_clothing ?? null;
+ fileContentType[img.filename] = img.content_type || 'image';
+ fileFaceswapSrcVideo[img.filename]= img.faceswap_source_video || null;
if (img.source_refs) {
try { fileSourceRefs[img.filename] = JSON.parse(img.source_refs); } catch(e) {}
}
@@ -1568,18 +2304,24 @@
if (availablePoses && Object.keys(availablePoses).length === 0) {
loadPoses();
}
+ if (!availableVideos.length) {
+ loadTemplateVideos();
+ }
if (fileObjects.length === 0) {
- gallery.innerHTML = `
- ▶
' : '')
+ + (pose ? '' + escHtml(pose) + '
' : '')
+ + '
-
-
`;
+ // Only show "no images" if gallery is currently empty (avoid flash on slow API)
+ if (!gallery.querySelector('.image-card')) {
+ gallery.innerHTML = `
+ No images found
-Place images in the output folder and refresh.
-
+
+
`;
+ }
statusDot.classList.remove('updating');
return;
}
@@ -1615,17 +2357,28 @@
const label = groupDisplayName(group);
const safeGid = gid.replace(/"/g, '"');
const poses = [...new Set(gf.map(f => filePoses[f.cleanName]).filter(Boolean))];
- // First visible image (fallback to first overall)
- const firstVisUrl = visibleIdx.length ? urls[visibleIdx[0]] : urls[0];
+ const firstVisUrl = visibleIdx.length ? urls[visibleIdx[0]] : urls[0];
+ const firstVisName = visibleIdx.length ? names[visibleIdx[0]] : names[0];
+ const isVideoCard = isVideo(firstVisName) || fileContentType[firstVisName] === 'video';
+ const isFaceswap = !!fileFaceswapSrcVideo[firstVisName];
+
+ const mediaEl = isVideoCard
+ ? `
+ `
+ : `No images found
+Place images in the output folder and refresh.
+
-
`;
}).join('');
- // Start cycling for groups with 2+ visible images
currentGroups.forEach(g => {
const data = groupData.get(g.gid);
if (data && data.visibleIdx && data.visibleIdx.length > 1) startGroupCycle(g.gid);
@@ -1762,7 +2514,7 @@
: '';
return ``;
}).join('');
@@ -2126,7 +2878,7 @@
// Privacy mode init — apply stored state on load
(function applyPrivacyInit() {
const btn = document.getElementById('privacyBtn');
- if (privacyMode) btn.textContent = '🔒';
+ if (privacyMode) { btn.textContent = '🔒'; document.title = PRIV_TITLE; }
})();
// Lightbox + variant picker + select-mode keyboard nav
@@ -2137,6 +2889,9 @@
togglePrivacyMode(); return;
}
if (e.key === 'Escape') {
+ if (document.getElementById('faceswapModal').classList.contains('open')) {
+ closeFaceswapModal(); return;
+ }
if (document.getElementById('variantPicker').classList.contains('open')) {
closeVariantPicker(); return;
}
@@ -2153,20 +2908,31 @@
});
});
- // Privacy overlay — show when window loses focus, hide on regain
- window.addEventListener('blur', () => {
- if (privacyMode) document.getElementById('privacyOverlay').style.display = 'flex';
- });
- window.addEventListener('focus', () => {
- document.getElementById('privacyOverlay').style.display = 'none';
- });
+ // Privacy overlay — disguise the page as a study-chat on any focus loss.
+ const PRIV_TITLE = 'Study Assistant';
+ const REAL_TITLE = document.title; // "Studio Monitor"
+
+ function showPrivacyOverlay() {
+ const ov = document.getElementById('privacyOverlay');
+ ov.style.display = 'flex';
+ // Force a synchronous layout+style flush so the disguise is painted
+ // BEFORE the window manager grabs the minimize thumbnail — otherwise
+ // the first minimize leaks the real content. Text-only overlay = no
+ // async asset loads to wait on.
+ void ov.offsetHeight;
+ document.title = PRIV_TITLE;
+ }
+
+ // blur fires before the minimize snapshot in every browser we target, so
+ // this is the line of defense for the taskbar thumbnail.
+ window.addEventListener('blur', () => { if (privacyMode) showPrivacyOverlay(); });
+ window.addEventListener('pagehide', () => { if (privacyMode) showPrivacyOverlay(); });
- // Handle visibility change — refresh when tab becomes active; privacy on hide
document.addEventListener('visibilitychange', () => {
if (document.hidden) {
- if (privacyMode) document.getElementById('privacyOverlay').style.display = 'flex';
+ if (privacyMode) showPrivacyOverlay();
} else {
- document.getElementById('privacyOverlay').style.display = 'none';
+ // Don't auto-hide — user must click overlay or press P to dismiss
loadImages();
}
});
@@ -2176,10 +2942,16 @@
localStorage.setItem('privacyMode', privacyMode);
const btn = document.getElementById('privacyBtn');
btn.textContent = privacyMode ? '🔒' : '🔓';
- if (!privacyMode) document.getElementById('privacyOverlay').style.display = 'none';
+ if (privacyMode) {
+ document.title = PRIV_TITLE; // keep the taskbar label discreet even while active
+ } else {
+ document.title = REAL_TITLE;
+ document.getElementById('privacyOverlay').style.display = 'none';
+ }
}
function disablePrivacyOverlay() {
+ // Resume work, but privacy mode stays armed — keep the title discreet.
document.getElementById('privacyOverlay').style.display = 'none';
}
@@ -2196,6 +2968,363 @@
} catch(e) { console.error(e); }
}
+ async function cleanupDb() {
+ try {
+ const r = await fetch(`${API}/db/cleanup`, { method: 'POST' });
+ const d = await r.json();
+ showToast(`Cleaned ${d.removed} orphan record${d.removed !== 1 ? 's' : ''}`);
+ if (d.removed > 0) refreshNow();
+ } catch(e) {
+ showToast('Cleanup failed');
+ }
+ }
+
+ async function lbUndress() {
+ const fname = lbNames[lbIdx];
+ if (!fname) return;
+ const btn = document.getElementById('lbUndressBtn');
+ btn.textContent = '...';
+ btn.disabled = true;
+ try {
+ const r = await fetch(`${API}/images/${encodeURIComponent(fname)}/undress`, {method:'POST'});
+ if (!r.ok) { showToast('Undress failed', 'error'); return; }
+ showToast('Undress queued', 'success');
+ } catch(e) {
+ showToast('Undress error', 'error');
+ } finally {
+ btn.textContent = 'Undress';
+ btn.disabled = false;
+ }
+ }
+
+ // ---- faceswap ----
+
+ async function loadTemplateVideos() {
+ try {
+ const r = await fetch(`${API}/videos`);
+ if (!r.ok) return;
+ const d = await r.json();
+ availableVideos = d.videos || [];
+ } catch (e) { availableVideos = []; }
+ }
+
+ function renderTemplateGrid() {
+ const grid = document.getElementById('templateGrid');
+ if (!availableVideos.length) {
+ grid.innerHTML = '.jpg`) so the gallery can show a
+ thumbnail for a video via a plain ![]()
(file:// can't render
+ ${!isVideoCard ? `
` : ''}
-
+ No wireframe videos found
';
+ return;
+ }
+ grid.innerHTML = availableVideos.map(v => {
+ const stem = v.replace(/\.[^.]+$/, '');
+ const vSafe = v.replace(/'/g, "\\'");
+ return `
+
+
`;
+ }).join('');
+ }
+
+ function selectTemplate(videoName) {
+ _fsSelectedVideo = videoName;
+ renderTemplateGrid();
+ updateFsActionBtn();
+ }
+
+ async function lbFaceswap() {
+ const data = groupData.get(lbCurrentGid);
+ if (!data) return;
+ _fsModelFilename = data.names[lbIdx];
+ _fsSelectedVideo = null;
+ _fsSelectedPoses = new Set();
+ _fsActiveTab = 'swap';
+ document.getElementById('fsJobStatus').style.display = 'none';
+ document.getElementById('faceswapModalSub').textContent =
+ `Face source: ${_fsModelFilename}`;
+ // Set model thumbnail
+ const thumb = document.getElementById('fsModelThumb');
+ const thumbUrl = data.urls[lbIdx];
+ if (thumbUrl) { thumb.src = thumbUrl; thumb.style.display = ''; }
+ else { thumb.style.display = 'none'; }
+ // Apply tab state
+ switchFsTab('swap');
+ if (!availableVideos.length) await loadTemplateVideos();
+ renderTemplateGrid();
+ renderFsPosesGrid();
+ document.getElementById('faceswapModal').classList.add('open');
+ // Browsers suppress autoplay in display:none elements; kick-start after show
+ requestAnimationFrame(() => {
+ document.querySelectorAll('#templateGrid video').forEach(v => v.play().catch(()=>{}));
+ });
+ // Check which backends are available
+ try {
+ const chk = await fetch(`${API}/faceswap/check`);
+ if (chk.ok) {
+ const s = await chk.json();
+ const hairCb = document.getElementById('fsHair');
+ const hairBdg = document.getElementById('fsHairBadge');
+ if (s.facefusion) {
+ hairCb.disabled = false;
+ hairBdg.style.display = 'none';
+ } else {
+ hairCb.disabled = true;
+ hairBdg.style.display = '';
+ hairBdg.textContent = 'run install_facefusion.sh';
+ }
+ }
+ } catch (_) {}
+ }
+
+ function closeFaceswapModal() {
+ document.getElementById('faceswapModal').classList.remove('open');
+ clearTimeout(_fsJobPollTimer);
+ }
+
+ function switchFsTab(tab) {
+ _fsActiveTab = tab;
+ document.querySelectorAll('.fs-tab').forEach(t => t.classList.toggle('active', t.dataset.tab === tab));
+ document.getElementById('fsContentSwap').classList.toggle('active', tab === 'swap');
+ document.getElementById('fsContentGen').classList.toggle('active', tab === 'gen');
+ updateFsActionBtn();
+ }
+
+ function updateFsActionBtn() {
+ const btn = document.getElementById('fsStartBtn');
+ if (_fsActiveTab === 'swap') {
+ btn.disabled = !_fsSelectedVideo;
+ btn.textContent = 'Start Faceswap';
+ } else {
+ const hasPrompt = (document.getElementById('fsPromptInput')?.value || '').trim().length > 0;
+ btn.disabled = _fsSelectedPoses.size === 0 && !hasPrompt;
+ btn.textContent = `Generate (${_fsSelectedPoses.size + (hasPrompt ? 1 : 0)})`;
+ }
+ }
+
+ function renderFsPosesGrid() {
+ const grid = document.getElementById('fsPosesGrid');
+ if (!availablePoses || Object.keys(availablePoses).length === 0) {
+ grid.innerHTML = '${escHtml(stem)}
+
+ No poses loaded
';
+ return;
+ }
+ // Collect which poses are already generated for this model's group
+ const donePoses = new Set();
+ const gData = groupData.get(lbCurrentGid);
+ if (gData) {
+ gData.names.forEach(n => { if (filePoses[n]) donePoses.add(filePoses[n]); });
+ }
+ grid.innerHTML = Object.entries(availablePoses).map(([name, entry]) => {
+ const isDone = donePoses.has(name);
+ const isSel = _fsSelectedPoses.has(name);
+ let cls = 'fs-pose-btn';
+ if (isDone) cls += ' done';
+ if (isSel) cls += ' selected';
+ const nSafe = name.replace(/'/g, "\\'");
+ return ``;
+ }).join('');
+ }
+
+ function toggleFsPose(name) {
+ if (_fsSelectedPoses.has(name)) _fsSelectedPoses.delete(name);
+ else _fsSelectedPoses.add(name);
+ renderFsPosesGrid();
+ updateFsActionBtn();
+ }
+
+ function submitFsAction() {
+ if (_fsActiveTab === 'swap') submitFaceswap();
+ else submitFsGenerate();
+ }
+
+ async function submitFsGenerate() {
+ if (!_fsModelFilename) return;
+ const promptVal = (document.getElementById('fsPromptInput')?.value || '').trim();
+ const prompts = [];
+ const poses = [];
+ _fsSelectedPoses.forEach(name => {
+ poses.push(name);
+ prompts.push(availablePoses[name]?.text ?? availablePoses[name] ?? name);
+ });
+ if (promptVal) { prompts.push(promptVal); poses.push(null); }
+ if (prompts.length === 0) return;
+ const btn = document.getElementById('fsStartBtn');
+ btn.disabled = true;
+ btn.textContent = 'Submitting…';
+ document.getElementById('fsJobStatus').style.display = 'flex';
+ document.getElementById('fsJobText').textContent = `Queuing ${prompts.length} task(s)…`;
+ try {
+ const r = await fetch(`${API}/batch`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ filenames: [_fsModelFilename],
+ prompt: prompts,
+ poses,
+ seed: -1,
+ max_area: 0,
+ group_id: lbCurrentGid
+ }),
+ });
+ if (!r.ok) {
+ const err = await r.text();
+ document.getElementById('fsJobText').textContent = `Error: ${err}`;
+ btn.disabled = false; btn.textContent = 'Retry';
+ return;
+ }
+ const { job_id, total } = await r.json();
+ showToast(`Generating ${total} image${total !== 1 ? 's' : ''}…`, 'info');
+ document.getElementById('fsJobText').textContent = `Submitted ${total} task(s) — generating…`;
+ // Poll until done then refresh and close
+ const pollGen = () => {
+ clearTimeout(_fsJobPollTimer);
+ _fsJobPollTimer = setTimeout(async () => {
+ try {
+ const jr = await fetch(`${API}/batch/${job_id}`);
+ if (!jr.ok) { pollGen(); return; }
+ const job = await jr.json();
+ const done = job.done + job.failed;
+ document.getElementById('fsJobText').textContent = `Generating… ${done}/${total}`;
+ if (job.status === 'running') { pollGen(); return; }
+ if (job.status === 'done') {
+ showToast('Generation complete!', 'success');
+ closeFaceswapModal();
+ refreshNow();
+ } else {
+ document.getElementById('fsJobText').textContent = `Error: ${job.error || 'unknown'}`;
+ btn.disabled = false; btn.textContent = 'Retry';
+ }
+ } catch (e) { pollGen(); }
+ }, 2500);
+ };
+ pollGen();
+ } catch (e) {
+ document.getElementById('fsJobText').textContent = `API error: ${e}`;
+ btn.disabled = false; btn.textContent = 'Retry';
+ }
+ }
+
+ async function openTrimPanel(videoName) {
+ _fsTrimVideo = videoName;
+ const panel = document.getElementById('fsTrimPanel');
+ document.getElementById('fsTrimVideoName').textContent = `✂ Trim: ${videoName}`;
+ document.getElementById('fsTrimStatus').textContent = '';
+ document.getElementById('fsTrimName').value = '';
+ panel.style.display = '';
+ // Fetch duration to pre-fill end field
+ try {
+ const r = await fetch(`${API}/wireframe/duration/${encodeURIComponent(videoName)}`);
+ if (r.ok) {
+ const d = await r.json();
+ document.getElementById('fsTrimStart').value = 0;
+ document.getElementById('fsTrimEnd').value = Math.round(d.duration * 10) / 10;
+ }
+ } catch (_) {}
+ }
+
+ function closeTrimPanel() {
+ document.getElementById('fsTrimPanel').style.display = 'none';
+ _fsTrimVideo = null;
+ }
+
+ async function submitTrim() {
+ if (!_fsTrimVideo) return;
+ const start = parseFloat(document.getElementById('fsTrimStart').value) || 0;
+ const end = parseFloat(document.getElementById('fsTrimEnd').value);
+ const name = document.getElementById('fsTrimName').value.trim() || null;
+ if (!end || end <= start) {
+ document.getElementById('fsTrimStatus').textContent = 'End must be > start';
+ return;
+ }
+ document.getElementById('fsTrimStatus').textContent = 'Trimming…';
+ try {
+ const r = await fetch(`${API}/wireframe/trim`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ video_name: _fsTrimVideo, start, end, output_name: name }),
+ });
+ if (!r.ok) {
+ const err = await r.text();
+ document.getElementById('fsTrimStatus').textContent = `Error: ${err}`;
+ return;
+ }
+ const d = await r.json();
+ document.getElementById('fsTrimStatus').textContent = `Created: ${d.output_name}`;
+ showToast(`Clip saved: ${d.output_name}`, 'success');
+ // Reload template list and close trim panel after short delay
+ availableVideos = [];
+ await loadTemplateVideos();
+ renderTemplateGrid();
+ setTimeout(closeTrimPanel, 1200);
+ } catch (e) {
+ document.getElementById('fsTrimStatus').textContent = `Error: ${e}`;
+ }
+ }
+
+ async function submitFaceswap() {
+ if (!_fsModelFilename || !_fsSelectedVideo) return;
+ const btn = document.getElementById('fsStartBtn');
+ const enhance = document.getElementById('fsEnhance').checked;
+ const hair = document.getElementById('fsHair').checked && !document.getElementById('fsHair').disabled;
+ btn.disabled = true;
+ btn.textContent = 'Starting…';
+ document.getElementById('fsJobStatus').style.display = 'flex';
+ const modeLabel = hair ? 'FaceFusion + hair' : (enhance ? 'insightface + enhance' : 'insightface');
+ document.getElementById('fsJobText').textContent = `Starting (${modeLabel})…`;
+ try {
+ const r = await fetch(`${API}/faceswap`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ model_filename: _fsModelFilename, video_name: _fsSelectedVideo, enhance, hair }),
+ });
+ if (!r.ok) {
+ const err = await r.text();
+ document.getElementById('fsJobText').textContent = `Error: ${err}`;
+ btn.disabled = false;
+ btn.textContent = 'Start Faceswap';
+ return;
+ }
+ const { job_id } = await r.json();
+ _fsJobId = job_id;
+ showToast(`Faceswap started (${_fsSelectedVideo})`, 'info');
+ pollFaceswapJob(job_id);
+ } catch (e) {
+ document.getElementById('fsJobText').textContent = `API error: ${e}`;
+ btn.disabled = false;
+ btn.textContent = 'Start Faceswap';
+ }
+ }
+
+ function pollFaceswapJob(job_id) {
+ clearTimeout(_fsJobPollTimer);
+ _fsJobPollTimer = setTimeout(async () => {
+ try {
+ const r = await fetch(`${API}/batch/${job_id}`);
+ if (!r.ok) { pollFaceswapJob(job_id); return; }
+ const job = await r.json();
+ const pct = job.total > 1 ? ` ${job.done}/${job.total} frames` : '';
+ if (job.status === 'running') {
+ document.getElementById('fsJobText').textContent = `Processing${pct}…`;
+ pollFaceswapJob(job_id);
+ } else if (job.status === 'done') {
+ document.getElementById('fsJobText').textContent = `Done! ${job.output || ''}`;
+ document.getElementById('fsStartBtn').textContent = 'Done ✓';
+ showToast(`Faceswap complete: ${job.output || ''}`, 'success');
+ setTimeout(() => {
+ closeFaceswapModal();
+ refreshNow();
+ }, 1800);
+ } else {
+ document.getElementById('fsJobText').textContent = `Error: ${job.error || 'unknown'}`;
+ document.getElementById('fsStartBtn').disabled = false;
+ document.getElementById('fsStartBtn').textContent = 'Retry';
+ showToast(`Faceswap failed: ${job.error || ''}`, 'error');
+ }
+ } catch (e) { pollFaceswapJob(job_id); }
+ }, 2500);
+ }
+
async function lbSetPreferred() {
const fname = lbNames[lbIdx];
if (!fname) return;
diff --git a/tour-comfy/config.json b/tour-comfy/config.json
index 8954bb9..7df7549 100644
--- a/tour-comfy/config.json
+++ b/tour-comfy/config.json
@@ -1,6 +1,6 @@
{
"api_url": "http://127.0.0.1:8500/edit",
- "prompt": "high quality. detailed, female nude, high quality. realistic. detailed. female nude",
+ "prompt": "high quality. realistic. detailed, female nude. realistic, high quality. realistic. detailed. female nude. realistic",
"base_prompts": [
"Head-on a full-body three-quarter full-nude-body female portrait, realistic, transparent background",
"Head-on straight-on full-nude-body female portrait, realistic, transparent background",
@@ -19,5 +19,9 @@
"output_dir": "/mnt/zim/tour-comfy/output",
"failed_dir": "/mnt/zim/tour-comfy/failed",
"processed_file": "./tour-comfy/processed.json",
- "log_file": "./tour-comfy/watcher.log"
+ "log_file": "./tour-comfy/watcher.log",
+ "wireframe_dir": "/mnt/zim/tour-comfy/wireframe",
+ "faceswap_model": "~/.insightface/models/inswapper_128.onnx",
+ "facefusion_dir": "~/facefusion",
+ "facefusion_venv": "~/facefusion-venv"
}
\ No newline at end of file
diff --git a/tour-comfy/database.py b/tour-comfy/database.py
index 2f29e3c..a46f9d2 100644
--- a/tour-comfy/database.py
+++ b/tour-comfy/database.py
@@ -26,6 +26,8 @@ def migrate_schema():
"ALTER TABLE person ADD COLUMN IF NOT EXISTS has_background BOOLEAN DEFAULT TRUE",
"ALTER TABLE person ADD COLUMN IF NOT EXISTS source_refs TEXT",
"ALTER TABLE person ADD COLUMN IF NOT EXISTS has_clothing BOOLEAN DEFAULT NULL",
+ "ALTER TABLE person ADD COLUMN IF NOT EXISTS content_type TEXT DEFAULT 'image'",
+ "ALTER TABLE person ADD COLUMN IF NOT EXISTS faceswap_source_video TEXT",
]:
cur.execute(sql)
conn.commit()
@@ -36,34 +38,39 @@ def migrate_schema():
def upsert_person(filename, filepath=None, name=None, group_id=None, tags=None,
embedding=None, clip_description=None, prompt=None, pose=None,
sort_order=None, group_name=None, hidden=None,
- has_background=None, source_refs=None, has_clothing=None):
+ has_background=None, source_refs=None, has_clothing=None,
+ content_type=None, faceswap_source_video=None):
conn = get_db_connection()
cur = conn.cursor()
try:
cur.execute("""
INSERT INTO person (filename, filepath, name, group_id, tags, embedding,
clip_description, prompt, pose, sort_order, group_name, hidden,
- has_background, source_refs, has_clothing)
- VALUES (%s, %s, %s, %s, %s, %s, %s, %s, %s, %s, %s, %s, %s, %s, %s)
+ has_background, source_refs, has_clothing,
+ content_type, faceswap_source_video)
+ VALUES (%s, %s, %s, %s, %s, %s, %s, %s, %s, %s, %s, %s, %s, %s, %s, %s, %s)
ON CONFLICT (filename) DO UPDATE
- SET filepath = COALESCE(EXCLUDED.filepath, person.filepath),
- name = COALESCE(EXCLUDED.name, person.name),
- group_id = COALESCE(EXCLUDED.group_id, person.group_id),
- tags = COALESCE(EXCLUDED.tags, person.tags),
- embedding = COALESCE(EXCLUDED.embedding, person.embedding),
- clip_description= COALESCE(EXCLUDED.clip_description,person.clip_description),
- prompt = COALESCE(EXCLUDED.prompt, person.prompt),
- pose = COALESCE(EXCLUDED.pose, person.pose),
- sort_order = COALESCE(EXCLUDED.sort_order, person.sort_order),
- group_name = COALESCE(EXCLUDED.group_name, person.group_name),
- hidden = COALESCE(EXCLUDED.hidden, person.hidden),
- has_background = COALESCE(EXCLUDED.has_background, person.has_background),
- source_refs = COALESCE(EXCLUDED.source_refs, person.source_refs),
- has_clothing = COALESCE(EXCLUDED.has_clothing, person.has_clothing);
+ SET filepath = COALESCE(EXCLUDED.filepath, person.filepath),
+ name = COALESCE(EXCLUDED.name, person.name),
+ group_id = COALESCE(EXCLUDED.group_id, person.group_id),
+ tags = COALESCE(EXCLUDED.tags, person.tags),
+ embedding = COALESCE(EXCLUDED.embedding, person.embedding),
+ clip_description = COALESCE(EXCLUDED.clip_description, person.clip_description),
+ prompt = COALESCE(EXCLUDED.prompt, person.prompt),
+ pose = COALESCE(EXCLUDED.pose, person.pose),
+ sort_order = COALESCE(EXCLUDED.sort_order, person.sort_order),
+ group_name = COALESCE(EXCLUDED.group_name, person.group_name),
+ hidden = COALESCE(EXCLUDED.hidden, person.hidden),
+ has_background = COALESCE(EXCLUDED.has_background, person.has_background),
+ source_refs = COALESCE(EXCLUDED.source_refs, person.source_refs),
+ has_clothing = COALESCE(EXCLUDED.has_clothing, person.has_clothing),
+ content_type = COALESCE(EXCLUDED.content_type, person.content_type),
+ faceswap_source_video = COALESCE(EXCLUDED.faceswap_source_video, person.faceswap_source_video);
""", (filename, filepath, name, group_id,
json.dumps(tags) if tags else None,
embedding, clip_description, prompt, pose, sort_order, group_name, hidden,
- has_background, source_refs, has_clothing))
+ has_background, source_refs, has_clothing,
+ content_type, faceswap_source_video))
conn.commit()
finally:
cur.close()
@@ -101,7 +108,7 @@ def list_persons():
cur.execute("""
SELECT filename, name, group_id, clip_description,
prompt, pose, sort_order, group_name, hidden, has_background, source_refs,
- has_clothing
+ has_clothing, content_type, faceswap_source_video
FROM person
""")
return cur.fetchall()
diff --git a/tour-comfy/edit_api.py b/tour-comfy/edit_api.py
index 14af495..bcc8cc4 100644
--- a/tour-comfy/edit_api.py
+++ b/tour-comfy/edit_api.py
@@ -32,6 +32,7 @@ from PIL import Image
from fastapi import FastAPI, UploadFile, File, Form, HTTPException, BackgroundTasks
from fastapi.middleware.cors import CORSMiddleware
from fastapi.responses import Response
+from fastapi.staticfiles import StaticFiles
from pydantic import BaseModel
import shutil
import re
@@ -59,6 +60,8 @@ NODE_SAVE = "10"
MAX_SEED = 2**32 - 1
+VIDEO_EXTENSIONS = ('.mp4', '.mov', '.avi', '.webm', '.mkv')
+
# Poses where the source image should be rotated 180° before pipeline for better results
ROTATE_180_POSES = {"the dragon", "dragon", "the draak", "draak"}
@@ -115,6 +118,18 @@ def _watch_car_html():
pass
+def _load_wireframe_dir() -> str:
+ with open(CONFIG_PATH, "r") as f:
+ conf = json.load(f)
+ return conf.get("wireframe_dir", "/mnt/zim/tour-comfy/wireframe")
+
+
+def _load_faceswap_model_path() -> str:
+ with open(CONFIG_PATH, "r") as f:
+ conf = json.load(f)
+ return os.path.expanduser(conf.get("faceswap_model", "~/.insightface/models/inswapper_128.onnx"))
+
+
@app.on_event("startup")
def on_startup():
try:
@@ -123,6 +138,14 @@ def on_startup():
print(f"DB migration warning: {e}")
_sync_car_html()
threading.Thread(target=_watch_car_html, daemon=True).start()
+ # Mount wireframe static dir for browser video preview
+ try:
+ wf_dir = _load_wireframe_dir()
+ if os.path.isdir(wf_dir):
+ app.mount("/wireframe", StaticFiles(directory=wf_dir), name="wireframe")
+ print(f"[wireframe] mounted {wf_dir} → /wireframe")
+ except Exception as e:
+ print(f"[wireframe] mount warning: {e}")
# --- helpers ----------------------------------------------------------------
@@ -311,6 +334,379 @@ def _apply_transparency(png_bytes: bytes) -> bytes:
return png_bytes
+# --- faceswapper (insightface + inswapper_128) --------------------------------
+# Setup: pip install insightface onnxruntime-gpu opencv-python-headless
+# Download: place inswapper_128.onnx at ~/.insightface/models/inswapper_128.onnx
+# Source: https://huggingface.co/deepinsight/inswapper
+
+_faceswapper = None
+_faceswapper_lock = threading.Lock()
+
+_gfpgan = None
+_gfpgan_lock = threading.Lock()
+
+
+def _load_faceswapper():
+ global _faceswapper
+ if _faceswapper is not None:
+ return _faceswapper
+ with _faceswapper_lock:
+ if _faceswapper is not None:
+ return _faceswapper
+ try:
+ import insightface
+ from insightface.app import FaceAnalysis
+ except ImportError:
+ raise RuntimeError("insightface not installed. Run: pip install insightface onnxruntime-gpu")
+
+ providers = ['CUDAExecutionProvider', 'CPUExecutionProvider']
+ app = FaceAnalysis(name='buffalo_l', providers=providers)
+ app.prepare(ctx_id=0, det_size=(640, 640))
+
+ model_path = _load_faceswap_model_path()
+ if not os.path.exists(model_path):
+ # Try HuggingFace download as fallback
+ try:
+ import huggingface_hub
+ model_path = huggingface_hub.hf_hub_download(
+ 'deepinsight/inswapper', 'inswapper_128.onnx',
+ local_dir=os.path.dirname(model_path),
+ )
+ print(f"[faceswap] Downloaded inswapper_128.onnx to {model_path}")
+ except Exception as de:
+ raise RuntimeError(
+ f"inswapper_128.onnx not found at {model_path}. "
+ f"Download from https://huggingface.co/deepinsight/inswapper and place it there. "
+ f"Download error: {de}"
+ )
+
+ swapper = insightface.model_zoo.get_model(model_path, providers=providers)
+ _faceswapper = (app, swapper)
+ print(f"[faceswap] loaded insightface buffalo_l + inswapper_128 from {model_path}")
+ return _faceswapper
+
+
+def _load_gfpgan():
+ """Lazy-load GFPGAN face restorer. Returns restorer or False if unavailable."""
+ global _gfpgan
+ if _gfpgan is not None:
+ return _gfpgan
+ with _gfpgan_lock:
+ if _gfpgan is not None:
+ return _gfpgan
+ try:
+ from gfpgan import GFPGANer
+ # Main GFPGAN model
+ model_path = os.path.expanduser('~/.gfpgan/weights/GFPGANv1.4.pth')
+ os.makedirs(os.path.dirname(model_path), exist_ok=True)
+ if not os.path.exists(model_path):
+ import urllib.request
+ print('[gfpgan] Downloading GFPGANv1.4.pth (~333 MB)...')
+ tmp = model_path + '.tmp'
+ urllib.request.urlretrieve(
+ 'https://github.com/TencentARC/GFPGAN/releases/download/v1.3.4/GFPGANv1.4.pth',
+ tmp
+ )
+ os.rename(tmp, model_path)
+ # GFPGANer hardcodes facexlib download path to CWD/gfpgan/weights/
+ # → change CWD to ~ so models land at ~/gfpgan/weights/ (stable across runs)
+ home = os.path.expanduser('~')
+ os.makedirs(os.path.join(home, 'gfpgan', 'weights'), exist_ok=True)
+ _orig_cwd = os.getcwd()
+ os.chdir(home)
+ try:
+ restorer = GFPGANer(model_path=model_path, upscale=1, arch='clean',
+ channel_multiplier=2, bg_upsampler=None)
+ finally:
+ os.chdir(_orig_cwd)
+ _gfpgan = restorer
+ print('[gfpgan] GFPGANv1.4 loaded')
+ except Exception as e:
+ print(f'[gfpgan] not available: {e}')
+ _gfpgan = False
+ return _gfpgan
+
+
+def _make_video_poster(video_path: str) -> str | None:
+ """Extract a poster JPG (sibling `