Update app.py

app.py

@@ -4,38 +4,63 @@ import numpy as np
 import os
 import warnings
 import io
+import json
 import base64
 from PIL import Image
+import tempfile
+from fastapi import FastAPI, File, UploadFile, HTTPException
+from fastapi.responses import JSONResponse, HTMLResponse
+from fastapi.middleware.cors import CORSMiddleware
+import uvicorn
 
 warnings.filterwarnings("ignore")
 
+# ============================================================
+# 1. LOAD MODEL (with Hugging Face compatibility)
+# ============================================================
 print("=" * 60)
-print("🚀 DR & DME DETECTION - HUGGING FACE SPACES")
+print("🚀 LOADING MODEL FOR HUGGING FACE SPACES")
 print("=" * 60)
 
-# ============================================================
-# 1. LOAD MODEL
-# ============================================================
-MODEL_PATHS = ["model.keras", "./model.keras"]
+# Cek apakah model ada di root atau folder
+MODEL_PATHS = [
+    "model.keras",
+    "./model.keras",
+    "/tmp/model.keras"
+]
 
 best_model = None
 for model_path in MODEL_PATHS:
     if os.path.exists(model_path):
         try:
-            best_model = tf.keras.models.load_model(model_path, compile=False)
-            print(f"✅ Model loaded from {model_path}")
+            print(f"📂 Trying to load model from: {model_path}")
+            best_model = tf.keras.models.load_model(
+                model_path,
+                compile=False,
+                safe_mode=False  # Important for compatibility
+            )
+            print(f"✅ Model loaded successfully from {model_path}")
             break
         except Exception as e:
             print(f"❌ Failed to load from {model_path}: {e}")
 
+# Jika model tidak ditemukan, buat dummy model
 if best_model is None:
-    print("⚠️ Creating dummy model for demo")
+    print("⚠️ No model file found. Creating dummy model for demo...")
     from tensorflow.keras import layers, Model
     inputs = layers.Input(shape=(224, 224, 3))
     x = layers.GlobalAveragePooling2D()(inputs)
     dr_output = layers.Dense(5, name="dr_head")(x)
     dme_output = layers.Dense(3, name="dme_head")(x)
     best_model = Model(inputs, {"dr_head": dr_output, "dme_head": dme_output})
+    best_model.compile(optimizer="adam", loss="categorical_crossentropy")
+    print("✅ Dummy model created")
+
+# Summary model (debug info)
+try:
+    best_model.summary()
+except:
+    print("ℹ️ Model loaded, summary not available")
 
 # ============================================================
 # 2. CONFIG
@@ -45,209 +70,128 @@ DR_CLASSES = ["No DR", "Mild", "Moderate", "Severe", "Proliferative DR"]
 DME_CLASSES = ["No DME", "Low Risk", "High Risk"]
 
 # ============================================================
-# 3. CUSTOM CSS FOR HUGGING FACE
+# 3. PREPROCESSING FUNCTIONS
 # ============================================================
