issue

image/javascript/image.js

@@ -187,13 +187,18 @@ function renderFileCards() {
 		const completedFile = completedFiles.find(cf => cf.id === file.id);
 		// Check if metadata info exists and has content
 		const hasMetadata = file.other_info && Object.keys(file.other_info).length > 0;
+		// Calculate button positions based on page type
+		const isMetadataPage = window.location.pathname == '/image/remove_metadata';
+		const downloadTop = isMetadataPage ? '70px' : '40px';
+		const viewTop = isMetadataPage ? '100px' : '70px';
 
 		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.status === 'completed' ? `<button class="remove-button" style="top: 40px; background: #17a2b8;" onclick="showMetadata('${file.id}')" title="View removed metadata">i</button>` : ``}
+			${isMetadataPage && file.status === 'completed' ? `<button class="remove-button" style="top: 40px; background: #17a2b8;" onclick="showMetadata('${file.id}')" title="View removed metadata">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: ${window.location.pathname == '/image/remove_metadata' ? '70px' : '40px'}; background: #28a745;" onclick="downloadFile('${file.id}')" title="Download">⬇</button>` : ``}
+			${file.status === 'completed' && completedFile ? `<button class="remove-button" style="top: ${downloadTop}; background: #28a745;" onclick="downloadFile('${file.id}')" title="Download">⬇</button>` : ``}
+			${file.status === 'completed' && completedFile ? `<button class="remove-button" style="top: ${viewTop}; background: #6f42c1;" onclick="viewImage('${file.id}')" title="View image">👁</button>` : ``}
             
             <div class="file-preview">
                 ${file.preview ? `<img src="${file.preview}" alt="${file.name}">` : '<span class="file-icon">🖼️</span>'}
@@ -470,3 +475,13 @@ function downloadFile(fileId) {
 		document.body.removeChild(link);
 	}
 }
+
+/**
+ * View the processed image in a new tab
+ */
+function viewImage(fileId) {
+	const completedFile = completedFiles.find(f => f.id === fileId);
+	if (completedFile) {
+		window.open(completedFile.url, '_blank');
+	}
+}