'
+ // On the Scenery tab the thumbs are draggable onto the slots above.
+ const dragAttr = sceneryActive ? ' draggable="true" ondragstart="sceneFilmDragStart(event,' + i + ')"' : '';
+ return '
'
+ '
'
+ (isVideo(n) ? '
▶
' : '')
+ (pose ? '
' + escHtml(pose) + '
' : '')
- + (refPos >= 0 ? '
#' + (refPos + 1) + '
' : '')
+ + (badge > 0 ? '
#' + badge + '
' : '')
+ '
';
}).join('');
const active = strip.querySelector('.lb-var-thumb.active');
@@ -4522,8 +4545,15 @@
style="width:48px;height:48px;object-fit:contain;border-radius:4px;border:1px solid #333">
';
- if (!availablePoses || Object.keys(availablePoses).length === 0) {
+ html += '
Poses
';
+ const poseCount = availablePoses ? Object.keys(availablePoses).length : 0;
+ if (poseCount > 8) {
+ html += `
`;
+ }
+ html += '
';
+ if (!poseCount) {
html += '
No poses loaded
';
} else {
html += Object.entries(availablePoses).map(([name, entry]) => {
@@ -4533,7 +4563,7 @@
if (entry?.beta) cls += ' beta';
const nSafe = name.replace(/'/g, "\\'");
const tip = String(entry?.text ?? entry).replace(/"/g,'"');
- return `
${escHtml(name)} `;
+ return `
${escHtml(name)} `;
}).join('');
}
html += `
`;
@@ -4605,13 +4635,13 @@
}
html += `
Custom prompt
-
+ style="resize:none;max-height:320px;overflow-y:auto;line-height:1.4;font-family:inherit">${escHtml(prevPromptVal)}
@@ -4626,6 +4656,7 @@
updateSbGenBtn();
const promptEl = document.getElementById('sbGenPromptInput');
if (promptEl) autoGrowPrompt(promptEl);
+ if (_sbPoseFilter) sbFilterPoses(_sbPoseFilter); // re-apply after rebuild
}
// Grow the custom-prompt textarea to fit its content (capped by max-height in CSS).
@@ -4638,33 +4669,36 @@
// History autocomplete for the custom-prompt textarea.
can't bind to a
//
+
+
Generating…
Create Scenery
+ ${canGen?'':'disabled'}>Create Scenery
`;
panel.innerHTML = html;
+ // Restore the preserved prompt text and size the textarea.
+ const spEl = document.getElementById('scenePromptInput');
+ if (spEl) { spEl.value = prevScenePrompt; autoGrowPrompt(spEl); }
+
if (_sceneVideo) {
const vid = document.getElementById('sceneVideoEl');
vid.src = `${API}/wireframe/${encodeURIComponent(_sceneVideo)}`;
@@ -5503,20 +5557,106 @@
renderSidebarScenery();
}
- // Toggle image3 (extra reference) selection from the in-group picker.
- function sceneToggleExtraRef(name) {
- _sceneExtraRef = (_sceneExtraRef === name) ? null : name;
- renderSidebarScenery();
+ // ---- scenery reference-slot helpers ----
+
+ // Thumbnail (URL or data-URL) for a slot ref.
+ function _sceneThumb(ref) {
+ if (!ref) return '';
+ if (ref.kind === 'bytes') return 'data:image/png;base64,' + ref.data;
+ const idx = lbNames.indexOf(ref.name);
+ const u = idx >= 0 ? lbUrls[idx] : (IMAGE_FOLDER + ref.name);
+ return isVideo(ref.name) ? posterFor(u) : u;
+ }
+ function _sceneUrlForName(name) {
+ const idx = lbNames.indexOf(name);
+ return idx >= 0 ? lbUrls[idx] : (IMAGE_FOLDER + name);
+ }
+ async function _fetchAsBase64(url) {
+ const r = await fetch(url);
+ const blob = await r.blob();
+ return await new Promise((res, rej) => {
+ const fr = new FileReader();
+ fr.onload = () => res(String(fr.result).split(',')[1]);
+ fr.onerror = rej;
+ fr.readAsDataURL(blob);
+ });
+ }
+
+ // Refresh both the scenery panel and the filmstrip badges.
+ function _sceneRefresh() { renderSidebarScenery(); updateStudio(); }
+
+ // Assign a filmstrip file to the first empty slot scanning right→left ([2,1,0]).
+ // Shift+Click an already-assigned file removes it (toggle).
+ function sceneAssignRef(name) {
+ const at = _sceneRefs.findIndex(r => r && r.kind === 'file' && r.name === name);
+ if (at >= 0) { _sceneRefs[at] = null; _sceneRefresh(); return; }
+ for (const i of [2, 1, 0]) {
+ if (!_sceneRefs[i]) {
+ _sceneRefs[i] = { kind: 'file', name };
+ if (i === 0) _sceneFrameBytes = null; // a file now backs slot 0
+ _sceneRefresh();
+ return;
+ }
+ }
+ showToast('All 3 reference slots are full — ✕ one first', 'info');
+ }
+
+ function sceneClearSlot(i) {
+ const ref = _sceneRefs[i];
+ _sceneRefs[i] = null;
+ if (i === 0 && ref && ref.kind === 'bytes') _sceneFrameBytes = null;
+ if (i === 1) _scenePersonInit = true; // don't auto-refill after explicit clear
+ _sceneRefresh();
+ }
+
+ // ---- drag & drop between slots / from filmstrip ----
+ function sceneDragSlotStart(ev, i) {
+ if (!_sceneRefs[i]) { ev.preventDefault(); return; }
+ _sceneDrag = { type: 'slot', idx: i };
+ ev.dataTransfer.effectAllowed = 'move';
+ }
+ function sceneFilmDragStart(ev, i) {
+ _sceneDrag = { type: 'file', name: lbNames[i] };
+ ev.dataTransfer.effectAllowed = 'copy';
+ }
+ function sceneDragOver(ev) { ev.preventDefault(); ev.currentTarget.classList.add('drop-hover'); }
+ function sceneDragLeave(ev) { ev.currentTarget.classList.remove('drop-hover'); }
+ function sceneDrop(ev, dst) {
+ ev.preventDefault();
+ ev.currentTarget.classList.remove('drop-hover');
+ const drag = _sceneDrag; _sceneDrag = null;
+ if (!drag) return;
+ if (drag.type === 'file') {
+ // Dropping a filmstrip image onto a slot — remove any duplicate first.
+ const dup = _sceneRefs.findIndex(r => r && r.kind === 'file' && r.name === drag.name);
+ if (dup >= 0 && dup !== dst) _sceneRefs[dup] = null;
+ if (dst === 0 && _sceneRefs[0] && _sceneRefs[0].kind === 'bytes') _sceneFrameBytes = null;
+ _sceneRefs[dst] = { kind: 'file', name: drag.name };
+ } else {
+ const src = drag.idx;
+ if (src === dst) return;
+ const a = _sceneRefs[src], b = _sceneRefs[dst];
+ // Captured/uploaded bytes can only live in slot 0 (the background).
+ if ((a && a.kind === 'bytes' && dst !== 0) || (b && b.kind === 'bytes' && src !== 0)) {
+ showToast('The captured background can only sit in the Image 1 slot', 'info');
+ return;
+ }
+ _sceneRefs[src] = b; _sceneRefs[dst] = a;
+ _sceneFrameBytes = (_sceneRefs[0] && _sceneRefs[0].kind === 'bytes') ? _sceneRefs[0].data : null;
+ }
+ _sceneRefresh();
}
async function sceneSelectVideo(v) {
_sceneVideo = v; _sceneFrameBytes = null;
+ if (_sceneRefs[0] && _sceneRefs[0].kind === 'bytes') _sceneRefs[0] = null;
_sceneGridOpen = false; // collapse the picker so the player is front-and-centre
renderSidebarScenery();
}
function sceneReleaseFrame() {
_sceneFrameBytes = null;
+ if (_sceneRefs[0] && _sceneRefs[0].kind === 'bytes') _sceneRefs[0] = null;
renderSidebarScenery(); // re-render restores the live video + slider + capture button
}
@@ -5538,7 +5678,8 @@
} else {
const d = await r.json();
_sceneFrameBytes = d.frame_b64;
- renderSidebarScenery(); // show the frozen frame + "pick a different frame"
+ _sceneRefs[0] = { kind: 'bytes', data: d.frame_b64 }; // background → slot 0
+ _sceneRefresh(); // show the frozen frame + update slot badge
}
} catch (e) {
showToast('Frame extract error: ' + e, 'error');
@@ -5552,6 +5693,7 @@
const reader = new FileReader();
reader.onload = e => {
_sceneFrameBytes = e.target.result.split(',')[1];
+ _sceneRefs[0] = { kind: 'bytes', data: _sceneFrameBytes }; // background → slot 0
_sceneVideo = null;
renderSidebarScenery();
};
@@ -5559,9 +5701,11 @@
}
async function submitGenerateScenery() {
- if (!_fsModelFilename) return;
- if (!_sceneVideo && !_sceneFrameBytes) { showToast('Pick a scene reference first', 'error'); return; }
- const sceneVid = document.getElementById('sceneVideoEl');
+ // Map positional slots → backend contract.
+ const bg = _sceneRefs[0], person = _sceneRefs[1], extra = _sceneRefs[2];
+ if (!bg) { showToast('Set a background (Image 1) — capture, upload, or Shift+Click', 'error'); return; }
+ if (!person || person.kind !== 'file') { showToast('Set a person image (Image 2) from the filmstrip', 'error'); return; }
+ if (extra && extra.kind !== 'file') { showToast('Image 3 must be a gallery image', 'error'); return; }
const prompt = (document.getElementById('scenePromptInput')?.value || '').trim() || null;
const btn = document.getElementById('sceneGenBtn');
const statusEl = document.getElementById('sceneJobStatus');
@@ -5569,12 +5713,21 @@
if (btn) btn.disabled = true;
if (statusEl) statusEl.style.display = 'inline-flex';
if (textEl) textEl.textContent = 'Submitting…';
+ if (prompt) savePromptHistory(prompt);
+ // slot0 → scene_bytes: bytes directly, or fetch a file-as-background to bytes.
+ let sceneBytes;
+ try {
+ sceneBytes = (bg.kind === 'bytes') ? bg.data : await _fetchAsBase64(_sceneUrlForName(bg.name));
+ } catch (e) {
+ showToast('Could not read background image: ' + e, 'error');
+ if (btn) btn.disabled = false; if (statusEl) statusEl.style.display = 'none'; return;
+ }
const payload = {
- model_filename: _fsModelFilename, // image2 (Picture 2) — person
- scene_bytes: _sceneFrameBytes || null, // image1 (Picture 1) — background
- scene_video: _sceneVideo || null,
- scene_time: sceneVid ? sceneVid.currentTime : 0,
- extra_filename: _sceneExtraRef || null, // image3 (Picture 3) — optional extra ref
+ model_filename: person.name, // image2 (Picture 2) — person
+ scene_bytes: sceneBytes, // image1 (Picture 1) — background
+ scene_video: null,
+ scene_time: 0,
+ extra_filename: (extra && extra.kind === 'file') ? extra.name : null, // image3 (Picture 3)
prompt,
seed: -1,
};
'
+ (isVideo(n) ? '