Spaces:

CerebroScan
/

app

Sleeping

App Files Files Community

Sameh108 commited on Dec 8, 2025

Commit

333c8a0

verified ·

1 Parent(s): a4f0bb0

add show suggestion button

Browse files

Files changed (1) hide show

templates/index.html +164 -58

templates/index.html CHANGED Viewed

@@ -4,95 +4,201 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/brain.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="NeuraScan - Advanced AI-powered brain MRI Alzheimer's disease analysis tool for medical professionals" />
-    <meta name="author" content="Team 2 Batch 59 Biomedical Engineering Department Faculty of Engineering Helwan University" />
-    <title>NeuraScan | AI Brain MRI Alzheimer's Disease Analysis</title>
     <script type="module" crossorigin src="/assets/index-DBG8gcSd.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-CtQJEsfm.css">
     <style>
-      #new-scan-btn {
         position: fixed;
         bottom: 20px;
         right: 20px;
-        background-color: #2563eb; /* Blue to match medical theme */
         color: white;
         border: none;
         padding: 12px 24px;
         border-radius: 50px;
-        font-family: system-ui, -apple-system, sans-serif;
-        font-weight: 600;
         cursor: pointer;
-        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-        transition: all 0.2s;
-        z-index: 9999;
-        display: none; /* Hidden by default until needed */
-      }
-      #new-scan-btn:hover {
-        background-color: #1d4ed8;
-        transform: translateY(-2px);
-        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
       }
     </style>
   </head>
   <body>
     <div id="root"></div>
-    <button id="new-scan-btn" onclick="resetApp()">Start New Scan</button>
-    <script>
-      // --- Feature 1: The "New Scan" Button ---
-      // Since we can't easily reset React's state from outside,
-      // the cleanest way to "clear" the result is to reload the page.
-      function resetApp() {
-        window.location.reload();
-      }
-      // Automatically show the button when the user clicks "Analyze"
-      // (We guess this by listening for clicks on the page)
-      document.addEventListener('click', function(e) {
-        // Simple logic: If they clicked a button, show the "New Scan" option after 2 seconds
-        if (e.target.tagName === 'BUTTON' && e.target.id !== 'new-scan-btn') {
           setTimeout(() => {
-            document.getElementById('new-scan-btn').style.display = 'block';
-          }, 2000);
         }
-      });
-      // --- Feature 2: Clipboard Paste Support (Ctrl+V) ---
       document.addEventListener('paste', function(event) {
-        // 1. Find the file input in the React app
         const fileInput = document.querySelector('input[type="file"]');
-        if (!fileInput) {
-          console.log("No file input found. You might be on the results screen.");
-          return;
-        }
-        // 2. Get the image from clipboard
         const items = (event.clipboardData || event.originalEvent.clipboardData).items;
-        let blob = null;
         for (let i = 0; i < items.length; i++) {
           if (items[i].type.indexOf('image') !== -1) {
-            blob = items[i].getAsFile();
-            break;
           }
         }
-        // 3. Force the image into React
-        if (blob) {
-          // We need to simulate a proper file upload event
-          const dataTransfer = new DataTransfer();
-          dataTransfer.items.add(blob);
-          fileInput.files = dataTransfer.files;
-          // Dispatch the 'change' event so React notices the new file
-          const changeEvent = new Event('change', { bubbles: true });
-          fileInput.dispatchEvent(changeEvent);
-          console.log("Image pasted successfully!");
-        }
       });
     </script>
   </body>

     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/brain.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="NeuraScan - Advanced AI-powered brain MRI Alzheimer's disease analysis tool" />
+    <title>NeuraScan | AI Brain MRI Analysis</title>
     <script type="module" crossorigin src="/assets/index-DBG8gcSd.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-CtQJEsfm.css">
     <style>
