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,7 +459,6 @@ 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({

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();
@@ -576,12 +572,6 @@ async function uploadPreview(filePath, file, modelType = 'lora') {
const data = await response.json(); const data = await response.json();
// Update the card preview in UI
const card = document.querySelector(`.lora-card[data-filepath="${filePath}"]`);
if (card) {
const previewContainer = card.querySelector('.card-preview');
const oldPreview = previewContainer.querySelector('img, video');
// Get the current page's previewVersions Map based on model type // Get the current page's previewVersions Map based on model type
const pageType = modelType === 'checkpoint' ? 'checkpoints' : 'loras'; const pageType = modelType === 'checkpoint' ? 'checkpoints' : 'loras';
const previewVersions = state.pages[pageType].previewVersions; const previewVersions = state.pages[pageType].previewVersions;
@@ -596,32 +586,18 @@ async function uploadPreview(filePath, file, modelType = 'lora') {
saveMapToStorage(storageKey, previewVersions); saveMapToStorage(storageKey, previewVersions);
} }
const previewUrl = data.preview_url ? const updateData = {
`${data.preview_url}?t=${timestamp}` : preview_url: data.preview_url
`/api/model/preview_image?path=${encodeURIComponent(filePath)}&t=${timestamp}`; };
// Create appropriate element based on file type state.virtualScroller.updateSingleItem(filePath, updateData);
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'); 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();
} }
} }