-CUSTOM_CSS = """
-/* Reset Hugging Face wrapper styles */
-#component-0, #component-1, #component-2, #component-3 {
-    background: white !important;
-    color: black !important;
-}
-
-.gradio-container {
-    background: white !important;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
-    max-width: 1200px !important;
-    margin: 0 auto !important;
-    padding: 20px !important;
-}
-
-/* Fix for dark mode issues */
-.dark .gradio-container,
-.dark .gradio-container * {
-    background: white !important;
-    color: black !important;
-}
-
-/* Header styling */
-.header-container {
-    text-align: center;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    color: white;
-    padding: 30px;
-    border-radius: 15px;
-    margin-bottom: 30px;
-    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
-}
-
-.header-title {
-    font-size: 2.5em;
-    font-weight: 800;
-    margin-bottom: 10px;
-}
-
-.header-subtitle {
-    font-size: 1.2em;
-    opacity: 0.9;
-}
-
-/* Upload section */
-.upload-section {
-    background: #f8f9fa;
-    padding: 25px;
-    border-radius: 12px;
-    border: 2px dashed #dee2e6;
-    text-align: center;
-}
-
-/* Results section */
-.results-section {
-    background: white;
-    padding: 25px;
-    border-radius: 12px;
-    border: 1px solid #e9ecef;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
-}
-
-/* Button styling */
-.primary-button {
-    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
-    color: white !important;
-    border: none !important;
-    padding: 12px 30px !important;
-    font-size: 16px !important;
-    border-radius: 8px !important;
-    font-weight: 600 !important;
-    margin-top: 15px !important;
-}
-
-.primary-button:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
-}
-
-/* Table styling */
-.result-table {
-    width: 100%;
-    border-collapse: collapse;
-    margin: 20px 0;
-}
-
-.result-table th {
-    background: #f8f9fa;
-    padding: 15px;
-    text-align: left;
-    border-bottom: 2px solid #dee2e6;
-    font-weight: 600;
-}
-
-.result-table td {
-    padding: 15px;
-    border-bottom: 1px solid #e9ecef;
-}
-
-/* Progress bar */
-.progress-bar {
-    height: 20px;
-    background: #e9ecef;
-    border-radius: 10px;
-    overflow: hidden;
-    margin: 10px 0;
-}
-
-.progress-fill {
-    height: 100%;
-    border-radius: 10px;
-}
-
-/* Responsive design */
-@media (max-width: 768px) {
-    .gradio-container {
-        padding: 10px !important;
-    }
-    
-    .header-title {
-        font-size: 1.8em;
-    }
-    
-    .header-subtitle {
-        font-size: 1em;
-    }
-}
-"""
+def preprocess_pil_image(img):
+    """Preprocess PIL Image for prediction"""
+    if img.mode != 'RGB':
+        img = img.convert('RGB')
+    img = img.resize((IMG_SIZE, IMG_SIZE))
+    arr = np.array(img, dtype=np.float32) / 255.0
+    return np.expand_dims(arr, 0)
 
 # ============================================================
-# 4. PREDICTION FUNCTION
+# 4. SOFTMAX SAFETY
+# ============================================================
+def ensure_probability(x):
+    x = np.asarray(x, dtype=np.float32)
+    if x.min() < 0 or x.max() > 1.0 or abs(x.sum() - 1.0) > 1e-3:
+        x = tf.nn.softmax(x).numpy()
+    return x
+
+# ============================================================
+# 5. CORE PREDICTION FUNCTION
 # ============================================================
 def predict_image(image):
+    """Core prediction function that returns structured data"""
     try:
         # Preprocess
-        if image.mode != 'RGB':
-            image = image.convert('RGB')
-        img = image.resize((IMG_SIZE, IMG_SIZE))
-        arr = np.array(img, dtype=np.float32) / 255.0
-        x = np.expand_dims(arr, 0)
+        img_tensor = preprocess_pil_image(image)
         
         # Predict
-        preds = best_model.predict(x, verbose=0)
+        preds = best_model.predict(img_tensor, verbose=0)
+
+        # Handle different model output formats
+        dr_pred = None
+        dme_pred = None
         
-        # Handle output
         if isinstance(preds, dict):
