Spaces:

abdull4h
/

soc-llm-assistant

Sleeping

App Files Files Community

abdull4h commited on Aug 10

Commit

a94b356

verified ·

1 Parent(s): 0f16575

Update app.py

Browse files

Files changed (1) hide show

app.py +758 -359

app.py CHANGED Viewed

@@ -11,24 +11,353 @@ import warnings
 # Suppress warnings for cleaner output
 warnings.filterwarnings("ignore")
-# Custom CSS for better styling
-custom_css = """
 .gradio-container {
-    max-width: 1200px !important;
 }
 .gpt-oss-badge {
-    background: linear-gradient(45deg, #00c6ff, #0072ff);
     color: white;
-    padding: 5px 10px;
-    border-radius: 15px;
     font-weight: bold;
 }
-.status-success {
-    background: #d4edda;
-    border: 1px solid #c3e6cb;
-    color: #155724;
-    padding: 10px;
-    border-radius: 5px;
 }
 """
@@ -42,7 +371,6 @@ def initialize_gpt_oss_safe():
     """Initialize GPT-OSS-20B with multiple fallback strategies"""
     global model, tokenizer, model_status
-    # Strategy 1: Try GPT-OSS-20B with specific settings
     strategies = [
         {
             "model_id": "openai/gpt-oss-20b",
@@ -65,16 +393,6 @@ def initialize_gpt_oss_safe():
                 "low_cpu_mem_usage": True
             }
         },
-        {
-            "model_id": "openai/gpt-oss-20b",
-            "name": "GPT-OSS-20B (FP16)",
-            "config": {
-                "torch_dtype": torch.float16,
-                "device_map": "auto",
-                "trust_remote_code": True,
-                "low_cpu_mem_usage": True
-            }
-        },
         {
             "model_id": "microsoft/DialoGPT-large",
             "name": "DialoGPT-Large (Fallback)",
@@ -86,11 +404,6 @@ def initialize_gpt_oss_safe():
     ]
     device = "cuda" if torch.cuda.is_available() else "cpu"
-    print(f"🔧 Device: {device}")
-    if torch.cuda.is_available():
-        print(f"🎮 GPU: {torch.cuda.get_device_name()}")
-        print(f"💾 GPU Memory: {torch.cuda.get_device_properties(0).total_memory / 1e9:.1f}GB")
     for i, strategy in enumerate(strategies):
         try:
@@ -98,107 +411,54 @@ def initialize_gpt_oss_safe():
             config = strategy["config"]
             name = strategy["name"]
-            print(f"\n🔄 Strategy {i+1}: Trying {name}")
-            print(f"📦 Model: {model_id}")
-            # Load tokenizer first
-            print("🔤 Loading tokenizer...")
             tokenizer = AutoTokenizer.from_pretrained(
                 model_id,
                 trust_remote_code=True,
                 use_fast=True
             )
-            # Handle pad token for generation
             if tokenizer.pad_token is None:
                 tokenizer.pad_token = tokenizer.eos_token
-            print("✅ Tokenizer loaded successfully")
-            # Load model with strategy-specific config
-            print("🧠 Loading model...")
             model = AutoModelForCausalLM.from_pretrained(
                 model_id,
                 **config
             )
-            print(f"📍 Model device: {next(model.parameters()).device}")
-            print(f"🔢 Model dtype: {next(model.parameters()).dtype}")
-            # Test generation to ensure everything works
-            print("🧪 Testing generation...")
-            test_messages = [{"role": "user", "content": "Hello, test."}]
-            try:
-                # Use pipeline for simpler testing
-                test_pipe = pipeline(
-                    "text-generation",
-                    model=model,
-                    tokenizer=tokenizer,
-                    torch_dtype=config.get("torch_dtype", "auto"),
-                    device_map="auto" if torch.cuda.is_available() else None
-                )
-                test_result = test_pipe(
-                    test_messages,
-                    max_new_tokens=10,
-                    do_sample=False
-                )
-                print("✅ Generation test successful")
-            except Exception as test_error:
-                print(f"⚠️ Pipeline test failed, trying direct generation: {test_error}")
-                # Fallback to direct generation
-                inputs = tokenizer.apply_chat_template(
-                    test_messages,
-                    add_generation_prompt=True,
-                    return_tensors="pt",
-                    return_dict=True,
-                )
-                if torch.cuda.is_available():
-                    inputs = {k: v.to(model.device) for k, v in inputs.items()}
-                with torch.no_grad():
-                    outputs = model.generate(
-                        **inputs,
-                        max_new_tokens=5,
-                        do_sample=False,
-                        pad_token_id=tokenizer.eos_token_id
-                    )
-                print("✅ Direct generation test successful")
-            # If we get here, the strategy worked
             model_status = f"✅ {name} loaded successfully on {device}"
-            print(f"🎉 Success: {model_status}")
-            return model_status
         except Exception as e:
-            error_msg = str(e)
-            print(f"❌ Strategy {i+1} failed: {error_msg[:100]}...")
-            # Clear any partially loaded components
             model, tokenizer = None, None
-            # Clear GPU memory if available
             if torch.cuda.is_available():
                 torch.cuda.empty_cache()
             continue
