[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"**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"
+        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"
 
     text = extract_text_from_image(screenshot_path)
     raw_text = text  # Store raw text before cleaning
@@ -389,9 +389,10 @@ def predict_single_url(url):
         }
         
         confidence = gambling_prob if is_gambling else non_gambling_prob
-        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'}"
+        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}"
         
-        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%}"
+        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%}"
         
         print(f"[Image-Only] URL: {url}")
         print(f"Prediction: {'Gambling' if is_gambling else 'Non-Gambling'} | Confidence: {confidence:.2f}\n")
@@ -431,16 +432,17 @@ def predict_single_url(url):
             image_weight = 0.5
             text_weight = 0.5
         
-        confidence_md = f"**Confidence:** {confidence:.1%}\n\n**Model Used:** Fusion Model (Image + Text)\n\n**Prediction:** {'Gambling' if is_gambling else 'Non-Gambling'}"
+        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}"
         
-        model_info = f"""**Model Type:** Fusion Model (MLP)
+        model_info = f"""**Tipe Model:** Fusion Model (MLP)
 **Image Model:** EfficientNet-B3
 **Text Model:** IndoBERT
 
-**Individual Predictions:**
+**Prediksi Individual:**
 - Image Model: {image_probs[0].item():.1%}
 - Text Model: {text_probs[0].item():.1%}
-- Fusion Result: {gambling_prob:.1%}"""
+- Hasil Fusion: {gambling_prob:.1%}"""
 
         # ✨ Log detail
         print(f"[Fusion Model] URL: {url}")
@@ -471,143 +473,199 @@ def predict_batch_urls(file_obj):
 
 # --- Gradio App ---
 
-# Custom CSS for professional styling
+# Custom CSS - Tokopedia style
 custom_css = """
-    .main-header {
-        text-align: center;
-        padding: 2rem 0;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        color: white;
-        border-radius: 10px;
-        margin-bottom: 2rem;
+    .header-container {
+        background: #fff;
+        border-bottom: 1px solid #e5e5e5;
+        padding: 20px 0;
+        margin-bottom: 30px;
     }
-    .main-header h1 {
+    .header-title {
+        font-size: 24px;
+        font-weight: 600;
+        color: #333;
         margin: 0;
-        font-size: 2.5rem;
-        font-weight: 700;
+        padding: 0;
     }
-    .main-header p {
-        margin: 0.5rem 0 0 0;
-        font-size: 1.1rem;
-        opacity: 0.9;
+    .header-subtitle {
+        font-size: 14px;
+        color: #666;
+        margin: 5px 0 0 0;
     }
-    .result-card {
-        background: #f8f9fa;
-        padding: 1.5rem;
-        border-radius: 10px;
-        border: 2px solid #e9ecef;
-        margin: 1rem 0;
+    .content-container {
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 0 20px;
     }
-    .info-box {
-        background: #e7f3ff;
-        padding: 1rem;
+    .card {
+        background: #fff;
+        border: 1px solid #e5e5e5;
         border-radius: 8px;
-        border-left: 4px solid #2196F3;
-        margin: 1rem 0;
+        padding: 24px;
+        margin-bottom: 20px;
     }
-    .success-box {
-        background: #d4edda;
-        border-left-color: #28a745;
+    .section-title {
+        font-size: 18px;
+        font-weight: 600;
+        color: #333;
+        margin: 0 0 20px 0;
+        padding-bottom: 12px;
+        border-bottom: 2px solid #42b549;
     }
-    .warning-box {
-        background: #fff3cd;
-        border-left-color: #ffc107;
+    .info-text {
+        font-size: 14px;
+        color: #666;
+        line-height: 1.6;
+        margin: 0;
     }
-    .gradio-container {
-        max-width: 1200px;
-        margin: 0 auto;
+    .button-primary {
+        background: #42b549;
+        color: #fff;
+        border: none;
+        padding: 12px 32px;
+        border-radius: 4px;
+        font-weight: 500;
+        cursor: pointer;
+    }
+    .button-primary:hover {
+        background: #3aa040;
+    }
+    .result-box {
+        background: #f8f9fa;
+        border: 1px solid #e5e5e5;
+        border-radius: 8px;
+        padding: 20px;
+        margin: 15px 0;
+    }
+    .footer-text {
+        text-align: center;
+        color: #999;
+        font-size: 12px;
+        padding: 20px 0;
+        border-top: 1px solid #e5e5e5;
+        margin-top: 40px;
     }
 """
 
