Update templates/index.html

templates/index.html

@@ -211,6 +211,16 @@
                             </div>
                             <input id="file-upload-hidden" name="file" type="file" accept="image/*" class="hidden"/>
                         </div>
+
+                        <!-- Examples Gallery -->
+                        <div class="mt-6">
+                            <div class="flex items-center justify-between mb-3">
+                                <h3 class="text-lg font-semibold text-gray-700">Or pick an example</h3>
+                                <button type="button" id="refresh-examples" class="text-sm text-indigo-700 hover:underline">Refresh</button>
+                            </div>
+                            <div id="examples-container" class="grid grid-cols-2 sm:grid-cols-3 gap-3"></div>
+                            <p id="examples-empty" class="text-sm text-gray-500 hidden">No examples found.</p>
+                        </div>
                     </div>
                     
                     <!-- Submit Button -->
@@ -325,9 +335,14 @@
         const chatSubmit = document.getElementById('chat-submit');
         const chatForm = document.getElementById('chat-form');
         const promptsContainer = document.getElementById('predefined-prompts-container');
+        const modelSelect = document.getElementById('model-select');
+        const examplesContainer = document.getElementById('examples-container');
+        const examplesEmpty = document.getElementById('examples-empty');
+        const refreshExamplesBtn = document.getElementById('refresh-examples');
 
         let predictionContext = null;
         let chatHistory = [];
+        let cachedExamples = [];
         
         // File upload handling
         uploadZone.addEventListener('click', () => fileUploadHidden.click());
@@ -362,209 +377,271 @@
             uploadZone.style.display = 'block';
             fileUploadHidden.value = '';
         });