-            dr = preds.get("dr_head", list(preds.values())[0])[0]
-            dme = preds.get("dme_head", list(preds.values())[1])[0]
-        else:
-            dr = preds[0][0] if len(preds[0].shape) > 1 else preds[0]
-            dme = preds[1][0] if len(preds[1].shape) > 1 else preds[1]
-        
-        # Softmax
-        dr_probs = tf.nn.softmax(dr).numpy()
-        dme_probs = tf.nn.softmax(dme).numpy()
-        
-        # Results
-        dr_idx = np.argmax(dr_probs)
-        dme_idx = np.argmax(dme_probs)
+            dr_keys = [k for k in preds.keys() if 'dr' in k.lower()]
+            dme_keys = [k for k in preds.keys() if 'dme' in k.lower()]
+            
+            if dr_keys:
+                dr_pred = preds[dr_keys[0]]
+            if dme_keys:
+                dme_pred = preds[dme_keys[0]]
+            
+            if dr_pred is None and len(preds) >= 2:
+                keys = list(preds.keys())
+                dr_pred = preds[keys[0]]
+                dme_pred = preds[keys[1]]
+
+        elif isinstance(preds, (list, tuple)):
+            if len(preds) >= 2:
+                dr_pred = preds[0]
+                dme_pred = preds[1]
+            else:
+                dr_pred = preds[0][:, :5] if len(preds[0].shape) > 1 else preds[0][:5]
+                dme_pred = preds[0][:, 5:8] if len(preds[0].shape) > 1 else preds[0][5:8]
+
+        elif isinstance(preds, np.ndarray):
+            if len(preds.shape) == 2:
+                dr_pred = preds[:, :5]
+                dme_pred = preds[:, 5:8]
+            else:
+                dr_pred = preds[:5]
+                dme_pred = preds[5:8]
+
+        # Take first batch if batch dimension exists
+        if dr_pred is not None and len(dr_pred.shape) > 1:
+            dr_pred = dr_pred[0]
+        if dme_pred is not None and len(dme_pred.shape) > 1:
+            dme_pred = dme_pred[0]
         
+        if dr_pred is None:
+            dr_pred = np.zeros(5)
+        if dme_pred is None:
+            dme_pred = np.zeros(3)
+
+        # Apply softmax
+        dr_probs = ensure_probability(dr_pred)
+        dme_probs = ensure_probability(dme_pred)
+
+        # Get results
+        dr_idx = int(np.argmax(dr_probs))
+        dme_idx = int(np.argmax(dme_probs))
+
         dr_name = DR_CLASSES[dr_idx]
         dme_name = DME_CLASSES[dme_idx]
-        
+
         dr_conf = float(dr_probs[dr_idx] * 100)
         dme_conf = float(dme_probs[dme_idx] * 100)
-        
-        # Recommendations
-        recommendations = {
-            "No DR": "Lanjutkan pola hidup sehat dan lakukan pemeriksaan mata rutin minimal 1 tahun sekali.",
-            "Mild": "Disarankan kontrol gula darah secara ketat dan pemeriksaan mata berkala setiap 6 bulan.",
-            "Moderate": "Disarankan kontrol gula darah secara ketat dan pemeriksaan mata berkala setiap 6 bulan.",
-            "Severe": "Disarankan segera konsultasi ke dokter spesialis mata untuk evaluasi dan penanganan lebih lanjut.",
-            "Proliferative DR": "Disarankan segera konsultasi ke dokter spesialis mata untuk evaluasi dan penanganan lebih lanjut.",
-            "No DME": "Belum ditemukan tanda edema makula diabetik, lanjutkan pemantauan rutin.",
-            "Low Risk": "Perlu observasi ketat dan pemeriksaan lanjutan untuk mencegah progresivitas.",
-            "High Risk": "Disarankan segera mendapatkan evaluasi klinis dan terapi oleh dokter spesialis mata."
-        }
-        
+
+        # Generate recommendations
+        if dr_name in ["No DR"]:
+            rec_dr = "Lanjutkan pola hidup sehat dan lakukan pemeriksaan mata rutin minimal 1 tahun sekali."
+        elif dr_name in ["Mild", "Moderate"]:
+            rec_dr = "Disarankan kontrol gula darah secara ketat dan pemeriksaan mata berkala setiap 6 bulan."
+        else:  # Severe / Proliferative
+            rec_dr = "Disarankan segera konsultasi ke dokter spesialis mata untuk evaluasi dan penanganan lebih lanjut."
+
+        if dme_name == "No DME":
+            rec_dme = "Belum ditemukan tanda edema makula diabetik, lanjutkan pemantauan rutin."
+        elif dme_name == "Low Risk":
+            rec_dme = "Perlu observasi ketat dan pemeriksaan lanjutan untuk mencegah progresivitas."
+        else:  # High Risk
+            rec_dme = "Disarankan segera mendapatkan evaluasi klinis dan terapi oleh dokter spesialis mata."
+
         return {
             "success": True,
-            "dr": {
-                "name": dr_name,
-                "confidence": dr_conf,
-                "color": {
-                    "No DR": "#28a745",
-                    "Mild": "#ffc107", 
-                    "Moderate": "#fd7e14",
-                    "Severe": "#dc3545",
-                    "Proliferative DR": "#6f42c1"
-                }.get(dr_name, "#000000"),
-                "recommendation": recommendations.get(dr_name, "")
-            },
-            "dme": {
-                "name": dme_name,
-                "confidence": dme_conf,
-                "color": {
-                    "No DME": "#28a745",
-                    "Low Risk": "#ffc107",
-                    "High Risk": "#dc3545"
-                }.get(dme_name, "#000000"),
-                "recommendation": recommendations.get(dme_name, "")
+            "predictions": {
+                "diabetic_retinopathy": {
+                    "classification": dr_name,
+                    "confidence": dr_conf,
+                    "index": dr_idx,
+                    "probabilities": dr_probs.tolist(),
+                    "recommendation": rec_dr
+                },
+                "diabetic_macular_edema": {
+                    "classification": dme_name,
+                    "confidence": dme_conf,
+                    "index": dme_idx,
+                    "probabilities": dme_probs.tolist(),
+                    "recommendation": rec_dme
+                }
             }
         }
         
@@ -258,66 +202,95 @@ def predict_image(image):
         }
 
 # ============================================================
