[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:**
-- 🖼️ Image Model: {image_probs[0].item():.1%}
-- 📝 Text Model: {text_probs[0].item():.1%}
-- 🔗 Fusion Result: {gambling_prob:.1%}"""
+**Prediksi Individual:**
+- Image Model: {image_probs[0].item():.1%}
+- Text Model: {text_probs[0].item():.1%}
+- Hasil Fusion: {gambling_prob:.1%}"""
 
         # ✨ Log detail
         print(f"[Fusion Model] URL: {url}")
@@ -471,143 +473,190 @@ 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:
-    # Header Section
+with gr.Blocks(theme=gr.themes.Default(), css=custom_css, title="Gambling Website Detector") as app:
+    # Header
     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
+                        lines=1,
+                        container=False
                     )
                     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
+                        num_top_classes=2,
+                        container=False
                     )
                     confidence_output = gr.Markdown(
-                        value="**Confidence:** Waiting for analysis...",
-                        label="Confidence Score"
+                        value="",
+                        label="Tingkat Keyakinan",
+                        container=False
                     )
                     model_info_output = gr.Markdown(
                         value="",
-                        label="Model Information"
+                        label="Informasi Model",
+                        container=False
                     )
                 
                 with gr.Column(scale=1):
-                    gr.Markdown("### 📸 Website Screenshot")
                     screenshot_output = gr.Image(
-                        label="Captured Screenshot",
+                        label="Screenshot Website",
                         type="filepath",
-                        height=400
+                        height=400,
+                        container=False
                     )
             
-            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...",
+                                    container=False
+                                )
+                            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...",
+                                    container=False
+                                )
 
             predict_button.click(
                 fn=predict_single_url, 
@@ -622,36 +671,40 @@ 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)",
-                        file_types=[".txt"]
+                        label="Upload File URL (.txt)",
+                        file_types=[".txt"],
+                        container=False
                     )
-                    gr.Markdown("💡 **Tip:** Upload a .txt file with one URL per line")
+                    gr.Markdown("**Format file:** Satu URL per baris", container=False)
                     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,
+                        container=False
+                    )
             
             batch_predict_button.click(
                 fn=predict_batch_urls, 
@@ -660,12 +713,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()