SentiEnhance UI Overhaul

app.py

@@ -63,189 +63,104 @@ def infer_esrgan(image):
 # ============================================================
 
 CSS = """
-/* ── Google Font ── */
+/* Google Font */
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 
 body, .gradio-container {
     font-family: 'Inter', sans-serif !important;
+    background-color: #f8fafc !important;
 }
 
-/* ── Hero header ── */
-.hero-header {
-    background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #0f172a 100%);
-    border-radius: 16px;
-    padding: 36px 40px 28px;
-    margin-bottom: 8px;
-    border: 1px solid rgba(56, 189, 248, 0.2);
-    box-shadow: 0 0 40px rgba(56, 189, 248, 0.08);
-    position: relative;
-    overflow: hidden;
-}
-
-.hero-header::before {
-    content: '';
-    position: absolute;
-    top: -60px; right: -60px;
-    width: 200px; height: 200px;
-    background: radial-gradient(circle, rgba(56,189,248,0.12) 0%, transparent 70%);
-    pointer-events: none;
-}
-
-.hero-title {
-    font-size: 2.1rem;
-    font-weight: 700;
-    color: #f0f9ff;
-    margin: 0 0 8px;
-    letter-spacing: -0.5px;
-}
-
-.hero-subtitle {
-    font-size: 0.95rem;
-    color: #94a3b8;
-    margin: 0;
-    line-height: 1.6;
-}
-
-.hero-badge {
-    display: inline-block;
-    background: rgba(56, 189, 248, 0.15);
-    color: #38bdf8;
-    border: 1px solid rgba(56, 189, 248, 0.3);
-    border-radius: 20px;
-    padding: 3px 12px;
-    font-size: 0.75rem;
-    font-weight: 600;
-    letter-spacing: 0.5px;
-    margin-bottom: 14px;
-}
-
-/* ── Section cards ── */
-.card {
-    background: #1e293b;
-    border: 1px solid #334155;
-    border-radius: 12px;
-    padding: 20px;
-    margin-bottom: 12px;
-}
-
-.section-label {
-    font-size: 0.7rem;
-    font-weight: 600;
-    letter-spacing: 1.2px;
-    text-transform: uppercase;
-    color: #64748b;
-    margin-bottom: 10px;
-}
-
-/* ── Generate button ── */
-#generate-btn {
-    background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%) !important;
-    border: none !important;
-    color: white !important;
-    font-weight: 600 !important;
-    font-size: 1rem !important;
-    padding: 14px !important;
-    border-radius: 10px !important;
-    letter-spacing: 0.3px;
-    transition: opacity 0.2s ease, transform 0.1s ease !important;
-    box-shadow: 0 4px 14px rgba(14, 165, 233, 0.35) !important;
-    width: 100%;
-}
-#generate-btn:hover {
-    opacity: 0.92 !important;
-    transform: translateY(-1px) !important;
-}
-#generate-btn:active {
-    transform: translateY(0px) !important;
-}
-
-/* ── Download button ── */
-#download-btn {
-    background: #0f172a !important;
-    border: 1px solid #38bdf8 !important;
-    color: #38bdf8 !important;
-    font-weight: 600 !important;
-    border-radius: 8px !important;
-    padding: 10px !important;
-    width: 100%;
-    transition: background 0.2s ease !important;
-}
-#download-btn:hover {
-    background: rgba(56,189,248,0.1) !important;
-}
-
-/* ── Status box ── */
-.status-box {
-    background: #0f172a;
-    border: 1px solid #1e3a5f;
-    border-radius: 10px;
-    padding: 16px 20px;
-    font-size: 0.88rem;
-    color: #94a3b8;
-    min-height: 120px;
-}
-
-/* ── Model info chips ── */
-.model-chip-hat {
-    display: inline-block;
-    background: rgba(16, 185, 129, 0.12);
-    color: #34d399;
-    border: 1px solid rgba(16,185,129,0.3);
-    border-radius: 6px;
-    padding: 2px 10px;
-    font-size: 0.72rem;
-    font-weight: 600;
-    margin-right: 6px;
-}
-
-.model-chip-esr {
-    display: inline-block;
-    background: rgba(168, 85, 247, 0.12);
-    color: #c084fc;
-    border: 1px solid rgba(168,85,247,0.3);
-    border-radius: 6px;
-    padding: 2px 10px;
-    font-size: 0.72rem;
-    font-weight: 600;
-}
-
-/* ── Footer ── */
-.footer-note {
-    background: rgba(249, 115, 22, 0.07);
-    border: 1px solid rgba(249, 115, 22, 0.25);
-    border-radius: 8px;
-    padding: 12px 16px;
-    font-size: 0.82rem;
-    color: #fb923c;
-    margin-top: 4px;
+/* Hide default Gradio padding/footers */
+footer { display: none !important; }
+.gradio-container { max-width: 100% !important; padding: 0 !important; margin: 0 !important; }
+
+/* Top Navbar */
+.top-nav {
+    background: linear-gradient(135deg, #03182b 0%, #07355c 100%);
+    padding: 20px 40px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: white;
 }
+.nav-left { display: flex; align-items: center; gap: 16px; }
+.nav-logo-icon { width: 36px; height: 36px; fill: #38bdf8; }
+.nav-title { display: flex; flex-direction: column; }
+.nav-logo-text { font-size: 1.6rem; font-weight: 700; color: #38bdf8; margin: 0; line-height: 1.1; }
+.nav-logo-text span { color: white; }
+.nav-subtitle { font-size: 0.8rem; color: #cbd5e1; margin: 0; }
+.nav-links { display: flex; gap: 30px; font-size: 0.95rem; align-items: center; }
+.nav-links a { color: #cbd5e1; text-decoration: none; font-weight: 500; transition: color 0.2s; }
+.nav-links a:hover { color: white; }
+.nav-links a.active { color: white; border-bottom: 2px solid white; padding-bottom: 4px; }
+.nav-btn { background: #34d399; color: #064e3b !important; padding: 10px 20px; border-radius: 6px; font-weight: 600; text-decoration: none; transition: background 0.2s; }
+.nav-btn:hover { background: #10b981; }
+
+/* Sidebar */
+.sidebar-container { background: #f8fafc; padding: 30px 20px; height: 100%; border-right: 1px solid #e2e8f0; display: flex; flex-direction: column; justify-content: space-between; }
+.sidebar-links { display: flex; flex-direction: column; gap: 8px; }
+.sidebar-link { display: flex; align-items: center; padding: 14px 20px; border-radius: 10px; color: #475569; text-decoration: none; font-weight: 500; font-size: 0.95rem; gap: 16px; transition: background 0.2s; cursor: pointer; }
+.sidebar-link:hover { background: #f1f5f9; }
+.sidebar-link.active { background: #d1fae5; color: #065f46; font-weight: 600; }
+.sidebar-link svg { width: 20px; height: 20px; }
+.sidebar-banner { background: #e0f2fe; padding: 24px 20px; border-radius: 16px; text-align: center; color: #0369a1; display: flex; flex-direction: column; align-items: center; gap: 12px; }
+.sidebar-banner svg { width: 40px; height: 40px; color: #0284c7; }
+.sidebar-banner div { font-weight: 600; font-size: 0.95rem; line-height: 1.4; }
+
+/* Main Content Area */
+.main-wrapper { padding: 30px 40px; }
+.page-title { font-size: 2.2rem; font-weight: 700; color: #0f172a; margin: 0 0 8px; letter-spacing: -0.5px; }
+.page-title span { color: #0369a1; }
+.page-subtitle { color: #64748b; font-size: 1.05rem; margin: 0 0 30px; }
+
+/* Upload box */
+.upload-card { background: white !important; border-radius: 16px !important; padding: 0 !important; border: 1px dashed #cbd5e1 !important; box-shadow: 0 4px 20px rgba(0,0,0,0.03) !important; overflow: hidden; }
+
+/* Model Select & Enhance Button */
+.model-card { background: white; border-radius: 12px; padding: 20px; border: 1px solid #e2e8f0; box-shadow: 0 4px 6px rgba(0,0,0,0.02); margin-bottom: 20px; }
+.model-card-title { font-size: 1rem; font-weight: 600; color: #1e293b; margin-bottom: 12px; }
+.model-info-box { background: #f0f9ff; color: #0369a1; padding: 14px; border-radius: 8px; font-size: 0.85rem; margin-top: 12px; display: flex; gap: 12px; align-items: flex-start; line-height: 1.5; }
+#enhance-btn { background: #0f9d58 !important; color: white !important; font-weight: 600 !important; font-size: 1.1rem !important; padding: 16px !important; border-radius: 8px !important; border: none !important; width: 100%; transition: all 0.2s; }
+#enhance-btn:hover { background: #0b8043 !important; transform: translateY(-1px); }
+
+/* Features List */
+.features-card { background: #f8fafc; border-radius: 12px; padding: 24px; border: 1px solid #e2e8f0; height: 100%; display: flex; flex-direction: column; justify-content: center; }
+.features-title { font-size: 1.1rem; font-weight: 600; color: #0f172a; margin-bottom: 20px; }
+.feature-item { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; color: #334155; font-size: 0.95rem; font-weight: 500; }
+.feature-icon { width: 24px; height: 24px; color: #0f9d58; flex-shrink: 0; }
+
+/* Results */
+.results-header { font-size: 1.4rem; font-weight: 700; color: #0f172a; margin: 40px 0 20px; }
+.image-card { border-radius: 12px !important; overflow: hidden; border: 1px solid #e2e8f0; background: white; padding: 0 !important; box-shadow: 0 4px 12px rgba(0,0,0,0.04); }
+
+/* Buttons */
+.download-col { display: flex; flex-direction: column; gap: 12px; padding-top: 36px; }
+.btn-primary { background: #0f9d58 !important; color: white !important; padding: 12px 16px !important; border-radius: 8px !important; font-weight: 600 !important; text-align: center; border: none !important; }
+.btn-outline { background: white !important; color: #334155 !important; border: 1px solid #cbd5e1 !important; padding: 12px 16px !important; border-radius: 8px !important; font-weight: 500 !important; text-align: center; box-shadow: 0 1px 2px rgba(0,0,0,0.02) !important; }
+
+/* Footer */
+.footer-strip { background: #03182b; color: white; padding: 24px 40px; display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; margin-top: 40px; }
+.footer-left { display: flex; gap: 10px; align-items: center; color: #cbd5e1; }
+.footer-left strong { color: white; }
+.footer-links { display: flex; gap: 24px; color: #94a3b8; align-items: center; }
+.footer-links a { color: #94a3b8; text-decoration: none; transition: color 0.2s; }
+.footer-links a:hover { color: white; }
 """
 