-# 5. GRADIO INTERFACE FUNCTION
+# 6. CREATE FASTAPI APP
 # ============================================================
-def gradio_predict(image):
-    if image is None:
-        return """
-        <div class="results-section">
-            <h3 style="color: #666; text-align: center;">
-                ⬆️ Silakan upload gambar retina di sebelah kiri
-            </h3>
-        </div>
-        """
-    
-    result = predict_image(image)
-    
+app = FastAPI(
+    title="DR & DME Detection API",
+    description="API untuk mendeteksi Diabetic Retinopathy dan Diabetic Macular Edema",
+    version="1.0.0"
+)
+
+# Enable CORS for mobile access
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# ============================================================
+# 7. GRADIO UI FUNCTIONS
+# ============================================================
+def format_prediction_html(result):
+    """Format prediction result as HTML for Gradio"""
     if not result["success"]:
         return f"""
-        <div class="results-section" style="border-color: #dc3545;">
-            <h3 style="color: #dc3545;">❌ Error</h3>
+        <div style="color: red; padding: 20px; border: 2px solid red; border-radius: 10px;">
+            <h3>❌ Error</h3>
             <p>{result['error']}</p>
         </div>
         """
     
-    dr = result["dr"]
-    dme = result["dme"]
+    preds = result["predictions"]
+    dr = preds["diabetic_retinopathy"]
+    dme = preds["diabetic_macular_edema"]
     
-    return f"""
-    <div class="results-section">
-        <div style="text-align: center; margin-bottom: 25px;">
-            <h2 style="color: #333; margin-bottom: 10px;">🔬 HASIL ANALISIS</h2>
-            <p style="color: #666;">AI-Powered Retina Analysis</p>
-        </div>
-        
-        <table class="result-table">
+    dr_color = {
+        "No DR": "#28a745",
+        "Mild": "#ffc107",
+        "Moderate": "#fd7e14",
+        "Severe": "#dc3545",
+        "Proliferative DR": "#6f42c1"
+    }.get(dr["classification"], "#000000")
+    
+    dme_color = {
+        "No DME": "#28a745",
+        "Low Risk": "#ffc107",
+        "High Risk": "#dc3545"
+    }.get(dme["classification"], "#000000")
+    
+    html = f"""
+    <div style="font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto;">
+    <div style="text-align: center; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
+                color: white; padding: 25px; border-radius: 15px 15px 0 0; margin-bottom: 20px;">
+        <h1 style="margin: 0; font-size: 32px;">🔬 HASIL DETEKSI</h1>
+        <p style="margin: 5px 0 0 0; font-size: 16px; opacity: 0.9;">AI-Powered Retina Analysis</p>
+    </div>
+    
+    <div style="background: white; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); overflow: hidden;">
+        <table style="width: 100%; border-collapse: collapse;">
             <thead>
