diff --git a/website/comprehensive-demo.html b/website/comprehensive-demo.html
index bdba9bc66..03b9ff1f4 100644
--- a/website/comprehensive-demo.html
+++ b/website/comprehensive-demo.html
@@ -3,34 +3,52 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Comprehensive SAMO-DL Demo - All Core Features</title>
-    <meta name="description" content="Interactive demo showcasing all SAMO-DL core features: emotion detection, voice transcription, text summarization, batch processing, and more">
+    <title>SAMO Emotion Detection API - SAMO Deep Learning</title>
+    <meta name="description" content="Interactive demo showcasing SAMO Whisper (voice transcription), SAMO T5 (text summarization), and SAMO DeBERTa v3 Large (emotion detection)">
 
-    <!-- Bootstrap CSS -->
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
-    <!-- Font Awesome -->
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
-    <!-- Chart.js for visualizations -->
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-    <!-- Prism.js for syntax highlighting -->
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet">
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
-    <!-- Custom CSS - Modular Structure -->
-    <link href="css/main.css" rel="stylesheet">
+    <!-- Favicon -->
+    <link rel="icon" href="/favicon.ico" type="image/x-icon">
+
+    <!-- Content Security Policy is now handled by HTTP headers -->
 
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
+    <!-- Google Material Icons -->
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <!-- Custom CSS -->
+    <link rel="stylesheet" href="css/comprehensive-demo.css">
+    <!-- Highcharts removed - using pure HTML/CSS charts -->
+    <!-- Performance Optimizer -->
+    <!-- <script src="js/performance-optimizer.js"></script> -->
 </head>
 <body class="comprehensive-demo">
     <!-- Navigation -->
-    <nav class="navbar navbar-expand-lg navbar-light fixed-top">
+    <nav class="navbar navbar-expand-lg navbar-dark fixed-top">
         <div class="container">
-            <a class="navbar-brand fw-bold" href="#">
-                <i class="fas fa-brain text-primary me-2"></i>
-                SAMO-DL Demo
+            <a class="navbar-brand fw-bold" href="index.html">
+                <span class="material-icons text-primary me-2">psychology</span>
+                SAMO-DL
             </a>
-            <div class="navbar-nav ms-auto">
-                <a class="nav-link" href="index.html">Home</a>
-                <a class="nav-link active" href="comprehensive-demo.html">Demo</a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav ms-auto">
+                    <li class="nav-item">
+                        <a class="nav-link" href="index.html">Home</a>
+                    </li>
+                    <li class="nav-item">
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link active" href="comprehensive-demo.html">All Features</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="integration.html">Integration</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="btn btn-primary ms-2" href="#demo">Try Now</a>
+                    </li>
+                </ul>
             </div>
         </div>
     </nav>
@@ -38,34 +56,56 @@
     <!-- Hero Section -->
     <section class="hero-section">
         <div class="container">
-            <div class="row align-items-center">
-                <div class="col-lg-8 mx-auto text-center hero-content">
+            <div class="row align-items-center hero-content">
+                <div class="col-lg-6">
                     <h1 class="display-4 fw-bold mb-4">
-                        <i class="fas fa-rocket me-3"></i>
-                        Comprehensive SAMO-DL Demo
+                        SAMO Emotion Detection API
                     </h1>
                     <p class="lead mb-4">
-                        Experience all the core features of our enterprise-grade AI system:
-                        emotion detection, voice transcription, text summarization, batch processing,
-                        and real-time monitoring.
+                        Experience the full power of our AI platform with <strong>SAMO Whisper</strong> for voice transcription,
+                        <strong>SAMO T5</strong> for text summarization, and <strong>SAMO DeBERTa v3 Large</strong> for emotion detection.
                     </p>
-                    <div class="d-flex justify-content-center gap-3 flex-wrap">
-                        <span class="security-badge">
-                            <i class="fas fa-shield-alt me-1"></i>
-                            Production Ready
-                        </span>
-                        <span class="security-badge">
-                            <i class="fas fa-bolt me-1"></i>
-                            >90% F1 Score
-                        </span>
-                        <span class="security-badge">
-                            <i class="fas fa-tachometer-alt me-1"></i>
-                            2.3x Performance
-                        </span>
-                        <span class="security-badge">
-                            <i class="fas fa-cloud me-1"></i>
-                            Cloud Deployed
-                        </span>
+                    <div class="d-flex gap-3">
+                        <a href="#demo" class="btn btn-light btn-lg">
+                            <span class="material-icons me-2">play_arrow</span>
+                            Start Demo
+                        </a>
+                        <a href="integration.html" class="btn btn-outline-light btn-lg">
+                            <span class="material-icons me-2">code</span>
+                            View Code
+                        </a>
+                    </div>
+                </div>
+                <div class="col-lg-6">
+                    <div class="row g-3">
+                        <div class="col-6">
+                            <div class="feature-card floating-card text-center p-3">
+                                <span class="material-icons text-primary mb-2" style="font-size: 2rem;">mic</span>
+                                <h6 class="fw-bold">SAMO Whisper</h6>
+                                <small class="text-muted">Voice Transcription</small>
+                            </div>
+                        </div>
+                        <div class="col-6">
+                            <div class="feature-card floating-card text-center p-3">
+                                <span class="material-icons text-success mb-2" style="font-size: 2rem;">description</span>
+                                <h6 class="fw-bold">SAMO T5</h6>
+                                <small class="text-muted">Text Summarization</small>
+                            </div>
+                        </div>
+                        <div class="col-6">
+                            <div class="feature-card floating-card text-center p-3">
+                                <span class="material-icons text-warning mb-2" style="font-size: 2rem;">favorite</span>
+                                <h6 class="fw-bold">SAMO DeBERTa v3 Large</h6>
+                                <small class="text-muted">28 Emotions</small>
+                            </div>
+                        </div>
+                        <div class="col-6">
+                            <div class="feature-card floating-card text-center p-3">
+                                <span class="material-icons text-info mb-2" style="font-size: 2rem;">rocket_launch</span>
+                                <h6 class="fw-bold">Complete Pipeline</h6>
+                                <small class="text-muted">End-to-End AI</small>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -73,1198 +113,787 @@ <h1 class="display-4 fw-bold mb-4">
     </section>
 
     <!-- Demo Container -->
-    <div class="container">
-        <div class="demo-container">
-            <!-- Feature Tabs -->
-            <div class="text-center mb-4">
-                <button class="demo-tab active" onclick="showFeature('emotion', event)">
-                    <i class="fas fa-heart me-2"></i>
-                    Emotion Detection
-                </button>
-                <button class="demo-tab" onclick="showFeature('voice', event)">
-                    <i class="fas fa-microphone me-2"></i>
-                    Voice Transcription
-                </button>
-                <button class="demo-tab" onclick="showFeature('batch', event)">
-                    <i class="fas fa-layer-group me-2"></i>
-                    Batch Processing
-                </button>
-                <button class="demo-tab" onclick="showFeature('summarization', event)">
-                    <i class="fas fa-compress-alt me-2"></i>
-                    Text Summarization
-                </button>
-                <button class="demo-tab" onclick="showFeature('monitoring', event)">
-                    <i class="fas fa-chart-line me-2"></i>
-                    Real-time Monitoring
-                </button>
-                <button class="demo-tab" onclick="showFeature('security', event)">
-                    <i class="fas fa-shield-alt me-2"></i>
-                    Security Features
-                </button>
-            </div>
-
-            <!-- Emotion Detection Demo -->
-            <div id="emotion-demo" class="feature-demo">
-                <h3 class="fw-bold mb-4">
-                    <i class="fas fa-heart text-danger me-2"></i>
-                    Emotion Detection
-                </h3>
-                <p class="text-muted mb-4">
-                    Our flagship feature with >90% F1 score. Analyze text and detect emotions with high accuracy.
-                </p>
-
+    <section id="demo" class="py-4">
+        <div class="container-fluid px-4">
+            <div class="demo-container">
                 <div class="row">
-                    <div class="col-md-6">
-                        <div class="mb-3">
-                            <label for="emotion-text" class="form-label fw-bold">Enter your text:</label>
-                            <textarea class="form-control" id="emotion-text" rows="4"
-                                placeholder="Try: 'I am feeling really happy and excited about this project!'"></textarea>
-                        </div>
-                        <button class="btn btn-primary btn-lg" onclick="analyzeEmotion()">
-                            <i class="fas fa-magic me-2"></i>
-                            Analyze Emotions
-                        </button>
-                    </div>
-                    <div class="col-md-6">
-                        <div id="emotion-results"></div>
+                    <div class="col-12 text-center mb-3">
+                        <p class="text-muted mb-0">
+                            Enter text to see our AI pipeline in action
+                        </p>
                     </div>
                 </div>
 
-                <div class="loading-spinner" id="emotion-loading">
-                    <div class="spinner-border text-primary" role="status">
-                        <span class="visually-hidden">Loading...</span>
-                    </div>
-                    <p class="mt-2">Analyzing emotions...</p>
-                </div>
-            </div>
-
-            <!-- Voice Transcription Demo -->
-            <div id="voice-demo" class="feature-demo" style="display: none;">
-                <h3 class="fw-bold mb-4">
-                    <i class="fas fa-microphone text-info me-2"></i>
-                    Voice-to-Text Transcription
-                </h3>
-                <p class="text-muted mb-4">
-                    Convert speech to text with emotion analysis using OpenAI Whisper integration.
-                </p>
-
-                <div class="voice-recorder">
-                    <button class="record-button" id="record-btn" onclick="toggleRecording()">
-                        <i class="fas fa-microphone" id="record-icon"></i>
-                    </button>
-                    <p class="mt-3" id="recording-status">Click to start recording</p>
-                </div>
-
-                <div class="row">
-                    <div class="col-md-6">
-                        <h5 class="fw-bold">Transcription Result:</h5>
-                        <div id="transcription-result" class="result-card">
-                            <p class="text-muted">Record audio to see transcription here...</p>
+                <!-- Dynamic Layout: Title with Flow | Centered Input | Hidden Results -->
+                <div class="row" id="titleWithFlow">
+                    <div class="col-12 d-flex align-items-center justify-content-center mb-4">
+                        <div class="d-flex align-items-center gap-4">
+                            <h2 class="h3 fw-bold mb-0">SAMO Emotion Pipeline</h2>
+                            <!-- Horizontal Progress Flow -->
+                            <div class="progress-pipeline-horizontal">
+                                <div class="progress-step-horizontal" id="step1">
+                                    <div class="step-icon-small pending" id="step1-icon">
+                                        <span class="material-icons">upload</span>
+                                    </div>
+                                    <span class="step-label">Input</span>
+                                </div>
+                                <div class="pipeline-arrow">→</div>
+                                <div class="progress-step-horizontal" id="step2">
+                                    <div class="step-icon-small pending" id="step2-icon">
+                                        <span class="material-icons">mic</span>
+                                    </div>
+                                    <span class="step-label">Transcription</span>
+                                </div>
+                                <div class="pipeline-arrow">→</div>
+                                <div class="progress-step-horizontal" id="step3">
+                                    <div class="step-icon-small pending" id="step3-icon">
+                                        <span class="material-icons">description</span>
+                                    </div>
+                                    <span class="step-label">Summarization</span>
+                                </div>
+                                <div class="pipeline-arrow">→</div>
+                                <div class="progress-step-horizontal" id="step4">
+                                    <div class="step-icon-small pending" id="step4-icon">
+                                        <span class="material-icons">favorite</span>
+                                    </div>
+                                    <span class="step-label">Emotion Analysis</span>
+                                </div>
+                            </div>
                         </div>
                     </div>
-                    <div class="col-md-6">
-                        <h5 class="fw-bold">Emotion Analysis:</h5>
-                        <div id="voice-emotion-results"></div>
-                    </div>
-                </div>
-
-                <div class="loading-spinner" id="voice-loading">
-                    <div class="spinner-border text-info" role="status">
-                        <span class="visually-hidden">Loading...</span>
-                    </div>
-                    <p class="mt-2">Processing audio...</p>
-                </div>
-            </div>
-
-            <!-- Batch Processing Demo -->
-            <div id="batch-demo" class="feature-demo" style="display: none;">
-                <h3 class="fw-bold mb-4">
-                    <i class="fas fa-layer-group text-warning me-2"></i>
-                    Batch Processing
-                </h3>
-                <p class="text-muted mb-4">
-                    Process multiple texts efficiently with optimized batch processing capabilities.
-                </p>
-
-                <div class="batch-input">
-                    <label class="form-label fw-bold">Enter multiple texts (one per line):</label>
-                    <textarea class="form-control" id="batch-texts" rows="6"
-                        placeholder="I am feeling really happy today!
-This is so frustrating, nothing works properly.
-I'm really excited about this new project.
-I feel a bit sad about the changes."></textarea>
-                    <button class="btn btn-warning btn-lg mt-3" onclick="processBatch()">
-                        <i class="fas fa-cogs me-2"></i>
-                        Process Batch
-                    </button>
                 </div>
 
-                <div id="batch-results"></div>
-
-                <div class="loading-spinner" id="batch-loading">
-                    <div class="spinner-border text-warning" role="status">
-                        <span class="visually-hidden">Loading...</span>
-                    </div>
-                    <p class="mt-2">Processing batch...</p>
-                </div>
-            </div>
+                <!-- Initial Input Layout -->
+                <div class="row" id="inputLayout">
+                    <!-- Centered Input Section -->
+                    <div class="col-lg-8 offset-lg-2">
+                        <!-- API Notice -->
+                        <div class="alert alert-info mb-3" role="alert">
+                            <span class="material-icons me-2">info</span>
+                            <strong>Live API Demo:</strong> This demo connects to our live SAMO APIs. Voice processing is temporarily unavailable - please use text input for now.
+                        </div>
 
-            <!-- Text Summarization Demo -->
-            <div id="summarization-demo" class="feature-demo" style="display: none;">
-                <h3 class="fw-bold mb-4">
-                    <i class="fas fa-compress-alt text-success me-2"></i>
-                    Text Summarization
-                </h3>
-                <p class="text-muted mb-4">
-                    Generate intelligent summaries while preserving emotional context.
-                </p>
+                        <!-- Input Section -->
+                        <!-- Audio Upload - Temporarily Disabled -->
+                        <div class="mb-4" style="opacity: 0.5;">
+                            <label for="audioFile" class="form-label fw-bold fs-5">
+                                <i class="fas fa-microphone me-2"></i>
+                                Upload Audio File (Temporarily Unavailable)
+                            </label>
+                            <input type="file" class="form-control form-control-lg" id="audioFile" accept="audio/*" disabled>
+                            <div class="form-text text-muted">Voice processing is temporarily unavailable. Please use text input below.</div>
+                        </div>
 
-                <div class="row">
-                    <div class="col-md-6">
-                        <label for="summary-text" class="form-label fw-bold">Enter long text to summarize:</label>
-                        <textarea class="form-control" id="summary-text" rows="8"
-                            placeholder="Today has been an incredible day! I woke up feeling refreshed and ready to tackle the world. The weather was perfect - sunny with a gentle breeze that made me feel alive and grateful. I had a productive morning meeting where my team praised my contributions, which made me feel proud and accomplished. Later, I had lunch with an old friend who shared some exciting news about their new job opportunity. I felt genuinely happy for them and excited about our future conversations. The afternoon was filled with creative work that challenged me in the best way possible. I love days like this where everything seems to align perfectly."></textarea>
-                        <button class="btn btn-success btn-lg mt-3" onclick="generateSummary()">
-                            <i class="fas fa-magic me-2"></i>
-                            Generate Summary
-                        </button>
-                    </div>
-                    <div class="col-md-6">
-                        <h5 class="fw-bold">Summary Result:</h5>
-                        <div id="summary-result" class="result-card">
-                            <p class="text-muted">Enter text to see summary here...</p>
+                        <!-- Audio Recording - Temporarily Disabled -->
+                        <div class="mb-4" style="opacity: 0.5;">
+                            <label class="form-label fw-bold fs-5">
+                                <span class="material-icons me-2">fiber_manual_record</span>
+                                Record Audio (Temporarily Unavailable)
+                            </label>
+                            <div class="d-flex gap-3 justify-content-center">
+                                <button class="btn btn-outline-secondary btn-lg" id="recordBtn" disabled aria-label="Start audio recording">
+                                    <i class="fas fa-microphone me-2" aria-hidden="true"></i>
+                                    Start Recording
+                                </button>
+                                <button class="btn btn-outline-secondary btn-lg" id="stopBtn" disabled aria-label="Stop audio recording">
+                                    <span class="material-icons me-2" aria-hidden="true">stop</span>
+                                    Stop Recording
+                                </button>
+                            </div>
+                            <!-- Audio Visualizer -->
+                            <div id="audioVisualizer" class="audio-visualizer mt-3" style="display: none;">
+                                <div class="text-center">
+                                    <div class="recording-indicator">
+                                        <span class="material-icons text-danger">fiber_manual_record</span>
+                                        <span class="ms-2">Recording...</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="form-text text-muted">Voice processing will be restored soon. Use text input for now.</div>
                         </div>
-                    </div>
-                </div>
 
-                <div class="loading-spinner" id="summary-loading">
-                    <div class="spinner-border text-success" role="status">
-                        <span class="visually-hidden">Loading...</span>
-                    </div>
-                    <p class="mt-2">Generating summary...</p>
-                </div>
-            </div>
+                        <!-- Text Input -->
+                        <div class="mb-4">
+                            <label for="textInput" class="form-label fw-bold fs-5">
+                                <span class="material-icons me-2">keyboard</span>
+                                Or Enter Text Directly
+                            </label>
+                            <textarea
+                                class="form-control form-control-lg"
+                                id="textInput"
+                                rows="4"
+                                placeholder="Enter your text here for summarization and emotion analysis..."
+                            >I am so excited and happy today! This is such wonderful news and I feel optimistic about the future. I can't wait to see what amazing opportunities await us. However, I'm also a bit nervous about the challenges ahead, but I'm confident we can overcome them together.</textarea>
+                        </div>
 
-            <!-- Real-time Monitoring Demo -->
-            <div id="monitoring-demo" class="feature-demo" style="display: none;">
-                <h3 class="fw-bold mb-4">
-                    <i class="fas fa-chart-line text-primary me-2"></i>
-                    Real-time Monitoring
-                </h3>
-                <p class="text-muted mb-4">
-                    Live system metrics and performance monitoring dashboard.
-                </p>
-
-                <div class="metrics-grid">
-                    <div class="metric-card">
-                        <div class="metric-value" id="uptime-metric">99.9%</div>
-                        <div class="metric-label">Uptime</div>
-                    </div>
-                    <div class="metric-card">
-                        <div class="metric-value" id="response-time-metric">43ms</div>
-                        <div class="metric-label">Avg Response Time</div>
-                    </div>
-                    <div class="metric-card">
-                        <div class="metric-value" id="requests-metric">1,247</div>
-                        <div class="metric-label">Requests Today</div>
-                    </div>
-                    <div class="metric-card">
-                        <div class="metric-value" id="accuracy-metric">90.7%</div>
-                        <div class="metric-label">Model Accuracy</div>
+                        <div class="d-flex gap-3 justify-content-center flex-wrap">
+                            <button class="btn btn-primary btn-lg px-4" id="processBtn" aria-label="Process text with AI models for summarization and emotion analysis">
+                                <span class="material-icons me-2" aria-hidden="true">auto_fix_high</span>
+                                Process
+                            </button>
+                            <button class="btn btn-success btn-lg px-4" id="generateBtn" aria-label="Generate sample text using AI">
+                                <span class="material-icons me-2" aria-hidden="true">auto_awesome</span>
+                                Generate
+                            </button>
+                            <button class="btn btn-outline-secondary btn-lg px-4" id="clearBtn" aria-label="Clear all inputs and results">
+                                <span class="material-icons me-2" aria-hidden="true">delete</span>
+                                Clear All
+                            </button>
+                            <button class="btn btn-outline-warning btn-lg px-4" id="apiKeyBtn" title="Manage OpenAI API Key">
+                                <span class="material-icons me-2" aria-hidden="true">key</span>
+                                API Key
+                            </button>
+                        </div>
                     </div>
                 </div>
 
-                <div class="row mt-4">
-                    <div class="col-md-6">
-                        <h5 class="fw-bold">Performance Chart:</h5>
-                        <canvas id="performanceChart" width="400" height="200"></canvas>
-                    </div>
-                    <div class="col-md-6">
-                        <h5 class="fw-bold">Recent Activity:</h5>
-                        <div id="activity-log" class="result-card" style="max-height: 300px; overflow-y: auto;">
-                            <div class="d-flex justify-content-between align-items-center mb-2">
-                                <span>Emotion analysis request</span>
-                                <span class="performance-indicator performance-fast">43ms</span>
-                            </div>
-                            <div class="d-flex justify-content-between align-items-center mb-2">
-                                <span>Batch processing (5 texts)</span>
-                                <span class="performance-indicator performance-fast">156ms</span>
-                            </div>
-                            <div class="d-flex justify-content-between align-items-center mb-2">
-                                <span>Voice transcription</span>
-                                <span class="performance-indicator performance-medium">892ms</span>
-                            </div>
-                            <div class="d-flex justify-content-between align-items-center mb-2">
-                                <span>Text summarization</span>
-                                <span class="performance-indicator performance-medium">1.2s</span>
+                <!-- Results Layout (Initially Hidden) -->
+                <div class="d-none" id="resultsLayout">
+                    <!-- Enhanced Loading Section -->
+                    <div id="loadingSection" class="loading-spinner text-center mb-4" role="status" aria-live="polite" aria-busy="true">
+                        <div class="row justify-content-center">
+                            <div class="col-md-8">
+                                <div class="feature-card p-4">
+                                    <div class="spinner-border text-primary mb-3" style="width: 3rem; height: 3rem;" role="status">
+                                        <span class="visually-hidden">Loading...</span>
+                                    </div>
+                                    <h5 class="text-primary mb-3">🚀 AI Processing Pipeline</h5>
+
+                                    <!-- Progress Steps -->
+                                    <div class="row g-3 mb-4">
+                                        <div class="col-md-6">
+                                            <div id="emotionStep" class="process-step">
+                                                <span class="material-icons text-warning me-2">psychology</span>
+                                                <span class="step-text">Emotion Analysis</span>
+                                                <div class="step-status" id="emotionStatus">⏳ Waiting...</div>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div id="summaryStep" class="process-step">
+                                                <span class="material-icons text-success me-2">description</span>
+                                                <span class="step-text">Text Summarization</span>
+                                                <div class="step-status" id="summaryStatus">⏳ Waiting...</div>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <p class="text-muted mb-2" id="loadingMessage">Initializing AI models...</p>
+                                    <small class="text-muted" id="timeEstimate">Estimated time: 2-4 seconds</small>
+                                </div>
                             </div>
                         </div>
                     </div>
