Update app.py

app.py

@@ -9,7 +9,6 @@ sys.modules["pyaudioop"] = audioop_mock
 import gradio as gr
 import modal
 from PIL import Image
-import numpy as np
 import io
 import datetime
 from huggingface_hub import InferenceClient
@@ -18,7 +17,7 @@ from reportlab.lib import colors
 from reportlab.lib.units import cm
 from reportlab.platypus import SimpleDocTemplate, Paragraph, Spacer, Image as RLImage, Table, TableStyle, HRFlowable
 from reportlab.lib.styles import getSampleStyleSheet, ParagraphStyle
-from reportlab.lib.enums import TA_CENTER, TA_LEFT
+from reportlab.lib.enums import TA_CENTER
 
 print("All imports OK")
 
@@ -109,7 +108,6 @@ def generate_pdf(original_image, annotated_image, seen, alert, explanation):
     story.append(Spacer(1, 0.2*cm))
     story.append(HRFlowable(width="100%", thickness=2, color=colors.HexColor('#203a43')))
     story.append(Spacer(1, 0.4*cm))
-
     story.append(Paragraph("Segmentation Output", section_style))
     img_width, img_height = 8.5*cm, 6.5*cm
     orig_buf = io.BytesIO(); original_image.save(orig_buf, format="PNG"); orig_buf.seek(0)
@@ -125,14 +123,12 @@ def generate_pdf(original_image, annotated_image, seen, alert, explanation):
         ('BOX',(0,0),(0,0),0.5,colors.HexColor('#dddddd')),
         ('BOX',(1,0),(1,0),0.5,colors.HexColor('#dddddd')),]))
     story.append(img_table); story.append(Spacer(1, 0.5*cm))
-
     story.append(Paragraph("Safety Assessment", section_style))
     if any(d in alert for d in DANGER_CLASSES):
         story.append(Paragraph(f"WARNING: {alert}", danger_style))
     else:
         story.append(Paragraph(f"SAFE: {alert}", safe_style))
     story.append(Spacer(1, 0.4*cm))
-
     story.append(Paragraph("Detected Tissues & Instruments", section_style))
     table_data = [["Structure", "Confidence", "Risk Level"]]
     rows_danger = []
@@ -159,12 +155,10 @@ def generate_pdf(original_image, annotated_image, seen, alert, explanation):
         if is_danger: det_style.append(('FONTNAME',(2,r),(2,r),'Helvetica-Bold'))
     det_table.setStyle(TableStyle(det_style))
     story.append(det_table); story.append(Spacer(1, 0.5*cm))
-
     story.append(HRFlowable(width="100%", thickness=0.5, color=colors.HexColor('#cccccc')))
     story.append(Spacer(1, 0.3*cm))
     story.append(Paragraph("Anatomy Teaching Note", section_style))
     story.append(Paragraph(explanation, body_style)); story.append(Spacer(1, 0.5*cm))