-                <tr>
-                    <th>Kondisi</th>
-                    <th>Klasifikasi</th>
-                    <th>Tingkat Kepercayaan</th>
+                <tr style="background-color: #f8f9fa;">
+                    <th style="padding: 16px; text-align: left; border-bottom: 2px solid #dee2e6; font-size: 18px;">Kondisi</th>
+                    <th style="padding: 16px; text-align: left; border-bottom: 2px solid #dee2e6; font-size: 18px;">Klasifikasi</th>
+                    <th style="padding: 16px; text-align: left; border-bottom: 2px solid #dee2e6; font-size: 18px;">Tingkat Kepercayaan</th>
                 </tr>
             </thead>
             <tbody>
                 <tr>
-                    <td><strong>Diabetic Retinopathy (DR)</strong></td>
-                    <td><span style="color: {dr['color']}; font-weight: bold; font-size: 1.1em;">{dr['name']}</span></td>
-                    <td>
+                    <td style="padding: 16px; border-bottom: 1px solid #dee2e6; font-weight: bold;">Diabetic Retinopathy (DR)</td>
+                    <td style="padding: 16px; border-bottom: 1px solid #dee2e6;">
+                        <span style="color: {dr_color}; font-weight: bold; font-size: 18px;">{dr['classification']}</span>
+                    </td>
+                    <td style="padding: 16px; border-bottom: 1px solid #dee2e6;">
                         <div style="display: flex; align-items: center; gap: 10px;">
-                            <div class="progress-bar">
-                                <div class="progress-fill" style="width: {dr['confidence']}%; background: {dr['color']};"></div>
+                            <div style="flex-grow: 1; background: #e9ecef; height: 20px; border-radius: 10px; overflow: hidden;">
+                                <div style="width: {dr['confidence']}%; background: {dr_color}; height: 100%;"></div>
                             </div>
                             <span style="font-weight: bold; min-width: 60px;">{dr['confidence']:.1f}%</span>
                         </div>
                     </td>
                 </tr>
                 <tr>
-                    <td><strong>Diabetic Macular Edema (DME)</strong></td>
-                    <td><span style="color: {dme['color']}; font-weight: bold; font-size: 1.1em;">{dme['name']}</span></td>
-                    <td>
+                    <td style="padding: 16px; border-bottom: 1px solid #dee2e6; font-weight: bold;">Diabetic Macular Edema (DME)</td>
+                    <td style="padding: 16px; border-bottom: 1px solid #dee2e6;">
+                        <span style="color: {dme_color}; font-weight: bold; font-size: 18px;">{dme['classification']}</span>
+                    </td>
+                    <td style="padding: 16px; border-bottom: 1px solid #dee2e6;">
                         <div style="display: flex; align-items: center; gap: 10px;">
-                            <div class="progress-bar">
-                                <div class="progress-fill" style="width: {dme['confidence']}%; background: {dme['color']};"></div>
+                            <div style="flex-grow: 1; background: #e9ecef; height: 20px; border-radius: 10px; overflow: hidden;">
+                                <div style="width: {dme['confidence']}%; background: {dme_color}; height: 100%;"></div>
                             </div>
                             <span style="font-weight: bold; min-width: 60px;">{dme['confidence']:.1f}%</span>
                         </div>
@@ -325,206 +298,202 @@ def gradio_predict(image):
                 </tr>
             </tbody>
         </table>
-        
-        <div style="margin-top: 30px; padding: 20px; background: #f8f9fa; border-radius: 10px;">
-            <h3 style="color: #333; margin-bottom: 15px;">🩺 REKOMENDASI KLINIS</h3>
-            
+    </div>
+    
+    <div style="margin-top: 25px; background: white; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); overflow: hidden;">
+        <div style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); color: white; padding: 15px;">
+            <h3 style="margin: 0; font-size: 22px;">🩺 REKOMENDASI KLINIS</h3>
+        </div>
+        <div style="padding: 20px;">
             <div style="margin-bottom: 15px;">
