Update app.py

app.py

@@ -5,17 +5,18 @@ import torch
 import time
 import re
 
-# Professional Dashboard CSS - Compact & Formal
+# Fixed Professional Dashboard CSS - Complete Textbox Display
 professional_css = """
-/* Professional SOC Dashboard */
+/* Professional SOC Dashboard - Fixed */
 .gradio-container {
     max-width: 100% !important;
-    height: 100vh !important;
+    min-height: 100vh !important;
     margin: 0 !important;
     padding: 0 !important;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
     background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%) !important;
-    overflow: hidden !important;
+    overflow-x: hidden !important;
+    overflow-y: auto !important;
 }
 
 /* Header Section */
@@ -42,16 +43,17 @@ professional_css = """
     margin: 4px 0 0 0 !important;
 }
 
-/* Main Dashboard Grid */
+/* Main Dashboard Grid - Fixed Heights */
 .dashboard-grid {
     display: grid !important;
     grid-template-columns: 1fr 1fr !important;
     gap: 10px !important;
     padding: 0 8px !important;
-    height: calc(100vh - 100px) !important;
+    min-height: calc(100vh - 120px) !important;
+    align-items: start !important;
 }
 
-/* Task Panels */
+/* Task Panels - Fixed Overflow */
 .task-panel {
     background: rgba(255, 255, 255, 0.98) !important;
     border-radius: 12px !important;
@@ -60,8 +62,9 @@ professional_css = """
     border: 2px solid rgba(255, 255, 255, 0.3) !important;
     display: flex !important;
     flex-direction: column !important;
-    height: 100% !important;
-    overflow: hidden !important;
+    min-height: 600px !important;
+    max-height: none !important;
+    overflow: visible !important;
 }
 
 .task-header {
@@ -75,14 +78,17 @@ professional_css = """
     text-align: center !important;
 }
 
