diff --git a/docs/site/comprehensive-demo.html b/docs/site/comprehensive-demo.html
index 05df81eb1..b573b1f9f 100644
--- a/docs/site/comprehensive-demo.html
+++ b/docs/site/comprehensive-demo.html
@@ -17,7 +17,7 @@
     <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>
     <!-- Shared CSS -->
-    <!-- Shared CSS - styles defined inline below -->
+    <link rel="stylesheet" href="css/styles.css">
 
     <style>
         :root {
diff --git a/docs/site/css/styles.css b/docs/site/css/styles.css
new file mode 100644
index 000000000..6b03cad0f
--- /dev/null
+++ b/docs/site/css/styles.css
@@ -0,0 +1,171 @@
+/* Shared styles for SAMO-DL website */
+:root {
+  /* Color palette for modern design */
+  --primary-color: #6366f1;
+  --secondary-color: #8b5cf6;
+  --success-color: #10b981;
+  --warning-color: #f59e0b;
+  --danger-color: #ef4444;
+  --dark-color: #1f2937;
+  --light-color: #f9fafb;
+
+  /* Advanced gradients */
+  --primary-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
+  --secondary-gradient: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #3730a3 100%);
+  --dark-gradient: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
+  --accent-gradient: linear-gradient(135deg, #7c3aed 0%, #9333ea 50%, #c084fc 100%);
+
+  /* Glassmorphism effects */
+  --glass-bg: rgba(139, 92, 246, 0.1);
+  --glass-border: rgba(139, 92, 246, 0.2);
+
+  /* Animations and transitions */
+  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  --shadow-glow: 0 10px 40px rgba(139, 92, 246, 0.3);
+  --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.3);
+
+  /* Additional colors for compatibility */
+  --accent-color: #c084fc;
+  --darker-color: #0a0a1a;
+  --light-accent: #e9d5ff;
+}
+
+body {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  line-height: 1.8;
+  font-size: 17px;
+  color: #f1f5f9;
+  background: var(--dark-gradient);
+  background-attachment: fixed;
+  min-height: 100vh;
+}
+
+.navbar {
+  background: rgba(15, 15, 35, 0.95);
+  backdrop-filter: blur(20px);
+  border-bottom: 1px solid var(--glass-border);
+}
+
+.footer {
+  background: var(--dark-gradient);
+  color: #f1f5f9;
+  padding: 80px 0 40px;
+  border-top: 1px solid var(--glass-border);
+}
+
+
+/* Hero section styling */
+.hero-section {
+  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+  color: white;
+  padding: 100px 0;
+  position: relative;
+  overflow: hidden;
+}
+
+.hero-section::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
+  opacity: 0.3;
+}
+
+.hero-content {
+  position: relative;
+  z-index: 2;
+}
+
+/* Button enhancements */
+.btn-primary {
+  background: var(--primary-gradient);
+  border: none;
+  border-radius: 12px;
+  padding: 12px 30px;
+  font-weight: 600;
+  transition: var(--transition-bounce);
+  box-shadow: var(--shadow-glow);
+}
+
+.btn-primary:hover {
+  transform: translateY(-2px) scale(1.05);
+  box-shadow: 0 15px 50px rgba(139, 92, 246, 0.4);
+}
+
+/* Card and component styling */
+.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);
+  height: 100%;
+  color: inherit;
+  padding: 30px;
+  text-align: center;
+}
+
+.feature-card:hover {
+  transform: translateY(-10px) scale(1.02);
+  box-shadow: var(--shadow-glow);
+}
+
+/* Loading states and UX improvements */
+.loading-spinner {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  border: 3px solid rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  border-top-color: var(--primary-color);
+  animation: spin 1s ease-in-out infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.status-indicator {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-right: 8px;
+}
+
+.status-indicator.online {
+  background-color: var(--success-color);
+  box-shadow: 0 0 6px var(--success-color);
+}
+
+.status-indicator.offline {
+  background-color: var(--danger-color);
+  box-shadow: 0 0 6px var(--danger-color);
+}
+
+/* Enhanced form styling */
+.form-control:focus {
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 0.25rem rgba(99, 102, 241, 0.25);
+}
+
+/* Responsive improvements */
+@media (max-width: 768px) {
+  body {
+    font-size: 16px;
+    line-height: 1.6;
+  }
+
+  .feature-card {
+    padding: 20px;
+  }
+
+  .hero-section {
+    padding: 60px 0;
+  }
+}
diff --git a/docs/site/demo.html b/docs/site/demo.html
deleted file mode 100644
index a73d72aa0..000000000
--- a/docs/site/demo.html
+++ /dev/null
@@ -1,881 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Live Emotion Detection Demo - SAMO Deep Learning</title>
-    <meta name="description" content="Interactive demo of SAMO-DL emotion detection API with real-time analysis and visualization">
-
-    <!-- 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>
-    <!-- Shared CSS -->
-    <!-- Shared CSS - styles defined inline below -->
-
-    <style>
-        :root {
-            /* Color variables */
-            --primary-color: #6366f1;
-            --secondary-color: #8b5cf6;
-            --success-color: #10b981;
-            --warning-color: #f59e0b;
-            --danger-color: #ef4444;
-            --dark-color: #1f2937;
-            --light-color: #f9fafb;
-
-            /* Spacing variables */
-            --hero-padding-desktop: 60px;
-            --hero-padding-mobile: 40px;
-            --container-padding-desktop: 30px;
-            --container-padding-mobile: 20px;
-            --card-padding: 15px;
-            --section-margin: 30px;
-            --section-margin-mobile: 20px;
-
-            /* Chart dimensions */
-            --chart-height-desktop: 250px;
-            --chart-height-mobile: 200px;
-            --icon-size: 50px;
-            --icon-size-mobile: 40px;
-
-            /* Border radius */
-            --border-radius-sm: 8px;
-            --border-radius-md: 12px;
-            --border-radius-lg: 16px;
-            --border-radius-xl: 20px;
-        }
-
-        body {
-            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-            line-height: 1.6;
-            color: var(--dark-color);
-            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
-        }
-
-        .hero-section {
-            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
-            color: white;
-            padding: var(--hero-padding-desktop) 0;
-            position: relative;
-            overflow: hidden;
-        }
-
-        .hero-section::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
-            opacity: 0.3;
-        }
-
-        .hero-content {
-            position: relative;
-            z-index: 2;
-        }
-
-        .demo-container {
-            background: white;
-            border-radius: var(--border-radius-xl);
-            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
-            padding: var(--container-padding-desktop);
-            margin: calc(-1 * var(--container-padding-desktop)) 0 var(--section-margin) 0;
-            position: relative;
-            z-index: 10;
-        }
-
-        .emotion-card {
-            background: white;
-            border-radius: var(--border-radius-md);
-            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-            transition: all 0.3s ease;
-            border: 2px solid transparent;
-            margin-bottom: 15px;
-        }
-
-        .emotion-card:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
-        }
-
-        .emotion-card.active {
-            border-color: var(--primary-color);
-            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
-            color: white;
-        }
-
-        .confidence-bar {
-            height: 6px;
-            border-radius: 3px;
-            background: #e5e7eb;
-            overflow: hidden;
-            margin-top: 8px;
-        }
-
-        .confidence-fill {
-            height: 100%;
-            border-radius: 3px;
-            transition: width 0.8s ease;
-        }
-
-        .stats-card {
-            background: rgba(255, 255, 255, 0.1);
-            backdrop-filter: blur(10px);
-            border-radius: var(--border-radius-lg);
-            padding: 20px;
-            text-align: center;
-            border: 1px solid rgba(255, 255, 255, 0.2);
-        }
-
-        .navbar {
-            background: rgba(255, 255, 255, 0.95);
-            backdrop-filter: blur(10px);
-        }
-
-        .footer {
-            background: var(--dark-color);
-            color: white;
-            padding: 60px 0 30px;
-        }
-
-        .loading-spinner {
-            display: none;
-        }
-
-        .loading-spinner.show {
-            display: block;
-        }
-
-        .result-section {
-            display: none;
-        }
-
-        .result-section.show {
-            display: block;
-            animation: fadeIn 0.5s ease-in;
-        }
-
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(20px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-
-        .pulse {
-            animation: pulse 2s infinite;
-        }
-
-        @keyframes pulse {
-            0% { transform: scale(1); }
-            50% { transform: scale(1.05); }
-            100% { transform: scale(1); }
-        }
-
-        .floating-card {
-            animation: float 6s ease-in-out infinite;
-        }
-
-        @keyframes float {
-            0%, 100% { transform: translateY(0px); }
-            50% { transform: translateY(-20px); }
-        }
-
-        .gradient-text {
-            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-        }
-
-        /* Mobile optimizations */
-        @media (max-width: 768px) {
-            .hero-section {
-                padding: var(--hero-padding-mobile) 0;
-            }
-
-            .demo-container {
-                padding: var(--container-padding-mobile);
-                margin: calc(-1 * var(--container-padding-mobile)) 0 var(--section-margin-mobile) 0;
-            }
-
-            .chart-container {
-                height: var(--chart-height-mobile);
-            }
-
-            .stats-card {
-                padding: 15px;
-                margin-bottom: 10px;
-            }
-        }
-
-        /* Compact layout for better UX */
-        .compact-section {
-            margin-bottom: var(--section-margin);
-        }
-
-        .compact-card {
-            padding: var(--card-padding);
-        }
-
-        .compact-chart {
-            height: var(--chart-height-desktop);
-        }
-
-        @media (max-width: 768px) {
-            .compact-chart {
-                height: var(--chart-height-mobile);
-            }
-        }
-    </style>
-</head>
-<body>
-    <!-- Navigation -->
-    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
-        <div class="container">
-            <a class="navbar-brand fw-bold" href="index.html">
-                <i class="fas fa-brain text-primary me-2"></i>
-                SAMO-DL
-            </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">
-                        <a class="nav-link active" href="demo.html">Demo</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="integration.html">Integration</a>
-                    </li>
-                </ul>
-            </div>
-        </div>
-    </nav>
-
-    <!-- Hero Section -->
-    <section class="hero-section">
-        <div class="container">
-            <div class="row align-items-center hero-content">
-                <div class="col-lg-8">
-                    <h1 class="display-5 fw-bold mb-3">
-                        Live Emotion Detection Demo
-                    </h1>
-                    <p class="lead mb-4">
-                        Experience SAMO-DL's emotion detection API in real-time. Test with your own text and see instant results.
-                    </p>
-                    <div class="d-flex gap-3 flex-wrap">
-                        <a href="#demo" class="btn btn-light btn-lg">
-                            <i class="fas fa-play me-2"></i>
-                            Start Demo
-                        </a>
-                        <a href="integration.html" class="btn btn-outline-light btn-lg">
-                            <i class="fas fa-code me-2"></i>
-                            View Code
-                        </a>
-                    </div>
-                </div>
-                <div class="col-lg-4">
-                    <div class="row g-2">
-                        <div class="col-6">
-                            <div class="stats-card">
-                                <h4 class="fw-bold">>90%</h4>
-                                <small>F1 Score</small>
-                            </div>
-                        </div>
-                        <div class="col-6">
-                            <div class="stats-card">
-                                <h4 class="fw-bold"><50ms</h4>
-                                <small>Latency</small>
-                            </div>
-                        </div>
-                        <div class="col-6">
-                            <div class="stats-card">
-                                <h4 class="fw-bold">28</h4>
-                                <small>Emotions</small>
-                            </div>
-                        </div>
-                        <div class="col-6">
-                            <div class="stats-card">
-                                <h4 class="fw-bold">2.3x</h4>
-                                <small>Faster</small>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
-
-    <!-- Demo Container -->
-    <section id="demo" class="py-4">
-        <div class="container">
-            <div class="demo-container">
-                <div class="row">
-                    <div class="col-lg-8 mx-auto text-center mb-4">
-                        <h2 class="display-6 fw-bold mb-2">Interactive Emotion Detection</h2>
-                        <p class="text-muted">
-                            Enter any text below and watch our AI analyze emotions in real-time
-                        </p>
-                    </div>
-                </div>
-
-                <!-- Input Section -->
-                <div class="row mb-4">
-                    <div class="col-lg-8 mx-auto">
-                        <div class="mb-3">
-                            <label for="demoText" class="form-label fw-bold">Enter your text:</label>
-                            <textarea
-                                class="form-control"
-                                id="demoText"
-                                rows="3"
-                                placeholder="I am feeling really excited about this project! The possibilities are endless and I can't wait to see what we can achieve together."
-                            ></textarea>
-                        </div>
-
-                        <div class="d-flex gap-2 justify-content-center flex-wrap">
-                            <button class="btn btn-primary px-4" onclick="analyzeEmotion()">
-                                <i class="fas fa-magic me-2"></i>
-                                Analyze Emotions
-                            </button>
-                            <button class="btn btn-outline-secondary" onclick="loadSampleTexts()">
-                                <i class="fas fa-lightbulb me-2"></i>
-                                Load Examples
-                            </button>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Loading Section -->
-                <div id="loadingSection" class="loading-spinner text-center mb-4">
-                    <div class="spinner-border text-primary mb-2" style="width: 2rem; height: 2rem;" role="status">
-                        <span class="visually-hidden">Loading...</span>
-                    </div>
-                    <p class="text-muted mb-0">Analyzing emotions...</p>
-                </div>
-
-                <!-- Results Section -->
-                <div id="resultSection" class="result-section">
-                    <div class="row">
-                        <div class="col-lg-8 mx-auto">
-                            <h4 class="fw-bold mb-3 text-center">Analysis Results</h4>
-
-                            <!-- Top Emotions -->
-                            <div class="row mb-3">
-                                <div class="col-12">
-                                    <h6 class="fw-bold mb-2">Detected Emotions:</h6>
-                                    <div id="emotionResults" class="row g-2"></div>
-                                </div>
-                            </div>
-
-                            <!-- Single Optimized Chart -->
-                            <div class="row">
-                                <div class="col-12">
-                                    <div class="card border-0 shadow-sm compact-card">
-                                        <div class="card-body">
-                                            <h6 class="fw-bold mb-2">Emotion Confidence Distribution</h6>
-                                            <div class="chart-container compact-chart">
-                                                <canvas id="confidenceChart"></canvas>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <!-- API Information -->
-                            <div class="row mt-3">
-                                <div class="col-12">
-                                    <div class="card border-0 bg-light compact-card">
-                                        <div class="card-body text-center">
-                                            <div class="row g-3">
-                                                <div class="col-md-3">
-                                                    <small class="text-muted d-block">Response Time</small>
-                                                    <strong id="responseTime">-</strong>
-                                                </div>
-                                                <div class="col-md-3">
-                                                    <small class="text-muted d-block">API Status</small>
-                                                    <strong id="apiStatus">-</strong>
-                                                </div>
-                                                <div class="col-md-3">
-                                                    <small class="text-muted d-block">Avg Confidence</small>
-                                                    <strong id="avgConfidence">-</strong>
-                                                </div>
-                                                <div class="col-md-3">
-                                                    <small class="text-muted d-block">Model Version</small>
-                                                    <strong>v2.1.0</strong>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
-
-    <!-- Features Section (Compact) -->
-    <section class="py-4 bg-light">
-        <div class="container">
-            <div class="row g-3">
-                <div class="col-lg-4 col-md-6">
-                    <div class="card border-0 shadow-sm h-100 compact-card">
-                        <div class="card-body text-center">
-                            <div class="bg-primary bg-opacity-10 text-primary rounded-circle d-inline-flex align-items-center justify-content-center mb-2 feature-icon">
-                                <i class="fas fa-rocket"></i>
-                            </div>
-                            <h6 class="card-title fw-bold">Lightning Fast</h6>
-                            <p class="card-text text-muted small">
-                                Sub-50ms response times with ONNX optimization.
-                            </p>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-lg-4 col-md-6">
-                    <div class="card border-0 shadow-sm h-100 compact-card">
-                        <div class="card-body text-center">
-                            <div class="bg-success bg-opacity-10 text-success rounded-circle d-inline-flex align-items-center justify-content-center mb-2 feature-icon">
-                                <i class="fas fa-chart-line"></i>
-                            </div>
-                            <h6 class="card-title fw-bold">High Accuracy</h6>
-                            <p class="card-text text-muted small">
-                                >90% F1 score across 28 emotion categories.
-                            </p>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-lg-4 col-md-6">
-                    <div class="card border-0 shadow-sm h-100 compact-card">
-                        <div class="card-body text-center">
-                            <div class="bg-warning bg-opacity-10 text-warning rounded-circle d-inline-flex align-items-center justify-content-center mb-2 feature-icon">
-                                <i class="fas fa-shield-alt"></i>
-                            </div>
-                            <h6 class="card-title fw-bold">Production Ready</h6>
-                            <p class="card-text text-muted small">
-                                Deployed on Google Cloud Run with 99.9% uptime.
-                            </p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
-
-    <!-- Footer -->
-    <footer class="footer bg-dark text-light py-4">
-        <div class="container">
-            <div class="row">
-                <div class="col-lg-4 mb-3">
-                    <h6 class="fw-bold mb-2">
-                        <i class="fas fa-brain text-primary me-2"></i>
-                        SAMO-DL
-                    </h6>
-                    <p class="text-muted small">
-                        Production-ready emotion detection API with enterprise-grade reliability.
-                    </p>
-                </div>
-                <div class="col-lg-2 col-md-6 mb-3">
-                    <h6 class="fw-bold mb-2">Product</h6>
-                    <ul class="list-unstyled">
-                        <li><a href="index.html" class="text-muted text-decoration-none small">Home</a></li>
-                        <li><a href="demo.html" class="text-muted text-decoration-none small">Demo</a></li>
-                        <li><a href="integration.html" class="text-muted text-decoration-none small">Integration</a></li>
-                    </ul>
-                </div>
-                <div class="col-lg-2 col-md-6 mb-3">
-                    <h6 class="fw-bold mb-2">Resources</h6>
-                    <ul class="list-unstyled">
-                        <li><a href="#" class="text-muted text-decoration-none small">API Docs</a></li>
-                        <li><a href="#" class="text-muted text-decoration-none small">Examples</a></li>
-                        <li><a href="#" class="text-muted text-decoration-none small">Support</a></li>
-                    </ul>
-                </div>
-                <div class="col-lg-2 col-md-6 mb-3">
-                    <h6 class="fw-bold mb-2">Company</h6>
-                    <ul class="list-unstyled">
-                        <li><a href="#" class="text-muted text-decoration-none small">About</a></li>
-                        <li><a href="#" class="text-muted text-decoration-none small">Blog</a></li>
-                        <li><a href="#" class="text-muted text-decoration-none small">Contact</a></li>
-                    </ul>
-                </div>
-                <div class="col-lg-2 col-md-6 mb-3">
-                    <h6 class="fw-bold mb-2">Connect</h6>
-                    <div class="d-flex gap-2">
-                        <a href="https://github.com/uelkerd/SAMO--DL" class="text-muted text-decoration-none">
-                            <i class="fab fa-github"></i>
-                        </a>
-                        <a href="#" class="text-muted text-decoration-none">
-                            <i class="fab fa-twitter"></i>
-                        </a>
-                        <a href="#" class="text-muted text-decoration-none">
-                            <i class="fab fa-linkedin"></i>
-                        </a>
-                    </div>
-                </div>
-            </div>
-            <hr class="my-3">
-            <div class="row align-items-center">
-                <div class="col-md-6">
-                    <p class="text-muted mb-0 small">
-                        © 2024 SAMO-DL. All rights reserved.
-                    </p>
-                </div>
-                <div class="col-md-6 text-md-end">
-                    <p class="text-muted mb-0 small">
-                        Powered by <i class="fas fa-cloud text-primary"></i> Google Cloud Run
-                    </p>
-                </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>
-        // Configuration
-        const CONFIG = {
-            USE_REAL_API: false, // Set to true in development to use real API
-            API_ENDPOINT: 'https://samo-emotion-api-minimal-71517823771.us-central1.run.app/predict', // Cloud Run API endpoint
-            DEMO_MODE: true // Always true for demo page
-        };
-
-        let confidenceChart = null;
-
-        // Sample texts organized by categories for better maintainability
-        const sampleTexts = {
-            "Positive Emotions": [
-                "I am feeling really excited about this project! The possibilities are endless and I can't wait to see what we can achieve together.",
-                "I'm absolutely thrilled with the results! This exceeded all my expectations and I'm so proud of what we accomplished.",
-                "I'm so grateful for all the support I've received from my team. This has been an amazing journey.",
-                "I'm feeling incredibly optimistic about the future. Everything seems to be falling into place perfectly.",
-                "I'm delighted to announce that we've successfully completed the milestone ahead of schedule!"
-            ],
-            "Negative Emotions": [
-                "I'm feeling a bit anxious about the upcoming presentation, but I know I've prepared well and should do fine.",
-                "I'm feeling frustrated with the current situation, but I'm trying to stay positive and find solutions.",
-                "I'm really disappointed with how things turned out. I had such high hopes for this project.",
-                "I'm terrified about the upcoming surgery. I've never been this scared in my life.",
-                "I'm furious about the way they handled this situation. It's completely unacceptable!"
-            ],
-            "Mixed Emotions": [
-                "I'm nervous but also excited about starting my new job. It's a big change but I think it's the right move.",
-                "I'm sad to leave my old team but happy to start this new adventure. It's bittersweet.",
-                "I'm worried about the deadline but confident in our team's ability to deliver quality work.",
-                "I'm surprised by the unexpected news but grateful for the opportunity it presents.",
-                "I'm angry about the mistake but relieved that we caught it before it caused more problems."
-            ],
-            "Professional Context": [
-                "The quarterly results exceeded our targets by 15%. The team's hard work has truly paid off.",
-                "We need to address the customer complaints immediately. This is affecting our reputation.",
-                "The new product launch was a huge success! Sales are through the roof.",
-                "I'm concerned about the budget overruns. We need to find ways to cut costs.",
-                "The client is very satisfied with our work. They want to extend the contract."
-            ],
-            "Personal Context": [
-                "My grandmother passed away last week. I'm heartbroken but grateful for all the memories we shared.",
-                "I just got engaged! I'm overjoyed and can't wait to start planning our wedding.",
-                "My car broke down on the way to an important meeting. I'm so frustrated right now.",
-                "I won the lottery! I'm still in shock and don't know what to do with all this money.",
-                "My best friend is moving to another country. I'm happy for her new opportunity but sad to see her go."
-            ],
-            "Creative/Artistic Context": [
-                "The painting turned out exactly as I envisioned. I'm so proud of this masterpiece.",
-                "The concert was absolutely magical. The music moved me to tears.",
-                "I'm stuck on this creative project. Nothing I try seems to work.",
-                "The audience's reaction to my performance was incredible. I felt so alive on stage.",
-                "I'm inspired by the beautiful sunset. Nature has such a calming effect on me."
-            ],
-            "Technology/Development Context": [
-                "The code review was brutal but fair. I learned so much from the feedback.",
-                "The deployment failed again. I'm getting tired of these production issues.",
-                "The new feature is working perfectly! Users are loving the improved interface.",
-                "I'm confused by this bug. It makes no sense why it's happening.",
-                "The system is down and customers are complaining. This is a critical situation."
-            ],
-            "Social/Relationship Context": [
-                "My partner surprised me with a romantic dinner. I feel so loved and appreciated.",
-                "We had a huge argument last night. I'm still upset about what was said.",
-                "My child took their first steps today! I'm overwhelmed with joy and pride.",
-                "I'm lonely since my roommate moved out. The apartment feels so empty.",
-                "The party was amazing! I met so many interesting people and had great conversations."
-            ],
-            "Health/Wellness Context": [
-                "I just completed my first marathon! I'm exhausted but incredibly proud.",
-                "The doctor's diagnosis was a relief. It's treatable and I'll be fine.",
-                "I'm worried about my health. These symptoms are concerning.",
-                "The meditation session was so peaceful. I feel completely relaxed now.",
-                "I'm frustrated with my slow recovery. I just want to get back to normal."
-            ],
-            "Academic/Educational Context": [
-                "I aced the final exam! All those late nights studying were worth it.",
-                "I'm struggling with this math problem. It's so complex and confusing.",
-                "The professor's feedback was encouraging. I'm motivated to improve.",
-                "I'm nervous about presenting my research to the committee.",
-                "Graduation day was emotional. I'm proud of my achievements but sad to leave."
-            ],
-            "Travel/Adventure Context": [
-                "The trip was incredible! I saw so many beautiful places and met amazing people.",
-                "I'm scared about traveling alone for the first time.",
-                "The flight was delayed for hours. I'm so annoyed with the airline.",
-                "The hiking trail was breathtaking. I felt so connected to nature.",
-                "I'm excited about my upcoming vacation. I really need this break."
-            ],
-            "Business/Financial Context": [
-                "The investment paid off better than expected. I'm thrilled with the returns.",
-                "I'm stressed about the upcoming merger. So many people's jobs are at stake.",
-                "The startup pitch went perfectly. Investors were very interested.",
-                "I'm worried about the market volatility. My portfolio has taken a hit.",
-                "The promotion came as a complete surprise. I'm honored and excited."
-            ],
-            "Environmental/Nature Context": [
-                "The storm was terrifying. I've never seen weather like that before.",
-                "The sunset was absolutely stunning. I felt so peaceful watching it.",
-                "I'm concerned about climate change. We need to take action now.",
-                "The forest fire was devastating. So much wildlife was lost.",
-                "The spring flowers are blooming beautifully. Nature is so rejuvenating."
-            ]
-        };
-
-        async function analyzeEmotion() {
-            const text = document.getElementById('demoText').value.trim();
-            if (!text) {
-                alert('Please enter some text to analyze.');
-                return;
-            }
-
-            // Show loading
-            document.getElementById('loadingSection').classList.add('show');
-            document.getElementById('resultSection').classList.remove('show');
-
-            try {
-                const startTime = Date.now();
-                let emotions, responseTime;
-
-                if (CONFIG.USE_REAL_API && !CONFIG.DEMO_MODE) {
-                    // Real API call (only in development)
-                    const response = await fetch(CONFIG.API_ENDPOINT, {
-                        method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json',
-                        },
-                        body: JSON.stringify({ text: text })
-                    });
-
-                    if (!response.ok) {
-                        throw new Error(`API request failed with status ${response.status}`);
-                    }
-
-                    responseTime = Date.now() - startTime;
-                    const data = await response.json();
-                    emotions = data.emotions;
-                } else {
-                    // Demo mode - use mock data
-                    responseTime = Date.now() - startTime;
-                    emotions = generateMockEmotions(text);
-                }
-
-                displayResults(emotions, responseTime);
-                updateCharts(emotions);
-                updateAPIInfo(responseTime, emotions);
-
-            } catch (error) {
-                console.error('API call failed. Falling back to mock data. Error details:', error);
-
-                if (CONFIG.USE_REAL_API) {
-                    alert('There was a problem analyzing emotions with the API. Showing mock results instead.');
-                }
-
-                // Always use mock data on error
-                const mockEmotions = generateMockEmotions(text);
-                displayResults(mockEmotions, 45);
-                updateCharts(mockEmotions);
-                updateAPIInfo(45, mockEmotions);
-            } finally {
-                document.getElementById('loadingSection').classList.remove('show');
-            }
-        }
-
-        function loadSampleTexts() {
-            // Get all categories and randomly select one
-            const categories = Object.keys(sampleTexts);
-            const randomCategory = categories[Math.floor(Math.random() * categories.length)];
-
-            // Get texts from the selected category and randomly select one
-            const categoryTexts = sampleTexts[randomCategory];
-            const randomText = categoryTexts[Math.floor(Math.random() * categoryTexts.length)];
-
-            document.getElementById('demoText').value = randomText;
-        }
-
-        function generateMockEmotions(inputText) {
-            const emotions = [];
-
-            // Deterministically generate emotions based on text content
-            const keywordEmotionMap = [
-                { keywords: ['happy', 'joy', 'delighted', 'pleased', 'excited', 'thrilled', 'elated'], emotion: 'joy' },
-                { keywords: ['sad', 'unhappy', 'down', 'depressed', 'gloomy', 'melancholy', 'sorrow'], emotion: 'sadness' },
-                { keywords: ['angry', 'mad', 'furious', 'irritated', 'annoyed', 'frustrated'], emotion: 'anger' },
-                { keywords: ['love', 'adore', 'passion', 'affection', 'romantic', 'cherish'], emotion: 'love' },
-                { keywords: ['afraid', 'scared', 'fearful', 'terrified', 'anxious', 'worried', 'nervous'], emotion: 'fear' },
-                { keywords: ['surprised', 'amazed', 'astonished', 'shocked', 'stunned'], emotion: 'surprise' },
-                { keywords: ['grateful', 'thankful', 'appreciate', 'blessed', 'thank you'], emotion: 'gratitude' },
-                { keywords: ['proud', 'accomplished', 'achievement', 'success', 'victory'], emotion: 'pride' },
-                { keywords: ['optimistic', 'hopeful', 'positive', 'bright', 'promising'], emotion: 'optimism' },
-                { keywords: ['curious', 'interested', 'wonder', 'explore', 'discover'], emotion: 'curiosity' }
-            ];
-
-            const textLower = inputText.toLowerCase();
-            let detectedEmotions = [];
-
-            keywordEmotionMap.forEach(mapping => {
-                for (const keyword of mapping.keywords) {
-                    if (textLower.includes(keyword)) {
-                        detectedEmotions.push(mapping.emotion);
-                        break;
-                    }
-                }
-            });
-
-            // Remove duplicates and limit to 5
-            detectedEmotions = [...new Set(detectedEmotions)].slice(0, 5);
-
-            if (detectedEmotions.length === 0) {
-                emotions.push({ emotion: 'neutral', confidence: 0.9 });
-            } else {
-                detectedEmotions.forEach((emotion, idx) => {
-                    // Assign higher confidence to the first detected emotion
-                    const confidence = 0.9 - idx * 0.15;
-                    emotions.push({ emotion, confidence: Math.max(confidence, 0.2) });
-                });
-            }
-
-            return emotions;
-        }
-
-        function displayResults(emotions, responseTime) {
-            const resultsContainer = document.getElementById('emotionResults');
-            resultsContainer.innerHTML = '';
-
-            emotions.forEach((emotion, index) => {
-                const confidencePercent = Math.round(emotion.confidence * 100);
-                const colorClass = getEmotionColor(emotion.emotion);
-
-                const emotionCard = `
-                    <div class="col-md-6 col-lg-4">
-                        <div class="emotion-card ${index === 0 ? 'active' : ''}">
-                            <div class="card-body p-3">
-                                <div class="d-flex justify-content-between align-items-center mb-2">
-                                    <h6 class="mb-0 fw-bold text-capitalize">${emotion.emotion}</h6>
-                                    <span class="badge ${colorClass}">${confidencePercent}%</span>
-                                </div>
-                                <div class="confidence-bar">
-                                    <div class="confidence-fill ${colorClass.replace('bg-', 'bg-')}"
-                                         style="width: ${confidencePercent}%"></div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                `;
-                resultsContainer.innerHTML += emotionCard;
-            });
-
-            document.getElementById('resultSection').classList.add('show');
-        }
-
-        function updateCharts(emotions) {
-            // Destroy existing chart
-            if (confidenceChart) confidenceChart.destroy();
-
-            // Single optimized chart
-            const confidenceCtx = document.getElementById('confidenceChart').getContext('2d');
-            confidenceChart = new Chart(confidenceCtx, {
-                type: 'bar',
-                data: {
-                    labels: emotions.map(e => e.emotion),
-                    datasets: [{
-                        label: 'Confidence',
-                        data: emotions.map(e => e.confidence * 100),
-                        backgroundColor: emotions.map(e => getEmotionColor(e.emotion).replace('bg-', 'rgba(')),
-                        borderColor: emotions.map(e => getEmotionColor(e.emotion).replace('bg-', 'rgba(')),
-                        borderWidth: 1
-                    }]
-                },
-                options: {
-                    responsive: true,
-                    maintainAspectRatio: false,
-                    scales: {
-                        y: {
-                            beginAtZero: true,
-                            max: 100,
-                            ticks: {
-                                callback: function(value) {
-                                    return value + '%';
-                                }
-                            }
-                        }
-                    },
-                    plugins: {
-                        legend: {
-                            display: false
-                        }
-                    }
-                }
-            });
-        }
-
-        function updateAPIInfo(responseTime, emotions) {
-            document.getElementById('responseTime').textContent = `${responseTime}ms`;
-            document.getElementById('apiStatus').textContent = 'Success';
-            document.getElementById('apiStatus').className = 'text-success';
-
-            const avgConfidence = emotions.reduce((sum, e) => sum + e.confidence, 0) / emotions.length;
-            document.getElementById('avgConfidence').textContent = `${Math.round(avgConfidence * 100)}%`;
-        }
-
-        function getEmotionColor(emotion) {
-            const colors = {
-                'joy': 'bg-success',
-                'sadness': 'bg-primary',
-                'anger': 'bg-danger',
-                'love': 'bg-danger',
-                'fear': 'bg-warning',
-                'surprise': 'bg-info',
-                'gratitude': 'bg-success',
-                'pride': 'bg-warning',
-                'optimism': 'bg-success',
-                'curiosity': 'bg-info',
-                'neutral': 'bg-secondary'
-            };
-            return colors[emotion] || 'bg-secondary';
-        }
-
-        // Initialize with sample text
-        document.addEventListener('DOMContentLoaded', function() {
-            document.getElementById('demoText').value = sampleTexts[0];
-        });
-
-        // Smooth scrolling for navigation links
-        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
-            anchor.addEventListener('click', function (e) {
-                e.preventDefault();
-                const target = document.querySelector(this.getAttribute('href'));
-                if (target) {
-                    target.scrollIntoView({
-                        behavior: 'smooth',
-                        block: 'start'
-                    });
-                }
-            });
-        });
-    </script>
-</body>
-</html>
diff --git a/docs/site/index.html b/docs/site/index.html
index 38103159e..59c4aaf91 100644
--- a/docs/site/index.html
+++ b/docs/site/index.html
@@ -3,139 +3,19 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>SAMO Deep Learning - Production Emotion Detection API</title>
-    <meta name="description" content="Enterprise-grade emotion detection API with >90% F1 score and 2.3x performance optimization">
+    <title>SAMO Deep Learning - Emotion Detection API</title>
+    <meta name="description" content="Emotion detection API for text analysis">
 
     <!-- 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">
-    <!-- Shared CSS - styles defined inline below -->
-    <!-- Custom CSS -->
-    <style>
-        :root {
-            --primary-color: #6366f1;
-            --secondary-color: #8b5cf6;
-            --success-color: #10b981;
-            --warning-color: #f59e0b;
-            --danger-color: #ef4444;
-            --dark-color: #1f2937;
-            --light-color: #f9fafb;
-        }
-
-        body {
-            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-            line-height: 1.6;
-            color: var(--dark-color);
-        }
-
-        .hero-section {
-            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
-            color: white;
-            padding: 100px 0;
-            position: relative;
-            overflow: hidden;
-        }
-
-        .hero-section::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
-            opacity: 0.3;
-        }
-
-        .hero-content {
-            position: relative;
-            z-index: 2;
-        }
-
-        .feature-card {
-            border: none;
-            border-radius: 16px;
-            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-            transition: transform 0.3s ease, box-shadow 0.3s ease;
-            height: 100%;
-        }
-
-        .feature-card:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
-        }
-
-        .feature-icon {
-            width: 60px;
-            height: 60px;
-            border-radius: 12px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 24px;
-            margin-bottom: 20px;
-        }
-
-        .stats-card {
-            background: linear-gradient(135deg, var(--success-color), #34d399);
-            color: white;
-            border-radius: 16px;
-            padding: 30px;
-            text-align: center;
-        }
-
-        .demo-section {
-            background: var(--light-color);
-            padding: 80px 0;
-        }
-
-        .integration-card {
-            background: white;
-            border-radius: 16px;
-            padding: 30px;
-            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-            margin-bottom: 30px;
-        }
-
-        .code-block {
-            background: #1e293b;
-            color: #e2e8f0;
-            border-radius: 8px;
-            padding: 20px;
-            font-family: 'Fira Code', monospace;
-            font-size: 14px;
-            overflow-x: auto;
-        }
-
-        .btn-primary {
-            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
-            border: none;
-            border-radius: 8px;
-            padding: 12px 24px;
-            font-weight: 600;
-            transition: transform 0.2s ease;
-        }
-
-        .btn-primary:hover {
-            transform: translateY(-2px);
-        }
-
-        .navbar {
-            background: rgba(255, 255, 255, 0.95);
-            backdrop-filter: blur(10px);
-        }
-
-        .footer {
-            background: var(--dark-color);
-            color: white;
-            padding: 60px 0 30px;
-        }
-    </style>
+    <!-- Shared CSS -->
+    <link rel="stylesheet" href="css/styles.css">
 </head>
 <body>
     <!-- Navigation -->
-    <nav class="navbar navbar-expand-lg navbar-light fixed-top">
+    <nav class="navbar navbar-expand-lg navbar-light fixed-top" style="background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px);">
         <div class="container">
             <a class="navbar-brand fw-bold" href="#">
                 <i class="fas fa-brain text-primary me-2"></i>
@@ -148,18 +28,12 @@
                 <ul class="navbar-nav ms-auto">
                     <li class="nav-item">
                         <a class="nav-link" href="#features">Features</a>
-                    </li>
-                                               <li class="nav-item">
-                               <a class="nav-link" href="demo.html">Live Demo</a>
-                           </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="#integration">Integration</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link" href="#docs">Documentation</a>
+                        <a class="nav-link" href="#demo">Demo</a>
                     </li>
                     <li class="nav-item">
-                        <a class="btn btn-primary ms-2" href="demo.html">Try Demo</a>
+                        <a class="nav-link" href="comprehensive-demo.html">Full Demo</a>
                     </li>
                 </ul>
             </div>
@@ -172,49 +46,26 @@
             <div class="row align-items-center hero-content">
                 <div class="col-lg-6">
                     <h1 class="display-4 fw-bold mb-4">
-                        Production Emotion Detection API
+                        SAMO Emotion Detection
                     </h1>
                     <p class="lead mb-4">
-                        Enterprise-grade emotion detection with <strong>>90% F1 score</strong> and <strong>2.3x performance optimization</strong>.
-                        Ready for production integration with your applications.
+                        Text-based emotion analysis API. Try it with your text below or explore the full demo.
                     </p>
                     <div class="d-flex gap-3">
-                                                       <a href="demo.html" class="btn btn-light btn-lg">
-                                   <i class="fas fa-play me-2"></i>
-                                   Try Demo
-                               </a>
-                        <a href="#integration" class="btn btn-outline-light btn-lg">
-                            <i class="fas fa-code me-2"></i>
-                            View Code
+                        <a href="#demo" class="btn btn-light btn-lg">
+                            <i class="fas fa-play me-2"></i>
+                            Try Demo
+                        </a>
+                        <a href="comprehensive-demo.html" class="btn btn-outline-light btn-lg">
+                            <i class="fas fa-rocket me-2"></i>
+                            Full Demo
                         </a>
                     </div>
                 </div>
                 <div class="col-lg-6">
-                    <div class="row g-3">
-                        <div class="col-6">
-                            <div class="stats-card">
-                                <h3 class="display-6 fw-bold">>90%</h3>
-                                <p class="mb-0">F1 Score</p>
-                            </div>
-                        </div>
-                        <div class="col-6">
-                            <div class="stats-card">
-                                <h3 class="display-6 fw-bold">2.3x</h3>
-                                <p class="mb-0">Faster</p>
-                            </div>
-                        </div>
-                        <div class="col-6">
-                            <div class="stats-card">
-                                <h3 class="display-6 fw-bold"><50ms</h3>
-                                <p class="mb-0">Latency</p>
-                            </div>
-                        </div>
-                        <div class="col-6">
-                            <div class="stats-card">
-                                <h3 class="display-6 fw-bold">99.9%</h3>
-                                <p class="mb-0">Uptime</p>
-                            </div>
-                        </div>
+                    <div class="text-center">
+                        <i class="fas fa-brain text-light mb-3" style="font-size: 6rem; opacity: 0.3;"></i>
+                        <p class="text-light-emphasis">Simple emotion detection for text analysis</p>
                     </div>
                 </div>
             </div>
@@ -226,48 +77,22 @@ <h3 class="display-6 fw-bold">99.9%</h3>
         <div class="container">
             <div class="row text-center mb-5">
                 <div class="col-lg-8 mx-auto">
-                    <h2 class="display-5 fw-bold mb-3">Why Choose SAMO-DL?</h2>
+                    <h2 class="display-5 fw-bold mb-3">Features</h2>
                     <p class="lead text-muted">
-                        Production-ready emotion detection with enterprise-grade reliability and performance
+                        Simple emotion detection for text analysis
                     </p>
                 </div>
             </div>
-            <div class="row g-4">
-                <div class="col-lg-4 col-md-6">
-                    <div class="card feature-card h-100">
-                        <div class="card-body text-center p-4">
-                            <div class="feature-icon bg-primary bg-opacity-10 text-primary mx-auto">
-                                <i class="fas fa-rocket"></i>
-                            </div>
-                            <h5 class="card-title fw-bold">Production Ready</h5>
-                            <p class="card-text text-muted">
-                                Deployed on Google Cloud Run with 99.9% uptime, auto-scaling, and comprehensive monitoring.
-                            </p>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-lg-4 col-md-6">
-                    <div class="card feature-card h-100">
-                        <div class="card-body text-center p-4">
-                            <div class="feature-icon bg-success bg-opacity-10 text-success mx-auto">
-                                <i class="fas fa-chart-line"></i>
-                            </div>
-                            <h5 class="card-title fw-bold">High Performance</h5>
-                            <p class="card-text text-muted">
-                                >90% F1 score with 2.3x speedup using ONNX optimization and efficient tokenization.
-                            </p>
-                        </div>
-                    </div>
-                </div>
+            <div class="row g-4 justify-content-center">
                 <div class="col-lg-4 col-md-6">
                     <div class="card feature-card h-100">
                         <div class="card-body text-center p-4">
-                            <div class="feature-icon bg-warning bg-opacity-10 text-warning mx-auto">
-                                <i class="fas fa-shield-alt"></i>
+                            <div class="feature-icon bg-primary bg-opacity-10 text-primary mx-auto" style="width: 60px; height: 60px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 20px;">
+                                <i class="fas fa-brain"></i>
                             </div>
-                            <h5 class="card-title fw-bold">Enterprise Security</h5>
+                            <h5 class="card-title fw-bold">Text Analysis</h5>
                             <p class="card-text text-muted">
-                                Rate limiting, input sanitization, CORS protection, and API key authentication.
+                                Analyze emotions in text using machine learning models.
                             </p>
                         </div>
                     </div>
@@ -275,25 +100,12 @@ <h5 class="card-title fw-bold">Enterprise Security</h5>
                 <div class="col-lg-4 col-md-6">
                     <div class="card feature-card h-100">
                         <div class="card-body text-center p-4">
-                            <div class="feature-icon bg-info bg-opacity-10 text-info mx-auto">
+                            <div class="feature-icon bg-success bg-opacity-10 text-success mx-auto" style="width: 60px; height: 60px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 20px;">
                                 <i class="fas fa-plug"></i>
                             </div>
-                            <h5 class="card-title fw-bold">Easy Integration</h5>
-                            <p class="card-text text-muted">
-                                Simple REST API with comprehensive documentation and examples for all frameworks.
-                            </p>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-lg-4 col-md-6">
-                    <div class="card feature-card h-100">
-                        <div class="card-body text-center p-4">
-                            <div class="feature-icon bg-danger bg-opacity-10 text-danger mx-auto">
-                                <i class="fas fa-eye"></i>
-                            </div>
-                            <h5 class="card-title fw-bold">Real-time Monitoring</h5>
+                            <h5 class="card-title fw-bold">REST API</h5>
                             <p class="card-text text-muted">
-                                Prometheus metrics, health checks, and comprehensive logging for observability.
+                                Simple API endpoints for easy integration into applications.
                             </p>
                         </div>
                     </div>
@@ -301,12 +113,12 @@ <h5 class="card-title fw-bold">Real-time Monitoring</h5>
                 <div class="col-lg-4 col-md-6">
                     <div class="card feature-card h-100">
                         <div class="card-body text-center p-4">
-                            <div class="feature-icon bg-secondary bg-opacity-10 text-secondary mx-auto">
-                                <i class="fas fa-users"></i>
+                            <div class="feature-icon bg-info bg-opacity-10 text-info mx-auto" style="width: 60px; height: 60px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 20px;">
+                                <i class="fas fa-chart-bar"></i>
                             </div>
-                            <h5 class="card-title fw-bold">Team Ready</h5>
+                            <h5 class="card-title fw-bold">Multiple Emotions</h5>
                             <p class="card-text text-muted">
-                                Integration guides for backend, frontend, UX, and data science teams.
+                                Detects joy, sadness, anger, fear, and other emotions.
                             </p>
                         </div>
                     </div>
@@ -316,13 +128,13 @@ <h5 class="card-title fw-bold">Team Ready</h5>
     </section>
 
     <!-- Demo Section -->
-    <section id="demo" class="demo-section">
+    <section id="demo" class="demo-section" style="background: var(--light-color); padding: 80px 0;">
         <div class="container">
             <div class="row text-center mb-5">
                 <div class="col-lg-8 mx-auto">
                     <h2 class="display-5 fw-bold mb-3">Try It Live</h2>
                     <p class="lead text-muted">
-                        Test our emotion detection API with your own text and see real-time predictions
+                        Test emotion detection with your own text
                     </p>
                 </div>
             </div>
@@ -357,172 +169,15 @@ <h6 class="fw-bold mb-3">Results:</h6>
         </div>
     </section>
 
-    <!-- Integration Section -->
-    <section id="integration" class="py-5">
-        <div class="container">
-            <div class="row text-center mb-5">
-                <div class="col-lg-8 mx-auto">
-                    <h2 class="display-5 fw-bold mb-3">Team Integration</h2>
-                    <p class="lead text-muted">
-                        Ready-to-use integration examples for all development teams
-                    </p>
-                </div>
-            </div>
-            <div class="row g-4">
-                <div class="col-lg-6">
-                    <div class="integration-card">
-                        <h5 class="fw-bold mb-3">
-                            <i class="fas fa-server text-primary me-2"></i>
-                            Backend Integration
-                        </h5>
-                        <div class="code-block">
-<pre><code>import requests
-
-def detect_emotion(text: str) -> dict:
-    response = requests.post(
-        "https://samo-emotion-api-xxxxx-ew.a.run.app/predict",
-        json={"text": text},
-        headers={"Content-Type": "application/json"}
-    )
-    return response.json()
-
-# Example usage
-emotions = detect_emotion("I'm excited!")
-# Returns: [{"emotion": "excitement", "confidence": 0.92}]</code></pre>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-lg-6">
-                    <div class="integration-card">
-                        <h5 class="fw-bold mb-3">
-                            <i class="fas fa-code text-success me-2"></i>
-                            Frontend Integration
-                        </h5>
-                        <div class="code-block">
-<pre><code>async function analyzeEmotion(text) {
-  const response = await fetch(
-    'https://samo-emotion-api-xxxxx-ew.a.run.app/predict',
-    {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ text })
-    }
-  );
-  return await response.json();
-}
-
-// Example usage
-const emotions = await analyzeEmotion("This is amazing!");
-console.log(emotions); // [{emotion: "joy", confidence: 0.89}]</code></pre>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-lg-6">
-                    <div class="integration-card">
-                        <h5 class="fw-bold mb-3">
-                            <i class="fas fa-chart-bar text-warning me-2"></i>
-                            Data Science Integration
-                        </h5>
-                        <div class="code-block">
-<pre><code>import pandas as pd
-import requests
-
-def analyze_dataset(texts: list) -> pd.DataFrame:
-    results = []
-    for text in texts:
-        emotions = requests.post(
-            "https://samo-emotion-api-xxxxx-ew.a.run.app/predict",
-            json={"text": text}
-        ).json()
-        results.append({
-            'text': text,
-            'emotions': emotions
-        })
-    return pd.DataFrame(results)</code></pre>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-lg-6">
-                    <div class="integration-card">
-                        <h5 class="fw-bold mb-3">
-                            <i class="fas fa-mobile-alt text-info me-2"></i>
-                            Mobile Integration
-                        </h5>
-                        <div class="code-block">
-<pre><code>// React Native / Flutter
-const analyzeUserFeedback = async (feedback) => {
-  try {
-    const response = await fetch(
-      'https://samo-emotion-api-xxxxx-ew.a.run.app/predict',
-      {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ text: feedback })
-      }
-    );
-    const emotions = await response.json();
-    return emotions;
-  } catch (error) {
-    console.error('Error:', error);
-  }
-};</code></pre>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
-
-    <!-- Documentation Section -->
-    <section id="docs" class="py-5 bg-light">
+    <!-- Resources Section -->
+    <section class="py-5 bg-light">
         <div class="container">