+      #uncertainty-modal {
+        display: none;
+        position: fixed;
+        bottom: 20px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 90%;
+        max-width: 480px;
+        background: #ffffff;
+        border-radius: 16px;
+        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+        z-index: 10000;
+        padding: 24px;
+        border: 1px solid #fee2e2;
+        font-family: system-ui, -apple-system, sans-serif;
+        animation: slideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+      }
+      @keyframes slideUp {
+        from { transform: translate(-50%, 100%); opacity: 0; }
+        to { transform: translate(-50%, 0); opacity: 1; }
+      }
+      .modal-header {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        color: #991b1b;
+        margin-bottom: 12px;
+      }
+      .modal-title { font-weight: 700; font-size: 1.125rem; }
+      .modal-body {
+        color: #374151;
+        font-size: 0.95rem;
+        line-height: 1.6;
+        margin-bottom: 20px;
+      }
+      .suggestion-box {
+        background: #eff6ff;
+        padding: 16px;
+        border-radius: 8px;
+        margin-top: 15px;
+        display: none;
+        border-left: 4px solid #3b82f6;
+        color: #1e3a8a;
+      }
+      .btn-group { display: flex; gap: 12px; margin-top: 5px; }
+      .btn {
+        flex: 1;
+        padding: 10px 16px;
+        border: none;
+        border-radius: 8px;
+        font-weight: 600;
+        cursor: pointer;
+        transition: all 0.2s;
+        font-size: 0.9rem;
+      }
+      .btn-reveal {
+        background-color: #2563eb;
+        color: white;
+        box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.2);
+      }
+      .btn-reveal:hover { background-color: #1d4ed8; transform: translateY(-1px); }
+      .btn-reset {
+        background-color: #f3f4f6;
+        color: #4b5563;
+        border: 1px solid #e5e7eb;
+      }
+      .btn-reset:hover { background-color: #e5e7eb; }
+      #global-reset-btn {
         position: fixed;
         bottom: 20px;
         right: 20px;
+        background: #10b981;
         color: white;
         border: none;
         padding: 12px 24px;
         border-radius: 50px;
         cursor: pointer;
+        font-weight: 600;
+        z-index: 999;
+        display: none;
+        box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3);
+        transition: transform 0.2s;
       }
+      #global-reset-btn:hover { transform: scale(1.05); }
     </style>
   </head>
   <body>
     <div id="root"></div>
+    <button id="global-reset-btn" onclick="window.location.reload()">
+      <span style="font-size: 1.2em; vertical-align: middle;">↻</span> New Scan
+    </button>
+    <div id="uncertainty-modal">
+      <div class="modal-header">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
+        <div class="modal-title">Low Confidence Warning</div>
+      </div>
+      <div class="modal-body">
+        The model is less than <strong>80% confident</strong>.
+        <br>This result is marked as "Not Sure" for safety.
+        <br>Would you like to see the AI's best guess?
+        <div id="suggestion-content" class="suggestion-box">
+          <strong>Top Suggestion:</strong> <span id="suggestion-text" style="font-size: 1.1em; font-weight: bold;">---</span>
+        </div>
+      </div>
+      <div class="btn-group">
+        <button class="btn btn-reset" onclick="window.location.reload()">Try Another Image</button>
+        <button class="btn btn-reveal" id="reveal-btn" onclick="revealSuggestion()">Show Suggestion</button>
+      </div>
+    </div>
+    <script>
+      const originalFetch = window.fetch;
+      window.fetch = async function(...args) {
+        const response = await originalFetch(...args);
+        const url = args[0].toString();
+        if (url.includes('/api/classify') && response.ok) {
           setTimeout(() => {
+             document.getElementById('global-reset-btn').style.display = 'block';
+          }, 1000);
+          const clone = response.clone();
+          clone.json().then(data => {
+            if (data.is_uncertain === true) {
+              showUncertaintyModal(data.top_class_suggestion);
+            }
+          }).catch(err => console.log("Silent interceptor error:", err));
         }
+        return response;
+      };
+      function showUncertaintyModal(suggestion) {
+        const modal = document.getElementById('uncertainty-modal');
+        const textSpan = document.getElementById('suggestion-text');
+        textSpan.innerText = suggestion || "Unknown Class";
+        modal.style.display = 'block';
+      }
+      function revealSuggestion() {
+        document.getElementById('suggestion-content').style.display = 'block';
+        document.getElementById('reveal-btn').style.display = 'none';
+      }
       document.addEventListener('paste', function(event) {
         const fileInput = document.querySelector('input[type="file"]');
+        if (!fileInput) return;
         const items = (event.clipboardData || event.originalEvent.clipboardData).items;
         for (let i = 0; i < items.length; i++) {
           if (items[i].type.indexOf('image') !== -1) {
+            const blob = items[i].getAsFile();
+            const dataTransfer = new DataTransfer();
+            dataTransfer.items.add(blob);
+            fileInput.files = dataTransfer.files;
+            const changeEvent = new Event('change', { bubbles: true });
+            fileInput.dispatchEvent(changeEvent);
+            console.log("Image pasted directly from clipboard!");
+            break;
           }
         }
       });
     </script>
   </body>