Expanded UI

This commit is contained in:
Aodhan
2025-06-21 21:44:52 +01:00
parent 324a21800a
commit 1ff4a6f6d7
89 changed files with 81619 additions and 114 deletions

View File

@@ -27,11 +27,13 @@ document.addEventListener('DOMContentLoaded', () => {
if (!state.currentImageInfo) return;
card.classList.add(`swipe-${direction}`);
lastActionText.textContent = `Last action: Swiped ${direction}`;
const actionNameMap = { left: 'Discard', right: 'Keep', up: 'Favorite', down: 'Review' };
const actionName = actionNameMap[direction] || direction;
lastActionText.textContent = `Last action: ${actionName}`;
const toastMap = { left: 'Discarded', right: 'Kept', up: 'Favorited', down: 'Marked for review' };
showToast(toastMap[direction] || 'Action');
recordSelection(state.currentImageInfo, direction);
recordSelection(state.currentImageInfo, actionName);
setTimeout(() => {
card.classList.remove(`swipe-${direction}`);
@@ -39,16 +41,25 @@ document.addEventListener('DOMContentLoaded', () => {
}, 500);
};
const recordSelection = (imageInfo, action) => {
fetch('/selection', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
image_path: imageInfo.path,
resolution: imageInfo.resolution,
action,
}),
}).catch(error => console.error('Error recording selection:', error));
const recordSelection = async (imageInfo, action) => {
try {
const response = await fetch('/selection', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
image_path: imageInfo.path,
action,
}),
});
if (!response.ok) {
console.error('Error recording selection. Status:', response.status);
} else {
const data = await response.json();
console.log('Selection recorded:', data);
}
} catch (err) {
console.error('Error recording selection:', err);
}
};
const loadNewImage = () => {
@@ -60,16 +71,26 @@ document.addEventListener('DOMContentLoaded', () => {
.then(response => response.json())
.then(data => {
state.isLoading = false;
card.classList.remove('loading');
// card.classList.remove('loading'); // moved to image load handler
if (data && data.path) {
state.currentImageInfo = data;
const cardImage = card.querySelector('img');
// Use load event to ensure indicator hides after image fully loads
cardImage.onload = () => {
card.classList.remove('loading');
};
cardImage.src = data.path;
updateImageInfo(data);
adjustContainerToImage(data.orientation);
} else {
card.innerHTML = `<div class="no-images-message">${data.message || 'No more images.'}</div>`;
state.currentImageInfo = null;
const placeholder = 'static/no-image.png';
const imgEl = card.querySelector('img');
if (imgEl) {
imgEl.onload = () => card.classList.remove('loading');
imgEl.src = placeholder;
}
updateImageInfo({ filename:'No image', creation_date:'', resolution:'', prompt_data:''});
state.currentImageInfo = null; // disables swipe actions
}
})
.catch(error => {