issue

image/javascript/image.js

@@ -182,10 +182,16 @@ function updateUI() {
 function renderFileCards() {
 	const filesGrid = document.getElementById('files-grid');
 
-	filesGrid.innerHTML = selectedFiles.map(file => `
+	filesGrid.innerHTML = selectedFiles.map(file => {
+		// Find completed file data for download URL
+		const completedFile = completedFiles.find(cf => cf.id === file.id);
+
+		return `
         <div class="file-card" id="file-${file.id}">
             <button class="remove-button" onclick="removeFile('${file.id}')">×</button>
 			${window.location.pathname == '/image/remove_metadata' && file.other_info ? `<button class="remove-button" style="top: 40px; background: #17a2b8;" onclick="showMetadata('${file.id}')">i</button>` : ``}
+			${file.status === 'error' && file.errorMessage ? `<button class="remove-button" style="top: 40px; background: #dc3545;" onclick="showError('${file.id}')" title="View error">!</button>` : ``}
+			${file.status === 'completed' && completedFile ? `<button class="remove-button" style="top: ${file.other_info ? '70px' : '40px'}; background: #28a745;" onclick="downloadFile('${file.id}')" title="Download">⬇</button>` : ``}
             
             <div class="file-preview">
                 ${file.preview ? `<img src="${file.preview}" alt="${file.name}">` : '<span class="file-icon">🖼️</span>'}
@@ -196,12 +202,13 @@ function renderFileCards() {
                 <p>${file.size}</p>
                 
                 <div class="file-status">
-                    <div class="status-indicator ${file.status === 'processing' ? 'processing' : file.status === 'error' ? 'error' : ''}"></div>
+                    <div class="status-indicator ${file.status === 'processing' ? 'processing' : file.status === 'error' ? 'error' : file.status === 'completed' ? 'completed' : ''}"></div>
                     <span>${getStatusText(file.status)}</span>
                 </div>
             </div>
         </div>
-    `).join('');
+    `;
+	}).join('');
 }
 
 function updateFileCard(fileId) {
@@ -253,6 +260,7 @@ async function processButtonFn() {
 		} catch (error) {
 			console.error('Processing error:', error);
 			file.status = 'error';
+			file.errorMessage = error.message;
 			showMessage(`Error processing ${file.name}: ${error.message}`, 'error');
 		}
 
@@ -431,3 +439,31 @@ function closeMetadataModal() {
 	document.getElementById('metadata-modal').style.display = 'none';
 	document.getElementById('modal-backdrop').style.display = 'none';
 }
+
+/**
+ * Show error message for a file in a modal/alert
+ */
+function showError(fileId) {
+	const file = selectedFiles.find(f => f.id === fileId);
+	if (file && file.errorMessage) {
+		alert(`Error processing ${file.name}:\n\n${file.errorMessage}`);
+	} else {
+		alert('Unknown error occurred');
+	}
+}
+
+/**
+ * Download a single processed file
+ */
+function downloadFile(fileId) {
+	const completedFile = completedFiles.find(f => f.id === fileId);
+	if (completedFile) {
+		const link = document.createElement('a');
+		link.href = completedFile.url;
+		link.download = completedFile.processedName;
+		link.target = '_blank';
+		document.body.appendChild(link);
+		link.click();
+		document.body.removeChild(link);
+	}
+}