-            <div class="row text-center mb-5">
-                <div class="col-lg-8 mx-auto">
-                    <h2 class="display-5 fw-bold mb-3">Documentation & Resources</h2>
-                    <p class="lead text-muted">
-                        Complete guides and resources for successful integration
-                    </p>
-                </div>
-            </div>
-            <div class="row g-4">
-                <div class="col-lg-3 col-md-6">
-                    <div class="card border-0 shadow-sm h-100">
-                        <div class="card-body text-center p-4">
-                            <i class="fas fa-book text-primary mb-3" style="font-size: 2rem;"></i>
-                            <h5 class="card-title fw-bold">API Documentation</h5>
-                            <p class="card-text text-muted">Complete API reference with examples</p>
-                            <a href="#" class="btn btn-outline-primary">View Docs</a>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-lg-3 col-md-6">
-                    <div class="card border-0 shadow-sm h-100">
-                        <div class="card-body text-center p-4">
-                            <i class="fas fa-rocket text-success mb-3" style="font-size: 2rem;"></i>
-                            <h5 class="card-title fw-bold">Deployment Guide</h5>
-                            <p class="card-text text-muted">Step-by-step deployment instructions</p>
-                            <a href="#" class="btn btn-outline-success">Deploy Now</a>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-lg-3 col-md-6">
-                    <div class="card border-0 shadow-sm h-100">
-                        <div class="card-body text-center p-4">
-                            <i class="fas fa-users text-warning mb-3" style="font-size: 2rem;"></i>
-                            <h5 class="card-title fw-bold">Team Guides</h5>
-                            <p class="card-text text-muted">Integration guides for all teams</p>
-                            <a href="#" class="btn btn-outline-warning">Learn More</a>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-lg-3 col-md-6">
-                    <div class="card border-0 shadow-sm h-100">
-                        <div class="card-body text-center p-4">
-                            <i class="fas fa-github text-dark mb-3" style="font-size: 2rem;"></i>
-                            <h5 class="card-title fw-bold">Source Code</h5>
-                            <p class="card-text text-muted">Open source project on GitHub</p>
-                            <a href="https://github.com/uelkerd/SAMO--DL" class="btn btn-outline-dark">View Code</a>
-                        </div>
+            <div class="row text-center">
+                <div class="col-lg-12">
+                    <h3 class="mb-4">More Resources</h3>
+                    <div class="d-flex gap-3 justify-content-center flex-wrap">
+                        <a href="comprehensive-demo.html" class="btn btn-outline-primary">Full Demo</a>
+                        <a href="https://github.com/uelkerd/SAMO--DL" class="btn btn-outline-dark">GitHub</a>
                     </div>
                 </div>
             </div>
@@ -530,70 +185,32 @@ <h5 class="card-title fw-bold">Source Code</h5>
     </section>
 
     <!-- Footer -->
-    <footer class="footer">
+    <footer style="background: var(--dark-color); color: white; padding: 60px 0 30px;">
         <div class="container">
             <div class="row">
-                <div class="col-lg-4 mb-4">
+                <div class="col-lg-6 mb-4">
                     <h5 class="fw-bold mb-3">
                         <i class="fas fa-brain text-primary me-2"></i>
                         SAMO-DL
                     </h5>
                     <p class="text-muted">
-                        Production-ready emotion detection API with enterprise-grade reliability and performance.
+                        Simple emotion detection API for text analysis.
                     </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="#features" class="text-muted text-decoration-none">Features</a></li>
-                        <li><a href="#demo" class="text-muted text-decoration-none">Demo</a></li>
-                        <li><a href="#integration" class="text-muted text-decoration-none">Integration</a></li>
-                        <li><a href="#docs" class="text-muted text-decoration-none">Documentation</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="#" class="text-muted text-decoration-none">API Docs</a></li>
-                        <li><a href="#" class="text-muted text-decoration-none">Examples</a></li>
-                        <li><a href="#" class="text-muted text-decoration-none">Tutorials</a></li>
-                        <li><a href="#" class="text-muted text-decoration-none">Support</a></li>
-                    </ul>
-                </div>
-                <div class="col-lg-2 col-md-6 mb-4">
-                    <h6 class="fw-bold mb-3">Company</h6>
-                    <ul class="list-unstyled">
-                        <li><a href="#" class="text-muted text-decoration-none">About</a></li>
-                        <li><a href="#" class="text-muted text-decoration-none">Blog</a></li>
-                        <li><a href="#" class="text-muted text-decoration-none">Careers</a></li>
-                        <li><a href="#" class="text-muted text-decoration-none">Contact</a></li>
-                    </ul>
-                </div>
-                <div class="col-lg-2 col-md-6 mb-4">
+                <div class="col-lg-6 mb-4">
                     <h6 class="fw-bold mb-3">Connect</h6>
                     <div class="d-flex gap-2">