-                <h4 style="color: #555; margin-bottom: 8px;">• Diabetic Retinopathy (DR):</h4>
-                <p style="color: #666; margin: 0; line-height: 1.6;">{dr['recommendation']}</p>
+                <h4 style="color: #333; margin-bottom: 8px;">• Diabetic Retinopathy (DR):</h4>
+                <p style="margin: 0; color: #555; line-height: 1.6;">{dr['recommendation']}</p>
             </div>
-            
             <div>
-                <h4 style="color: #555; margin-bottom: 8px;">• Diabetic Macular Edema (DME):</h4>
-                <p style="color: #666; margin: 0; line-height: 1.6;">{dme['recommendation']}</p>
+                <h4 style="color: #333; margin-bottom: 8px;">• Diabetic Macular Edema (DME):</h4>
+                <p style="margin: 0; color: #555; line-height: 1.6;">{dme['recommendation']}</p>
             </div>
         </div>
-        
-        <div style="margin-top: 20px; padding: 15px; background: #fff3cd; border: 1px solid #ffeaa7; border-radius: 8px;">
-            <strong>⚠️ Disclaimer:</strong> Hasil ini merupakan prediksi AI dan bukan diagnosis medis. 
-            Konsultasikan dengan dokter spesialis mata untuk diagnosis yang akurat.
-        </div>
+    </div>
+    
+    <div style="margin-top: 20px; padding: 15px; background: #fff3cd; border: 1px solid #ffeaa7; border-radius: 8px; font-size: 14px;">
+        <strong>⚠️ Disclaimer:</strong> Hasil ini merupakan prediksi AI dan bukan diagnosis medis. Konsultasikan dengan dokter spesialis mata untuk diagnosis yang akurat.
+    </div>
     </div>
     """
+    return html
+
+def gradio_predict(image):
+    """Main function for Gradio UI"""
+    if image is None:
+        return "❌ Silakan unggah gambar fundus retina"
+    
+    result = predict_image(image)
+    return format_prediction_html(result)
 
 # ============================================================
-# 6. CREATE GRADIO APP
+# 8. MULTI TEST IMAGES
+# ============================================================
+TEST_IMAGES = [
+    "IDRiD_001test.jpg",
+    "IDRiD_004test.jpg",
+    "IDRiD_005test.jpg",
+    "IDRiD_006test.jpg",
+    "IDRiD_007test.jpg",
+    "IDRiD_008test.jpg",
+    "IDRiD_009test.jpg",
+    "IDRiD_010test.jpg",
+    "IDRiD_011test.jpg",
+    "IDRiD_012test.jpg",
+]
+
+TEST_IMAGES = [[p] for p in TEST_IMAGES if os.path.exists(p)]
+
+# ============================================================
+# 9. CREATE GRADIO APP
 # ============================================================
 with gr.Blocks(
-    css=CUSTOM_CSS,
-    theme=gr.themes.Soft(
-        primary_hue="blue",
-        secondary_hue="gray",
-        font=gr.themes.GoogleFont("Inter")
-    ),
     title="DR & DME Detection",
-    analytics_enabled=False  # Disable Gradio analytics for faster load
+    theme=gr.themes.Soft()
 ) as demo:
     
-    # Custom header
-    gr.HTML("""
-    <div class="header-container">
-        <div class="header-title">🩺 DETEKSI DIABETIC RETINOPATHY & DME</div>
-        <div class="header-subtitle">Sistem AI untuk Analisis Citra Fundus Retina</div>
-        <div style="margin-top: 15px; font-size: 0.9em; opacity: 0.8;">
-            Deteksi kerusakan retina akibat diabetes dan pembengkakan di makula
-        </div>
-    </div>
+    gr.Markdown("""
+    # 🩺 DETEKSI DIABETIC RETINOPATHY & DME
+    ### Sistem AI untuk Analisis Citra Fundus Retina
+    
+    Upload gambar fundus retina untuk mendeteksi:
+    - **Diabetic Retinopathy (DR)**: Kerusakan retina akibat diabetes
+    - **Diabetic Macular Edema (DME)**: Pembengkakan di makula
     """)
     
