[FIX]UI

app.py

@@ -473,139 +473,53 @@ def predict_batch_urls(file_obj):
 
 # Custom CSS for professional styling
 custom_css = """
-    * {
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
-    }
     .main-header {
         text-align: center;
-        padding: 3rem 2rem;
-        background: linear-gradient(135deg, #1e3a5f 0%, #2c5282 100%);
-        color: #ffffff;
-        border-radius: 8px;
-        margin-bottom: 2.5rem;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        padding: 2rem 0;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: white;
+        border-radius: 10px;
+        margin-bottom: 2rem;
     }
     .main-header h1 {
         margin: 0;
-        font-size: 2.25rem;
-        font-weight: 600;
-        letter-spacing: -0.5px;
-        color: #ffffff;
+        font-size: 2.5rem;
+        font-weight: 700;
     }
     .main-header p {
-        margin: 0.75rem 0 0 0;
-        font-size: 1rem;
-        opacity: 0.95;
-        font-weight: 400;
-        color: #e2e8f0;
-    }
-    .gradio-container {
-        max-width: 1400px;
-        margin: 0 auto;
-        padding: 0 1.5rem;
-    }
-    .gradio-block {
-        background: #ffffff;
-    }
-    h2, h3, h4 {
-        color: #1a202c;
-        font-weight: 600;
-        letter-spacing: -0.3px;
-    }
-    .gr-markdown {
-        color: #4a5568;
-        line-height: 1.6;
-    }
-    .gr-button {
-        background: #2c5282;
-        color: #ffffff;
-        border: none;
-        font-weight: 500;
-        transition: all 0.2s ease;
-    }
-    .gr-button:hover {
-        background: #2a4d7a;
-        transform: translateY(-1px);
-        box-shadow: 0 4px 8px rgba(44, 82, 130, 0.3);
+        margin: 0.5rem 0 0 0;
+        font-size: 1.1rem;
+        opacity: 0.9;
     }
-    .gr-textbox, .gr-textbox input {
-        border: 1px solid #cbd5e0;
-        border-radius: 6px;
-        transition: border-color 0.2s ease;
+    .result-card {
+        background: #f8f9fa;
+        padding: 1.5rem;
+        border-radius: 10px;
+        border: 2px solid #e9ecef;
+        margin: 1rem 0;
     }
-    .gr-textbox:focus-within, .gr-textbox input:focus {
-        border-color: #2c5282;
-        box-shadow: 0 0 0 3px rgba(44, 82, 130, 0.1);
-    }
-    .gr-tabs {
-        border-bottom: 2px solid #e2e8f0;
-    }
-    .gr-tab {
-        color: #4a5568;
-        font-weight: 500;
-        padding: 1rem 1.5rem;
-    }
-    .gr-tab.selected {
-        color: #2c5282;
-        border-bottom: 2px solid #2c5282;
-    }
-    .gr-label {
-        background: #f7fafc;
-        border: 1px solid #e2e8f0;
-        border-radius: 6px;
-    }
-    .gr-image {
-        border: 1px solid #e2e8f0;
-        border-radius: 6px;
-        overflow: hidden;
+    .info-box {
+        background: #e7f3ff;
+        padding: 1rem;
+        border-radius: 8px;
+        border-left: 4px solid #2196F3;
+        margin: 1rem 0;
     }
-    .gr-accordion {
-        border: 1px solid #e2e8f0;
-        border-radius: 6px;
-        background: #f7fafc;
+    .success-box {
+        background: #d4edda;
+        border-left-color: #28a745;
     }
-    .gr-dataframe {
-        border: 1px solid #e2e8f0;
-        border-radius: 6px;
+    .warning-box {
+        background: #fff3cd;
+        border-left-color: #ffc107;
     }
-    hr {
-        border: none;
-        border-top: 1px solid #e2e8f0;
-        margin: 2rem 0;
+    .gradio-container {
+        max-width: 1200px;
+        margin: 0 auto;
     }
 """
 
-# Professional theme configuration
-professional_theme = gr.themes.Default(
-    primary_hue=gr.themes.colors.blue,
-    font=("-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "sans-serif"),
-).set(
-    button_primary_background_fill="#2c5282",
-    button_primary_background_fill_hover="#2a4d7a",
-    button_primary_text_color="#ffffff",
-    button_primary_background_fill_dark="#2c5282",
-    border_color_primary="#e2e8f0",
-    border_color_accent="#2c5282",
-    background_fill_primary="#ffffff",
-    background_fill_secondary="#f7fafc",
-    body_text_color="#1a202c",
-    body_text_color_subdued="#4a5568",
-    block_background_fill="#ffffff",
-    block_border_color="#e2e8f0",
-    block_border_width="1px",
-    block_radius="8px",
-    block_shadow="0 2px 4px rgba(0,0,0,0.05)",
-    input_background_fill="#ffffff",
-    input_border_color="#cbd5e0",
-    input_border_width="1px",
-    input_radius="6px",
-    checkbox_background_color="#2c5282",
-    checkbox_border_color="#cbd5e0",
-    checkbox_border_radius="4px",
-    slider_color="#2c5282",
-)
-
-with gr.Blocks(theme=professional_theme, css=custom_css, title="Gambling Website Detector") as app:
+with gr.Blocks(theme=gr.themes.Soft(), css=custom_css, title="Gambling Website Detector") as app:
     # Header Section
     with gr.Row():
         gr.HTML("""
@@ -748,9 +662,9 @@ with gr.Blocks(theme=professional_theme, css=custom_css, title="Gambling Website
     # Footer
     gr.Markdown("---")
     gr.Markdown("""
-    <div style="text-align: center; color: #4a5568; padding: 2rem 1rem; font-size: 0.875rem; line-height: 1.6;">
-        <p style="margin: 0.5rem 0; color: #2c5282; font-weight: 500;">Powered by PyTorch • Gradio • EfficientNet • IndoBERT</p>
-        <p style="margin: 0.5rem 0; color: #718096;">This tool is for educational and research purposes only</p>
+    <div style="text-align: center; color: #666; padding: 1rem;">
+        <p>Powered by PyTorch • Gradio • EfficientNet • IndoBERT</p>
+        <p style="font-size: 0.9rem;">This tool is for educational and research purposes only</p>
     </div>
     """)