-
 # ============================================================
 # INFERENCE FUNCTION
 # ============================================================
 
 def run_super_resolution(image_path, model_choice, progress=gr.Progress()):
-
-    # --------------------------------------------------------
-    # Validate input
-    # --------------------------------------------------------
     if image_path is None:
         raise gr.Error("⚠️ Please upload a satellite image before running.")
 
-    # --------------------------------------------------------
-    # Normalize model name
-    # --------------------------------------------------------
-    model_map = {"HATSAT — Recommended": "hatsat", "ESRGAN — Baseline": "esrgan"}
+    model_map = {"HAT-SAT (Recommended)": "hatsat", "ESRGAN (Baseline)": "esrgan"}
     selected_model = model_map.get(model_choice)
-
     if selected_model is None:
         raise gr.Error("⚠️ Please select a valid model.")
 
-    # --------------------------------------------------------
-    # Load image (PNG/JPG or GeoTIFF)
-    # --------------------------------------------------------
     if not isinstance(image_path, list):
         image_path = [image_path]
         
@@ -286,7 +201,7 @@ def run_super_resolution(image_path, model_choice, progress=gr.Progress()):
         if data.dtype != np.uint8:
             data = normalize_rgb(data)
             
-        image = Image.fromarray(data, mode="RGB")
+        original_image = Image.fromarray(data, mode="RGB")
         
     elif len(image_path) == 1:
         file_path = str(image_path[0])
