Update app.py

app.py

@@ -15,6 +15,641 @@ import uvicorn
 
 warnings.filterwarnings("ignore")
 
+# ============================================================
+# CUSTOM CSS FOR GRADIO UI
+# ============================================================
+CUSTOM_CSS = """
+/* Reset and base styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+:root {
+    --primary-color: #4f46e5;
+    --primary-light: #6366f1;
+    --secondary-color: #10b981;
+    --danger-color: #ef4444;
+    --warning-color: #f59e0b;
+    --info-color: #3b82f6;
+    --dark-color: #1f2937;
+    --light-color: #f9fafb;
+    --gray-color: #6b7280;
+    --border-color: #e5e7eb;
+    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+    --radius-sm: 0.375rem;
+    --radius-md: 0.5rem;
+    --radius-lg: 0.75rem;
+    --radius-xl: 1rem;
+}
+
+body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+    min-height: 100vh;
+    color: var(--dark-color);
+}
+
+/* Override Gradio container */
+.gradio-container {
+    max-width: 1400px !important;
+    margin: 0 auto !important;
+    padding: 2rem !important;
+    background: transparent !important;
+}
+
+/* Header styling */
+.header-section {
+    text-align: center;
+    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
+    color: white;
+    padding: 3rem 2rem;
+    border-radius: var(--radius-xl);
+    margin-bottom: 3rem;
+    box-shadow: var(--shadow-lg);
+    position: relative;
+    overflow: hidden;
+}
+
+.header-section::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
+    opacity: 0.1;
+}
+
+.header-title {
+    font-size: 3rem;
+    font-weight: 800;
+    margin-bottom: 1rem;
+    line-height: 1.2;
+    position: relative;
+    z-index: 1;
+}
+
+.header-subtitle {
+    font-size: 1.25rem;
+    opacity: 0.9;
+    margin-bottom: 0.5rem;
+    position: relative;
+    z-index: 1;
+}
+
+.header-description {
+    font-size: 1rem;
+    opacity: 0.8;
+    max-width: 800px;
+    margin: 1.5rem auto 0;
+    line-height: 1.6;
+    position: relative;
+    z-index: 1;
+}
+
+/* Main content layout */
+.content-wrapper {
+    display: grid;
+    grid-template-columns: 1fr 1.5fr;
+    gap: 2rem;
+    margin-bottom: 3rem;
+}
+
+@media (max-width: 1024px) {
+    .content-wrapper {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* Upload section */
+.upload-container {
+    background: white;
+    padding: 2rem;
+    border-radius: var(--radius-xl);
+    box-shadow: var(--shadow-md);
+    border: 1px solid var(--border-color);
+}
+
+.upload-header {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-bottom: 1.5rem;
+    color: var(--primary-color);
+}
+
+.upload-icon {
+    font-size: 1.5rem;
+}
+
+.upload-header h3 {
+    font-size: 1.5rem;
+    font-weight: 600;
+}
+
+.image-upload-area {
+    border: 2px dashed var(--border-color);
+    border-radius: var(--radius-lg);
+    padding: 2rem;
+    text-align: center;
+    margin-bottom: 1.5rem;
+    transition: all 0.3s ease;
+    background: var(--light-color);
+    cursor: pointer;
+}
+
+.image-upload-area:hover {
+    border-color: var(--primary-light);
+    background: rgba(99, 102, 241, 0.05);
+}
+
+.image-upload-area .upload-placeholder {
+    color: var(--gray-color);
+    font-size: 1rem;
+}
+
+.image-preview-container {
+    margin-top: 1rem;
+    border-radius: var(--radius-md);
+    overflow: hidden;
+    border: 1px solid var(--border-color);
+}
+
+/* Button styling */
+.analyze-button {
+    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%) !important;
+    color: white !important;
+    border: none !important;
+    padding: 1rem 2rem !important;
+    font-size: 1.125rem !important;
+    font-weight: 600 !important;
+    border-radius: var(--radius-lg) !important;
+    cursor: pointer !important;
+    transition: all 0.3s ease !important;
+    width: 100% !important;
+    margin-top: 1rem !important;
+    box-shadow: var(--shadow-md) !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    gap: 0.5rem !important;
+}
+
+.analyze-button:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: var(--shadow-lg) !important;
+    background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-color) 100%) !important;
+}
+
+.analyze-button:active {
+    transform: translateY(0) !important;
+}
+
+/* Guide box */
+.upload-guide {
+    background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);
+    padding: 1.5rem;
+    border-radius: var(--radius-lg);
+    margin-top: 1.5rem;
+    border-left: 4px solid var(--info-color);
+}
+
+.upload-guide h4 {
+    color: var(--info-color);
+    margin-bottom: 0.75rem;
+    font-size: 1.125rem;
+}
+
+.upload-guide ul {
+    list-style: none;
+    padding: 0;
+}
+
+.upload-guide li {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 0.5rem;
+    color: var(--dark-color);
+}
+
+.upload-guide li::before {
+    content: '✓';
+    color: var(--secondary-color);
+    font-weight: bold;
+}
+
+/* Results section */
+.results-container {
+    background: white;
+    padding: 2rem;
+    border-radius: var(--radius-xl);
+    box-shadow: var(--shadow-md);
+    border: 1px solid var(--border-color);
+    height: 100%;
+}
+
+.results-header {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-bottom: 1.5rem;
+    color: var(--primary-color);
+}
+
+.results-icon {
+    font-size: 1.5rem;
+}
+
+.results-header h3 {
+    font-size: 1.5rem;
+    font-weight: 600;
+}
+
+.results-placeholder {
+    text-align: center;
+    padding: 4rem 2rem;
+    color: var(--gray-color);
+}
+
+.results-placeholder h4 {
+    font-size: 1.25rem;
+    margin-bottom: 0.5rem;
+    color: var(--dark-color);
+}
+
+.arrow-indicator {
+    font-size: 3rem;
+    margin-top: 1rem;
+    color: var(--border-color);
+}
+
+/* Results content */
+.results-content {
+    animation: fadeIn 0.5s ease;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.results-title {
+    text-align: center;
+    margin-bottom: 2rem;
+}
+
+.results-title h2 {
+    font-size: 2rem;
+    color: var(--dark-color);
+    margin-bottom: 0.5rem;
+}
+
+.results-title p {
+    color: var(--gray-color);
+    font-size: 1rem;
+}
+
+/* Results table */
+.results-table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    margin: 2rem 0;
+    background: white;
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+    box-shadow: var(--shadow-sm);
+}
+
+.results-table thead {
+    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+}
+
+.results-table th {
+    padding: 1.25rem 1.5rem;
+    text-align: left;
+    font-weight: 600;
+    color: var(--dark-color);
+    border-bottom: 2px solid var(--border-color);
+    font-size: 1.1rem;
+}
+
+.results-table td {
+    padding: 1.25rem 1.5rem;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.results-table tr:last-child td {
+    border-bottom: none;
+}
+
+.condition-name {
+    font-weight: 600;
+    color: var(--dark-color);
+}
+
+.classification-badge {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.5rem 1rem;
+    border-radius: var(--radius-md);
+    font-weight: 600;
+    font-size: 1.1rem;
+}
+
+.confidence-display {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.progress-bar {
+    flex: 1;
+    height: 20px;
+    background: var(--border-color);
+    border-radius: 10px;
+    overflow: hidden;
+    position: relative;
+}
+
+.progress-fill {
+    height: 100%;
+    border-radius: 10px;
+    transition: width 1s ease-in-out;
+    position: relative;
+    overflow: hidden;
+}
+
+.progress-fill::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(90deg, 
+        transparent 0%, 
+        rgba(255, 255, 255, 0.3) 50%, 
+        transparent 100%);
+    animation: shimmer 2s infinite;
+}
+
+@keyframes shimmer {
+    0% { transform: translateX(-100%); }
+    100% { transform: translateX(100%); }
+}
+
+.confidence-value {
+    font-weight: 700;
+    font-size: 1.2rem;
+    min-width: 70px;
+    text-align: right;
+    color: var(--dark-color);
+}
+
+/* Recommendations section */
+.recommendations-box {
+    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
+    padding: 2rem;
+    border-radius: var(--radius-lg);
+    margin: 2rem 0;
+    border-left: 4px solid var(--info-color);
+}
+
+.recommendations-header {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-bottom: 1.5rem;
+    color: var(--info-color);
+}
+
+.recommendations-header h3 {
+    font-size: 1.5rem;
+    font-weight: 600;
+}
+
+.recommendation-item {
+    margin-bottom: 1.5rem;
+}
+
+.recommendation-item:last-child {
+    margin-bottom: 0;
+}
+
+.recommendation-item h4 {
+    color: var(--dark-color);
+    font-size: 1.1rem;
+    margin-bottom: 0.5rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.recommendation-item p {
+    color: var(--gray-color);
+    line-height: 1.6;
+    margin: 0;
+    padding-left: 1.5rem;
+}
+
+/* Disclaimer */
+.disclaimer-box {
+    background: linear-gradient(135deg, #fef3c7 0%, #fef9c3 100%);
+    padding: 1.5rem;
+    border-radius: var(--radius-lg);
+    border-left: 4px solid var(--warning-color);
+    margin-top: 2rem;
+}
+
+.disclaimer-box strong {
+    color: var(--warning-color);
+    display: block;
+    margin-bottom: 0.5rem;
+    font-size: 1rem;
+}
+
+.disclaimer-box p {
+    color: var(--dark-color);
+    font-size: 0.9rem;
+    line-height: 1.5;
+    margin: 0;
+}
+
+/* Examples section */
+.examples-section {
+    background: white;
+    padding: 2rem;
+    border-radius: var(--radius-xl);
+    box-shadow: var(--shadow-md);
+    margin-top: 2rem;
+    border: 1px solid var(--border-color);
+}
+
+.examples-header {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-bottom: 1.5rem;
+    color: var(--primary-color);
+}
+
+.examples-header h3 {
+    font-size: 1.5rem;
+    font-weight: 600;
+}
+
+.example-images {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 1rem;
+}
+
+.example-image {
+    border-radius: var(--radius-md);
+    overflow: hidden;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    border: 2px solid transparent;
+}
+
+.example-image:hover {
+    transform: translateY(-4px);
+    box-shadow: var(--shadow-lg);
+    border-color: var(--primary-light);
+}
+
+/* API Section */
+.api-section {
+    background: white;
+    padding: 2rem;
+    border-radius: var(--radius-xl);
+    box-shadow: var(--shadow-md);
+    margin-top: 2rem;
+    border: 1px solid var(--border-color);
+}
+
+.api-accordion summary {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    cursor: pointer;
+    padding: 1rem 0;
+    color: var(--primary-color);
+    font-size: 1.25rem;
+    font-weight: 600;
+    border-bottom: 2px solid var(--border-color);
+    user-select: none;
+}
+
+.api-content {
+    padding: 1.5rem 0;
+}
+
+.api-endpoint {
+    background: var(--light-color);
+    padding: 1.5rem;
+    border-radius: var(--radius-lg);
+    margin-bottom: 1rem;
+    border-left: 4px solid var(--secondary-color);
+}
+
+.api-endpoint h4 {
+    color: var(--dark-color);
+    margin-bottom: 0.75rem;
+    font-size: 1.1rem;
+}
+
+.api-endpoint pre {
+    background: var(--dark-color);
+    color: white;
+    padding: 1rem;
+    border-radius: var(--radius-md);
+    overflow-x: auto;
+    margin: 0.75rem 0;
+    font-size: 0.9rem;
+}
+
+.api-endpoint code {
+    font-family: 'Monaco', 'Consolas', monospace;
+}
+
+/* Footer */
+.footer {
+    text-align: center;
+    padding: 2rem 0;
+    color: var(--gray-color);
+    font-size: 0.9rem;
+    margin-top: 3rem;
+    border-top: 1px solid var(--border-color);
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .gradio-container {
+        padding: 1rem !important;
+    }
+    
+    .header-title {
+        font-size: 2rem;
+    }
+    
+    .header-subtitle {
+        font-size: 1rem;
+    }
+    
+    .content-wrapper {
+        gap: 1rem;
+    }
+    
+    .upload-container,
+    .results-container {
+        padding: 1.5rem;
+    }
+    
+    .results-table th,
+    .results-table td {
+        padding: 1rem;
+    }
+}
+
+/* Dark mode support */
+.dark .gradio-container {
+    background: #1a1a1a !important;
+}
+
+.dark .upload-container,
+.dark .results-container,
+.dark .examples-section,
+.dark .api-section {
+    background: #2d2d2d !important;
+    border-color: #404040 !important;
+    color: #e5e5e5 !important;
+}
+
+.dark .upload-guide,
+.dark .recommendations-box,
+.dark .disclaimer-box {
+    background: #333333 !important;
+}
+
+.dark .results-table th {
+    background: #333333 !important;
+    color: #e5e5e5 !important;
+}
+
+.dark .api-endpoint pre {
+    background: #333333 !important;
+    color: #e5e5e5 !important;
+}
+"""
+
 # ============================================================
 # 1. LOAD MODEL (with Hugging Face compatibility)
 # ============================================================