-
     story.append(HRFlowable(width="100%", thickness=0.5, color=colors.HexColor('#cccccc')))
     story.append(Spacer(1, 0.3*cm))
     model_data = [
@@ -192,12 +186,65 @@ def generate_pdf(original_image, annotated_image, seen, alert, explanation):
     return pdf_path
 
 
+LOADING_HTML = """
+<div id="surgi-loader" style="display:none; text-align:center; padding: 32px 20px;
+  background: linear-gradient(135deg,#0f2027,#203a43); border-radius:14px; margin:12px 0;">
+  <div style="display:inline-block; position:relative; width:70px; height:70px; margin-bottom:16px;">
+    <div style="position:absolute;inset:0;border:3px solid rgba(255,255,255,0.08);
+      border-top:3px solid #4f98a3; border-radius:50%;
+      animation:surgiSpin 0.85s linear infinite;"></div>
+    <div style="position:absolute;inset:-12px;border:2px solid rgba(79,152,163,0.15);
+      border-top:2px solid rgba(79,152,163,0.5); border-radius:50%;
+      animation:surgiSpin 1.7s linear infinite reverse;"></div>
+    <div style="position:absolute;inset:22px;background:#4f98a3;border-radius:50%;
+      animation:surgiPulse 1.2s ease-in-out infinite;"></div>
+  </div>
+  <div style="color:white;font-size:1rem;font-weight:500;letter-spacing:0.03em;">
+    🔬 Analysing surgical frame...
+  </div>
+  <div style="color:rgba(255,255,255,0.4);font-size:0.75rem;margin-top:6px;letter-spacing:0.07em;text-transform:uppercase;">
+    Running YOLOv8 on Modal GPU
+  </div>
+  <div style="margin-top:14px;">
+    <span style="display:inline-block;width:7px;height:7px;background:#4f98a3;border-radius:50%;
+      margin:0 4px;animation:surgiDot 1.2s ease-in-out infinite;"></span>
+    <span style="display:inline-block;width:7px;height:7px;background:#4f98a3;border-radius:50%;
+      margin:0 4px;animation:surgiDot 1.2s ease-in-out 0.2s infinite;"></span>
+    <span style="display:inline-block;width:7px;height:7px;background:#4f98a3;border-radius:50%;
+      margin:0 4px;animation:surgiDot 1.2s ease-in-out 0.4s infinite;"></span>
+  </div>
+</div>
+<style>
+@keyframes surgiSpin { to { transform: rotate(360deg); } }
+@keyframes surgiPulse { 0%,100%{opacity:0.4;transform:scale(0.8)} 50%{opacity:1;transform:scale(1.1)} }
+@keyframes surgiDot { 0%,100%{opacity:0.3;transform:translateY(0)} 50%{opacity:1;transform:translateY(-4px)} }
+</style>
+<script>
+(function() {
+  function hookRunButton() {
+    var btn = document.querySelector('#run-btn button');
+    if (!btn) { setTimeout(hookRunButton, 600); return; }
+    btn.addEventListener('click', function() {
+      document.getElementById('surgi-loader').style.display = 'block';
+    });
+  }
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function() { setTimeout(hookRunButton, 800); });
+  } else {
+    setTimeout(hookRunButton, 800);
+  }
+})();
+</script>
+"""
+
+
 def segment_image(input_image, conf_threshold=0.25):
     global last_result, chat_context
     if input_image is None:
         return (None, "Please upload a surgical frame to begin.", "No image provided.",
                 "No explanation yet.", gr.update(visible=False), gr.update(visible=False),
-                gr.update(visible=False), gr.update(visible=False), gr.update(visible=False), [])
+                gr.update(visible=False), gr.update(visible=False), gr.update(visible=False), [],
+                gr.update(value=LOADING_HTML.replace('display:block','display:none')))
 
     detector = get_detector()
     image_bytes = pil_to_bytes(input_image)
@@ -252,12 +299,19 @@ def segment_image(input_image, conf_threshold=0.25):
         f"I've analysed the frame. Detected: **{', '.join(tissue_list) if tissue_list else 'no tissues'}**.\n\n"
         f"{explanation}\n\nFeel free to ask me anything about these structures or general laparoscopic surgery!"}]
 
+    # Return hidden loader HTML to replace it (hides the spinner)
+    hidden_loader = LOADING_HTML.replace(
+        'id="surgi-loader" style="display:none;',
+        'id="surgi-loader" style="display:none; visibility:hidden;'
+    )
+
     return (annotated_image, summary, alert, explanation,
             gr.update(visible=True), gr.update(visible=True),
             gr.update(value=q1, visible=bool(q1)),
             gr.update(value=q2, visible=bool(q2)),
             gr.update(value=q3, visible=bool(q3)),
-            initial_chat)
+            initial_chat,
+            gr.update(value=hidden_loader))
 
 
 def chat_response(message, history):
