Update app.py

app.py

@@ -31,9 +31,16 @@ def analyze(text):
 
 # ---------- CSS ----------
 CSS = """
-/* Set same background color for everything */
-body, .gradio-container, .gr-blocks, .gr-box, .gr-panel {
+/* Keep the main app and textboxes same dark grey */
+body, .gradio-container, .gr-blocks, .gr-panel {
+    background-color: #1f1f1f !important;
+}
+
+/* Sidebar box styling */
+.sidebar-box {
     background-color: #2b2b2b !important;
+    padding: 20px;
+    border-radius: 10px;
 }
 
 /* Keep text visible */
@@ -41,7 +48,7 @@ body, .gradio-container, .gr-blocks, .gr-box, .gr-panel {
     color: #fff !important;
 }
 
-/* Style input fields */
+/* Match textboxes with main background */
 textarea, input[type="text"] {
     background-color: #1f1f1f !important;
     border: 1px solid rgba(255,255,255,0.2) !important;
@@ -53,23 +60,23 @@ textarea, input[type="text"] {
 with gr.Blocks(css=CSS, theme="default") as demo:
     with gr.Row(equal_height=True):
         with gr.Column(scale=1):
-            gr.Markdown("""
-            ## 🛡️ Arabic Content Safety Analyzer
+            with gr.Box(elem_classes="sidebar-box"):
+                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** (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)
+                **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) أدخل النص العربي في الحقل.  
-            2) اضغط **Analyze**.  
-            3) راجع النتائج والإجراء المقترح.
-            """)
+                **How to Use:**
+                1. Enter Arabic text in the box.
+                2. Click **Analyze**.
+                3. Review the results and suggested action.
 
         with gr.Column(scale=3):
             gr.Markdown("### Enter Arabic Text for Analysis")
@@ -90,4 +97,4 @@ with gr.Blocks(css=CSS, theme="default") as demo:
             )
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch()