1580158
/
automatic
mirror of https://github.com/vladmandic/automatic
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

address PR feedback

pull/4545/head
Ryan Meador 2026-01-19 21:04:04 -05:00
parent a38e5af3b3
commit 300bc31de7
3 changed files with 31 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
javascript/gallery.js
View File

@ -1,7 +1,7 @@
/* eslint-disable max-classes-per-file */ /* eslint-disable max-classes-per-file */
let ws; let ws;
let url; let url;
window.currentImage = window.currentImage || null; let currentImage = null;
let pruneImagesTimer; let pruneImagesTimer;
let outstanding = 0; let outstanding = 0;
let lastSort = 0; let lastSort = 0;
@ -29,29 +29,27 @@ function getVisibleGalleryFiles() {
return Array.from(el.files.children).filter((node) => node.name && node.offsetParent); return Array.from(el.files.children).filter((node) => node.name && node.offsetParent);
} }
function refreshGallerySelection({ emit = false } = {}) { function refreshGallerySelection() {
updateGallerySelectionClasses(gallerySelection.files, -1);
const files = getVisibleGalleryFiles(); const files = getVisibleGalleryFiles();
const current = window.currentImage; const index = files.findIndex((file) => file.src === currentImage);
const index = files.findIndex((file) => file.src === current);
gallerySelection = { files, index }; gallerySelection = { files, index };
updateGallerySelectionClasses(); updateGallerySelectionClasses(files, index);
if (emit) {
document.dispatchEvent(new CustomEvent('gallery-selection-changed', { detail: { index, files } }));
}
} }
function applyGallerySelection(index, { send = true, emit = true } = {}) { function applyGallerySelection(index, { send = true } = {}) {
if (!gallerySelection.files.length) refreshGallerySelection(); if (!gallerySelection.files.length) refreshGallerySelection();
const files = gallerySelection.files; const files = gallerySelection.files;
if (!files.length) return; if (!files.length) return;
const clamped = Math.max(0, Math.min(index, files.length - 1)); if (!Number.isInteger(index) || index < 0 || index >= files.length) {
gallerySelection.index = clamped; log('gallery selection index out of range', index, files.length);
window.currentImage = files[clamped].src; resetGallerySelection();
updateGallerySelectionClasses(); return;
if (send && el.btnSend) el.btnSend.click();
if (emit) {
document.dispatchEvent(new CustomEvent('gallery-selection-changed', { detail: { index: clamped, files } }));
} }
gallerySelection.index = index;
currentImage = files[index].src;
updateGallerySelectionClasses(files, index);
if (send && el.btnSend) el.btnSend.click();
} }
function setGallerySelectionByElement(element, options) { function setGallerySelectionByElement(element, options) {
@ -65,17 +63,16 @@ function setGallerySelectionByElement(element, options) {
} }
function resetGallerySelection() { function resetGallerySelection() {
updateGallerySelectionClasses(gallerySelection.files, -1);
gallerySelection = { files: [], index: -1 }; gallerySelection = { files: [], index: -1 };
window.currentImage = null; currentImage = null;
updateGallerySelectionClasses();
} }
function buildGalleryFileUrl(path) { function buildGalleryFileUrl(path) {
return new URL(`/file=${encodeURI(path)}`, window.location.origin).toString(); return new URL(`/file=${encodeURI(path)}`, window.location.origin).toString();
} }
function updateGallerySelectionClasses() { function updateGallerySelectionClasses(files = gallerySelection.files, index = gallerySelection.index) {
const { files, index } = gallerySelection;
files.forEach((file, i) => { files.forEach((file, i) => {
file.classList.toggle('gallery-file-selected', i === index); file.classList.toggle('gallery-file-selected', i === index);
}); });
@ -83,7 +80,7 @@ function updateGallerySelectionClasses() {
window.getGallerySelection = () => ({ index: gallerySelection.index, files: gallerySelection.files }); window.getGallerySelection = () => ({ index: gallerySelection.index, files: gallerySelection.files });
window.setGallerySelection = (index, options) => applyGallerySelection(index, options); window.setGallerySelection = (index, options) => applyGallerySelection(index, options);
window.getGallerySelectedUrl = () => (window.currentImage ? buildGalleryFileUrl(window.currentImage) : null); window.getGallerySelectedUrl = () => (currentImage ? buildGalleryFileUrl(currentImage) : null);
/** /**
* Wait for the `outstanding` variable to be below the specified value * Wait for the `outstanding` variable to be below the specified value
@ -586,7 +583,7 @@ class GalleryFile extends HTMLElement {
return; return;
} // ... to here unless modifications are also being made to maintenance functionality and the usage of AbortController/AbortSignal } // ... to here unless modifications are also being made to maintenance functionality and the usage of AbortController/AbortSignal
img.onclick = () => { img.onclick = () => {
setGallerySelectionByElement(this, { send: true, emit: true }); setGallerySelectionByElement(this, { send: true });
}; };
img.title = `Folder: ${this.folder}\nFile: ${this.name}\nSize: ${this.size.toLocaleString()} bytes\nModified: ${this.mtime.toLocaleString()}`; img.title = `Folder: ${this.folder}\nFile: ${this.name}\nSize: ${this.size.toLocaleString()} bytes\nModified: ${this.mtime.toLocaleString()}`;
if (this.shadow.children.length > 0) { if (this.shadow.children.length > 0) {
@ -606,7 +603,7 @@ class GalleryFile extends HTMLElement {
// methods // methods
const gallerySendImage = (_images) => [window.currentImage]; // invoked by gradio button const gallerySendImage = (_images) => [currentImage]; // invoked by gradio button
async function getHash(str, algo = 'SHA-256') { async function getHash(str, algo = 'SHA-256') {
try { try {
@ -789,7 +786,7 @@ async function gallerySearch() {
const t1 = performance.now(); const t1 = performance.now();
updateStatusWithSort('Filter', ['Images', `${totalFound.toLocaleString()} / ${allFiles.length.toLocaleString()}`], `${iconStopwatch} ${Math.floor(t1 - t0).toLocaleString()}ms`); updateStatusWithSort('Filter', ['Images', `${totalFound.toLocaleString()} / ${allFiles.length.toLocaleString()}`], `${iconStopwatch} ${Math.floor(t1 - t0).toLocaleString()}ms`);
refreshGallerySelection({ emit: true }); refreshGallerySelection();
}, 250); }, 250);
} }
@ -910,7 +907,7 @@ async function gallerySort(btn) {
const t1 = performance.now(); const t1 = performance.now();
log(`gallerySort: char=${lastSort} len=${arr.length} time=${Math.floor(t1 - t0)} sort=${lastSortName}`); log(`gallerySort: char=${lastSort} len=${arr.length} time=${Math.floor(t1 - t0)} sort=${lastSortName}`);
updateStatusWithSort(['Images', arr.length.toLocaleString()], `${iconStopwatch} ${Math.floor(t1 - t0).toLocaleString()}ms`); updateStatusWithSort(['Images', arr.length.toLocaleString()], `${iconStopwatch} ${Math.floor(t1 - t0).toLocaleString()}ms`);
refreshGallerySelection({ emit: true }); refreshGallerySelection();
} }
/** /**
@ -1018,7 +1015,6 @@ async function thumbCacheCleanup(folder, imgCount, controller) {
async function fetchFilesHT(evt, controller) { async function fetchFilesHT(evt, controller) {
const t0 = performance.now(); const t0 = performance.now();
const fragment = document.createDocumentFragment(); const fragment = document.createDocumentFragment();
resetGallerySelection();
updateStatusWithSort(['Folder', evt.target.name], 'in-progress'); updateStatusWithSort(['Folder', evt.target.name], 'in-progress');
let numFiles = 0; let numFiles = 0;
@ -1047,7 +1043,7 @@ async function fetchFilesHT(evt, controller) {
updateStatusWithSort(['Folder', evt.target.name], ['Images', numFiles.toLocaleString()], `${iconStopwatch} ${Math.floor(t1 - t0).toLocaleString()}ms`); updateStatusWithSort(['Folder', evt.target.name], ['Images', numFiles.toLocaleString()], `${iconStopwatch} ${Math.floor(t1 - t0).toLocaleString()}ms`);
galleryProgressBar.start(numFiles); galleryProgressBar.start(numFiles);
addSeparators(); addSeparators();
refreshGallerySelection({ emit: true }); refreshGallerySelection();
thumbCacheCleanup(evt.target.name, numFiles, controller); thumbCacheCleanup(evt.target.name, numFiles, controller);
} }
@ -1110,7 +1106,7 @@ async function fetchFilesWS(evt) { // fetch file-by-file list over websockets
updateStatusWithSort(['Folder', evt.target.name], ['Images', numFiles.toLocaleString()], `${iconStopwatch} ${Math.floor(t1 - t0).toLocaleString()}ms`); updateStatusWithSort(['Folder', evt.target.name], ['Images', numFiles.toLocaleString()], `${iconStopwatch} ${Math.floor(t1 - t0).toLocaleString()}ms`);
galleryProgressBar.start(numFiles); galleryProgressBar.start(numFiles);
addSeparators(); addSeparators();
refreshGallerySelection({ emit: true }); refreshGallerySelection();
thumbCacheCleanup(evt.target.name, numFiles, controller); thumbCacheCleanup(evt.target.name, numFiles, controller);
}; };
ws.onerror = (event) => { ws.onerror = (event) => {

10
javascript/imageViewer.js
View File

@ -53,15 +53,15 @@ function modalImageSwitch(offset) {
const galleryFilesContainer = gradioApp().getElementById('tab-gallery-files'); const galleryFilesContainer = gradioApp().getElementById('tab-gallery-files');
if (!galleryFilesContainer || !galleryFilesContainer.offsetParent) return; if (!galleryFilesContainer || !galleryFilesContainer.offsetParent) return;
const gallerySelection = window.getGallerySelection?.(); const gallerySelection = window.getGallerySelection();
if (!gallerySelection?.files?.length || gallerySelection.files.length <= 1) return; if (!gallerySelection.files.length || gallerySelection.files.length <= 1) return;
const baseIndex = gallerySelection.index >= 0 ? gallerySelection.index : 0; const baseIndex = gallerySelection.index >= 0 ? gallerySelection.index : 0;
const nextIndex = negmod((baseIndex + offset), gallerySelection.files.length); const nextIndex = negmod((baseIndex + offset), gallerySelection.files.length);
window.setGallerySelection?.(nextIndex, { send: true, emit: true }); window.setGallerySelection(nextIndex, { send: true });
const modalImage = gradioApp().getElementById('modalImage'); const modalImage = gradioApp().getElementById('modalImage');
const modal = gradioApp().getElementById('lightboxModal'); const modal = gradioApp().getElementById('lightboxModal');
const directSrc = window.getGallerySelectedUrl?.() || new URL(`/file=${encodeURI(window.currentImage)}`, window.location.origin).toString(); const directSrc = window.getGallerySelectedUrl();
if (modalImage && modal) { if (modalImage && modal && directSrc) {
modalImage.src = directSrc; modalImage.src = directSrc;
if (modalImage.style.display === 'none') modal.style.setProperty('background-image', `url(${directSrc})`); if (modalImage.style.display === 'none') modal.style.setProperty('background-image', `url(${directSrc})`);
} }

4
javascript/ui.js
View File

@ -64,8 +64,8 @@ function selected_gallery_index() {
let result = -1; let result = -1;
buttons.forEach((v, i) => { if (v === button) { result = i; } }); buttons.forEach((v, i) => { if (v === button) { result = i; } });
if (result === -1 && gradioApp().getElementById('tab-gallery-search')?.checkVisibility()) { if (result === -1 && gradioApp().getElementById('tab-gallery-search')?.checkVisibility()) {
const gallerySelection = window.getGallerySelection?.(); const gallerySelection = window.getGallerySelection();
if (gallerySelection && Number.isInteger(gallerySelection.index)) result = gallerySelection.index; if (Number.isInteger(gallerySelection.index)) result = gallerySelection.index;
} }
return result; return result;
} }