Spaces:

CerebroScan
/

app

Sleeping

App Files Files Community

itsLu commited on Dec 17, 2025

Commit

79be0b0

verified ·

1 Parent(s): a5b01e6

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +197 -64

templates/index.html CHANGED Viewed

@@ -59,6 +59,28 @@
       cursor: pointer;
     }
     main {
       display: grid;
       grid-template-columns: 1.2fr 1fr;
@@ -66,6 +88,10 @@
       padding: 0 28px 28px;
     }
     .card {
       background: var(--card);
       border: 1px solid var(--border);
@@ -75,15 +101,7 @@
     h2 { margin-top: 0; }
-    .upload-box {
-      border: 2px dashed var(--border);
-      border-radius: 12px;
-      padding: 20px;
-      text-align: center;
-      margin-top: 12px;
-    }
-    select, button {
       padding: 8px 12px;
       border-radius: 8px;
       border: 1px solid var(--border);
@@ -98,120 +116,234 @@
       cursor: pointer;
     }
     .team {
       display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 12px;
     }
     .member {
       display: flex;
       align-items: center;
-      gap: 10px;
     }
     .member img {
-      width: 40px;
-      height: 40px;
       border-radius: 50%;
       object-fit: cover;
-    }
-    .examples img {
-      width: 100%;
-      border-radius: 12px;
-      margin-top: 8px;
     }
     footer {
-      padding: 12px 28px;
-      font-size: 12px;
       color: var(--muted);
     }
   </style>
 </head>
 <body>
 <header>
   <div class="brand">
-    <img src="{{ url_for('static', filename='assets/brain/brain.svg') }}" alt="NeuraScan">
     <div>
       <strong>NeuraScan</strong><br>
       <small class="muted">AI-assisted MRI screening (demo)</small>
     </div>
   </div>
-  <button id="themeToggle" class="chip">Light</button>
 </header>
-<main>
-  <div class="card">
-    <h2>New scan</h2>
-    <label>Model</label><br>
-    <select id="modelSelect"></select><br><br>
-    <input type="file" id="fileInput" accept="image/*"><br><br>
-    <button class="primary">Run scan</button>
-    <div class="upload-box">
-      Drag & drop, paste (Ctrl+V), or upload an MRI image
-    </div>
-  </div>
-  <div class="card">
-    <h2>Examples</h2>
-    <div class="examples">
-      <img src="{{ url_for('static', filename='assets/brain/supportedexample.jpg') }}">
-      <img src="{{ url_for('static', filename='assets/brain/unsupportedexample.jpg') }}">
-    </div>
-    <h2 style="margin-top:20px;">Team</h2>
-    <div class="team">
-      <div class="member">
-        <img src="{{ url_for('static', filename='assets/images/team/asem.jpg') }}">
-        <div>Asem<br><small>ML / Deployment</small></div>
       </div>
-      <div class="member">
-        <img src="{{ url_for('static', filename='assets/images/team/sameh.jpg') }}">
-        <div>Sameh<br><small>ML / Research</small></div>
       </div>
-      <div class="member">
-        <img src="{{ url_for('static', filename='assets/images/team/fatma.jpg') }}">
-        <div>Fatma<br><small>Data / QA</small></div>
       </div>
-      <div class="member">
-        <img src="{{ url_for('static', filename='assets/images/team/gehad.jpg') }}">
-        <div>Gehad<br><small>Frontend</small></div>
       </div>
     </div>
-  </div>
-</main>
 <footer>
-  This is an educational demo and not medical advice.
 </footer>
 <script>
   async function loadModels() {
     const res = await fetch("/api/models");
-    const models = await res.json();
     const select = document.getElementById("modelSelect");
     select.innerHTML = "";
-    models.forEach(m => {
       const opt = document.createElement("option");
       opt.value = m.id;
       opt.textContent = m.name;
-      if (!m.available) opt.disabled = true;
       select.appendChild(opt);
     });
   }
   function setTheme(theme) {
     document.documentElement.dataset.theme = theme;
     localStorage.setItem("theme", theme);
-    document.getElementById("themeToggle").textContent =
-      theme === "dark" ? "Light" : "Dark";
   }
   document.getElementById("themeToggle").onclick = () => {
@@ -222,5 +354,6 @@
   setTheme(localStorage.getItem("theme") || "dark");
   loadModels();
 </script>
 </body>
 </html>

       cursor: pointer;
     }
+    nav {
+      padding: 0 28px 20px;
+      display: flex;
+      gap: 10px;
+    }
+    .tab {
+      border: 1px solid var(--border);
+      background: transparent;
+      color: var(--text);
+      padding: 6px 14px;
+      border-radius: 999px;
+      cursor: pointer;
+    }
+    .tab.active {
+      background: rgba(79,124,255,.15);
+    }
+    .section { display: none; }
+    .section.show { display: block; }
     main {
       display: grid;
       grid-template-columns: 1.2fr 1fr;
       padding: 0 28px 28px;
     }
+    @media (max-width: 900px) {
+      main { grid-template-columns: 1fr; }
+    }
     .card {
       background: var(--card);
       border: 1px solid var(--border);
     h2 { margin-top: 0; }
+    select, button, input {
       padding: 8px 12px;
       border-radius: 8px;
       border: 1px solid var(--border);
       cursor: pointer;
     }
+    .upload-box {
+      border: 2px dashed var(--border);
+      border-radius: 12px;
+      padding: 20px;
+      text-align: center;
+      margin-top: 12px;
+      color: var(--muted);
+    }
+    .preview {
+      margin-top: 12px;
+      background: black;
+      border-radius: 12px;
+      overflow: hidden;
+      max-height: 360px;
+    }
+    .preview img {
+      width: 100%;
+      height: 100%;
+      max-height: 360px;
+      object-fit: contain;
+      display: block;
+    }
+    .result {
+      margin-top: 14px;
+    }
+    .result-title {
+      font-size: 22px;
+      font-weight: 700;
+    }
+    .result-msg {
+      color: var(--muted);
+    }
+    .examples img {
+      width: 100%;
+      max-height: 300px;
+      object-fit: contain;
+      background: black;
+      border-radius: 12px;
+      margin-top: 8px;
+    }
     .team {
       display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: 14px;
+      margin-top: 12px;
     }
     .member {
       display: flex;
       align-items: center;
+      gap: 12px;
     }
     .member img {
+      width: 48px;
+      height: 48px;
       border-radius: 50%;
       object-fit: cover;
+      cursor: pointer;
     }
     footer {
+      padding: 12px 28px 24px;
+      font-size: 13px;
       color: var(--muted);
+      border-top: 1px solid var(--border);
     }
   </style>
 </head>
 <body>
 <header>
   <div class="brand">
+    <img src="{{ url_for('static', filename='assets/brain/brain.svg') }}">
     <div>
       <strong>NeuraScan</strong><br>
       <small class="muted">AI-assisted MRI screening (demo)</small>
     </div>
   </div>
+  <button id="themeToggle" class="chip">☀️</button>
 </header>
+<nav>
+  <button class="tab active" onclick="showSection('scan', this)">Scan</button>
+  <button class="tab" onclick="showSection('info', this)">Info</button>
+</nav>
+<!-- SCAN -->
+<section id="scan" class="section show">
+  <main>
+    <div class="card">
+      <h2>New scan</h2>
+      <label>Model</label><br>
+      <select id="modelSelect"></select><br><br>
+      <input type="file" id="fileInput" accept="image/*"><br><br>
+      <button class="primary" onclick="runScan()">Run scan</button>
+      <div class="upload-box">
+        Drag & drop, paste (Ctrl+V), or upload an MRI image
+      </div>
+      <div class="preview">
+        <img id="previewImg">
       </div>
+      <div class="result">
+        <div id="resultTitle" class="result-title">—</div>
+        <div id="resultMsg" class="result-msg">Upload an image to begin.</div>
+        <button id="likelyBtn" style="display:none;margin-top:10px;" onclick="showLikely()">
+          Show most likely result
+        </button>
       </div>
+    </div>
+    <div class="card">
+      <h2>Examples</h2>
+      <div class="examples">
+        <img src="{{ url_for('static', filename='assets/brain/supportedexample.jpg') }}">
+        <img src="{{ url_for('static', filename='assets/brain/unsupportedexample.jpg') }}">
       </div>
+      <h2 style="margin-top:20px;">Team</h2>
+      <div class="team">
+        <div class="member">
+          <img src="{{ url_for('static', filename='assets/images/team/fatma.jpg') }}" onclick="window.open('https://www.linkedin.com/in/fatma-al-zahraa-emad-326b64234/')">
+          <span>Fatma Al-Zahraa Emad</span>
+        </div>
+        <div class="member">
+          <img src="{{ url_for('static', filename='assets/images/team/gehad.jpg') }}" onclick="window.open('https://www.linkedin.com/in/gehad-mohamed-2a4946252/')">
+          <span>Gehad Mohamed</span>
+        </div>
+        <div class="member">
+          <img src="{{ url_for('static', filename='assets/images/team/hebatullah.jpg') }}" onclick="window.open('https://www.linkedin.com/in/hebatullah-elgazoly-308ab2243/')">
+          <span>Hebatullah El Gazoly</span>
+        </div>
+        <div class="member">
+          <img src="{{ url_for('static', filename='assets/images/team/assem.jpg') }}" onclick="window.open('https://www.linkedin.com/in/mohamedasem318/')">
+          <span>Mohamed Assem</span>
+        </div>
+        <div class="member">
+          <img src="{{ url_for('static', filename='assets/images/team/sameh.jpg') }}" onclick="window.open('https://www.linkedin.com/in/muhamedsameh/')">
+          <span>Mohamed Sameh</span>
+        </div>
       </div>
     </div>
+  </main>
+</section>
+<!-- INFO -->
+<section id="info" class="section">
+  <main>
+    <div class="card">
+      <h2>About NeuraScan</h2>
+      <p>
+        NeuraScan is a demo system for Alzheimer’s stage classification from MRI scans.
+        If model confidence is below a conservative threshold, the system reports
+        <b>Uncertain</b> instead of a potentially incorrect diagnosis.
+      </p>
+      <h2 style="margin-top:20px;">Under the supervision of:</h2>
+      <p>
+        Prof. Muhammad Sayed Hammad<br>
+        Eng. Heidi Ahmed
+      </p>
+    </div>
+  </main>
+</section>
 <footer>
+  Contact: <a href="mailto:mohamedasem318@gmail.com">Mohamed Assem</a> •
+  <a href="mailto:mohamed.sameh8103@gmail.com">Mohamed Sameh</a><br>
+  Educational demo — not medical advice
 </footer>
 <script>
+  function showSection(id, btn) {
+    document.querySelectorAll('.section').forEach(s => s.classList.remove('show'));
+    document.getElementById(id).classList.add('show');
+    document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+    btn.classList.add('active');
+  }
   async function loadModels() {
     const res = await fetch("/api/models");
+    const data = await res.json();
     const select = document.getElementById("modelSelect");
     select.innerHTML = "";
+    data.models.forEach(m => {
       const opt = document.createElement("option");
       opt.value = m.id;
       opt.textContent = m.name;
       select.appendChild(opt);
     });
+    select.value = data.default_model_id;
+  }
+  document.getElementById("fileInput").addEventListener("change", e => {
+    const img = document.getElementById("previewImg");
+    img.src = URL.createObjectURL(e.target.files[0]);
+  });
+  function runScan() {
+    document.getElementById("resultTitle").textContent = "Uncertain";
+    document.getElementById("resultMsg").textContent = "Consult a professional.";
+    document.getElementById("likelyBtn").style.display = "inline-block";
+  }
+  function showLikely() {
+    alert("Most likely: Healthy");
   }
   function setTheme(theme) {
     document.documentElement.dataset.theme = theme;
     localStorage.setItem("theme", theme);
+    document.getElementById("themeToggle").textContent = theme === "dark" ? "☀️" : "🌙";
   }
   document.getElementById("themeToggle").onclick = () => {
   setTheme(localStorage.getItem("theme") || "dark");
   loadModels();
 </script>
 </body>
 </html>