-                        <a href="#" class="text-muted text-decoration-none">
+                        <a href="https://github.com/uelkerd/SAMO--DL" class="text-muted text-decoration-none">
                             <i class="fab fa-github fa-lg"></i>
                         </a>
-                        <a href="#" class="text-muted text-decoration-none">
-                            <i class="fab fa-twitter fa-lg"></i>
-                        </a>
-                        <a href="#" class="text-muted text-decoration-none">
-                            <i class="fab fa-linkedin fa-lg"></i>
-                        </a>
                     </div>
                 </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. All rights reserved.
-                    </p>
-                </div>
-                <div class="col-md-6 text-md-end">
+                <div class="col-md-12 text-center">
                     <p class="text-muted mb-0">
-                        Built with ❤️ for the developer community
+                        © 2025 SAMO-DL. Simple emotion detection.
                     </p>
                 </div>
             </div>
@@ -618,7 +235,6 @@ <h6 class="fw-bold mb-3">Connect</h6>
 
             try {
                 // For demo purposes, we'll simulate the API call
-                // In production, this would call the actual API
                 await new Promise(resolve => setTimeout(resolve, 1500));
 
                 // Simulate API response
diff --git a/docs/site/integration.html b/docs/site/integration.html
deleted file mode 100644
index fc4a9825d..000000000
--- a/docs/site/integration.html
+++ /dev/null
@@ -1,1274 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Team Integration Guide - SAMO Deep Learning</title>
-    <meta name="description" content="Complete integration guides for backend, frontend, UX, and data science teams">
-
-    <!-- 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">
-    <!-- Prism.js for syntax highlighting -->
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet">
-    <!-- Shared CSS -->
-    <!-- Shared CSS - styles defined inline below -->
-
-    <style>
-        :root {
-            --primary-color: #6366f1;
-            --secondary-color: #8b5cf6;
-            --success-color: #10b981;
-            --warning-color: #f59e0b;
-            --danger-color: #ef4444;
-            --dark-color: #1f2937;
-            --light-color: #f9fafb;
-        }
-
-        body {
-            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-            line-height: 1.6;
-            color: var(--dark-color);
-        }
-
-        .hero-section {
-            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
-            color: white;
-            padding: 80px 0;
-        }
-
-        .team-card {
-            border: none;
-            border-radius: 16px;
-            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-            transition: transform 0.3s ease, box-shadow 0.3s ease;
-            height: 100%;
-        }
-
-        .team-card:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
-        }
-
-        .code-example {
-            background: #1e293b;
-            border-radius: 8px;
-            padding: 20px;
-            margin: 20px 0;
-        }
-
-        .api-endpoint {
-            background: var(--light-color);
-            border-radius: 8px;
-            padding: 15px;
-            margin: 10px 0;
-            border-left: 4px solid var(--primary-color);
-        }
-
-        .navbar {
-            background: rgba(255, 255, 255, 0.95);
-            backdrop-filter: blur(10px);
-        }
-
-        .footer {
-            background: var(--dark-color);
-            color: white;
-            padding: 60px 0 30px;
-        }
-
-        .step-number {
-            width: 40px;
-            height: 40px;
-            border-radius: 50%;
-            background: var(--primary-color);
-            color: white;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-weight: bold;
-            margin-right: 15px;
-        }
-
-        .integration-step {
-            display: flex;
-            align-items: flex-start;
-            margin-bottom: 30px;
-        }
-    </style>
-</head>
-<body>
-    <!-- Navigation -->
-    <nav class="navbar navbar-expand-lg navbar-light fixed-top">
-        <div class="container">
-            <a class="navbar-brand fw-bold" href="index.html">
-                <i class="fas fa-brain text-primary me-2"></i>
-                SAMO-DL
-            </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">
-                        <a class="nav-link" href="demo.html">Live Demo</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="#backend">Backend</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="#frontend">Frontend</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="#ux">UX</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="#datascience">Data Science</a>
-                    </li>
-                </ul>
-            </div>
-        </div>
-    </nav>
-
-    <!-- Hero Section -->
-    <section class="hero-section">
-        <div class="container">
-            <div class="row text-center">
-                <div class="col-lg-8 mx-auto">
-                    <h1 class="display-4 fw-bold mb-4">Team Integration Guide</h1>
-                    <p class="lead mb-4">
-                        Complete integration guides for backend, frontend, UX, and data science teams.
-                        Get your team up and running with SAMO-DL in minutes.
-                    </p>
-                </div>
-            </div>
-        </div>
-    </section>
-
-    <!-- API Overview -->
-    <section class="py-5">
-        <div class="container">
-            <div class="row">
-                <div class="col-lg-8 mx-auto">
-                    <h2 class="fw-bold mb-4">API Overview</h2>
-                    <div class="api-endpoint">
-                        <h6 class="fw-bold mb-2">Base URL</h6>
-                        <code>https://samo-emotion-api-xxxxx-ew.a.run.app</code>
-                    </div>
-
-                    <h4 class="fw-bold mt-4 mb-3">Available Endpoints</h4>
-
-                    <div class="api-endpoint">
-                        <h6 class="fw-bold mb-2">Health Check</h6>
-                        <code>GET /health</code>
-                        <p class="mb-0 text-muted">Check API status and model health</p>
-                    </div>
-
-                    <div class="api-endpoint">
-                        <h6 class="fw-bold mb-2">Emotion Detection</h6>
-                        <code>POST /predict</code>
-                        <p class="mb-0 text-muted">Analyze text and return detected emotions</p>
-                    </div>
-
-                    <div class="api-endpoint">
-                        <h6 class="fw-bold mb-2">Metrics</h6>
-                        <code>GET /metrics</code>
-                        <p class="mb-0 text-muted">Prometheus metrics for monitoring</p>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
-
-    <!-- Backend Integration -->
-    <section id="backend" class="py-5 bg-light">
-        <div class="container">
-            <div class="row">
-                <div class="col-lg-10 mx-auto">
-                    <h2 class="fw-bold mb-4">
-                        <i class="fas fa-server text-primary me-2"></i>
-                        Backend Integration Guide
-                    </h2>
-
-                    <div class="row g-4 mb-5">
-                        <div class="col-md-6">
-                            <div class="card team-card h-100">
-                                <div class="card-body">
-                                    <h5 class="card-title fw-bold">Python (Flask/Django)</h5>
-                                    <p class="card-text">Integrate with Python web frameworks</p>
-                                    <ul class="list-unstyled">
-                                        <li><i class="fas fa-check text-success me-2"></i>Flask integration</li>
-                                        <li><i class="fas fa-check text-success me-2"></i>Django integration</li>
-                                        <li><i class="fas fa-check text-success me-2"></i>FastAPI support</li>
-                                    </ul>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="col-md-6">
-                            <div class="card team-card h-100">
-                                <div class="card-body">
-                                    <h5 class="card-title fw-bold">Node.js (Express)</h5>
-                                    <p class="card-text">Integrate with Node.js applications</p>
-                                    <ul class="list-unstyled">
-                                        <li><i class="fas fa-check text-success me-2"></i>Express.js middleware</li>
-                                        <li><i class="fas fa-check text-success me-2"></i>Error handling</li>
-                                        <li><i class="fas fa-check text-success me-2"></i>Rate limiting</li>
-                                    </ul>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <h4 class="fw-bold mb-3">Quick Start</h4>
-
-                    <div class="integration-step">
-                        <div class="step-number">1</div>
-                        <div>
-                            <h6 class="fw-bold">Install Dependencies</h6>
-                            <div class="code-example">
-                                <pre><code class="language-bash">pip install requests
-# or
-npm install axios</code></pre>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="integration-step">
-                        <div class="step-number">2</div>
-                        <div>
-                            <h6 class="fw-bold">Create Integration Function</h6>
-                            <div class="code-example">
-                                <pre><code class="language-python">import requests
-
-def detect_emotion(text: str) -> dict:
-    """Integrate with SAMO Emotion API"""
-    try:
-        response = requests.post(
-            "https://samo-emotion-api-minimal-71517823771.us-central1.run.app/predict",
-            json={"text": text},
-            headers={"Content-Type": "application/json"},
-            timeout=10
-        )
-        response.raise_for_status()
-        return response.json()
-    except requests.exceptions.RequestException as e:
-        print(f"API Error: {e}")
-        return {"error": "Failed to analyze emotions"}
-
-# Example usage
-emotions = detect_emotion("I'm feeling excited about this project!")
-print(emotions)  # [{"emotion": "excitement", "confidence": 0.92}]</code></pre>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="integration-step">
-                        <div class="step-number">3</div>
-                        <div>
-                            <h6 class="fw-bold">Add Error Handling</h6>
-                            <div class="code-example">
-                                <pre><code class="language-python">def safe_emotion_detection(text: str) -> dict:
-    """Safe emotion detection with comprehensive error handling"""
-    if not text or len(text.strip()) == 0:
-        return {"error": "Empty text provided"}
-
-    if len(text) > 1000:
-        return {"error": "Text too long (max 1000 characters)"}
-
-    try:
-        emotions = detect_emotion(text)
-        if "error" in emotions:
-            return emotions
-
-        # Validate response format
-        if not isinstance(emotions, list):
-            return {"error": "Invalid response format"}
-
-        return {"success": True, "emotions": emotions}
-    except Exception as e:
-        return {"error": f"Unexpected error: {str(e)}"}</code></pre>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
-
-    <!-- Frontend Integration -->
-    <section id="frontend" class="py-5">
-        <div class="container">
-            <div class="row">
-                <div class="col-lg-10 mx-auto">
-                    <h2 class="fw-bold mb-4">
-                        <i class="fas fa-code text-success me-2"></i>
-                        Frontend Integration Guide
-                    </h2>
-
-                    <div class="row g-4 mb-5">
-                        <div class="col-md-4">
-                            <div class="card team-card h-100">
-                                <div class="card-body">
-                                    <h5 class="card-title fw-bold">React</h5>
-                                    <p class="card-text">React hooks and components</p>
-                                    <ul class="list-unstyled">
-                                        <li><i class="fas fa-check text-success me-2"></i>Custom hooks</li>
-                                        <li><i class="fas fa-check text-success me-2"></i>Error boundaries</li>
-                                        <li><i class="fas fa-check text-success me-2"></i>Loading states</li>
-                                    </ul>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="col-md-4">
-                            <div class="card team-card h-100">
-                                <div class="card-body">
-                                    <h5 class="card-title fw-bold">Vue.js</h5>
-                                    <p class="card-text">Vue composables and components</p>
-                                    <ul class="list-unstyled">
-                                        <li><i class="fas fa-check text-success me-2"></i>Composables</li>
-                                        <li><i class="fas fa-check text-success me-2"></i>Reactive data</li>
-                                        <li><i class="fas fa-check text-success me-2"></i>Error handling</li>
-                                    </ul>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="col-md-4">
-                            <div class="card team-card h-100">
-                                <div class="card-body">
-                                    <h5 class="card-title fw-bold">Angular</h5>
-                                    <p class="card-text">Angular services and components</p>
-                                    <ul class="list-unstyled">
-                                        <li><i class="fas fa-check text-success me-2"></i>Injectable services</li>
-                                        <li><i class="fas fa-check text-success me-2"></i>Observables</li>
-                                        <li><i class="fas fa-check text-success me-2"></i>Error handling</li>
-                                    </ul>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <h4 class="fw-bold mb-3">React Integration Example</h4>
-
-                    <div class="code-example">
-                        <pre><code class="language-javascript">import React, { useState } from 'react';
-
-// Custom hook for emotion detection
-const useEmotionDetection = () => {
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState(null);
-  const [emotions, setEmotions] = useState([]);
-
-  const analyzeEmotion = async (text) => {
-    setLoading(true);
-    setError(null);
-
-    try {
-      const response = await fetch(
-        'https://samo-emotion-api-minimal-71517823771.us-central1.run.app/predict',
-        {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ text })
-        }
-      );
-
-      if (!response.ok) {
-        throw new Error(`HTTP error! status: ${response.status}`);
-      }
-
-      const data = await response.json();
-      setEmotions(data);
-    } catch (err) {
-      setError(err.message);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return { analyzeEmotion, emotions, loading, error };
-};
-
-// React component
-const EmotionAnalyzer = () => {
-  const [text, setText] = useState('');
-  const { analyzeEmotion, emotions, loading, error } = useEmotionDetection();
-
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    if (text.trim()) {
-      analyzeEmotion(text);
-    }
-  };
-
-  return (
-    <div className="emotion-analyzer">
-      <form onSubmit={handleSubmit}>
-        <textarea
-          value={text}
-          onChange={(e) => setText(e.target.value)}
-          placeholder="Enter text to analyze emotions..."
-          className="form-control mb-3"
-          rows="4"
-        />
-        <button
-          type="submit"
-          className="btn btn-primary"
-          disabled={loading || !text.trim()}
-        >
-          {loading ? 'Analyzing...' : 'Analyze Emotions'}
-        </button>
-      </form>
-
-      {error && (
-        <div className="alert alert-danger mt-3">
-          Error: {error}
-        </div>
-      )}
-
-      {emotions.length > 0 && (
-        <div className="mt-3">
-          <h6>Detected Emotions:</h6>
-          {emotions.map((emotion, index) => (
-            <div key={index} className="card mb-2">
-              <div className="card-body">
-                <h6 className="card-title">{emotion.emotion}</h6>
-                <div className="progress">
-                  <div
-                    className="progress-bar"
-                    style={{width: `${emotion.confidence * 100}%`}}
-                  >
-                    {Math.round(emotion.confidence * 100)}%
-                  </div>
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default EmotionAnalyzer;</code></pre>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
-
-    <!-- UX Integration -->
-    <section id="ux" class="py-5 bg-light">
-        <div class="container">
-            <div class="row">
-                <div class="col-lg-10 mx-auto">
-                    <h2 class="fw-bold mb-4">
-                        <i class="fas fa-palette text-warning me-2"></i>
-                        UX Integration Guide
-                    </h2>
-
-                    <div class="row g-4 mb-5">
-                        <div class="col-md-6">
-                            <div class="card team-card h-100">
-                                <div class="card-body">
-                                    <h5 class="card-title fw-bold">User Feedback Analysis</h5>
-                                    <p class="card-text">Real-time emotion analysis for user feedback</p>
-                                    <ul class="list-unstyled">
-                                        <li><i class="fas fa-check text-success me-2"></i>Sentiment tracking</li>
-                                        <li><i class="fas fa-check text-success me-2"></i>User journey mapping</li>
-                                        <li><i class="fas fa-check text-success me-2"></i>Emotional context</li>
-                                    </ul>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="col-md-6">
-                            <div class="card team-card h-100">
-                                <div class="card-body">
-                                    <h5 class="card-title fw-bold">Personalization</h5>
-                                    <p class="card-text">Emotion-based personalization features</p>
-                                    <ul class="list-unstyled">
-                                        <li><i class="fas fa-check text-success me-2"></i>Dynamic content</li>
-                                        <li><i class="fas fa-check text-success me-2"></i>Adaptive interfaces</li>
-                                        <li><i class="fas fa-check text-success me-2"></i>Emotional responses</li>
-                                    </ul>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <h4 class="fw-bold mb-3">UX Implementation Examples</h4>
-
-                    <div class="code-example">
-                        <pre><code class="language-javascript">// Emotion-based UI adaptation
-class EmotionAwareUI {
-  constructor() {
-    this.currentEmotion = null;
-    this.emotionHistory = [];
-  }
-
-  async analyzeUserInput(text) {
-    try {
-      const response = await fetch(
-        'https://samo-emotion-api-xxxxx-ew.a.run.app/predict',
-        {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ text })
-        }
-      );
-
-      const emotions = await response.json();
-      this.currentEmotion = emotions[0]?.emotion;
-      this.emotionHistory.push({
-        emotion: this.currentEmotion,
-        timestamp: new Date(),
-        text: text
-      });
-
-      this.adaptUI();
-    } catch (error) {
-      console.error('Emotion analysis failed:', error);
-    }
-  }
-
-  adaptUI() {
-    const body = document.body;
-
-    // Remove existing emotion classes
-    body.classList.remove('emotion-joy', 'emotion-sadness', 'emotion-anger', 'emotion-fear');
-
-    // Add emotion-specific styling
-    if (this.currentEmotion) {
-      body.classList.add(`emotion-${this.currentEmotion}`);
-    }
-
-    // Update UI elements based on emotion
-    this.updateColorScheme();
-    this.updateContent();
-    this.updateInteractions();
-  }
-
-  updateColorScheme() {
-    const colorSchemes = {
-      joy: { primary: '#10b981', secondary: '#34d399' },
-      sadness: { primary: '#3b82f6', secondary: '#60a5fa' },
-      anger: { primary: '#ef4444', secondary: '#f87171' },
-      fear: { primary: '#f59e0b', secondary: '#fbbf24' }
-    };
-
-    const scheme = colorSchemes[this.currentEmotion] || colorSchemes.joy;
-    document.documentElement.style.setProperty('--primary-color', scheme.primary);
-    document.documentElement.style.setProperty('--secondary-color', scheme.secondary);
-  }
-
-  updateContent() {
-    const contentAdaptations = {
-      joy: {
-        greeting: "Great to see you're happy! 😊",
-        suggestions: ["Share your joy", "Celebrate this moment"]
-      },
-      sadness: {
-        greeting: "I understand you're feeling down. 💙",
-        suggestions: ["Take a break", "Talk to someone"]
-      },
-      anger: {
-        greeting: "I sense you're frustrated. 🔥",
-        suggestions: ["Take deep breaths", "Step back for a moment"]
-      },
-      fear: {
-        greeting: "It's okay to feel anxious. 🤗",
-        suggestions: ["Breathe slowly", "You're safe here"]
-      }
-    };
-
-    const adaptation = contentAdaptations[this.currentEmotion] || contentAdaptations.joy;
-
-    // Update UI elements
-    const greetingElement = document.getElementById('greeting');
-    if (greetingElement) {
-      greetingElement.textContent = adaptation.greeting;
-    }
-  }
-
-  updateInteractions() {
-    // Adjust interaction patterns based on emotion
-    const interactionPatterns = {
-      joy: { animationSpeed: 'fast', soundEnabled: true },
-      sadness: { animationSpeed: 'slow', soundEnabled: false },
-      anger: { animationSpeed: 'fast', soundEnabled: false },
-      fear: { animationSpeed: 'slow', soundEnabled: true }
-    };
-
-    const pattern = interactionPatterns[this.currentEmotion] || interactionPatterns.joy;
-
-    // Apply interaction changes
-    document.body.style.setProperty('--animation-speed', pattern.animationSpeed);
-    if (window.soundManager) {
-      window.soundManager.enabled = pattern.soundEnabled;
-    }
-  }
-}
-
-// Usage
-const emotionUI = new EmotionAwareUI();
-
-// Analyze user input and adapt UI
-document.getElementById('user-input').addEventListener('input', (e) => {
-  if (e.target.value.length > 10) {
-    emotionUI.analyzeUserInput(e.target.value);
-  }
-});</code></pre>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
-
-    <!-- Data Science Integration -->
-    <section id="datascience" class="py-5">
-        <div class="container">
-            <div class="row">
-                <div class="col-lg-10 mx-auto">
-                    <h2 class="fw-bold mb-4">
-                        <i class="fas fa-chart-bar text-info me-2"></i>
-                        Data Science Integration Guide
-                    </h2>
-
-                    <div class="row g-4 mb-5">
-                        <div class="col-md-4">
-                            <div class="card team-card h-100">
-                                <div class="card-body">
-                                    <h5 class="card-title fw-bold">Data Collection</h5>
-                                    <p class="card-text">Structured data collection for analysis</p>
-                                    <ul class="list-unstyled">
-                                        <li><i class="fas fa-check text-success me-2"></i>Batch processing</li>
-                                        <li><i class="fas fa-check text-success me-2"></i>Data validation</li>
-                                        <li><i class="fas fa-check text-success me-2"></i>Quality metrics</li>
-                                    </ul>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="col-md-4">
-                            <div class="card team-card h-100">
-                                <div class="card-body">
-                                    <h5 class="card-title fw-bold">Model Monitoring</h5>
-                                    <p class="card-text">Performance tracking and monitoring</p>
-                                    <ul class="list-unstyled">
-                                        <li><i class="fas fa-check text-success me-2"></i>Performance metrics</li>
-                                        <li><i class="fas fa-check text-success me-2"></i>Drift detection</li>
-                                        <li><i class="fas fa-check text-success me-2"></i>A/B testing</li>
-                                    </ul>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="col-md-4">
-                            <div class="card team-card h-100">
-                                <div class="card-body">
-                                    <h5 class="card-title fw-bold">Retraining Pipeline</h5>
-                                    <p class="card-text">Automated model retraining</p>
-                                    <ul class="list-unstyled">
-                                        <li><i class="fas fa-check text-success me-2"></i>Vertex AI integration</li>
-                                        <li><i class="fas fa-check text-success me-2"></i>Continuous learning</li>
-                                        <li><i class="fas fa-check text-success me-2"></i>Version control</li>
-                                    </ul>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <h4 class="fw-bold mb-3">Data Science Implementation</h4>
-
-                    <div class="code-example">
-                        <pre><code class="language-python">import pandas as pd
-import requests
-import numpy as np
-from datetime import datetime
-import logging
-
-class EmotionDataCollector:
-    def __init__(self, api_url="https://samo-emotion-api-xxxxx-ew.a.run.app"):
-        self.api_url = api_url
-        self.session = requests.Session()
-        self.logger = logging.getLogger(__name__)
-
-    def analyze_batch(self, texts: list) -> pd.DataFrame:
-        """Analyze a batch of texts and return structured results"""
-        results = []
-
-        for i, text in enumerate(texts):
-            try:
-                response = self.session.post(
-                    f"{self.api_url}/predict",
-                    json={"text": text},
-                    timeout=30
-                )
-                response.raise_for_status()
-
-                emotions = response.json()
-                results.append({
-                    'text': text,
-                    'emotions': emotions,
-                    'timestamp': datetime.now(),
-                    'status': 'success'
-                })
-
-            except Exception as e:
-                self.logger.error(f"Error analyzing text {i}: {e}")
-                results.append({
-                    'text': text,
-                    'emotions': [],
-                    'timestamp': datetime.now(),
-                    'status': 'error',
-                    'error': str(e)
-                })
-
-        return pd.DataFrame(results)
-
-    def extract_emotion_features(self, df: pd.DataFrame) -> pd.DataFrame:
-        """Extract emotion features from API responses"""
-        features = []
-
-        for _, row in df.iterrows():
-            if row['status'] == 'success' and row['emotions']:
-                # Get top emotion
-                top_emotion = max(row['emotions'], key=lambda x: x['confidence'])
-
-                # Create feature vector
-                emotion_features = {
-                    'text': row['text'],
-                    'primary_emotion': top_emotion['emotion'],
-                    'primary_confidence': top_emotion['confidence'],
-                    'emotion_count': len(row['emotions']),
-                    'timestamp': row['timestamp']
-                }
-
-                # Add individual emotion confidences
-                for emotion in row['emotions']:
-                    emotion_features[f"conf_{emotion['emotion']}"] = emotion['confidence']
-
-                features.append(emotion_features)
-
-        return pd.DataFrame(features)
-
-    def calculate_metrics(self, df: pd.DataFrame) -> dict:
-        """Calculate performance and quality metrics"""
-        metrics = {
-            'total_requests': len(df),
-            'successful_requests': len(df[df['status'] == 'success']),
-            'error_rate': len(df[df['status'] == 'error']) / len(df),
-            'avg_confidence': df[df['status'] == 'success']['primary_confidence'].mean(),
-            'emotion_distribution': df[df['status'] == 'success']['primary_emotion'].value_counts().to_dict()
-        }
-
-        return metrics
-
-class ModelMonitor:
-    def __init__(self):
-        self.performance_history = []
-
-    def track_performance(self, metrics: dict):
-        """Track model performance over time"""
-        metrics['timestamp'] = datetime.now()
-        self.performance_history.append(metrics)
-
-    def detect_drift(self, window_size: int = 100) -> dict:
-        """Detect performance drift"""
-        if len(self.performance_history) < window_size:
-            return {'drift_detected': False, 'reason': 'Insufficient data'}
-
-        recent_metrics = self.performance_history[-window_size:]
-        historical_metrics = self.performance_history[:-window_size]
-
-        # Calculate drift indicators
-        recent_avg_conf = np.mean([m['avg_confidence'] for m in recent_metrics])
-        historical_avg_conf = np.mean([m['avg_confidence'] for m in historical_metrics])
-
-        confidence_drift = abs(recent_avg_conf - historical_avg_conf) / historical_avg_conf
-
-        drift_detected = confidence_drift > 0.1  # 10% threshold
-
-        return {
-            'drift_detected': drift_detected,
-            'confidence_drift': confidence_drift,
-            'recent_avg_confidence': recent_avg_conf,
-            'historical_avg_confidence': historical_avg_conf
-        }
-
-    def generate_report(self) -> str:
-        """Generate performance report"""
-        if not self.performance_history:
-            return "No performance data available"
-
-        latest = self.performance_history[-1]
-        drift = self.detect_drift()
-
-        report = f"""
-        SAMO-DL Performance Report
-        ==========================
-
-        Latest Metrics:
-        - Total Requests: {latest['total_requests']}
-        - Success Rate: {(1 - latest['error_rate']) * 100:.2f}%
-        - Average Confidence: {latest['avg_confidence']:.3f}
-
-        Drift Analysis:
-        - Drift Detected: {drift['drift_detected']}
-        - Confidence Drift: {drift['confidence_drift']:.3f}
-
-        Top Emotions:
-        {chr(10).join([f"- {emotion}: {count}" for emotion, count in list(latest['emotion_distribution'].items())[:5]])}
-        """
-
-        return report
-
-# Usage example
-if __name__ == "__main__":
-    # Initialize components
-    collector = EmotionDataCollector()
-    monitor = ModelMonitor()
-
-    # Sample texts for analysis
-    sample_texts = [
-        "I'm feeling really happy today!",
-        "This is frustrating and annoying.",
-        "I love this new feature!",
-        "I'm scared about the upcoming changes.",
-        "What a wonderful surprise!"
-    ]
-
-    # Collect data
-    results_df = collector.analyze_batch(sample_texts)
-    features_df = collector.extract_emotion_features(results_df)
-
-    # Calculate metrics
-    metrics = collector.calculate_metrics(results_df)
-    monitor.track_performance(metrics)
-
-    # Generate report
-    report = monitor.generate_report()
-    print(report)
-
-    # Save results
-    features_df.to_csv('emotion_analysis_results.csv', index=False)
-    print("Results saved to emotion_analysis_results.csv")</code></pre>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
-
-    <!-- API Documentation -->
-    <section id="api-docs" class="py-5 bg-light">
-        <div class="container">
-            <div class="row">
-                <div class="col-lg-10 mx-auto">
-                    <h2 class="fw-bold mb-4">
-                        <i class="fas fa-book text-primary me-2"></i>
-                        Complete API Documentation
-                    </h2>
-
-                    <div class="row g-4 mb-5">
-                        <div class="col-md-6">
-                            <div class="card team-card h-100">
-                                <div class="card-body">
-                                    <h5 class="card-title fw-bold">API Endpoint</h5>
-                                    <div class="api-endpoint">
-                                        <strong>POST</strong> https://samo-emotion-api-minimal-71517823771.us-central1.run.app/predict
-                                    </div>
-                                    <p class="card-text">Main endpoint for emotion detection</p>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="col-md-6">
-                            <div class="card team-card h-100">
-                                <div class="card-body">
-                                    <h5 class="card-title fw-bold">Response Time</h5>
-                                    <p class="display-6 fw-bold text-success">&lt;50ms</p>
-                                    <p class="card-text">Average response time</p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <h4 class="fw-bold mb-3">Request Format</h4>
-                    <div class="alert alert-warning">
-                        <i class="fas fa-exclamation-triangle me-2"></i>
-                        <strong>Important:</strong> Text input is limited to a maximum of 1000 characters. Requests exceeding this limit will return a validation error.
-                    </div>
-                    <div class="code-example">
-                        <pre><code class="language-json">{
-  "text": "I am feeling really excited about this project!"
-}</code></pre>
-                    </div>
-
-                    <h4 class="fw-bold mb-3">Error Response Example</h4>
-                    <div class="code-example">
-                        <pre><code class="language-json">HTTP/1.1 400 Bad Request
-Content-Type: application/json
-
-{
-  "error": "Missing required field: text"
-}
-</code></pre>
-                        <p class="text-muted mt-2">Typical error responses include an appropriate HTTP status code (e.g., <code>400 Bad Request</code> for invalid input).</p>
-                    </div>
-
-                    <h4 class="fw-bold mb-3">Response Format</h4>
-                    <p class="mb-2">
-                        <strong>Note:</strong> The <code>confidence</code> values for each emotion are always between <code>0</code> and <code>1</code> (inclusive), representing the model's confidence in the presence of that emotion. These values are independent and do <strong>not</strong> necessarily sum to 1.
-                    </p>
-                    <div class="code-example">
-                        <pre><code class="language-json">{
-  "emotions": [
-    {
-      "emotion": "joy",
-      "confidence": 0.92
-    },
-    {
-      "emotion": "optimism",
-      "confidence": 0.78
-    },
-    {
-      "emotion": "pride",
-      "confidence": 0.65
-    }
-  ],
-  "processing_time": 45,
-  "model_version": "v2.1.0"
-}</code></pre>
-                    </div>
-
-                    <h4 class="fw-bold mb-3">Supported Emotions</h4>
-                    <p class="text-muted mb-2" style="font-size: 0.95em;">
-                        <em>Note: The following list is not exhaustive and may change as the model evolves. Integrators should be prepared to handle additional or unexpected emotions.</em>
-                    </p>
-                    <div class="row g-3 mb-4">
-                        <div class="col-md-4">
-                            <div class="card border-0 bg-success bg-opacity-10">
-                                <div class="card-body">
-                                    <h6 class="fw-bold text-success">Positive</h6>
-                                    <ul class="list-unstyled mb-0">
-                                        <li>• Joy</li>
-                                        <li>• Love</li>
-                                        <li>• Gratitude</li>
-                                        <li>• Pride</li>
-                                        <li>• Optimism</li>
-                                        <li>• Curiosity</li>
-                                    </ul>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="col-md-4">
-                            <div class="card border-0 bg-danger bg-opacity-10">
-                                <div class="card-body">
-                                    <h6 class="fw-bold text-danger">Negative</h6>
-                                    <ul class="list-unstyled mb-0">
-                                        <li>• Sadness</li>
-                                        <li>• Anger</li>
-                                        <li>• Fear</li>
-                                        <li>• Disgust</li>
-                                        <li>• Disappointment</li>
-                                        <li>• Frustration</li>
-                                    </ul>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="col-md-4">
-                            <div class="card border-0 bg-info bg-opacity-10">
-                                <div class="card-body">
-                                    <h6 class="fw-bold text-info">Neutral/Complex</h6>
-                                    <ul class="list-unstyled mb-0">
-                                        <li>• Neutral</li>
-                                        <li>• Surprise</li>
-                                        <li>• Confusion</li>
-                                        <li>• Concern</li>
-                                        <li>• Relief</li>
-                                        <li>• Nostalgia</li>
-                                    </ul>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <h4 class="fw-bold mb-3">Error Handling</h4>
-                    <div class="code-example">
-                        <pre><code class="language-json">{
-  "error": "Text too long (max 1000 characters)",
-  "error_code": "VALIDATION_ERROR"
-}</code></pre>
-                    </div>
-
-                    <h4 class="fw-bold mb-3">Rate Limits</h4>
-                    <div class="alert alert-info">
-                        <i class="fas fa-info-circle me-2"></i>
-                        <strong>Rate Limit:</strong> 100 requests per minute per IP address
-                    </div>
-
-                    <h4 class="fw-bold mb-3">Complete Integration Examples</h4>
-
-                    <div class="accordion" id="integrationExamples">
-                        <div class="accordion-item">
-                            <h2 class="accordion-header">
-                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#pythonExample">
-                                    Python (FastAPI)
-                                </button>
-                            </h2>
-                            <div id="pythonExample" class="accordion-collapse collapse show" data-bs-parent="#integrationExamples">
-                                <div class="accordion-body">
-                                    <div class="code-example">
-                                        <pre><code class="language-python">from fastapi import FastAPI, HTTPException
-import httpx
-from pydantic import BaseModel, validator
-
-app = FastAPI()
-
-class EmotionRequest(BaseModel):
-    text: str
-
-    @validator('text')
-    def validate_text_length(cls, v):
-        if len(v) > 1000:
-            raise ValueError('Text must be 1000 characters or less')
-        return v
-
-class EmotionResponse(BaseModel):
-    emotions: list
-    processing_time: int
-    model_version: str
-
-@app.post("/analyze-emotions", response_model=EmotionResponse)
-async def analyze_emotions(request: EmotionRequest):
-    async with httpx.AsyncClient() as client:
-        try:
-            response = await client.post(
-                "https://samo-emotion-api-minimal-71517823771.us-central1.run.app/predict",
-                json={"text": request.text},
-                timeout=10.0
-            )
-            response.raise_for_status()
-            return response.json()
-        except httpx.HTTPStatusError as e:
-            raise HTTPException(status_code=e.response.status_code, detail="API Error")
-        except httpx.TimeoutException:
-            raise HTTPException(status_code=408, detail="Request timeout")</code></pre>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="accordion-item">
-                            <h2 class="accordion-header">
-                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#nodeExample">
-                                    Node.js (Express)
-                                </button>
-                            </h2>
-                            <div id="nodeExample" class="accordion-collapse collapse" data-bs-parent="#integrationExamples">
-                                <div class="accordion-body">
-                                    <div class="code-example">
-                                        <pre><code class="language-javascript">const express = require('express');
-const axios = require('axios');
-
-const app = express();
-app.use(express.json());
-
-app.post('/analyze-emotions', async (req, res) => {
-    try {
-        const { text } = req.body;
-
-        if (!text || text.length > 1000) {
-            return res.status(400).json({
-                error: 'Invalid text length (max 1000 characters)',
-                error_code: 'INVALID_TEXT_LENGTH'
-            });
-        }
-
-        const response = await axios.post(
-            'https://samo-emotion-api-minimal-71517823771.us-central1.run.app/predict',
-            { text },
-            {
-                timeout: 10000,
-                headers: { 'Content-Type': 'application/json' }
-            }
-        );
-
-        res.json(response.data);
-    } catch (error) {
-        console.error('API Error:', error.message);
-        if (error.response) {
-            // Downstream API responded with an error. Propagate it.
-            return res.status(error.response.status).json(error.response.data);
-        } else if (error.request) {
-            // No response received from downstream API.
-            return res.status(504).json({ error: 'Gateway Timeout: No response from emotion API' });
-        } else {
-            // Error setting up the request.
-            res.status(500).json({
-                error: 'Failed to analyze emotions'
-            });
-        }
-    }
-});
-
-app.listen(3000, () => {
-    console.log('Server running on port 3000');
-});</code></pre>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="accordion-item">
-                            <h2 class="accordion-header">
-                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#reactExample">
-                                    React Hook
-                                </button>
-                            </h2>
-                            <div id="reactExample" class="accordion-collapse collapse" data-bs-parent="#integrationExamples">
-                                <div class="accordion-body">
-                                    <div class="code-example">
-                                        <pre><code class="language-javascript">import { useState, useCallback } from 'react';
-
-const useEmotionAPI = () => {
-    const [loading, setLoading] = useState(false);
-    const [error, setError] = useState(null);
-    const [result, setResult] = useState(null);
-
-    const analyzeEmotion = useCallback(async (text) => {
-        setLoading(true);
-        setError(null);
-
-        try {
-            const response = await fetch(
-                'https://samo-emotion-api-minimal-71517823771.us-central1.run.app/predict',
-                {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ text })
-                }
-            );
-
-            if (!response.ok) {
-                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-            }
-
-            const data = await response.json();
-            setResult(data);
-            return data;
-        } catch (err) {
-            setError(err.message);
-            throw err;
-        } finally {
-            setLoading(false);
-        }
-    }, []);
-
-    return { analyzeEmotion, loading, error, result };
-};
-
-export default useEmotionAPI;</code></pre>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
-
-    <!-- Footer -->
-    <footer class="footer">
-        <div class="container">
-            <div class="row">
-                <div class="col-lg-4 mb-4">
-                    <h5 class="fw-bold mb-3">
-                        <i class="fas fa-brain text-primary me-2"></i>
-                        SAMO-DL
-                    </h5>
-                    <p class="text-muted">
-                        Production-ready emotion detection API with enterprise-grade reliability and performance.
-                    </p>
-                </div>
-                <div class="col-lg-2 col-md-6 mb-4">
-                    <h6 class="fw-bold mb-3">Integration</h6>
-                    <ul class="list-unstyled">
-                        <li><a href="#backend" class="text-muted text-decoration-none">Backend</a></li>
-                        <li><a href="#frontend" class="text-muted text-decoration-none">Frontend</a></li>
-                        <li><a href="#ux" class="text-muted text-decoration-none">UX</a></li>
-                        <li><a href="#datascience" class="text-muted text-decoration-none">Data Science</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="index.html" class="text-muted text-decoration-none">Home</a></li>
-                        <li><a href="#" class="text-muted text-decoration-none">API Docs</a></li>
-                        <li><a href="#" class="text-muted text-decoration-none">Examples</a></li>
-                        <li><a href="#" class="text-muted text-decoration-none">Support</a></li>
-                    </ul>
-                </div>
-                <div class="col-lg-2 col-md-6 mb-4">
-                    <h6 class="fw-bold mb-3">Company</h6>
-                    <ul class="list-unstyled">
-                        <li><a href="#" class="text-muted text-decoration-none">About</a></li>
-                        <li><a href="#" class="text-muted text-decoration-none">Blog</a></li>
-                        <li><a href="#" class="text-muted text-decoration-none">Careers</a></li>
-                        <li><a href="#" class="text-muted text-decoration-none">Contact</a></li>
-                    </ul>
-                </div>
-                <div class="col-lg-2 col-md-6 mb-4">
-                    <h6 class="fw-bold mb-3">Connect</h6>
-                    <div class="d-flex gap-2">
-                        <a href="https://github.com/uelkerd/SAMO--DL" class="text-muted text-decoration-none">
-                            <i class="fab fa-github fa-lg"></i>
-                        </a>
-                        <a href="#" class="text-muted text-decoration-none">
-                            <i class="fab fa-twitter fa-lg"></i>
-                        </a>
-                        <a href="#" class="text-muted text-decoration-none">
-                            <i class="fab fa-linkedin fa-lg"></i>
-                        </a>
-                    </div>
-                </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. All rights reserved.
-                    </p>
-                </div>
-                <div class="col-md-6 text-md-end">
-                    <p class="text-muted mb-0">
-                        Built with ❤️ for the developer community
-                    </p>
-                </div>
-            </div>
-        </div>
-    </footer>
-
-    <!-- Bootstrap JS -->
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
-    <!-- Prism.js for syntax highlighting -->
-    <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>
-
-    <script>
-        // Smooth scrolling for navigation links
-        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
-            anchor.addEventListener('click', function (e) {
-                e.preventDefault();
-                const target = document.querySelector(this.getAttribute('href'));
-                if (target) {
-                    target.scrollIntoView({
-                        behavior: 'smooth',
-                        block: 'start'
-                    });
-                }
-            });
-        });
-    </script>
-</body>
-</html>
diff --git a/scripts/ci/run_full_ci_pipeline.py b/scripts/ci/run_full_ci_pipeline.py
index d2c900023..e963afce2 100644
--- a/scripts/ci/run_full_ci_pipeline.py
+++ b/scripts/ci/run_full_ci_pipeline.py
@@ -1,6 +1,5 @@
 #!/usr/bin/env python3