@@ -321,222 +236,231 @@ def run_super_resolution(image_path, model_choice, progress=gr.Progress()):
             else:
                 data = normalize_rgb(data)
     
-            image = Image.fromarray(data, mode="RGB")
+            original_image = Image.fromarray(data, mode="RGB")
         else:
             try:
-                image = Image.open(file_path).convert("RGB")
-                input_w, input_h = image.size
+                original_image = Image.open(file_path).convert("RGB")
+                input_w, input_h = original_image.size
             except Exception:
                 raise gr.Error("⚠️ Could not read image.")
     else:
         raise gr.Error("⚠️ Please upload either 1 file (multiband image) or 3 files (B04, B03, B02 GeoTIFFs).")
 
-    # --------------------------------------------------------
-    # Basic sanity check
-    # --------------------------------------------------------
     if input_w < 16 or input_h < 16:
-        raise gr.Error(
-            f"⚠️ Image too small ({input_w}×{input_h}). "
-            "Please upload an image at least 16×16 pixels."
-        )
-
+        raise gr.Error(f"⚠️ Image too small ({input_w}x{input_h}). Please upload an image at least 16x16 pixels.")
     if input_w > 1024 or input_h > 1024:
-        raise gr.Error(
-            f"⚠️ Image too large ({input_w}×{input_h}). "
-            "For this web demo, please use images up to 1024×1024 pixels to prevent GPU timeouts."
-        )
-
-    # --------------------------------------------------------
-    # Run inference
-    # --------------------------------------------------------
-    model_label = "HATSAT" if selected_model == "hatsat" else "ESRGAN"
-    
-    start_time = time.time()
+        raise gr.Error(f"⚠️ Image too large ({input_w}x{input_h}). Please use images up to 1024x1024 pixels.")
 