@@ -22,46 +657,29 @@ print("=" * 60)
 print("🚀 LOADING MODEL FOR HUGGING FACE SPACES")
 print("=" * 60)
 
-# Cek apakah model ada di root atau folder
-MODEL_PATHS = [
-    "model.keras",
-    "./model.keras",
-    "/tmp/model.keras"
-]
+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:
-            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}")
+            print(f"📂 Loading model from: {model_path}")
+            best_model = tf.keras.models.load_model(model_path, compile=False, safe_mode=False)
+            print(f"✅ Model loaded successfully")
             break
         except Exception as e:
-            print(f"❌ Failed to load from {model_path}: {e}")
+            print(f"❌ Failed to load: {e}")
 
-# Jika model tidak ditemukan, buat dummy model
 if best_model is None:
-    print("⚠️ No model file found. Creating dummy model for demo...")
+    print("⚠️ 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
 # ============================================================
@@ -69,39 +687,39 @@ IMG_SIZE = 224
 DR_CLASSES = ["No DR", "Mild", "Moderate", "Severe", "Proliferative DR"]
 DME_CLASSES = ["No DME", "Low Risk", "High Risk"]
 
+# Color mapping for each class
+COLOR_MAP = {
+    "No DR": "#10b981",      # Green
+    "Mild": "#f59e0b",       # Yellow
+    "Moderate": "#f97316",   # Orange
+    "Severe": "#ef4444",     # Red
+    "Proliferative DR": "#8b5cf6",  # Purple
+    "No DME": "#10b981",     # Green
+    "Low Risk": "#f59e0b",   # Yellow
+    "High Risk": "#ef4444"   # Red
+}
+
 # ============================================================
-# 3. PREPROCESSING FUNCTIONS
+# 3. PREDICTION FUNCTIONS
 # ============================================================
 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. 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
         img_tensor = preprocess_pil_image(image)
-        
-        # Predict
         preds = best_model.predict(img_tensor, verbose=0)
 
-        # Handle different model output formats
         dr_pred = None
         dme_pred = None
         
@@ -135,22 +753,17 @@ def predict_image(image):
                 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)
+        dr_pred = dr_pred if dr_pred is not None else np.zeros(5)
+        dme_pred = dme_pred if dme_pred is not None else 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))
 
@@ -160,298 +773,371 @@ def predict_image(image):
         dr_conf = float(dr_probs[dr_idx] * 100)
         dme_conf = float(dme_probs[dme_idx] * 100)
 
-        # 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."
+        # 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."
+        }
 
         return {
             "success": True,
-            "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
-                }
+            "dr": {
+                "name": dr_name,
+                "confidence": dr_conf,
+                "color": COLOR_MAP.get(dr_name, "#6b7280"),
+                "recommendation": recommendations.get(dr_name, "")
+            },
+            "dme": {
+                "name": dme_name,
+                "confidence": dme_conf,
+                "color": COLOR_MAP.get(dme_name, "#6b7280"),
+                "recommendation": recommendations.get(dme_name, "")
             }
         }
         
     except Exception as e:
-        return {
-            "success": False,
-            "error": str(e)
-        }
+        return {"success": False, "error": str(e)}
 
 # ============================================================
-# 6. CREATE FASTAPI APP
-# ============================================================
-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
+# 4. HTML FORMATTING FUNCTIONS
 # ============================================================
 def format_prediction_html(result):
-    """Format prediction result as HTML for Gradio"""
     if not result["success"]:
         return f"""
-        <div style="color: red; padding: 20px; border: 2px solid red; border-radius: 10px;">
-            <h3>❌ Error</h3>
-            <p>{result['error']}</p>
+        <div class="results-container">
+            <div class="results-header">
+                <span class="results-icon">❌</span>
+                <h3>Error</h3>
+            </div>
+            <div class="results-content">
+                <div style="color: #ef4444; padding: 1rem; background: #fef2f2; border-radius: 0.5rem;">
+                    <strong>Error:</strong> {result['error']}
+                </div>
+            </div>
         </div>
         """
     
