Update app.py

app.py

@@ -326,73 +326,80 @@ def predict_fn(text: str):
     return prediction_result, detailed_analysis
 
 # --------- Gradio UI ----------
-deberta_interface = gr.Interface(
-    fn=predict_fn,
-    inputs=gr.Textbox(label="URL or text", placeholder="Example: http://suspicious-site.example or paste any text"),
-    outputs=[
-        gr.Label(label="Prediction result"),
-        gr.Markdown(label="Detailed token analysis")
-    ],
-    title="Phishing Detector (DeBERTa + LSTM)",
-    description="""
+css_style="""
+.gradio-container {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background-color: #1e1e1e !important;
+    color: #ffffff !important;
+}
+.dark .gradio-container {
+    background-color: #1e1e1e !important;
+}
+/* Dark theme for all components */
+.block {
+    background-color: #2d2d2d !important;
+    border: 1px solid #444 !important;
+}
+.gradio-textbox {
+    background-color: #3d3d3d !important;
+    color: #ffffff !important;
+    border: 1px solid #666 !important;
+}
+.gradio-button {
+    background-color: #4a4a4a !important;
+    color: #ffffff !important;
+    border: 1px solid #666 !important;
+}
+.gradio-button:hover {
+    background-color: #5a5a5a !important;
+}
+"""
+with gr.Blocks(css=css_style) as demo:
+    gr.Markdown("# 🛡️ Phishing Detector (DeBERTa + LSTM)")
+    gr.Markdown("""
     Enter a URL or text for analysis.
     **Features:**
     - **URL Analysis**: For URLs, the system will fetch HTML content and combine both URL and content analysis
-    - **Combined Prediction**: Uses weighted combination of URL structure and webpage content analysis  
+    - **Combined Prediction**: Uses weighted combination of URL structure and webpage content analysis
     - **Visual Analysis**: Predict phishing/benign probability with visual charts
     - **Token Importance**: Display the most important tokens in classification
     - **Detailed Insights**: Comprehensive analysis of the impact of each token
-    - **Dark Theme**: Beautiful interface with colorful charts optimized for dark themes
     
     **How it works for URLs:**
     1. Analyze the URL structure itself
     2. Fetch the webpage HTML content
     3. Analyze the webpage content
     4. Combine both results for final prediction (30% URL + 70% content)
-    """,
-    examples=[
-        ["http://rendmoiunserviceeee.com"],
-        ["https://www.google.com"],
-        ["Dear customer, your account has been suspended. Click here to verify your identity immediately."],
-        ["https://mail-secure-login-verify.example/path?token=suspicious"],
-        ["http://paypaI-security-update.net/login"],
-        ["Your package has been delivered successfully. Thank you for using our service."],
-        ["https://github.com/user/repo"]
-    ],
-    css="""
-    .gradio-container {
-        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-        background-color: #1e1e1e !important;
-        color: #ffffff !important;
-    }
-    .dark .gradio-container {
-        background-color: #1e1e1e !important;
-    }
-    /* Dark theme for all components */
-    .block {
-        background-color: #2d2d2d !important;
-        border: 1px solid #444 !important;
-    }
-    .gradio-textbox {
-        background-color: #3d3d3d !important;
-        color: #ffffff !important;
-        border: 1px solid #666 !important;
-    }
-    .gradio-button {
-        background-color: #4a4a4a !important;
-        color: #ffffff !important;
-        border: 1px solid #666 !important;
-    }
-    .gradio-button:hover {
-        background-color: #5a5a5a !important;
-    }
-    """
-)
+    """)
+    
+    with gr.Row():
+        with gr.Column(scale=2):
+            input_box = gr.Textbox(
+                label="URL or text", 
+                placeholder="Example: http://suspicious-site.example or paste any text",
+                lines=3
+            )
+            btn_submit = gr.Button("🔍 Analyze", variant="primary")
+            
+            gr.Examples(
+                examples=[
+                    ["http://rendmoiunserviceeee.com"],
+                    ["https://www.google.com"],
+                    ["Dear customer, your account has been suspended. Click here to verify your identity immediately."],
+                    ["https://mail-secure-login-verify.example/path?token=suspicious"],
+                    ["http://paypaI-security-update.net/login"],
+                    ["Your package has been delivered successfully. Thank you for using our service."],
+                    ["https://github.com/user/repo"]
+                ],
+                inputs=input_box
+            )
+            
+        with gr.Column(scale=3):
+            # Output là HTML để hiển thị báo cáo đẹp mắt
+            output_html = gr.HTML(label="Analysis Result")
 
-demo = gr.TabbedInterface(
-    [deberta_interface],
-    ["DeBERTa + LSTM"]
-)
+    # Kết nối nút bấm với hàm xử lý
+    btn_submit.click(fn=predict_fn, inputs=input_box, outputs=output_html)
 
 if __name__ == "__main__":
     demo.launch()