-"""
-Comprehensive CI Pipeline Runner for SAMO Deep Learning
+"""Comprehensive CI Pipeline Runner for SAMO Deep Learning.
 
 This script runs the complete CI pipeline end-to-end, including:
 - Environment validation
@@ -14,50 +13,87 @@
 
 import logging
 import os
+import shlex
+import subprocess
 import sys
 import time
-import subprocess
 from pathlib import Path
-from typing import Dict, List, Tuple
+from typing import Dict, Optional, Tuple
+
+# Add src to path for local imports and import BERT classifier
+sys.path.insert(0, str(Path(__file__).parent.parent.parent / "src"))
 
 # Use shared truthy parsing
 try:
     from src.common.env import is_truthy
-except Exception:  # Fallback to local helper if import path not available
-    def is_truthy(value: str | None) -> bool:
+except ImportError:  # Fallback to local helper if import path not available
+    def is_truthy(value: Optional[str]) -> bool:
         return bool(value) and value.strip().lower() in {"1", "true", "yes"}
 
+
 # Configure logging
 logging.basicConfig(
     level=logging.INFO,
-    format='%(asctime)s - %(levelname)s - %(message)s',
+    format="%(asctime)s - %(levelname)s - %(message)s",
     handlers=[
         logging.StreamHandler(sys.stdout),
-        logging.FileHandler('ci_pipeline.log')
-    ]
+        logging.FileHandler("ci_pipeline.log"),
+    ],
 )
 logger = logging.getLogger(__name__)
 
 
 class CIPipelineRunner:
     """Comprehensive CI Pipeline Runner."""