-    preds = result["predictions"]
-    dr = preds["diabetic_retinopathy"]
-    dme = preds["diabetic_macular_edema"]
-    
-    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")
+    dr = result["dr"]
+    dme = result["dme"]
     
-    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;">
+    return f"""
+    <div class="results-content">
+        <div class="results-title">
+            <h2>🔬 HASIL DETEKSI</h2>
+            <p>AI-Powered Retina Analysis</p>
+        </div>
+        
+        <table class="results-table">
             <thead>
-                <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>
+                    <th>Kondisi</th>
+                    <th>Klasifikasi</th>
+                    <th>Tingkat Kepercayaan</th>
                 </tr>
             </thead>
             <tbody>
                 <tr>
-                    <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 class="condition-name">Diabetic Retinopathy (DR)</td>
+                    <td>
+                        <span class="classification-badge" style="background: {dr['color']}20; color: {dr['color']};">
+                            {dr['name']}
+                        </span>
                     </td>
-                    <td style="padding: 16px; border-bottom: 1px solid #dee2e6;">
-                        <div style="display: flex; align-items: center; gap: 10px;">
-                            <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>
+                    <td>
+                        <div class="confidence-display">
+                            <div class="progress-bar">
+                                <div class="progress-fill" style="width: {dr['confidence']}%; background: {dr['color']};"></div>
                             </div>
-                            <span style="font-weight: bold; min-width: 60px;">{dr['confidence']:.1f}%</span>
+                            <span class="confidence-value">{dr['confidence']:.1f}%</span>
                         </div>
                     </td>
                 </tr>
                 <tr>
-                    <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 class="condition-name">Diabetic Macular Edema (DME)</td>
+                    <td>
+                        <span class="classification-badge" style="background: {dme['color']}20; color: {dme['color']};">
+                            {dme['name']}
+                        </span>
                     </td>
-                    <td style="padding: 16px; border-bottom: 1px solid #dee2e6;">
-                        <div style="display: flex; align-items: center; gap: 10px;">
-                            <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>
+                    <td>
+                        <div class="confidence-display">
+                            <div class="progress-bar">
+                                <div class="progress-fill" style="width: {dme['confidence']}%; background: {dme['color']};"></div>
                             </div>
-                            <span style="font-weight: bold; min-width: 60px;">{dme['confidence']:.1f}%</span>
+                            <span class="confidence-value">{dme['confidence']:.1f}%</span>
                         </div>
                     </td>
                 </tr>
             </tbody>
         </table>
-    </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: #333; margin-bottom: 8px;">• Diabetic Retinopathy (DR):</h4>
-                <p style="margin: 0; color: #555; line-height: 1.6;">{dr['recommendation']}</p>
+        
+        <div class="recommendations-box">
+            <div class="recommendations-header">
+                <span>🩺</span>
+                <h3>REKOMENDASI KLINIS</h3>
             </div>
-            <div>
-                <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 class="recommendation-item">
+                <h4><span style="color: {dr['color']}">•</span> Diabetic Retinopathy (DR)</h4>
+                <p>{dr['recommendation']}</p>
+            </div>
+            
+            <div class="recommendation-item">
+                <h4><span style="color: {dme['color']}">•</span> Diabetic Macular Edema (DME)</h4>
+                <p>{dme['recommendation']}</p>
             </div>
         </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 class="disclaimer-box">
+            <strong>⚠️ Disclaimer Medis</strong>
+            <p>Hasil ini merupakan prediksi AI dan bukan diagnosis medis. Konsultasikan dengan dokter spesialis mata untuk diagnosis yang akurat dan penanganan lebih lanjut.</p>
+        </div>
     </div>
     """
