Enhance preview image upload by deleting existing previews and updating UI state management

This commit is contained in:
Will Miao
2025-06-18 18:37:13 +08:00
parent 5febc2a805
commit 1ca05808e1
2 changed files with 32 additions and 47 deletions

View File

@@ -429,6 +429,16 @@ class ModelRouteUtils:
) )
extension = '.webp' # Use .webp without .preview part extension = '.webp' # Use .webp without .preview part
# Delete any existing preview files for this model
for ext in PREVIEW_EXTENSIONS:
existing_preview = os.path.join(folder, base_name + ext)
if os.path.exists(existing_preview):
try:
os.remove(existing_preview)
logger.info(f"Deleted existing preview: {existing_preview}")
except Exception as e:
logger.warning(f"Failed to delete existing preview {existing_preview}: {e}")
preview_path = os.path.join(folder, base_name + extension).replace(os.sep, '/') preview_path = os.path.join(folder, base_name + extension).replace(os.sep, '/')
with open(preview_path, 'wb') as f: with open(preview_path, 'wb') as f:
@@ -449,8 +459,7 @@ class ModelRouteUtils:
logger.error(f"Error updating metadata: {e}") logger.error(f"Error updating metadata: {e}")
# Update preview URL in scanner cache # Update preview URL in scanner cache
if hasattr(scanner, 'update_preview_in_cache'): await scanner.update_preview_in_cache(model_path, preview_path)
await scanner.update_preview_in_cache(model_path, preview_path)
return web.json_response({ return web.json_response({
"success": True, "success": True,

View File

@@ -546,12 +546,8 @@ export async function excludeModel(filePath, modelType = 'lora') {
// Upload a preview image // Upload a preview image
async function uploadPreview(filePath, file, modelType = 'lora') { async function uploadPreview(filePath, file, modelType = 'lora') {
const loadingOverlay = document.getElementById('loading-overlay');
const loadingStatus = document.querySelector('.loading-status');
try { try {
if (loadingOverlay) loadingOverlay.style.display = 'flex'; state.loadingManager.showSimpleLoading('Uploading preview...');
if (loadingStatus) loadingStatus.textContent = 'Uploading preview...';
const formData = new FormData(); const formData = new FormData();
@@ -575,53 +571,33 @@ async function uploadPreview(filePath, file, modelType = 'lora') {
} }
const data = await response.json(); const data = await response.json();
// Get the current page's previewVersions Map based on model type
const pageType = modelType === 'checkpoint' ? 'checkpoints' : 'loras';
const previewVersions = state.pages[pageType].previewVersions;
// Update the card preview in UI // Update the version timestamp
const card = document.querySelector(`.lora-card[data-filepath="${filePath}"]`); const timestamp = Date.now();
if (card) { if (previewVersions) {
const previewContainer = card.querySelector('.card-preview'); previewVersions.set(filePath, timestamp);
const oldPreview = previewContainer.querySelector('img, video');
// Get the current page's previewVersions Map based on model type // Save the updated Map to localStorage
const pageType = modelType === 'checkpoint' ? 'checkpoints' : 'loras'; const storageKey = modelType === 'checkpoint' ? 'checkpoint_preview_versions' : 'lora_preview_versions';
const previewVersions = state.pages[pageType].previewVersions; saveMapToStorage(storageKey, previewVersions);
// Update the version timestamp
const timestamp = Date.now();
if (previewVersions) {
previewVersions.set(filePath, timestamp);
// Save the updated Map to localStorage
const storageKey = modelType === 'checkpoint' ? 'checkpoint_preview_versions' : 'lora_preview_versions';
saveMapToStorage(storageKey, previewVersions);
}
const previewUrl = data.preview_url ?
`${data.preview_url}?t=${timestamp}` :
`/api/model/preview_image?path=${encodeURIComponent(filePath)}&t=${timestamp}`;
// Create appropriate element based on file type
if (file.type.startsWith('video/')) {
const video = document.createElement('video');
video.controls = true;
video.autoplay = true;
video.muted = true;
video.loop = true;
video.src = previewUrl;
oldPreview.replaceWith(video);
} else {
const img = document.createElement('img');
img.src = previewUrl;
oldPreview.replaceWith(img);
}
showToast('Preview updated successfully', 'success');
} }
const updateData = {
preview_url: data.preview_url
};
state.virtualScroller.updateSingleItem(filePath, updateData);
showToast('Preview updated successfully', 'success');
} catch (error) { } catch (error) {
console.error('Error uploading preview:', error); console.error('Error uploading preview:', error);
showToast('Failed to upload preview image', 'error'); showToast('Failed to upload preview image', 'error');
} finally { } finally {
if (loadingOverlay) loadingOverlay.style.display = 'none'; state.loadingManager.hide();
} }
} }