[FIX]UI

app.py

@@ -362,8 +362,8 @@ def predict_single_url(url):
     screenshot_path = take_screenshot(url)
     if not screenshot_path:
         error_label = {"Error": 1.0, "Non-Gambling": 0.0, "Gambling": 0.0}
-        error_msg = f"**Gagal mengambil screenshot**\n\nURL: `{url}`\n\n**Kemungkinan penyebab:**\n• Terlalu banyak redirect\n• Website memblokir akses otomatis\n• Masalah koneksi jaringan\n• URL tidak valid"
-        return error_label, error_msg, None, "", "", "**Status:** Gagal mengambil screenshot"
+        error_msg = f"**Error:** Unable to capture screenshot for `{url}`\n\n**Possible reasons:**\n• Too many redirects\n• Website blocking automated access\n• Network connectivity issues\n• Invalid URL"
+        return error_label, error_msg, None, "", "", "**Model:** Screenshot capture failed"
 
     text = extract_text_from_image(screenshot_path)
     raw_text = text  # Store raw text before cleaning
@@ -389,10 +389,9 @@ def predict_single_url(url):
         }
         
         confidence = gambling_prob if is_gambling else non_gambling_prob
-        result_text = "Gambling" if is_gambling else "Non-Gambling"
-        confidence_md = f"**Tingkat Keyakinan:** {confidence:.1%}\n\n**Model:** Image-Only (EfficientNet-B3)\n\n**Hasil:** {result_text}"
+        confidence_md = f"**Confidence:** {confidence:.1%}\n\n**Model Used:** Image-Only Model (EfficientNet-B3)\n\n**Prediction:** {'Gambling' if is_gambling else 'Non-Gambling'}"
         
-        model_info = f"**Tipe Model:** Image-Only\n**Arsitektur:** EfficientNet-B3\n**Probabilitas Gambling:** {gambling_prob:.1%}\n**Probabilitas Non-Gambling:** {non_gambling_prob:.1%}"
+        model_info = f"**Model Type:** Image-Only\n**Architecture:** EfficientNet-B3\n**Gambling Probability:** {gambling_prob:.1%}\n**Non-Gambling Probability:** {non_gambling_prob:.1%}"
         
         print(f"[Image-Only] URL: {url}")
         print(f"Prediction: {'Gambling' if is_gambling else 'Non-Gambling'} | Confidence: {confidence:.2f}\n")
@@ -432,17 +431,16 @@ def predict_single_url(url):
             image_weight = 0.5
             text_weight = 0.5
         
-        result_text = "Gambling" if is_gambling else "Non-Gambling"
-        confidence_md = f"**Tingkat Keyakinan:** {confidence:.1%}\n\n**Model:** Fusion Model (Image + Text)\n\n**Hasil:** {result_text}"
+        confidence_md = f"**Confidence:** {confidence:.1%}\n\n**Model Used:** Fusion Model (Image + Text)\n\n**Prediction:** {'Gambling' if is_gambling else 'Non-Gambling'}"
         
-        model_info = f"""**Tipe Model:** Fusion Model (MLP)
+        model_info = f"""**Model Type:** Fusion Model (MLP)
 **Image Model:** EfficientNet-B3
 **Text Model:** IndoBERT
 
-**Prediksi Individual:**
+**Individual Predictions:**
 - Image Model: {image_probs[0].item():.1%}
 - Text Model: {text_probs[0].item():.1%}
-- Hasil Fusion: {gambling_prob:.1%}"""
+- Fusion Result: {gambling_prob:.1%}"""
 
         # ✨ Log detail
         print(f"[Fusion Model] URL: {url}")
@@ -473,199 +471,230 @@ def predict_batch_urls(file_obj):
 
 # --- Gradio App ---
 