-                </div>
-
-                <button class="btn btn-primary mt-3" onclick="refreshMetrics()">
-                    <i class="fas fa-sync-alt me-2"></i>
-                    Refresh Metrics
-                </button>
-            </div>
 
-            <!-- Security Features Demo -->
-            <div id="security-demo" class="feature-demo" style="display: none;">
-                <h3 class="fw-bold mb-4">
-                    <i class="fas fa-shield-alt text-success me-2"></i>
-                    Security Features
-                </h3>
-                <p class="text-muted mb-4">
-                    Enterprise-grade security with rate limiting, input sanitization, and threat detection.
-                </p>
-
-                <div class="row">
-                    <div class="col-md-6">
-                        <h5 class="fw-bold">Security Status:</h5>
-                        <div class="result-card">
-                            <div class="d-flex justify-content-between align-items-center mb-2">
-                                <span>Rate Limiting</span>
-                                <span class="security-badge">Active</span>
-                            </div>
-                            <div class="d-flex justify-content-between align-items-center mb-2">
-                                <span>Input Sanitization</span>
-                                <span class="security-badge">Active</span>
+                    <!-- Side-by-Side Results Section -->
+                    <div class="row" id="resultSection">
+                        <!-- Left Column: Emotion Analysis -->
+                        <div class="col-lg-6">
+                            <!-- Emotion Analysis Results -->
+                            <div class="mb-4 result-section-hidden" id="emotionResults">
+                                <div class="feature-card p-4">
+                                    <h5 class="fw-bold mb-3">
+                                        <span class="material-icons text-warning me-2">favorite</span>
+                                        Emotion Analysis (SAMO DeBERTa v3 Large)
+                                    </h5>
+                                    <div class="row">
+                                        <div class="col-md-6">
+                                            <div class="emotion-chart-container">
+                                                <h6 class="fw-bold mb-3 text-info">
+                                                    <span class="material-icons me-2">bar_chart</span>
+                                                    Top 5 Emotions
+                                                </h6>
+                                                <div id="emotionBadges" class="mb-3"></div>
+                                                <div id="emotionChart"></div>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <!-- Detailed Model Output -->
+                                            <div class="mt-0">
+                                                <h6 class="fw-bold mb-3 text-info">
+                                                    <span class="material-icons me-2">psychology</span>
+                                                    Detailed Model Analysis
+                                                </h6>
+                                                <div class="model-detail-card">
+                                                    <div class="model-detail-label">Primary Emotion</div>
+                                                    <div class="model-detail-value" id="primaryEmotion">-</div>
+                                                </div>
+                                                <div class="model-detail-card">
+                                                    <div class="model-detail-label">Emotional Intensity</div>
+                                                    <div class="model-detail-value" id="emotionalIntensity">-</div>
+                                                </div>
+                                                <div class="model-detail-card">
+                                                    <div class="model-detail-label">Sentiment Score</div>
+                                                    <div class="model-detail-value" id="sentimentScore">-</div>
+                                                </div>
+                                                <div class="model-detail-card">
+                                                    <div class="model-detail-label">Confidence Range</div>
+                                                    <div class="model-detail-value" id="confidenceRange">-</div>
+                                                </div>
+                                                <div class="model-detail-card">
+                                                    <div class="model-detail-label">Model Processing Details</div>
+                                                    <div class="model-detail-text" id="modelDetails">-</div>
+                                                </div>
+                                            </div>
+
+                                            <!-- Additional Emotion Details -->
+                                            <div class="mt-3">
+                                                <div id="emotionDetails"></div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
                             </div>
-                            <div class="d-flex justify-content-between align-items-center mb-2">
-                                <span>XSS Protection</span>
-                                <span class="security-badge">Active</span>
-                            </div>
-                            <div class="d-flex justify-content-between align-items-center mb-2">
-                                <span>SQL Injection Protection</span>
-                                <span class="security-badge">Active</span>
+                        </div>
+
+                        <!-- Right Column: Summarization -->
+                        <div class="col-lg-6">
+                            <!-- Summarization Results -->
+                            <div class="mb-4 result-section-hidden" id="summarizationResults">
+                                <div class="feature-card p-4">
+                                    <h5 class="fw-bold mb-3">
+                                        <span class="material-icons text-success me-2">description</span>
+                                        Summarization Results
+                                    </h5>
+                                    <div id="summaryText" class="mb-3"></div>
+                                    <div class="d-flex justify-content-between align-items-center mb-3">
+                                        <small class="text-muted">Original Length: <span id="originalLength">-</span> characters</small>
+                                        <small class="text-muted">Summary Length: <span id="summaryLength">-</span> characters</small>
+                                    </div>
+                                    <div id="summaryChart"></div>
+                                </div>
                             </div>
-                            <div class="d-flex justify-content-between align-items-center mb-2">
-                                <span>Threat Detection</span>
-                                <span class="security-badge">Active</span>
+
+                            <!-- Transcription Results (Optional - may be hidden) -->
+                            <div class="mb-4 result-section-hidden" id="transcriptionResults">
+                                <div class="feature-card p-4">
+                                    <h5 class="fw-bold mb-3">
+                                        <span class="material-icons text-primary me-2">mic</span>
+                                        Transcription Results
+                                    </h5>
+                                    <div id="transcriptionText" class="mb-3"></div>
+                                    <div class="d-flex justify-content-between align-items-center">
+                                        <small class="text-muted">Confidence: <span id="transcriptionConfidence">-</span></small>
+                                        <small class="text-muted">Duration: <span id="transcriptionDuration">-</span></small>
+                                    </div>
+                                </div>
                             </div>
                         </div>
                     </div>
-                    <div class="col-md-6">
-                        <h5 class="fw-bold">Rate Limit Test:</h5>
-                        <div class="result-card">
-                            <p>Test rate limiting by making rapid requests:</p>
-                            <button class="btn btn-danger" onclick="testRateLimit()">
-                                <i class="fas fa-bolt me-2"></i>
-                                Test Rate Limit
-                            </button>
-                            <div id="rate-limit-result" class="mt-3"></div>
-                        </div>
-                    </div>
-                </div>
 
-                <div class="row mt-4">
-                    <div class="col-12">
-                        <h5 class="fw-bold">Security Headers:</h5>
-                        <div class="code-block">
-                            <pre><code class="language-json">{
-  "Content-Security-Policy": "default-src 'self'",
-  "X-Frame-Options": "DENY",
-  "X-Content-Type-Options": "nosniff",
-  "Strict-Transport-Security": "max-age=31536000; includeSubDomains",
-  "X-XSS-Protection": "1; mode=block",
-  "Referrer-Policy": "strict-origin-when-cross-origin"
-}</code></pre>
+                    <!-- Bottom: Processing Information & Controls (Horizontal Layout) -->
+                    <div class="row mt-4">
+                        <div class="col-12">
+                            <div class="feature-card">
+                                <div class="card-body">
+                                    <h6 class="fw-bold mb-3 text-center">Processing Information</h6>
+                                    <div class="row g-3">
+                                        <div class="col-lg-3 col-md-6">
+                                            <div class="d-flex align-items-center justify-content-between p-2 bg-dark bg-opacity-25 rounded">
+                                                <div class="d-flex align-items-center">
+                                                    <span class="material-icons text-primary me-2" style="font-size: 1.2rem;">schedule</span>
+                                                    <small class="fw-bold">Total Time</small>
+                                                </div>
+                                                <small class="text-muted" id="totalTimeCompact">-</small>
+                                            </div>
+                                        </div>
+                                        <div class="col-lg-3 col-md-6">
+                                            <div class="d-flex align-items-center justify-content-between p-2 bg-dark bg-opacity-25 rounded">
+                                                <div class="d-flex align-items-center">
+                                                    <span class="material-icons text-success me-2" style="font-size: 1.2rem;">check_circle</span>
+                                                    <small class="fw-bold">Status</small>
+                                                </div>
+                                                <small class="text-muted" id="processingStatusCompact">Ready</small>
+                                            </div>
+                                        </div>
+                                        <div class="col-lg-3 col-md-6">
+                                            <div class="d-flex align-items-center justify-content-between p-2 bg-dark bg-opacity-25 rounded">
+                                                <div class="d-flex align-items-center">
+                                                    <span class="material-icons text-warning me-2" style="font-size: 1.2rem;">psychology</span>
+                                                    <small class="fw-bold">Models Used</small>
+                                                </div>
+                                                <small class="text-muted" id="modelsUsedCompact">-</small>
+                                            </div>
+                                        </div>
+                                        <div class="col-lg-3 col-md-6">
+                                            <div class="d-flex align-items-center justify-content-between p-2 bg-dark bg-opacity-25 rounded">
+                                                <div class="d-flex align-items-center">
+                                                    <span class="material-icons text-info me-2" style="font-size: 1.2rem;">trending_up</span>
+                                                    <small class="fw-bold">Confidence</small>
+                                                </div>
+                                                <small class="text-muted" id="avgConfidenceCompact">-</small>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <!-- Control Buttons Row -->
+                                    <div class="row mt-3">
+                                        <div class="col-md-6 text-center">
+                                            <!-- Reset Button -->
+                                            <button class="btn btn-outline-primary btn-sm me-2" id="resetBtn" onclick="resetToInputScreen()">
+                                                <span class="material-icons me-1" style="font-size: 1rem;">refresh</span>
+                                                New Analysis
+                                            </button>
+                                            <!-- Debug Toggle Button -->
+                                            <button class="btn btn-outline-secondary btn-sm" id="debugToggleBtn" onclick="LayoutManager.toggleDebugSection()">
+                                                <span class="material-icons me-1" style="font-size: 1rem;">bug_report</span>
+                                                Show Debug
+                                            </button>
+                                        </div>
+                                        <div class="col-md-6 text-center">
+                                            <!-- Debug Test (Hidden by Default, Toggleable) -->
+                                            <div class="d-none" id="debugTestSection">
+                                                <div class="d-flex justify-content-center gap-2">
+                                                    <button class="btn btn-success btn-sm" onclick="testWithRealAPI()">Test with Real API</button>
+                                                    <button class="btn btn-secondary btn-sm" onclick="clearAll()">Clear All</button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <!-- Progress Console (Added for user-friendly feedback) -->
+                                    <div class="row mt-3" id="progressConsoleRow" style="display: none;">
+                                        <div class="col-12">
+                                            <div class="bg-dark bg-opacity-75 rounded p-3">
+                                                <h6 class="fw-bold mb-3 text-light">
+                                                    <span class="material-icons text-info me-2" style="font-size: 1.2rem;">terminal</span>
+                                                    Processing Console
+                                                </h6>
+                                                <div id="progressConsole" class="bg-black rounded p-2" style="height: 150px; overflow-y: auto; font-family: 'Courier New', monospace; font-size: 0.85rem;">
+                                                    <div class="text-success">SAMO-DL Processing Console Ready...</div>
+                                                </div>
+                                                <div class="mt-2 text-end">
+                                                    <button class="btn btn-outline-light btn-sm" onclick="clearProgressConsole()">
+                                                        <span class="material-icons me-1" style="font-size: 0.9rem;">clear</span>
+                                                        Clear Console
+                                                    </button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
-    </div>
+    </section>
 
     <!-- Footer -->
     <footer class="footer">
         <div class="container">
             <div class="row">
-                <div class="col-lg-8 mx-auto text-center">
-                    <h5 class="fw-bold mb-3">SAMO Deep Learning</h5>
-                    <p class="text-muted mb-4">
-                        Enterprise-grade AI system with >90% F1 score and 2.3x performance optimization.
+                <div class="col-lg-4 mb-4">
+                    <h5 class="fw-bold mb-3">
+                        <span class="material-icons text-primary me-2">psychology</span>
+                        SAMO-DL
+                    </h5>
+                    <p class="text-muted">
+                        Complete AI platform with voice transcription, text summarization, and emotion detection.
+                    </p>
+                </div>
+                <div class="col-lg-2 col-md-6 mb-4">
+                    <h6 class="fw-bold mb-3">Product</h6>
+                    <ul class="list-unstyled">
+                        <li><a href="index.html" class="text-muted text-decoration-none">Home</a></li>
+                        <li><a href="comprehensive-demo.html" class="text-muted text-decoration-none">All Features</a></li>
+                        <li><a href="integration.html" class="text-muted text-decoration-none">Integration</a></li>
+                    </ul>
+                </div>
+                <div class="col-lg-2 col-md-6 mb-4">
+                    <h6 class="fw-bold mb-3">Resources</h6>
+                    <ul class="list-unstyled">
+                        <li><a href="https://github.com/uelkerd/SAMO--DL/blob/main/docs/api/API_DOCUMENTATION.md" class="text-muted text-decoration-none" target="_blank" rel="noopener noreferrer">API Docs</a></li>
+                        <li><a href="https://huggingface.co/duelker/samo-goemotions-deberta-v3-large" class="text-muted text-decoration-none" target="_blank" rel="noopener noreferrer">DeBERTa Model</a></li>
+                        <li><a href="https://github.com/uelkerd/SAMO--DL/blob/main/docs/README.md" class="text-muted text-decoration-none" target="_blank" rel="noopener noreferrer">Support</a></li>
+                    </ul>
+                </div>
+            </div>
+            <hr class="my-4">
+            <div class="row align-items-center">
+                <div class="col-md-6">
+                    <p class="text-muted mb-0">
+                        © 2025 SAMO-DL
+                    </p>
+                </div>
+                <div class="col-md-6 text-md-end">
+                    <p class="text-muted mb-0">
+                        Built with ❤ during TechLabs Berlin Summer '25
                     </p>
-                    <div class="d-flex justify-content-center gap-3">
-                        <a href="index.html" class="text-muted text-decoration-none">Home</a>
-                        <a href="comprehensive-demo.html" class="text-muted text-decoration-none">Demo</a>
-                    </div>
                 </div>
             </div>
         </div>
     </footer>
 
     <!-- Bootstrap JS -->
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
 
-    <!-- Configuration -->
+    <!-- Configuration Script -->
     <script src="js/config.js"></script>
 
-    <!-- SAMO-DL Demo Scripts -->
-    <script src="js/comprehensive-demo.js"></script>
-    <script src="js/demo-initialization.js"></script>
+    <!-- Chart.js for emotion visualization - MUST load before simple-demo-functions.js -->
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.min.js"
+            onload="console.log('✅ Chart.js loaded successfully')"
+            onerror="console.error('❌ Failed to load Chart.js')"></script>
+
+    <!-- Simple Working Functions -->
+    <!-- <script src="js/simple-demo-functions.js"></script> -->
 
+    <!-- Dynamic Layout State Management -->
     <script>