-/* Input Areas */
+/* Input Areas - Fixed Sizing */
 .compact-input {
     border: 2px solid #e1e8ed !important;
     border-radius: 6px !important;
     padding: 8px 12px !important;
-    font-size: 12px !important;
+    font-size: 13px !important;
     margin: 5px 0 !important;
     background: #fafbfc !important;
+    min-height: 40px !important;
+    width: 100% !important;
+    box-sizing: border-box !important;
 }
 
 .detection-input {
@@ -90,23 +96,30 @@ professional_css = """
     background: #2d3748 !important;
     color: #e2e8f0 !important;
     border: 2px solid #4a5568 !important;
+    min-height: 120px !important;
+    resize: vertical !important;
 }
 
 .compact-input:focus {
     border-color: #1e3c72 !important;
     box-shadow: 0 0 0 2px rgba(30, 60, 114, 0.1) !important;
+    outline: none !important;
 }
 
-/* Output Areas */
+/* Output Areas - Fixed Heights */
 .compact-output {
     background: #f8fafc !important;
     border: 1px solid #e2e8f0 !important;
     border-radius: 6px !important;
-    padding: 10px !important;
-    font-size: 11px !important;
-    line-height: 1.4 !important;
+    padding: 12px !important;
+    font-size: 12px !important;
+    line-height: 1.5 !important;
     overflow-y: auto !important;
-    flex-grow: 1 !important;
+    min-height: 150px !important;
+    max-height: 250px !important;
+    width: 100% !important;
+    box-sizing: border-box !important;
+    white-space: pre-wrap !important;
 }
 
 /* Buttons */
@@ -114,12 +127,14 @@ professional_css = """
     background: linear-gradient(135deg, #1e3c72, #2a5298) !important;
     border: none !important;
     color: white !important;
-    padding: 8px 16px !important;
+    padding: 10px 18px !important;
     border-radius: 6px !important;
     font-weight: 600 !important;
-    font-size: 12px !important;
+    font-size: 13px !important;
     margin: 3px !important;
     transition: all 0.3s ease !important;
+    cursor: pointer !important;
+    min-height: 40px !important;
 }
 
 .primary-btn:hover {
@@ -131,20 +146,26 @@ professional_css = """
     background: #64748b !important;
     border: none !important;
     color: white !important;
-    padding: 6px 12px !important;
+    padding: 8px 14px !important;
     border-radius: 4px !important;
-    font-size: 11px !important;
+    font-size: 12px !important;
     margin: 2px !important;
+    cursor: pointer !important;
+    min-height: 36px !important;
 }
 
 /* Status Indicators */
 .status-indicator {
-    padding: 4px 8px !important;
+    padding: 6px 10px !important;
     border-radius: 4px !important;
-    font-size: 10px !important;
+    font-size: 11px !important;
     font-weight: 600 !important;
-    margin: 2px 0 !important;
+    margin: 4px 0 !important;
     text-align: center !important;
+    min-height: 30px !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
 }
 
 .status-success {
@@ -167,18 +188,19 @@ professional_css = """
 
 /* Control Sections */
 .control-section {
-    margin: 8px 0 !important;
-    padding: 8px !important;
+    margin: 10px 0 !important;
+    padding: 10px !important;
     background: #f1f5f9 !important;
     border-radius: 6px !important;
     border-left: 4px solid #1e3c72 !important;
 }
 
 .control-label {
-    font-size: 11px !important;
+    font-size: 12px !important;
     font-weight: 600 !important;
     color: #334155 !important;
-    margin-bottom: 4px !important;
+    margin-bottom: 6px !important;
+    display: block !important;
 }
 
 /* Results Display */
@@ -187,49 +209,109 @@ professional_css = """
     display: flex !important;
     flex-direction: column !important;
     min-height: 0 !important;
+    margin: 8px 0 !important;
 }
 
 .result-header {
-    font-size: 12px !important;
+    font-size: 13px !important;
     font-weight: 600 !important;
     color: #1e3c72 !important;
-    margin: 8px 0 4px 0 !important;
-    padding: 4px 8px !important;
+    margin: 8px 0 6px 0 !important;
+    padding: 6px 10px !important;
     background: #e2e8f0 !important;
     border-radius: 4px !important;
+    display: block !important;
+}
+
+/* Gradio specific fixes */
+.gradio-textbox, .gradio-textbox > label, .gradio-textbox > div {
+    min-height: inherit !important;
+}
+
+.gradio-textbox textarea {
+    min-height: 100px !important;
+    resize: vertical !important;
+}
+
+.gradio-radio {
+    margin: 8px 0 !important;
+}
+
+.gradio-radio > div {
+    flex-wrap: wrap !important;
+    gap: 8px !important;
 }
 
 /* Responsive adjustments */
 @media (max-width: 1200px) {
     .dashboard-grid {
         grid-template-columns: 1fr !important;
-        grid-template-rows: 1fr 1fr !important;
+        grid-template-rows: auto auto !important;
+        gap: 15px !important;
+    }
+    
+    .task-panel {
+        min-height: 500px !important;
+    }
+}
+
+@media (max-width: 768px) {
+    .dashboard-header {
+        padding: 6px 15px !important;
+        margin: 6px !important;
+    }
+    
+    .header-title {
+        font-size: 20px !important;
+    }
+    
+    .header-subtitle {
+        font-size: 12px !important;
+    }
+    
+    .task-panel {
+        padding: 12px !important;
+        min-height: 400px !important;
     }
 }
 
 /* Custom scrollbar */
 .compact-output::-webkit-scrollbar {
-    width: 4px !important;
+    width: 6px !important;
 }
 
 .compact-output::-webkit-scrollbar-track {
     background: #f1f1f1 !important;
+    border-radius: 3px !important;
 }
 
 .compact-output::-webkit-scrollbar-thumb {
     background: #1e3c72 !important;
-    border-radius: 2px !important;
+    border-radius: 3px !important;
+}
+
+.compact-output::-webkit-scrollbar-thumb:hover {
+    background: #2a5298 !important;
 }
 
 /* Sample data styling */
 .sample-data {
-    font-size: 10px !important;
+    font-size: 11px !important;
     background: #2d3748 !important;
     color: #e2e8f0 !important;
-    padding: 6px !important;
+    padding: 8px !important;
     border-radius: 4px !important;
     font-family: 'Courier New', monospace !important;
-    margin: 4px 0 !important;
+    margin: 6px 0 !important;
+}
+
+/* Fix for textbox containers */
+.gradio-container .gradio-column {
+    min-width: 0 !important;
+}
+
+.gradio-container .gradio-row {
+    flex-wrap: wrap !important;
 }
 """
 
@@ -394,7 +476,7 @@ with gr.Blocks(title="SOC LLM Dashboard", theme=gr.themes.Soft(), css=profession
         gr.HTML('<div style="width: 20px;"></div>')  # Spacer
     
     # Main Dashboard Grid
-    with gr.Row(equal_height=True):
+    with gr.Row(equal_height=False, elem_classes=["dashboard-grid"]):
         
         # ================== TASK 1: DETECTION PANEL ==================
         with gr.Column(scale=1, elem_classes=["task-panel"]):
@@ -419,7 +501,8 @@ with gr.Blocks(title="SOC LLM Dashboard", theme=gr.themes.Soft(), css=profession
                 placeholder="Paste security logs here...",
                 lines=6,
                 elem_classes=["compact-input", "detection-input"],
-                interactive=True
+                interactive=True,
+                show_label=False
             )
             
             # Detection Results
@@ -428,13 +511,15 @@ with gr.Blocks(title="SOC LLM Dashboard", theme=gr.themes.Soft(), css=profession
                 lines=8,
                 elem_classes=["compact-output"],
                 interactive=False,
-                placeholder="Detection results will appear here..."
+                placeholder="Detection results will appear here...",
+                show_label=False
             )
             
             detection_status = gr.Textbox(
                 label="Status",
                 elem_classes=["status-indicator", "status-success"],
-                interactive=False
+                interactive=False,
+                show_label=False
             )
         
         # ================== TASK 2: ASSISTANT PANEL ==================
@@ -460,7 +545,8 @@ with gr.Blocks(title="SOC LLM Dashboard", theme=gr.themes.Soft(), css=profession
                 placeholder="Describe the security threat or incident...",
                 lines=6,
                 elem_classes=["compact-input"],
-                interactive=True
+                interactive=True,
+                show_label=False
             )
             
             # Analysis Results
@@ -469,18 +555,20 @@ with gr.Blocks(title="SOC LLM Dashboard", theme=gr.themes.Soft(), css=profession
                 lines=8,
                 elem_classes=["compact-output"],
                 interactive=False,
-                placeholder="Analysis results will appear here..."
+                placeholder="Analysis results will appear here...",
+                show_label=False
             )
             
             analysis_status = gr.Textbox(
                 label="Status",
                 elem_classes=["status-indicator", "status-success"],
-                interactive=False
+                interactive=False,
+                show_label=False
             )
     
     # Quick Info Footer
     gr.HTML("""
-    <div style="text-align: center; padding: 8px; color: rgba(255,255,255,0.8); font-size: 11px;">
+    <div style="text-align: center; padding: 12px; color: rgba(255,255,255,0.8); font-size: 11px; margin-top: 10px;">
         <strong>Research Project:</strong> LLM-based SOC Assistant • <strong>Student:</strong> Abdullah Alanazi • <strong>Supervisor:</strong> Prof. Ali Shoker • <strong>Institution:</strong> KAUST
     </div>
     """)