Spaces:

filmm
/

leukemia

Runtime error

App Files Files Community

filmm commited on May 27

Commit

896f826

verified ·

1 Parent(s): 7589f08

Upload 3 files

Browse files

Files changed (3) hide show

templates/index.html +266 -0
templates/result.html +202 -0
templates/upload.html +178 -0

templates/index.html ADDED Viewed

	@@ -0,0 +1,266 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>WhiteCell.AI – AI BIO LAB INTERFACE</title>
+  <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@600&display=swap" rel="stylesheet">
+  <style>
+    body {
+      margin: 0;
+      font-family: 'Orbitron', sans-serif;
+      background: radial-gradient(ellipse at center, #050b14 0%, #000000 100%);
+      color: #e0f2ff;
+      overflow-x: hidden;
+    }
+    header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 1rem 2rem;
+      background: rgba(2, 6, 17, 0.3); /* ใสกว่าของเดิม */
+  backdrop-filter: blur(10px);    /* เพิ่มเบลอ */
+  box-shadow: 0 0 15px rgba(0, 238, 255, 0.1); /* เรืองแสงเบา ๆ */
+  border-bottom: 1px solid rgba(0, 255, 255, 0.05);
+    }
+    .logo {
+      font-size: 1.5rem;
+      color: #00d9ff;
+      display: flex;
+      align-items: center;
+    }
+    nav a {
+      color: #8eefff;
+      margin-left: 1.5rem;
+      text-decoration: none;
+      transition: 0.3s;
+    }
+   nav a:hover {
+  color: #ffffff;
+  text-shadow: 0 0 10px #00eaff;
+}
+    main {
+      text-align: center;
+      padding: 6rem 2rem 4rem;
+    }
+    h1 {
+      font-size: 2.5rem;
+      margin-bottom: 1rem;
+      text-shadow: 0 0 20px #00eaff;
+    }
+    .btn-launch {
+      padding: 1rem 2rem;
+      border: none;
+      background: #00bfff;
+      color: white;
+      font-size: 1.2rem;
+      border-radius: 1rem;
+      cursor: pointer;
+      box-shadow: 0 0 20px #00eaff;
+      transition: transform 0.3s, box-shadow 0.3s;
+      text-decoration: none;   /* ✅ สำคัญ: ลบเส้นใต้ */
+      display: inline-block;   /* ✅ ให้ปุ่มมีขนาดตามเนื้อหา */
+    }
+    .btn-launch:hover {
+      transform: scale(1.05);
+      box-shadow: 0 0 30px #00eaff;
+    }
+    .background-animation {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100vw;
+      height: 100vh;
+      background: radial-gradient(circle at 30% 30%, #0a1628 0%, #020611 100%);
+      z-index: -1;
+      overflow: hidden;
+    }
+    #stars div {
+      position: absolute;
+      width: 2px;
+      height: 2px;
+      background-color: rgba(255, 255, 255, 0.8);
+      border-radius: 50%;
+      animation: twinkle 4s infinite ease-in-out;
+    }
+    nav a {
+  position: relative;
+  color: #8eefff;
+  margin-left: 1.5rem;
+  text-decoration: none;
+  transition: 0.3s;
+}
+nav a::after {
+  content: "";
+  position: absolute;
+  width: 0%;
+  height: 2px;
+  bottom: -4px;
+  left: 0;
+  background: #00eaff;
+  box-shadow: 0 0 8px #00eaff;
+  transition: width 0.3s ease;
+}
+nav a:hover::after {
+  width: 100%;
+}
+.logo:hover {
+  animation: glitch 0.5s infinite;
+  text-shadow: 0 0 5px #0ff, 0 0 10px #0ff;
+}
+@keyframes glitch {
+  0% { transform: translate(0); }
+  20% { transform: translate(-1px, 1px); }
+  40% { transform: translate(1px, -1px); }
+  60% { transform: translate(-1px, -1px); }
+  80% { transform: translate(1px, 1px); }
+  100% { transform: translate(0); }
+}
+    @keyframes twinkle {
+      0%, 100% {
+        opacity: 0.2;
+        transform: scale(1);
+      }
+      50% {
+        opacity: 1;
+        transform: scale(1.4);
+      }
+    }
+    @keyframes pulse-bg {
+      from { background-position: 0 0; }
+      to { background-position: 40px 40px; }
+    }
+    .scene {
+      width: 300px;
+      height: 300px;
+      perspective: 1000px;
+      margin: 0 auto 2rem;
+    }
+    .dna {
+      width: 100%;
+      height: 100%;
+      position: relative;
+      transform-style: preserve-3d;
+      animation: rotate 12s linear infinite;
+    }
+    .pair {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform-style: preserve-3d;
+    }
+    .ball {
+      width: 14px;
+      height: 14px;
+      border-radius: 50%;
+      background: rgba(0, 255, 255, 0.9);
+      box-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
+      position: absolute;
+    }
+    .connector {
+      width: 60px;
+      height: 2px;
+      background: linear-gradient(to right, rgba(0,255,255,0.6), rgba(255,255,255,0.2), rgba(0,255,255,0.6));
+      position: absolute;
+      top: 6px;
+      left: -30px;
+      transform-origin: center;
+    }
+    @keyframes rotate {
+      0% { transform: rotateY(0deg); }
+      100% { transform: rotateY(360deg); }
+    }
+  </style>
+</head>
+<body>
+  <!-- ✅ พื้นหลัง + จุดแสง -->
+  <div class="background-animation">
+    <div id="stars"></div>
+  </div>
+  <header>
+    <div class="logo">🧬 WhiteCell.AI</div>
+    <nav>
+      <a href="/upload" class="btn btn-primary">Upload</a>
+      <a href="#scan">Scan</a>
+      <a href="#results">Results</a>
+      <a href="#assistant">Assistant</a>
+    </nav>
+  </header>
+  <main>
+    <div class="scene">
+      <div class="dna" id="dna"></div>
+    </div>
+    <h1>AI-Powered Blood Cell Detection</h1>
+    <a href="/upload" class="btn-launch">🧬 Launch AI Scan</a>
+  </main>
+  <script>
+    const dna = document.getElementById('dna');
+    const pairs = 40;
+    for (let i = 0; i < pairs; i++) {
+      const pair = document.createElement('div');
+      pair.className = 'pair';
+      const angle = (i / pairs) * 360;
+      const y = (i - pairs / 2) * 8;
+      pair.style.transform = `rotateY(${angle}deg) translateZ(120px) translateY(${y}px)`;
+      const ball1 = document.createElement('div');
+      ball1.className = 'ball';
+      ball1.style.left = '-40px';
+      const ball2 = document.createElement('div');
+      ball2.className = 'ball';
+      ball2.style.left = '40px';
+      const connector = document.createElement('div');
+      connector.className = 'connector';
+      connector.style.transform = `rotate(${i % 2 === 0 ? 30 : -30}deg)`;
+      pair.appendChild(ball1);
+      pair.appendChild(ball2);
+      pair.appendChild(connector);
+      dna.appendChild(pair);
+    }
+    // ✅ จุดแสงแบบดาว
+    const starsContainer = document.getElementById('stars');
+    for (let i = 0; i < 100; i++) {
+      const star = document.createElement('div');
+      star.style.top = Math.random() * 100 + 'vh';
+      star.style.left = Math.random() * 100 + 'vw';
+      const size = (Math.random() * 1.5 + 1);
+      star.style.width = size + 'px';
+      star.style.height = size + 'px';
+      star.style.animationDuration = (Math.random() * 4 + 3) + 's';
+      starsContainer.appendChild(star);
+    }
+  </script>
+</body>
+</html>