-        // API Configuration (Unified API)
-        // Load API configuration from config.js
-        const API_BASE_URL = window.SAMO_CONFIG?.API?.BASE_URL || 'https://samo-unified-api-frrnetyhfa-uc.a.run.app';
-        let AUTH_TOKEN = null;
-        let CHAT_WS = null;
-
-        // Warn if config is not loaded
-        if (!window.SAMO_CONFIG) {
-            console.warn('SAMO-DL config.js not loaded. Using fallback API URL. Please ensure js/config.js is available.');
-        }
-
-        // Chart Management - Better pattern than global window storage
-        const ChartManager = {
-            charts: new Map(),
-
-            destroy(chartId) {
-                const chart = this.charts.get(chartId);
-                if (chart && typeof chart.destroy === 'function') {
-                    try {
-                        chart.destroy();
-                        console.log(`Chart '${chartId}' destroyed successfully`);
-                    } catch (e) {
-                        console.warn(
-                            `Error destroying chart '${chartId}'. Chart instance:`, chart,
-                            'Operation: destroy',
-                            'Error:', e
-                        );
-                    }
+        // Layout State Management Functions
+        const LayoutManager = {
+            currentState: 'initial', // initial, processing, results
+
+            // Transition to processing state
+            showProcessingState() {
+                console.log('🔄 Transitioning to processing state...');
+                this.currentState = 'processing';
+
+                // Hide input layout with smooth transition
+                const inputLayout = document.getElementById('inputLayout');
+                if (inputLayout) {
+                    inputLayout.style.opacity = '0';
+                    inputLayout.style.transform = 'translateY(-20px)';
+
+                    setTimeout(() => {
+                        inputLayout.classList.add('d-none');
+                    }, 300);
                 }
-                this.charts.delete(chartId);
-            },
-
-            set(chartId, chartInstance) {
-                // Destroy existing chart if it exists
-                this.destroy(chartId);
-                // Store new chart
-                this.charts.set(chartId, chartInstance);
-                console.log(`Chart '${chartId}' registered in ChartManager`);
-            },
-
-            get(chartId) {
-                return this.charts.get(chartId);
-            },
 
-            has(chartId) {
-                return this.charts.has(chartId);
+                // Show loading in results area
+                this.showLoadingState();
             },
 
-            clear() {
-                for (const [chartId] of this.charts) {
-                    this.destroy(chartId);
+            // Transition to results state
+            showResultsState() {
+                console.log('✅ Transitioning to results state...');
+                this.currentState = 'results';
+
+                // Hide loading
+                this.hideLoadingState();
+
+                // Show results layout with smooth transition
+                const resultsLayout = document.getElementById('resultsLayout');
+                if (resultsLayout) {
+                    resultsLayout.classList.remove('d-none');
+                    resultsLayout.style.opacity = '0';
+                    resultsLayout.style.transform = 'translateY(20px)';
+
+                    // Animate in
+                    setTimeout(() => {
+                        resultsLayout.style.opacity = '1';
+                        resultsLayout.style.transform = 'translateY(0)';
+                    }, 100);
                 }
-                console.log('All charts cleared from ChartManager');
-            }
-        };
 
-        // Demo state
-        let isRecording = false;
-        let mediaRecorder = null;
-        let audioChunks = [];
-
-        // Feature switching
-        function showFeature(feature, event) {
-            // Hide all demos
-            document.querySelectorAll('.feature-demo').forEach(demo => {
-                demo.style.display = 'none';
-            });
-
-            // Remove active class from all tabs
-            document.querySelectorAll('.demo-tab').forEach(tab => {
-                tab.classList.remove('active');
-            });
-
-            // Show selected demo
-            document.getElementById(feature + '-demo').style.display = 'block';
-
-            // Add active class to clicked tab
-            event.target.classList.add('active');
-        }
-
-        // Emotion Detection (Unified API -> /analyze/journal)
-        function _emotionsDictToArray(emotions) {
-            return Object.entries(emotions || {}).map(([emotion, confidence]) => ({ emotion, confidence }));
-        }
-
-        async function analyzeEmotion() {
-            const text = document.getElementById('emotion-text').value.trim();
-            if (!text) {
-                alert('Please enter some text to analyze');
-                return;
-            }
-
-            showLoading('emotion');
-
-            try {
-                const response = await fetch(`${API_BASE_URL}/analyze/journal`, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ text, generate_summary: false })
-                });
-
-                const unified = await response.json();
-                const adapted = _emotionsDictToArray(
-                    unified?.emotion_analysis?.emotions || {}
-                );
-                displayEmotionResults(adapted);
-            } catch (error) {
-                console.error('Error:', error);
-                document.getElementById('emotion-results').innerHTML =
-                    '<div class="alert alert-danger">Error analyzing emotions. Please try again.</div>';
-            } finally {
-                hideLoading('emotion');
-            }
-        }
-
-        function displayEmotionResults(result, container = null) {
-            const targetContainer = container || document.getElementById('emotion-results');
-            targetContainer.innerHTML = ''; // Clear previous results
-
-            if (Array.isArray(result) && result.length > 0) {
-                const title = document.createElement('h5');
-                title.className = 'fw-bold mb-3';
-                title.textContent = 'Detected Emotions:';
-                targetContainer.appendChild(title);
-
-                result.forEach(emotion => {
-                    const confidence = (emotion.confidence * 100).toFixed(1);
-                    const color = getEmotionColor(emotion.emotion);
+                // Sync processing info data
+                this.syncProcessingInfo();
+            },
 
-                    const resultCard = document.createElement('div');
-                    resultCard.className = 'result-card';
+            // Return to initial state
+            resetToInitialState() {
+                console.log('🔄 Resetting to initial state...');
+                this.currentState = 'initial';
 
-                    const headerDiv = document.createElement('div');
-                    headerDiv.className = 'd-flex justify-content-between align-items-center mb-2';
+                // Hide results layout
+                const resultsLayout = document.getElementById('resultsLayout');
+                if (resultsLayout) {
+                    resultsLayout.style.opacity = '0';
+                    resultsLayout.style.transform = 'translateY(20px)';
 
-                    const emotionSpan = document.createElement('span');
-                    emotionSpan.className = 'fw-bold text-capitalize';
-                    emotionSpan.textContent = emotion.emotion; // textContent automatically escapes HTML
-                    headerDiv.appendChild(emotionSpan);
+                    setTimeout(() => {
+                        resultsLayout.classList.add('d-none');
+                    }, 300);
+                }
 
-                    const badgeSpan = document.createElement('span');
-                    badgeSpan.className = `badge bg-${color}`;
-                    badgeSpan.textContent = `${confidence}%`;
-                    headerDiv.appendChild(badgeSpan);
+                // Show input layout
+                const inputLayout = document.getElementById('inputLayout');
+                if (inputLayout) {
+                    setTimeout(() => {
+                        inputLayout.classList.remove('d-none');
+                        inputLayout.style.opacity = '1';
+                        inputLayout.style.transform = 'translateY(0)';
+                    }, 350);
+                }
 
-                    resultCard.appendChild(headerDiv);
+                // Hide loading
+                this.hideLoadingState();
 
-                    const progressDiv = document.createElement('div');
-                    progressDiv.className = 'progress';
-                    progressDiv.style.height = '8px';
+                // Reset progress steps
+                this.resetProgressSteps();
+            },
 
-                    const progressBar = document.createElement('div');
-                    progressBar.className = `progress-bar bg-${color}`;
-                    progressBar.style.width = `${confidence}%`;
-                    progressDiv.appendChild(progressBar);
+            // Show loading state in results area
+            showLoadingState() {
+                const resultsLayout = document.getElementById('resultsLayout');
+                if (resultsLayout) {
+                    resultsLayout.classList.remove('d-none');
+                    resultsLayout.style.opacity = '1';
+
+                    // Show only loading spinner initially
+                    const loadingSection = document.getElementById('loadingSection');
+                    if (loadingSection) {
+                        loadingSection.style.display = 'block';
+                    }
+                }
+            },
 
-                    resultCard.appendChild(progressDiv);
-                    targetContainer.appendChild(resultCard);
-                });
-            } else {
-                const alertDiv = document.createElement('div');
-                alertDiv.className = 'alert alert-warning';
-                alertDiv.textContent = 'No emotions detected.';
-                targetContainer.appendChild(alertDiv);
-            }
-        }
-
-        function getEmotionColor(emotion) {
-            const colors = {
-                'joy': 'success',
-                'happiness': 'success',
-                'excitement': 'warning',
-                'sadness': 'info',
-                'anger': 'danger',
-                'fear': 'warning',
-                'surprise': 'primary',
-                'disgust': 'secondary'
-            };
-            return colors[emotion] || 'primary';
-        }
-
-        // Minimal Chat Demo (Auth + HTTP + WS)
-        document.addEventListener('DOMContentLoaded', () => {
-            const saved = localStorage.getItem('samo_auth_token');
-            if (saved) {
-                AUTH_TOKEN = saved;
-                setAuthStatus(true);
-            }
-        });
+            // Hide loading state
+            hideLoadingState() {
+                const loadingSection = document.getElementById('loadingSection');
+                if (loadingSection) {
+                    loadingSection.style.display = 'none';
+                }
+            },
 
-        function setAuthStatus(ok) {
-            const badge = document.getElementById('chat-auth-status');
-            if (!badge) return;
-            badge.textContent = ok ? 'AUTH OK' : 'AUTH REQ';
-            badge.className = `badge ${ok ? 'bg-success' : 'bg-warning text-dark'}`;
-        }
-
-        async function chatLogin() {
-            const u = document.getElementById('chat-username').value.trim();
-            const p = document.getElementById('chat-password').value;
-            const out = document.getElementById('chat-output');
-            out.textContent = 'Logging in...';
-            try {
-                const resp = await fetch(`${API_BASE_URL}/auth/login`, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ username: u, password: p })
-                });
-                const data = await resp.json();
-                if (!resp.ok || !data.access_token) throw new Error(data.detail || 'Login failed');
-                AUTH_TOKEN = data.access_token;
-                localStorage.setItem('samo_auth_token', AUTH_TOKEN);
-                setAuthStatus(true);
-                out.textContent = 'Login successful.';
-            } catch (e) {
-                out.textContent = 'Login error: ' + e.message;
-                setAuthStatus(false);
-            }
-        }
-
-        function appendChatMessage(sender, text, summary = null) {
-            const list = document.getElementById('chat-messages');
-            const item = document.createElement('div');
-            item.className = 'p-2 mb-2 rounded ' + (sender === 'you' ? 'bg-primary bg-opacity-10' : 'bg-dark bg-opacity-10');
-            const who = document.createElement('div');
-            who.className = 'small text-muted mb-1';
-            who.textContent = sender;
-            const body = document.createElement('div');
-            body.textContent = text || '';
-            item.appendChild(who);
-            item.appendChild(body);
-            if (summary) {
-                const sum = document.createElement('div');
-                sum.className = 'mt-1 text-secondary';
-                sum.textContent = 'summary: ' + summary;
-                item.appendChild(sum);
-            }
-            list.appendChild(item);
-            list.scrollTop = list.scrollHeight;
-        }
-
-        async function sendChatHttp() {
-            const input = document.getElementById('chat-input');
-            const out = document.getElementById('chat-output');
-            const text = input.value.trim();
-            if (!text) return;
-            if (!AUTH_TOKEN) { out.textContent = 'Please login first.'; return; }
-            appendChatMessage('you', text);
-            out.textContent = '...';
-            try {
-                const resp = await fetch(`${API_BASE_URL}/chat`, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${AUTH_TOKEN}` },
-                    body: JSON.stringify({ text, summarize: true, model: 't5-small' })
+            // Sync processing info between original and compact versions
+            syncProcessingInfo() {
+                const mappings = [
+                    ['totalTime', 'totalTimeCompact'],
+                    ['processingStatus', 'processingStatusCompact'],
+                    ['modelsUsed', 'modelsUsedCompact'],
+                    ['avgConfidence', 'avgConfidenceCompact']
+                ];
+
+                mappings.forEach(([original, compact]) => {
+                    const originalEl = document.getElementById(original);
+                    const compactEl = document.getElementById(compact);
+
+                    if (originalEl && compactEl) {
+                        compactEl.textContent = originalEl.textContent;
+                    }
                 });
-                const data = await resp.json();
-                out.textContent = '';
-                appendChatMessage('bot', data.reply || JSON.stringify(data), data.summary || null);
-            } catch (e) {
-                out.textContent = 'Error sending message';
-            }
-        }
-
-        function buildWsUrl(path) {
-            if (!API_BASE_URL.startsWith('https://')) return null;
-            return API_BASE_URL.replace('https://', 'wss://') + path;
-        }
-
-        async function connectChatWs() {
-            const out = document.getElementById('chat-output');
-            if (!AUTH_TOKEN) { out.textContent = 'Please login first.'; return; }
-            const url = buildWsUrl(`/ws/chat?token=${encodeURIComponent(AUTH_TOKEN)}`);
-            if (!url) { out.textContent = 'WS requires https base URL.'; return; }
-            out.textContent = 'Connecting WS...';
-            try {
-                CHAT_WS = new WebSocket(url);
-                CHAT_WS.onopen = () => { out.textContent = 'WS connected.'; };
-                CHAT_WS.onmessage = (evt) => {
-                    try {
-                        const data = JSON.parse(evt.data);
-                        appendChatMessage('bot', data.reply || JSON.stringify(data), data.summary || null);
-                    } catch (e) { console.error("Error processing WebSocket message:", e); }
-                };
-                CHAT_WS.onerror = () => { out.textContent = 'WS error'; };
-                CHAT_WS.onclose = () => { out.textContent = 'WS disconnected.'; };
-            } catch (e) {
-                out.textContent = 'WS connect failed';
-            }
-        }
+            },
 
-        function disconnectChatWs() {
-            if (CHAT_WS) {
-                try { CHAT_WS.close(); } catch {}
-                CHAT_WS = null;
-            }
-        }
-
-        function sendChatWs() {
-            const input = document.getElementById('chat-input');
-            const out = document.getElementById('chat-output');
-            const text = input.value.trim();
-            if (!text) return;
-            if (!CHAT_WS || CHAT_WS.readyState !== 1) { out.textContent = 'WS not connected'; return; }
-            appendChatMessage('you', text);
-            CHAT_WS.send(JSON.stringify({ text, summarize: true, model: 't5-small' }));
-        }
-
-        // Voice Recording
-        async function toggleRecording() {
-            if (!isRecording) {
-                startRecording();
-            } else {
-                stopRecording();
-            }
-        }
-
-        async function startRecording() {
-            try {
-                const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-                mediaRecorder = new MediaRecorder(stream);
-                audioChunks = [];
-
-                mediaRecorder.ondataavailable = (event) => {
-                    audioChunks.push(event.data);
-                };
-
-                mediaRecorder.onstop = async () => {
-                    const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
-                    await processAudio(audioBlob);
-                };
-
-                mediaRecorder.start();
-                isRecording = true;
-
-                document.getElementById('record-btn').classList.add('recording');
-                document.getElementById('record-icon').className = 'fas fa-stop';
-                document.getElementById('recording-status').textContent = 'Recording... Click to stop';
-            } catch (error) {
-                console.error('Error accessing microphone:', error);
-                alert('Error accessing microphone. Please check permissions.');
-            }
-        }
+            // Update progress steps
+            updateProgressStep(stepNumber, state) {
+                // Update both horizontal and vertical progress indicators
+                const stepElement = document.getElementById(`step${stepNumber}`);
+                const stepIcon = document.getElementById(`step${stepNumber}-icon`);
 
-        function stopRecording() {
-            if (mediaRecorder && isRecording) {
-                mediaRecorder.stop();
-                mediaRecorder.stream.getTracks().forEach(track => track.stop());
+                if (stepElement && stepIcon) {
+                    // Remove existing state classes
+                    stepElement.classList.remove('active', 'completed', 'error');
+                    stepIcon.classList.remove('pending', 'active', 'completed', 'error');
 
-                isRecording = false;
-                document.getElementById('record-btn').classList.remove('recording');
-                document.getElementById('record-icon').className = 'fas fa-microphone';
-                document.getElementById('recording-status').textContent = 'Processing audio...';
-            }
-        }
-
-        async function processAudio(audioBlob) {
-            showLoading('voice');
-
-            try {
-                const formData = new FormData();
-                formData.append('audio_file', audioBlob, 'recording.wav');
-
-                // Use AbortController for proper timeout handling
-                const controller = new AbortController();
-                const timeoutId = setTimeout(() => controller.abort(), 30000); // 30 second timeout
-
-                let response;
-                try {
-                    response = await fetch(`${API_BASE_URL}/transcribe/voice`, {
-                        method: 'POST',
-                        body: formData,
-                        signal: controller.signal
-                    });
-                } catch (error) {
-                    if (error.name === 'AbortError') {
-                        throw new Error('Voice transcription request timed out after 30 seconds');
-                    }
-                    throw error;
-                } finally {
-                    clearTimeout(timeoutId);
+                    // Add new state
+                    stepElement.classList.add(state);
+                    stepIcon.classList.add(state);
                 }
+            },
 
-                if (!response.ok) {
-                    const errorText = await response.text();
-                    let errorMessage = 'Failed to transcribe audio';
-                    try {
-                        const errorData = JSON.parse(errorText);
-                        errorMessage = errorData.detail || errorData.message || errorMessage;
-                    } catch (e) {
-                        // If response isn't JSON, use default message
-                    }
-                    throw new Error(errorMessage);
+            // Reset progress steps to initial state
+            resetProgressSteps() {
+                for (let i = 1; i <= 4; i++) {
+                    this.updateProgressStep(i, 'pending');
                 }
+            },
+
+            // Toggle debug section visibility
+            toggleDebugSection(show = null) {
+                const debugSection = document.getElementById('debugTestSection');
+                const toggleBtn = document.getElementById('debugToggleBtn');
+
+                if (debugSection) {
+                    let isVisible;
 
-                const data = await response.json();
-                const transcription = data.transcription || data.text || 'No transcription available.';
-
-                document.getElementById('transcription-result').innerHTML = '';
-                const transcriptionTitle = document.createElement('p');
-                transcriptionTitle.className = 'fw-bold';
-                transcriptionTitle.textContent = 'Transcription:';
-
-                const transcriptionText = document.createElement('p');
-                transcriptionText.textContent = transcription;
-
-                document.getElementById('transcription-result').appendChild(transcriptionTitle);
-                document.getElementById('transcription-result').appendChild(transcriptionText);
-
-                // If transcription is successful, analyze emotions from the transcribed text
-                if (transcription && transcription !== 'No transcription available.') {
-                    try {
-                        const emotionController = new AbortController();
-                        const emotionTimeout = setTimeout(() => emotionController.abort(), 15000); // 15 seconds
-
-                        let emotionResponse;
-                        try {
-                            emotionResponse = await fetch(`${API_BASE_URL}/analyze/journal`, {
-                                method: 'POST',
-                                headers: { 'Content-Type': 'application/json' },
-                                body: JSON.stringify({ text: transcription, generate_summary: false }),
-                                signal: emotionController.signal
-                            });
-                        } catch (error) {
-                            if (error.name === 'AbortError') {
-                                console.error('Emotion analysis request timed out.');
-                                // Show a message to the user about the timeout
-                                const voiceEmotionContainer = document.getElementById('voice-emotion-results');
-                                voiceEmotionContainer.innerHTML = '<h6 class="fw-bold">Emotions in Speech:</h6><p class="text-muted">Emotion analysis timed out</p>';
-                                return;
-                            } else {
-                                throw error;
-                            }
-                        } finally {
-                            clearTimeout(emotionTimeout);
+                    if (show === null) {
+                        // Toggle current state
+                        isVisible = !debugSection.classList.contains('d-none');
+                        if (isVisible) {
+                            debugSection.classList.add('d-none');
+                        } else {
+                            debugSection.classList.remove('d-none');
                         }
+                        isVisible = !isVisible;
+                    } else if (show) {
+                        debugSection.classList.remove('d-none');
+                        isVisible = true;
+                    } else {
+                        debugSection.classList.add('d-none');
+                        isVisible = false;
+                    }
 
-                        if (emotionResponse.ok) {
-                            const emotionData = await emotionResponse.json();
-                            const emotions = _emotionsDictToArray(
-                                emotionData?.emotion_analysis?.emotions || {}
-                            );
+                    // Update toggle button text
+                    if (toggleBtn) {
+                        const icon = toggleBtn.querySelector('.material-icons');
+                        const textNode = toggleBtn.lastChild;
 
-                            const voiceEmotionContainer = document.getElementById('voice-emotion-results');
-                            voiceEmotionContainer.innerHTML = '<h6 class="fw-bold">Emotions in Speech:</h6>';
-                            displayEmotionResults(emotions, voiceEmotionContainer);
+                        if (isVisible) {
+                            textNode.textContent = ' Hide Debug';
+                            icon.textContent = 'bug_report';
+                            toggleBtn.classList.remove('btn-outline-secondary');
+                            toggleBtn.classList.add('btn-warning');
                         } else {
-                            // Fallback with simulated emotions if emotion analysis fails
-                            const voiceEmotionContainer = document.getElementById('voice-emotion-results');
-                            voiceEmotionContainer.innerHTML = '<h6 class="fw-bold">Emotions in Speech:</h6><p class="text-muted">Emotion analysis unavailable</p>';
+                            textNode.textContent = ' Show Debug';
+                            icon.textContent = 'bug_report';
+                            toggleBtn.classList.remove('btn-warning');
+                            toggleBtn.classList.add('btn-outline-secondary');
                         }
-                    } catch (emotionError) {
-                        console.warn('Emotion analysis failed for transcribed text:', emotionError);
-                        const voiceEmotionContainer = document.getElementById('voice-emotion-results');
-                        voiceEmotionContainer.innerHTML = '<h6 class="fw-bold">Emotions in Speech:</h6><p class="text-muted">Emotion analysis unavailable</p>';
                     }
                 }
-
-            } catch (error) {
-                console.error('Error processing audio:', error);
-                const resultContainer = document.getElementById('transcription-result');
-                resultContainer.innerHTML = '';
-
-                const errorDiv = document.createElement('div');
-                errorDiv.className = 'alert alert-danger';
-                errorDiv.textContent = `Error: ${error.message}`;
-                resultContainer.appendChild(errorDiv);
-
-                // Clear emotion results on error
-                const voiceEmotionContainer = document.getElementById('voice-emotion-results');
-                voiceEmotionContainer.innerHTML = '<h6 class="fw-bold">Emotions in Speech:</h6><p class="text-muted">Processing failed</p>';
-            } finally {
-                hideLoading('voice');
-                document.getElementById('recording-status').textContent = 'Click to start recording';
             }
-        }
-
-        // Batch Processing
-        async function processBatch() {
-            const texts = document.getElementById('batch-texts').value
-                .split('\n')
-                .map(text => text.trim())
-                .filter(text => text.length > 0);
-
-            if (texts.length === 0) {
-                alert('Please enter some texts to process');
-                return;
-            }
-
-            showLoading('batch');
+        };
 
-            try {
-                const response = await fetch(`${API_BASE_URL}/predict_batch`, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ texts })
+        // Enhanced processing function with state management
+        window.processTextWithStateManagement = function() {
+            console.log('🚀 Processing with enhanced state management...');
+
+            // Transition to processing state
+            LayoutManager.showProcessingState();
+
+            // Update progress steps
+            LayoutManager.updateProgressStep(1, 'active');
+
+            // Call the original processing function
+            if (typeof processText === 'function') {
+                // Set up a promise to handle the transition to results
+                const originalFunc = processText;
+                processText().then(() => {
+                    // After processing completes, show results state
+                    setTimeout(() => {
+                        LayoutManager.showResultsState();
+                        LayoutManager.updateProgressStep(4, 'completed');
+                    }, 1000);
+                }).catch((error) => {
+                    console.error('Processing error:', error);
+                    LayoutManager.resetToInitialState();
                 });
-
-                const results = await response.json();
-                displayBatchResults(texts, results);
-            } catch (error) {
-                console.error('Error:', error);
-                document.getElementById('batch-results').innerHTML =
-                    '<div class="alert alert-danger">Error processing batch. Please try again.</div>';
-            } finally {
-                hideLoading('batch');
             }
-        }
-
-        function displayBatchResults(texts, results) {
-            const container = document.getElementById('batch-results');
-            container.innerHTML = ''; // Clear previous results
-
-            const title = document.createElement('h5');
-            title.className = 'fw-bold mb-3';
-            title.textContent = 'Batch Processing Results:';
-            container.appendChild(title);
-
-            texts.forEach((text, index) => {
-                const result = results[index] || [];
-
-                const itemDiv = document.createElement('div');
-                itemDiv.className = 'batch-item';
-
-                const textTitle = document.createElement('p');
-                textTitle.className = 'fw-bold mb-2';
-                textTitle.textContent = `Text ${index + 1}:`;
-                itemDiv.appendChild(textTitle);
-
-                const textContent = document.createElement('p');
-                textContent.className = 'text-muted mb-2';
-                textContent.textContent = `"${text}"`; // textContent automatically escapes HTML
-                itemDiv.appendChild(textContent);
-
-                const badgesDiv = document.createElement('div');
-                badgesDiv.className = 'd-flex flex-wrap gap-2';
-
-                // Create badges safely
-                result.forEach(emotion => {
-                    const badge = document.createElement('span');
-                    badge.className = `badge bg-${getEmotionColor(emotion.emotion)}`;
-                    badge.textContent = `${emotion.emotion} (${(emotion.confidence * 100).toFixed(1)}%)`;
-                    badgesDiv.appendChild(badge);
-                });
-
-                itemDiv.appendChild(badgesDiv);
-                container.appendChild(itemDiv);
-            });
-        }
-
-        // Text Summarization
-        async function generateSummary() {
-            const text = document.getElementById('summary-text').value.trim();
-            if (!text) {
-                alert('Please enter some text to summarize');
-                return;
-            }
-
-            showLoading('summary');
-
-            try {
-                // Call the actual summarization API with proper timeout
-                const controller = new AbortController();
-                const timeoutId = setTimeout(() => controller.abort(), 30000); // 30 second timeout
-
-                let response;
-                try {
-                    response = await fetch(`${API_BASE_URL}/analyze/journal`, {
-                        method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify({
-                            text: text,
-                            generate_summary: true,
-                            summary_model: 't5-small'
-                        }),
-                        signal: controller.signal
-                    });
-                    clearTimeout(timeoutId);
-                } catch (error) {
-                    clearTimeout(timeoutId);
-                    if (error.name === 'AbortError') {
-                        throw new Error('Summary request timed out. Please try with shorter text or try again later.');
-                    }
-                    throw error;
-                }
-
-                if (!response.ok) {
-                    const errorText = await response.text();
-                    let errorMessage = 'Failed to generate summary';
-                    try {
-                        const errorData = JSON.parse(errorText);
-                        errorMessage = errorData.detail || errorData.message || errorMessage;
-                    } catch (e) {
-                        // If response isn't JSON, use default message
-                    }
-                    throw new Error(errorMessage);
-                }
-
-                const data = await response.json();
-                const summary = data.summary || data.text_summary || 'No summary available.';
-
-                const summaryContainer = document.getElementById('summary-result');
-                summaryContainer.innerHTML = ''; // Clear previous results
-
-                const summaryTitle = document.createElement('p');
-                summaryTitle.className = 'fw-bold';
-                summaryTitle.textContent = 'Summary:';
-                summaryContainer.appendChild(summaryTitle);
-
-                const summaryText = document.createElement('p');
-                summaryText.textContent = summary; // textContent automatically escapes HTML
-                summaryContainer.appendChild(summaryText);
-
-                // Add emotional context if available
-                if (data.emotion_analysis && data.emotion_analysis.emotions) {
-                    const emotionDiv = document.createElement('div');
-                    emotionDiv.className = 'mt-3 p-3 rounded emotional-context-card';
-
-                    const emotionTitle = document.createElement('h6');
-                    emotionTitle.className = 'fw-bold mb-2';
-                    emotionTitle.textContent = 'Emotional Tone:';
-                    emotionDiv.appendChild(emotionTitle);
+        };
 
-                    const emotions = _emotionsDictToArray(data.emotion_analysis.emotions);
-                    emotions.slice(0, 3).forEach(emotion => {
-                        const badge = document.createElement('span');
-                        badge.className = 'badge me-2 mb-1';
-                        badge.textContent = `${emotion.emotion} (${(emotion.confidence * 100).toFixed(1)}%)`;
-                        emotionDiv.appendChild(badge);
-                    });
+        // Enhanced clear function with state management
+        window.clearAllWithStateManagement = function() {
+            console.log('🧹 Clearing with enhanced state management...');
 
-                    summaryContainer.appendChild(emotionDiv);
-                }
+            // Reset to initial state
+            LayoutManager.resetToInitialState();
 
-                const infoDiv = document.createElement('div');
-                infoDiv.className = 'mt-3';
-
-                const infoText = document.createElement('small');
-                infoText.className = 'text-muted';
-
-                const icon = document.createElement('i');
-                icon.className = 'fas fa-info-circle me-1';
-                infoText.appendChild(icon);
-
-                const originalWords = text.split(' ').length;
-                const summaryWords = summary.split(' ').length;
-                const compressionRatio = Math.max(0, ((originalWords - summaryWords) / originalWords * 100)).toFixed(1);
-
-                const infoContent = document.createTextNode(
-                    `Original: ${originalWords} words | Summary: ${summaryWords} words | Compression: ${compressionRatio}%`
-                );
-                infoText.appendChild(infoContent);
-                infoDiv.appendChild(infoText);
-                summaryContainer.appendChild(infoDiv);
-
-            } catch (error) {
-                console.error('Error:', error);
-                const summaryContainer = document.getElementById('summary-result');
-                summaryContainer.innerHTML = '';
-
-                const errorDiv = document.createElement('div');
-                errorDiv.className = 'alert alert-danger';
-                errorDiv.textContent = `Error: ${error.message}`;
-                summaryContainer.appendChild(errorDiv);
-            } finally {
-                hideLoading('summary');
+            // Call original clear function
+            if (typeof clearAll === 'function') {
+                clearAll();
             }
-        }
-
-        // Monitoring
-        function refreshMetrics() {
-            // Simulate refreshing metrics
-            document.getElementById('uptime-metric').textContent = '99.9%';
-            document.getElementById('response-time-metric').textContent = '43ms';
-            document.getElementById('requests-metric').textContent = Math.floor(Math.random() * 2000 + 1000);
-            document.getElementById('accuracy-metric').textContent = '90.7%';
-
-            // Update performance chart
-            updatePerformanceChart();
-        }
-
-        function updatePerformanceChart() {
-            const chartCanvas = document.getElementById('performanceChart');
-            if (!chartCanvas) {
-                console.warn('Performance chart canvas not found');
-                const chartContainer = document.querySelector('.col-md-6') || document.body;
-                const errorDiv = document.createElement('div');
-                errorDiv.className = 'alert alert-warning';
-                errorDiv.innerHTML = '<i class="fas fa-exclamation-triangle me-2"></i>Performance chart unavailable.';
-                chartContainer.appendChild(errorDiv);
-                return;
-            }
-
-            const ctx = chartCanvas.getContext('2d');
+        };
 
-            // Safely destroy existing chart instance using ChartManager
-            ChartManager.destroy('performanceChart');
+        // Make LayoutManager globally available
+        window.LayoutManager = LayoutManager;
+    </script>
 
-            // Generate realistic performance data
-            const now = new Date();
-            const timeLabels = [];
-            const responseData = [];
+    <!-- Debug Script -->
+    <script>
+        // Debug: Check if everything is loaded correctly
+        document.addEventListener('DOMContentLoaded', function() {
+            console.log('🚀 Main demo loaded');
+            console.log('processText available:', typeof processText === 'function');
+            console.log('textInput element found:', !!document.getElementById('textInput'));
+            console.log('processBtn element found:', !!document.getElementById('processBtn'));
+
+            // Test if the button click works
+            const processBtn = document.getElementById('processBtn');
+            if (processBtn) {
+                console.log('✅ Process button found, adding click listener');
+                processBtn.addEventListener('click', function() {
+                    console.log('🔘 Process button clicked!');
+                    // Use enhanced state management processing
+                    if (typeof processTextWithStateManagement === 'function') {
+                        processTextWithStateManagement();
+                    } else if (typeof processText === 'function') {
+                        // Fallback to original function
+                        LayoutManager.showProcessingState();
+                        processText();
+                    } else {
+                        console.error('❌ processText function not available');
+                    }
+                });
+            } else {
+                console.error('❌ Process button not found');
+            }
 
-            for (let i = 4; i >= 0; i--) {
-                const timestamp = new Date(now - i * 15000); // 15 seconds intervals
-                timeLabels.push(i === 0 ? 'Now' : `${i * 15}s ago`);
-                responseData.push(35 + Math.random() * 20); // Random response times between 35-55ms
+            // Add click listener for Generate button
+            const generateBtn = document.getElementById('generateBtn');
+            if (generateBtn) {
+                console.log('✅ Generate button found, adding click listener');
+                generateBtn.addEventListener('click', function() {
+                    console.log('🔘 Generate button clicked!');
+                    console.log('🔍 generateSampleText type:', typeof generateSampleText);
+                    console.log('🔍 generateSampleText function:', generateSampleText);
+
+                    if (typeof generateSampleText === 'function') {
+                        console.log('✅ Calling generateSampleText...');
+                        generateSampleText();
+                    } else {
+                        console.error('❌ generateSampleText function not available');
+                        console.log('🔍 Available functions:', Object.keys(window).filter(key => key.includes('generate')));
+                    }
+                });
+            } else {
+                console.error('❌ Generate button not found');
             }
 
-            try {
-                const performanceChart = new Chart(ctx, {
-                    type: 'line',
-                    data: {
-                        labels: timeLabels,
-                        datasets: [{
-                            label: 'Response Time (ms)',
-                            data: responseData,
-                            borderColor: 'rgba(139, 92, 246, 1)',
-                            backgroundColor: 'rgba(139, 92, 246, 0.1)',
-                            borderWidth: 3,
-                            tension: 0.4,
-                            fill: true,
-                            pointBackgroundColor: 'rgba(139, 92, 246, 1)',
-                            pointBorderColor: 'rgba(255, 255, 255, 1)',
-                            pointBorderWidth: 2,
-                            pointRadius: 6
-                        }]
-                    },
-                    options: {
-                        responsive: true,
-                        maintainAspectRatio: false,
-                        interaction: {
-                            intersect: false,
-                            mode: 'index'
-                        },
-                        plugins: {
-                            legend: {
-                                display: false
-                            },
-                            tooltip: {
-                                backgroundColor: 'rgba(15, 15, 35, 0.9)',
-                                titleColor: '#e2e8f0',
-                                bodyColor: '#e2e8f0',
-                                borderColor: 'rgba(139, 92, 246, 0.5)',
-                                borderWidth: 1
-                            }
-                        },
-                        scales: {
-                            x: {
-                                grid: {
-                                    color: 'rgba(139, 92, 246, 0.1)',
-                                    borderColor: 'rgba(139, 92, 246, 0.2)'
-                                },
-                                ticks: {
-                                    color: '#cbd5e1'
-                                }
-                            },
-                            y: {
-                                beginAtZero: true,
-                                grid: {
-                                    color: 'rgba(139, 92, 246, 0.1)',
-                                    borderColor: 'rgba(139, 92, 246, 0.2)'
-                                },
-                                ticks: {
-                                    color: '#cbd5e1',
-                                    callback: function(value) {
-                                        return value + 'ms';
-                                    }
-                                }
-                            }
-                        }
+            // Add click listener for API Key button
+            const apiKeyBtn = document.getElementById('apiKeyBtn');
+            if (apiKeyBtn) {
+                console.log('✅ API Key button found, adding click listener');
+                apiKeyBtn.addEventListener('click', function() {
+                    console.log('🔘 API Key button clicked!');
+                    if (typeof manageApiKey === 'function') {
+                        manageApiKey();
+                    } else {
+                        console.error('❌ manageApiKey function not available');
                     }
                 });
 
-                // Register chart with ChartManager for proper lifecycle management
-                ChartManager.set('performanceChart', performanceChart);
-            } catch (error) {
-                console.error('Error creating performance chart:', error);
-                // Fallback: show text-based metrics if chart fails
-                const chartContainer = chartCanvas.parentElement;
-                if (chartContainer) {
-                    chartContainer.innerHTML = '<div class="alert alert-info">Chart visualization temporarily unavailable</div>';
+                // Update button status on page load
+                if (typeof updateApiKeyButtonStatus === 'function') {
+                    updateApiKeyButtonStatus();
                 }
+            } else {
+                console.error('❌ API Key button not found');
             }
-        }
-
-        // Security Testing
-        async function testRateLimit() {
-            const container = document.getElementById('rate-limit-result');
-            container.innerHTML = '<div class="spinner-border spinner-border-sm" role="status"></div> Testing...';
-
-            try {
-                const promises = Array(10).fill().map(() =>
-                    fetch(`${API_BASE_URL}/predict`, {
-                        method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify({ text: 'test' })
-                    })
-                );
-
-                const responses = await Promise.all(promises);
-                const successCount = responses.filter(r => r.ok).length;
-                const rateLimitedCount = responses.filter(r => r.status === 429).length;
-
-                container.innerHTML = `
-                    <div class="alert alert-info">
-                        <strong>Rate Limit Test Results:</strong><br>
-                        Successful requests: ${successCount}<br>
-                        Rate limited requests: ${rateLimitedCount}<br>
-                        Rate limiting is working correctly!
-                    </div>
-                `;
-            } catch (error) {
-                container.innerHTML = '<div class="alert alert-warning">Rate limit test completed (simulated).</div>';
+
+            // Add click listener for Clear button
+            const clearBtn = document.getElementById('clearBtn');
+            if (clearBtn) {
+                console.log('✅ Clear button found, adding click listener');
+                clearBtn.addEventListener('click', function() {
+                    console.log('🔘 Clear button clicked!');
+                    // Use enhanced state management clearing
+                    if (typeof clearAllWithStateManagement === 'function') {
+                        clearAllWithStateManagement();
+                    } else if (typeof clearAll === 'function') {
+                        // Fallback to original function
+                        LayoutManager.resetToInitialState();
+                        clearAll();
+                    } else {
+                        console.error('❌ clearAll function not available');
+                    }
+                });
+            } else {
+                console.error('❌ Clear button not found');
             }
-        }
 
-        // Utility functions
-        function showLoading(feature) {
-            document.getElementById(feature + '-loading').style.display = 'block';
-        }
+            // Initialize debug section (hidden by default, can be shown by adding ?showDebug=1 to URL)
+            const urlParams = new URLSearchParams(window.location.search);
+            if (urlParams.get('showDebug') === '1') {
+                LayoutManager.toggleDebugSection(true);
+            }
 
-        function hideLoading(feature) {
-            document.getElementById(feature + '-loading').style.display = 'none';
-        }
+            // Initialize layout to initial state
+            LayoutManager.resetToInitialState();
 
-        // Initialize
-        document.addEventListener('DOMContentLoaded', function() {
-            updatePerformanceChart();
-            refreshMetrics();
+            console.log('✅ Enhanced layout manager initialized');
         });
     </script>
 
-    <!-- Simple Chat UI -->
-    <section class="py-5 bg-light">
-        <div class="container">
-            <div class="row justify-content-center">
-                <div class="col-lg-8">
-                    <div class="card border-0 shadow-sm">
-                        <div class="card-body">
-                            <h5 class="fw-bold mb-3">Chat Demo</h5>
-                            <div class="d-flex align-items-center gap-2 mb-3">
-                                <span id="chat-auth-status" class="badge bg-warning text-dark">AUTH REQ</span>
-                                <input id="chat-username" class="form-control form-control-sm" placeholder="email" style="max-width:220px" />
-                                <input id="chat-password" class="form-control form-control-sm" placeholder="password" type="password" style="max-width:180px" />
-                                <button class="btn btn-sm btn-outline-primary" onclick="chatLogin()">Login</button>
-                                <button class="btn btn-sm btn-outline-success" onclick="connectChatWs()">Connect WS</button>
-                                <button class="btn btn-sm btn-outline-secondary" onclick="disconnectChatWs()">Disconnect</button>
-                            </div>
-                            <div id="chat-messages" class="mb-3" style="height:220px; overflow:auto; background:#0b1324; color:#e2e8f0; border-radius:8px; padding:10px;"></div>
-                            <div class="input-group mb-3">
-                                <input id="chat-input" class="form-control" placeholder="Type a message..." />
-                                <button class="btn btn-primary" onclick="sendChatHttp()">Send HTTP</button>
-                                <button class="btn btn-outline-primary" onclick="sendChatWs()">Send WS</button>
-                            </div>
-                            <pre id="chat-output" class="code-block" style="min-height:80px"></pre>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
+    <!-- Main comprehensive demo script -->
+    <script src="js/comprehensive-demo.js"></script>
+
+    <!-- Legacy Scripts (commented out for now) -->
+    <!-- <script src="js/api-client.js"></script> -->
+    <!-- <script src="js/ui-controller.js"></script> -->
+    <!-- <script src="js/chart-utils.js"></script> -->
+    <!-- <script src="js/comprehensive-demo-new.js"></script> -->
+    <!-- <script src="test-functionality.js"></script> -->
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/website/css/comprehensive-demo.css b/website/css/comprehensive-demo.css
index 1affe8f58..5799ae0d7 100644
--- a/website/css/comprehensive-demo.css
+++ b/website/css/comprehensive-demo.css
@@ -1,4 +1,10 @@
-/* Comprehensive Demo Styles - Extracted from HTML for better maintainability */
+/* Comprehensive Demo Styles - Extracted from HTML for better maintainability
+ *
+ * NOTE: This stylesheet uses !important declarations extensively to override
+ * Bootstrap's default styles. While !important is generally an anti-pattern,
+ * it's necessary here due to Bootstrap's high specificity. Future refactoring
+ * should consider using CSS-in-JS or scoped CSS modules to avoid this issue.
+ */
 
 /* CSS Variables */
 :root {
@@ -42,25 +48,14 @@
     vertical-align: middle;
 }
 
-/* Info icon styling */
-.comprehensive-demo .info-icon {
+/* Text input styling */
+#textInput {
+    min-height: 240px !important;
     font-size: 16px;
-    color: #6b7280;
-    margin-left: 6px;
-    cursor: help;
-    opacity: 0.7;
-    transition: var(--transition-smooth);
-    vertical-align: middle;
-}
-
-.info-icon:hover {
-    color: var(--primary-color);
-    opacity: 1;
-    transform: scale(1.1);
+    line-height: 1.5;
+    resize: vertical;
 }
 
-/* Text input styling - consolidated below */
-
 /* Base Styles */
 body.comprehensive-demo {
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
@@ -72,120 +67,19 @@ body.comprehensive-demo {
     padding-top: 80px; /* Account for fixed navbar */
 }
 
-/* Mobile Responsive Design - Consolidated */
-@media (max-width: 768px) {
-    body.comprehensive-demo {
-        background-attachment: scroll;
-    }
-
-    .progress-pipeline {
-        flex-direction: column;
-        gap: 1.5rem;
-        padding: 2rem 1rem;
-    }
-
-    .pipeline-arrow {
-        transform: rotate(90deg);
-        font-size: 1.5rem;
-    }
-
-    .progress-step-horizontal {
-        min-width: 100px;
-    }
-
-    .progress-step-horizontal .step-label {
-        font-size: 0.8rem;
-    }
-
-    .demo-container {
-        padding: 30px 20px;
-        margin: -50px 15px 30px 15px;
-    }
-
-    .hero-section {
-        padding: 80px 0;
-    }
-
-    /* Stack title and flow vertically on mobile */
-    #titleWithFlow .d-flex {
-        flex-direction: column;
-        gap: 0.75rem;
-        text-align: center;
-    }
-
-    .progress-pipeline-horizontal {
-        gap: 0.25rem;
-        padding: 0.4rem 0.6rem;
-        justify-content: center;
-    }
-
-    .progress-step-horizontal {
-        min-width: 40px;
-    }
-
-    .progress-step-horizontal .step-icon-small {
-        width: 16px !important;
-        height: 16px !important;
-        font-size: 0.6rem !important;
-    }
-
-    .progress-step-horizontal .step-label {
-        font-size: 0.5rem;
-    }
-
-    .pipeline-arrow {
-        font-size: 0.7rem;
-    }
-
-    /* Stack buttons vertically on mobile */
-    .d-flex.gap-3.justify-content-center {
-        flex-direction: column;
-        align-items: center;
-        gap: 0.75rem !important;
-    }
-
-    .btn-lg {
-        min-width: 200px;
-        width: 100%;
-        max-width: 300px;
-    }
-
-    /* Full width input on mobile */
-    #textInput {
-        min-height: 180px !important;
-        padding: 1rem;
-    }
-
-    /* Compact processing info on mobile */
-    #processingInfoSidebar .bg-dark {
-        padding: 0.5rem !important;
-    }
-
-    #processingInfoSidebar .feature-card {
-        padding: 1rem;
-    }
-
-    /* Results layout adjustments */
-    #resultsLayout .col-lg-8,
-    #resultsLayout .col-lg-4 {
-        flex: 0 0 100%;
-        max-width: 100%;
-    }
-}
-
 /* Result sections */
 .result-section-hidden {
     display: none !important;
 }
 
-.comprehensive-demo .result-section-visible {
-    display: block;
+.result-section-visible {
+    display: block !important;
     animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 /* Ensure all text is visible - scoped to comprehensive demo */
 .comprehensive-demo .text-muted {
-    color: #cbd5e1;
+    color: #cbd5e1 !important;
 }
 
 /* Scoped to demo container only */
@@ -194,16 +88,16 @@ body.comprehensive-demo {
 }
 
 /* Feature card text improvements */
-.comprehensive-demo .feature-card .text-muted {
-    color: #cbd5e1;
+.feature-card .text-muted {
+    color: #cbd5e1 !important;
 }
 
-.comprehensive-demo .feature-card h5, .comprehensive-demo .feature-card h6 {
-    color: #f1f5f9;
+.feature-card h5, .feature-card h6 {
+    color: #f1f5f9 !important;
 }
 
-.comprehensive-demo .feature-card small {
-    color: #cbd5e1;
+.feature-card small {
+    color: #cbd5e1 !important;
 }
 
 /* Scoped form controls to demo container */
@@ -221,7 +115,7 @@ body.comprehensive-demo {
 }
 
 .comprehensive-demo .form-control::placeholder {
-    color: #94a3b8;
+    color: #94a3b8 !important;
 }
 
 /* Hero Section */
@@ -244,9 +138,45 @@ body.comprehensive-demo {
     z-index: 2;
 }
 
-/* Demo Container - Consolidated */
+/* Demo Container - Full Width Professional Design */
+.demo-container {
+    background: var(--glass-bg);
+    backdrop-filter: blur(20px);
+    border: 1px solid var(--glass-border);
+    border-radius: 20px;
+    box-shadow: var(--shadow-glass);
+    padding: 3rem;
+    margin: 2rem 0;
+    width: 100%;
+    position: relative;
+    z-index: 1;
+    color: #e2e8f0;
+}
 
-/* Feature Cards - Consolidated */
+/* Feature Cards */
+.feature-card {
+    background: var(--glass-bg);
+    backdrop-filter: blur(15px);
+    border: 1px solid var(--glass-border);
+    border-radius: 20px;
+    box-shadow: var(--shadow-glass);
+    transition: var(--transition-bounce);
+    color: #e2e8f0;
+    height: 100%;
+}
+
+.feature-card:hover {
+    transform: translateY(-5px) scale(1.02);
+    box-shadow: var(--shadow-glow);
+}
+
+.feature-card.active {
+    background: var(--primary-gradient);
+    border-color: var(--accent-color);
+    color: white;
+    transform: translateY(-5px) scale(1.05);
+    box-shadow: var(--shadow-glow);
+}
 
 /* Navigation */
 .comprehensive-demo .navbar {
@@ -310,12 +240,12 @@ body.comprehensive-demo {
 }
 
 /* Processing Information Icons */
-.comprehensive-demo .processing-info i {
-    font-size: 1.5rem;
+.processing-info i {
+    font-size: 1.5rem !important;
     margin-bottom: 8px;
 }
 
-.comprehensive-demo .result-section.show {
+.result-section.show {
     display: block;
     animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -402,7 +332,17 @@ body.comprehensive-demo {
     100% { height: 40px; }
 }
 
-/* Reduced motion rules consolidated above */
+/* Reduce motion for users who prefer it */
+@media (prefers-reduced-motion: reduce) {
+    .step.active .step-circle,
+    .spinner {
+        animation: none !important;
+    }
+    .btn:hover {
+        transform: none !important;
+        box-shadow: none !important;
+    }
+}
 
 /* Progress Steps */
 .progress-step {
@@ -440,19 +380,19 @@ body.comprehensive-demo {
     width: 100%; /* Full width for better appearance */
 }
 
-.comprehensive-demo .progress-step-vertical .step-icon-small {
-    width: 24px; /* Increased from 18px */
-    height: 24px; /* Increased from 18px */
+.progress-step-vertical .step-icon-small {
+    width: 24px !important; /* Increased from 18px */
+    height: 24px !important; /* Increased from 18px */
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-right: 16px; /* Increased margin */
     margin-bottom: 0;
-    font-size: 0.8rem; /* Increased from 0.6rem */
+    font-size: 0.8rem !important; /* Increased from 0.6rem */
     transition: var(--transition-smooth);
-    background: rgba(255, 255, 255, 0.1);
-    color: #e2e8f0;
+    background: rgba(255, 255, 255, 0.1) !important;
+    color: #e2e8f0 !important;
     border: 1px solid rgba(255, 255, 255, 0.2);
     flex-shrink: 0;
 }
@@ -466,20 +406,20 @@ body.comprehensive-demo {
     flex: 1; /* Take remaining space */
 }
 
-.comprehensive-demo .progress-step-vertical.active .step-icon-small {
-    background: var(--primary-gradient);
-    color: white;
+.progress-step-vertical.active .step-icon-small {
+    background: var(--primary-gradient) !important;
+    color: white !important;
     box-shadow: var(--shadow-glow);
 }
 
-.comprehensive-demo .progress-step-vertical.completed .step-icon-small {
-    background: var(--success-color);
-    color: white;
+.progress-step-vertical.completed .step-icon-small {
+    background: var(--success-color) !important;
+    color: white !important;
 }
 
-.comprehensive-demo .progress-step-vertical.error .step-icon-small {
-    background: var(--error-color);
-    color: white;
+.progress-step-vertical.error .step-icon-small {
+    background: var(--error-color) !important;
+    color: white !important;
 }
 
 .pipeline-arrow-vertical {
@@ -685,8 +625,8 @@ body.comprehensive-demo {
     transition: all 0.2s ease;
 }
 
-.comprehensive-demo #processingInfoSidebar .bg-dark:hover {
-    background-color: rgba(0, 0, 0, 0.4);
+#processingInfoSidebar .bg-dark:hover {
+    background-color: rgba(0, 0, 0, 0.4) !important;
     transform: translateX(2px);
 }
 
@@ -712,20 +652,20 @@ body.comprehensive-demo {
 }
 
 /* Enhanced Input Area Background */
-.comprehensive-demo #textInput {
-    min-height: 240px;
+#textInput {
+    min-height: 240px !important;
     font-size: 16px;
     line-height: 1.5;
     resize: vertical;
     padding: 1.5rem; /* Increased padding for better appearance */
-    background-color: rgba(255, 255, 255, 0.12); /* More prominent background */
-    border: 2px solid rgba(139, 92, 246, 0.3); /* Thicker border */
+    background-color: rgba(255, 255, 255, 0.12) !important; /* More prominent background */
+    border: 2px solid rgba(139, 92, 246, 0.3) !important; /* Thicker border */
 }
 
-.comprehensive-demo #textInput:focus {
-    background-color: rgba(255, 255, 255, 0.18);
-    border-color: var(--primary-color);
-    box-shadow: 0 0 0 0.3rem rgba(139, 92, 246, 0.25);
+#textInput:focus {
+    background-color: rgba(255, 255, 255, 0.18) !important;
+    border-color: var(--primary-color) !important;
+    box-shadow: 0 0 0 0.3rem rgba(139, 92, 246, 0.25) !important;
     transform: scale(1.01); /* Subtle scale on focus */
 }
 
@@ -738,18 +678,18 @@ body.comprehensive-demo {
     transition: var(--transition-smooth);
 }
 
-.comprehensive-demo .progress-step-horizontal .step-icon-small {
-    width: 18px;
-    height: 18px;
+.progress-step-horizontal .step-icon-small {
+    width: 18px !important;
+    height: 18px !important;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 0.25rem;
-    font-size: 0.7rem;
+    font-size: 0.7rem !important;
     transition: var(--transition-smooth);
-    background: rgba(255, 255, 255, 0.1);
-    color: #cbd5e1;
+    background: rgba(255, 255, 255, 0.1) !important;
+    color: #cbd5e1 !important;
     border: 1px solid rgba(255, 255, 255, 0.15);
     flex-shrink: 0;
 }
@@ -762,23 +702,23 @@ body.comprehensive-demo {
     transition: var(--transition-smooth);
 }
 
-.comprehensive-demo .progress-step-horizontal.active .step-icon-small {
-    background: var(--primary-gradient);
-    color: white;
+.progress-step-horizontal.active .step-icon-small {
+    background: var(--primary-gradient) !important;
+    color: white !important;
     transform: scale(1.1);
 }
 
-.comprehensive-demo .progress-step-horizontal.active .step-label {
+.progress-step-horizontal.active .step-label {
     color: var(--primary-color);
     font-weight: 600;
 }
 
-.comprehensive-demo .progress-step-horizontal.completed .step-icon-small {
-    background: #10b981;
-    color: white;
+.progress-step-horizontal.completed .step-icon-small {
+    background: #10b981 !important;
+    color: white !important;
 }
 
-.comprehensive-demo .progress-step-horizontal.completed .step-label {
+.progress-step-horizontal.completed .step-label {
     color: #10b981;
 }
 
@@ -791,7 +731,27 @@ body.comprehensive-demo {
 }
 
 
-/* Responsive Design for Progress Pipeline - consolidated above */
+/* Responsive Design for Progress Pipeline */
+@media (max-width: 768px) {
+    .progress-pipeline {
+        flex-direction: column;
+        gap: 1.5rem;
+        padding: 2rem 1rem;
+    }
+
+    .pipeline-arrow {
+        transform: rotate(90deg);
+        font-size: 1.5rem;
+    }
+
+    .progress-step-horizontal {
+        min-width: 100px;
+    }
+
+    .step-label {
+        font-size: 0.8rem;
+    }
+}
 
 /* Error Messages */
 .error-message {
@@ -805,7 +765,7 @@ body.comprehensive-demo {
     display: none;
 }
 
-.comprehensive-demo .error-message.show {
+.error-message.show {
     display: block;
     animation: fadeInUp 0.3s ease-out;
 }
@@ -822,7 +782,7 @@ body.comprehensive-demo {
     display: none;
 }
 
-.comprehensive-demo .success-message.show {
+.success-message.show {
     display: block;
     animation: fadeInUp 0.3s ease-out;
 }
@@ -921,8 +881,8 @@ body.comprehensive-demo {
     padding: 15px;
     border: 1px solid rgba(255, 255, 255, 0.1);
     transition: all 0.3s ease;
-    display: block;
-    visibility: visible;
+    display: block !important;
+    visibility: visible !important;
 }
 
 .emotion-bar:hover {
@@ -1128,31 +1088,26 @@ body.comprehensive-demo {
     outline-offset: 2px;
 }
 
-/* Reduced Motion Preferences - Consolidated */
+/* Reduced Motion Preferences */
 @media (prefers-reduced-motion: reduce) {
-    .comprehensive-demo .result-section-visible,
-    .comprehensive-demo .result-section.show,
-    .comprehensive-demo .error-message.show,
-    .comprehensive-demo .success-message.show,
-    .step.active .step-circle,
-    .spinner,
     .hero-section::before,
     .floating-card,
     .audio-bar,
-    .emotion-bar-fill::after,
+    .hero-content,
     .feature-card,
-    .btn,
-    .btn:hover,
+    .comprehensive-demo .navbar,
+    .comprehensive-demo .btn-primary,
+    .loading-spinner,
+    .result-section,
+    .progress-step,
     .progress-step-vertical,
-    .progress-step-horizontal,
-    .process-step,
-    .model-detail-card,
-    .stat-item,
-    .emotion-bar,
-    .summary-bar {
+    .pipeline-arrow-vertical,
+    .step-icon,
+    .audio-visualizer,
+    .emotion-badge,
+    .gradient-text {
         animation: none !important;
         transition: none !important;
-        transform: none !important;
     }
 }
 
@@ -1172,7 +1127,82 @@ body.comprehensive-demo {
     }
 }
 
-/* Mobile responsive rules consolidated above */
+@media (max-width: 768px) {
+    .demo-container {
+        padding: 30px 20px;
+        margin: -50px 15px 30px 15px;
+    }
+
+    .hero-section {
+        padding: 80px 0;
+    }
+
+    /* Stack title and flow vertically on mobile */
+    #titleWithFlow .d-flex {
+        flex-direction: column;
+        gap: 0.75rem;
+        text-align: center;
+    }
+
+    .progress-pipeline-horizontal {
+        gap: 0.25rem;
+        padding: 0.4rem 0.6rem;
+        justify-content: center;
+    }
+
+    .progress-step-horizontal {
+        min-width: 40px;
+    }
+
+    .progress-step-horizontal .step-icon-small {
+        width: 16px !important;
+        height: 16px !important;
+        font-size: 0.6rem !important;
+    }
+
+    .progress-step-horizontal .step-label {
+        font-size: 0.5rem;
+    }
+
+    .pipeline-arrow {
+        font-size: 0.7rem;
+    }
+
+    /* Stack buttons vertically on mobile */
+    .d-flex.gap-3.justify-content-center {
+        flex-direction: column;
+        align-items: center;
+        gap: 0.75rem !important;
+    }
+
+    .btn-lg {
+        min-width: 200px;
+        width: 100%;
+        max-width: 300px;
+    }
+
+    /* Full width input on mobile */
+    #textInput {
+        min-height: 180px !important;
+        padding: 1rem;
+    }
+
+    /* Compact processing info on mobile */
+    #processingInfoSidebar .bg-dark {
+        padding: 0.5rem !important;
+    }
+
+    #processingInfoSidebar .feature-card {
+        padding: 1rem;
+    }
+
+    /* Results layout adjustments */
+    #resultsLayout .col-lg-8,
+    #resultsLayout .col-lg-4 {
+        flex: 0 0 100%;
+        max-width: 100%;
+    }
+}
 
 @media (max-width: 576px) {
     .demo-container {
@@ -1214,4 +1244,4 @@ body.comprehensive-demo {
     #resultsLayout {
         transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     }
-}
\ No newline at end of file
+}
diff --git a/website/js/comprehensive-demo.js b/website/js/comprehensive-demo.js
index e4b2ca765..bca2b6cdf 100644
--- a/website/js/comprehensive-demo.js
+++ b/website/js/comprehensive-demo.js
@@ -18,122 +18,45 @@ class SAMOAPIClient {
             HEALTH: '/health',
             READY: '/ready',
             TRANSCRIBE: '/transcribe',
-            VOICE_JOURNAL: '/analyze/voice-journal'  // Match actual API endpoint
+            VOICE_JOURNAL: '/analyze/voice-journal'
         };
-
-        // Ensure VOICE_JOURNAL has a fallback if missing from config
-        if (!this.endpoints.VOICE_JOURNAL) {
-            this.endpoints.VOICE_JOURNAL = '/analyze/voice-journal';
-        }
-
-        // Optimized timeout configuration for better UX
-        this.timeout = window.SAMO_CONFIG?.API?.TIMEOUT || 15000; // Reduced from 20s to 15s
-        this.coldStartTimeout = window.SAMO_CONFIG?.API?.COLD_START_TIMEOUT || 45000; // Reduced from 60s to 45s
-        this.retryAttempts = window.SAMO_CONFIG?.API?.RETRY_ATTEMPTS || 1; // Reduced to 1 for faster feedback
-        this.isColdStart = true; // Track if this is the first request
-    }
-
-    getApiKey() {
-        // Try to get API key from various sources
-        // 1. From SAMO_CONFIG (server-injected)
-        if (window.SAMO_CONFIG?.API?.API_KEY) {
-            return window.SAMO_CONFIG.API.API_KEY;
-        }
-
-        // 2. From localStorage (user-set)
-        const storedKey = localStorage.getItem('samo_api_key');
-        if (storedKey && storedKey.trim()) {
-            return storedKey.trim();
-        }
-
-        // 3. From environment variable (if available in browser context)
-        if (window.SAMO_CONFIG?.API?.API_KEY_ENV) {
-            return window.SAMO_CONFIG.API.API_KEY_ENV;
-        }
-
-        return null;
+        this.timeout = window.SAMO_CONFIG?.API?.TIMEOUT || 45000;
+        this.retryAttempts = window.SAMO_CONFIG?.API?.RETRY_ATTEMPTS || 3;
     }
 
     async makeRequest(endpoint, data, method = 'POST', isFormData = false, timeoutMs = null) {
         return this.makeRequestWithRetry(endpoint, data, method, isFormData, timeoutMs, this.retryAttempts);
     }
 
-    // Helper method to build query string for deployed API format
-    buildQueryString(data) {
-        if (!data || typeof data !== 'object') return '';
-        const params = new URLSearchParams();
-        for (const [key, value] of Object.entries(data)) {
-            if (value !== null && value !== undefined) {
-                params.append(key, value);
-            }
-        }
-        return params.toString();
-    }
-
-    async makeRequestWithRetry(endpoint, data, method = 'POST', isFormData = false, timeoutMs = null, attemptsLeft = null) {
-        // Use class defaults if not specified
-        if (attemptsLeft === null) attemptsLeft = this.retryAttempts;
-
+    async makeRequestWithRetry(endpoint, data, method = 'POST', isFormData = false, timeoutMs = null, attemptsLeft = 3) {
         const config = {
             method,
-            headers: { 'Accept': 'application/json' }
+            headers: {}
         };
         const controller = new AbortController();
-        let abortReason = null; // Track abort reason
-
-        // Use cold start timeout for first request, regular timeout otherwise
-        const timeout = timeoutMs || (this.isColdStart ? this.coldStartTimeout : this.timeout);
-        const timer = setTimeout(() => {
-            abortReason = 'timeout';
-            controller.abort();
-        }, timeout);
+        const timeout = timeoutMs || this.timeout;
+        const timer = setTimeout(() => controller.abort(new Error('Request timeout')), timeout);
         config.signal = controller.signal;
 
-        // Track this request in LayoutManager if available
-        if (typeof LayoutManager !== 'undefined') {
-            LayoutManager.addActiveRequest(controller);
-        }
-
-        // Add API key for production endpoints if available
-        const apiKey = this.getApiKey();
-        if (apiKey) {
-            config.headers['X-API-Key'] = apiKey;
-        }
+        // Remove API key requirement for now - using public endpoints
+        // if (this.apiKey) {
+        //     config.headers['X-API-Key'] = this.apiKey;
+        // }
 
         if (data && method === 'POST') {
             if (isFormData) {
                 // For FormData, don't set Content-Type header - let browser set it with boundary
                 config.body = data;
             } else {
-                // Send JSON data in request body (proper REST API format)
                 config.headers['Content-Type'] = 'application/json';
                 config.body = JSON.stringify(data);
             }
         } else if (method === 'GET') {
-            // Optional: set Accept if needed
-            config.headers['Accept'] = 'application/json';
+            config.headers['Content-Type'] = 'application/json';
         }
 
         try {
-            let url = `${this.baseURL}${endpoint}`;
-
-            // For GET requests with data, append query parameters
-            if (data && method === 'GET') {
-                const queryParams = this.buildQueryString(data);
-                if (queryParams) {
-                    url += (url.includes('?') ? '&' : '?') + queryParams;
-                }
-            }
-
-            // Log retry attempt info for user feedback
-            const attemptNumber = this.retryAttempts - attemptsLeft + 1;
-            if (attemptNumber > 1) {
-                console.log(`🔄 Retry attempt ${attemptNumber}/${this.retryAttempts} for ${endpoint}`);
-                if (typeof addToProgressConsole === 'function') {
-                    addToProgressConsole(`Retry attempt ${attemptNumber}/${this.retryAttempts} - ${endpoint}`, 'warning');
-                }
-            }
-
+            const url = `${this.baseURL}${endpoint}`;
             const response = await fetch(url, config);
 
             if (!response.ok) {
@@ -145,12 +68,6 @@ class SAMOAPIClient {
                     if (attemptsLeft > 1) {
                         const backoffDelay = Math.pow(2, this.retryAttempts - attemptsLeft) * 1000; // Exponential backoff
                         console.warn(`Request failed (${response.status}), retrying in ${backoffDelay}ms. Attempts left: ${attemptsLeft - 1}`);
-
-                        // Provide user feedback about retry
-                        if (typeof addToProgressConsole === 'function') {
-                            addToProgressConsole(`Request failed (${response.status}), retrying in ${backoffDelay/1000}s...`, 'warning');
-                        }
-
                         await new Promise(resolve => setTimeout(resolve, backoffDelay));
                         return this.makeRequestWithRetry(endpoint, data, method, isFormData, timeoutMs, attemptsLeft - 1);
                     }
@@ -163,44 +80,20 @@ class SAMOAPIClient {
                 throw new Error(msg);
             }
 
-            // Mark cold start as complete after first successful request
-            if (this.isColdStart) {
-                this.isColdStart = false;
-                console.log('✅ Cold start completed, future requests will use faster timeout');
-            }
-
             return await response.json();
         } catch (error) {
             // Handle network errors with retry
-            const msg = String(error?.message || '').toLowerCase();
-            if ((error.name === 'AbortError' || abortReason === 'timeout' || msg.includes('timeout') || msg.includes('network') || msg.includes('failed to fetch')) && attemptsLeft > 1) {
+            if ((error.name === 'AbortError' || error.message.includes('timeout') || error.message.includes('network')) && attemptsLeft > 1) {
                 const backoffDelay = Math.pow(2, this.retryAttempts - attemptsLeft) * 1000;
                 console.warn(`Network error, retrying in ${backoffDelay}ms. Attempts left: ${attemptsLeft - 1}`, error.message);
-
-                // Provide user feedback about network retry
-                if (typeof addToProgressConsole === 'function') {
-                    addToProgressConsole(`Network error, retrying in ${backoffDelay/1000}s...`, 'warning');
-                }
-
                 await new Promise(resolve => setTimeout(resolve, backoffDelay));
                 return this.makeRequestWithRetry(endpoint, data, method, isFormData, timeoutMs, attemptsLeft - 1);
             }
 
-            // Check if it was a timeout and throw appropriate error
-            if (abortReason === 'timeout') {
-                console.error(`Request timeout after ${timeout/1000}s`);
-                throw new Error(`Request timeout after ${timeout/1000}s`);
-            }
-
             console.error('API request failed:', error);
             throw error;
         } finally {
             clearTimeout(timer);
-
-            // Remove request from LayoutManager tracking
-            if (typeof LayoutManager !== 'undefined') {
-                LayoutManager.removeActiveRequest(controller);
-            }
         }
     }
 
@@ -209,7 +102,7 @@ class SAMOAPIClient {
         formData.append('audio_file', audioFile);
 
         try {
-            // Use VOICE_JOURNAL endpoint for audio analysis flows with proper timeout handling
+            // Use makeRequest method for proper timeout and error handling
             return await this.makeRequest(this.endpoints.VOICE_JOURNAL, formData, 'POST', true);
         } catch (error) {
             console.error('Transcription error:', error);
@@ -219,51 +112,37 @@ class SAMOAPIClient {
 
     async summarizeText(text) {
         try {
-            // Use makeRequest method for proper timeout and error handling
-            const response = await this.makeRequest(this.endpoints.SUMMARIZE, { text }, 'POST');
+            // Use query parameters instead of JSON body for summarize API
+            const url = `${this.baseURL}${this.endpoints.SUMMARIZE}?text=${encodeURIComponent(text)}`;
+            const response = await fetch(url, {
+                method: 'POST',
+                headers: {
+                    'Content-Length': '0'
+                }
+            });
+
+            if (!response.ok) {
+                const errorData = await response.json().catch(() => ({}));
+                const msg = errorData.message || errorData.error || `HTTP ${response.status}`;
+                throw new Error(msg);
+            }
 
-            // The makeRequest method already handles JSON parsing, so response is the data
-            return response;
+            return await response.json();
         } catch (error) {
             // If API is not available, return mock data for demo purposes
             if (error.message.includes('Rate limit') || error.message.includes('API key') || error.message.includes('Service temporarily') || error.message.includes('Abuse detected') || error.message.includes('Client blocked')) {
                 console.warn('API not available, using mock data for demo:', error.message);
-
-                // Inform user about fallback to mock data
-                if (typeof addToProgressConsole === 'function') {
-                    addToProgressConsole('⚠️ API unavailable, using mock summarization for demo', 'warning');
-                }
-
-                const mockResponse = this.getMockSummaryResponse(text);
-                mockResponse.fallback_reason = error.message;
-                return mockResponse;
+                return this.getMockSummaryResponse(text);
             }
             throw error;
         }
     }
 
     getMockSummaryResponse(text) {
-        // Improved mock summarization response for demo purposes
+        // Mock summarization response for demo purposes
         const words = text.split(' ');
-
-        // Create a more intelligent summary by taking key sentences
-        const sentences = text.split(/[.!?]+/).filter(s => s.trim().length > 10);
-        let summary;
-
-        if (sentences.length >= 2) {
-            // Take first and last sentences for a basic summary
-            summary = sentences[0].trim() + '. ' + sentences[sentences.length - 1].trim() + '.';
-        } else {
-            // Fallback to word truncation
-            summary = words.slice(0, Math.max(15, Math.floor(words.length * 0.4))).join(' ') + '...';
-        }
-
-        // Ensure summary is not too long
-        if (summary.length > text.length * 0.6) {
-            summary = words.slice(0, Math.floor(words.length * 0.4)).join(' ') + '...';
-        }
-
-        console.log('🤖 Generated mock summary:', summary);
+        const summaryLength = Math.max(10, Math.floor(words.length * 0.3));
+        const summary = words.slice(0, summaryLength).join(' ') + '...';
 
         return {
             summary: summary,
@@ -278,8 +157,22 @@ class SAMOAPIClient {
 
     async detectEmotions(text) {
         try {
-            // Use makeRequest method for proper timeout and error handling
-            const data = await this.makeRequest(this.endpoints.EMOTION, { text }, 'POST');
+            // Use query parameters instead of JSON body for emotion API
+            const url = `${this.baseURL}${this.endpoints.EMOTION}?text=${encodeURIComponent(text)}`;
+            const response = await fetch(url, {
+                method: 'POST',
+                headers: {
+                    'Content-Length': '0'
+                }
+            });
+
+            if (!response.ok) {
+                const errorData = await response.json().catch(() => ({}));
+                const msg = errorData.message || errorData.error || `HTTP ${response.status}`;
+                throw new Error(msg);
+            }
+
+            const data = await response.json();
 
             // Extract top 5 emotions and sort by confidence
             const emotions = data.emotions || {};
@@ -296,15 +189,7 @@ class SAMOAPIClient {
             // If API is not available, return mock data for demo purposes
             if (error.message.includes('Rate limit') || error.message.includes('API key') || error.message.includes('Service temporarily') || error.message.includes('Abuse detected') || error.message.includes('Client blocked')) {
                 console.warn('API not available, using mock data for demo:', error.message);
-
-                // Inform user about fallback to mock data
-                if (typeof addToProgressConsole === 'function') {
-                    addToProgressConsole('⚠️ API unavailable, using mock emotion detection for demo', 'warning');
-                }
-
-                const mockResponse = this.getMockEmotionResponse(text);
-                mockResponse.fallback_reason = error.message;
-                return mockResponse;
+                return this.getMockEmotionResponse(text);
             }
             throw error;
         }
@@ -418,44 +303,714 @@ class SAMOAPIClient {
     }
 }
 
+class ComprehensiveDemo {
+    constructor() {
+        this.apiClient = new SAMOAPIClient();
+        this.mediaRecorder = null;
+        this.audioChunks = [];
+        this.isRecording = false;
+        this.chart = null;
+        this.performanceOptimizer = new PerformanceOptimizer();
+
+        // Add cleanup on page unload
+        window.addEventListener('beforeunload', () => {
+            this.cleanup();
+        });
 
-// Global API client instance
-window.apiClient = null;
+        // Periodic cleanup to prevent memory buildup
+        this.cleanupInterval = setInterval(() => {
+            this.periodicCleanup();
+        }, 30000); // Every 30 seconds
 
-// Initialize the demo when the page loads
-document.addEventListener('DOMContentLoaded', function() {
-    console.log('✅ DOM loaded, initializing demo...');
-    console.log('🔧 Using simple-demo-functions.js for chart implementation');
+        this.initializeElements();
+        this.bindEvents();
+    }
 
-    // Initialize global API client
-    try {
-        if (!window.apiClient) {
-            window.apiClient = new SAMOAPIClient();
-            console.log('✅ Global API client initialized');
-        } else {
-            console.log('ℹ️ Global API client already initialized');
+    initializeElements() {
+        // Input elements
+        this.audioFileInput = document.getElementById('audioFile');
+        this.textInput = document.getElementById('textInput');
+        this.recordBtn = document.getElementById('recordBtn');
+        this.stopBtn = document.getElementById('stopBtn');
+        this.processBtn = document.getElementById('processBtn');
+        this.clearBtn = document.getElementById('clearBtn');
+
+        // Visual elements
+        this.audioVisualizer = document.getElementById('audioVisualizer');
+        this.loadingSection = document.getElementById('loadingSection');
+        this.resultSection = document.getElementById('resultSection');
+
+        // Progress steps
+        this.steps = {
+            step1: document.getElementById('step1'),
+            step2: document.getElementById('step2'),
+            step3: document.getElementById('step3'),
+            step4: document.getElementById('step4')
+        };
+
+        // Result containers
+        this.transcriptionResults = document.getElementById('transcriptionResults');
+        this.summarizationResults = document.getElementById('summarizationResults');
+        this.emotionResults = document.getElementById('emotionResults');
+    }
+
+    bindEvents() {
+        this.processBtn.addEventListener('click', () => this.processInput());
+        this.clearBtn.addEventListener('click', () => this.clearAll());
+        this.recordBtn.addEventListener('click', () => this.startRecording());
+        this.stopBtn.addEventListener('click', () => this.stopRecording());
+        this.audioFileInput.addEventListener('change', () => this.handleFileUpload());
+    }
+
+    async processInput() {
+        const audioFile = this.audioFileInput.files[0];
+        const text = this.textInput.value.trim();
+
+        if (!audioFile && !text) {
+            this.showError('Please upload an audio file or enter text to process.');
+            return;
         }
-    } catch (error) {
-        console.error('❌ Failed to initialize API client:', error);
+
+        this.showLoading();
+        this.resetProgressSteps();
+        this.hideResults();
+
+        try {
+            // Update progress
+            this.updateProgressStep('step1', 'completed');
+            this.updateLoadingMessage('Processing with AI...');
+
+            const results = await this.apiClient.processCompleteWorkflow(audioFile, text);
+
+            // Update progress steps
+            if (results.transcription) {
+                this.updateProgressStep('step2', 'completed');
+                this.showTranscriptionResults(results.transcription);
+            }
+
+            if (results.summary) {
+                this.updateProgressStep('step3', 'completed');
+                this.showSummarizationResults(results.summary, results);
+            }
+
+            if (results.emotions) {
+                this.updateProgressStep('step4', 'completed');
+                this.showEmotionResults(results.emotions);
+            }
+
+            this.updateProcessingInfo(results);
+            this.hideLoading();
+            this.showResults();
+
+        } catch (error) {
+            console.error('Processing failed:', error);
+            this.hideLoading();
+            this.showError(`Processing failed: ${error.message}`);
+        }
+    }
+
+    showLoading() {
+        this.loadingSection.classList.add('show');
+        this.resultSection.classList.remove('show');
+        this.loadingSection.setAttribute('aria-busy', 'true');
+        this.resultSection.setAttribute('aria-busy', 'false');
+    }
+
+    hideLoading() {
+        this.loadingSection.classList.remove('show');
+    }
+
+    updateLoadingMessage(message) {
+        document.getElementById('loadingMessage').textContent = message;
+    }
+
+    resetProgressSteps() {
+        Object.values(this.steps).forEach(step => {
+            step.classList.remove('completed', 'active');
+            const icon = step.querySelector('.step-icon');
+            if (icon) {
+                icon.classList.remove('completed', 'active');
+                icon.classList.add('pending');
+            }
+        });
+    }
+
+    updateProgressStep(stepId, status) {
+        const step = this.steps[stepId];
+        const icon = step.querySelector('.step-icon');
+
+        step.classList.remove('completed', 'active');
+        if (icon) {
+            icon.classList.remove('completed', 'active', 'pending');
+
+            if (status === 'completed') {
+                step.classList.add('completed');
+                icon.classList.add('completed');
+            } else if (status === 'active') {
+                step.classList.add('active');
+                icon.classList.add('active');
+            } else {
+                icon.classList.add('pending');
+            }
+        }
+    }
+
+    showTranscriptionResults(transcription) {
+        // Some API responses use 'text', others use 'transcription'. Normalize here for consistency.
+        const text = transcription.text || transcription.transcription || 'Transcription not available';
+        const confidence = transcription.confidence || 'N/A';
+        const duration = transcription.duration || 'N/A';
+
+        document.getElementById('transcriptionText').textContent = text;
+        document.getElementById('transcriptionConfidence').textContent =
+            typeof confidence === 'number' ? `${Math.round(confidence * 100)}%` : confidence;
+        document.getElementById('transcriptionDuration').textContent =
+            typeof duration === 'number' ? `${duration.toFixed(2)}s` : duration;
+
+        this.transcriptionResults.style.display = 'block';
+    }
+
+    showSummarizationResults(summary, results = null) {
+        const summaryText = summary.summary || summary.text || 'Summary not available';
+        const summaryLength = summaryText.length;
+
+        // Determine original text length from available sources
+        let originalLength = 0;
+        if (results) {
+            // Try to get original text from various sources in order of preference
+            if (results.originalText) {
+                originalLength = (results.originalText || '').length;
+            } else if (results.transcription) {
+                const transcribedText = results.transcription.text || results.transcription.transcription;
+                originalLength = transcribedText ? transcribedText.length : 0;
+            } else if (results.inputText) {
+                originalLength = results.inputText.length;
+            }
+        }
+
+        document.getElementById('summaryText').textContent = summaryText;
+        document.getElementById('originalLength').textContent = originalLength;
+        document.getElementById('summaryLength').textContent = summaryLength;
+
+        this.summarizationResults.style.display = 'block';
+    }
+
+    showEmotionResults(emotions) {
+        // Handle different response formats
+        let emotionData = [];
+        if (Array.isArray(emotions)) {
+            emotionData = emotions;
+        } else if (emotions.emotions) {
+            emotionData = emotions.emotions;
+        } else if (emotions.predictions) {
+            emotionData = emotions.predictions;
+        } else if (emotions.probabilities) {
+            // Handle probabilities object format: {probabilities: {label: prob}}
+            emotionData = Object.entries(emotions.probabilities).map(([label, prob]) => ({
+                emotion: label,
+                confidence: prob
+            }));
+        }
+
+        // Use performance optimizer to normalize emotion data
+        const normalizedEmotions = this.performanceOptimizer.optimizeEmotionData(emotionData);
+        console.log('🔍 Normalized emotions for chart:', normalizedEmotions);
+        console.log('🔍 Normalized emotions length:', normalizedEmotions.length);
+
+        // Create emotion badges (only show top 5)
+        const badgesContainer = document.getElementById('emotionBadges');
+        badgesContainer.textContent = '';
+
+        // Only show top 5 emotions as badges
+        const top5Emotions = normalizedEmotions.slice(0, 5);
+        top5Emotions.forEach(emotion => {
+            const confidence = Math.max(0, Math.min(1, emotion.confidence)) * 100; // Clamp between 0-100
+            const emotionName = emotion.emotion || 'Unknown';
+
+            const badge = document.createElement('span');
+            badge.className = 'emotion-badge';
+            badge.style.backgroundColor = this.getEmotionColor(emotionName);
+            badge.textContent = `${emotionName}: ${confidence.toFixed(1)}%`;
+            badgesContainer.appendChild(badge);
+        });
+
+        // Create emotion chart (only top 5 emotions)
+        const chartData = normalizedEmotions.slice(0, 5);
+        console.log('🔍 Creating chart with data:', chartData);
+        this.createEmotionChart(chartData);
+
+        // Show emotion details (only top 5)
+        this.showEmotionDetails(chartData);
+
+        this.emotionResults.style.display = 'block';
+    }
+
+    createEmotionChart(emotionData) {
+        const ctx = document.getElementById('emotionChart');
+        if (!ctx) {
+            console.error('Emotion chart canvas not found');
+            return;
+        }
+
+        // Destroy existing chart properly
+        if (this.chart) {
+            try {
+                this.chart.destroy();
+                this.chart = null;
+            } catch (error) {
+                console.warn('Error destroying chart:', error);
+                this.chart = null;
+            }
+        }
+
+        // Use the basic chart directly since we have Chart.js
+        this.createBasicChart(ctx, emotionData);
     }
 
-    // Smooth scrolling for in-page navigation links
-    document.querySelectorAll('nav a[href^="#"], .navbar a[href^="#"], #main-nav a[href^="#"]').forEach(anchor => {
-        anchor.addEventListener('click', function (e) {
-            // Only handle if the link is for the current page
-            if (location.pathname === anchor.pathname && location.hostname === anchor.hostname) {
-                e.preventDefault();
-                const href = this.getAttribute('href');
-                if (!href) return;
-                const target = document.querySelector(href);
-                if (target) {
-                    target.scrollIntoView({
-                        behavior: 'smooth',
-                        block: 'start'
-                    });
+    createBasicChart(ctx, emotionData) {
+        // Fallback chart creation if performance optimizer fails
+        console.log('🔍 createBasicChart called with:', emotionData);
+        console.log('🔍 emotionData type:', typeof emotionData);
+        console.log('🔍 emotionData length:', emotionData?.length);
+
+        // Check if Chart.js is loaded
+        if (typeof Chart === 'undefined') {
+            console.error('❌ Chart.js not loaded!');
+            this.showChartError('Chart.js library not loaded. Please refresh the page.');
+            return;
+        }
+
+        if (!Array.isArray(emotionData) || emotionData.length === 0) {
+            console.error('❌ Invalid emotion data for chart:', emotionData);
+            return;
+        }
+
+        const labels = emotionData.map(e => e.emotion || e.label);
+        const data = emotionData.map(e => (e.confidence || e.score) * 100);
+        const colors = labels.map(label => this.getEmotionColor(label));
+
+        console.log('🔍 Chart labels:', labels);
+        console.log('🔍 Chart data:', data);
+        console.log('🔍 Chart colors:', colors);
+
+        try {
+            this.chart = new Chart(ctx, {
+            type: 'bar',
+            data: {
+                labels: labels,
+                datasets: [{
+                    label: 'Confidence (%)',
+                    data: data,
+                    backgroundColor: colors,
+                    borderColor: colors.map((c) =>
+                        c.startsWith('rgba(')
+                          ? c.replace(/rgba\((\d+\s*,\s*\d+\s*,\s*\d+),\s*[\d.]+\)/, 'rgba($1, 1)')
+                          : c
+                    ),
+                    borderWidth: 2,
+                    borderRadius: 8,
+                    borderSkipped: false,
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                scales: {
+                    x: {
+                        grid: {
+                            color: 'rgba(139, 92, 246, 0.1)',
+                            borderColor: 'rgba(139, 92, 246, 0.2)'
+                        },
+                        ticks: {
+                            color: '#cbd5e1',
+                            maxRotation: 45
+                        }
+                    },
+                    y: {
+                        beginAtZero: true,
+                        max: 100,
+                        grid: {
+                            color: 'rgba(139, 92, 246, 0.1)',
+                            borderColor: 'rgba(139, 92, 246, 0.2)'
+                        },
+                        ticks: {
+                            color: '#cbd5e1',
+                            callback: function(value) {
+                                return value + '%';
+                            }
+                        }
+                    }
+                },
+                plugins: {
+                    legend: {
+                        display: false
+                    },
+                    tooltip: {
+                        backgroundColor: 'rgba(15, 15, 35, 0.9)',
+                        titleColor: '#e2e8f0',
+                        bodyColor: '#e2e8f0',
+                        borderColor: 'rgba(139, 92, 246, 0.5)',
+                        borderWidth: 1
+                    }
                 }
             }
         });
+
+        } catch (error) {
+            console.error('❌ Error creating chart:', error);
+            this.showChartError('Failed to create chart: ' + error.message);
+        }
+    }
+
+    /**
+     * Show chart error message
+     */
+    showChartError(message) {
+        const chartContainer = document.getElementById('emotionChart');
+        if (chartContainer) {
+            const parent = chartContainer.parentElement;
+            if (parent) {
+                // Clear existing content safely
+                parent.textContent = '';
+
+                // Create alert container
+                const alertDiv = document.createElement('div');
+                alertDiv.className = 'alert alert-warning';
+                alertDiv.setAttribute('role', 'alert');
+
+                // Create heading
+                const heading = document.createElement('h6');
+                heading.className = 'alert-heading';
+
+                const warningIcon = document.createElement('span');
+                warningIcon.className = 'material-icons me-2';
+                warningIcon.textContent = 'warning';
+
+                heading.appendChild(warningIcon);
+                heading.appendChild(document.createTextNode('Chart Error'));
+
+                // Create message paragraph
+                const messagePara = document.createElement('p');
+                messagePara.className = 'mb-0';
+                messagePara.textContent = message; // Safe text content
+
+                // Create separator
+                const hr = document.createElement('hr');
+
+                // Create instruction paragraph
+                const instructionPara = document.createElement('p');
+                instructionPara.className = 'mb-0 small';
+                instructionPara.textContent = 'Please refresh the page and try again.';
+
+                // Assemble the alert
+                alertDiv.appendChild(heading);
+                alertDiv.appendChild(messagePara);
+                alertDiv.appendChild(hr);
+                alertDiv.appendChild(instructionPara);
+
+                parent.appendChild(alertDiv);
+            }
+        }
+    }
+
+    showEmotionDetails(emotionData) {
+        const detailsContainer = document.getElementById('emotionDetails');
+        if (!detailsContainer) {
+            console.error('❌ emotionDetails container not found');
+            return;
+        }
+        const title = document.createElement('h6');
+        title.className = 'fw-bold mb-3';
+        title.textContent = 'Top Emotions';
+        detailsContainer.textContent = '';
+        detailsContainer.appendChild(title);
+
+        // Sort by confidence and show top 5
+        const sortedEmotions = emotionData
+            .sort((a, b) => (b.confidence || b.score) - (a.confidence || a.score))
+            .slice(0, 5);
+
+        sortedEmotions.forEach((emotion, index) => {
+            const confidence = (emotion.confidence || emotion.score) * 100;
+            const emotionName = emotion.emotion || emotion.label;
+
+            const detailItem = document.createElement('div');
+            detailItem.className = 'mb-3';
+
+            const headerDiv = document.createElement('div');
+            headerDiv.className = 'd-flex justify-content-between align-items-center mb-1';
+
+            const emotionLabel = document.createElement('span');
+            emotionLabel.className = 'fw-bold';
+            emotionLabel.textContent = `${index + 1}. ${emotionName}`;
+
+            const badge = document.createElement('span');
+            badge.className = 'badge';
+            badge.style.backgroundColor = this.getEmotionColor(emotionName);
+            badge.textContent = `${Math.round(confidence)}%`;
+
+            headerDiv.appendChild(emotionLabel);
+            headerDiv.appendChild(badge);
+
+            const progressDiv = document.createElement('div');
+            progressDiv.className = 'progress';
+            progressDiv.style.height = '8px';
+
+            const progressBar = document.createElement('div');
+            progressBar.className = 'progress-bar';
+            progressBar.style.width = `${confidence}%`;
+            progressBar.style.backgroundColor = this.getEmotionColor(emotionName);
+
+            progressDiv.appendChild(progressBar);
+
+            detailItem.appendChild(headerDiv);
+            detailItem.appendChild(progressDiv);
+            detailsContainer.appendChild(detailItem);
+        });
+    }
+
+    getEmotionColor(emotion) {
+        const colors = {
+            'joy': 'rgba(34, 197, 94, 0.8)',
+            'happiness': 'rgba(34, 197, 94, 0.8)',
+            'excitement': 'rgba(34, 197, 94, 0.8)',
+            'sadness': 'rgba(59, 130, 246, 0.8)',
+            'grief': 'rgba(59, 130, 246, 0.8)',
+            'anger': 'rgba(239, 68, 68, 0.8)',
+            'annoyance': 'rgba(239, 68, 68, 0.8)',
+            'fear': 'rgba(245, 158, 11, 0.8)',
+            'nervousness': 'rgba(245, 158, 11, 0.8)',
+            'surprise': 'rgba(139, 92, 246, 0.8)',
+            'love': 'rgba(244, 63, 94, 0.8)',
+            'caring': 'rgba(244, 63, 94, 0.8)',
+            'gratitude': 'rgba(16, 185, 129, 0.8)',
+            'pride': 'rgba(16, 185, 129, 0.8)',
+            'optimism': 'rgba(16, 185, 129, 0.8)',
+            'disgust': 'rgba(107, 114, 128, 0.8)',
+            'confusion': 'rgba(107, 114, 128, 0.8)',
+            'neutral': 'rgba(107, 114, 128, 0.8)'
+        };
+        return colors[emotion] || 'rgba(139, 92, 246, 0.8)';
+    }
+
+    updateProcessingInfo(results) {
+        // Format processing time for better readability
+        const formatProcessingTime = (ms) => {
+            if (ms >= 1000) {
+                return `${(ms / 1000).toFixed(2)}s`;
+            }
+            return `${ms}ms`;
+        };
+        document.getElementById('totalTime').textContent = formatProcessingTime(results.processingTime);
+        document.getElementById('processingStatus').textContent = 'Success';
+        document.getElementById('processingStatus').className = 'text-success';
+        document.getElementById('modelsUsed').textContent = results.modelsUsed.join(', ');
+
+        // Calculate average confidence - handle different response formats
+        const em = results.emotions;
+        if (em) {
+            let avg = null;
+            if (Array.isArray(em)) {
+                avg = em.reduce((s, e) => s + (e.confidence || e.score || 0), 0) / Math.max(em.length, 1);
+            } else if (em.probabilities && typeof em.probabilities === 'object') {
+                const vals = Object.values(em.probabilities);
+                avg = vals.reduce((s, v) => s + (Number(v) || 0), 0) / Math.max(vals.length, 1);
+            }
+            if (avg != null) {
+                document.getElementById('avgConfidence').textContent = `${Math.round(avg * 100)}%`;
+            } else {
+                document.getElementById('avgConfidence').textContent = 'N/A';
+            }
+        } else {
+            document.getElementById('avgConfidence').textContent = 'N/A';
+        }
+    }
+
+    showResults() {
+        this.resultSection.classList.add('show');
+    }
+
+    hideResults() {
+        this.resultSection.classList.remove('show');
+        this.resultSection.setAttribute('aria-busy', 'false');
+        this.transcriptionResults.style.display = 'none';
+        this.summarizationResults.style.display = 'none';
+        this.emotionResults.style.display = 'none';
+    }
+
+    clearAll() {
+        this.audioFileInput.value = '';
+        this.textInput.value = '';
+        this.hideResults();
+        this.resetProgressSteps();
+        this.stopRecording();
+    }
+
+    async startRecording() {
+        try {
+            if (typeof window.MediaRecorder === 'undefined') {
+                this.showError('Recording not supported in this browser.');
+                return;
+            }
+            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+            this.mediaRecorder = new MediaRecorder(stream);
+            this.audioChunks = [];
+
+            this.mediaRecorder.ondataavailable = (event) => {
+                this.audioChunks.push(event.data);
+            };
+
+            this.mediaRecorder.onstop = () => {
+                // Use the actual MediaRecorder MIME type instead of hardcoded 'audio/wav'
+                const mimeType = this.mediaRecorder.mimeType || 'audio/webm';
+                const fileExtension = mimeType.includes('webm') ? 'webm' :
+                                    mimeType.includes('mp4') ? 'mp4' :
+                                    mimeType.includes('ogg') ? 'ogg' : 'wav';
+
+                const audioBlob = new Blob(this.audioChunks, { type: mimeType });
+                const audioFile = new File([audioBlob], `recording.${fileExtension}`, { type: mimeType });
+
+                // Create a new FileList-like object
+                const dataTransfer = new DataTransfer();
+                dataTransfer.items.add(audioFile);
+                this.audioFileInput.files = dataTransfer.files;
+
+                // Hide visualizer
+                this.audioVisualizer.style.display = 'none';
+            };
+
+            this.mediaRecorder.start();
+            this.isRecording = true;
+            this.recordBtn.disabled = true;
+            this.stopBtn.disabled = false;
+            this.audioVisualizer.style.display = 'flex';
+
+        } catch (error) {
+            console.error('Error starting recording:', error);
+            this.showError('Could not start recording. Please check microphone permissions.');
+        }
+    }
+
+    stopRecording() {
+        if (this.mediaRecorder && this.isRecording) {
+            this.mediaRecorder.stop();
+            this.mediaRecorder.stream.getTracks().forEach(track => track.stop());
+            this.isRecording = false;
+            this.recordBtn.disabled = false;
+            this.stopBtn.disabled = true;
+        }
+    }
+
+    handleFileUpload() {
+        if (this.audioFileInput.files[0]) {
+            // Clear text input when audio is uploaded
+            this.textInput.value = '';
+        }
+    }
+
+    showError(message) {
+        if (!this.errorMsgEl) {
+            // Create error message element if it doesn't exist
+            this.errorMsgEl = document.createElement('div');
+            this.errorMsgEl.className = 'error-message';
+            this.errorMsgEl.setAttribute('role', 'alert');
+            this.errorMsgEl.setAttribute('aria-live', 'assertive');
+            this.textInput.parentNode.insertBefore(this.errorMsgEl, this.textInput.nextSibling);
+        }
+        this.errorMsgEl.textContent = message;
+        this.errorMsgEl.classList.add('show');
+    }
+
+    clearError() {
+        if (this.errorMsgEl) {
+            this.errorMsgEl.textContent = '';
+            this.errorMsgEl.classList.remove('show');
+        }
+    }
+
+    /**
+     * Clean up resources to prevent memory leaks
+     */
+    cleanup() {
+        console.log('🧹 Cleaning up resources...');
+
+        // Destroy chart
+        if (this.chart) {
+            try {
+                this.chart.destroy();
+                this.chart = null;
+            } catch (error) {
+                console.warn('Error destroying chart during cleanup:', error);
+            }
+        }
+
+        // Clean up performance optimizer
+        if (this.performanceOptimizer && typeof this.performanceOptimizer.destroy === 'function') {
+            this.performanceOptimizer.destroy();
+        }
+
+        // Stop media recording if active
+        if (this.mediaRecorder && this.mediaRecorder.state !== 'inactive') {
+            try {
+                this.mediaRecorder.stop();
+            } catch (error) {
+                console.warn('Error stopping media recorder:', error);
+            }
+        }
+
+        // Clear audio chunks
+        this.audioChunks = [];
+
+        // Clear cleanup interval
+        if (this.cleanupInterval) {
+            clearInterval(this.cleanupInterval);
+            this.cleanupInterval = null;
+        }
+
+        console.log('✅ Cleanup completed');
+    }
+
+    /**
+     * Periodic cleanup to prevent memory buildup
+     */
+    periodicCleanup() {
+        // Only run if performance optimizer is available
+        if (this.performanceOptimizer && typeof this.performanceOptimizer.cleanupMemory === 'function') {
+            this.performanceOptimizer.cleanupMemory();
+        }
+
+        // Clear any old audio chunks
+        if (this.audioChunks.length > 10) {
+            this.audioChunks = this.audioChunks.slice(-5);
+        }
+    }
+}
+
+// Initialize the demo when the page loads
+document.addEventListener('DOMContentLoaded', function() {
+    console.log('✅ DOM loaded, initializing demo...');
+    // Initialize the comprehensive demo
+    new ComprehensiveDemo();
+    console.log('🔧 ComprehensiveDemo initialized for enhanced functionality');
+});
+
+// Smooth scrolling for in-page navigation links
+// Only applies to anchors within the main navigation to avoid interfering with external or footer anchors
+document.querySelectorAll('nav a[href^="#"], .navbar a[href^="#"], #main-nav a[href^="#"]').forEach(anchor => {
+    anchor.addEventListener('click', function (e) {
+        // Only handle if the link is for the current page
+        if (location.pathname === anchor.pathname && location.hostname === anchor.hostname) {
+            e.preventDefault();
+            const href = this.getAttribute('href');
+            if (!href) return;
+            const target = document.querySelector(href);
+            if (target) {
+                target.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'start'
+                });
+            }
+        }
     });
 });
 
@@ -498,33 +1053,6 @@ function showInlineMessage(message, targetElementId, type = 'error') {
 async function generateSampleText() {
     console.log('✨ Generating AI-powered sample journal text...');
 
-    // Define sample texts for fallback
-    const sampleTexts = [
-        "Today started like any other day, but something unexpected happened that completely changed my mood. I woke up feeling restless, as if something important was waiting for me just beyond the horizon. The morning sunlight streaming through my window felt warmer than usual, and I found myself lingering in bed longer than I should have, savoring the quiet moments before the day officially began. Walking through the park, I noticed things I'd never seen before despite passing this way hundreds of times. That's when I realized what I was feeling – a profound sense of gratitude mixed with a gentle melancholy for time that has passed.",
-
-        "After a long conversation with someone close to me, I'm left feeling quite contemplative and unexpectedly vulnerable. It's funny how a simple exchange of words can peel back layers of what we often bury deep inside us. We discussed dreams that feel too big, disappointments that still sting, and the strange comfort found in knowing that someone else understands the complexity of simply being human. Now, sitting here in the quiet aftermath, I feel emotionally exhausted but also somehow lighter.",
-
-        "I've been struggling with a decision that's been weighing heavily on my mind for weeks. The rational part of me knows what I should do, but my heart keeps pulling me in a different direction. It's that familiar tug-of-war between what feels safe and what feels authentic. Sometimes I wonder if we're meant to feel this conflicted about the paths we choose, or if clarity is something that comes only in hindsight. Tonight, I'm choosing to sit with the uncertainty rather than rush toward an answer.",
-
-        "There's something magical about rainy afternoons that makes me incredibly nostalgic. The sound of droplets against my window takes me back to childhood days when the world felt both infinite and completely contained within the walls of our small house. I remember how my grandmother used to say that rain was just the sky's way of crying happy tears. Looking back, I think she might have been onto something profound about finding beauty in moments of release.",
-
-        "I had one of those moments today where everything felt perfectly aligned. It wasn't anything dramatic – just a simple conversation with a stranger at the coffee shop who smiled genuinely and asked how my day was going. But something about that brief connection reminded me that kindness is still everywhere if we're paying attention. It's amazing how a single moment of human warmth can shift your entire perspective on the day.",
-
-        "I've been thinking a lot about the concept of home lately. Not just the physical space where I live, but that feeling of belonging that seems to come and go like the tide. Sometimes I feel most at home in unexpected places – a quiet corner of a library, a park bench under my favorite tree, or even in the middle of a crowded room filled with laughter. Maybe home isn't a place at all, but a feeling we carry within us.",
-
-        "Tonight I'm sitting on my balcony watching the city lights twinkle below, and I'm overwhelmed by how many stories are unfolding simultaneously around me. Behind each lit window is someone living their own complex narrative of hopes, fears, dreams, and disappointments. It's both humbling and comforting to remember that we're all just trying to figure it out as we go along. Sometimes feeling small in the grand scheme of things is exactly what we need.",
-
-        "I picked up a book today that I loved in college and was surprised by how differently it resonated with me now. The same words that once felt revolutionary now feel like old friends offering gentle wisdom. It made me realize how much I've changed without even noticing. Growth isn't always dramatic or obvious – sometimes it's just the quiet accumulation of experiences that slowly shift how we see the world.",
-
-        "There's something bittersweet about cleaning out old belongings and finding forgotten treasures from different phases of my life. Each item tells a story about who I used to be, the dreams I once had, and the paths I chose not to take. It's like archaeological evidence of my own becoming. I'm learning to feel grateful for all the versions of myself that led me here, even the ones that felt lost at the time.",
-
-        "I had a moment of pure joy today while listening to my favorite song on repeat. It's one of those tracks that never gets old, that seems to capture something essential about being alive. Music has this incredible ability to transport us instantly to emotional spaces we might struggle to access otherwise. Sometimes I think musicians are just emotional translators, helping us understand feelings we didn't even know we had.",
-
-        "The anxiety I've been carrying lately feels like a heavy backpack I forgot I was wearing. It's only when I consciously set it down that I realize how much energy it was taking just to carry it around. I'm learning that acknowledging difficult emotions doesn't make them stronger – it actually gives them permission to move through me instead of getting stuck. Today I'm practicing the art of gentle self-compassion.",
-
-        "I spent the morning in my garden, hands deep in the soil, and felt more grounded than I have in weeks. There's something deeply satisfying about nurturing something from seed to bloom. It reminds me that growth takes time, that patience is its own form of faith, and that some of the most beautiful things happen slowly, underground, before we can see any evidence of progress. Maybe I need to remember this about my own life too."
-    ];
-
     const textInput = document.getElementById('textInput');
     if (textInput) {
         textInput.value = '🤖 Generating AI text...';
@@ -533,9 +1061,7 @@ async function generateSampleText() {
     }
 
     try {
-        let apiKey = window.SAMO_CONFIG?.OPENAI?.API_KEY
-          || sessionStorage.getItem('openai_api_key')
-          || localStorage.getItem('openai_api_key'); // kept as fallback for backward-compat
+        let apiKey = window.SAMO_CONFIG?.OPENAI?.API_KEY || localStorage.getItem('openai_api_key');
 
         if (!apiKey || apiKey.trim() === '') {
             showInlineError('⚠️ OpenAI API key required for AI text generation. Click "Manage API Key" to set up.', 'textInput');
@@ -563,50 +1089,45 @@ async function generateSampleText() {
         const randomPrompt = prompts[Math.floor(Math.random() * prompts.length)];
         console.log('🤖 Generating AI text with OpenAI API...');
 
-        // Update user with loading feedback
-        if (textInput) {
-            textInput.value = '🤖 Generating unique AI text with OpenAI...';
-        }
-
-        // Make actual OpenAI API call
-        const response = await fetch('https://api.openai.com/v1/chat/completions', {
+        const openaiConfig = window.SAMO_CONFIG.OPENAI;
+        const response = await fetch(openaiConfig.API_URL, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json',
-                'Authorization': `Bearer ${apiKey}`
+                'Authorization': `Bearer ${apiKey.trim()}`
             },
             body: JSON.stringify({
-                model: window.SAMO_CONFIG?.OPENAI?.MODEL || 'gpt-4o-mini',
+                model: openaiConfig.MODEL,
                 messages: [
                     {
                         role: 'system',
-                        content: 'You are an AI that creates realistic, emotional journal entries. Write a personal, introspective journal entry that expresses genuine human emotions and experiences. The entry should be 150-300 words, feel authentic, and contain a mix of emotions suitable for emotion detection analysis.'
+                        content: 'You are a creative writing assistant that generates authentic, emotionally rich personal journal entries. Write in first person, include specific details and genuine emotions.'
                     },
                     {
                         role: 'user',
-                        content: `Write a journal entry that continues this thought: "${randomPrompt}"`
+                        content: `Write a personal journal entry that continues this thought: "${randomPrompt}" - Make it authentic and emotionally detailed.`
                     }
                 ],
-                max_tokens: window.SAMO_CONFIG?.OPENAI?.MAX_TOKENS || 400,
-                temperature: window.SAMO_CONFIG?.OPENAI?.TEMPERATURE || 0.7
+                max_tokens: openaiConfig.MAX_TOKENS,
+                temperature: openaiConfig.TEMPERATURE + 0.1
             })
         });
 
         if (!response.ok) {
-            throw new Error(`OpenAI API error: ${response.status} ${response.statusText}`);
+            const errorData = await response.json().catch(() => ({}));
+            throw new Error(`OpenAI API error: ${response.status} ${errorData.error?.message || ''}`);
         }
 
         const data = await response.json();
-        const generatedText = data.choices[0]?.message?.content;
-
-        if (!generatedText) {
-            throw new Error('No text generated from OpenAI API');
+        if (!data.choices?.[0]?.message) {
+            throw new Error('Invalid response format from OpenAI API');
         }
 
-        console.log('✅ OpenAI API generated unique text successfully');
+        const generatedText = data.choices[0].message.content.trim();
+        console.log('✅ AI text generated successfully');
 
         if (textInput) {
-            textInput.value = generatedText.trim();
+            textInput.value = generatedText;
             textInput.style.borderColor = '#10b981';
             textInput.style.boxShadow = '0 0 0 0.2rem rgba(16, 185, 129, 0.25)';
             setTimeout(() => {
@@ -615,88 +1136,28 @@ async function generateSampleText() {
             }, 2000);
         }
 
-        showInlineSuccess('✅ Unique AI text generated with OpenAI!', 'textInput');
-        return; // Exit here - don't fall back to sample texts
+        showInlineSuccess('✅ AI text generated successfully!', 'textInput');
 
     } catch (error) {
         console.error('❌ Error generating AI text:', error);
-        console.log('🔄 Falling back to curated sample texts...');
-
-        // Fall back to curated sample texts if OpenAI API fails
-        const randomIndex = Math.floor(Math.random() * sampleTexts.length);
-        const fallbackText = sampleTexts[randomIndex];
+        showInlineError(`❌ Failed to generate AI text: ${error.message}`, 'textInput');
 
         if (textInput) {
-            textInput.value = fallbackText;
-            textInput.style.borderColor = '#f59e0b';
-            textInput.style.boxShadow = '0 0 0 0.2rem rgba(245, 158, 11, 0.25)';
+            textInput.value = '';
+            textInput.style.borderColor = '#ef4444';
+            textInput.style.boxShadow = '0 0 0 0.2rem rgba(239, 68, 68, 0.25)';
             setTimeout(() => {
                 textInput.style.borderColor = '';
                 textInput.style.boxShadow = '';
-            }, 2000);
+            }, 3000);
         }
-
-        showInlineError(`⚠️ OpenAI API unavailable, using sample text (${randomIndex + 1} of ${sampleTexts.length})`, 'textInput');
     }
 }
 
-// API Key Management Function
-function manageApiKey() {
-    console.log('🔑 Managing API Key...');
-
-    const currentKey = sessionStorage.getItem('openai_api_key') || localStorage.getItem('openai_api_key') || '';
-    const maskedKey = currentKey ? `${currentKey.substring(0, 7)}...${currentKey.substring(currentKey.length - 4)}` : 'Not set';
-
-    const newKey = prompt(
-        `Current OpenAI API Key: ${maskedKey}\n\n` +
-        'Enter your OpenAI API Key (or leave empty to remove):\n\n' +
-        'Note: This key is stored locally in your browser and is only used for generating sample text.',
-        ''
-    );
-
-    if (newKey === null) {
-        console.log('🔑 API Key management cancelled');
-        return;
-    }
-
-    if (newKey.trim() === '') {
-        sessionStorage.removeItem('openai_api_key');
-        localStorage.removeItem('openai_api_key');
-        console.log('🔑 API Key removed');
-        alert('✅ API Key removed successfully');
-    } else if (newKey.startsWith('sk-')) {
-        // Prefer sessionStorage to avoid long-lived persistence
-        sessionStorage.setItem('openai_api_key', newKey.trim());
-        console.log('🔑 API Key updated');
-        alert('✅ API Key saved successfully');
-    } else {
-        console.log('🔑 Invalid API Key format');
-        alert('❌ Invalid API Key format. OpenAI API keys should start with "sk-"');
-    }
-}
-
-// Reflect API key state on the button, if present
-function updateApiKeyButtonStatus() {
-    const btn = document.getElementById('apiKeyBtn');
-    if (!btn) return;
-    const hasKey = !!(sessionStorage.getItem('openai_api_key') || localStorage.getItem('openai_api_key'));
-    btn.textContent = hasKey ? 'Change API Key' : 'Manage API Key';
-    btn.classList.toggle('btn-success', hasKey);
-    btn.classList.toggle('btn-outline-secondary', !hasKey);
-}
-window.updateApiKeyButtonStatus = updateApiKeyButtonStatus;
-
 // Essential Processing Functions (restored from simple-demo-functions.js)
 
-async function processText(skipStateCheck = false) {
+async function processText() {
     console.log('🚀 Processing text...');
-
-    // Check if processing is already in progress (skip if state management is handled externally)
-    if (!skipStateCheck && typeof LayoutManager !== 'undefined' && LayoutManager.isProcessing) {
-        console.warn('⚠️ Processing blocked - operation already in progress');
-        return;
-    }
-
     const text = document.getElementById('textInput').value;
     console.log('🔍 Text from input:', text);
     console.log('🔍 Text length:', text.length);
@@ -710,16 +1171,6 @@ async function processText(skipStateCheck = false) {
 
 async function testWithRealAPI() {
     console.log('🌐 Testing with real API...');
-
-    // Ensure processing state is properly set
-    if (typeof LayoutManager !== 'undefined' && !LayoutManager.isProcessing) {
-        console.warn('⚠️ testWithRealAPI called without processing state - setting now');
-        if (!LayoutManager.showProcessingState()) {
-            console.error('❌ Failed to set processing state in testWithRealAPI');
-            return;
-        }
-    }
-
     const startTime = performance.now();
 
     // Initialize progress console
@@ -763,6 +1214,16 @@ async function testWithRealAPI() {
 
             chartContainer.appendChild(loadingDiv);
 
+            // Update progress messages
+            setTimeout(() => {
+                const msg = document.getElementById('emotionLoadingMessage');
+                if (msg) msg.textContent = 'Loading DeBERTa v3 Large model (this may take a moment)...';
+            }, 5000);
+
+            setTimeout(() => {
+                const msg = document.getElementById('emotionLoadingMessage');
+                if (msg) msg.textContent = 'Processing your text with AI emotion analysis...';
+            }, 15000);
         }
 
         updateElement('primaryEmotion', 'Loading...');
@@ -780,12 +1241,31 @@ async function testWithRealAPI() {
         addToProgressConsole(`Text prepared for analysis (${testText.length} characters)`, 'success');
         addToProgressConsole('🧠 Initializing DeBERTa v3 Large emotion model...', 'processing');
         console.log('🔥 Calling emotion API...');
+        const apiUrl = `https://samo-unified-api-optimized-frrnetyhfa-uc.a.run.app/analyze/emotion?text=${encodeURIComponent(testText)}`;
+
+        const controller = new AbortController();
+        const timeoutId = setTimeout(() => controller.abort('Request timeout after 90 seconds - API may be experiencing cold start delays'), 90000); // Increased for cold starts
+
         addToProgressConsole('🌐 Sending request to emotion analysis API...', 'processing');
-        // Reuse global client; leverage high-level API with built-in fallbacks
-        const apiClient = window.apiClient || (window.apiClient = new SAMOAPIClient());
-        const data = await apiClient.detectEmotions(testText);
+        const response = await fetch(apiUrl, {
+            method: 'POST',
+            headers: {
+                'Content-Length': '0',
+                'Cache-Control': 'no-cache',
+                'Pragma': 'no-cache'
+            },
+            signal: controller.signal
+        });
+
+        clearTimeout(timeoutId);
+
+        if (!response.ok) {
+            addToProgressConsole(`API call failed: ${response.status} ${response.statusText}`, 'error');
+            throw new Error(`API call failed: ${response.status} ${response.statusText}`);
+        }
 
         addToProgressConsole('✅ Emotion analysis API response received', 'success');
+        const data = await response.json();
         console.log('✅ Real API response:', data);
 
         // Process emotion data
@@ -844,13 +1324,7 @@ async function testWithRealAPI() {
         showResultsSections();
 
     } catch (error) {
-        console.error('❌ Error in testWithRealAPI:', error.message, error.status, error.response?.data);
-
-        // Reset processing state on error
-        if (typeof LayoutManager !== 'undefined' && LayoutManager.isProcessing) {
-            LayoutManager.endProcessing();
-            console.log('🔧 Processing state reset due to error');
-        }
+        console.error('❌ Error in testWithRealAPI:', error);
 
         // Update processing status to error
         updateElement('processingStatusCompact', 'Error');
@@ -870,80 +1344,73 @@ async function testWithRealAPI() {
             addToProgressConsole(`Processing failed: ${error.message}`, 'error');
             showInlineError(`❌ Failed to process text: ${error.message}`, 'textInput');
         }
-
-        // IMMEDIATELY return to initial state on error (no delay)
-        if (typeof LayoutManager !== 'undefined') {
-            LayoutManager.resetToInitialState();
-        }
     }
 }
 
 async function callSummarizationAPI(text) {
     console.log('📝 Calling real summarization API...');
-    console.log('📝 Input text length:', text.length);
-    console.log('📝 Input text preview:', text.substring(0, 100) + '...');
     addToProgressConsole('🌐 Sending request to summarization API...', 'processing');
 
     try {
-        const apiClient = window.apiClient || (window.apiClient = new SAMOAPIClient());
-        const data = await apiClient.summarizeText(text);
+        const params = new URLSearchParams({
+            text: text
+        });
 
-        addToProgressConsole('✅ Summarization API response received', 'success');
-        console.log('✅ Summarization API response (full):', JSON.stringify(data, null, 2));
+        const apiUrl = `${window.SAMO_CONFIG.API.BASE_URL}${window.SAMO_CONFIG.API.ENDPOINTS.SUMMARIZE}?${params.toString()}`;
 
-        // Extract summary from response - be more thorough in extraction
-        addToProgressConsole('🔍 Processing summarization results...', 'processing');
+        const controller = new AbortController();
+        const timeoutId = setTimeout(() => controller.abort(), 45000);
 
-        // Log all possible fields to debug response structure
-        console.log('📝 Response fields available:', Object.keys(data));
+        const response = await fetch(apiUrl, {
+            method: 'POST',
+            headers: {
+                'Content-Length': '0',
+                'Cache-Control': 'no-cache',
+                'Pragma': 'no-cache'
+            },
+            signal: controller.signal
+        });
 
-        let summaryText = data.summary || data.text || data.summarized_text || data.result || data.output || data.generated_text;
+        clearTimeout(timeoutId);
 
-        // Check if the response is nested
-        if (!summaryText && data.data) {
-            summaryText = data.data.summary || data.data.text || data.data.summarized_text || data.data.result || data.data.output;
+        if (!response.ok) {
+            addToProgressConsole(`Summarization API failed: ${response.status} ${response.statusText}`, 'error');
+            throw new Error(`Summarization API failed: ${response.status} ${response.statusText}`);
         }
 
-        // Log the extracted summary
-        console.log('📝 Extracted summary text:', summaryText);
+        addToProgressConsole('✅ Summarization API response received', 'success');
+        const data = await response.json();
+        console.log('✅ Summarization API response:', data);
+
+        // Extract summary from response
+        addToProgressConsole('🔍 Processing summarization results...', 'processing');
+        const possibleFields = ['summary', 'text', 'summarized_text', 'result', 'output'];
+        let summaryText = null;
 
-        if (summaryText && summaryText.trim()) {
+        for (const field of possibleFields) {
+            if (data[field] && typeof data[field] === 'string') {
+                summaryText = data[field];
+                break;
+            }
+        }
+
+        if (summaryText) {
             updateElement('summaryText', summaryText);
             updateElement('originalLength', text.length);
             updateElement('summaryLength', summaryText.length);
             addToProgressConsole(`Summary generated successfully (${summaryText.length} characters)`, 'success');
-            console.log('✅ Summary successfully displayed');
         } else {
             console.warn('⚠️ No valid summary found in response');
-            console.warn('⚠️ Full response structure:', JSON.stringify(data, null, 2));
             addToProgressConsole('No valid summary found in API response', 'warning');
-            updateElement('summaryText', 'Summary not available - API response did not contain summary text');
+            updateElement('summaryText', 'Summary not available');
         }
 
         return summaryText;
 
     } catch (error) {
         console.error('❌ Error in callSummarizationAPI:', error);
-        console.error('❌ Error details:', {
-            message: error.message,
-            stack: error.stack,
-            name: error.name
-        });
-
-        // More specific error messages
-        let errorMessage = 'Failed to generate summary';
-        if (error.message.includes('Failed to fetch')) {
-            errorMessage = 'Network error: Could not connect to summarization API';
-        } else if (error.message.includes('timeout')) {
-            errorMessage = 'Request timeout: Summarization API took too long to respond';
-        } else if (error.message.includes('500')) {
-            errorMessage = 'Server error: Summarization API encountered an internal error';
-        } else if (error.message.includes('404')) {
-            errorMessage = 'API endpoint not found: Please check API configuration';
-        }
-
-        addToProgressConsole(`Summarization failed: ${errorMessage}`, 'error');
-        updateElement('summaryText', errorMessage);
+        addToProgressConsole(`Summarization failed: ${error.message}`, 'error');
+        updateElement('summaryText', 'Failed to generate summary');
         return null;
     }
 }
@@ -975,10 +1442,10 @@ function showResultsSections() {
 
 // Progress Console Functions
 function addToProgressConsole(message, type = 'info') {
-    const consoleEl = document.getElementById('progressConsole');
+    const console = document.getElementById('progressConsole');
     const consoleRow = document.getElementById('progressConsoleRow');
 
-    if (!consoleEl) return;
+    if (!console) return;
 
     // Show console if hidden
     if (consoleRow) {
@@ -1015,36 +1482,33 @@ function addToProgressConsole(message, type = 'info') {
     const messageDiv = document.createElement('div');
     messageDiv.className = className;
 
-    // Create timestamp span safely
+    // Create elements safely to prevent XSS
     const timestampSpan = document.createElement('span');
     timestampSpan.className = 'text-muted';
     timestampSpan.textContent = `[${timestamp}]`;
 
-    // Create icon span safely
     const iconSpan = document.createElement('span');
-    iconSpan.textContent = icon;
+    iconSpan.textContent = ` ${icon} `;
 
-    // Create message span safely
     const messageSpan = document.createElement('span');
-    messageSpan.textContent = ` ${message}`;
+    messageSpan.textContent = message;
 
-    // Append elements safely
     messageDiv.appendChild(timestampSpan);
     messageDiv.appendChild(iconSpan);
     messageDiv.appendChild(messageSpan);
 
-    consoleEl.appendChild(messageDiv);
-    consoleEl.scrollTop = consoleEl.scrollHeight;
+    console.appendChild(messageDiv);
+    console.scrollTop = console.scrollHeight;
 }
 
 function clearProgressConsole() {
-    const consoleEl = document.getElementById('progressConsole');
-    if (consoleEl) {
-        consoleEl.textContent = '';
+    const console = document.getElementById('progressConsole');
+    if (console) {
+        console.textContent = '';
         const readyDiv = document.createElement('div');
         readyDiv.className = 'text-success';
         readyDiv.textContent = 'SAMO-DL Processing Console Ready...';
-        consoleEl.appendChild(readyDiv);
+        console.appendChild(readyDiv);
     }
 }
 
@@ -1055,20 +1519,12 @@ function updateElement(id, value) {
         if (element) {
             if (id === 'summaryText') {
                 // Special handling for summary text - use dark-theme compatible styling
-                // Clear existing content safely
-                element.textContent = '';
-
-                // Create container div safely
-                const containerDiv = document.createElement('div');
-                containerDiv.className = 'p-3 bg-dark border border-secondary rounded text-light';
-
-                // Set text content safely
-                const textContent = value !== null && value !== undefined ? value : 'No summary available';
-                containerDiv.textContent = textContent;
-
-                // Append to element
-                element.appendChild(containerDiv);
-
+                // Create wrapper div with safe content to prevent XSS
+                const wrapper = document.createElement('div');
+                wrapper.className = 'p-3 bg-dark border border-secondary rounded text-light';
+                wrapper.textContent = value !== null && value !== undefined ? value : 'No summary available';
+                element.textContent = ''; // Clear existing content
+                element.appendChild(wrapper);
                 console.log(`✅ Updated summary text: ${value}`);
                 // Only add success message if it's actually a successful summary (not an error message)
                 if (value && !value.includes('Failed to') && !value.includes('not available')) {
@@ -1100,7 +1556,7 @@ function createEmotionChart(emotionData) {
         }
 
         // Clear any existing content
-        chartContainer.textContent = '';
+        chartContainer.innerHTML = '';
 
         if (!emotionData || emotionData.length === 0) {
             const noDataDiv = document.createElement('div');
@@ -1114,7 +1570,7 @@ function createEmotionChart(emotionData) {
         // Take top 5 emotions
         const top5Emotions = emotionData.slice(0, 5);
 
-        // Create simple bar chart with Bootstrap classes using DOM methods
+        // Create simple bar chart with Bootstrap classes using safe DOM manipulation
         const emotionBarsDiv = document.createElement('div');
         emotionBarsDiv.className = 'emotion-bars';
 
@@ -1126,30 +1582,30 @@ function createEmotionChart(emotionData) {
             const colors = ['primary', 'success', 'warning', 'info', 'secondary'];
             const colorClass = colors[index % colors.length];
 
-            // Create main container div
-            const emotionDiv = document.createElement('div');
-            emotionDiv.className = 'mb-2';
+            // Create emotion bar container
+            const barContainer = document.createElement('div');
+            barContainer.className = 'mb-2';
 
-            // Create header div
+            // Create header with emotion name and confidence
             const headerDiv = document.createElement('div');
             headerDiv.className = 'd-flex justify-content-between align-items-center mb-1';
 
-            // Create name span
-            const nameSpan = document.createElement('small');
-            nameSpan.className = 'fw-bold text-capitalize';
-            nameSpan.textContent = name;
+            const nameSmall = document.createElement('small');
+            nameSmall.className = 'fw-bold text-capitalize';
+            nameSmall.textContent = name;
+
+            const confidenceSmall = document.createElement('small');
+            confidenceSmall.className = 'text-muted';
+            confidenceSmall.textContent = `${confidence}%`;
 
-            // Create confidence span
-            const confidenceSpan = document.createElement('small');
-            confidenceSpan.className = 'text-muted';
-            confidenceSpan.textContent = `${confidence}%`;
+            headerDiv.appendChild(nameSmall);
+            headerDiv.appendChild(confidenceSmall);
 
-            // Create progress container
+            // Create progress bar
             const progressDiv = document.createElement('div');
             progressDiv.className = 'progress';
             progressDiv.style.height = '20px';
 
-            // Create progress bar
             const progressBar = document.createElement('div');
             progressBar.className = `progress-bar bg-${colorClass}`;
             progressBar.style.width = `${percentage}%`;
@@ -1158,17 +1614,15 @@ function createEmotionChart(emotionData) {
             progressBar.setAttribute('aria-valuemin', '0');
             progressBar.setAttribute('aria-valuemax', '100');
 
-            // Assemble the structure
-            headerDiv.appendChild(nameSpan);
-            headerDiv.appendChild(confidenceSpan);
             progressDiv.appendChild(progressBar);
-            emotionDiv.appendChild(headerDiv);
-            emotionDiv.appendChild(progressDiv);
-            emotionBarsDiv.appendChild(emotionDiv);
+
+            // Assemble the bar container
+            barContainer.appendChild(headerDiv);
+            barContainer.appendChild(progressDiv);
+
+            emotionBarsDiv.appendChild(barContainer);
         });
 
-        // Clear existing content and append new content safely
-        chartContainer.textContent = '';
         chartContainer.appendChild(emotionBarsDiv);
 
         addToProgressConsole(`Emotion chart created with ${top5Emotions.length} emotions`, 'success');
@@ -1178,7 +1632,6 @@ function createEmotionChart(emotionData) {
         addToProgressConsole(`Error creating emotion chart: ${error.message}`, 'error');
         const chartContainer = document.getElementById('emotionChart');
         if (chartContainer) {
-            chartContainer.textContent = '';
             const errorDiv = document.createElement('div');
             errorDiv.className = 'text-danger text-center p-3';
             errorDiv.textContent = 'Error creating chart';
@@ -1191,9 +1644,6 @@ function createEmotionChart(emotionData) {
 function resetToInputScreen() {
     console.log('🔄 Resetting to input screen...');
 
-    // IMMEDIATELY clear all result content to prevent remnants
-    clearAllResultContent();
-
     // Clear text input
     const textInput = document.getElementById('textInput');
     if (textInput) {
@@ -1224,78 +1674,24 @@ function resetToInputScreen() {
     const inputLayout = document.getElementById('inputLayout');
 
     if (resultsLayout && inputLayout) {
-        console.log('🔄 Transitioning layouts: results -> input');
-
-        // IMMEDIATELY show input layout (don't wait for animation)
-        inputLayout.classList.remove('d-none');
-        inputLayout.style.display = 'block'; // Force display
-        inputLayout.style.opacity = '1';
-        inputLayout.style.transform = 'translateY(0)';
-        console.log('✅ Input layout should now be visible');
-
-        // Animate results layout out
+        // Animate transition back to input
         resultsLayout.style.opacity = '0';
         resultsLayout.style.transform = 'translateY(20px)';
 
         setTimeout(() => {
             resultsLayout.classList.add('d-none');
-            console.log('✅ Results layout hidden');
+            inputLayout.classList.remove('d-none');
+
+            setTimeout(() => {
+                inputLayout.style.opacity = '1';
+                inputLayout.style.transform = 'translateY(0)';
+            }, 50);
         }, 300);
-    } else {
-        console.error('❌ Layout elements not found:', { resultsLayout: !!resultsLayout, inputLayout: !!inputLayout });
     }
 
     console.log('✅ Reset completed');
 }
 
-// NEW: Function to immediately clear all result content
-function clearAllResultContent() {
-    console.log('🧹 Clearing all result content immediately...');
-
-    // Clear emotion analysis results
-    updateElement('primaryEmotion', '-');
-    updateElement('emotionalIntensity', '-');
-    updateElement('sentimentScore', '-');
-    updateElement('confidenceRange', '-');
-    updateElement('modelDetails', '-');
-
-    // Clear emotion chart
-    const emotionChart = document.getElementById('emotionChart');
-    if (emotionChart) {
-        emotionChart.textContent = '';
-    }
-
-    // Clear emotion badges
-    const emotionBadges = document.getElementById('emotionBadges');
-    if (emotionBadges) {
-        emotionBadges.textContent = '';
-    }
-
-    // Clear emotion details
-    const emotionDetails = document.getElementById('emotionDetails');
-    if (emotionDetails) {
-        emotionDetails.textContent = '';
-    }
-
-    // Clear summarization results
-    const summaryText = document.getElementById('summaryText');
-    if (summaryText) {
-        summaryText.textContent = '';
-    }
-    updateElement('originalLength', '-');
-    updateElement('summaryLength', '-');
-
-    // Clear transcription results
-    const transcriptionText = document.getElementById('transcriptionText');
-    if (transcriptionText) {
-        transcriptionText.textContent = '';
-    }
-    updateElement('transcriptionConfidence', '-');
-    updateElement('transcriptionDuration', '-');
-
-    console.log('✅ All result content cleared');
-}
-
 // Make functions globally available under a namespace to avoid pollution
 window.SamoDemo = {
     generateSampleText,
@@ -1308,7 +1704,4 @@ window.SamoDemo = {
     clearProgressConsole,
     createEmotionChart,
     resetToInputScreen,
-    clearAllResultContent,
-    manageApiKey,
-    clearAll: clearAllResultContent, // Alias for clearAll function
 };
diff --git a/website/js/config.js b/website/js/config.js
index 08ec6b9ac..45be0ba97 100644
--- a/website/js/config.js
+++ b/website/js/config.js
@@ -1,126 +1,104 @@
-// SAMO-DL API Configuration
-// This file centralizes API endpoint configuration for the website
+/**
+ * SAMO Configuration
+ * Centralized configuration for API endpoints and keys
+ * This file should be loaded before other JavaScript files
+ */
 
 window.SAMO_CONFIG = {
-  API: {
-    // Base URL for the SAMO-DL API
-    // Replace with your actual deployment URL
-    BASE_URL: 'https://samo-unified-api-frrnetyhfa-uc.a.run.app',
-
-    // Alternative URLs for different environments
-    // Uncomment and modify as needed
-    // DEV_URL: 'http://localhost:8000',
-    // STAGING_URL: 'https://samo-staging-api.example.com',
-    // PROD_URL: 'https://samo-prod-api.example.com',
-
-    // API endpoints
-    ENDPOINTS: {
-      PREDICT: '/predict',
-      PREDICT_BATCH: '/predict_batch',
-      TRANSCRIBE_VOICE: '/transcribe/voice',
-      TRANSCRIBE_BATCH: '/transcribe/batch',
-      SUMMARIZE_TEXT: '/summarize/text',
-      ANALYZE_JOURNAL: '/analyze/journal',
-      HEALTH: '/health',
-      METRICS: '/metrics',
-      MONITORING_DASHBOARD: '/monitoring/dashboard',
-      VERSION: '/version',
-      DOCS: '/docs',
-      OPENAPI: '/openapi.json',
-
-      // Authentication endpoints
-      AUTH: {
-        REGISTER: '/auth/register',
-        LOGIN: '/auth/login',
-        REFRESH: '/auth/refresh',
-        LOGOUT: '/auth/logout',
-        PROFILE: '/auth/profile'
-      },
-
-      // WebSocket endpoints
-      WS: {
-        CHAT: '/ws/chat',
-        TRANSCRIBE: '/ws/transcribe'
-      }
+    // API Configuration
+    API: {
+        BASE_URL: 'https://samo-unified-api-optimized-frrnetyhfa-uc.a.run.app',
+        ENDPOINTS: {
+            EMOTION: '/analyze/emotion',
+            SUMMARIZE: '/analyze/summarize',
+            JOURNAL: '/analyze/journal',
+            HEALTH: '/health',
+            READY: '/ready',
+            TRANSCRIBE: '/transcribe',
+            VOICE_JOURNAL: '/analyze/voice-journal'
+        },
+        TIMEOUT: 45000, // 45 seconds (emotion analysis can take ~28s)
+        RETRY_ATTEMPTS: 3
     },
 
-    // Default timeout settings (in milliseconds)
-    TIMEOUTS: {
-      DEFAULT: 10000,    // 10 seconds
-      LONG_RUNNING: 30000, // 30 seconds
-      WEBSOCKET: 5000    // 5 seconds
+    // OpenAI Configuration (for client-side text generation)
+    OPENAI: {
+        API_KEY: '', // Set via environment or server injection
+        API_URL: 'https://api.openai.com/v1/chat/completions',
+        MODEL: 'gpt-3.5-turbo',
+        MAX_TOKENS: 200,
+        TEMPERATURE: 0.7
     },
 
-    // Rate limiting configuration
-    RATE_LIMITS: {
-      MAX_REQUESTS_PER_MINUTE: 60,
-      BURST_LIMIT: 10
-    }
-  },
-
-  // UI Configuration
-  UI: {
-    // Demo settings
-    DEMO: {
-      MAX_TEXT_LENGTH: 5000,
-      MAX_BATCH_SIZE: 10,
-      ENABLE_VOICE_RECORDING: true,
-      ENABLE_WEBSOCKET: true
+    // External Services
+    EXTERNAL: {
+        HUGGINGFACE: {
+            API_URL: 'https://api-inference.huggingface.co/models/gpt2',
+            MAX_LENGTH: 150
+        },
+        GOOGLE_FONTS: 'https://fonts.googleapis.com',
+        CDN: {
+            BOOTSTRAP: 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css',
+            CHART_JS: 'https://cdn.jsdelivr.net/npm/chart.js',
+            FONT_AWESOME: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css'
+        }
     },
 
-    // Monitoring refresh interval (in milliseconds)
-    MONITORING_REFRESH_INTERVAL: 30000, // 30 seconds
+    // Development/Production flags
+    ENVIRONMENT: 'production', // 'development' or 'production'
+    DEBUG: false,
 
-    // Animation settings
-    ANIMATIONS: {
-      ENABLED: true,
-      DURATION: 300
+    // Feature flags
+    FEATURES: {
+        ENABLE_OPENAI: true, // Enabled by default for core functionality
+        ENABLE_MOCK_DATA: false, // Always use real APIs
+        ENABLE_ANALYTICS: false
     }
-  },
-
-  // Feature flags
-  FEATURES: {
-    ENABLE_AUTH: true,
-    ENABLE_VOICE_TRANSCRIPTION: true,
-    ENABLE_BATCH_PROCESSING: true,
-    ENABLE_TEXT_SUMMARIZATION: true,
-    ENABLE_REAL_TIME_MONITORING: true,
-    ENABLE_SECURITY_TESTING: true,
-    ENABLE_WEBSOCKET_CHAT: true
-  }
-};
-
-// Helper function to get API URL with fallback
-window.SAMO_CONFIG.getApiUrl = function(endpoint) {
-  const baseUrl = this.API.BASE_URL;
-  if (!baseUrl) {
-    console.warn('SAMO_CONFIG.API.BASE_URL is not set. Please configure your API endpoint.');
-    return null;
-  }
-
-  // Remove trailing slash from base URL and leading slash from endpoint
-  const cleanBaseUrl = baseUrl.replace(/\/$/, '');
-  const cleanEndpoint = endpoint.startsWith('/') ? endpoint : '/' + endpoint;
-
-  return cleanBaseUrl + cleanEndpoint;
 };
 
-// Helper function to get WebSocket URL
-window.SAMO_CONFIG.getWebSocketUrl = function(endpoint) {
-  const baseUrl = this.API.BASE_URL;
-  if (!baseUrl) {
-    console.warn('SAMO_CONFIG.API.BASE_URL is not set. Cannot create WebSocket URL.');
-    return null;
-  }
-
-  // Convert HTTPS to WSS
-  let wsUrl = baseUrl.replace(/^https:/, 'wss:').replace(/^http:/, 'ws:');
-
-  // Remove trailing slash from base URL and leading slash from endpoint
-  wsUrl = wsUrl.replace(/\/$/, '');
-  const cleanEndpoint = endpoint.startsWith('/') ? endpoint : '/' + endpoint;
+// Environment-specific overrides - ALWAYS USE REAL APIS
+if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
+    window.SAMO_CONFIG.ENVIRONMENT = 'development';
+    window.SAMO_CONFIG.DEBUG = true;
+
+    // For demo testing, use production API directly (CORS is enabled on the server)
+    // Keep production URL and endpoints for localhost development
+    console.log('🔧 Running in localhost development mode - using production API with CORS');
+}
+
+// Server-side configuration injection (if available)
+if (window.SAMO_SERVER_CONFIG) {
+    Object.assign(window.SAMO_CONFIG, window.SAMO_SERVER_CONFIG);
+}
+
+// Only log config in debug mode and redact sensitive fields
+if (window.SAMO_CONFIG && window.SAMO_CONFIG.DEBUG) {
+    const sanitizedConfig = { ...window.SAMO_CONFIG };
+    const sensitiveKeys = ['apiKey', 'secret', 'token', 'password', 'clientSecret'];
+
+    // Redact sensitive fields
+    sensitiveKeys.forEach(key => {
+        if (sanitizedConfig[key]) {
+            sanitizedConfig[key] = 'REDACTED';
+        }
+    });
+
+    // Also check nested objects
+    if (sanitizedConfig.API) {
+        sensitiveKeys.forEach(key => {
+            if (sanitizedConfig.API[key]) {
+                sanitizedConfig.API[key] = 'REDACTED';
+            }
+        });
+    }
 
-  return wsUrl + cleanEndpoint;
-};
+    if (sanitizedConfig.OPENAI) {
+        sensitiveKeys.forEach(key => {
+            if (sanitizedConfig.OPENAI[key]) {
+                sanitizedConfig.OPENAI[key] = 'REDACTED';
+            }
+        });
+    }
 
-console.log('SAMO-DL configuration loaded successfully');
+    console.log('🔧 SAMO Configuration loaded (debug mode):', sanitizedConfig);
+}
