Update app.py

app.py

@@ -1,119 +1,61 @@
 import gradio as gr
 import pandas as pd
 
-# Custom CSS to match the screenshot exactly
+# Custom CSS to force the "Sidebar" look in Gradio 4
 custom_css = """
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
-
-.gradio-container {
-    background-color: #06090f !important;
-    font-family: 'Inter', sans-serif !important;
-    color: white !important;
+.gradio-container { background-color: #06090f !important; color: white !important; }
+.fake-sidebar { 
+    background: #0b0f19 !important; 
+    border-right: 1px solid #1f2937 !important; 
+    padding: 20px !important;
+    min-width: 250px !important;
 }
-
-/* Sidebar Styling */
-.sidebar-content { padding: 20px; background: #0b0f19; height: 100%; border-right: 1px solid #1f2937; }
-.logo-area { text-align: center; margin-bottom: 30px; }
 .status-badge { 
-    background: rgba(16, 185, 129, 0.1); 
-    border: 1px solid #10b981; 
-    color: #10b981; 
-    padding: 8px 15px; 
-    border-radius: 20px; 
-    font-size: 12px; 
-    text-align: center;
-    margin-bottom: 40px;
+    background: rgba(16, 185, 129, 0.1); border: 1px solid #10b981; color: #10b981; 
+    padding: 8px; border-radius: 20px; text-align: center; margin-bottom: 30px;
 }
-
-/* Metric Cards */
-.metrics-row { display: flex; gap: 15px; margin-bottom: 25px; }
 .card { 
-    flex: 1; 
-    background: #111827; 
-    padding: 20px; 
-    border-radius: 12px; 
-    text-align: center;
-    border-top: 3px solid #3b82f6; /* Default blue */
-}
-.card.threat { border-top-color: #ef4444; }
-.card.safe { border-top-color: #10b981; }
-.card.rate { border-top-color: #8b5cf6; }
-
-.card-val { font-size: 28px; font-weight: 700; margin-bottom: 5px; }
-.card-label { font-size: 10px; color: #9ca3af; text-transform: uppercase; letter-spacing: 1px; }
-
-/* Accordion & Buttons */
-.establish-btn { 
-    background: linear-gradient(90deg, #3b82f6 0%, #00d4ff 100%) !important; 
-    border: none !important; 
-    color: white !important;
-    font-weight: 600 !important;
-}
-
-/* Bottom Input Bar */
-.chat-container {
-    background: #111827 !important;
-    border: 1px solid #3b82f6 !important;
-    border-radius: 10px !important;
+    background: #111827; padding: 20px; border-radius: 12px; text-align: center;
+    border-top: 3px solid #3b82f6; margin-bottom: 10px;
 }
+.establish-btn { background: linear-gradient(90deg, #3b82f6 0%, #00d4ff 100%) !important; color: white !important; }
 """
 
-with gr.Blocks(css=custom_css, theme=gr.themes.Default()) as demo:
-    
-    # --- SIDEBAR PANEL ---
-    with gr.Sidebar(elem_id="sidebar"):
-        with gr.Column(elem_classes="sidebar-content"):
-            with gr.Column(elem_classes="logo-area"):
-                gr.HTML("""<div style='font-size: 40px;'>🛡️</div>""")
-                gr.Markdown("## **INTELLIGUARD**\nSECURITY PLATFORM")
-            
+with gr.Blocks(css=custom_css) as demo:
+    with gr.Row():
+        # --- THE FAKE SIDEBAR ---
+        with gr.Column(scale=1, elem_classes="fake-sidebar"):
+            gr.HTML("<div style='font-size: 40px; text-align:center;'>🛡️</div>")
+            gr.Markdown("## **INTELLIGUARD**\nSECURITY PLATFORM")
             gr.HTML("<div class='status-badge'>● INTELLIGUARD PROTECTED</div>")
             
-            gr.Markdown("### 📋 AUDIT LOG")
-            gr.Markdown("<p style='color: #6b7280; font-size: 13px;'>No activity recorded yet.</p>")
-            
+            gr.Markdown("### 📋 AUDIT LOG\n<p style='color: #6b7280;'>No activity recorded.</p>")
             gr.Markdown("---")
             gr.Markdown("### 📄 DOCUMENT UPLOAD")
