Update templates/index.html

templates/index.html

@@ -66,6 +66,71 @@
             line-height: 1.8;
         }
 
+        .github-link {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            color: #667eea;
+            text-decoration: none;
+            font-weight: 600;
+            font-size: 1.1em;
+            padding: 10px 20px;
+            background: white;
+            border: 2px solid #667eea;
+            border-radius: 8px;
+            transition: all 0.3s;
+            margin: 20px 0;
+        }
+
+        .github-link:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+            background: #667eea;
+            color: white;
+        }
+
+        .test-button {
+            background: #6c757d;
+            color: white;
+            padding: 12px 30px;
+            border: none;
+            border-radius: 25px;
+            font-size: 1.1em;
+            cursor: pointer;
+            transition: transform 0.2s;
+            margin-left: 10px;
+        }
+
+        .test-button:hover {
+            background: #5a6268;
+            transform: scale(1.05);
+        }
+
+        .result-image-container {
+            position: relative;
+            margin-bottom: 20px;
+        }
+
+        .result-image {
+            max-width: 100%;
+            max-height: 300px;
+            border-radius: 10px;
+            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+        }
+
+        .result-overlay {
+            position: absolute;
+            top: 10px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: rgba(0, 0, 0, 0.8);
+            color: white;
+            padding: 10px 20px;
+            border-radius: 8px;
+            font-size: 1.2em;
+            font-weight: bold;
+        }
+
         .upload-section {
             text-align: center;
             padding: 40px;
@@ -284,6 +349,14 @@
             <div class="info-box">
                 <h3>🤖 About the Model</h3>
                 <p>This tool uses an integrated ensemble of VGG16 and ResNet50V2 deep learning models trained on the CBIS-DDSM dataset. The model combines transfer learning with custom classification layers to analyze mammogram images and predict breast cancer classification.</p>
+                <div style="margin-top: 15px;">
+                    <a href="https://github.com/koesan/Breast_Cancer_Classification" target="_blank" class="github-link">
+                        <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+                            <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+                        </svg>
+                        View on GitHub
+                    </a>
+                </div>
             </div>
 
             <div class="error" id="errorMessage"></div>
@@ -296,6 +369,9 @@
                 <button class="upload-button" onclick="document.getElementById('fileInput').click()">
                     Choose File
                 </button>
+                <button class="test-button" onclick="testExample()">
+                    🧪 Test Example
+                </button>
             </div>
 
             <div class="preview-section" id="previewSection">
@@ -314,6 +390,10 @@
             </div>
 
             <div class="result-section" id="resultSection">
+                <div class="result-image-container" id="resultImageContainer" style="display: none;">
+                    <img id="resultImage" class="result-image" alt="Result">
+                    <div class="result-overlay" id="resultOverlay"></div>
+                </div>
                 <div class="result-title" id="resultTitle"></div>
                 <div class="confidence-bar">
                     <div class="confidence-fill" id="confidenceFill"></div>
@@ -424,12 +504,50 @@
             }
         }
 
-        function showResult(data) {
+        function testExample() {
+            // Show loading
+            document.getElementById('loading').style.display = 'block';
+            document.getElementById('uploadSection').style.display = 'none';
+            document.getElementById('previewSection').style.display = 'none';
+            document.getElementById('resultSection').style.display = 'none';
+            document.getElementById('errorMessage').style.display = 'none';
+
+            fetch('/test-example', {
+                method: 'POST'
+            })
+            .then(response => response.json())
+            .then(data => {
+                document.getElementById('loading').style.display = 'none';
+                if (data.error) {
+                    showError(data.error);
+                } else {
+                    showResult(data, true);
+                }
+            })
+            .catch(error => {
+                document.getElementById('loading').style.display = 'none';
+                showError('Failed to analyze example: ' + error.message);
+            });
+        }
+
+        function showResult(data, showImage = false) {
             const resultSection = document.getElementById('resultSection');
             const resultTitle = document.getElementById('resultTitle');
             const confidenceFill = document.getElementById('confidenceFill');
             const benignProb = document.getElementById('benignProb');
             const malignantProb = document.getElementById('malignantProb');
+            const resultImageContainer = document.getElementById('resultImageContainer');
+            const resultImage = document.getElementById('resultImage');
+            const resultOverlay = document.getElementById('resultOverlay');
+
+            // Show image if available
+            if (showImage && data.image) {
+                resultImage.src = data.image;
+                resultOverlay.textContent = data.class;
+                resultImageContainer.style.display = 'block';
+            } else {
+                resultImageContainer.style.display = 'none';
+            }
 
             // Update content
             resultTitle.textContent = `Classification: ${data.class}`;