Add delete confirmation modal and update related styles and logic

static/css/style.css

@@ -302,6 +302,114 @@ body.modal-open {
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
 }
 
+/* Delete Modal specific styles */
+.delete-modal-content {
+    max-width: 500px;
+    text-align: center;
+}
+
+.delete-message {
+    color: var(--text-color);
+    margin: var(--space-2) 0;
+}
+
+.delete-model-info {
+    background: var(--lora-surface);
+    border: 1px solid var(--lora-border);
+    border-radius: 8px;
+    padding: var(--space-2);
+    margin: var(--space-2) 0;
+    color: var(--text-color);
+    word-break: break-all;
+}
+
+/* Update delete modal styles */
+.delete-modal {
+    display: none;  /* Set initial display to none */
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.8);
+    z-index: var(--z-overlay);
+}
+
+/* Add new style for when modal is shown */
+.delete-modal.show {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.delete-modal-content {
+    max-width: 500px;
+    width: 90%;
+    text-align: center;
+    margin: 0 auto;
+    position: relative;
+    animation: modalFadeIn 0.2s ease-out;
+}
+
+.delete-model-info {
+    /* Update info display styling */
+    background: var(--lora-surface);
+    border: 1px solid var(--lora-border);
+    border-radius: 8px;
+    padding: var(--space-2);
+    margin: var(--space-2) 0;
+    color: var(--text-color);
+    word-break: break-all;
+    text-align: left;
+    line-height: 1.5;
+}
+
+@keyframes modalFadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(-20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.modal-actions {
+    display: flex;
+    gap: var(--space-2);
+    justify-content: center;
+    margin-top: var(--space-3);
+}
+
+.cancel-btn, .delete-btn {
+    padding: 8px var(--space-2);
+    border-radius: 6px;
+    border: none;
+    cursor: pointer;
+    font-weight: 500;
+    min-width: 100px;
+}
+
+.cancel-btn {
+    background: var(--lora-surface);
+    border: 1px solid var(--lora-border);
+    color: var(--text-color);
+}
+
+.delete-btn {
+    background: var(--lora-error);
+    color: white;
+}
+
+.cancel-btn:hover {
+    background: var(--lora-border);
+}
+
+.delete-btn:hover {
+    opacity: 0.9;
+}
+
 .carousel {
     display: grid;
     grid-auto-flow: column;

static/js/script.js

@@ -96,45 +96,78 @@ function openCivitai(modelName) {
     }
 }
 
-async function deleteModel(fileName) {
-    // Prevent event bubbling
-    event.stopPropagation();
-    
-    // Get the folder from the card's data attributes
-    const card = document.querySelector(`.lora-card[data-file_name="${fileName}"]`);
-    const folder = card ? card.dataset.folder : null;
-    
-    // Show confirmation dialog
-    const confirmed = confirm(`Are you sure you want to delete "${fileName}" and all associated files?`);
-    
-    if (confirmed) {
-        try {
-            const response = await fetch('/api/delete_model', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({ 
-                    file_name: fileName,
-                    folder: folder
-                })
-            });
+let pendingDeletePath = null;
 
-            if (response.ok) {
-                // Remove the card from UI
-                if (card) {
-                    card.remove();
-                }
-            } else {
-                const error = await response.text();
-                alert(`Failed to delete model: ${error}`);
-            }
-        } catch (error) {
-            alert(`Error deleting model: ${error}`);
+function showDeleteModal(filePath) {
+    event.stopPropagation();
+    pendingDeletePath = filePath;
+    
+    const card = document.querySelector(`.lora-card[data-filepath="${filePath}"]`);
+    const modelName = card.dataset.name;
+    const modal = document.getElementById('deleteModal');
+    const modelInfo = modal.querySelector('.delete-model-info');
+    
+    // Format the info with better structure
+    modelInfo.innerHTML = `
+        <strong>Model:</strong> ${modelName}
+        <br>
+        <strong>File:</strong> ${filePath}
+    `;
+    
+    modal.classList.add('show');  // Use class instead of style.display
+    document.body.classList.add('modal-open');
+
+    // Add click outside to close
+    modal.onclick = function(event) {
+        if (event.target === modal) {
+            closeDeleteModal();
         }
+    };
+}
+
+function closeDeleteModal() {
+    const modal = document.getElementById('deleteModal');
+    modal.classList.remove('show');  // Use class instead of style.display
+    document.body.classList.remove('modal-open');
+    pendingDeletePath = null;
+}
+
+async function confirmDelete() {
+    if (!pendingDeletePath) return;
+    
+    const modal = document.getElementById('deleteModal');
+    const card = document.querySelector(`.lora-card[data-filepath="${pendingDeletePath}"]`);
+    
+    try {
+        const response = await fetch('/api/delete_model', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ 
+                file_path: pendingDeletePath
+            })
+        });
+
+        if (response.ok) {
+            if (card) {
+                card.remove();
+            }
+            closeDeleteModal();
+        } else {
+            const error = await response.text();
+            alert(`Failed to delete model: ${error}`);
+        }
+    } catch (error) {
+        alert(`Error deleting model: ${error}`);
     }
 }
 
+// Replace the existing deleteModel function with this one
+async function deleteModel(filePath) {
+    showDeleteModal(filePath);
+}
+
 // 初始化排序
 document.getElementById('sortSelect')?.addEventListener('change', (e) => {
     sortCards(e.target.value);
@@ -381,7 +414,7 @@ async function fetchCivitai() {
     }
 }
 
-async function replacePreview(fileName, folder) {
+async function replacePreview(filePath) {
     // Get loading elements first
     const loadingOverlay = document.getElementById('loading-overlay');
     const loadingStatus = document.querySelector('.loading-status');
@@ -397,9 +430,8 @@ async function replacePreview(fileName, folder) {
         
         const file = input.files[0];
         const formData = new FormData();
-        formData.append('file', file);
-        formData.append('file_name', fileName);
-        formData.append('folder', folder);
+        formData.append('preview_file', file);
+        formData.append('model_path', filePath);
         
         try {
             // Show loading overlay
@@ -414,18 +446,15 @@ async function replacePreview(fileName, folder) {
             if (!response.ok) {
                 throw new Error('Upload failed');
             }
+
+            const data = await response.json();
+            const newPreviewPath = `${data.preview_url}?t=${new Date().getTime()}`;
             
             // Update the preview image in the card
-            const card = document.querySelector(`.lora-card[data-file_name="${fileName}"]`);
+            const card = document.querySelector(`.lora-card[data-filepath="${filePath}"]`);
             const previewContainer = card.querySelector('.card-preview');
             const oldPreview = previewContainer.querySelector('img, video');
             
-            // Force reload the preview by adding a timestamp
-            const timestamp = new Date().getTime();
-            const baseName = fileName.split('.')[0];
-            const extension = file.type.startsWith('video/') ? '.preview.mp4' : '.preview.png';
-            const newPreviewPath = `/loras_static/previews/${folder}/${baseName}${extension}?t=${timestamp}`;
-            
             // Create new preview element based on file type
             if (file.type.startsWith('video/')) {
                 const video = document.createElement('video');