+    start_time = time.time()
     try:
-        progress(0.5, desc=f"Running {model_label} 4× super-resolution (ZeroGPU) …")
+        progress(0.5, desc=f"Running {selected_model} 4x super-resolution (ZeroGPU) 🚀")
         if selected_model == "hatsat":
-            result = infer_hatsat(image)
+            result = infer_hatsat(original_image)
         else:
-            result = infer_esrgan(image)
+            result = infer_esrgan(original_image)
     except Exception as e:
-        raise gr.Error(f"{model_label} inference failed: {e}")
+        raise gr.Error(f"{selected_model} inference failed: {e}")
 
-    elapsed = time.time() - start_time
-    progress(0.9, desc="Finalising output …")
+    progress(0.9, desc="Finalising output 🚀")
 
-    output_w, output_h = result.size
+    # Generate PNG download
+    tmp_png = tempfile.NamedTemporaryFile(suffix=f"_sr_{selected_model}_4x.png", delete=False)
+    result.save(tmp_png.name, format="PNG")
+    tmp_png.close()
+    out_png = tmp_png.name
 
-    # --------------------------------------------------------
-    # Save to a temp file for download
-    # --------------------------------------------------------
+    # Generate TIFF download if input was TIFF
     if is_tiff:
-        tmp = tempfile.NamedTemporaryFile(
-            suffix=f"_sr_{selected_model}_4x_georef.tif",
-            delete=False
-        )
-        tmp.close()
-        save_sr_geotiff(result, profile, tmp.name, scale=4)
-        out_file_path = tmp.name
+        tmp_tiff = tempfile.NamedTemporaryFile(suffix=f"_sr_{selected_model}_4x_georef.tif", delete=False)
+        tmp_tiff.close()
+        save_sr_geotiff(result, profile, tmp_tiff.name, scale=4)
+        out_tiff = tmp_tiff.name
     else:
-        tmp = tempfile.NamedTemporaryFile(
-            suffix=f"_sr_{selected_model}_4x.png",
-            delete=False
-        )
-        result.save(tmp.name, format="PNG")
-        tmp.close()
-        out_file_path = tmp.name
-
-    # --------------------------------------------------------
-    # Info markdown
-    # --------------------------------------------------------
-    info = f"""
-<div class="status-box">
-
-**✅ Super-Resolution Complete**
-
-| Field | Value |
-|---|---|
-| **Model** | {model_label} |
-| **Scale** | 4× |
-| **Input size** | {input_w} × {input_h} px |
-| **Output size** | {output_w} × {output_h} px |
-| **Processing time** | {elapsed:.2f} s |
-| **Nominal output sampling** | ~2.5 m (from 10 m input) |
-
-</div>
-"""
+        out_tiff = None
 
     progress(1.0, desc="Done.")
-    return result, info, out_file_path
+    
+    # Return: original preview, enhanced preview, png download, tiff download
+    return original_image, result, gr.update(value=out_png, interactive=True), gr.update(value=out_tiff, interactive=True)
 
 
 # ============================================================
-# CLEAR FUNCTION
+# HTML COMPONENTS
 # ============================================================
 
-def clear_all():
-    return None, None, "", None
+TOP_NAV = """
+<div class="top-nav">
+    <div class="nav-left">
+        <svg class="nav-logo-icon" viewBox="0 0 24 24"><path d="M12 2L2 22h20L12 2zm0 4.2l6.8 13.8H5.2L12 6.2z"/><path d="M12 10.5l-2.5 5h5z"/></svg>
+        <div class="nav-title">
+            <h1 class="nav-logo-text">Senti<span>Enhance</span></h1>
+            <p class="nav-subtitle">AI-Powered Super-Resolution for Sentinel-2 Imagery</p>
+        </div>
+    </div>
+    <div class="nav-links">
+        <a href="#" class="active">Home</a>
+        <a href="#">About</a>
+        <a href="#">How It Works</a>
+        <a href="#">Use Cases</a>
+        <a href="#">Contact</a>
+        <a href="#" class="nav-btn">Get Started</a>
+    </div>
+</div>
+"""
+
+SIDEBAR = """
+<div class="sidebar-container">
+    <div class="sidebar-links">
+        <a href="#" class="sidebar-link active">
+            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
+            Super-Resolution
+        </a>
+        <a href="#" class="sidebar-link">
+            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
+            Compare
+        </a>
+        <a href="#" class="sidebar-link">
+            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
+            Image Gallery
+        </a>
+        <a href="#" class="sidebar-link">
+            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
+            Documentation
+        </a>
+        <a href="#" class="sidebar-link">
+            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+            About Project
+        </a>
+    </div>
+    <div class="sidebar-banner">
+        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+        <div>Satellite data<br>for a sustainable<br>future</div>
+    </div>
+</div>
+"""
+
+WHY_USE_US = """
+<div class="features-title">Why Use Our Platform?</div>
+<div class="feature-item">
+    <svg class="feature-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
+    AI-powered super-resolution
+</div>
+<div class="feature-item">
+    <svg class="feature-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"></path></svg>
+    Supports Sentinel-2 imagery
+</div>
+<div class="feature-item">
+    <svg class="feature-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
+    Preserves geospatial metadata
+</div>
+<div class="feature-item">
+    <svg class="feature-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
+    Easy to use web interface
+</div>
+<div class="feature-item">
+    <svg class="feature-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+    Free for research & education
+</div>
+"""
 
+FOOTER = """
+<div class="footer-strip">
+    <div class="footer-left">
+        <strong>SentiEnhance</strong> | AI for a Sustainable Planet
+    </div>
+    <div class="footer-links">
+        <a href="#">Privacy Policy</a> |
+        <a href="#">Terms of Use</a> |
+        <a href="#">Contact</a>
+        <a href="#"><svg width="18" height="18" fill="currentColor" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg></a>
+        <a href="#"><svg width="18" height="18" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg></a>
+    </div>
+</div>
+"""
 
 # ============================================================
-# UI
+# APP LAYOUT
 # ============================================================
 