-    return html
 
 def gradio_predict(image):
-    """Main function for Gradio UI"""
     if image is None:
-        return "❌ Silakan unggah gambar fundus retina"
+        return """
+        <div class="results-placeholder">
+            <h4>👁️ Siap untuk Analisis</h4>
+            <p>Upload gambar retina untuk memulai deteksi AI</p>
+            <div class="arrow-indicator">⬅️</div>
+        </div>
+        """
     
     result = predict_image(image)
     return format_prediction_html(result)
 
 # ============================================================
-# 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
+# 5. CREATE GRADIO APP WITH CUSTOM CSS
 # ============================================================
 with gr.Blocks(
-    title="DR & DME Detection",
-    theme=gr.themes.Soft()
+    css=CUSTOM_CSS,
+    theme=gr.themes.Soft(
+        primary_hue="indigo",
+        secondary_hue="gray",
+        font=("Inter", "ui-sans-serif", "system-ui", "sans-serif")
+    ),
+    title="DR & DME Detection System",
+    analytics_enabled=False
 ) as demo:
     
-    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
+    # Header Section
+    gr.HTML("""
+    <div class="header-section">
+        <div class="header-title">🩺 DETEKSI DIABETIC RETINOPATHY & DME</div>
+        <div class="header-subtitle">Sistem AI untuk Analisis Citra Fundus Retina</div>
+        <div class="header-description">
+            Deteksi dini kerusakan retina akibat diabetes dan pembengkakan di makula dengan teknologi AI.
+            Upload gambar fundus retina untuk mendapatkan analisis instan.
+        </div>
+    </div>
     """)
     
-    with gr.Row():
-        with gr.Column(scale=1):
+    # Main Content
+    with gr.Row(elem_classes="content-wrapper"):
+        # Left Column - Upload
+        with gr.Column(scale=1, min_width=400):
+            gr.HTML("""
+            <div class="upload-container">
+                <div class="upload-header">
+                    <span class="upload-icon">📤</span>
+                    <h3>Upload Gambar Retina</h3>
+                </div>
+                <div class="upload-guide">
+                    <h4>📋 Panduan Upload</h4>
+                    <ul>
+                        <li>Format: JPG, PNG, JPEG</li>
+                        <li>Ukuran: 224×224 piksel (otomatis)</li>
+                        <li>Warna: RGB (otomatis konversi)</li>
+                        <li>Kualitas: Gambar jelas tanpa blur</li>
+                    </ul>
+                </div>
+            </div>
+            """)
+            
             image_input = gr.Image(
                 type="pil",
-                label="📤 Upload Gambar Retina",
-                height=300
+                label=" ",
+                height=320,
+                show_label=False,
+                elem_id="image-upload"
             )
             
-            upload_btn = gr.Button(
-                "🔍 Analisis Gambar",
-                variant="primary",
-                size="lg"
+            predict_btn = gr.Button(
+                "🔍 Analisis Gambar dengan AI",
+                elem_classes="analyze-button",
+                scale=1
             )
             
-            gr.Markdown("""
-            **Format yang didukung:** JPG, PNG, JPEG  
-            **Ukuran rekomendasi:** 224×224 piksel  
-            **Warna:** RGB (akan dikonversi otomatis)
+            gr.HTML("""
+            <div class="upload-guide">
+                <h4>💡 Tips Hasil Terbaik</h4>
+                <ul>
+                    <li>Pastikan gambar fokus pada retina</li>
+                    <li>Hindari cahaya berlebihan</li>
+                    <li>Gunakan gambar dengan kontras baik</li>
+                    <li>Pastikan seluruh area retina terlihat</li>
+                </ul>
+            </div>
             """)
         
-        with gr.Column(scale=2):
+        # Right Column - Results
+        with gr.Column(scale=2, min_width=600):
+            gr.HTML("""
+            <div class="results-container">
+                <div class="results-header">
+                    <span class="results-icon">📊</span>
+                    <h3>Hasil Analisis</h3>
+                </div>
+                <div id="results-output">
+                    <div class="results-placeholder">
+                        <h4>👁️ Siap untuk Analisis</h4>
+                        <p>Upload gambar retina untuk memulai deteksi AI</p>
+                        <div class="arrow-indicator">⬅️</div>
+                    </div>
+                </div>
+            </div>
+            """)
+            
             output_html = gr.HTML(
-                label="📊 Hasil Analisis",
-                value="<div style='text-align: center; padding: 50px; color: #666;'>Hasil analisis akan muncul di sini setelah mengupload gambar.</div>"
+                elem_id="results-output",
+                visible=False
             )
-
-    gr.Markdown("### 🧪 Data Testing")
-    gr.Examples(
-        examples=TEST_IMAGES,
-        inputs=image_input
-    )
     
-    # API Info section
-    gr.Markdown("---")
-    with gr.Accordion("📱 Akses API dari Mobile App", open=False):
-        gr.Markdown("""
-        ### API Endpoints:
-        
-        1. **POST /api/predict** - Upload file gambar
-           ```bash
-           curl -X POST "https://kodetr-idrid.hf.space/api/predict" \\
-             -F "file=@retina_image.jpg"
-           ```
-        
-        2. **GET /api/health** - Health check
-        
-        3. **GET /api/info** - API info
-        """)
+    # Examples Section
+    TEST_IMAGES = [[p] for p in [
+        "IDRiD_001test.jpg", "IDRiD_004test.jpg", "IDRiD_005test.jpg",
+        "IDRiD_006test.jpg", "IDRiD_007test.jpg", "IDRiD_008test.jpg"
+    ] if os.path.exists(p)]
+    
+    if TEST_IMAGES:
+        with gr.Row():
+            with gr.Column():
+                gr.HTML("""
+                <div class="examples-section">
+                    <div class="examples-header">
+                        <span>🧪</span>
+                        <h3>Contoh Gambar Testing</h3>
+                    </div>
+                </div>
+                """)
+                
+                gr.Examples(
+                    examples=TEST_IMAGES,
+                    inputs=image_input,
+                    label="Klik untuk mencoba",
+                    examples_per_page=3
+                )
+    
+    # API Section
+    with gr.Row():
+        with gr.Column():
+            with gr.Accordion("📱 Akses API untuk Mobile App", open=False, elem_classes="api-section"):
+                gr.Markdown("""
+                ## API Endpoints
+                
+                ### Predict Endpoint
+                **URL:** `POST https://kodetr-idrid.hf.space/run/predict`
+                
+                **Content-Type:** `multipart/form-data`
+                
+                **Parameter:** `data` (file gambar)
+                
+                **Contoh cURL:**
+                ```bash
+                curl -X POST "https://kodetr-idrid.hf.space/run/predict" \\
+                  -F "data=@retina_image.jpg"
+                ```
+                
+                **Contoh Python:**
+                ```python
+                import requests
+                
+                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
+                {{
+                    "success": true,
+                    "dr": {{
+                        "name": "No DR",
+                        "confidence": 85.5,
+                        "recommendation": "..."
+                    }},
+                    "dme": {{
+                        "name": "No DME",
+                        "confidence": 92.3,
+                        "recommendation": "..."
+                    }}
+                }}
+                ```
+                """)
+    
+    # Footer
+    gr.HTML("""
+    <div class="footer">
+        <p>🩺 DR & DME Detection System v1.0 • AI-Powered Medical Analysis</p>
+        <p style="font-size: 0.8rem; opacity: 0.7; margin-top: 0.5rem;">
+            Disclaimer: Sistem ini untuk tujuan edukasi dan penelitian. Selalu konsultasikan dengan dokter spesialis.
+        </p>
+    </div>
+    """)
+    
+    # Connect components
+    def update_results(image):
+        if image is None:
+            return gr.HTML("""
+            <div class="results-placeholder">
+                <h4>👁️ Siap untuk Analisis</h4>
+                <p>Upload gambar retina untuk memulai deteksi AI</p>
+                <div class="arrow-indicator">⬅️</div>
+            </div>
+            """, visible=True), gr.HTML(visible=False)
+        else:
+            result = predict_image(image)
+            html_output = format_prediction_html(result)
+            return gr.HTML(visible=False), gr.HTML(html_output, visible=True)
     
-    upload_btn.click(
-        fn=gradio_predict,
+    predict_btn.click(
+        fn=update_results,
         inputs=image_input,
-        outputs=output_html
+        outputs=[output_html, output_html]
+    )
+    
+    image_input.change(
+        fn=update_results,
+        inputs=image_input,
+        outputs=[output_html, output_html]
     )
 
 # ============================================================
-# 10. FASTAPI ENDPOINTS (under /api path)
+# 6. CREATE FASTAPI APP (optional, for API endpoints)
 # ============================================================
-@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
-        }
-    }
+app = FastAPI(title="DR & DME Detection API")
 
-@app.get("/api/health")
-async def health_check():
-    """Health check endpoint"""
-    return {
-        "status": "healthy",
-        "model_loaded": best_model is not None
-    }
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
 
 @app.post("/api/predict")
-async def predict_endpoint(file: UploadFile = File(...)):
-    """
-    Predict endpoint for form-data file upload
-    Accepts: image file (jpg, png, jpeg)
-    """
+async def api_predict(file: UploadFile = File(...)):
     try:
         if not file.content_type.startswith('image/'):
             raise HTTPException(status_code=400, detail="File must be an image")
@@ -466,34 +1152,27 @@ async def predict_endpoint(file: UploadFile = File(...)):
         
         return JSONResponse(content=result)
         
-    except HTTPException:
-        raise
     except Exception as e:
         raise HTTPException(status_code=500, detail=str(e))
 
-# ============================================================
-# 11. MOUNT GRADIO TO ROOT PATH
-# ============================================================
-# Ini penting: Mount Gradio ke root path
+# Mount Gradio app
 app = gr.mount_gradio_app(app, demo, path="/")
 
 # ============================================================
-# 11. MAIN ENTRY POINT
+# 7. MAIN ENTRY POINT
 # ============================================================
 if __name__ == "__main__":
     print("\n" + "="*60)
-    print("🚀 SERVER STARTING")
+    print("🚀 DR & DME Detection System 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(f"🖥️  Web Interface: http://localhost:7860")
+    print(f"📱  API Endpoint:  http://localhost:7860/api/predict")
+    print(f"🔗  Gradio API:    http://localhost:7860/run/predict")
     print("="*60)
     
-    uvicorn.run(
-        app,
-        host="0.0.0.0",
-        port=7860,
-        log_level="info"
+    demo.launch(
+        server_name="0.0.0.0",
+        server_port=7860,
+        share=False,
+        debug=False
     )