@@ -312,91 +366,6 @@ body { font-family: 'Inter', sans-serif; }
 .footer-note { text-align: center; font-size: 0.78rem; color: #888; margin-top: 16px; padding-bottom: 24px; }
 #suggested-q button { background: rgba(32,58,67,0.08) !important; border: 1px solid #203a43 !important; color: #203a43 !important; border-radius: 999px !important; font-size: 0.82rem !important; padding: 6px 14px !important; }
 #suggested-q button:hover { background: #203a43 !important; color: white !important; }
-
-/* ── Loading overlay animation ── */
-#loading-overlay {
-  display: none;
-  position: fixed;
-  top: 0; left: 0; right: 0; bottom: 0;
-  background: rgba(10, 20, 25, 0.88);
-  z-index: 9999;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  color: white;
-  font-family: 'Inter', sans-serif;
-  backdrop-filter: blur(4px);
-}
-#loading-overlay.active { display: flex; }
-.scan-ring {
-  width: 80px; height: 80px;
-  border: 4px solid rgba(255,255,255,0.08);
-  border-top: 4px solid #4f98a3;
-  border-right: 4px solid #4f98a3;
-  border-radius: 50%;
-  animation: spin 0.9s linear infinite;
-  margin-bottom: 24px;
-}
-.scan-ring-outer {
-  width: 110px; height: 110px;
-  border: 2px solid rgba(79,152,163,0.2);
-  border-top: 2px solid rgba(79,152,163,0.6);
-  border-radius: 50%;
-  animation: spin 1.8s linear infinite reverse;
-  position: absolute;
-}
-.scan-center {
-  display: flex; flex-direction: column;
-  align-items: center; justify-content: center;
-  position: relative; margin-bottom: 28px;
-  width: 110px; height: 110px;
-}
-@keyframes spin { to { transform: rotate(360deg); } }
-@keyframes pulse { 0%,100% { opacity:0.6; } 50% { opacity:1; } }
-.scan-text { font-size: 1.05rem; font-weight: 500; letter-spacing: 0.04em; }
-.scan-sub { font-size: 0.78rem; opacity: 0.45; margin-top: 8px; letter-spacing: 0.06em; text-transform: uppercase; }
-.scan-dots span {
-  display: inline-block; width: 6px; height: 6px;
-  background: #4f98a3; border-radius: 50%; margin: 0 3px;
-  animation: pulse 1.2s ease-in-out infinite;
-}
-.scan-dots span:nth-child(2) { animation-delay: 0.2s; }
-.scan-dots span:nth-child(3) { animation-delay: 0.4s; }
-"""
-
-loading_overlay_html = """
-<div id="loading-overlay">
-  <div class="scan-center">
-    <div class="scan-ring-outer"></div>
-    <div class="scan-ring"></div>
-  </div>
-  <div class="scan-text">🔬 Analysing surgical frame</div>
-  <div class="scan-dots" style="margin-top:10px">
-    <span></span><span></span><span></span>
-  </div>
-  <div class="scan-sub">Running YOLOv8 on Modal GPU</div>
-</div>
-<script>
-  window.showSurgiLoader = function() {
-    document.getElementById('loading-overlay').classList.add('active');
-  };
-  window.hideSurgiLoader = function() {
-    document.getElementById('loading-overlay').classList.remove('active');
-  };
-  // Attach to run button after Gradio renders
-  function attachLoader() {
-    var btn = document.querySelector('#run-btn button');
-    if (btn) {
-      btn.addEventListener('click', function() {
-        window.showSurgiLoader();
-      });
-    } else {
-      setTimeout(attachLoader, 500);
-    }
-  }
-  document.addEventListener('DOMContentLoaded', attachLoader);
-  setTimeout(attachLoader, 1500);
-</script>
 """
 
 header_html = """
@@ -404,7 +373,7 @@ header_html = """
   <h1>🔬 Surgical Tissue Segmentation</h1>
   <p>Upload a laparoscopic surgery frame — or click any example below. The AI identifies tissues, flags danger zones, and explains anatomy for surgical trainees.</p>
   <div class="badge-row">
-    <span class="badge">YOLOv26-seg</span><span class="badge">Llama 3.1 8B</span>
+    <span class="badge">YOLOv26n-seg</span><span class="badge">Llama 3.1 8B</span>
     <span class="badge">Modal GPU</span><span class="badge">CholecSeg8k Dataset</span>
     <span class="badge">13 Classes</span><span class="badge">mAP50: 0.581</span>
   </div>
@@ -413,7 +382,6 @@ header_html = """
 
 with gr.Blocks(title="SurgiSight — Surgical Tissue Segmentation") as demo:
     gr.HTML(header_html)
-    gr.HTML(loading_overlay_html)
 
     with gr.Row():
         with gr.Column(scale=1):
@@ -425,6 +393,9 @@ with gr.Blocks(title="SurgiSight — Surgical Tissue Segmentation") as demo:
         with gr.Column(scale=1):
             output_img = gr.Image(type="pil", label="Output — Segmented Result", height=350)
 
+    # Loading animation — shown by JS on click, hidden when Python returns
+    loader_html = gr.HTML(value=LOADING_HTML)
+
     danger_box = gr.Textbox(label="⚠ Safety Alert", lines=2, elem_id="danger-box",
         placeholder="Safety alert will appear here...")
     output_text = gr.Textbox(label="Detected Tissues & Confidence", lines=6, elem_id="output-text",
@@ -455,16 +426,11 @@ with gr.Blocks(title="SurgiSight — Surgical Tissue Segmentation") as demo:
 
     gr.HTML('<div class="footer-note">All footage from CholecSeg8k research dataset (MICCAI 2020). No patient data. &nbsp;|&nbsp; Built for Build Small Hackathon 2026</div>')
 
-    # Run segmentation — show loader on click, hide when done
     run_btn.click(
-        fn=None, js="() => window.showSurgiLoader()"
-    ).then(
         fn=segment_image,
         inputs=[input_img, conf_slider],
         outputs=[output_img, output_text, danger_box, explain_box,
-                 pdf_btn, chat_section, sq1, sq2, sq3, chatbot]
-    ).then(
-        fn=None, js="() => window.hideSurgiLoader()"
+                 pdf_btn, chat_section, sq1, sq2, sq3, chatbot, loader_html]
     )
 
     pdf_btn.click(fn=export_pdf, inputs=[], outputs=[pdf_output]