-THEME = gr.themes.Base(
-    primary_hue="sky",
-    neutral_hue="slate",
-)
-
-with gr.Blocks(
-    title="Satellite Super-Resolution — SIH 26142 (ZeroGPU)",
-) as demo:
-
-    # ── Hero header ─────────────────────────────────────────
-    gr.HTML("""
-    <div class="hero-header">
-        <div class="hero-badge">SIH PROBLEM STATEMENT 26142 · NTRO · SPACE TECHNOLOGY</div>
-        <div class="hero-title">🛰️ Satellite Image Super-Resolution</div>
-        <div class="hero-subtitle">
-            Deep learning–based <strong style="color:#38bdf8">4× super-resolution</strong>
-            for medium-resolution satellite imagery (Sentinel-2 and similar sources).<br>
-            Upload an image, select a model, and generate a sharper super-resolved output.
-        </div>
-    </div>
-    """)
-
-    # ── Main layout ─────────────────────────────────────────
-    with gr.Row(equal_height=False):
-
-        # ── LEFT column: inputs ─────────────────────────────
-        with gr.Column(scale=5):
-
-            gr.HTML('<div class="section-label">📂 Input Image</div>')
-            input_image = gr.File(
-                label="Upload Satellite Image (PNG, JPG, TIFF)",
-                file_count="multiple",
-                file_types=["image", ".tif", ".tiff"],
-                elem_id="input-img",
-            )
-
-            gr.HTML('<div class="section-label" style="margin-top:16px">🤖 Model Selection</div>')
-            model_selector = gr.Radio(
-                choices=["HATSAT — Recommended", "ESRGAN — Baseline"],
-                value="HATSAT — Recommended",
-                label="Super-Resolution Model",
-                info=(
-                    "HATSAT is fine-tuned for satellite imagery and is the primary model. "
-                    "ESRGAN is a general-purpose baseline included for comparison."
-                ),
-            )
-
+with gr.Blocks(theme=gr.themes.Base(), css=CSS) as demo:
+    
+    gr.HTML(TOP_NAV)
+    
+    with gr.Row():
+        with gr.Column(scale=1, min_width=240, elem_classes="sidebar"):
+            gr.HTML(SIDEBAR)
+            
+        with gr.Column(scale=5, elem_classes="main-wrapper"):
             gr.HTML("""
-            <div class="card" style="margin-top:4px; font-size:0.82rem; color:#94a3b8; line-height:1.7;">
-                <span class="model-chip-hat">HATSAT</span>
-                Satellite-oriented · HAT transformer · 4× upscaling · Recommended<br>
-                <span class="model-chip-esr" style="margin-top:6px; display:inline-block;">ESRGAN</span>
-                General-purpose · RRDB architecture · 4× upscaling · Baseline comparison
-            </div>
+                <h2 class="page-title">Enhance <span>Sentinel-2</span> Satellite Images</h2>
+                <p class="page-subtitle">Upload your Sentinel-2 image (GeoTIFF, TIFF, JP2, or PNG) and use AI to generate a high-resolution version.</p>
             """)
-
+            
             with gr.Row():