-# Custom CSS - Tokopedia style
+# Custom CSS for professional styling
 custom_css = """
-    .header-container {
-        background: #fff;
-        border-bottom: 1px solid #e5e5e5;
-        padding: 20px 0;
-        margin-bottom: 30px;
+    * {
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
     }
-    .header-title {
-        font-size: 24px;
-        font-weight: 600;
-        color: #333;
+    .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);
+    }
+    .main-header h1 {
         margin: 0;
-        padding: 0;
+        font-size: 2.25rem;
+        font-weight: 600;
+        letter-spacing: -0.5px;
+        color: #ffffff;
     }
-    .header-subtitle {
-        font-size: 14px;
-        color: #666;
-        margin: 5px 0 0 0;
+    .main-header p {
+        margin: 0.75rem 0 0 0;
+        font-size: 1rem;
+        opacity: 0.95;
+        font-weight: 400;
+        color: #e2e8f0;
     }
-    .content-container {
-        max-width: 1200px;
+    .gradio-container {
+        max-width: 1400px;
         margin: 0 auto;
-        padding: 0 20px;
+        padding: 0 1.5rem;
     }
-    .card {
-        background: #fff;
-        border: 1px solid #e5e5e5;
-        border-radius: 8px;
-        padding: 24px;
-        margin-bottom: 20px;
+    .gradio-block {
+        background: #ffffff;
     }
-    .section-title {
-        font-size: 18px;
+    h2, h3, h4 {
+        color: #1a202c;
         font-weight: 600;
-        color: #333;
-        margin: 0 0 20px 0;
-        padding-bottom: 12px;
-        border-bottom: 2px solid #42b549;
+        letter-spacing: -0.3px;
     }
-    .info-text {
-        font-size: 14px;
-        color: #666;
+    .gr-markdown {
+        color: #4a5568;
         line-height: 1.6;
-        margin: 0;
     }
-    .button-primary {
-        background: #42b549;
-        color: #fff;
+    .gr-button {
+        background: #2c5282;
+        color: #ffffff;
         border: none;
-        padding: 12px 32px;
-        border-radius: 4px;
         font-weight: 500;
-        cursor: pointer;
+        transition: all 0.2s ease;
     }
-    .button-primary:hover {
-        background: #3aa040;
+    .gr-button:hover {
+        background: #2a4d7a;
+        transform: translateY(-1px);
+        box-shadow: 0 4px 8px rgba(44, 82, 130, 0.3);
     }
-    .result-box {
-        background: #f8f9fa;
-        border: 1px solid #e5e5e5;
-        border-radius: 8px;
-        padding: 20px;
-        margin: 15px 0;
+    .gr-textbox, .gr-textbox input {
+        border: 1px solid #cbd5e0;
+        border-radius: 6px;
+        transition: border-color 0.2s ease;
     }
-    .footer-text {
-        text-align: center;
-        color: #999;
-        font-size: 12px;
-        padding: 20px 0;
-        border-top: 1px solid #e5e5e5;
-        margin-top: 40px;
+    .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;
+    }
+    .gr-accordion {
+        border: 1px solid #e2e8f0;
+        border-radius: 6px;
+        background: #f7fafc;
+    }
+    .gr-dataframe {
+        border: 1px solid #e2e8f0;
+        border-radius: 6px;
+    }
+    hr {
+        border: none;
+        border-top: 1px solid #e2e8f0;
+        margin: 2rem 0;
     }
 """
 
-# Create custom theme with Tokopedia colors
-tokopedia_theme = gr.themes.Default(
-    primary_hue=gr.themes.colors.green,
-    font=("Inter", "ui-sans-serif", "system-ui", "sans-serif"),
+# 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="#42b549",
-    button_primary_background_fill_hover="#3aa040",
+    button_primary_background_fill="#2c5282",
+    button_primary_background_fill_hover="#2a4d7a",
     button_primary_text_color="#ffffff",
-    border_color_accent="#42b549",
-    border_color_primary="#e5e5e5",
+    button_primary_background_fill_dark="#2c5282",
+    border_color_primary="#e2e8f0",
+    border_color_accent="#2c5282",
     background_fill_primary="#ffffff",
-    background_fill_secondary="#f8f9fa",
-    body_text_color="#333333",
-    body_text_color_subdued="#666666",
+    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",
+    progress_color="#2c5282",
 )
 
