Update app.py

app.py

@@ -30,41 +30,61 @@ def analyze(text):
     return hate_label, f"{hate_conf:.2f}", dial_label, f"{dial_conf:.2f}", f"{score:.2f}", action
 
 
-with gr.Blocks() as demo:
-    with gr.Row():
-        # Sidebar
+# ---------- UI (Blocks with Sidebar) ----------
+SIDEBAR_CSS = """
+#sidebar-panel {
+  background: #2b2b2b;              /* darker grey than main area (good for dark theme) */
+  border: 1px solid rgba(255,255,255,0.08);
+  border-radius: 10px;
+  padding: 18px;
+}
+"""
+
+with gr.Blocks(css=SIDEBAR_CSS, theme="default") as demo:
+    with gr.Row(equal_height=True):
+        # Sidebar (left)
         with gr.Column(scale=1):
-            gr.Markdown("""
-            ## 🛡️ Arabic Content Safety Analyzer
+            with gr.Group(elem_id="sidebar-panel"):
+                gr.Markdown(
+                    """
+                    ## 🛡️ Arabic Content Safety Analyzer
 
-            **Purpose:**  
-            Analyze Arabic text for harmful or threatening language.
+                    **Purpose**  
+                    Analyze Arabic text for harmful or threatening language.
 
-            **Features:**
-            - **Hate Speech Classification** (e.g., Offensive, Racism, Sexism, Religious Discrimination)
-            - **Dialect Detection** (e.g., Gulf, Levant, Egyptian, MSA)
-            - **Threat Severity Score** (0–1 scale based on type and confidence)
-            - **Recommended Action** (automated moderation suggestion)
+                    **Features**
+                    - **Hate Speech Classification** (Offensive, Racism, Sexism, Religious Discrimination)
+                    - **Dialect Detection** (Gulf, Levant, Egyptian, MSA)
+                    - **Threat Severity Score** (0–1 based on label + confidence)
+                    - **Recommended Action** (rule-based suggestion)
 
-            **How to Use:**
-            1. Enter Arabic text in the box.
-            2. Click **Analyze**.
-            3. Review the results and suggested action.
-            """)
+                    **How to Use**
+                    1. Enter Arabic text in the box.
+                    2. Click **Analyze**.
+                    3. Review the results and suggested action.
+                    """
+                )
 
-        # Main app
+        # Main app (right)
         with gr.Column(scale=3):
             gr.Markdown("### Enter Arabic Text for Analysis")
+
             input_text = gr.Textbox(lines=4, placeholder="اكتب هنا...", label="Arabic Text")
-            outputs = [
-                gr.Text(label="Hate Speech Label"),
-                gr.Text(label="Label Confidence"),
-                gr.Text(label="Dialect"),
-                gr.Text(label="Dialect Confidence"),
-                gr.Text(label="Threat Score"),
-                gr.Text(label="Recommended Action")
-            ]
-            submit_btn = gr.Button("Analyze")
-            submit_btn.click(fn=analyze, inputs=input_text, outputs=outputs)
-
-demo.launch()
+
+            out_hate = gr.Textbox(label="Hate Speech Label", interactive=False)
+            out_hate_conf = gr.Textbox(label="Label Confidence", interactive=False)
+            out_dialect = gr.Textbox(label="Dialect", interactive=False)
+            out_dialect_conf = gr.Textbox(label="Dialect Confidence", interactive=False)
+            out_score = gr.Textbox(label="Threat Score", interactive=False)
+            out_action = gr.Textbox(label="Recommended Action", interactive=False)
+
+            analyze_btn = gr.Button("Analyze", variant="primary")
+            analyze_btn.click(
+                fn=analyze,
+                inputs=input_text,
+                outputs=[out_hate, out_hate_conf, out_dialect, out_dialect_conf, out_score, out_action],
+            )
+
+# ---------- Launch ----------
+if __name__ == "__main__":
+    demo.launch()