Upload folder using huggingface_hub

app.py

@@ -10,7 +10,9 @@ import zipfile
 import tempfile
 from pathlib import Path
 import cv2
-from datetime import datetime
+import requests
+from datetime import datetime, timedelta
+import json
 import base64
 import io
 
@@ -24,19 +26,18 @@ class CometDetectorAPI:
         self.transform = transforms.Compose([
             transforms.Normalize(mean=[0.485, 0.456, 0.406], std=[0.229, 0.224, 0.225])
         ])
-    
+
     def fetch_soho_recent(self):
-        """Generate demo SOHO data"""
-        images = []
-        for i in range(12):
-            # Create synthetic comet-like data with a moving bright spot
-            img = np.random.rand(1024, 1024) * 20
-            # Add a "comet" that moves
-            y, x = 400 + i * 10, 300 + i * 15
-            img[max(0,y-30):min(1024,y+30), max(0,x-30):min(1024,x+30)] += 100
-            images.append(img.astype(np.float32))
-        return np.array(images)
-    
+        """Fetch recent SOHO data (demo implementation)"""
+        try:
+            images = []
+            for i in range(12):
+                img = np.random.rand(1024, 1024) * 50 + np.random.rand(1024, 1024) * 50
+                images.append(img.astype(np.float32))
+            return np.array(images), "Live SOHO Data (Demo)"
+        except Exception as e:
+            return None, str(e)
+
     def load_fits_from_zip(self, zip_file):
         images = []
         with tempfile.TemporaryDirectory() as tmpdir:
@@ -54,7 +55,7 @@ class CometDetectorAPI:
                 except:
                     continue
         return np.array(images)
-    
+
     def create_difference_images(self, images):
         diff_images = []
         for i in range(len(images) - 1):
@@ -62,7 +63,7 @@ class CometDetectorAPI:
             diff_images.append(diff)
         max_proj = np.max(np.abs(np.array(diff_images)), axis=0)
         return max_proj
-    
+
     def classify_image(self, max_proj):
         img = (max_proj - max_proj.min()) / (max_proj.max() - max_proj.min() + 1e-8)
         img = cv2.resize(img, (512, 512))
@@ -75,65 +76,337 @@ class CometDetectorAPI:
             pred_class = torch.argmax(probs, dim=1).item()
             confidence = probs[0][pred_class].item()
         return pred_class, confidence
-    
-    def generate_html_result(self, images, max_proj, pred_class, confidence, source, num_images):
-        """Generate HTML result card"""
-        
-        # Create matplotlib figure
+
+    def generate_visualization(self, images, max_proj, pred_class, confidence):
         plt.style.use('dark_background')
         fig, axes = plt.subplots(1, 2, figsize=(14, 6))
         fig.patch.set_facecolor('#0a0e27')
-        
+
         axes[0].imshow(images[0], cmap='gray')
         axes[0].set_title('Original Frame', fontsize=12, color='#00d9ff')
         axes[0].axis('off')
-        
+
         axes[1].imshow(max_proj, cmap='hot')
         if pred_class == 1:
             axes[1].set_title('COMET DETECTED', fontsize=14, color='#00ff88', weight='bold')
         else:
             axes[1].set_title('Background', fontsize=12, color='#ffb366')
         axes[1].axis('off')
-        
+
         plt.tight_layout()
-        
+
         buf = io.BytesIO()
         plt.savefig(buf, format='png', facecolor='#0a0e27', dpi=100)
         buf.seek(0)
         img_base64 = base64.b64encode(buf.read()).decode()
         plt.close()
-        
-        # Generate HTML result card
-        status_class = "status-detected" if pred_class == 1 else "status-not-detected"
-        status_text = "🌟 COMET DETECTED!" if pred_class == 1 else "🌑 No Comet Activity"
-        border_class = "result-detected" if pred_class == 1 else "result-not-detected"
-        
-        confidence_pct = int(confidence * 100)
-        timestamp = datetime.utcnow().strftime('%Y-%m-%d %H:%M:%S UTC')
-        
-        html = f"""
-        <div class="results {border_class}" style="display: block;">
+
+        return f"data:image/png;base64,{img_base64}"
+
+    def analyze_uploaded(self, zip_file):
+        if zip_file is None:
+            return {"error": "No file uploaded"}
+
+        try:
+            images = self.load_fits_from_zip(zip_file.name)
+            if len(images) < 2:
+                return {"error": "Need at least 2 FITS images"}
+
+            max_proj = self.create_difference_images(images)
+            pred_class, confidence = self.classify_image(max_proj)
+            img_data = self.generate_visualization(images, max_proj, pred_class, confidence)
+
+            return {
+                "success": True,
+                "detected": bool(pred_class),
+                "confidence": float(confidence),
+                "num_images": len(images),
+                "source": "Uploaded Data",
+                "timestamp": datetime.utcnow().isoformat(),
+                "image": img_data
+            }
+        except Exception as e:
+            return {"error": str(e)}
+
+    def analyze_soho_live(self):
+        try:
+            images, source = self.fetch_soho_recent()
+            if images is None:
+                return {"error": "Failed to fetch SOHO data"}
+
+            max_proj = self.create_difference_images(images)
+            pred_class, confidence = self.classify_image(max_proj)
+            img_data = self.generate_visualization(images, max_proj, pred_class, confidence)
+
+            return {
+                "success": True,
+                "detected": bool(pred_class),
+                "confidence": float(confidence),
+                "num_images": len(images),
+                "source": source,
+                "timestamp": datetime.utcnow().isoformat(),
+                "image": img_data
+            }
+        except Exception as e:
+            return {"error": str(e)}
+
+detector = CometDetectorAPI('best_model.pth')
+
+custom_html = """
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>COMET-SEE Mission Control</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Share+Tech+Mono&display=swap');
+
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body { font-family: 'Share Tech Mono', monospace; background: #000; color: #fff; overflow-x: hidden; }
+        #canvas-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
+        .container { position: relative; z-index: 1; max-width: 1400px; margin: 0 auto; padding: 20px; }
+
+        .header {
+            text-align: center; padding: 40px 20px;
+            background: linear-gradient(135deg, rgba(10, 14, 39, 0.9) 0%, rgba(0, 20, 40, 0.8) 100%);
+            border-radius: 20px; border: 2px solid rgba(0, 217, 255, 0.3);
+            box-shadow: 0 0 40px rgba(0, 217, 255, 0.2); margin-bottom: 30px;
+            backdrop-filter: blur(10px);
+        }
+
+        .title {
+            font-family: 'Orbitron', sans-serif; font-size: 4em; font-weight: 900;
+            background: linear-gradient(135deg, #00d9ff 0%, #00ff88 50%, #ff00ff 100%);
+            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
+            text-shadow: 0 0 30px rgba(0, 217, 255, 0.5); margin-bottom: 10px;
+            animation: glow 2s ease-in-out infinite alternate;
+        }
+
+        @keyframes glow {
+            from { filter: drop-shadow(0 0 5px rgba(0, 217, 255, 0.5)); }
+            to { filter: drop-shadow(0 0 20px rgba(0, 217, 255, 0.8)); }
+        }
+
+        .subtitle {
+            font-size: 1.2em; color: #00d9ff; letter-spacing: 3px; margin-bottom: 20px;
+        }
+
+        .team { font-size: 1.1em; color: #00ff88; margin-top: 15px; }
+        .team-member {
+            display: inline-block; padding: 5px 15px; margin: 0 10px;
+            background: rgba(0, 255, 136, 0.1); border: 1px solid #00ff88;
+            border-radius: 20px; font-weight: bold;
+            animation: pulse 2s ease-in-out infinite;
+        }
+
+        @keyframes pulse {
+            0%, 100% { transform: scale(1); }
+            50% { transform: scale(1.05); }
+        }
+
+        .control-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 30px; }
+
+        .panel {
+            background: linear-gradient(135deg, rgba(10, 14, 39, 0.95) 0%, rgba(0, 20, 40, 0.9) 100%);
+            border-radius: 15px; padding: 30px; border: 2px solid rgba(0, 217, 255, 0.3);
+            backdrop-filter: blur(10px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+            transition: all 0.3s ease;
+        }
+
+        .panel:hover {
+            border-color: rgba(0, 217, 255, 0.6);
+            box-shadow: 0 8px 40px rgba(0, 217, 255, 0.3);
+            transform: translateY(-5px);
+        }
+
+        .panel-title {
+            font-family: 'Orbitron', sans-serif; font-size: 1.5em; color: #00d9ff;
+            margin-bottom: 20px; text-transform: uppercase; letter-spacing: 2px;
+        }
+
+        .upload-zone {
+            border: 3px dashed rgba(0, 217, 255, 0.5); border-radius: 10px;
+            padding: 40px; text-align: center; cursor: pointer;
+            transition: all 0.3s ease; background: rgba(0, 217, 255, 0.05);
+        }
+
+        .upload-zone:hover {
+            border-color: #00d9ff; background: rgba(0, 217, 255, 0.1);
+        }
+
+        .upload-icon { font-size: 3em; margin-bottom: 15px; }
+        input[type="file"] { display: none; }
+
+        .btn {
+            font-family: 'Orbitron', sans-serif; padding: 15px 40px; font-size: 1.1em;
+            border: none; border-radius: 10px; cursor: pointer; text-transform: uppercase;
+            font-weight: bold; letter-spacing: 2px; transition: all 0.3s ease;
+            margin: 10px; position: relative; overflow: hidden;
+        }
+
+        .btn-primary {
+            background: linear-gradient(135deg, #00d9ff 0%, #00ff88 100%); color: #000;
+        }
+
+        .btn-secondary {
+            background: linear-gradient(135deg, #ff00ff 0%, #ff0080 100%); color: #fff;
+        }
+
+        .btn:hover {
+            transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0, 217, 255, 0.5);
+        }
+
+        .results {
+            background: linear-gradient(135deg, rgba(10, 14, 39, 0.95) 0%, rgba(0, 20, 40, 0.9) 100%);
+            border-radius: 15px; padding: 30px; border: 2px solid rgba(0, 217, 255, 0.3);
+            backdrop-filter: blur(10px); display: none; animation: slideIn 0.5s ease;
+        }
+
+        @keyframes slideIn {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+
+        .result-detected { border-color: #00ff88; box-shadow: 0 0 40px rgba(0, 255, 136, 0.3); }
+        .result-not-detected { border-color: #ffb366; box-shadow: 0 0 40px rgba(255, 179, 102, 0.3); }
+
+        .result-header { text-align: center; margin-bottom: 30px; }
+        .result-status { font-family: 'Orbitron', sans-serif; font-size: 2.5em; font-weight: bold; margin-bottom: 10px; }
+        .status-detected { color: #00ff88; text-shadow: 0 0 20px rgba(0, 255, 136, 0.8); }
+        .status-not-detected { color: #ffb366; text-shadow: 0 0 20px rgba(255, 179, 102, 0.8); }
+
+        .confidence-bar {
+            width: 100%; height: 30px; background: rgba(255, 255, 255, 0.1);
+            border-radius: 15px; overflow: hidden; margin: 20px 0;
+        }
+
+        .confidence-fill {
+            height: 100%; background: linear-gradient(90deg, #00d9ff 0%, #00ff88 100%);
+            transition: width 1s ease; display: flex; align-items: center;
+            justify-content: center; font-weight: bold; color: #000;
+        }
+
+        .result-image {
+            width: 100%; border-radius: 10px; margin: 20px 0;
+            border: 2px solid rgba(0, 217, 255, 0.3);
+        }
+
+        .metadata {
+            display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 15px; margin-top: 20px;
+        }
+
+        .metadata-item {
+            background: rgba(0, 217, 255, 0.1); padding: 15px; border-radius: 8px;
+            border: 1px solid rgba(0, 217, 255, 0.3);
+        }
+
+        .metadata-label { color: #00d9ff; font-size: 0.9em; margin-bottom: 5px; }
+        .metadata-value { font-size: 1.2em; font-weight: bold; color: #fff; }
+
+        .loading { text-align: center; padding: 40px; display: none; }
+        .spinner {
+            border: 4px solid rgba(0, 217, 255, 0.3); border-top: 4px solid #00d9ff;
+            border-radius: 50%; width: 60px; height: 60px;
+            animation: spin 1s linear infinite; margin: 0 auto 20px;
+        }
+
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+        .error {
+            background: rgba(255, 0, 0, 0.1); border: 2px solid rgba(255, 0, 0, 0.5);
+            color: #ff4444; padding: 20px; border-radius: 10px; margin: 20px 0; display: none;
+        }
+
+        .astronaut {
+            position: fixed; right: 50px; top: 50%; transform: translateY(-50%);
+            font-size: 5em; animation: float 6s ease-in-out infinite; z-index: 999;
+            filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
+        }
+
+        @keyframes float {
+            0%, 100% { transform: translateY(-50%) rotate(-5deg); }
+            50% { transform: translateY(calc(-50% - 30px)) rotate(5deg); }
+        }
+
+        @media (max-width: 768px) {
+            .control-panel { grid-template-columns: 1fr; }
+            .title { font-size: 2.5em; }
+            .astronaut { display: none; }
+        }
+    </style>
+</head>
+<body>
+    <div id="canvas-container"></div>
+    <div class="astronaut">🧑‍🚀</div>
+
+    <div class="container">
+        <div class="header">
+            <div class="title">COMET-SEE</div>
+            <div class="subtitle">COmet Motion Extraction & Tracking – Statistical Exploration Engine</div>
+            <div class="team">
+                <span class="team-member">👩‍🔬 SHAMBHAVI SRIVASTAVA </span>
+                <span class="team-member">👩‍🚀 EMILY FOLEY</span>
+                <span class="team-member">👨‍💻 MOHAMMED SAMEER SYED</span>
+            </div>
+        </div>
+
+        <div class="control-panel">
+            <div class="panel">
+                <h2 class="panel-title">📤 Upload FITS Data</h2>
+                <div class="upload-zone" onclick="document.getElementById('fileInput').click()">
+                    <div class="upload-icon">📁</div>
+                    <div>Click to upload ZIP file</div>
+                    <div style="font-size: 0.9em; color: #888; margin-top: 10px;">SOHO LASCO C3 FITS images</div>
+                </div>
+                <input type="file" id="fileInput" accept=".zip" onchange="handleFileUpload(event)">
+                <button class="btn btn-primary" onclick="analyzeUpload()">🔍 Analyze Upload</button>
+            </div>
+
+            <div class="panel">
+                <h2 class="panel-title">📡 Live SOHO Data</h2>
+                <div style="text-align: center; padding: 20px;">
+                    <div style="font-size: 2em; margin-bottom: 20px;">🛰️</div>
+                    <p style="margin-bottom: 20px; color: #aaa;">Fetch recent SOHO/LASCO C3 images and analyze for comet activity</p>
+                    <button class="btn btn-secondary" onclick="fetchAndAnalyze()">🌐 Fetch Live Data</button>
+                </div>
+            </div>
+        </div>
+
+        <div class="loading" id="loading">
+            <div class="spinner"></div>
+            <div>Analyzing data...</div>
+        </div>
+
+        <div class="error" id="error"></div>
+
+        <div class="results" id="results">
             <div class="result-header">
-                <div class="result-status {status_class}">{status_text}</div>
+                <div class="result-status" id="status"></div>
                 <div class="confidence-bar">
-                    <div class="confidence-fill" style="width: {confidence_pct}%">{confidence_pct}%</div>
+                    <div class="confidence-fill" id="confidence" style="width: 0%"></div>
                 </div>
             </div>
-            
-            <img class="result-image" src="data:image/png;base64,{img_base64}" alt="Analysis Result">
-            
+
+            <img class="result-image" id="resultImage" src="" alt="Analysis Result">
+
             <div class="metadata">
                 <div class="metadata-item">
                     <div class="metadata-label">Images Analyzed</div>
-                    <div class="metadata-value">{num_images}</div>
+                    <div class="metadata-value" id="numImages">-</div>
                 </div>
                 <div class="metadata-item">
                     <div class="metadata-label">Data Source</div>
-                    <div class="metadata-value">{source}</div>
+                    <div class="metadata-value" id="source">-</div>
                 </div>
                 <div class="metadata-item">
                     <div class="metadata-label">Analysis Time</div>
-                    <div class="metadata-value">{timestamp}</div>
+                    <div class="metadata-value" id="timestamp">-</div>
                 </div>
                 <div class="metadata-item">
                     <div class="metadata-label">Model Accuracy</div>
@@ -141,324 +414,176 @@ class CometDetectorAPI:
                 </div>
             </div>
         </div>
-        
-        <style>
-        .results {{
-            background: linear-gradient(135deg, rgba(10, 14, 39, 0.95) 0%, rgba(0, 20, 40, 0.9) 100%);
-            border-radius: 15px;
-            padding: 30px;
-            border: 2px solid rgba(0, 217, 255, 0.3);
-            backdrop-filter: blur(10px);
-            animation: slideIn 0.5s ease;
-            margin-top: 20px;
-        }}
-        
-        @keyframes slideIn {{
-            from {{ opacity: 0; transform: translateY(20px); }}
-            to {{ opacity: 1; transform: translateY(0); }}
-        }}
-        
-        .result-detected {{ border-color: #00ff88; box-shadow: 0 0 40px rgba(0, 255, 136, 0.3); }}
-        .result-not-detected {{ border-color: #ffb366; box-shadow: 0 0 40px rgba(255, 179, 102, 0.3); }}
-        
-        .result-header {{ text-align: center; margin-bottom: 30px; }}
-        
-        .result-status {{
-            font-family: 'Orbitron', sans-serif;
-            font-size: 2.5em;
-            font-weight: bold;
-            margin-bottom: 10px;
-        }}
-        
-        .status-detected {{ color: #00ff88; text-shadow: 0 0 20px rgba(0, 255, 136, 0.8); }}
-        .status-not-detected {{ color: #ffb366; text-shadow: 0 0 20px rgba(255, 179, 102, 0.8); }}
-        
-        .confidence-bar {{
-            width: 100%;
-            height: 30px;
-            background: rgba(255, 255, 255, 0.1);
-            border-radius: 15px;
-            overflow: hidden;
-            margin: 20px 0;
-        }}
-        
-        .confidence-fill {{
-            height: 100%;
-            background: linear-gradient(90deg, #00d9ff 0%, #00ff88 100%);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-weight: bold;
-            color: #000;
-            transition: width 1s ease;
-        }}
-        
-        .result-image {{
-            width: 100%;
-            border-radius: 10px;
-            margin: 20px 0;
-            border: 2px solid rgba(0, 217, 255, 0.3);
-        }}
-        
-        .metadata {{
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-            gap: 15px;
-            margin-top: 20px;
-        }}
-        
-        .metadata-item {{
-            background: rgba(0, 217, 255, 0.1);
-            padding: 15px;
-            border-radius: 8px;
-            border: 1px solid rgba(0, 217, 255, 0.3);
-        }}
-        
-        .metadata-label {{ color: #00d9ff; font-size: 0.9em; margin-bottom: 5px; }}
-        .metadata-value {{ font-size: 1.2em; font-weight: bold; color: #fff; }}
-        </style>
-        """
-        
-        return html
-    
-    def analyze_uploaded(self, zip_file, progress=gr.Progress()):
-        """Analyze uploaded ZIP with progress tracking"""
-        if zip_file is None:
-            return "<div class='error' style='display:block;'>❌ No file uploaded</div>"
-        
-        try:
-            progress(0.1, desc="Extracting ZIP file...")
-            images = self.load_fits_from_zip(zip_file)
-            
-            if len(images) < 2:
-                return "<div class='error' style='display:block;'>❌ Need at least 2 FITS images</div>"
-            
-            progress(0.4, desc=f"Processing {len(images)} images...")
-            max_proj = self.create_difference_images(images)
-            
-            progress(0.7, desc="Running AI classification...")
-            pred_class, confidence = self.classify_image(max_proj)
-            
-            progress(1.0, desc="Complete!")
-            
-            return self.generate_html_result(
-                images, max_proj, pred_class, confidence, 
-                "Uploaded Data", len(images)
-            )
-            
-        except Exception as e:
-            return f"<div class='error' style='display:block;'>❌ Error: {str(e)}</div>"
-    
-    def analyze_soho_live(self, progress=gr.Progress()):
-        """Fetch and analyze live SOHO data with progress"""
-        try:
-            progress(0.2, desc="Fetching SOHO data...")
-            images = self.fetch_soho_recent()
-            
-            progress(0.5, desc="Creating difference images...")
-            max_proj = self.create_difference_images(images)
-            
-            progress(0.8, desc="Running AI classification...")
-            pred_class, confidence = self.classify_image(max_proj)
-            
-            progress(1.0, desc="Complete!")
-            
-            return self.generate_html_result(
-                images, max_proj, pred_class, confidence,
-                "Live SOHO Data (Demo)", len(images)
-            )
-            
-        except Exception as e:
-            return f"<div class='error' style='display:block;'>❌ Error: {str(e)}</div>"
+    </div>
 
-detector = CometDetectorAPI('best_model.pth')
+    <script>
+        let scene, camera, renderer, stars;
+
+        function initStarfield() {
+            scene = new THREE.Scene();
+            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+            camera.position.z = 5;
+
+            renderer = new THREE.WebGLRenderer({ alpha: true });
+            renderer.setSize(window.innerWidth, window.innerHeight);
+            document.getElementById('canvas-container').appendChild(renderer.domElement);
 
-# Custom CSS
-custom_css = """
-@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Share+Tech+Mono&display=swap');
-
-* { margin: 0; padding: 0; box-sizing: border-box; }
-
-body {
-    font-family: 'Share Tech Mono', monospace;
-    background: linear-gradient(135deg, #000814 0%, #001d3d 50%, #000814 100%);
-    color: #fff;
-}
-
-.gradio-container {
-    max-width: 1400px !important;
-    margin: 0 auto !important;
-}
-
-.header {
-    text-align: center;
-    padding: 40px 20px;
-    background: linear-gradient(135deg, rgba(10, 14, 39, 0.9) 0%, rgba(0, 20, 40, 0.8) 100%);
-    border-radius: 20px;
-    border: 2px solid rgba(0, 217, 255, 0.3);
-    box-shadow: 0 0 40px rgba(0, 217, 255, 0.2);
-    margin-bottom: 30px;
-    backdrop-filter: blur(10px);
-}
-
-.title {
-    font-family: 'Orbitron', sans-serif;
-    font-size: 4em;
-    font-weight: 900;
-    background: linear-gradient(135deg, #00d9ff 0%, #00ff88 50%, #ff00ff 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    margin-bottom: 10px;
-    animation: glow 2s ease-in-out infinite alternate;
-}
-
-@keyframes glow {
-    from { filter: drop-shadow(0 0 5px rgba(0, 217, 255, 0.5)); }
-    to { filter: drop-shadow(0 0 20px rgba(0, 217, 255, 0.8)); }
-}
-
-.subtitle {
-    font-size: 1.2em;
-    color: #00d9ff;
-    letter-spacing: 3px;
-    margin-bottom: 20px;
-}
-
-.team {
-    font-size: 1.1em;
-    color: #00ff88;
-    margin-top: 15px;
-}
-
-.team-member {
-    display: inline-block;
-    padding: 8px 20px;
-    margin: 0 10px;
-    background: linear-gradient(135deg, rgba(0, 255, 136, 0.2) 0%, rgba(0, 217, 255, 0.2) 100%);
-    border: 2px solid #00ff88;
-    border-radius: 25px;
-    font-weight: bold;
-    animation: pulse 2s ease-in-out infinite;
-    box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
-}
-
-@keyframes pulse {
-    0%, 100% { transform: scale(1); box-shadow: 0 0 20px rgba(0, 255, 136, 0.3); }
-    50% { transform: scale(1.05); box-shadow: 0 0 30px rgba(0, 255, 136, 0.5); }
-}
-
-.panel {
-    background: linear-gradient(135deg, rgba(10, 14, 39, 0.95) 0%, rgba(0, 20, 40, 0.9) 100%);
-    border-radius: 15px;
-    padding: 30px;
-    border: 2px solid rgba(0, 217, 255, 0.3);
-    backdrop-filter: blur(10px);
-    margin-bottom: 20px;
-}
-
-.gr-button-primary {
-    background: linear-gradient(135deg, #00d9ff 0%, #00ff88 100%) !important;
-    border: none !important;
-    color: #000 !important;
-    font-family: 'Orbitron', sans-serif !important;
-    font-weight: bold !important;
-    font-size: 1.1em !important;
-    padding: 15px 40px !important;
-    letter-spacing: 2px !important;
-    transition: all 0.3s ease !important;
-}
-
-.gr-button-primary:hover {
-    transform: translateY(-3px) !important;
-    box-shadow: 0 10px 30px rgba(0, 217, 255, 0.5) !important;
-}
-
-.gr-button-secondary {
-    background: linear-gradient(135deg, #ff00ff 0%, #ff0080 100%) !important;
-    border: none !important;
-    color: #fff !important;
-    font-family: 'Orbitron', sans-serif !important;
-    font-weight: bold !important;
-    font-size: 1.1em !important;
-    padding: 15px 40px !important;
-    letter-spacing: 2px !important;
-    transition: all 0.3s ease !important;
-}
-
-.gr-button-secondary:hover {
-    transform: translateY(-3px) !important;
-    box-shadow: 0 10px 30px rgba(255, 0, 255, 0.5) !important;
-}
-
-.error {
-    background: rgba(255, 0, 0, 0.1);
-    border: 2px solid rgba(255, 0, 0, 0.5);
-    color: #ff4444;
-    padding: 20px;
-    border-radius: 10px;
-    margin: 20px 0;
-    font-size: 1.1em;
-}
+            const starGeometry = new THREE.BufferGeometry();
+            const starMaterial = new THREE.PointsMaterial({ color: 0xffffff, size: 2, transparent: true });
+
+            const starVertices = [];
+            for (let i = 0; i < 10000; i++) {
+                const x = (Math.random() - 0.5) * 2000;
+                const y = (Math.random() - 0.5) * 2000;
+                const z = (Math.random() - 0.5) * 2000;
+                starVertices.push(x, y, z);
+            }
+
+            starGeometry.setAttribute('position', new THREE.Float32BufferAttribute(starVertices, 3));
+            stars = new THREE.Points(starGeometry, starMaterial);
+            scene.add(stars);
+
+            animate();
+        }
+
+        function animate() {
+            requestAnimationFrame(animate);
+            stars.rotation.y += 0.0002;
+            stars.rotation.x += 0.0001;
+            renderer.render(scene, camera);
+        }
+
+        window.addEventListener('resize', () => {
+            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+        });
+
+        initStarfield();
+
+        let uploadedFile = null;
+
+        function handleFileUpload(event) {
+            uploadedFile = event.target.files[0];
+            if (uploadedFile) {
+                document.querySelector('.upload-zone').innerHTML = `
+                    <div class="upload-icon">✅</div>
+                    <div>${uploadedFile.name}</div>
+                    <div style="font-size: 0.9em; color: #00ff88; margin-top: 10px;">Ready to analyze</div>
+                `;
+            }
+        }
+
+        function showLoading() {
+            document.getElementById('loading').style.display = 'block';
+            document.getElementById('results').style.display = 'none';
+            document.getElementById('error').style.display = 'none';
+        }
+
+        function showError(message) {
+            document.getElementById('loading').style.display = 'none';
+            document.getElementById('error').textContent = message;
+            document.getElementById('error').style.display = 'block';
+        }
+
+        function showResults(data) {
+            document.getElementById('loading').style.display = 'none';
+
+            const results = document.getElementById('results');
+            results.style.display = 'block';
+
+            if (data.detected) {
+                results.className = 'results result-detected';
+                document.getElementById('status').className = 'result-status status-detected';
+                document.getElementById('status').textContent = '🌟 COMET DETECTED!';
+            } else {
+                results.className = 'results result-not-detected';
+                document.getElementById('status').className = 'result-status status-not-detected';
+                document.getElementById('status').textContent = '🌑 No Comet Activity';
+            }
+
+            const confidence = Math.round(data.confidence * 100);
+            document.getElementById('confidence').style.width = confidence + '%';
+            document.getElementById('confidence').textContent = confidence + '%';
+
+            document.getElementById('resultImage').src = data.image;
+            document.getElementById('numImages').textContent = data.num_images;
+            document.getElementById('source').textContent = data.source;
+            document.getElementById('timestamp').textContent = new Date(data.timestamp).toLocaleString();
+
+            results.scrollIntoView({ behavior: 'smooth' });
+        }
+
+        async function analyzeUpload() {
+            if (!uploadedFile) {
+                showError('Please upload a ZIP file first');
+                return;
+            }
+
+            showLoading();
+
+            const formData = new FormData();
+            formData.append('file', uploadedFile);
+
+            try {
+                const response = await fetch('/api/analyze_upload', {
+                    method: 'POST',
+                    body: formData
+                });
+
+                const data = await response.json();
+
+                if (data.error) {
+                    showError(data.error);
+                } else {
+                    showResults(data);
+                }
+            } catch (error) {
+                showError('Error analyzing file: ' + error.message);
+            }
+        }
+
+        async function fetchAndAnalyze() {
+            showLoading();
+
+            try {
+                const response = await fetch('/api/analyze_soho');
+                const data = await response.json();
+
+                if (data.error) {
+                    showError(data.error);
+                } else {
+                    showResults(data);
+                }
+            } catch (error) {
+                showError('Error fetching SOHO data: ' + error.message);
+            }
+        }
+    </script>
+</body>
+</html>
 """
 
-# Create Gradio Interface
-with gr.Blocks(css=custom_css, theme=gr.themes.Soft(), title="COMET-SEE Mission Control") as demo:
-    
-    gr.HTML("""
-        <div class="header">
-            <div class="title">COMET-SEE</div>
-            <div class="subtitle">COmet Motion Extraction & Tracking – Statistical Exploration Engine</div>
-            <div class="team">
-                <span class="team-member">👩‍🚀 SAMBHAVI</span>
-                <span class="team-member">👩‍🔬 EMILY</span>
-                <span class="team-member">👨‍💻 MOHAMMED</span>
-            </div>
-        </div>
-    """)
-    
-    with gr.Row():
-        with gr.Column(scale=1):
-            gr.HTML('<div class="panel"><h2 style="color: #00d9ff; font-family: Orbitron;">📤 Upload FITS Data</h2></div>')
-            file_input = gr.File(
-                label="Upload ZIP of FITS Images",
-                file_types=[".zip"],
-                type="filepath"
-            )
-            upload_btn = gr.Button("🔍 Analyze Upload", variant="primary", size="lg")
-        
-        with gr.Column(scale=1):
-            gr.HTML('<div class="panel"><h2 style="color: #00d9ff; font-family: Orbitron;">📡 Live SOHO Data</h2></div>')
-            gr.HTML("""
-                <div style="text-align: center; padding: 20px;">
-                    <div style="font-size: 3em; margin-bottom: 15px;">🛰️</div>
-                    <p style="color: #aaa; margin-bottom: 20px;">
-                        Fetch recent SOHO/LASCO C3 images<br>and analyze for comet activity
-                    </p>
-                </div>
-            """)
-            fetch_btn = gr.Button("🌐 Fetch Live Data", variant="secondary", size="lg")
-    
-    # Results section
-    result_output = gr.HTML(label="Analysis Results")
-    
-    # Connect buttons
-    upload_btn.click(
-        fn=detector.analyze_uploaded,
-        inputs=[file_input],
-        outputs=[result_output]
-    )
-    
-    fetch_btn.click(
-        fn=detector.analyze_soho_live,
-        outputs=[result_output]
-    )
-    
-    gr.HTML("""
-        <div style="text-align: center; margin-top: 40px; padding: 20px; color: #888;">
-            <p>Model Performance: 97.7% Accuracy • 98% Precision • 99% Recall</p>
-            <p style="margin-top: 10px;">Built with ❤️ by Sambhavi, Emily & Mohammed</p>
-        </div>
-    """)
+with gr.Blocks() as demo:
+    gr.HTML(custom_html)
+
+    with gr.Row(visible=False):
+        file_input = gr.File()
+        upload_output = gr.JSON()
+        soho_output = gr.JSON()
+
+        file_input.upload(
+            fn=detector.analyze_uploaded,
+            inputs=[file_input],
+            outputs=[upload_output],
+            api_name="analyze_upload"
+        )
+
+        gr.Button("Fetch SOHO").click(
+            fn=detector.analyze_soho_live,
+            outputs=[soho_output],
+            api_name="analyze_soho"
+        )
 
 if __name__ == "__main__":
     demo.launch(server_name="0.0.0.0", server_port=7860)