templates/result.html ADDED Viewed

	@@ -0,0 +1,202 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>Scan Result</title>
+  <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@600&display=swap" rel="stylesheet">
+  <style>
+    body {
+      font-family: 'Orbitron', sans-serif;
+      background: radial-gradient(circle at center, #050b14 0%, #000000 100%);
+      color: #e0f2ff;
+      text-align: center;
+      padding: 2rem;
+      margin: 0;
+      overflow-x: hidden;
+    }
+    /* ✅ พื้นหลังอวกาศ */
+    .space-bg {
+      position: fixed;
+      top: 0; left: 0;
+      width: 100vw; height: 100vh;
+      z-index: -1;
+      background: radial-gradient(ellipse at center, #0c1a2b, #000);
+      overflow: hidden;
+    }
+    .star {
+      position: absolute;
+      width: 2px;
+      height: 2px;
+      background: white;
+      border-radius: 50%;
+      animation: twinkle 3s infinite ease-in-out;
+    }
+    @keyframes twinkle {
+      0%, 100% { opacity: 0.2; transform: scale(1); }
+      50% { opacity: 1; transform: scale(1.5); }
+    }
+    .uploaded-image {
+      max-width: 600px;
+      width: 100%;
+      height: auto;
+      border-radius: 1rem;
+      margin: 1rem 0;
+      box-shadow: 0 0 20px #00eaff;
+    }
+    .result-box {
+      margin-top: 1.5rem;
+      background: rgba(0, 255, 255, 0.07);
+      padding: 1.8rem;
+      border-radius: 1.5rem;
+      box-shadow: 0 0 25px rgba(0, 255, 255, 0.15);
+      max-width: 700px;
+      margin-left: auto;
+      margin-right: auto;
+    }
+    .btn {
+      padding: 0.8rem 2rem;
+      background: #00bfff;
+      border: none;
+      color: white;
+      font-size: 1.1rem;
+      border-radius: 1rem;
+      margin-top: 2rem;
+      cursor: pointer;
+      box-shadow: 0 0 20px #00eaff;
+      text-decoration: none;
+    }
+    .btn:hover {
+      box-shadow: 0 0 30px #00ffff;
+      transform: scale(1.05);
+    }
+    .score, .highlight {
+      font-size: 1.3rem;
+      margin: 0.6rem 0;
+    }
+    .highlight span {
+      color: #00eaff;
+      font-weight: bold;
+    }
+    .risk-level {
+      font-size: 1.5rem;
+      margin-top: 1.5rem;
+    }
+    .risk-low { color: #6aff6a; }
+    .risk-medium { color: #ffe066; }
+    .risk-high { color: #ff4d4d; }
+    .combined-risk-box {
+      margin-top: 1.5rem;
+      font-size: 1.8rem;
+      color: #00ffff;
+      font-weight: bold;
+      text-shadow: 0 0 10px #00ffff;
+    }
+    .info-box {
+      margin-top: 1rem;
+      font-size: 1.05rem;
+      color: #9cefff;
+    }
+    summary {
+      cursor: pointer;
+      font-size: 1.1rem;
+      color: #00eaff;
+    }
+    details p {
+      margin-top: 1rem;
+      line-height: 1.6;
+      font-size: 0.95rem;
+      color: #c4f1ff;
+    }
+  </style>
+</head>
+<body>
+  <!-- ✅ พื้นหลังอวกาศแบบเคลื่อนไหว -->
+  <div class="space-bg" id="space-bg"></div>
+  <h1>🔬 AI Scan Result</h1>
+  <p>🧪 Original Image:</p>
+  <img src="{{ url_for('static', filename='uploads/' + filename) }}" class="uploaded-image" alt="Original Image">
+  <h2>🧬 Image with Detection:</h2>
+  <img src="{{ url_for('static', filename=marked_filename) }}" class="uploaded-image" alt="Detected Image">
+  <div class="result-box">
+    <div class="highlight">🧬 ปกเซลล์ผิดปกติ (Blast): <span>{{ abnormal_cells }}</span> เซลล์</div>
+    <div class="highlight">➡️ ความเสี่ยงจาก Blast = <span class="count" data-target="{{ blast_risk }}">0</span>%</div>
+    <div class="highlight">🧠 HuggingFace Model: <span class="count" data-target="{{ huggingface_score }}">0</span>% โอกาสเป็นลูคีเมีย</div>
+    <div class="risk-level {% if combined_risk < 20 %}risk-low{% elif combined_risk < 60 %}risk-medium{% else %}risk-high{% endif %}">
+      ✅ สรุปผล: ความเสี่ยงระดับ
+      <strong>
+        {% if combined_risk < 20 %}ต่ำ
+        {% elif combined_risk < 60 %}ปานกลาง
+        {% else %}สูง
+        {% endif %}
+      </strong>
+    </div>
+    <div class="combined-risk-box">💡 ความเสี่ยงรวม: <span class="count" data-target="{{ combined_risk }}">0</span>%</div>
+    <div class="info-box">📋 ปัจจัยเสริม: {{ sex }} อายุ {{ age }} ปี</div>
+  </div>
+  <a href="/" class="btn">🔁 Scan Another</a>
+  <details style="margin-top: 2rem;">
+    <summary>❓ อธิบายผลการตรวจ</summary>
+    <p>
+      🔹 <strong>ความเสี่ยงจาก Blast</strong>: คำนวณจากจำนวนเซลล์เม็ดเลือดขาวที่มีลักษณะผิดปกติ (Blast) เทียบกับเซลล��เม็ดเลือดขาวทั้งหมดที่ตรวจพบในภาพ<br><br>
+      🔹 <strong>HuggingFace Model</strong>: วิเคราะห์ภาพรวมด้วยโมเดล AI ที่ผ่านการเทรนมาสำหรับแยกแยะภาพกลุ่มผู้ป่วยลูคีเมียและไม่เป็นลูคีเมีย โดยประเมินความเสี่ยงจากมุมมองรวมของภาพ<br><br>
+      📌 หากค่าทั้งสองมีความต่างกันมาก แนะนำให้ปรึกษาแพทย์เพื่อยืนยันผล และไม่ควรตัดสินใจรักษาโดยยึดจาก AI เพียงอย่างเดียว
+    </p>
+  </details>
+  <!-- ✅ Animated Number Counter -->
+  <script>
+    const counters = document.querySelectorAll('.count');
+    counters.forEach(counter => {
+      counter.innerText = '0';
+      const update = () => {
+        const target = +counter.getAttribute('data-target');
+        const current = +counter.innerText;
+        const increment = target / 60;
+        if (current < target) {
+          counter.innerText = (current + increment).toFixed(1);
+          setTimeout(update, 20);
+        } else {
+          counter.innerText = target.toFixed(1);
+        }
+      };
+      update();
+    });
+    // ⭐ ใส่ดาวในพื้นหลัง
+    const bg = document.getElementById('space-bg');
+    for (let i = 0; i < 80; i++) {
+      const star = document.createElement('div');
+      star.classList.add('star');
+      star.style.top = `${Math.random() * 100}vh`;
+      star.style.left = `${Math.random() * 100}vw`;
+      star.style.animationDuration = `${Math.random() * 3 + 2}s`;
+      star.style.opacity = Math.random();
+      bg.appendChild(star);
+    }
+  </script>
+</body>
+</html>

templates/upload.html ADDED Viewed

	@@ -0,0 +1,178 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>WhiteCell.AI – Upload</title>
+  <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@600&display=swap" rel="stylesheet">
+  <style>
+    body {
+      margin: 0;
+      font-family: 'Orbitron', sans-serif;
+      background: radial-gradient(ellipse at center, #050b14 0%, #000000 100%);
+      color: #e0f2ff;
+      height: 100vh;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      overflow: hidden;
+    }
+    .background-animation {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100vw;
+      height: 100vh;
+      background: radial-gradient(circle at 30% 30%, #0a1628 0%, #020611 100%);
+      z-index: -1;
+      overflow: hidden;
+    }
+    #stars div {
+      position: absolute;
+      width: 2px;
+      height: 2px;
+      background-color: rgba(255, 255, 255, 0.8);
+      border-radius: 50%;
+      animation: twinkle 4s infinite ease-in-out;
+    }
+    @keyframes twinkle {
+      0%, 100% { opacity: 0.2; transform: scale(1); }
+      50% { opacity: 1; transform: scale(1.4); }
+    }
+    .upload-panel {
+      background: rgba(0, 255, 255, 0.05);
+      padding: 2.5rem;
+      border-radius: 1.5rem;
+      border: 1px solid rgba(0, 255, 255, 0.2);
+      box-shadow: 0 0 30px rgba(0, 255, 255, 0.2);
+      text-align: center;
+      max-width: 420px;
+      width: 100%;
+    }
+    h2 {
+      font-size: 1.6rem;
+      color: #00ffff;
+      text-shadow: 0 0 10px #00ffff;
+      margin-bottom: 1rem;
+    }
+    label {
+      font-size: 0.9rem;
+      color: #8eefff;
+    }
+    select, input[type="number"] {
+      padding: 0.5rem 1rem;
+      border-radius: 0.7rem;
+      border: 1px solid #00eaff;
+      background: #06131f;
+      color: #e0f2ff;
+      width: 200px;
+      margin-top: 0.3rem;
+      margin-bottom: 1rem;
+      text-align: center;
+    }
+    .drop-zone {
+      border: 2px dashed #00eaff;
+      padding: 1.5rem;
+      border-radius: 1rem;
+      width: 90%;
+      cursor: pointer;
+      position: relative;
+      background: rgba(0, 255, 255, 0.03);
+      margin-bottom: 1rem;
+    }
+    .drop-zone input[type="file"] {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      opacity: 0;
+      cursor: pointer;
+      top: 0;
+      left: 0;
+    }
+    .file-name {
+      margin-top: 0.6rem;
+      font-size: 0.85rem;
+      color: #8eefff;
+    }
+    .start-button {
+      background: #00bfff;
+      border: none;
+      color: white;
+      padding: 0.9rem 2rem;
+      border-radius: 1rem;
+      font-size: 1.1rem;
+      box-shadow: 0 0 20px #00eaff;
+      cursor: pointer;
+      transition: all 0.3s ease;
+    }
+    .start-button:hover {
+      box-shadow: 0 0 30px #00ffff;
+      transform: scale(1.05);
+    }
+  </style>
+</head>
+<body>
+  <!-- ⭐ พื้นหลังอวกาศ -->
+  <div class="background-animation">
+    <div id="stars"></div>
+  </div>
+  <!-- 🧬 กล่องอัปโหลด -->
+  <div class="upload-panel">
+    <h2>🧬 Upload Microscopic Image</h2>
+    <form method="POST" enctype="multipart/form-data" action="/upload">
+      <label>เพศ:</label><br>
+      <select name="sex" required>
+        <option value="">เลือกเพศ</option>
+        <option value="male">ชาย</option>
+        <option value="female">หญิง</option>
+      </select><br>
+      <label>อายุ:</label><br>
+      <input type="number" name="age" min="1" max="120" required><br>
+      <div class="drop-zone">
+  <label for="fileInput" class="start-button">📂 Choose Image</label>
+  <input type="file" name="file" id="fileInput" required style="display: none;" onchange="updateFileName()">
+  <p id="file-name">No file selected...</p>
+</div>
+      <button type="submit" class="start-button">🚀 Begin AI Scan</button>
+    </form>
+  </div>
+  <!-- ✨ Script จุดดาว -->
+  <script>
+    const starsContainer = document.getElementById('stars');
+    for (let i = 0; i < 100; i++) {
+      const star = document.createElement('div');
+      star.style.top = Math.random() * 100 + 'vh';
+      star.style.left = Math.random() * 100 + 'vw';
+      const size = Math.random() * 1.5 + 1;
+      star.style.width = size + 'px';
+      star.style.height = size + 'px';
+      star.style.animationDuration = (Math.random() * 4 + 3) + 's';
+      starsContainer.appendChild(star);
+    }
+    function updateFileName() {
+      const input = document.getElementById('fileInput');
+      const nameDisplay = document.getElementById('file-name');
+      nameDisplay.textContent = input.files.length > 0 ? input.files[0].name : "No file selected...";
+    }
+  </script>
+</body>
+</html>