-
-        function handleFileSelect(file) {
-            if (!file.type.startsWith('image/')) {
-                alert('Please select an image file.');
-                return;
-            }
-            if (file.size > 10 * 1024 * 1024) {
-                alert('File size must be less than 10MB.');
-                return;
-            }
-            
-            const reader = new FileReader();
-            reader.onload = (e) => {
-                imagePreview.src = e.target.result;
-                imagePreviewContainer.classList.remove('hidden');
-                uploadZone.style.display = 'none';
-            };
-            reader.readAsDataURL(file);
-        }
-
-        uploadForm.addEventListener('submit', async (e) => {
-            e.preventDefault();
-            if (!fileUploadHidden.files[0]) {
-                alert("Please select an image file first.");
-                return;
-            }
-            
-            const submitButton = uploadForm.querySelector('button[type="submit"]');
-            const originalText = submitButton.innerHTML;
-            submitButton.disabled = true;
-            submitButton.innerHTML = `
-                <div class="flex items-center">
-                    <div class="flex space-x-1 mr-2">
-                        <div class="typing-dot"></div>
-                        <div class="typing-dot"></div>
-                        <div class="typing-dot"></div>
-                    </div>
-                    Analyzing...
-                </div>
-            `;
-            
-            // Reset states
-            resultsSection.classList.add('hidden');
-            chatCard.classList.add('opacity-50', 'pointer-events-none');
-            chatStatus.textContent = 'Analyzing';
-            chatStatus.className = 'bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs';
-            chatInput.disabled = true;
-            chatSubmit.disabled = true;
-            
-            chatMessages.innerHTML = `
-                <div class="bot-message p-3 rounded-xl max-w-[90%]">
-                    <div class="flex items-center mb-2">
-                        <div class="flex space-x-1 mr-2">
-                            <div class="typing-dot"></div>
-                            <div class="typing-dot"></div>
-                            <div class="typing-dot"></div>
-                        </div>
-                        <span class="text-xs text-gray-500">ANALYZING</span>
-                    </div>
-                    Processing your medical image...
-                </div>
-            `;
-            
-            predictionContext = null;
-            chatHistory = [];
-            promptsContainer.innerHTML = '';
-
-            try {
-                const formData = new FormData(uploadForm);
-                const response = await fetch('/predict', { method: 'POST', body: formData });
-                const data = await response.json();
-
-                if (data.error) {
-                    alert(`Error: ${data.error}`);
-                    return;
-                }
-                
-                predictionContext = data;
-                resultsSection.classList.remove('hidden');
-                
-                predictionOutput.innerHTML = `
-                    <div class="bg-gradient-to-r from-indigo-50 to-purple-50 p-6 rounded-xl border border-indigo-200">
-                        <div class="flex items-center justify-between mb-4">
-                            <span class="text-sm font-semibold text-indigo-600 bg-indigo-100 px-3 py-1 rounded-full">${data.model_used}</span>
-                            <span class="text-2xl font-bold text-gray-900">${(data.confidence * 100).toFixed(1)}%</span>
-                        </div>
-                        <h3 class="text-2xl font-bold text-gray-900 mb-3">${data.prediction}</h3>
-                        <div class="bg-gray-200 rounded-full h-3 overflow-hidden">
-                            <div class="progress-bar h-3 rounded-full" style="width: ${(data.confidence * 100).toFixed(0)}%"></div>
-                        </div>
-                    </div>
-                `;
-                
-                originalImage.src = `${data.original_image}?t=${new Date().getTime()}`;
-
-                if (data.gradcam_image) {
-                    gradcamImage.src = `${data.gradcam_image}?t=${new Date().getTime()}`;
-                    gradcamImage.classList.remove('hidden');
-                    gradcamPlaceholder.classList.add('hidden');
-                } else {
-                    gradcamImage.classList.add('hidden');
-                    gradcamPlaceholder.classList.remove('hidden');
-                }
-                
-                // Activate chat
-                chatCard.classList.remove('opacity-50', 'pointer-events-none');
-                chatStatus.textContent = 'Active';
-                chatStatus.className = 'bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs';
-                
-                chatMessages.innerHTML = '';
-                addMessage("Analysis complete! Ask me anything about the results.", 'bot');
-                chatInput.disabled = false;
-                chatSubmit.disabled = false;
-                
-                if (data.predefined_prompts) {
-                    data.predefined_prompts.forEach(prompt => {
-                        const btn = document.createElement('button');
-                        btn.textContent = prompt;
-                        btn.className = 'bg-indigo-100 text-indigo-700 text-sm px-3 py-1 rounded-full hover:bg-indigo-200 transition-all';
-                        btn.onclick = () => { 
-                            chatInput.value = prompt; 
-                            chatForm.requestSubmit(); 
-                        };
-                        promptsContainer.appendChild(btn);
-                    });
-                }
-
-            } catch (error) {
-                alert('An unexpected error occurred.');
-                console.error("Prediction Error:", error);
-            } finally {
-                submitButton.disabled = false;
-                submitButton.innerHTML = originalText;
-            }
-        });
-
-        chatForm.addEventListener('submit', async (e) => {
-            e.preventDefault();
-            const message = chatInput.value.trim();
-            if (!message || !predictionContext) return;
-
-            addMessage(message, 'user');
-            chatHistory.push({ role: 'user', parts: [message] });
-            chatInput.value = '';
-            promptsContainer.innerHTML = '';
-
-            const thinkingMsg = addMessage('', 'bot');
-            thinkingMsg.innerHTML = `
-                <div class="flex items-center">
-                    <div class="flex space-x-1 mr-2">
-                        <div class="typing-dot"></div>
-                        <div class="typing-dot"></div>
-                        <div class="typing-dot"></div>
-                    </div>
-                    <span class="text-sm text-gray-500">Thinking...</span>
-                </div>
-            `;
-
-            try {
-                const response = await fetch('/chat', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ message, context: predictionContext, history: chatHistory })
-                });
-                const data = await response.json();
-                
-                thinkingMsg.remove();
-                if (data.error) {
-                    addMessage(`Error: ${data.error}`, 'bot');
-                    chatHistory.pop();
-                } else {
-                    addMessage(data.response, 'bot');
-                    chatHistory.push({ role: 'model', parts: [data.response] });
-                }
-            } catch (error) {
-                thinkingMsg.remove();
-                addMessage('Connection error. Please try again.', 'bot');
-                chatHistory.pop();
-                console.error("Chat Error:", error);
-            }
-        });
-
-        function addMessage(text, type) {
-            const msgDiv = document.createElement('div');
-            msgDiv.className = `p-3 rounded-xl max-w-[90%] ${type}-message mb-3`;
-
-            if (type === 'user') {
-                msgDiv.classList.add('ml-auto', 'text-right');
-                msgDiv.textContent = text;
-            } else {
-                msgDiv.classList.add('mr-auto');
-                if (text) {
-                    msgDiv.innerHTML = marked.parse(text);
-                }
-            }
-
-            chatMessages.appendChild(msgDiv);
-            chatMessages.scrollTop = chatMessages.scrollHeight;
-            return msgDiv;
-        }
-
-        // Smooth scrolling
-        document.documentElement.style.scrollBehavior = 'smooth';
-    </script>
-</body>
+
+        function handleFileSelect(file) {
+            if (!file.type.startsWith('image/')) {
+                alert('Please select an image file.');
+                return;
+            }
+            if (file.size > 10 * 1024 * 1024) {
+                alert('File size must be less than 10MB.');
+                return;
+            }
+            
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                imagePreview.src = e.target.result;
+                imagePreviewContainer.classList.remove('hidden');
+                uploadZone.style.display = 'none';
+            };
+            reader.readAsDataURL(file);
+        }
+
+        uploadForm.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            if (!fileUploadHidden.files[0]) {
+                alert("Please select an image file first.");
+                return;
+            }
+            
+            const submitButton = uploadForm.querySelector('button[type="submit"]');
+            const originalText = submitButton.innerHTML;
+            submitButton.disabled = true;
+            submitButton.innerHTML = `
+                <div class="flex items-center">
+                    <div class="flex space-x-1 mr-2">
+                        <div class="typing-dot"></div>
+                        <div class="typing-dot"></div>
+                        <div class="typing-dot"></div>
+                    </div>
+                    Analyzing...
+                </div>
+            `;
+            
+            // Reset states
+            resultsSection.classList.add('hidden');
+            chatCard.classList.add('opacity-50', 'pointer-events-none');
+            chatStatus.textContent = 'Analyzing';
+            chatStatus.className = 'bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs';
+            chatInput.disabled = true;
+            chatSubmit.disabled = true;
+            
+            chatMessages.innerHTML = `
+                <div class="bot-message p-3 rounded-xl max-w-[90%]">
+                    <div class="flex items-center mb-2">
+                        <div class="flex space-x-1 mr-2">
+                            <div class="typing-dot"></div>
+                            <div class="typing-dot"></div>
+                            <div class="typing-dot"></div>
+                        </div>
+                        <span class="text-xs text-gray-500">ANALYZING</span>
+                    </div>
+                    Processing your medical image...
+                </div>
+            `;
+            
+            predictionContext = null;
+            chatHistory = [];
+            promptsContainer.innerHTML = '';
+
+            try {
+                const formData = new FormData(uploadForm);
+                const response = await fetch('/predict', { method: 'POST', body: formData });
+                const data = await response.json();
+
+                if (data.error) {
+                    alert(`Error: ${data.error}`);
+                    return;
+                }
+                
+                predictionContext = data;
+                resultsSection.classList.remove('hidden');
+                
+                predictionOutput.innerHTML = `
+                    <div class="bg-gradient-to-r from-indigo-50 to-purple-50 p-6 rounded-xl border border-indigo-200">
+                        <div class="flex items-center justify-between mb-4">
+                            <span class="text-sm font-semibold text-indigo-600 bg-indigo-100 px-3 py-1 rounded-full">${data.model_used}</span>
+                            <span class="text-2xl font-bold text-gray-900">${(data.confidence * 100).toFixed(1)}%</span>
+                        </div>
+                        <h3 class="text-2xl font-bold text-gray-900 mb-3">${data.prediction}</h3>
+                        <div class="bg-gray-200 rounded-full h-3 overflow-hidden">
+                            <div class="progress-bar h-3 rounded-full" style="width: ${(data.confidence * 100).toFixed(0)}%"></div>
+                        </div>
+                    </div>
+                `;
+                
+                originalImage.src = `${data.original_image}?t=${new Date().getTime()}`;
+
+                if (data.gradcam_image) {
+                    gradcamImage.src = `${data.gradcam_image}?t=${new Date().getTime()}`;
+                    gradcamImage.classList.remove('hidden');
+                    gradcamPlaceholder.classList.add('hidden');
+                } else {
+                    gradcamImage.classList.add('hidden');
+                    gradcamPlaceholder.classList.remove('hidden');
+                }
+                
+                // Activate chat
+                chatCard.classList.remove('opacity-50', 'pointer-events-none');
+                chatStatus.textContent = 'Active';
+                chatStatus.className = 'bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs';
+                
+                chatMessages.innerHTML = '';
+                addMessage("Analysis complete! Ask me anything about the results.", 'bot');
+                chatInput.disabled = false;
+                chatSubmit.disabled = false;
+                
+                if (data.predefined_prompts) {
+                    data.predefined_prompts.forEach(prompt => {
+                        const btn = document.createElement('button');
+                        btn.textContent = prompt;
+                        btn.className = 'bg-indigo-100 text-indigo-700 text-sm px-3 py-1 rounded-full hover:bg-indigo-200 transition-all';
+                        btn.onclick = () => { 
+                            chatInput.value = prompt; 
+                            chatForm.requestSubmit(); 
+                        };
+                        promptsContainer.appendChild(btn);
+                    });
+                }
+
+            } catch (error) {
+                alert('An unexpected error occurred.');
+                console.error("Prediction Error:", error);
+            } finally {
+                submitButton.disabled = false;
+                submitButton.innerHTML = originalText;
+            }
+        });
+
+        chatForm.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const message = chatInput.value.trim();
+            if (!message || !predictionContext) return;
+
+            addMessage(message, 'user');
+            chatHistory.push({ role: 'user', parts: [message] });
+            chatInput.value = '';
+            promptsContainer.innerHTML = '';
+
+            const thinkingMsg = addMessage('', 'bot');
+            thinkingMsg.innerHTML = `
+                <div class="flex items-center">
+                    <div class="flex space-x-1 mr-2">
+                        <div class="typing-dot"></div>
+                        <div class="typing-dot"></div>
+                        <div class="typing-dot"></div>
+                    </div>
+                    <span class="text-sm text-gray-500">Thinking...</span>
+                </div>
+            `;
+
+            try {
+                const response = await fetch('/chat', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ message, context: predictionContext, history: chatHistory })
+                });
+                const data = await response.json();
+                
+                thinkingMsg.remove();
+                if (data.error) {
+                    addMessage(`Error: ${data.error}`, 'bot');
+                    chatHistory.pop();
+                } else {
+                    addMessage(data.response, 'bot');
+                    chatHistory.push({ role: 'model', parts: [data.response] });
+                }
+            } catch (error) {
+                thinkingMsg.remove();
+                addMessage('Connection error. Please try again.', 'bot');
+                chatHistory.pop();
+                console.error("Chat Error:", error);
+            }
+        });
+
+        function addMessage(text, type) {
+            const msgDiv = document.createElement('div');
+            msgDiv.className = `p-3 rounded-xl max-w-[90%] ${type}-message mb-3`;
+
+            if (type === 'user') {
+                msgDiv.classList.add('ml-auto', 'text-right');
+                msgDiv.textContent = text;
+            } else {
+                msgDiv.classList.add('mr-auto');
+                if (text) {
+                    msgDiv.innerHTML = marked.parse(text);
+                }
+            }
+
+            chatMessages.appendChild(msgDiv);
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+            return msgDiv;
+        }
+
+        // Load example images when model changes
+        async function loadExamples() {
+            try {
+                const res = await fetch('/example_images');
+                const data = await res.json();
+                cachedExamples = Array.isArray(data.images) ? data.images : [];
+                renderExamples();
+            } catch (e) {
+                console.error('Failed to load examples', e);
+                cachedExamples = [];
+                renderExamples();
+            }
+        }
+
+        function renderExamples() {
+            examplesContainer.innerHTML = '';
+            if (!cachedExamples.length) {
+                examplesEmpty.classList.remove('hidden');
+                return;
+            }
+            examplesEmpty.classList.add('hidden');
+            // Show up to 9 examples
+            cachedExamples.slice(0, 9).forEach((url) => {
+                const card = document.createElement('button');
+                card.type = 'button';
+                card.className = 'relative group rounded-xl overflow-hidden shadow hover:shadow-lg transition focus:outline-none focus:ring-2 focus:ring-indigo-500';
+                card.title = 'Use this example';
+                card.onclick = () => selectExample(url);
+                card.innerHTML = `
+                    <img src="${url}" alt="example" class="w-full h-24 object-cover">
+                    <div class="absolute inset-0 bg-black/0 group-hover:bg-black/20"></div>
+                `;
+                examplesContainer.appendChild(card);
+            });
+        }
+
+        async function selectExample(url) {
+            try {
+                const resp = await fetch(url);
+                const blob = await resp.blob();
+                const inferredName = url.split('/').pop() || 'example.png';
+                const file = new File([blob], inferredName, { type: blob.type || 'image/png' });
+
+                // Put into the hidden file input
+                const dt = new DataTransfer();
+                dt.items.add(file);
+                fileUploadHidden.files = dt.files;
+
+                // Reuse existing preview logic
+                handleFileSelect(file);
+            } catch (e) {
+                console.error('Failed to select example', e);
+                alert('Unable to load example image.');
+            }
+        }
+
+        modelSelect.addEventListener('change', loadExamples);
+        refreshExamplesBtn.addEventListener('click', loadExamples);
+
+        // Initial load for default selection
+        loadExamples();
+
+        // Smooth scrolling
+        document.documentElement.style.scrollBehavior = 'smooth';
+    </script>
+</body>
 </html>