-    
+
     def __init__(self):
         self.results = {}
         self.start_time = time.time()
         self.ci_scripts = [
             "scripts/ci/api_health_check.py",
-            "scripts/ci/bert_model_test.py", 
+            "scripts/ci/bert_model_test.py",
             "scripts/ci/t5_summarization_test.py",
             "scripts/ci/whisper_transcription_test.py",
             "scripts/ci/model_calibration_test.py",
             "scripts/ci/onnx_conversion_test.py",
         ]
 
+    @staticmethod
+    def _run_subprocess_command(
+        command: list, timeout: int
+    ) -> subprocess.CompletedProcess:
+        """Run a subprocess command with standardized parameters.
+
+        Parameters
+        ----------
+        command : list
+            The command to run as a list of strings
+        timeout : int
+            Timeout in seconds
+
+        Returns
+        -------
+        subprocess.CompletedProcess
+            The completed process result
+        """
+        # Security: All command arguments are statically defined or controlled internally
+        # No user input reaches this function that could cause command injection.
+        # Using shlex.quote as additional security measure for any potentially dynamic parts.
+        quoted_command = [shlex.quote(str(arg)) for arg in command]
+        return subprocess.run(
+            quoted_command,
+            check=False,
+            capture_output=True,
+            text=True,
+            timeout=timeout,
+            shell=False,  # Explicitly disable shell to prevent injection
+        )
+
     def _get_test_stats(self) -> tuple[dict, int, int]:
         """Calculate statistics on test results.
-        
-        Returns:
+
+        Returns
+        -------
             tuple: (test_results dict, total_tests, passed_tests)
         """
         test_results = {
@@ -73,7 +109,7 @@ def _get_test_stats(self) -> tuple[dict, int, int]:
     def detect_environment(self) -> Dict[str, str]:
         """Detect the current environment (local vs Colab)."""
         logger.info("🔍 Detecting environment...")
-        
+
         env_info = {
             "platform": sys.platform,
             "python_version": sys.version,
@@ -81,274 +117,410 @@ def detect_environment(self) -> Dict[str, str]:
             "gpu_available": False,
             "conda_env": os.environ.get("CONDA_DEFAULT_ENV", "unknown"),
         }
-        
+
         # Check for GPU
         try:
             import torch
+
             env_info["gpu_available"] = torch.cuda.is_available()
             if env_info["gpu_available"]:
                 env_info["gpu_count"] = torch.cuda.device_count()
                 env_info["gpu_name"] = torch.cuda.get_device_name(0)
         except ImportError:
             logger.warning("⚠️ PyTorch not available for GPU detection")
-        
+
         # Check for Colab
         if env_info["is_colab"]:
             logger.info("🎯 Running in Google Colab environment")
             env_info["colab_gpu"] = os.environ.get("COLAB_GPU", "unknown")
         else:
             logger.info("💻 Running in local environment")
-            
-        logger.info(f"📊 Environment: {env_info}")
+
+        logger.info("📊 Environment: %s", env_info)
         return env_info
-    
+
     def validate_dependencies(self) -> bool:
         """Validate that all required dependencies are available."""
         logger.info("📦 Validating dependencies...")
-        
+
         required_packages = [
-            "torch", "transformers", "fastapi", "pydantic",
-            "datasets", "tokenizers", "numpy", "pandas"
+            "torch",
+            "transformers",
+            "fastapi",
+            "pydantic",
+            "datasets",
+            "tokenizers",
+            "numpy",
+            "pandas",
         ]
-        
+
         missing_packages = []
         for package in required_packages:
             try:
                 __import__(package)
-                logger.info(f"✅ {package} available")
+                logger.info("✅ %s available", package)
             except ImportError:
                 missing_packages.append(package)
-                logger.error(f"❌ {package} missing")
-        
+                logger.error("❌ %s missing", package)
+
         if missing_packages:
-            logger.error(f"❌ Missing packages: {missing_packages}")
+            logger.error("❌ Missing packages: %s", missing_packages)
             return False
-        
+
         logger.info("✅ All dependencies validated")
         return True
-    
+
     def run_ci_script(self, script_path: str) -> Tuple[bool, str]:
         """Run a single CI script and return success status and output."""
-        logger.info(f"🚀 Running {script_path}...")
-        
+        logger.info("🚀 Running %s...", script_path)
+
         try:
             # Use the correct Python interpreter
             python_executable = sys.executable
-            
-            # Run the script
-            result = subprocess.run(
+
+            # Run the script - script_path is controlled internally by self.ci_scripts
+            # No command injection risk as paths are static and predefined
+            result = self._run_subprocess_command(
                 [python_executable, script_path],
-                capture_output=True,
-                text=True,
-                timeout=300  # 5 minute timeout
+                timeout=300,  # 5 minute timeout
             )
-            
+
             if result.returncode == 0:
-                logger.info(f"✅ {script_path} PASSED")
+                logger.info("✅ %s PASSED", script_path)
                 return True, result.stdout
             else:
-                logger.error(f"❌ {script_path} FAILED")
-                logger.error(f"Error output: {result.stderr}")
+                logger.error("❌ %s FAILED", script_path)
+                logger.error("Error output: %s", result.stderr)
+                logger.error("Standard output: %s", result.stdout)
                 return False, result.stderr
-                
+
         except subprocess.TimeoutExpired:
-            logger.error(f"⏰ {script_path} TIMEOUT")
+            logger.error("⏰ %s TIMEOUT", script_path)
             return False, "Script timed out after 5 minutes"
         except Exception as e:
-            logger.error(f"💥 {script_path} ERROR: {e}")
+            logger.exception("💥 %s ERROR: %s", script_path, e)
             return False, str(e)
-    
+
     def run_unit_tests(self) -> bool:
         """Run unit tests."""
         logger.info("🧪 Running unit tests...")
-        
+
         try:
-            result = subprocess.run(
+            # Static command - no injection risk, all arguments are literals
+            result = self._run_subprocess_command(
                 [sys.executable, "-m", "pytest", "tests/unit/", "-v"],
-                capture_output=True,
-                text=True,
-                timeout=1200  # 20 minute timeout (increased from 10)
+                timeout=1200,  # 20 minute timeout (increased from 10)
             )
-            
+
             if result.returncode == 0:
                 logger.info("✅ Unit tests PASSED")
                 return True
             else:
                 logger.error("❌ Unit tests FAILED")
-                logger.error(f"Return code: {result.returncode}")
-                logger.error(f"Error output: {result.stderr}")
-                logger.error(f"Standard output: {result.stdout}")
+                logger.error("Return code: %s", result.returncode)
+                logger.error("Error output: %s", result.stderr)
+                logger.error("Standard output: %s", result.stdout)
                 return False
-                
+
         except subprocess.TimeoutExpired:
             logger.error("⏰ Unit tests TIMEOUT")
             return False
         except Exception as e:
-            logger.error(f"💥 Unit tests ERROR: {e}")
+            logger.exception("💥 Unit tests ERROR: %s", e)
             return False
-    
+
     def run_e2e_tests(self) -> bool:
         """Run end-to-end tests."""
         logger.info("🎯 Running E2E tests...")
-        
+
         try:
-            result = subprocess.run(
+            # Static command - no injection risk, all arguments are literals
+            result = self._run_subprocess_command(
                 [sys.executable, "-m", "pytest", "tests/e2e/", "-v"],
-                capture_output=True,
-                text=True,
-                timeout=900  # 15 minute timeout
+                timeout=900,  # 15 minute timeout
             )
-            
+
             if result.returncode == 0:
                 logger.info("✅ E2E tests PASSED")
                 return True
             else:
                 logger.error("❌ E2E tests FAILED")
-                logger.error(f"Error output: {result.stderr}")
+                logger.error("Error output: %s", result.stderr)
+                logger.error("Standard output: %s", result.stdout)
                 return False
-                
+
         except Exception as e:
-            logger.error(f"💥 E2E tests ERROR: {e}")
+            logger.exception("💥 E2E tests ERROR: %s", e)
             return False
-    
-    def test_gpu_compatibility(self) -> bool:
-        """Test GPU compatibility if available."""
-        logger.info("🖥️ Testing GPU compatibility...")
-        
+
+    @staticmethod
+    def _test_gpu_model_forward_pass() -> bool:
+        """Test GPU model forward pass with BERT classifier.
+
+        Returns
+        -------
+        bool
+            True if GPU forward pass succeeds, False otherwise
+        """
         try:
             import torch
-            
-            if not torch.cuda.is_available():
-                logger.info("ℹ️ No GPU available, skipping GPU tests")
-                return True
-            
-            logger.info(f"🎮 GPU detected: {torch.cuda.get_device_name(0)}")
-            
-            # Test GPU model loading
+
             device = torch.device("cuda")
-            
-            # Add src to path for imports
-            import sys
-            from pathlib import Path
-            sys.path.insert(0, str(Path(__file__).parent.parent.parent / "src"))
-            
-            # Test BERT on GPU
+
+            # Import BERT classifier locally to avoid module-level dependencies
             try:
                 from models.emotion_detection.bert_classifier import BERTEmotionClassifier
             except ImportError:
                 from src.models.emotion_detection.bert_classifier import BERTEmotionClassifier
+
             model = BERTEmotionClassifier().to(device)
-            
+
             # Test forward pass
-            import torch
             dummy_input = torch.randint(0, 1000, (2, 512)).to(device)
             with torch.no_grad():
                 output = model(dummy_input, torch.ones_like(dummy_input))
-            
-            logger.info(f"✅ GPU forward pass successful, output shape: {output.shape}")
+
+            logger.info(
+                "✅ GPU forward pass successful, output shape: %s", output.shape
+            )
             return True
-            
+
         except Exception as e:
-            logger.error(f"❌ GPU compatibility test failed: {e}")
+            logger.exception("❌ GPU model forward pass failed: %s", e)
             return False
-    
+
+    def test_gpu_compatibility(self) -> bool:
+        """Test GPU compatibility if available."""
+        logger.info("🖥️ Testing GPU compatibility...")
+
+        try:
+            import torch
+
+            if not torch.cuda.is_available():
+                logger.info("ℹ️ No GPU available, skipping GPU tests")
+                return True
+
+            logger.info("🎮 GPU detected: %s", torch.cuda.get_device_name(0))
+
+            # Test GPU model loading and forward pass
+            return self._test_gpu_model_forward_pass()
+
+        except Exception as e:
+            logger.exception("❌ GPU compatibility test failed: %s", e)
+            return False
+
+    @staticmethod
+    def _measure_model_loading_time() -> float:
+        """Measure BERT model loading time.
+
+        Returns
+        -------
+        float
+            Loading time in seconds
+        """
+        # Import BERT classifier locally to avoid module-level dependencies
+        try:
+            from models.emotion_detection.bert_classifier import BERTEmotionClassifier
+        except ImportError:
+            from src.models.emotion_detection.bert_classifier import BERTEmotionClassifier
+
+        start_time = time.time()
+        _ = BERTEmotionClassifier()  # Instantiate model to measure loading time
+        loading_time = time.time() - start_time
+
+        logger.info("✅ Model loading time: %.2fs", loading_time)
+        return loading_time
+
+    @staticmethod
+    def _measure_inference_time(model) -> float:
+        """Measure model inference time.
+
+        Parameters
+        ----------
+        model : torch.nn.Module
+            The model to test inference on
+
+        Returns
+        -------
+        float
+            Inference time in seconds
+        """
+        import torch
+
+        start_time = time.time()
+        dummy_input = torch.randint(0, 1000, (1, 512))
+        with torch.no_grad():
+            model(dummy_input, torch.ones_like(dummy_input))
+        inference_time = time.time() - start_time
+
+        logger.info("✅ Inference time: %.2fs", inference_time)
+        return inference_time
+
+    @staticmethod
+    def _validate_performance_thresholds(
+        loading_time: float, inference_time: float
+    ) -> bool:
+        """Validate that performance times are within acceptable thresholds.
+
+        Parameters
+        ----------
+        loading_time : float
+            Model loading time in seconds
+        inference_time : float
+            Inference time in seconds
+
+        Returns
+        -------
+        bool
+            True if performance is acceptable, False otherwise
+        """
+        # Increased threshold for CPU environments
+        if loading_time < 10.0 and inference_time < 5.0:
+            logger.info("✅ Performance benchmarks passed")
+            return True
+
+        logger.error(
+            "❌ Performance too slow - loading: %.2fs, inference: %.2fs",
+            loading_time,
+            inference_time,
+        )
+        return False
+
     def run_performance_benchmarks(self) -> bool:
         """Run performance benchmarks."""
         logger.info("⚡ Running performance benchmarks...")
-        
+
         try:
-            # Simple performance test - model loading speed
-            import time
-            import torch
-            
-            # Test BERT model loading speed
-            start_time = time.time()
-            
-            # Add src to path
-            import sys
-            from pathlib import Path
-            sys.path.insert(0, str(Path(__file__).parent.parent.parent / "src"))
-            
+            # Measure model loading time
+            loading_time = self._measure_model_loading_time()
+
+            # Import model again for inference test (avoid reusing loaded model)
             try:
                 from models.emotion_detection.bert_classifier import BERTEmotionClassifier
             except ImportError:
                 from src.models.emotion_detection.bert_classifier import BERTEmotionClassifier
-            
             model = BERTEmotionClassifier()
-            loading_time = time.time() - start_time
-            
-            # Test inference speed
-            start_time = time.time()
-            dummy_input = torch.randint(0, 1000, (1, 512))
-            with torch.no_grad():
-                output = model(dummy_input, torch.ones_like(dummy_input))
-            inference_time = time.time() - start_time
-            
-            logger.info(f"✅ Model loading time: {loading_time:.2f}s")
-            logger.info(f"✅ Inference time: {inference_time:.2f}s")
-            
-            # Check if times are reasonable
-            if loading_time < 10.0 and inference_time < 5.0:  # Increased threshold for CPU environments
-                logger.info("✅ Performance benchmarks passed")
-                return True
-            else:
-                logger.error(f"❌ Performance too slow - loading: {loading_time:.2f}s, inference: {inference_time:.2f}s")
-                return False
-                
+
+            # Measure inference time
+            inference_time = self._measure_inference_time(model)
+
+            # Validate performance thresholds
+            return self._validate_performance_thresholds(loading_time, inference_time)
+
         except Exception as e:
-            logger.error(f"❌ Performance benchmark failed: {e}")
+            logger.exception("❌ Performance benchmark failed: %s", e)
             return False
-    
+
+    def _determine_exit_code(self) -> int:
+        """Determine the appropriate exit code based on test results.
+
+        Returns
+        -------
+        int
+            Exit code: 0 for success, 1 for failure
+        """
+        _, total_tests, passed_tests = self._get_test_stats()
+
+        if total_tests == 0:
+            logger.error("❌ CI Pipeline failed - no boolean tests were executed!")
+            return 1
+        elif passed_tests == total_tests:
+            logger.info("🎉 CI Pipeline completed successfully!")
+            return 0
+        else:
+            logger.error("❌ CI Pipeline failed!")
+            return 1
+
+    def _execute_pipeline_and_generate_report(self) -> str:
+        """Execute the full CI pipeline and generate a report.
+
+        Returns
+        -------
+        str
+            The generated CI report
+        """
+        _ = self.run_full_pipeline()
+        report = self.generate_report()
+        return report
+
+    def run_pipeline_and_exit(self) -> None:
+        """Run the CI pipeline and exit with appropriate code.
+
+        This method handles the complete pipeline execution flow including:
+        - Running all tests
+        - Generating reports
+        - Writing CI artifacts
+        - Exiting with proper status codes
+        """
+        try:
+            report = self._execute_pipeline_and_generate_report()
+
+            print(report)
+            # Only write report to file in CI so it can be uploaded as an artifact
+            write_ci_report_if_needed(report)
+
+            # Exit with appropriate code
+            exit_code = self._determine_exit_code()
+            sys.exit(exit_code)
+
+        except KeyboardInterrupt:
+            logger.info("⏹️ CI Pipeline interrupted by user")
+            sys.exit(130)
+        except Exception as e:
+            logger.exception("💥 CI Pipeline crashed: %s", e)
+            sys.exit(1)
+
     def run_full_pipeline(self) -> Dict[str, bool]:
         """Run the complete CI pipeline."""
         logger.info("🚀 Starting Comprehensive CI Pipeline")
         logger.info("=" * 60)
-        
+
         # Environment detection
         env_info = self.detect_environment()
         self.results["environment"] = env_info
-        
+
         # Dependency validation
         self.results["dependencies"] = self.validate_dependencies()
-        
+
         # Run individual CI scripts
         for script in self.ci_scripts:
             script_name = Path(script).stem
             success, output = self.run_ci_script(script)
             self.results[script_name] = success
-            
+
             if not success:
-                logger.error(f"❌ {script_name} failed, but continuing...")
-        
+                logger.error("❌ %s failed, but continuing...", script_name)
+
         # Run unit tests
         self.results["unit_tests"] = self.run_unit_tests()
-        
+
         # Run E2E tests
         self.results["e2e_tests"] = self.run_e2e_tests()
-        
+
         # Test GPU compatibility
         self.results["gpu_compatibility"] = self.test_gpu_compatibility()
-        
+
         # Run performance benchmarks
         self.results["performance"] = self.run_performance_benchmarks()
-        
+
         return self.results
-    
+
     def generate_report(self) -> str:
         """Generate a comprehensive CI report."""
         logger.info("📊 Generating CI Report")
         logger.info("=" * 60)
-        
+
         # Only count boolean results as actual tests
         test_results, total_tests, passed_tests = self._get_test_stats()
-        
-        # Guard against division by zero when no boolean tests were collected
-        safe_total = total_tests if total_tests > 0 else 1
-        success_rate = (passed_tests / safe_total) * 100.0
+
+        # Handle case where no boolean tests were collected
+        success_rate = (
+            0.0 if total_tests == 0 else (passed_tests / total_tests) * 100.0
+        )
 
         report = f"""
 🎯 COMPREHENSIVE CI PIPELINE REPORT
-{'=' * 60}
+{"=" * 60}
 
 📊 SUMMARY:
 - Total Tests: {total_tests}
@@ -358,28 +530,33 @@ def generate_report(self) -> str:
 
 🔍 DETAILED RESULTS:
 """
-        
+
         for test_name, result in self.results.items():
             if isinstance(result, bool):
                 status = "✅ PASSED" if result else "❌ FAILED"
                 report += f"- {test_name}: {status}\n"
             elif isinstance(result, dict):
                 report += f"- {test_name}: {result}\n"
-        
+
         report += f"""
 ⏱️ EXECUTION TIME: {time.time() - self.start_time:.1f}s
 
 🎯 RECOMMENDATIONS:
 """
-        
-        if passed_tests == total_tests:
+
+        if total_tests == 0:
+            report += (
+                "⚠️ No boolean tests were executed. Treating pipeline as failed.\n"
+            )
+        elif passed_tests == total_tests:
             report += "🎉 All tests passed! Pipeline is ready for deployment.\n"
         else:
-            failed_test_names = [name for name, result in test_results.items() 
-                               if not result]
+            failed_test_names = [
+                name for name, result in test_results.items() if not result
+            ]
             report += f"⚠️ Failed tests: {', '.join(failed_test_names)}\n"
             report += "🔧 Please fix the failed tests before deployment.\n"
-        
+
         return report
 
 
@@ -391,34 +568,13 @@ def write_ci_report_if_needed(report: str) -> None:
 
 
 def main():
-    """Main function to run the CI pipeline."""
+    """Main function to run the CI pipeline.
+
+    Error handling is delegated to the runner's `run_pipeline_and_exit()` method.
+    """
     runner = CIPipelineRunner()
-    
-    try:
-        _ = runner.run_full_pipeline()
-        report = runner.generate_report()
-        
-        print(report)
-        # Only write report to file in CI so it can be uploaded as an artifact
-        write_ci_report_if_needed(report)
-        
-        # Exit with appropriate code
-        _, total_tests, passed_tests = runner._get_test_stats()
-        
-        if passed_tests == total_tests:
-            logger.info("🎉 CI Pipeline completed successfully!")
-            sys.exit(0)
-        else:
-            logger.error("❌ CI Pipeline failed!")
-            sys.exit(1)
-            
-    except KeyboardInterrupt:
-        logger.info("⏹️ CI Pipeline interrupted by user")
-        sys.exit(1)
-    except Exception as e:
-        logger.error(f"💥 CI Pipeline crashed: {e}")
-        sys.exit(1)
+    runner.run_pipeline_and_exit()
 
 
 if __name__ == "__main__":
-    main() 
\ No newline at end of file
+    main()
diff --git a/website/css/styles.css b/website/css/styles.css
new file mode 100644
index 000000000..bc477a46c
--- /dev/null
+++ b/website/css/styles.css
@@ -0,0 +1,344 @@
+/* SAMO Deep Learning Demo Website Styles */
+/* Scoped under .samo-demo to avoid style leakage */
+
+.samo-demo {
+    /* CSS Custom Properties (CSS Variables) */
+    --primary-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
+    --secondary-gradient: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #3730a3 100%);
+    --dark-gradient: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
+    --accent-gradient: linear-gradient(135deg, #7c3aed 0%, #9333ea 50%, #c084fc 100%);
+
+    --primary-color: #8b5cf6;
+    --secondary-color: #a855f7;
+    --accent-color: #c084fc;
+    --dark-color: #0f0f23;
+    --darker-color: #0a0a1a;
+    --light-accent: #e9d5ff;
+    --glass-bg: rgba(139, 92, 246, 0.1);
+    --glass-border: rgba(139, 92, 246, 0.2);
+
+    /* Performance and animation settings */
+    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    --transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+    --shadow-glow: 0 10px 40px rgba(139, 92, 246, 0.3);
+    --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.3);
+}
+
+.samo-demo body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+    line-height: 1.6;
+    color: #e2e8f0;
+    background: var(--dark-gradient);
+    background-attachment: fixed;
+    min-height: 100vh;
+}
+
+/* Removed universal transition for better performance */
+.samo-demo .card,
+.samo-demo .btn,
+.samo-demo .nav-link,
+.samo-demo .badge,
+.samo-demo .form-control,
+.samo-demo .feature-card,
+.samo-demo .hero-card {
+    transition: var(--transition-smooth);
+}
+
+.samo-demo .hero-section {
+    background: var(--dark-gradient);
+    color: white;
+    padding: 120px 0;
+    position: relative;
+    overflow: hidden;
+}
+
+.samo-demo .hero-section::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background:
+        radial-gradient(circle at 20% 50%, rgba(139, 92, 246, 0.3) 0%, transparent 50%),
+        radial-gradient(circle at 80% 20%, rgba(168, 85, 247, 0.2) 0%, transparent 50%),
+        radial-gradient(circle at 40% 80%, rgba(192, 132, 252, 0.2) 0%, transparent 50%);
+    animation: float 6s ease-in-out infinite;
+}
+
+.samo-demo .hero-content {
+    position: relative;
+    z-index: 2;
+}
+
+.samo-demo .feature-card {
+    background: var(--glass-bg);
+    backdrop-filter: blur(20px);
+    border: 1px solid var(--glass-border);
+    border-radius: 20px;
+    box-shadow: var(--shadow-glass);
+    transition: var(--transition-bounce);
+    height: 100%;
+    color: #e2e8f0;
+}
+
+.samo-demo .feature-card:hover {
+    transform: translateY(-10px) scale(1.02);
+    box-shadow: var(--shadow-glow);
+    border-color: var(--primary-color);
+}
+
+.samo-demo .feature-card.border-success {
+    border-color: rgba(16, 185, 129, 0.5);
+}
+
+.samo-demo .feature-card.border-success:hover {
+    border-color: #10b981;
+    box-shadow: 0 10px 40px rgba(16, 185, 129, 0.3);
+}
+
+.samo-demo .feature-icon {
+    width: 80px;
+    height: 80px;
+    border-radius: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 32px;
+    margin-bottom: 30px;
+    box-shadow: var(--shadow-glass);
+}
+
+.samo-demo .stats-card {
+    background: var(--glass-bg);
+    backdrop-filter: blur(15px);
+    border: 1px solid var(--glass-border);
+    color: #e2e8f0;
+    border-radius: 20px;
+    padding: 30px;
+    text-align: center;
+    transition: var(--transition-smooth);
+    box-shadow: var(--shadow-glass);
+}
+
+.samo-demo .stats-card:hover {
+    transform: translateY(-5px);
+    box-shadow: var(--shadow-glow);
+}
+
+.samo-demo .stats-card h3 {
+    background: var(--primary-gradient);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.samo-demo .demo-section {
+    background: rgba(0, 0, 0, 0.2);
+    padding: 100px 0;
+}
+
+.samo-demo .integration-card {
+    background: var(--glass-bg);
+    backdrop-filter: blur(20px);
+    border: 1px solid var(--glass-border);
+    border-radius: 20px;
+    padding: 40px;
+    box-shadow: var(--shadow-glass);
+    margin-bottom: 30px;
+    color: #e2e8f0;
+    transition: var(--transition-smooth);
+}
+
+.samo-demo .integration-card:hover {
+    transform: translateY(-5px);
+    box-shadow: var(--shadow-glow);
+}
+
+.samo-demo .code-block {
+    background: var(--darker-color);
+    border: 1px solid var(--glass-border);
+    border-radius: 15px;
+    padding: 25px;
+    font-family: 'Fira Code', monospace;
+    font-size: 14px;
+    overflow-x: auto;
+    color: #e2e8f0;
+}
+
+.samo-demo .navbar {
+    background: rgba(15, 15, 35, 0.95);
+    backdrop-filter: blur(20px);
+    border-bottom: 1px solid var(--glass-border);
+}
+
+.samo-demo .navbar-brand,
+.samo-demo .navbar .nav-link {
+    color: #e2e8f0;
+}
+
+.samo-demo .footer {
+    background: var(--dark-gradient);
+    color: #e2e8f0;
+    padding: 80px 0 40px;
+    border-top: 1px solid var(--glass-border);
+}
+
+.samo-demo .btn-primary {
+    background: var(--primary-gradient);
+    border: none;
+    border-radius: 12px;
+    padding: 12px 30px;
+    font-weight: 600;
+    transition: var(--transition-bounce);
+    box-shadow: var(--shadow-glow);
+}
+
+.samo-demo .btn-primary:hover {
+    transform: translateY(-2px) scale(1.05);
+    box-shadow: 0 15px 50px rgba(139, 92, 246, 0.4);
+}
+
+.samo-demo .btn-outline-light {
+    border: 2px solid rgba(226, 232, 240, 0.5);
+    color: #e2e8f0;
+    border-radius: 12px;
+    padding: 10px 28px;
+    font-weight: 600;
+    transition: var(--transition-smooth);
+}
+
+.samo-demo .btn-outline-light:hover {
+    background: rgba(226, 232, 240, 0.1);
+    border-color: #e2e8f0;
+    color: #e2e8f0;
+    transform: translateY(-2px);
+}
+
+.samo-demo .btn-light {
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    color: white;
+    border-radius: 12px;
+    padding: 12px 30px;
+    font-weight: 600;
+    transition: var(--transition-bounce);
+}
+
+.samo-demo .btn-light:hover {
+    background: rgba(255, 255, 255, 0.2);
+    border-color: rgba(255, 255, 255, 0.3);
+    color: white;
+    transform: translateY(-2px) scale(1.05);
+}
+
+/* Form controls */
+.samo-demo .form-control {
+    background: var(--glass-bg);
+    backdrop-filter: blur(10px);
+    border: 1px solid var(--glass-border);
+    border-radius: 12px;
+    color: #e2e8f0;
+    padding: 12px 16px;
+}
+
+.samo-demo .form-control:focus {
+    background: var(--glass-bg);
+    border-color: var(--primary-color);
+    box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
+    color: #e2e8f0;
+}
+
+.samo-demo .form-control::placeholder {
+    color: #94a3b8;
+}
+
+/* Cards and badges */
+.samo-demo .card {
+    background: var(--glass-bg);
+    backdrop-filter: blur(15px);
+    border: 1px solid var(--glass-border);
+    border-radius: 20px;
+    box-shadow: var(--shadow-glass);
+    color: #e2e8f0;
+}
+
+.samo-demo .badge {
+    background: var(--primary-gradient);
+    color: white;
+    border-radius: 20px;
+    padding: 8px 12px;
+    font-weight: 600;
+}
+
+.samo-demo .badge.bg-success {
+    background: linear-gradient(135deg, #10b981, #34d399);
+}
+
+/* Progress bars */
+.samo-demo .progress {
+    background: rgba(139, 92, 246, 0.2);
+    border-radius: 10px;
+    height: 8px;
+}
+
+.samo-demo .progress-bar {
+    background: var(--primary-gradient);
+    border-radius: 10px;
+}
+
+/* Animations */
+@keyframes float {
+    0%, 100% { transform: translateY(0px) rotate(0deg); }
+    33% { transform: translateY(-20px) rotate(1deg); }
+    66% { transform: translateY(-10px) rotate(-1deg); }
+}
+
+/* Alert messages */
+.samo-demo .alert {
+    background: var(--glass-bg);
+    backdrop-filter: blur(15px);
+    border: 1px solid var(--glass-border);
+    border-radius: 15px;
+    color: #e2e8f0;
+}
+
+/* Section backgrounds */
+.samo-demo .bg-light {
+    background: rgba(0, 0, 0, 0.2);
+}
+
+.samo-demo .bg-primary {
+    background: var(--primary-gradient);
+}
+
+/* Links */
+.samo-demo a {
+    color: var(--accent-color);
+    text-decoration: none;
+}
+
+.samo-demo a:hover {
+    color: var(--primary-color);
+    text-decoration: none;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+    .samo-demo .hero-section {
+        padding: 80px 0;
+    }
+
+    .samo-demo .integration-card {
+        padding: 25px;
+        margin-bottom: 20px;
+    }
+
+    .samo-demo .feature-icon {
+        width: 60px;
+        height: 60px;
+        font-size: 24px;
+        margin-bottom: 20px;
+    }
+}
diff --git a/website/index.html b/website/index.html
index af02fd77b..2ad6b4336 100644
--- a/website/index.html
+++ b/website/index.html
@@ -5,361 +5,16 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>SAMO Deep Learning - Production Emotion Detection API</title>
     <meta name="description" content="Enterprise-grade emotion detection API with >90% F1 score and 2.3x performance optimization">
-    
+
     <!-- 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">
     <!-- Custom CSS -->
-    <style>
-        :root {
-            /* Sophisticated dark gradient color palette */
-            --primary-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
-            --secondary-gradient: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #3730a3 100%);
-            --dark-gradient: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
-            --accent-gradient: linear-gradient(135deg, #7c3aed 0%, #9333ea 50%, #c084fc 100%);
-            
-            --primary-color: #8b5cf6;
-            --secondary-color: #a855f7;
-            --accent-color: #c084fc;
-            --dark-color: #0f0f23;
-            --darker-color: #0a0a1a;
-            --light-accent: #e9d5ff;
-            --glass-bg: rgba(139, 92, 246, 0.1);
-            --glass-border: rgba(139, 92, 246, 0.2);
-            
-            /* Performance and animation settings */
-            --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-            --transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-            --shadow-glow: 0 10px 40px rgba(139, 92, 246, 0.3);
-            --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.3);
-        }
-
-        /* Removed universal transition for better performance */
-        .card, .btn, .nav-link, .badge, .form-control, .feature-card, .hero-card {
-            transition: var(--transition-smooth);
-        }
-
-        body {
-            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-            line-height: 1.6;
-            color: #e2e8f0;
-            background: var(--dark-gradient);
-            background-attachment: fixed;
-            min-height: 100vh;
-        }
-
-        .hero-section {
-            background: var(--dark-gradient);
-            color: white;
-            padding: 120px 0;
-            position: relative;
-            overflow: hidden;
-        }
-
-        .hero-section::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: 
-                radial-gradient(circle at 20% 50%, rgba(139, 92, 246, 0.3) 0%, transparent 50%),
-                radial-gradient(circle at 80% 20%, rgba(168, 85, 247, 0.2) 0%, transparent 50%),
-                radial-gradient(circle at 40% 80%, rgba(192, 132, 252, 0.2) 0%, transparent 50%);
-            animation: float 6s ease-in-out infinite;
-        }
-
-        .hero-content {
-            position: relative;
-            z-index: 2;
-        }
-
-        .feature-card {
-            background: var(--glass-bg);
-            backdrop-filter: blur(20px);
-            border: 1px solid var(--glass-border);
-            border-radius: 20px;
-            box-shadow: var(--shadow-glass);
-            transition: var(--transition-bounce);
-            height: 100%;
-            color: #e2e8f0;
-        }
-
-        .feature-card:hover {
-            transform: translateY(-10px) scale(1.02);
-            box-shadow: var(--shadow-glow);
-            border-color: var(--primary-color);
-        }
-
-        .feature-card.border-success {
-            border-color: rgba(16, 185, 129, 0.5);
-        }
-
-        .feature-card.border-success:hover {
-            border-color: #10b981;
-            box-shadow: 0 10px 40px rgba(16, 185, 129, 0.3);
-        }
-
-        .feature-icon {
-            width: 80px;
-            height: 80px;
-            border-radius: 20px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 32px;
-            margin-bottom: 30px;
-            box-shadow: var(--shadow-glass);
-        }
-
-        .stats-card {
-            background: var(--glass-bg);
-            backdrop-filter: blur(15px);
-            border: 1px solid var(--glass-border);
-            color: #e2e8f0;
-            border-radius: 20px;
-            padding: 30px;
-            text-align: center;
-            transition: var(--transition-smooth);
-            box-shadow: var(--shadow-glass);
-        }
-
-        .stats-card:hover {
-            transform: translateY(-5px);
-            box-shadow: var(--shadow-glow);
-        }
-
-        .stats-card h3 {
-            background: var(--primary-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-        }
-
-        .demo-section {
-            background: rgba(0, 0, 0, 0.2);
-            padding: 100px 0;
-        }
-
-        .integration-card {
-            background: var(--glass-bg);
-            backdrop-filter: blur(20px);
-            border: 1px solid var(--glass-border);
-            border-radius: 20px;
-            padding: 40px;
-            box-shadow: var(--shadow-glass);
-            margin-bottom: 30px;
-            color: #e2e8f0;
-            transition: var(--transition-smooth);
-        }
-
-        .integration-card:hover {
-            transform: translateY(-5px);
-            box-shadow: var(--shadow-glow);
-        }
-
-        .code-block {
-            background: var(--darker-color);
-            border: 1px solid var(--glass-border);
-            border-radius: 15px;
-            padding: 25px;
-            font-family: 'Fira Code', monospace;
-            font-size: 14px;
-            overflow-x: auto;
-            color: #e2e8f0;
-        }
-
-        .navbar {
-            background: rgba(15, 15, 35, 0.95);
-            backdrop-filter: blur(20px);
-            border-bottom: 1px solid var(--glass-border);
-        }
-
-        .navbar-brand, .navbar .nav-link {
-            color: #e2e8f0;
-        }
-
-        .footer {
-            background: var(--dark-gradient);
-            color: #e2e8f0;
-            padding: 80px 0 40px;
-            border-top: 1px solid var(--glass-border);
-        }
-
-        .btn-primary {
-            background: var(--primary-gradient);
-            border: none;
-            border-radius: 12px;
-            padding: 12px 30px;
-            font-weight: 600;
-            transition: var(--transition-bounce);
-            box-shadow: var(--shadow-glow);
-        }
-
-        .btn-primary:hover {
-            transform: translateY(-2px) scale(1.05);
-            box-shadow: 0 15px 50px rgba(139, 92, 246, 0.4);
-        }
-
-        .btn-outline-light {
-            border: 2px solid rgba(226, 232, 240, 0.5);
-            color: #e2e8f0;
-            border-radius: 12px;
-            padding: 10px 28px;
-            font-weight: 600;
-            transition: var(--transition-smooth);
-        }
-
-        .btn-outline-light:hover {
-            background: rgba(226, 232, 240, 0.1);
-            border-color: #e2e8f0;
-            color: #e2e8f0;
-            transform: translateY(-2px);
-        }
-
-        .btn-light {
-            background: rgba(255, 255, 255, 0.1);
-            backdrop-filter: blur(10px);
-            border: 1px solid rgba(255, 255, 255, 0.2);
-            color: white;
-            border-radius: 12px;
-            padding: 12px 30px;
-            font-weight: 600;
-            transition: var(--transition-bounce);
-        }
-
-        .btn-light:hover {
-            background: rgba(255, 255, 255, 0.2);
-            border-color: rgba(255, 255, 255, 0.3);
-            color: white;
-            transform: translateY(-2px) scale(1.05);
-        }
-
-        /* Form controls */
-        .form-control {
-            background: var(--glass-bg);
-            backdrop-filter: blur(10px);
-            border: 1px solid var(--glass-border);
-            border-radius: 12px;
-            color: #e2e8f0;
-            padding: 12px 16px;
-        }
-
-        .form-control:focus {
-            background: var(--glass-bg);
-            border-color: var(--primary-color);
-            box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
-            color: #e2e8f0;
-        }
-
-        .form-control::placeholder {
-            color: #94a3b8;
-        }
-
-        /* Cards and badges */
-        .card {
-            background: var(--glass-bg);
-            backdrop-filter: blur(15px);
-            border: 1px solid var(--glass-border);
-            border-radius: 20px;
-            box-shadow: var(--shadow-glass);
-            color: #e2e8f0;
-        }
-
-        .badge {
-            background: var(--primary-gradient);
-            color: white;
-            border-radius: 20px;
-            padding: 8px 12px;
-            font-weight: 600;
-        }
-
-        .badge.bg-success {
-            background: linear-gradient(135deg, #10b981, #34d399);
-        }
-
-        /* Progress bars */
-        .progress {
-            background: rgba(139, 92, 246, 0.2);
-            border-radius: 10px;
-            height: 8px;
-        }
-
-        .progress-bar {
-            background: var(--primary-gradient);
-            border-radius: 10px;
-        }
-
-        /* Animations */
-        @keyframes float {
-            0%, 100% { transform: translateY(0px) rotate(0deg); }
-            33% { transform: translateY(-20px) rotate(1deg); }
-            66% { transform: translateY(-10px) rotate(-1deg); }
-        }
-
-        @keyframes fadeInUp {
-            from {
-                opacity: 0;
-                transform: translateY(40px) scale(0.95);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0) scale(1);
-            }
-        }
-
-        /* Alert messages */
-        .alert {
-            background: var(--glass-bg);
-            backdrop-filter: blur(15px);
-            border: 1px solid var(--glass-border);
-            border-radius: 15px;
-            color: #e2e8f0;
-        }
-
-        /* Section backgrounds */
-        .bg-light {
-            background: rgba(0, 0, 0, 0.2);
-        }
-
-        .bg-primary {
-            background: var(--primary-gradient);
-        }
-
-        /* Links */
-        a {
-            color: var(--accent-color);
-            text-decoration: none;
-        }
-
-        a:hover {
-            color: var(--primary-color);
-            text-decoration: none;
-        }
-
-        /* Responsive design */
-        @media (max-width: 768px) {
-            .hero-section {
-                padding: 80px 0;
-            }
-            
-            .integration-card {
-                padding: 25px;
-                margin-bottom: 20px;
-            }
-            
-            .feature-icon {
-                width: 60px;
-                height: 60px;
-                font-size: 24px;
-                margin-bottom: 20px;
-            }
-        }
+    <link href="css/styles.css" rel="stylesheet">
     </style>
 </head>
-<body>
+<body class="samo-demo">
     <!-- Navigation -->
     <nav class="navbar navbar-expand-lg navbar-light fixed-top">
         <div class="container">
@@ -404,8 +59,8 @@ <h1 class="display-4 fw-bold mb-4">
                         🚀 Complete AI Integration Platform
                     </h1>
                     <p class="lead mb-4">
-                        <strong>100% Priority 1 Features Complete!</strong> Enterprise-grade AI platform with JWT authentication, 
-                        voice transcription, text summarization, real-time processing, and comprehensive monitoring. 
+                        <strong>100% Priority 1 Features Complete!</strong> Enterprise-grade AI platform with JWT authentication,
+                        voice transcription, text summarization, real-time processing, and comprehensive monitoring.
                         Production-ready with <strong>>90% F1 score</strong> and <strong>2.3x performance optimization</strong>.
                     </p>
                                         <div class="d-flex gap-3">
@@ -475,7 +130,7 @@ <h2 class="display-5 fw-bold mb-3">🎯 Priority 1 Features - 100% Complete</h2>
                             </div>
                             <h5 class="card-title fw-bold">JWT Authentication System</h5>
                             <p class="card-text text-muted">
-                                Complete token lifecycle management with register, login, refresh, logout, and profile endpoints. 
+                                Complete token lifecycle management with register, login, refresh, logout, and profile endpoints.
                                 Secure with blacklist tracking and permission-based access control.
                             </p>
                             <div class="badge bg-success">✅ Complete</div>
@@ -490,7 +145,7 @@ <h5 class="card-title fw-bold">JWT Authentication System</h5>
                             </div>
                             <h5 class="card-title fw-bold">Enhanced Voice Transcription</h5>
                             <p class="card-text text-muted">
-                                Advanced Whisper integration with batch processing, real-time streaming, and comprehensive 
+                                Advanced Whisper integration with batch processing, real-time streaming, and comprehensive
                                 error handling. Supports multiple audio formats with file validation.
                             </p>
                             <div class="badge bg-success">✅ Complete</div>
@@ -505,7 +160,7 @@ <h5 class="card-title fw-bold">Enhanced Voice Transcription</h5>
                             </div>
                             <h5 class="card-title fw-bold">Text Summarization & Analysis</h5>
                             <p class="card-text text-muted">
-                                Multi-model T5 summarization with emotional analysis, key point extraction, and 
+                                Multi-model T5 summarization with emotional analysis, key point extraction, and
                                 customizable compression ratios. Real-time processing with confidence scoring.
                             </p>
                             <div class="badge bg-success">✅ Complete</div>
@@ -520,7 +175,7 @@ <h5 class="card-title fw-bold">Text Summarization & Analysis</h5>
                             </div>
                             <h5 class="card-title fw-bold">Real-time Batch Processing</h5>
                             <p class="card-text text-muted">
-                                WebSocket-based real-time processing with progress tracking, partial results, and 
+                                WebSocket-based real-time processing with progress tracking, partial results, and
                                 comprehensive error handling. Supports concurrent processing with rate limiting.
                             </p>
                             <div class="badge bg-success">✅ Complete</div>
@@ -535,7 +190,7 @@ <h5 class="card-title fw-bold">Real-time Batch Processing</h5>
                             </div>
                             <h5 class="card-title fw-bold">Comprehensive Monitoring</h5>
                             <p class="card-text text-muted">
-                                Real-time dashboard with system metrics, model performance tracking, error rate monitoring, 
+                                Real-time dashboard with system metrics, model performance tracking, error rate monitoring,
                                 and health status alerts. Production-ready observability.
                             </p>
                             <div class="badge bg-success">✅ Complete</div>
@@ -550,7 +205,7 @@ <h5 class="card-title fw-bold">Comprehensive Monitoring</h5>
                             </div>
                             <h5 class="card-title fw-bold">Comprehensive Testing</h5>
                             <p class="card-text text-muted">
-                                Complete test suite with 1,094 lines of integration tests covering all endpoints, 
+                                Complete test suite with 1,094 lines of integration tests covering all endpoints,
                                 edge cases, error scenarios, and security validation. 100% code review issues resolved.
                             </p>
                             <div class="badge bg-success">✅ Complete</div>
@@ -1132,7 +787,7 @@ <h6 class="fw-bold mb-3">Connect</h6>
 
     <!-- Bootstrap JS -->
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
-    
+
     <!-- Demo Script -->
     <script>
         // Configure API Base URL for display (replace with your actual deployment URL)
@@ -1157,10 +812,10 @@ <h6 class="fw-bold mb-3">Connect</h6>
                 // For demo purposes, we'll simulate the API call
                 // In production, this would call the actual API
                 await new Promise(resolve => setTimeout(resolve, 1500));
-                
+
                 // Simulate API response
                 const emotions = simulateEmotionAnalysis(text);
-                
+
                 // Display results
                 displayResults(emotions);
             } catch (error) {
@@ -1175,7 +830,7 @@ <h6 class="fw-bold mb-3">Connect</h6>
             // Simple emotion detection simulation
             const textLower = text.toLowerCase();
             const emotions = [];
-            
+
             if (textLower.includes('happy') || textLower.includes('joy') || textLower.includes('excited')) {
                 emotions.push({ emotion: 'joy', confidence: 0.89 });
             }
@@ -1194,23 +849,23 @@ <h6 class="fw-bold mb-3">Connect</h6>
             if (textLower.includes('surprise') || textLower.includes('amazed') || textLower.includes('shocked')) {
                 emotions.push({ emotion: 'surprise', confidence: 0.84 });
             }
-            
+
             // Default to neutral if no specific emotions detected
             if (emotions.length === 0) {
                 emotions.push({ emotion: 'neutral', confidence: 0.75 });
             }
-            
+
             return emotions;
         }
 
         function displayResults(emotions) {
             const resultsContainer = document.getElementById('emotionResults');
             resultsContainer.innerHTML = '';
-            
+
             emotions.forEach(emotion => {
                 const confidencePercent = Math.round(emotion.confidence * 100);
                 const colorClass = getEmotionColor(emotion.emotion);
-                
+
                 const emotionCard = `
                     <div class="col-md-6">
                         <div class="card border-0 shadow-sm">
@@ -1219,7 +874,7 @@ <h6 class="fw-bold mb-3">Connect</h6>
                                     <div>
                                         <h6 class="mb-1 fw-bold text-capitalize">${emotion.emotion}</h6>
                                         <div class="progress" style="height: 8px;">
-                                            <div class="progress-bar ${colorClass}" 
+                                            <div class="progress-bar ${colorClass}"
                                                  style="width: ${confidencePercent}%"></div>
                                         </div>
                                     </div>
@@ -1233,7 +888,7 @@ <h6 class="mb-1 fw-bold text-capitalize">${emotion.emotion}</h6>
                 `;
                 resultsContainer.innerHTML += emotionCard;
             });
-            
+
             document.getElementById('demoResult').style.display = 'block';
         }
 
@@ -1265,4 +920,4 @@ <h6 class="mb-1 fw-bold text-capitalize">${emotion.emotion}</h6>
         });
     </script>
 </body>
-</html> 
\ No newline at end of file
+</html>