-                generate_btn = gr.Button(
-                    "🚀 Run Super-Resolution",
-                    variant="primary",
-                    elem_id="generate-btn",
-                )
-                clear_btn = gr.Button(
-                    "✕ Clear",
-                    variant="secondary",
-                )
-
-        # ── RIGHT column: outputs ────────────────────────────
-        with gr.Column(scale=5):
-
-            gr.HTML('<div class="section-label">🖼️ Super-Resolved Output</div>')
-            output_image = gr.Image(
-                label="4× Super-Resolved Output",
-                type="pil",
-                interactive=False,
-                elem_id="output-img",
-            )
-
-            download_file = gr.File(
-                label="⬇️ Download Result",
-                interactive=False,
-                visible=True,
-                elem_id="download-btn",
-            )
-
-            gr.HTML('<div class="section-label" style="margin-top:12px">📊 Processing Info</div>')
-            output_info = gr.Markdown(
-                value='<div class="status-box">Results will appear here after processing.</div>',
-            )
-
-    # ── Disclaimer footer ────────────────────────────────────
-    gr.HTML("""
-    <div class="footer-note">
-        ⚠️ <strong>Important:</strong>
-        4× super-resolution produces approximately <strong>2.5 m nominal output sampling</strong>
-        from a 10 m Sentinel-2 input. This does <em>not</em> mean the system physically recovers
-        true 2.5 m ground resolution. Results are generated outputs, not real sensor measurements.
-    </div>
-    """)
+                with gr.Column(scale=4, elem_classes="upload-card"):
+                    input_image = gr.File(
+                        label="Drag & drop your satellite image here",
+                        file_count="multiple",
+                        file_types=["image", ".tif", ".tiff", ".jp2"]
+                    )
+                    
+                with gr.Column(scale=3):
+                    with gr.Group(elem_classes="model-card"):
+                        gr.HTML("<div class='model-card-title'>Model Selection</div>")
+                        model_selector = gr.Dropdown(
+                            choices=["HAT-SAT (Recommended)", "ESRGAN (Baseline)"],
+                            value="HAT-SAT (Recommended)",
+                            show_label=False,
+                            container=False
+                        )
+                        gr.HTML("""
+                            <div class="model-info-box">
+                                <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
+                                <span><strong>HAT-SAT:</strong> State-of-the-art model for satellite image super-resolution with high detail and spectral consistency.</span>
+                            </div>
+                        """)
+                    enhance_btn = gr.Button("✨ Enhance Image", elem_id="enhance-btn")
+                    gr.HTML("<div style='text-align:center; font-size:0.85rem; color:#94a3b8; margin-top:8px;'>Processing may take a few moments...</div>")
+                    
+                with gr.Column(scale=3, elem_classes="features-card"):
+                    gr.HTML(WHY_USE_US)
+            
+            # Results Section
+            gr.HTML("<div class='results-header'>Results</div>")
+            
+            with gr.Row():
+                with gr.Column(scale=4, elem_classes="image-card"):
+                    original_image = gr.Image(label="Original (Sentinel-2, 10m)", type="pil", interactive=False)
+                    
+                with gr.Column(scale=4, elem_classes="image-card"):
+                    enhanced_image = gr.Image(label="Enhanced (HAT-SAT, 2x)", type="pil", interactive=False)
+                    
+                with gr.Column(scale=3, elem_classes="download-col"):
+                    gr.HTML("<div style='font-weight:700; font-size:1.05rem; color:#0f172a; margin-bottom:4px;'>Download & Share</div>")
+                    
+                    download_png = gr.DownloadButton("📥 Download Enhanced Image", elem_classes="btn-primary")
+                    download_tiff = gr.DownloadButton("📄 Download as GeoTIFF", elem_classes="btn-outline")
+                    compare_btn = gr.Button("🔍 Compare Images", elem_classes="btn-outline")
+                    share_btn = gr.Button("🔗 Share Result", elem_classes="btn-outline")
 
-    # ── Events ──────────────────────────────────────────────
+    gr.HTML(FOOTER)
 
-    generate_btn.click(
+    # ============================================================
+    # EVENTS
+    # ============================================================
+    
+    enhance_btn.click(
         fn=run_super_resolution,
         inputs=[input_image, model_selector],
-        outputs=[output_image, output_info, download_file],
+        outputs=[original_image, enhanced_image, download_png, download_tiff],
         show_progress="full",
     )
 
-    clear_btn.click(
-        fn=clear_all,
-        inputs=[],
-        outputs=[input_image, output_image, output_info, download_file],
-    )
+    # Interactive elements that don't do anything functionally but can show alerts
+    def show_alert():
+        gr.Info("This feature is coming soon!")
+    compare_btn.click(fn=show_alert)
+    share_btn.click(fn=show_alert)
 
 
 # ============================================================
@@ -547,7 +471,5 @@ if __name__ == "__main__":
     demo.launch(
         server_name="0.0.0.0",
         server_port=7860,
-        show_error=True,
-        theme=THEME,
-        css=CSS,
+        show_error=True
     )