-    # If all strategies failed
-    model_status = "❌ All model loading strategies failed. Using text-only fallback."
-    print(model_status)
-    return model_status
-# Enhanced attack scenarios (keeping the same as before)
 ATTACK_SCENARIOS = {
     "🔄 Lateral Movement": {
         "description": "Advanced Persistent Threat (APT) - Attacker moving laterally through network after initial compromise",
         "severity": "Critical",
         "alerts": [
             {
                 "id": "ALR-001",
@@ -247,6 +507,8 @@ ATTACK_SCENARIOS = {
     "📧 Phishing Campaign": {
         "description": "Email-based social engineering attack leading to credential theft and data exfiltration",
         "severity": "High",
         "alerts": [
             {
                 "id": "ALR-004",
@@ -281,6 +543,8 @@ ATTACK_SCENARIOS = {
     "🔒 Ransomware Attack": {
         "description": "File encryption attack with ransom demand - likely REvil/Sodinokibi variant",
         "severity": "Critical",
         "alerts": [
             {
                 "id": "ALR-006",
@@ -314,12 +578,31 @@ ATTACK_SCENARIOS = {
     }
 }
 @spaces.GPU
 def generate_analysis_safe(alert_data, analyst_level):
     """Generate analysis with safe error handling"""
     if not model or not tokenizer:
-        return get_fallback_analysis(alert_data, analyst_level)
     security_prompts = {
         "L1": f"""As a Level 1 SOC analyst, provide immediate triage for this security alert:
@@ -358,163 +641,180 @@ Provide: strategic assessment, attribution analysis, response plan."""
     try:
         prompt = security_prompts.get(analyst_level, security_prompts["L2"])
-        # Try pipeline approach first (safer)
-        try:
-            pipe = pipeline(
-                "text-generation",
-                model=model,
-                tokenizer=tokenizer,
-                torch_dtype="auto",
-                device_map="auto" if torch.cuda.is_available() else None
-            )
-            messages = [{"role": "user", "content": prompt}]
-            result = pipe(
-                messages,
-                max_new_tokens=400,
-                do_sample=True,
-                temperature=0.3,
-                top_p=0.9,
-                repetition_penalty=1.1,
-                pad_token_id=tokenizer.eos_token_id
-            )
-            analysis = result[0]["generated_text"][-1]["content"]
-        except Exception as pipe_error:
-            print(f"Pipeline failed, trying direct generation: {pipe_error}")
-            # Fallback to direct generation
-            messages = [{"role": "user", "content": prompt}]
-            inputs = tokenizer.apply_chat_template(
-                messages,
-                add_generation_prompt=True,
-                return_tensors="pt",
-                return_dict=True,
-            )
-            if torch.cuda.is_available():
-                inputs = {k: v.to(model.device) for k, v in inputs.items()}
-            with torch.no_grad():
-                outputs = model.generate(
-                    **inputs,
-                    max_new_tokens=400,
-                    do_sample=True,
-                    temperature=0.3,
-                    top_p=0.9,
-                    repetition_penalty=1.1,
-                    pad_token_id=tokenizer.eos_token_id,
-                    eos_token_id=tokenizer.eos_token_id
-                )
-            input_length = inputs["input_ids"].shape[-1]
-            generated_tokens = outputs[0][input_length:]
-            analysis = tokenizer.decode(generated_tokens, skip_special_tokens=True)
-        # Quality check
-        if len(analysis.strip()) < 50:
-            return get_fallback_analysis(alert_data, analyst_level)
-        # Determine model name for display
-        if "gpt-oss" in model_status.lower():
-            badge = "🤖 OpenAI GPT-OSS-20B Analysis"
-        else:
-            badge = "🤖 AI-Powered Analysis"
-        return f"""{badge}
-━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-{analysis.strip()}
-━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-*Generated using advanced AI reasoning capabilities*"""
     except Exception as e:
         print(f"Generation error: {e}")
-        return f"⚠️ AI Error: {str(e)[:100]}\n\n{get_fallback_analysis(alert_data, analyst_level)}"
-def get_fallback_analysis(alert_data, analyst_level):
-    """High-quality fallback analysis"""
     templates = {
-        "L1": f"""🚨 **L1 SOC TRIAGE ANALYSIS**
-━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-**🎯 THREAT ASSESSMENT:**
-Alert: {alert_data['alert_type']} | Severity: {alert_data['severity']}
-Confidence: {alert_data['confidence']}% | Source: {alert_data['source_ip']}
-**⚡ IMMEDIATE ACTIONS:**
-1. Isolate affected system: {alert_data['source_ip']}
-2. Disable user account: {alert_data['user']}
-3. Block connections to: {alert_data['destination_ip']}
-4. Preserve evidence and logs
-**⬆️ ESCALATION DECISION:**
-Severity: {alert_data['severity']} → ESCALATE TO L2
-Technique: {alert_data['mitre_tactic']} requires deeper analysis
-**📝 INITIAL NOTES:**
-{alert_data['threat_intel']}""",
-        "L2": f"""🔍 **L2 INVESTIGATION ANALYSIS**
-━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-**🎯 ATTACK VECTOR:**
-Technique: {alert_data['mitre_tactic']}
-Evidence: {alert_data['raw_log']}
-Context: {alert_data['description']}
-**🔬 INVESTIGATION ROADMAP:**
-1. Timeline correlation: ±30min window analysis
-2. User behavior baseline: {alert_data['user']} comparison
-3. Network flow analysis: {alert_data['source_ip']} → {alert_data['destination_ip']}
-4. Process tree examination and artifact collection
-5. Similar IOC hunting across environment
-**📊 THREAT ASSESSMENT:**
-Confidence Level: {alert_data['confidence']}%
-Business Impact: {alert_data['severity']}
-Attribution Context: {alert_data['threat_intel']}
-**🎯 NEXT STEPS:**
-Deploy hunting queries for similar TTPs
-Review authentication logs for compromise indicators
-Consider L3 escalation if campaign evidence found""",
-        "L3": f"""🎯 **L3 EXPERT STRATEGIC ANALYSIS**
-━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-**🎭 ADVERSARY ASSESSMENT:**
-Sophistication: Advanced (based on {alert_data['mitre_tactic']})
-Campaign Context: {alert_data['threat_intel']}
-Success Probability: {alert_data['confidence']}%
-**💼 BUSINESS IMPACT:**
-Severity Level: {alert_data['severity']}
-Executive Notification: Required for Critical/High
-Regulatory Implications: Under compliance review
-**🛡️ STRATEGIC RESPONSE:**
-Immediate: Threat hunting deployment across infrastructure
-Short-term: Enhanced monitoring and detection rule updates
-Medium-term: Security architecture review and gap analysis
-Long-term: Threat intelligence integration and training
-**📈 EXECUTIVE BRIEFING POINTS:**
-• Sophisticated attack requiring coordinated incident response
-• High potential for lateral movement and data exfiltration
-• Recommend immediate incident response team activation
-• Consider external forensics engagement for complex analysis"""
     }
     return templates.get(analyst_level, templates["L2"])
-def analyze_alert_with_ai(scenario_name, alert_index, analyst_level):
-    """Main analysis function with error handling"""
     start_time = time.time()
     if scenario_name not in ATTACK_SCENARIOS:
@@ -531,181 +831,280 @@ def analyze_alert_with_ai(scenario_name, alert_index, analyst_level):
     # Generate analysis
     analysis = generate_analysis_safe(selected_alert, analyst_level)
-    # Format alert details
-    alert_details = f"""🎫 **ALERT {selected_alert['id']}** | 🕐 {selected_alert['timestamp']}
-━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-🌐 **NETWORK FLOW:**
-   Source: {selected_alert['source_ip']} → Destination: {selected_alert['destination_ip']}
-👤 **USER CONTEXT:**
-   Account: {selected_alert['user']}
-⚠️ **CLASSIFICATION:**
-   Type: {selected_alert['alert_type']}
-   Severity: {selected_alert['severity']}
-   Confidence: {selected_alert['confidence']}%
-📝 **DESCRIPTION:**
-   {selected_alert['description']}
-🔍 **TECHNICAL EVIDENCE:**
-   {selected_alert['raw_log']}
-🧠 **THREAT INTELLIGENCE:**
-   {selected_alert['threat_intel']}
-🎪 **MITRE ATT&CK:**
-   {selected_alert['mitre_tactic']}
-━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"""
     processing_time = round(time.time() - start_time, 2)
     device_info = "GPU" if torch.cuda.is_available() else "CPU"
-    status = f"✅ {analyst_level} analysis completed in {processing_time}s | Device: {device_info} | {model_status}"
     return alert_details, analysis, status
-def get_scenario_info(scenario_name):
-    """Get scenario information"""
     if scenario_name in ATTACK_SCENARIOS:
         scenario = ATTACK_SCENARIOS[scenario_name]
-        info = f"""## 🎭 **Attack Scenario: {scenario_name}**
-**📋 Description:** {scenario['description']}
-**⚠️ Severity:** {scenario['severity']}
-**📊 Total Alerts:** {len(scenario['alerts'])} security events
-### 🔍 **Alert Timeline:**
-"""
         for i, alert in enumerate(scenario['alerts']):
-            info += f"""**[{i+1}] {alert['timestamp']}** - {alert['alert_type']}
-   └─ Severity: {alert['severity']} | Confidence: {alert['confidence']}%
-"""
         info += """
-### 🤖 **AI Analysis Features:**
-- **Multi-Strategy Loading:** Automatic fallback to compatible models
-- **Advanced Reasoning:** Chain-of-thought analysis for complex threats
-- **Error Recovery:** Robust handling of model loading issues
-- **Quality Assurance:** Automatic fallback to expert templates"""
         return info
-    return "⚠️ No scenario selected."
-# Create Gradio interface
-with gr.Blocks(title="SOC Assistant - Fixed GPT-OSS", theme=gr.themes.Soft(), css=custom_css) as demo:
-    gr.Markdown("""
-    # 🛡️ SOC LLM Assistant - Fixed GPT-OSS Edition
-    **Multi-Strategy Model Loading with Robust Error Handling**
-    *Automatically tries GPT-OSS-20B first, then falls back to compatible models*
     """)
     # Model status display
-    status_display = gr.Markdown("🔄 Initializing AI models with multiple strategies...")
     with gr.Row():
-        # Left Panel
-        with gr.Column(scale=1, min_width=300):
-            gr.Markdown("## 🎮 Attack Simulation")
             scenario_dropdown = gr.Dropdown(
                 choices=list(ATTACK_SCENARIOS.keys()),
                 label="🎭 Select Attack Scenario",
                 value="🔄 Lateral Movement",
-                interactive=True
             )
-            scenario_info = gr.Markdown()
-            gr.Markdown("---")
-            gr.Markdown("## ⚙️ Analysis Configuration")
             alert_slider = gr.Slider(
                 minimum=0,
                 maximum=2,
                 step=1,
                 value=0,
-                label="📋 Alert Selection"
             )
             analyst_level = gr.Radio(
                 choices=["L1", "L2", "L3"],
-                label="👤 Analyst Level",
                 value="L2",
-                info="L1: Triage | L2: Investigation | L3: Expert"
             )
             analyze_btn = gr.Button(
-                "🚀 Analyze with AI",
                 variant="primary",
-                size="lg"
             )
             init_btn = gr.Button(
-                "🔄 Retry Model Loading",
-                variant="secondary"
             )
-            gr.Markdown("---")
-            gr.Markdown("## 🔧 Loading Strategies")
-            gr.Markdown("""
-            **🎯 Automatic Fallback:**
-            1. GPT-OSS-20B (Original MXFP4)
-            2. GPT-OSS-20B (BF16)
-            3. GPT-OSS-20B (FP16)
-            4. DialoGPT-Large (Backup)
-            **✅ Robust Error Handling**
             """)
-        # Right Panel
         with gr.Column(scale=2):
-            gr.Markdown("## 📋 Security Alert Details")
-            alert_output = gr.Textbox(
-                label="🎫 Alert Information",
-                lines=15,
-                interactive=False
             )
-            gr.Markdown("## 🤖 AI-Powered Analysis")
-            analysis_output = gr.Textbox(
-                label="🧠 Security Analysis",
-                lines=25,
-                interactive=False
             )
-            status_output = gr.Textbox(
-                label="📊 Processing Status",
-                lines=1,
-                interactive=False
-            )
-    gr.Markdown("""
-    ---
-    ## 🔧 **Troubleshooting Guide**
-    **If you see "ModelWrapper" error:**
-    - ✅ **Fixed:** This version uses multiple loading strategies
-    - 🔄 **Automatic:** Falls back to compatible models
-    - 🛠️ **Manual:** Use "Retry Model Loading" button
-    **Loading Strategy Order:**
-    1. **GPT-OSS-20B** - Latest OpenAI open-weight model
-    2. **Fallback Models** - Tested compatible alternatives
-    3. **Expert Templates** - High-quality manual analysis
-    ---
-    **👨‍🎓 Research:** Abdullah Alanazi | **🏛️ KAUST** | **👨‍🏫 Prof. Ali Shoker**
     """)
     # Event handlers
     scenario_dropdown.change(
-        fn=get_scenario_info,
         inputs=[scenario_dropdown],
         outputs=[scenario_info]
     )
@@ -723,7 +1122,7 @@ with gr.Blocks(title="SOC Assistant - Fixed GPT-OSS", theme=gr.themes.Soft(), cs
     )
     analyze_btn.click(
-        fn=analyze_alert_with_ai,
         inputs=[scenario_dropdown, alert_slider, analyst_level],
         outputs=[alert_output, analysis_output, status_output]
     )
@@ -735,7 +1134,7 @@ with gr.Blocks(title="SOC Assistant - Fixed GPT-OSS", theme=gr.themes.Soft(), cs
     # Initialize on startup
     demo.load(
-        fn=get_scenario_info,
         inputs=[scenario_dropdown],
         outputs=[scenario_info]
     )

 # Suppress warnings for cleaner output
 warnings.filterwarnings("ignore")
+# Enhanced CSS for beautiful design
+beautiful_css = """
+/* Import Google Fonts */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+/* Global Styles */
 .gradio-container {
+    max-width: 1400px !important;
+    margin: 0 auto !important;
+    font-family: 'Inter', sans-serif !important;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    min-height: 100vh;
+}
+/* Header Styling */
+.header-container {
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(10px);
+    border-radius: 20px;
+    padding: 2rem;
+    margin: 1rem;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+}
+/* Main Content Cards */
+.content-card {
+    background: rgba(255, 255, 255, 0.98);
+    backdrop-filter: blur(15px);
+    border-radius: 16px;
+    padding: 1.5rem;
+    margin: 0.5rem;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    transition: all 0.3s ease;
+}
+.content-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
+}
+/* Status Indicators */
+.status-success {
+    background: linear-gradient(135deg, #4CAF50, #45a049);
+    color: white;
+    padding: 12px 20px;
+    border-radius: 12px;
+    font-weight: 500;
+    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
+    border: none;
 }
+.status-warning {
+    background: linear-gradient(135deg, #FF9800, #F57C00);
+    color: white;
+    padding: 12px 20px;
+    border-radius: 12px;
+    font-weight: 500;
+    box-shadow: 0 4px 15px rgba(255, 152, 0, 0.3);
+}
+.status-error {
+    background: linear-gradient(135deg, #f44336, #d32f2f);
+    color: white;
+    padding: 12px 20px;
+    border-radius: 12px;
+    font-weight: 500;
+    box-shadow: 0 4px 15px rgba(244, 67, 54, 0.3);
+}
+/* GPT-OSS Badge */
 .gpt-oss-badge {
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    color: white;
+    padding: 8px 16px;
+    border-radius: 20px;
+    font-weight: 600;
+    font-size: 0.9rem;
+    display: inline-block;
+    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
+    margin: 0.5rem 0;
+}
+/* Alert Severity Badges */
+.severity-critical {
+    background: linear-gradient(135deg, #dc3545, #c82333);
+    color: white;
+    padding: 4px 12px;
+    border-radius: 20px;
+    font-weight: 600;
+    font-size: 0.8rem;
+    display: inline-block;
+    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
+}
+.severity-high {
+    background: linear-gradient(135deg, #fd7e14, #e8680a);
+    color: white;
+    padding: 4px 12px;
+    border-radius: 20px;
+    font-weight: 600;
+    font-size: 0.8rem;
+    display: inline-block;
+    box-shadow: 0 2px 8px rgba(253, 126, 20, 0.3);
+}
+.severity-medium {
+    background: linear-gradient(135deg, #ffc107, #e0a800);
+    color: #212529;
+    padding: 4px 12px;
+    border-radius: 20px;
+    font-weight: 600;
+    font-size: 0.8rem;
+    display: inline-block;
+    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3);
+}
+/* Button Styling */
+.primary-button {
+    background: linear-gradient(135deg, #667eea, #764ba2) !important;
+    border: none !important;
+    border-radius: 12px !important;
+    padding: 12px 24px !important;
+    font-weight: 600 !important;
+    font-size: 1rem !important;
+    transition: all 0.3s ease !important;
+    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4) !important;
+}
+.primary-button:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5) !important;
+}
+.secondary-button {
+    background: linear-gradient(135deg, #6c757d, #5a6268) !important;
+    border: none !important;
+    border-radius: 12px !important;
+    padding: 10px 20px !important;
+    font-weight: 500 !important;
+    color: white !important;
+    transition: all 0.3s ease !important;
+}
+/* Input Styling */
+.custom-input {
+    border-radius: 12px !important;
+    border: 2px solid #e9ecef !important;
+    padding: 12px !important;
+    transition: all 0.3s ease !important;
+    background: rgba(255, 255, 255, 0.9) !important;
+}
+.custom-input:focus {
+    border-color: #667eea !important;
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
+}
+/* Section Headers */
+.section-header {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: #2d3436;
+    margin-bottom: 1rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 3px solid #667eea;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+/* Alert Timeline */
+.timeline-item {
+    background: rgba(102, 126, 234, 0.05);
+    border-left: 4px solid #667eea;
+    padding: 1rem;
+    margin: 0.5rem 0;
+    border-radius: 0 8px 8px 0;
+    transition: all 0.3s ease;
+}
+.timeline-item:hover {
+    background: rgba(102, 126, 234, 0.1);
+    transform: translateX(4px);
+}
+/* Analysis Output Styling */
+.analysis-container {
+    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
+    border-radius: 16px;
+    padding: 1.5rem;
+    border: 1px solid #dee2e6;
+    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.05);
+}
+/* Confidence Meter */
+.confidence-meter {
+    height: 8px;
+    background: #e9ecef;
+    border-radius: 10px;
+    overflow: hidden;
+    margin: 0.5rem 0;
+}
+.confidence-fill {
+    height: 100%;
+    background: linear-gradient(90deg, #28a745, #20c997, #17a2b8);
+    border-radius: 10px;
+    transition: width 0.5s ease;
+}
+/* Responsive Design */
+@media (max-width: 768px) {
+    .gradio-container {
+        padding: 0.5rem;
+    }
+    .content-card {
+        margin: 0.25rem;
+        padding: 1rem;
+    }
+    .section-header {
+        font-size: 1.25rem;
+    }
+}
+/* Loading Animation */
+.loading-spinner {
+    border: 3px solid #f3f3f3;
+    border-top: 3px solid #667eea;
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    animation: spin 1s linear infinite;
+    display: inline-block;
+    margin-right: 0.5rem;
+}
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+/* Alert Cards */
+.alert-card {
+    background: white;
+    border-radius: 12px;
+    padding: 1.5rem;
+    margin: 0.5rem 0;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    border-left: 5px solid #667eea;
+    transition: all 0.3s ease;
+}
+.alert-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
+}
+/* Network Flow Visualization */
+.network-flow {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem;
+    background: rgba(102, 126, 234, 0.05);
+    border-radius: 12px;
+    margin: 0.5rem 0;
+}
+.network-node {
+    background: #667eea;
     color: white;
+    padding: 0.5rem 1rem;
+    border-radius: 8px;
+    font-weight: 500;
+    font-size: 0.9rem;
+}
+.network-arrow {
+    color: #667eea;
+    font-size: 1.5rem;
     font-weight: bold;
 }
+/* MITRE ATT&CK Styling */
+.mitre-tag {
+    background: linear-gradient(135deg, #e74c3c, #c0392b);
+    color: white;
+    padding: 6px 12px;
+    border-radius: 20px;
+    font-size: 0.85rem;
+    font-weight: 600;
+    display: inline-block;
+    box-shadow: 0 3px 10px rgba(231, 76, 60, 0.3);
+}
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+}
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 10px;
+}
+::-webkit-scrollbar-thumb {
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    border-radius: 10px;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(135deg, #5a6fd8, #6a4c93);
+}
+/* Statistics Cards */
+.stat-card {
+    background: white;
+    border-radius: 12px;
+    padding: 1.5rem;
+    text-align: center;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    transition: all 0.3s ease;
+    border-top: 4px solid #667eea;
+}
+.stat-card:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
+}
+.stat-number {
+    font-size: 2rem;
+    font-weight: 700;
+    color: #667eea;
+    margin-bottom: 0.5rem;
+}
+.stat-label {
+    color: #6c757d;
+    font-weight: 500;
+    text-transform: uppercase;
+    font-size: 0.85rem;
+    letter-spacing: 0.5px;
 }
 """
     """Initialize GPT-OSS-20B with multiple fallback strategies"""
     global model, tokenizer, model_status
     strategies = [
         {
             "model_id": "openai/gpt-oss-20b",
                 "low_cpu_mem_usage": True
             }
         },
         {
             "model_id": "microsoft/DialoGPT-large",
             "name": "DialoGPT-Large (Fallback)",
     ]
     device = "cuda" if torch.cuda.is_available() else "cpu"
     for i, strategy in enumerate(strategies):
         try:
             config = strategy["config"]
             name = strategy["name"]
+            print(f"🔄 Trying {name}...")
             tokenizer = AutoTokenizer.from_pretrained(
                 model_id,
                 trust_remote_code=True,
                 use_fast=True
             )
             if tokenizer.pad_token is None:
                 tokenizer.pad_token = tokenizer.eos_token
             model = AutoModelForCausalLM.from_pretrained(
                 model_id,
                 **config
             )
+            # Test generation
+            test_messages = [{"role": "user", "content": "Test"}]
+            test_pipe = pipeline(
+                "text-generation",
+                model=model,
+                tokenizer=tokenizer,
+                torch_dtype=config.get("torch_dtype", "auto"),
+                device_map="auto" if torch.cuda.is_available() else None
+            )
+            test_pipe(test_messages, max_new_tokens=5, do_sample=False)
             model_status = f"✅ {name} loaded successfully on {device}"
+            return f'<div class="status-success">🎉 {model_status}</div>'
         except Exception as e:
+            print(f"❌ Strategy {i+1} failed: {str(e)[:100]}")
             model, tokenizer = None, None
             if torch.cuda.is_available():
                 torch.cuda.empty_cache()
             continue
+    model_status = "⚠️ Using fallback analysis mode"
+    return f'<div class="status-warning">{model_status}</div>'
+# Enhanced attack scenarios
 ATTACK_SCENARIOS = {
     "🔄 Lateral Movement": {
         "description": "Advanced Persistent Threat (APT) - Attacker moving laterally through network after initial compromise",
         "severity": "Critical",
+        "icon": "🔄",
+        "color": "#dc3545",
         "alerts": [
             {
                 "id": "ALR-001",
     "📧 Phishing Campaign": {
         "description": "Email-based social engineering attack leading to credential theft and data exfiltration",
         "severity": "High",
+        "icon": "📧",
+        "color": "#fd7e14",
         "alerts": [
             {
                 "id": "ALR-004",
     "🔒 Ransomware Attack": {
         "description": "File encryption attack with ransom demand - likely REvil/Sodinokibi variant",
         "severity": "Critical",
+        "icon": "🔒",
+        "color": "#dc3545",
         "alerts": [
             {
                 "id": "ALR-006",
     }
 }
+def get_severity_class(severity):
+    """Get CSS class for severity level"""
+    classes = {
+        "Critical": "severity-critical",
+        "High": "severity-high",
+        "Medium": "severity-medium",
+        "Low": "severity-low"
+    }
+    return classes.get(severity, "severity-medium")
+def create_confidence_meter(confidence):
+    """Create a visual confidence meter"""
+    return f"""
+    <div class="confidence-meter">
+        <div class="confidence-fill" style="width: {confidence}%"></div>
+    </div>
+    <small style="color: #6c757d;">{confidence}% Confidence</small>
+    """
 @spaces.GPU
 def generate_analysis_safe(alert_data, analyst_level):
     """Generate analysis with safe error handling"""
     if not model or not tokenizer:
+        return get_beautiful_fallback(alert_data, analyst_level)
     security_prompts = {
         "L1": f"""As a Level 1 SOC analyst, provide immediate triage for this security alert:
     try:
         prompt = security_prompts.get(analyst_level, security_prompts["L2"])
+        pipe = pipeline(
+            "text-generation",
+            model=model,
+            tokenizer=tokenizer,
+            torch_dtype="auto",
+            device_map="auto" if torch.cuda.is_available() else None
+        )
+        messages = [{"role": "user", "content": prompt}]
+        result = pipe(
+            messages,
+            max_new_tokens=400,
+            do_sample=True,
+            temperature=0.3,
+            top_p=0.9,
+            repetition_penalty=1.1,
+            pad_token_id=tokenizer.eos_token_id
+        )
+        analysis = result[0]["generated_text"][-1]["content"]
+        if len(analysis.strip()) < 50:
+            return get_beautiful_fallback(alert_data, analyst_level)
+        return f"""
+        <div class="analysis-container">
+            <div class="gpt-oss-badge">
+                🤖 OpenAI GPT-OSS-20B Analysis
+            </div>
+            <div style="margin-top: 1rem; line-height: 1.6;">
+                {analysis.strip()}
+            </div>
+            <div style="margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #dee2e6; color: #6c757d; font-size: 0.9rem;">
+                ⚡ Generated using GPT-OSS-20B • 21B parameters • 3.6B active per token
+            </div>
+        </div>
+        """
     except Exception as e:
         print(f"Generation error: {e}")
+        return get_beautiful_fallback(alert_data, analyst_level)
+def get_beautiful_fallback(alert_data, analyst_level):
+    """Beautiful fallback analysis with enhanced styling"""
+    severity_class = get_severity_class(alert_data['severity'])
+    confidence_meter = create_confidence_meter(alert_data['confidence'])
     templates = {
+        "L1": f"""
+        <div class="alert-card">
+            <div class="section-header">
+                🚨 L1 SOC Triage Analysis
+            </div>
+            <div style="margin: 1rem 0;">
+                <span class="{severity_class}">{alert_data['severity']} Severity</span>
+                <span class="mitre-tag" style="margin-left: 0.5rem;">{alert_data['mitre_tactic']}</span>
+            </div>
+            <div class="network-flow">
+                <div class="network-node">{alert_data['source_ip']}</div>
+                <div class="network-arrow">→</div>
+                <div class="network-node">{alert_data['destination_ip']}</div>
+            </div>
+            <h4 style="color: #2d3436; margin: 1.5rem 0 1rem 0;">⚡ Immediate Actions Required</h4>
+            <div style="background: #fff3cd; padding: 1rem; border-radius: 8px; border-left: 4px solid #ffc107;">
+                <strong>🔒 Containment:</strong> Isolate system {alert_data['source_ip']}<br>
+                <strong>👤 User Action:</strong> Disable account {alert_data['user']}<br>
+                <strong>🌐 Network:</strong> Block connections to {alert_data['destination_ip']}<br>
+                <strong>📝 Documentation:</strong> Preserve logs and evidence
+            </div>
+            <h4 style="color: #2d3436; margin: 1.5rem 0 1rem 0;">📊 Threat Assessment</h4>
+            {confidence_meter}
+            <div style="background: #f8d7da; padding: 1rem; border-radius: 8px; border-left: 4px solid #dc3545; margin-top: 1rem;">
+                <strong>⬆️ Escalation Required:</strong> {alert_data['severity']} severity warrants L2 investigation
+            </div>
+        </div>
+        """,
+        "L2": f"""
+        <div class="alert-card">
+            <div class="section-header">
+                🔍 L2 Investigation Analysis
+            </div>
+            <div style="margin: 1rem 0;">
+                <span class="{severity_class}">{alert_data['severity']} Severity</span>
+                <span class="mitre-tag" style="margin-left: 0.5rem;">{alert_data['mitre_tactic']}</span>
+            </div>
+            <h4 style="color: #2d3436; margin: 1.5rem 0 1rem 0;">🎯 Attack Vector Analysis</h4>
+            <div style="background: #e2e3e5; padding: 1rem; border-radius: 8px;">
+                <strong>Technique:</strong> {alert_data['mitre_tactic']}<br>
+                <strong>Evidence:</strong> {alert_data['raw_log']}<br>
+                <strong>Context:</strong> {alert_data['description']}
+            </div>
+            <h4 style="color: #2d3436; margin: 1.5rem 0 1rem 0;">🔬 Investigation Roadmap</h4>
+            <div class="timeline-item">
+                <strong>1.</strong> Timeline correlation: ±30min window analysis
+            </div>
+            <div class="timeline-item">
+                <strong>2.</strong> User behavior baseline: {alert_data['user']} comparison
+            </div>
+            <div class="timeline-item">
+                <strong>3.</strong> Network flow analysis: {alert_data['source_ip']} → {alert_data['destination_ip']}
+            </div>
+            <div class="timeline-item">
+                <strong>4.</strong> Process tree examination and artifact collection
+            </div>
+            <div class="timeline-item">
+                <strong>5.</strong> Similar IOC hunting across environment
+            </div>
+            <h4 style="color: #2d3436; margin: 1.5rem 0 1rem 0;">📊 Threat Intelligence</h4>
+            {confidence_meter}
+            <div style="background: #d1ecf1; padding: 1rem; border-radius: 8px; border-left: 4px solid #17a2b8; margin-top: 1rem;">
+                <strong>Attribution Context:</strong> {alert_data['threat_intel']}
+            </div>
+        </div>
+        """,
+        "L3": f"""
+        <div class="alert-card">
+            <div class="section-header">
+                🎯 L3 Expert Strategic Analysis
+            </div>
+            <div style="margin: 1rem 0;">
+                <span class="{severity_class}">{alert_data['severity']} Severity</span>
+                <span class="mitre-tag" style="margin-left: 0.5rem;">{alert_data['mitre_tactic']}</span>
+            </div>
+            <h4 style="color: #2d3436; margin: 1.5rem 0 1rem 0;">🎭 Adversary Assessment</h4>
+            <div style="background: #f8d7da; padding: 1rem; border-radius: 8px;">
+                <strong>Sophistication:</strong> Advanced (based on {alert_data['mitre_tactic']})<br>
+                <strong>Campaign Context:</strong> {alert_data['threat_intel']}<br>
+                <strong>Success Probability:</strong> {alert_data['confidence']}%
+            </div>
+            <h4 style="color: #2d3436; margin: 1.5rem 0 1rem 0;">💼 Business Impact</h4>
+            {confidence_meter}
+            <div style="background: #fff3cd; padding: 1rem; border-radius: 8px; margin-top: 1rem;">
+                <strong>🔴 Executive Notification:</strong> Required for {alert_data['severity']} severity<br>
+                <strong>📋 Regulatory Impact:</strong> Under compliance review<br>
+                <strong>⏰ Response Timeline:</strong> Immediate action required
+            </div>
+            <h4 style="color: #2d3436; margin: 1.5rem 0 1rem 0;">🛡️ Strategic Response Plan</h4>
+            <div class="timeline-item" style="background: #d4edda;">
+                <strong>Immediate:</strong> Threat hunting deployment across infrastructure
+            </div>
+            <div class="timeline-item" style="background: #cce5ff;">
+                <strong>Short-term:</strong> Enhanced monitoring and detection rules
+            </div>
+            <div class="timeline-item" style="background: #e2e3e5;">
+                <strong>Medium-term:</strong> Security architecture review
+            </div>
+            <div class="timeline-item" style="background: #f8d7da;">
+                <strong>Long-term:</strong> Threat intelligence integration
+            </div>
+        </div>
+        """
     }
     return templates.get(analyst_level, templates["L2"])
+def analyze_alert_beautiful(scenario_name, alert_index, analyst_level):
+    """Enhanced analysis function with beautiful output"""
     start_time = time.time()
     if scenario_name not in ATTACK_SCENARIOS:
     # Generate analysis
     analysis = generate_analysis_safe(selected_alert, analyst_level)
+    # Create beautiful alert details
+    severity_class = get_severity_class(selected_alert['severity'])
+    confidence_meter = create_confidence_meter(selected_alert['confidence'])
+    alert_details = f"""
+    <div class="alert-card">
+        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;">
+            <h3 style="margin: 0; color: #2d3436;">🎫 ALERT {selected_alert['id']}</h3>
+            <small style="color: #6c757d;">🕐 {selected_alert['timestamp']}</small>
+        </div>
+        <div class="network-flow" style="margin: 1rem 0;">
+            <div class="network-node">{selected_alert['source_ip']}</div>
+            <div class="network-arrow">→</div>
+            <div class="network-node">{selected_alert['destination_ip']}</div>
+        </div>
+        <div style="margin: 1rem 0;">
+            <strong>👤 User Account:</strong> {selected_alert['user']}<br>
+            <strong>🎯 Alert Type:</strong> {selected_alert['alert_type']}<br>
+        </div>
+        <div style="margin: 1.5rem 0;">
+            <span class="{severity_class}">{selected_alert['severity']}</span>
+            <span class="mitre-tag" style="margin-left: 0.5rem;">{selected_alert['mitre_tactic']}</span>
+        </div>
+        <h4 style="color: #2d3436; margin: 1.5rem 0 1rem 0;">📝 Description</h4>
+        <div style="background: #f8f9fa; padding: 1rem; border-radius: 8px; border-left: 4px solid #6c757d;">
+            {selected_alert['description']}
+        </div>
+        <h4 style="color: #2d3436; margin: 1.5rem 0 1rem 0;">🔍 Technical Evidence</h4>
+        <div style="background: #2d3436; color: #ffffff; padding: 1rem; border-radius: 8px; font-family: 'Courier New', monospace; font-size: 0.9rem; overflow-x: auto;">
+            {selected_alert['raw_log']}
+        </div>
+        <h4 style="color: #2d3436; margin: 1.5rem 0 1rem 0;">🧠 Threat Intelligence</h4>
+        <div style="background: #d1ecf1; padding: 1rem; border-radius: 8px; border-left: 4px solid #17a2b8;">
+            {selected_alert['threat_intel']}
+        </div>
+        <h4 style="color: #2d3436; margin: 1.5rem 0 1rem 0;">📊 Confidence Assessment</h4>
+        {confidence_meter}
+    </div>
+    """
     processing_time = round(time.time() - start_time, 2)
     device_info = "GPU" if torch.cuda.is_available() else "CPU"
+    status = f"""
+    <div class="status-success">
+        ✅ {analyst_level} analysis completed in {processing_time}s | Device: {device_info} | {model_status}
+    </div>
+    """
     return alert_details, analysis, status
+def get_beautiful_scenario_info(scenario_name):
+    """Create beautiful scenario information display"""
     if scenario_name in ATTACK_SCENARIOS:
         scenario = ATTACK_SCENARIOS[scenario_name]
+        info = f"""
+        <div class="content-card">
+            <div class="section-header">
+                {scenario['icon']} Attack Scenario: {scenario_name}
+            </div>
+            <div style="margin: 1.5rem 0;">
+                <div class="stat-card" style="display: inline-block; margin-right: 1rem; min-width: 150px;">
+                    <div class="stat-number">{len(scenario['alerts'])}</div>
+                    <div class="stat-label">Security Events</div>
+                </div>
+                <span class="{get_severity_class(scenario['severity'])}" style="vertical-align: top;">
+                    {scenario['severity']} Severity
+                </span>
+            </div>
+            <h4 style="color: #2d3436; margin: 1.5rem 0 1rem 0;">📋 Scenario Description</h4>
+            <div style="background: #f8f9fa; padding: 1.5rem; border-radius: 12px; border-left: 5px solid {scenario.get('color', '#667eea')};">
+                {scenario['description']}
+            </div>
+            <h4 style="color: #2d3436; margin: 1.5rem 0 1rem 0;">🔍 Alert Timeline</h4>
+        """
         for i, alert in enumerate(scenario['alerts']):
+            severity_class = get_severity_class(alert['severity'])
+            info += f"""
+            <div class="timeline-item" style="margin: 0.5rem 0;">
+                <div style="display: flex; justify-content: space-between; align-items: center;">
+                    <div>
+                        <strong>[{i+1}] {alert['timestamp']}</strong> - {alert['alert_type']}
+                    </div>
+                    <div>
+                        <span class="{severity_class}" style="font-size: 0.7rem; padding: 2px 8px;">
+                            {alert['severity']}
+                        </span>
+                        <span style="margin-left: 0.5rem; color: #6c757d; font-size: 0.8rem;">
+                            {alert['confidence']}% confidence
+                        </span>
+                    </div>
+                </div>
+            </div>
+            """
         info += """
+            <h4 style="color: #2d3436; margin: 1.5rem 0 1rem 0;">🤖 AI Analysis Capabilities</h4>
+            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-top: 1rem;">
+                <div class="stat-card">
+                    <div style="font-size: 1.5rem; margin-bottom: 0.5rem;">🧠</div>
+                    <div class="stat-label">GPT-OSS-20B Reasoning</div>
+                </div>
+                <div class="stat-card">
+                    <div style="font-size: 1.5rem; margin-bottom: 0.5rem;">⚡</div>
+                    <div class="stat-label">Multi-Strategy Loading</div>
+                </div>
+                <div class="stat-card">
+                    <div style="font-size: 1.5rem; margin-bottom: 0.5rem;">🛡️</div>
+                    <div class="stat-label">Robust Error Handling</div>
+                </div>
+                <div class="stat-card">
+                    <div style="font-size: 1.5rem; margin-bottom: 0.5rem;">🎯</div>
+                    <div class="stat-label">Expert Templates</div>
+                </div>
+            </div>
+        </div>
+        """
         return info
+    return '<div class="status-warning">⚠️ No scenario selected. Please choose an attack scenario to begin analysis.</div>'
+# Create beautiful Gradio interface
+with gr.Blocks(title="SOC Assistant - Beautiful Edition", theme=gr.themes.Soft(), css=beautiful_css) as demo:
+    # Header
+    gr.HTML("""
+    <div class="header-container">
+        <div style="text-align: center;">
+            <h1 style="margin: 0; font-size: 2.5rem; background: linear-gradient(135deg, #667eea, #764ba2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 700;">
+                🛡️ SOC LLM Assistant
+            </h1>
+            <p style="margin: 0.5rem 0 0 0; font-size: 1.2rem; color: #6c757d; font-weight: 400;">
+                Beautiful Edition • Powered by GPT-OSS-20B
+            </p>
+            <div class="gpt-oss-badge" style="margin-top: 1rem;">
+                🚀 Multi-Strategy AI Model Loading • Enhanced UI/UX
+            </div>
+        </div>
+    </div>
     """)
     # Model status display
+    status_display = gr.HTML('<div class="status-warning">🔄 Initializing AI models...</div>')
     with gr.Row():
+        # Left Panel - Controls
+        with gr.Column(scale=1, min_width=350):
+            gr.HTML('<div class="section-header">🎮 Attack Simulation Control</div>')
             scenario_dropdown = gr.Dropdown(
                 choices=list(ATTACK_SCENARIOS.keys()),
                 label="🎭 Select Attack Scenario",
                 value="🔄 Lateral Movement",
+                interactive=True,
+                elem_classes=["custom-input"]
             )
+            scenario_info = gr.HTML()
+            gr.HTML('<div style="margin: 2rem 0 1rem 0; height: 2px; background: linear-gradient(90deg, #667eea, #764ba2); border-radius: 2px;"></div>')
+            gr.HTML('<div class="section-header">⚙️ Analysis Configuration</div>')
             alert_slider = gr.Slider(
                 minimum=0,
                 maximum=2,
                 step=1,
                 value=0,
+                label="📋 Alert Selection",
+                info="Choose which alert from the scenario to analyze",
+                elem_classes=["custom-input"]
             )
             analyst_level = gr.Radio(
                 choices=["L1", "L2", "L3"],
+                label="👤 Analyst Experience Level",
                 value="L2",
+                info="🔹 L1: Triage • 🔹 L2: Investigation • 🔹 L3: Expert Analysis",
+                elem_classes=["custom-input"]
             )
             analyze_btn = gr.Button(
+                "🚀 Analyze Alert with AI",
                 variant="primary",
+                size="lg",
+                elem_classes=["primary-button"]
             )
             init_btn = gr.Button(
+                "🔄 Reinitialize Models",
+                variant="secondary",
+                elem_classes=["secondary-button"]
             )
+            gr.HTML('<div style="margin: 2rem 0 1rem 0; height: 2px; background: linear-gradient(90deg, #667eea, #764ba2); border-radius: 2px;"></div>')
+            gr.HTML("""
+            <div class="content-card">
+                <div class="section-header">🔧 System Features</div>
+                <div style="margin-top: 1rem;">
+                    <div class="timeline-item" style="background: rgba(102, 126, 234, 0.1);">
+                        <strong>🧠 GPT-OSS-20B:</strong> OpenAI's latest reasoning model
+                    </div>
+                    <div class="timeline-item" style="background: rgba(40, 167, 69, 0.1);">
+                        <strong>⚡ Multi-Strategy:</strong> Automatic model fallback
+                    </div>
+                    <div class="timeline-item" style="background: rgba(253, 126, 20, 0.1);">
+                        <strong>🛡️ Error Recovery:</strong> Robust failure handling
+                    </div>
+                    <div class="timeline-item" style="background: rgba(220, 53, 69, 0.1);">
+                        <strong>🎯 Expert Analysis:</strong> High-quality templates
+                    </div>
+                </div>
+            </div>
             """)
+        # Right Panel - Results
         with gr.Column(scale=2):
+            gr.HTML('<div class="section-header">📋 Security Alert Details</div>')
+            alert_output = gr.HTML(
+                '<div class="content-card"><p style="text-align: center; color: #6c757d; padding: 2rem;">Alert details will appear here after analysis...</p></div>'
             )
+            gr.HTML('<div class="section-header">🤖 AI-Powered Security Analysis</div>')
+            analysis_output = gr.HTML(
+                '<div class="content-card"><p style="text-align: center; color: #6c757d; padding: 2rem;">AI analysis will appear here after processing...</p></div>'
             )
+            status_output = gr.HTML()
+    # Footer
+    gr.HTML("""
+    <div class="content-card" style="margin-top: 2rem; text-align: center;">
+        <h3 style="color: #2d3436; margin-bottom: 1rem;">🎯 Enhanced Features</h3>
+        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem;">
+            <div class="stat-card">
+                <div style="font-size: 2rem; margin-bottom: 0.5rem;">🎨</div>
+                <div class="stat-label">Beautiful Design</div>
+                <p style="margin-top: 0.5rem; font-size: 0.8rem; color: #6c757d;">Modern, responsive UI with glassmorphism effects</p>
+            </div>
+            <div class="stat-card">
+                <div style="font-size: 2rem; margin-bottom: 0.5rem;">🚀</div>
+                <div class="stat-label">GPT-OSS Integration</div>
+                <p style="margin-top: 0.5rem; font-size: 0.8rem; color: #6c757d;">Latest OpenAI open-weight reasoning model</p>
+            </div>
+            <div class="stat-card">
+                <div style="font-size: 2rem; margin-bottom: 0.5rem;">🔧</div>
+                <div class="stat-label">Smart Fallbacks</div>
+                <p style="margin-top: 0.5rem; font-size: 0.8rem; color: #6c757d;">Automatic error recovery and model switching</p>
+            </div>
+            <div class="stat-card">
+                <div style="font-size: 2rem; margin-bottom: 0.5rem;">📊</div>
+                <div class="stat-label">Rich Analytics</div>
+                <p style="margin-top: 0.5rem; font-size: 0.8rem; color: #6c757d;">Visual confidence meters and threat timelines</p>
+            </div>
+        </div>
+        <div style="margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #dee2e6; color: #6c757d;">
+            <strong>👨‍🎓 Research:</strong> Abdullah Alanazi | <strong>🏛️ Institution:</strong> KAUST | <strong>👨‍🏫 Supervisor:</strong> Prof. Ali Shoker
+        </div>
+    </div>
     """)
     # Event handlers
     scenario_dropdown.change(
+        fn=get_beautiful_scenario_info,
         inputs=[scenario_dropdown],
         outputs=[scenario_info]
     )
     )
     analyze_btn.click(
+        fn=analyze_alert_beautiful,
         inputs=[scenario_dropdown, alert_slider, analyst_level],
         outputs=[alert_output, analysis_output, status_output]
     )
     # Initialize on startup
     demo.load(
+        fn=get_beautiful_scenario_info,
         inputs=[scenario_dropdown],
         outputs=[scenario_info]
     )