-with gr.Blocks(theme=gr.themes.Soft(), css=custom_css, title="Gambling Website Detector") as app:
+# 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"),
+).set(
+    button_primary_background_fill="#42b549",
+    button_primary_background_fill_hover="#3aa040",
+    button_primary_text_color="#ffffff",
+    border_color_accent="#42b549",
+    border_color_primary="#e5e5e5",
+    background_fill_primary="#ffffff",
+    background_fill_secondary="#f8f9fa",
+    body_text_color="#333333",
+    body_text_color_subdued="#666666",
+)
+
+with gr.Blocks(theme=tokopedia_theme, css=custom_css, title="Gambling Website Detector") as app:
     # Header Section
     with gr.Row():
         gr.HTML("""
-            <div class="main-header">
-                <h1>Gambling Website Detection System</h1>
-                <p>AI-Powered URL Analysis using Deep Learning Fusion Model</p>
+            <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>
         """)
     
-    # Info Section
+    # Main Content
     with gr.Row():
-        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.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>
+            """)
     
     with gr.Tabs():
-        with gr.Tab("Single URL Analysis", id="single"):
+        with gr.Tab("Analisis URL", id="single"):
             with gr.Row():
-                with gr.Column(scale=2):
-                    gr.Markdown("### Enter Website URL")
+                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.Row():
+                with gr.Column():
                     url_input = gr.Textbox(
-                        label="Website URL",
+                        label="URL Website",
                         placeholder="https://example.com",
-                        info="Enter the full URL of the website you want to analyze",
                         lines=1
                     )
                     predict_button = gr.Button(
-                        "Analyze Website",
+                        "Analisis Website",
                         variant="primary",
                         size="lg"
                     )
             
-            gr.Markdown("---")
+            with gr.Row():
+                with gr.Column():
+                    gr.HTML("""
+                        <div class="content-container">
+                            <div class="card">
+                                <h2 class="section-title">Hasil Analisis</h2>
+                            </div>
+                        </div>
+                    """)
             
-            # Results Section
             with gr.Row():
                 with gr.Column(scale=1):
-                    gr.Markdown("### Detection Results")
                     label_output = gr.Label(
-                        label="Prediction Result",
+                        label="Hasil Prediksi",
                         value={"Gambling": 0.0, "Non-Gambling": 0.0},
                         num_top_classes=2
                     )
                     confidence_output = gr.Markdown(
-                        value="**Confidence:** Waiting for analysis...",
-                        label="Confidence Score"
+                        value="",
+                        label="Tingkat Keyakinan"
                     )
                     model_info_output = gr.Markdown(
                         value="",
-                        label="Model Information"
+                        label="Informasi Model"
                     )
                 
                 with gr.Column(scale=1):
-                    gr.Markdown("### Website Screenshot")
                     screenshot_output = gr.Image(
-                        label="Captured Screenshot",
+                        label="Screenshot Website",
                         type="filepath",
                         height=400
                     )
             
-            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..."
-                        )
+            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..."
+                                )
 
             predict_button.click(
                 fn=predict_single_url, 
@@ -622,36 +680,38 @@ with gr.Blocks(theme=gr.themes.Soft(), css=custom_css, title="Gambling Website D
                 ]
             )
 
-        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.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.Row():
                 with gr.Column():
                     file_input = gr.File(
-                        label="Upload URL File (.txt)",
+                        label="Upload File URL (.txt)",
                         file_types=[".txt"]
                     )
-                    gr.Markdown("**Tip:** Upload a .txt file with one URL per line")
+                    gr.Markdown("**Format file:** Satu URL per baris")
                     batch_predict_button = gr.Button(
-                        "Process Batch",
+                        "Proses Batch",
                         variant="primary",
                         size="lg"
                     )
             
-            gr.Markdown("---")
-            
             with gr.Row():
-                gr.Markdown("### Batch Results")
-                batch_output = gr.DataFrame(
-                    label="Analysis Results",
-                    wrap=True,
-                    interactive=False
-                )
+                with gr.Column():
+                    batch_output = gr.DataFrame(
+                        label="Hasil Analisis",
+                        wrap=True,
+                        interactive=False
+                    )
             
             batch_predict_button.click(
                 fn=predict_batch_urls, 
@@ -660,12 +720,11 @@ with gr.Blocks(theme=gr.themes.Soft(), css=custom_css, title="Gambling Website D
             )
     
     # Footer
-    gr.Markdown("---")
-    gr.Markdown("""
-    <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>
+    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>
     """)
 
 app.launch()