issue

image/javascript/image.js

@@ -185,13 +185,15 @@ function renderFileCards() {
 	filesGrid.innerHTML = selectedFiles.map(file => {
 		// Find completed file data for download URL
 		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;
 
 		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>` : ``}
+			${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>` : ``}
 			${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>` : ``}
+			${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>` : ``}
             
             <div class="file-preview">
                 ${file.preview ? `<img src="${file.preview}" alt="${file.name}">` : '<span class="file-icon">🖼️</span>'}