-            gr.File(label=None, file_count="multiple", elem_id="file-upload")
-            gr.Markdown("<p style='color: #6b7280; font-size: 11px;'>200MB per file • PDF, TXT, DOCX</p>")
+            gr.File(label=None)
 
-    # --- MAIN CONTENT AREA ---
-    with gr.Column():
-        # Header Section
-        gr.HTML("""
-            <div style="text-align: center; margin-top: 20px;">
-                <div style='font-size: 30px; margin-bottom: 10px;'>🛡️</div>
-                <h1 style="font-size: 32px; margin: 0;">TechCorp Employee Portal</h1>
-                <p style="color: #6b7280;">Secured by <span style="color: #10b981;">IntelliGuard</span> • 4-Layer Prompt Injection Detection</p>
-            </div>
-        """)
+        # --- THE MAIN CONTENT ---
+        with gr.Column(scale=4):
+            gr.HTML("""
+                <div style="text-align: center; margin-top: 20px;">
+                    <h1 style="font-size: 32px;">TechCorp Employee Portal</h1>
+                    <p style="color: #6b7280;">Secured by <span style="color: #10b981;">IntelliGuard</span></p>
+                </div>
+            """)
 
-        # Metrics Grid
-        with gr.Row(elem_classes="metrics-row"):
-            gr.HTML("<div class='card'><div class='card-val' style='color:#3b82f6'>0</div><div class='card-label'>Total Queries</div></div>")
-            gr.HTML("<div class='card threat'><div class='card-val' style='color:#ef4444'>0</div><div class='card-label'>Threats Blocked</div></div>")
-            gr.HTML("<div class='card safe'><div class='card-val' style='color:#10b981'>0</div><div class='card-label'>Safe Queries</div></div>")
-            gr.HTML("<div class='card rate'><div class='card-val' style='color:#8b5cf6'>100%</div><div class='card-label'>Safe Rate</div></div>")
-
-        # Email Gateway Accordion
-        with gr.Accordion("📧 Enterprise Email Gateway", open=True):
             with gr.Row():
-                email_input = gr.Textbox(label="Target Email", value="security-ops@techcorp.com", interactive=True)
-                pwd_input = gr.Textbox(label="App Password", type="password", placeholder="••••••••••••", interactive=True)
-            connect_btn = gr.Button("🔗 Establish Secure Connection", elem_classes="establish-btn")
+                gr.HTML("<div class='card' style='border-color:#3b82f6'><div style='font-size:24px'>0</div><div style='font-size:10px; color:#9ca3af'>Total Queries</div></div>")
+                gr.HTML("<div class='card' style='border-color:#ef4444'><div style='font-size:24px'>0</div><div style='font-size:10px; color:#9ca3af'>Threats Blocked</div></div>")
+                gr.HTML("<div class='card' style='border-color:#10b981'><div style='font-size:24px'>0</div><div style='font-size:10px; color:#9ca3af'>Safe Queries</div></div>")
 
-        # Spacing
-        gr.Markdown("<div style='height: 100px;'></div>")
+            with gr.Accordion("📧 Enterprise Email Gateway", open=True):
+                email = gr.Textbox(label="Target Email", value="security-ops@techcorp.com")
+                connect_btn = gr.Button("🔗 Establish Secure Connection", elem_classes="establish-btn")
 
-        # Footer Chat Bar
-        with gr.Row():
-            chat_input = gr.Textbox(
-                show_label=False, 
-                placeholder="Ask about company policies, benefits, security guidelines...", 
-                scale=10,
-                elem_classes="chat-container"
-            )
-            submit_btn = gr.Button("↑", scale=1, variant="primary")
+            gr.Markdown("<div style='height: 150px;'></div>")
+            
+            with gr.Row():
+                chat = gr.Textbox(show_label=False, placeholder="Ask about company policies...", scale=10)
+                submit = gr.Button("↑", scale=1, variant="primary")
 
-# Launch
-demo.launch(server_name="0.0.0.0", server_port=7860)
+demo.launch()