-with gr.Blocks(theme=tokopedia_theme, css=custom_css, title="Gambling Website Detector") as app:
+with gr.Blocks(theme=professional_theme, css=custom_css, title="Gambling Website Detector") as app:
     # Header Section
     with gr.Row():
         gr.HTML("""
-            <div class="header-container">
-                <div class="content-container">
-                    <h1 class="header-title">Gambling Website Detector</h1>
-                    <p class="header-subtitle">Analisis website untuk mendeteksi konten perjudian menggunakan teknologi deep learning</p>
-                </div>
+            <div class="main-header">
+                <h1>Gambling Website Detection System</h1>
+                <p>AI-Powered URL Analysis using Deep Learning Fusion Model</p>
             </div>
         """)
     
-    # Main Content
+    # Info Section
     with gr.Row():
-        with gr.Column():
-            gr.HTML("""
-                <div class="content-container">
-                    <div class="card">
-                        <p class="info-text">
-                            Sistem ini menggunakan model fusion yang menggabungkan analisis gambar dan teks untuk mendeteksi konten perjudian pada website. Masukkan URL website yang ingin dianalisis.
-                        </p>
-                    </div>
-                </div>
-            """)
+        gr.Markdown("""
+        ### About This Tool
+        
+        This advanced detection system uses a **fusion model** combining:
+        - **Image Analysis**: EfficientNet-B3 for visual content detection
+        - **Text Analysis**: IndoBERT for Indonesian text understanding
+        - **Fusion Learning**: Intelligent combination of both modalities
+        
+        Simply enter a website URL to analyze whether it contains gambling-related content.
+        """)
     
     with gr.Tabs():
-        with gr.Tab("Analisis URL", id="single"):
-            with gr.Row():
-                with gr.Column():
-                    gr.HTML("""
-                        <div class="content-container">
-                            <div class="card">
-                                <h2 class="section-title">Masukkan URL Website</h2>
-                                <p class="info-text" style="margin-bottom: 20px;">Masukkan URL lengkap website yang ingin dianalisis. Sistem akan mengambil screenshot dan menganalisis kontennya.</p>
-                            </div>
-                        </div>
-                    """)
-            
+        with gr.Tab("Single URL Analysis", id="single"):
             with gr.Row():
-                with gr.Column():
+                with gr.Column(scale=2):
+                    gr.Markdown("### Enter Website URL")
                     url_input = gr.Textbox(
-                        label="URL Website",
+                        label="Website URL",
                         placeholder="https://example.com",
+                        info="Enter the full URL of the website you want to analyze",
                         lines=1
                     )
                     predict_button = gr.Button(
-                        "Analisis Website",
+                        "Analyze Website",
                         variant="primary",
                         size="lg"
                     )
             
-            with gr.Row():
-                with gr.Column():
-                    gr.HTML("""
-                        <div class="content-container">
-                            <div class="card">
-                                <h2 class="section-title">Hasil Analisis</h2>
-                            </div>
-                        </div>
-                    """)
+            gr.Markdown("---")
             
+            # Results Section
             with gr.Row():
                 with gr.Column(scale=1):
+                    gr.Markdown("### Detection Results")
                     label_output = gr.Label(
-                        label="Hasil Prediksi",
+                        label="Prediction Result",
                         value={"Gambling": 0.0, "Non-Gambling": 0.0},
                         num_top_classes=2
                     )
                     confidence_output = gr.Markdown(
-                        value="",
-                        label="Tingkat Keyakinan"
+                        value="**Confidence:** Waiting for analysis...",
+                        label="Confidence Score"
                     )
                     model_info_output = gr.Markdown(
                         value="",
-                        label="Informasi Model"
+                        label="Model Information"
                     )
                 
                 with gr.Column(scale=1):
+                    gr.Markdown("### Website Screenshot")
                     screenshot_output = gr.Image(
-                        label="Screenshot Website",
+                        label="Captured Screenshot",
                         type="filepath",
                         height=400
                     )
             
-            with gr.Row():
-                with gr.Column():
-                    with gr.Accordion("Detail Analisis Teks", open=False):
-                        with gr.Row():
-                            with gr.Column():
-                                raw_text_output = gr.Textbox(
-                                    label="Teks Mentah (Raw OCR)",
-                                    lines=6,
-                                    interactive=False,
-                                    placeholder="Teks yang diekstrak dari screenshot akan muncul di sini..."
-                                )
-                            with gr.Column():
-                                cleaned_text_output = gr.Textbox(
-                                    label="Teks yang Diproses",
-                                    lines=6,
-                                    interactive=False,
-                                    placeholder="Teks yang sudah dibersihkan akan muncul di sini..."
-                                )
+            gr.Markdown("---")
+            
+            # Text Analysis Section
+            with gr.Accordion("Text Analysis Details", open=False):
+                with gr.Row():
+                    with gr.Column():
+                        gr.Markdown("#### Raw OCR Text")
+                        raw_text_output = gr.Textbox(
+                            label="Extracted Text (Raw)",
+                            lines=8,
+                            interactive=False,
+                            placeholder="Raw text extracted from the screenshot will appear here..."
+                        )
+                    with gr.Column():
+                        gr.Markdown("#### Processed Text")
+                        cleaned_text_output = gr.Textbox(
+                            label="Cleaned Text (Processed)",
+                            lines=8,
+                            interactive=False,
+                            placeholder="Processed and cleaned text will appear here..."
+                        )
 
             predict_button.click(
                 fn=predict_single_url, 
@@ -680,38 +709,36 @@ with gr.Blocks(theme=tokopedia_theme, css=custom_css, title="Gambling Website De
                 ]
             )
 
-        with gr.Tab("Analisis Batch", id="batch"):
-            with gr.Row():
-                with gr.Column():
-                    gr.HTML("""
-                        <div class="content-container">
-                            <div class="card">
-                                <h2 class="section-title">Analisis Multiple URL</h2>
-                                <p class="info-text">Upload file teks (.txt) yang berisi beberapa URL (satu URL per baris) untuk dianalisis sekaligus. Hasil akan ditampilkan dalam format tabel.</p>
-                            </div>
-                        </div>
-                    """)
+        with gr.Tab("Batch URL Analysis", id="batch"):
+            gr.Markdown("""
+            ### Batch Processing
+            
+            Upload a text file containing multiple URLs (one per line) to analyze them all at once.
+            The results will be displayed in a table format.
+            """)
             
             with gr.Row():
                 with gr.Column():
                     file_input = gr.File(
-                        label="Upload File URL (.txt)",
+                        label="Upload URL File (.txt)",
                         file_types=[".txt"]
                     )
-                    gr.Markdown("**Format file:** Satu URL per baris")
+                    gr.Markdown("**Tip:** Upload a .txt file with one URL per line")
                     batch_predict_button = gr.Button(
-                        "Proses Batch",
+                        "Process Batch",
                         variant="primary",
                         size="lg"
                     )
             
+            gr.Markdown("---")
+            
             with gr.Row():
-                with gr.Column():
-                    batch_output = gr.DataFrame(
-                        label="Hasil Analisis",
-                        wrap=True,
-                        interactive=False
-                    )
+                gr.Markdown("### Batch Results")
+                batch_output = gr.DataFrame(
+                    label="Analysis Results",
+                    wrap=True,
+                    interactive=False
+                )
             
             batch_predict_button.click(
                 fn=predict_batch_urls, 
@@ -720,11 +747,12 @@ with gr.Blocks(theme=tokopedia_theme, css=custom_css, title="Gambling Website De
             )
     
     # Footer
-    gr.HTML("""
-        <div class="footer-text">
-            <p>Powered by PyTorch • Gradio • EfficientNet • IndoBERT</p>
-            <p style="margin-top: 8px;">Tool ini untuk keperluan edukasi dan penelitian</p>
-        </div>
+    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>
     """)
 
 app.launch()