-    with gr.Row(equal_height=True):
-        # Left column - Upload
-        with gr.Column(scale=1, min_width=400):
-            gr.HTML("""
-            <div class="upload-section">
-                <h3 style="color: #333; margin-bottom: 15px;">📤 UPLOAD GAMBAR</h3>
-                <p style="color: #666; margin-bottom: 10px;">
-                    Upload gambar fundus retina untuk analisis AI
-                </p>
-            </div>
-            """)
-            
+    with gr.Row():
+        with gr.Column(scale=1):
             image_input = gr.Image(
                 type="pil",
-                label=" ",
-                height=300,
-                elem_id="upload-image"
+                label="📤 Upload Gambar Retina",
+                height=300
             )
             
-            predict_btn = gr.Button(
-                "🔍 ANALISIS GAMBAR",
-                elem_classes="primary-button",
-                scale=1
+            upload_btn = gr.Button(
+                "🔍 Analisis Gambar",
+                variant="primary",
+                size="lg"
             )
             
-            gr.HTML("""
-            <div style="margin-top: 20px; padding: 15px; background: #e8f4fd; border-radius: 8px;">
-                <h4 style="color: #0d6efd; margin-bottom: 10px;">📋 Panduan Upload:</h4>
-                <ul style="color: #666; margin: 0; padding-left: 20px;">
-                    <li><strong>Format:</strong> JPG, PNG, JPEG</li>
-                    <li><strong>Ukuran:</strong> 224×224 piksel (otomatis resize)</li>
-                    <li><strong>Warna:</strong> RGB (otomatis konversi)</li>
-                </ul>
-            </div>
+            gr.Markdown("""
+            **Format yang didukung:** JPG, PNG, JPEG  
+            **Ukuran rekomendasi:** 224×224 piksel  
+            **Warna:** RGB (akan dikonversi otomatis)
             """)
         
-        # Right column - Results
-        with gr.Column(scale=2, min_width=600):
+        with gr.Column(scale=2):
             output_html = gr.HTML(
-                value="""
-                <div class="results-section" style="text-align: center; padding: 50px;">
-                    <div style="color: #666; margin-bottom: 20px;">
-                        <h3>👁️ Siap untuk Analisis</h3>
-                        <p>Upload gambar retina di sebelah kiri untuk memulai deteksi</p>
-                    </div>
-                    <div style="font-size: 3em; color: #dee2e6;">
-                        ⬅️
-                    </div>
-                </div>
-                """,
-                elem_id="results-container"
+                label="📊 Hasil Analisis",
+                value="<div style='text-align: center; padding: 50px; color: #666;'>Hasil analisis akan muncul di sini setelah mengupload gambar.</div>"
             )
+
+    gr.Markdown("### 🧪 Data Testing")
+    gr.Examples(
+        examples=TEST_IMAGES,
+        inputs=image_input
+    )
     
-    # API info section
-    with gr.Accordion("📱 AKSES API UNTUK MOBILE APP", open=False):
+    # API Info section
+    gr.Markdown("---")
+    with gr.Accordion("📱 Akses API dari Mobile App", open=False):
         gr.Markdown("""
-        ### API Endpoint untuk Mobile:
-        
-        **URL:** `https://kodetr-idrid.hf.space/run/predict`
-        
-        **Method:** `POST`
-        
-        **Content-Type:** `multipart/form-data`
-        
-        **Body parameter:** `data` (file gambar)
+        ### API Endpoints:
         
-        ### Contoh cURL:
-        ```bash
-        curl -X POST "https://kodetr-idrid.hf.space/run/predict" \\
-          -F "data=@retina_image.jpg"
-        ```
+        1. **POST /api/predict** - Upload file gambar
+           ```bash
+           curl -X POST "https://kodetr-idrid.hf.space/api/predict" \\
+             -F "file=@retina_image.jpg"
+           ```
         
-        ### Contoh Python:
-        ```python
-        import requests
+        2. **GET /api/health** - Health check
         
-        with open("retina.jpg", "rb") as f:
-            response = requests.post(
-                "https://kodetr-idrid.hf.space/run/predict",
-                files={"data": f}
-            )
-        print(response.json())
-        ```
-        
-        ### Response Format (JSON):
-        ```json
-        {{
-            "success": true,
-            "dr": {{
-                "name": "No DR",
-                "confidence": 85.5,
-                "recommendation": "..."
-            }},
-            "dme": {{
-                "name": "No DME", 
-                "confidence": 92.3,
-                "recommendation": "..."
-            }}
-        }}
-        ```
+        3. **GET /api/info** - API info
         """)
     
-    # Connect button
-    predict_btn.click(
-        fn=gradio_predict,
-        inputs=image_input,
-        outputs=output_html
-    )
-    
-    # Auto-trigger on image upload
-    image_input.change(
+    upload_btn.click(
         fn=gradio_predict,
         inputs=image_input,
         outputs=output_html
     )
 
 # ============================================================
-# 7. API FUNCTION FOR /run/predict
+# 10. FASTAPI ENDPOINTS (under /api path)
 # ============================================================
-def api_predict(image):
-    """Function for /run/predict endpoint"""
-    if image is None:
-        return {"error": "No image provided"}
-    
-    result = predict_image(image)
-    return result
-
-# Create separate API interface
-api_interface = gr.Interface(
-    fn=api_predict,
-    inputs=gr.Image(type="pil"),
-    outputs=gr.JSON(),
-    title="API Endpoint",
-    description="Use this endpoint for API calls",
-    allow_flagging="never"
-)
+@app.get("/api/info")
+async def api_info():
+    """API info endpoint"""
+    return {
+        "message": "DR & DME Detection API",
+        "version": "1.0.0",
+        "endpoints": {
+            "docs": "/docs",
+            "health": "/api/health",
+            "predict": "/api/predict",
+            "ui": "/"  # Gradio UI at root
+        }
+    }
 
-# Combine interfaces
-final_app = gr.TabbedInterface(
-    [demo, api_interface],
-    ["🌐 Web Interface", "🔧 API Endpoint"],
-    title="DR & DME Detection"
-)
+@app.get("/api/health")
+async def health_check():
+    """Health check endpoint"""
+    return {
+        "status": "healthy",
+        "model_loaded": best_model is not None
+    }
+
+@app.post("/api/predict")
+async def predict_endpoint(file: UploadFile = File(...)):
+    """
+    Predict endpoint for form-data file upload
+    Accepts: image file (jpg, png, jpeg)
+    """
+    try:
+        if not file.content_type.startswith('image/'):
+            raise HTTPException(status_code=400, detail="File must be an image")
+        
+        contents = await file.read()
+        img = Image.open(io.BytesIO(contents)).convert("RGB")
+        
+        result = predict_image(img)
+        
+        if not result["success"]:
+            raise HTTPException(status_code=500, detail=result["error"])
+        
+        return JSONResponse(content=result)
+        
+    except HTTPException:
+        raise
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
 
 # ============================================================
-# 8. LAUNCH FOR HUGGING FACE
+# 11. MOUNT GRADIO TO ROOT PATH
+# ============================================================
+# Ini penting: Mount Gradio ke root path
+app = gr.mount_gradio_app(app, demo, path="/")
+
+# ============================================================
+# 11. MAIN ENTRY POINT
 # ============================================================
 if __name__ == "__main__":
-    final_app.launch(
-        server_name="0.0.0.0",
-        server_port=7860,
-        share=False,
-        debug=False,
-        show_error=True,
-        favicon_path=None  # Disable favicon for faster load
+    print("\n" + "="*60)
+    print("🚀 SERVER STARTING")
+    print("="*60)
+    print(f"🖥️  Gradio UI: http://0.0.0.0:7860/")
+    print(f"📱 API Docs: http://0.0.0.0:7860/docs")
+    print(f"🏥 Health Check: http://0.0.0.0:7860/api/health")
+    print(f"🔧 API Info: http://0.0.0.0:7860/api/info")
+    print(f"📤 Predict: http://0.0.0.0:7860/api/predict")
+    print("="*60)
+    
+    uvicorn.run(
+        app,
+        host="0.0.0.0",
+        port=7860,
+        log_level="info"
     )