UI Refinement: Lumina Glass theme restoration, Branding updates to WQF7006, Layout compaction, and Sidebar swap

GITHUB_AUTH.md

@@ -0,0 +1,18 @@
+# GitHub Authentication Instructions
+
+## Step 1: Copy Your Code
+```
+E2FF-39B2
+```
+
+## Step 2: Open Browser
+Go to: https://github.com/login/device
+
+## Step 3: Enter Code
+Paste the code `E2FF-39B2` when prompted
+
+## Step 4: Authorize
+Click "Authorize" to allow GitHub CLI access
+
+## Step 5: Return Here
+Once completed, type "done" and I'll push your code to GitHub!

README.md

@@ -0,0 +1,67 @@
+# Malaysian Sign Language Recognition (CVSLR)
+
+A real-time Malaysian Sign Language recognition system using Computer Vision and Deep Learning.
+
+## Features
+
+- **Real-time Recognition**: Live camera feed processing with gesture detection
+- **Video Upload**: Support for single video and batch playlist processing
+- **High Accuracy**: CNN-Transformer hybrid model with 50 gesture classes
+- **Modern UI**: Elegant glassmorphism design with gradient accents
+- **Session Logging**: Track detected gestures with confidence scores
+
+## Technology Stack
+
+- **Backend**: Flask, Python 3.11
+- **ML/AI**: PyTorch, MediaPipe, OpenCV
+- **Frontend**: HTML5, CSS3, JavaScript
+- **Model**: CNN-Transformer Hybrid Architecture
+
+## Local Setup
+
+1. **Clone the repository**
+   ```bash
+   git clone https://github.com/WondosenAm/CVSLR.git
+   cd CVSLR
+   ```
+
+2. **Create virtual environment**
+   ```bash
+   python -m venv venv
+   source venv/bin/activate  # On Windows: venv\Scripts\activate
+   ```
+
+3. **Install dependencies**
+   ```bash
+   pip install -r requirements.txt
+   ```
+
+4. **Run the application**
+   ```bash
+   python app.py
+   ```
+
+5. **Access the app**
+   - Open browser: `http://127.0.0.1:8181`
+
+## Deployment
+
+See [DEPLOYMENT.md](DEPLOYMENT.md) for instructions on deploying to Render or other platforms.
+
+## Model Information
+
+- **Architecture**: CNN-Transformer Hybrid
+- **Input**: 30-frame sequences of pose + hand landmarks (258 features)
+- **Output**: 50 Malaysian Sign Language gestures
+- **Confidence Threshold**: 60%
+
+## Credits
+
+**Developed by**: Group 4 (Vision)  
+**Institution**: Faculty of Computer Science and Information Technology  
+**Department**: Artificial Intelligence  
+**University**: University Malaya
+
+## License
+
+This project is for educational purposes.

app.py

@@ -5,7 +5,7 @@ import cv2
 import threading
 import time
 import atexit
-from video_processor import GestureRecognizer, GESTURE_NAMES
+from video_processor import GestureRecognizer, GESTURE_NAMES, GESTURE_TRANSLATIONS
 
 app = Flask(__name__)
 app.config['UPLOAD_FOLDER'] = 'uploads'
@@ -70,6 +70,11 @@ class CameraStream:
     def update(self):
         global outputFrame
         global latest_prediction
+        
+        # Track predictions for continuous gloss-level prediction
+        frame_buffer = []  # Buffer to collect 30 frames
+        gloss_predictions = []  # Store all gloss predictions with confidence
+        
         while True:
             if self.running and self.video is not None and self.video.isOpened():
                 success, frame = self.video.read()
@@ -78,56 +83,95 @@ class CameraStream:
                     if self.source == 0:
                         frame = cv2.flip(frame, 1)
                     
-                    # Process frame
+                    # Add frame to buffer
+                    frame_buffer.append(frame.copy())
+                    
+                    # Process frame for visualization
                     try:
                         result = self.recognizer.predict(frame)
                         
-                        # Update global prediction state
-                        probs = result['probabilities']
-                        top_3 = []
-                        if probs is not None:
-                            top_indices = probs.argsort()[-3:][::-1]
-                            top_3 = [
-                                {"name": GESTURE_NAMES.get(i, f"G{i}"), "prob": float(probs[i])}
-                                for i in top_indices
-                            ]
-                        
-                        # Enforce Threshold
-                        gesture_name = result['gesture_name']
-                        confidence = float(result['confidence'])
-                        
-                        if gesture_name is None or confidence < 0.6:
-                            gesture_name = "Unknown"
-                            
-                        latest_prediction = {
-                            "gesture": gesture_name,
-                            "confidence": confidence,
-                            "top_3": top_3
-                        }
-
                         # Draw results
                         annotated_frame = self.recognizer.draw_landmarks(frame, result['pose_result'], result['hand_result'])
                         
                         with lock:
                             outputFrame = annotated_frame.copy()
+                        
+                        # CONTINUOUS GLOSS-LEVEL PREDICTION
+                        # When we have 30 frames, predict the gloss
+                        if len(frame_buffer) >= 30:
+                            # Process the 30-frame window for gloss prediction
+                            window_result = self.recognizer.predict(frame_buffer[-1])  # Use last frame's result
+                            
+                            probs = window_result['probabilities']
+                            top_3 = []
+                            if probs is not None:
+                                top_indices = probs.argsort()[-3:][::-1]
+                                top_3 = [
+                                    {"name": GESTURE_NAMES.get(i, f"G{i}"), "prob": float(probs[i])}
+                                    for i in top_indices
+                                ]
+                            
+                            gesture_name = window_result['gesture_name']
+                            confidence = float(window_result['confidence'])
+                            
+                            if gesture_name is None or confidence < 0.6:
+                                gesture_name = "Unknown"
+                            
+                            # For webcam: update immediately
+                            # For video: accumulate glosses and show highest confidence
+                            if self.source == 0:
+                                # Webcam: real-time updates
+                                latest_prediction = {
+                                    "gesture": gesture_name,
+                                    "confidence": confidence,
+                                    "top_3": top_3
+                                }
+                            else:
+                                # Video: accumulate gloss predictions
+                                if gesture_name != "Unknown":
+                                    gloss_predictions.append({
+                                        "gesture": gesture_name,
+                                        "confidence": confidence,
+                                        "top_3": top_3
+                                    })
+                                    
+                                    # Update display with highest confidence gloss so far
+                                    best_gloss = max(gloss_predictions, key=lambda x: x['confidence'])
+                                    latest_prediction = best_gloss
+                            
+                            # Slide the window (remove oldest 10 frames, keep overlap)
+                            frame_buffer = frame_buffer[10:]
+                            
                     except Exception as e:
                         print(f"Error processing frame: {e}")
                         
                 else:
                     # Video finished
                     if isinstance(self.source, str):
-                        print(f"Finished: {self.source}")
+                        print(f"Finished processing video: {self.source}")
+                        
+                        # Final gloss prediction: highest confidence from all windows
+                        if gloss_predictions:
+                            best_prediction = max(gloss_predictions, key=lambda x: x['confidence'])
+                            latest_prediction = best_prediction
+                            print(f"FINAL GLOSS: {best_prediction['gesture']} (confidence: {best_prediction['confidence']:.2%})")
+                            print(f"Total gloss predictions: {len(gloss_predictions)}")
+                        else:
+                            print("No valid gloss predictions found")
+                        
+                        # Clear buffers for next video
+                        frame_buffer = []
+                        gloss_predictions = []
                         
                         # Check queue
                         if self.queue:
-                            print(f"Starting next in queue. Remaining: {len(self.queue)}")
+                            print(f"Starting next video. Remaining: {len(self.queue)}")
                             self.video.release()
                             self.source = self.queue.pop(0)
                             self.video = cv2.VideoCapture(self.source)
-                            # Loop continues immediately with new source
                         else:
-                            print("Playlist finished.")
-                            self.running = False # Internal stop without clearing queue (already empty)
+                            print("All videos processed.")
+                            self.running = False
                             if self.video:
                                 self.video.release()
                                 self.video = None

static/style.css

@@ -1,5 +1,5 @@
 :root {
-    /* Elegant Modern Palette */
+    /* Elegant Modern Palette (Lumina Glass) */
     --bg-core: #f8f9fc;
     --bg-panel: #ffffff;
     --nav-border: rgba(0, 0, 0, 0.06);
@@ -19,147 +19,184 @@
     --active: #667eea;
     --warning: #f59e0b;
 
-    /* Enhanced Shadows */
-    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
-    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
-    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.08);
-    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12);
-
-    --font-main: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-    --radius: 16px;
+    --error: #ef4444;
+    --bg-main: #f8fafc;
+    --nav-border: rgba(226, 232, 240, 0.5);
+    --text-primary: #0f172a;
+    --text-main: #334155;
     --radius-lg: 24px;
+    --radius-md: 16px;
+    --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
+    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
+    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+    --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
 }
 
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
+    font-family: 'Outfit', 'Inter', sans-serif;
 }
 
 body {
-    background-color: var(--bg-core);
-    font-family: var(--font-main);
-    color: var(--accent-primary);
-    color: var(--accent-primary);
+    background: #fdfeff;
+    color: var(--text-main);
     height: 100vh;
-    /* Fixed height to keep everything "in frame" */
-    width: 100vw;
-    display: flex;
-    justify-content: center;
-    align-items: center;
     overflow: hidden;
-    /* Prevent body scroll */
-
-    /* Professional Animated Gradient */
-    background: linear-gradient(-45deg, #f5f7fa, #e4e9f2, #d6dce8, #f0f4f8);
-    background-size: 400% 400%;
-    animation: gradientBG 25s ease infinite;
+    position: relative;
+    background-image:
+        radial-gradient(at 0% 0%, rgba(102, 126, 234, 0.08) 0, transparent 40%),
+        radial-gradient(at 100% 0%, rgba(118, 75, 162, 0.08) 0, transparent 40%),
+        radial-gradient(at 50% 100%, rgba(79, 172, 254, 0.05) 0, transparent 40%),
+        radial-gradient(at 0% 100%, rgba(240, 147, 251, 0.05) 0, transparent 40%);
+    background-size: 200% 200%;
+    animation: aurora-shift 20s ease infinite alternate;
 }
 
-@keyframes gradientBG {
+@keyframes aurora-shift {
     0% {
-        background-position: 0% 50%;
-    }
-
-    50% {
-        background-position: 100% 50%;
+        background-position: 0% 0%;
     }
 
     100% {
-        background-position: 0% 50%;
+        background-position: 100% 100%;
     }
 }
 
-/* New Header Styles */
+.dashboard {
+    display: flex;
+    height: 100vh;
+    padding: 1.5rem;
+    gap: 1.5rem;
+    background: radial-gradient(circle at center, transparent 0%, rgba(255, 255, 255, 0.2) 100%);
+}
+
+/* Glass Panels with improved depth */
+/* Hyper-Premium Glass Morphism */
+.glass-panel {
+    background: rgba(255, 255, 255, 0.45);
+    backdrop-filter: blur(40px) saturate(200%);
+    -webkit-backdrop-filter: blur(40px) saturate(200%);
+    border-radius: var(--radius-lg);
+    border: 1px solid rgba(255, 255, 255, 0.6);
+    box-shadow:
+        0 8px 32px 0 rgba(31, 38, 135, 0.04),
+        inset 0 0 0 1px rgba(255, 255, 255, 0.4);
+    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
+}
+
 .main-header {
-    background: transparent;
-    padding: 1.5rem 2rem;
     display: flex;
-    justify-content: flex-start;
     align-items: center;
-    border-bottom: 1px solid var(--nav-border);
+    padding: 1rem 3.5rem;
+    background: rgba(255, 255, 255, 0.55);
+    backdrop-filter: blur(30px) saturate(180%);
+    border: 1px solid rgba(255, 255, 255, 0.8);
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04), inset 0 1px 2px rgba(255, 255, 255, 0.5);
+    border-radius: 1000px;
+    margin: 0 auto 0.25rem;
+    width: fit-content;
+    min-width: 94%;
     position: relative;
     z-index: 20;
 }
 
-.header-content h1 {
-    font-size: 1.5rem;
-    font-weight: 700;
-    letter-spacing: -0.02em;
-    margin-bottom: 0.25rem;
+/* Animation Removed for Stability */
+
+.logo-circle-container {
+    width: 70px;
+    height: 70px;
+    background: white;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 1.5rem;
+    box-shadow:
+        var(--shadow-md),
+        0 0 0 3px rgba(255, 255, 255, 0.4);
+    border: 1px solid rgba(255, 255, 255, 0.8);
+    overflow: hidden;
+    flex-shrink: 0;
+    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
 
-.header-content p {
-    font-size: 0.85rem;
-    color: var(--accent-secondary);
-    text-transform: uppercase;
-    letter-spacing: 0.1em;
+.logo-circle-container:hover {
+    transform: scale(1.1) rotate(-5deg);
 }
 
 .uni-logo {
-    height: 60px;
-    width: auto;
+    width: 50px;
+    height: auto;
 }
 
 /* Layout Updates for 3-Column Dashboard */
 .container {
     width: 100%;
-    height: 100%;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    padding: 0.75rem 2rem 2rem;
+    box-sizing: border-box;
+    overflow: hidden;
+    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 80%);
+}
+
+.content-row {
     display: grid;
-    grid-template-columns: 280px 1fr 300px;
-    /* Left Menu | Main | Right Output */
-    grid-template-rows: 100%;
-    background: transparent;
-    gap: 1rem;
-    padding: 1rem;
+    grid-template-columns: 300px 1fr 320px;
+    gap: 2.5rem;
+    flex: 1;
+    min-height: 0;
+    align-items: stretch;
+    /* Make both sidebars equal height */
 }
 
-/* Enhanced Sidebar Glassmorphism */
+/* Sidebars - Integrated & Floating */
 .sidebar {
-    background: rgba(255, 255, 255, 0.75);
-    backdrop-filter: blur(40px) saturate(180%);
-    -webkit-backdrop-filter: blur(40px) saturate(180%);
-    border: 1px solid rgba(255, 255, 255, 0.6);
-    border-image: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2)) 1;
-    padding: 2rem;
+    background: rgba(255, 255, 255, 0.45);
+    backdrop-filter: blur(50px) saturate(220%);
+    -webkit-backdrop-filter: blur(50px) saturate(220%);
+    border: 1px solid rgba(255, 255, 255, 0.8);
+    padding: 2.25rem;
     display: flex;
     flex-direction: column;
-    gap: 1.75rem;
-    overflow-y: auto;
-    overflow-x: hidden;
+    gap: 2rem;
+    width: 100%;
+    height: 100%;
+    max-height: 90vh;
     z-index: 10;
+    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.04), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
+    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+    box-sizing: border-box;
     border-radius: var(--radius-lg);
-    box-shadow: var(--shadow-lg),
-        inset 0 1px 0 rgba(255, 255, 255, 0.8);
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .sidebar:hover {
-    box-shadow: var(--shadow-xl),
-        inset 0 1px 0 rgba(255, 255, 255, 0.9);
-    transform: translateY(-2px);
-}
-
-.left-sidebar {
-    margin: 1rem 0 1rem 1rem;
-    /* Float Left */
-}
-
-.right-sidebar {
-    margin: 1rem 1rem 1rem 0;
-    /* Float Right */
+    transform: translateY(-5px);
+    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.08);
+    border-color: rgba(255, 255, 255, 0.8);
 }
 
 .logo {
-    font-size: 1rem;
-    font-weight: 700;
-    letter-spacing: 0.05em;
-    color: var(--accent-primary);
     display: flex;
     align-items: center;
-    gap: 0.5rem;
-    padding-bottom: 1rem;
-    border-bottom: 1px solid var(--nav-border);
+    gap: 0.75rem;
+    color: var(--accent-primary);
+    padding: 1.5rem 2.25rem;
+    margin: -2.25rem -2.25rem 1rem;
+    background: rgba(255, 255, 255, 0.5);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+}
+
+.logo span {
+    font-size: 0.75rem;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.2em;
+    color: var(--accent-secondary);
 }
 
 .logo i {
@@ -170,46 +207,56 @@ body {
 .main-view {
     position: relative;
     background: transparent !important;
-    /* Override */
     border: none !important;
     box-shadow: none !important;
-    padding: 1rem !important;
-    /* Add padding for breathing room */
+    padding: 0 !important;
+    padding-top: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
 }
 
 .video-feed {
-    border-radius: 16px;
-    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
+    border-radius: 20px;
+    box-shadow: 0 30px 100px rgba(0, 0, 0, 0.12);
     max-width: 100%;
     max-height: 100%;
     width: auto;
     height: auto;
     object-fit: contain;
-    /* Ensure Aspect Ratio is kept */
+    border: 1px solid rgba(255, 255, 255, 0.5);
+    position: relative;
+}
+
+.video-feed.active {
+    box-shadow: 0 0 80px rgba(102, 126, 234, 0.15), 0 30px 100px rgba(0, 0, 0, 0.12);
 }
 
-/* Premium HUD Pill */
+/* Futuristic HUD Pill */
 .hud-pill {
-    position: absolute;
-    top: 2rem;
-    left: 50%;
-    transform: translateX(-50%);
-    background: rgba(255, 255, 255, 0.9);
-    backdrop-filter: blur(30px) saturate(180%);
-    -webkit-backdrop-filter: blur(30px) saturate(180%);
-    padding: 1rem 2.5rem;
+    position: relative;
+    margin: 0 auto 0.5rem;
+    background: rgba(255, 255, 255, 0.4);
+    backdrop-filter: blur(25px);
+    padding: 0.75rem 3rem;
     border-radius: 100px;
-    box-shadow: var(--shadow-lg),
-        0 0 0 1px rgba(255, 255, 255, 0.8) inset;
+    border: 1px solid rgba(255, 255, 255, 0.6);
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: center;
+    gap: 2px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03), inset 0 1px 1px rgba(255, 255, 255, 0.8);
     z-index: 100;
-    border: 1px solid rgba(255, 255, 255, 0.7);
-    min-width: 240px;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    animation: breathe 4s ease-in-out infinite;
+    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+    width: fit-content;
+}
+
+.hud-pill.pulse {
+    transform: scale(1.05);
+    background: rgba(255, 255, 255, 0.6);
+    border-color: var(--active);
+    box-shadow: 0 0 50px rgba(102, 126, 234, 0.15), 0 10px 30px rgba(0, 0, 0, 0.03);
 }
 
 @keyframes breathe {
@@ -224,12 +271,6 @@ body {
     }
 }
 
-.hud-pill.pulse {
-    transform: translateX(-50%) scale(1.08);
-    box-shadow: var(--shadow-xl),
-        0 0 20px rgba(102, 126, 234, 0.3),
-        0 0 0 1px rgba(255, 255, 255, 0.9) inset;
-}
 
 .hud-label {
     font-size: 0.65rem;
@@ -251,6 +292,14 @@ body {
     filter: drop-shadow(0 2px 4px rgba(102, 126, 234, 0.2));
 }
 
+.hud-translation {
+    font-size: 0.95rem;
+    font-weight: 600;
+    color: var(--accent-secondary);
+    margin-top: 0.25rem;
+    letter-spacing: 0.02em;
+}
+
 @media (max-width: 900px) {
     .container {
         grid-template-columns: 1fr;
@@ -305,17 +354,53 @@ body {
 }
 
 .history-item {
-    font-size: 0.8rem;
+    font-size: 0.85rem;
     display: flex;
     justify-content: space-between;
-    padding: 0.75rem 1rem;
-    background: #ffffff;
-    border: 1px solid var(--nav-border);
-    border-radius: 10px;
-    color: var(--accent-secondary);
-    box-shadow: var(--shadow-sm);
-    transition: all 0.2s ease;
-    animation: slideIn 0.3s ease-out;
+    padding: 0.85rem 1.25rem;
+    background: rgba(255, 255, 255, 0.8);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(0, 51, 153, 0.05);
+    border-radius: 14px;
+    color: var(--text-heritage-secondary);
+    box-shadow: 0 4px 15px rgba(0, 51, 153, 0.02);
+    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+    animation: historyEntry 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+@keyframes historyEntry {
+    0% {
+        opacity: 0;
+        transform: translateY(10px) scale(0.98);
+        filter: blur(5px);
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+        filter: blur(0);
+    }
+}
+
+.video-container {
+    padding: 1rem;
+    background: rgba(255, 255, 255, 0.5);
+    border-radius: var(--radius-zenith);
+    border: 1px solid rgba(255, 255, 255, 1);
+    box-shadow: 0 20px 50px rgba(0, 51, 153, 0.05);
+    position: relative;
+    overflow: hidden;
+}
+
+.video-container::after {
+    content: '';
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: radial-gradient(circle, rgba(74, 144, 226, 0.05) 0%, transparent 70%);
+    pointer-events: none;
 }
 
 @keyframes slideIn {
@@ -359,25 +444,38 @@ body {
 }
 
 .btn-elegant {
-    background: #ffffff;
-    border: 1.5px solid var(--nav-border);
-    color: var(--accent-primary);
-    padding: 1rem 1.25rem;
-    font-family: inherit;
-    font-size: 0.875rem;
-    font-weight: 600;
-    border-radius: var(--radius);
+    width: 100%;
+    padding: 1.15rem 1.75rem;
+    border-radius: var(--radius-md);
+    border: 1px solid rgba(0, 51, 153, 0.1);
+    background: rgba(255, 255, 255, 0.9);
+    backdrop-filter: blur(10px);
+    color: var(--um-blue);
+    font-weight: 800;
+    font-size: 0.9rem;
     cursor: pointer;
     display: flex;
     align-items: center;
-    justify-content: flex-start;
-    gap: 0.875rem;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    box-shadow: var(--shadow-sm);
+    justify-content: center;
+    gap: 0.85rem;
+    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
     position: relative;
     overflow: hidden;
 }
 
+.btn-elegant:hover {
+    background: rgba(255, 255, 255, 0.9);
+    transform: translateY(-3px) scale(1.02);
+    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05);
+    border-color: rgba(255, 255, 255, 1);
+}
+
+.btn-elegant i {
+    font-size: 1.1rem;
+    color: var(--active);
+}
+
 .btn-elegant::before {
     content: '';
     position: absolute;
@@ -412,27 +510,169 @@ body {
     transition: transform 0.3s ease;
 }
 
-.btn-elegant:hover i {
+
+
+/* Radial Gauge */
+.radial-gauge {
+    position: relative;
+    width: 120px;
+    height: 120px;
+    margin: 0 auto;
+}
+
+.radial-gauge svg {
+    width: 100%;
+    height: 100%;
+    transform: rotate(-90deg);
+}
+
+.gauge-bg {
+    fill: none;
+    stroke: var(--nav-border);
+    stroke-width: 8;
+}
+
+.gauge-progress {
+    fill: none;
+    stroke: var(--active);
+    stroke-width: 8;
+    stroke-linecap: round;
+    stroke-dasharray: 283;
+    stroke-dashoffset: 283;
+    transition: stroke-dashoffset 0.5s ease;
+}
+
+.gauge-value {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: var(--accent-primary);
+}
+
+/* Log Controls */
+.log-control-btn {
+    background: none;
+    border: none;
+    color: var(--accent-secondary);
+    cursor: pointer;
+    font-size: 0.9rem;
+    padding: 4px;
+    transition: all 0.2s ease;
+}
+
+.log-control-btn:hover {
+    color: var(--active);
     transform: scale(1.1);
 }
 
-/* CSS Cleanup: Removed duplicate main-view and video-feed definitions */
+/* Modal */
+.modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.4);
+    backdrop-filter: blur(8px);
+    z-index: 1000;
+    justify-content: center;
+    align-items: center;
+}
+
+/* Cloud-Morph Modal */
+.modal-content {
+    background: rgba(255, 255, 255, 0.6);
+    backdrop-filter: blur(60px) saturate(210%);
+    -webkit-backdrop-filter: blur(60px) saturate(210%);
+    border-radius: 40px;
+    width: 95%;
+    max-width: 650px;
+    padding: 4rem;
+    position: relative;
+    box-shadow: 0 50px 100px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
+    border: 1px solid rgba(255, 255, 255, 0.4);
+    max-height: 85vh;
+    overflow-y: auto;
+    animation: modalPop 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes modalPop {
+    0% {
+        opacity: 0;
+        transform: scale(0.9) translateY(20px);
+        filter: blur(10px);
+    }
+
+    100% {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+        filter: blur(0);
+    }
+}
+
+.modal-title {
+    font-size: 2.25rem;
+    font-weight: 800;
+    margin-bottom: 2rem;
+    color: var(--accent-primary);
+    letter-spacing: -0.02em;
+}
 
 .overlay-status {
     position: absolute;
     top: 2rem;
     right: 2rem;
-    background: rgba(0, 0, 0, 0.7);
-    padding: 0.5rem 1rem;
+    background: rgba(15, 23, 42, 0.1);
+    backdrop-filter: blur(10px);
+    padding: 0.6rem 1.25rem;
     border-radius: 100px;
     display: flex;
     align-items: center;
-    gap: 0.5rem;
+    gap: 0.75rem;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    z-index: 10;
 }
 
 .status-dot {
-    width: 8px;
-    height: 8px;
+    width: 10px;
+    height: 10px;
     background: var(--active);
     border-radius: 50%;
+    box-shadow: 0 0 15px var(--active);
+    animation: heartBeat 2s infinite ease-in-out;
+}
+
+@keyframes heartBeat {
+
+    0%,
+    100% {
+        transform: scale(1);
+        opacity: 1;
+    }
+
+    50% {
+        transform: scale(1.3);
+        opacity: 0.6;
+        box-shadow: 0 0 25px var(--active);
+    }
+}
+
+.metric-group {
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+}
+
+.label {
+    font-size: 0.7rem;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.2em;
+    color: var(--accent-secondary);
+    display: block;
+    margin-bottom: 0.25rem;
 }

templates/index.html

@@ -4,319 +4,501 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>CVSLR | Elegant AI</title>
-    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}?v={{ range(1, 10000) | random }}">
-    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400;600&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <title>WQF7006 | Elegant AI</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Inter:wght@400;600&display=swap"
+        rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
 </head>
 
 <body>
     <div class="container">
-        <!-- LEFT SIDEBAR: CONTROLS & INPUT -->
-        <aside class="sidebar left-sidebar glass-panel">
-            <div class="logo">
-                <div style="display: flex; flex-direction: column;">
-                    <span style="font-size: 1.3rem; font-weight: 800; letter-spacing: 0.1em;">CVSLR</span>
-                    <span style="font-size: 0.7rem; font-weight: 500; opacity: 0.8; margin-top: 2px;">Computer Vision &
-                        Image Processing</span>
+        <!-- TOP HEADER -->
+        <header class="main-header" style="justify-content: center; position: relative;">
+            <div class="logo-circle-container" style="position: absolute; left: 4rem; width: 85px; height: 85px;">
+                <img src="{{ url_for('static', filename='um_logo.png') }}" alt="University Malaya Logo" class="uni-logo"
+                    style="width: 58px;">
+            </div>
+            <div class="header-content" style="text-align: center;">
+                <h1
+                    style="font-size: 1.8rem; font-weight: 800; margin-bottom: 0.2rem; color: var(--accent-primary); letter-spacing: -0.01em; white-space: nowrap;">
+                    AI-BASED MALAYSIAN SIGN LANGUAGE SYSTEM
+                </h1>
+                <div
+                    style="display: flex; align-items: center; justify-content: center; gap: 0.75rem; font-size: 0.8rem; font-weight: 600; color: var(--accent-secondary); letter-spacing: 0.02em;">
+                    <span>UNIVERSITI MALAYA</span>
+                    <span style="opacity: 0.3;">|</span>
+                    <span>FACULTY OF COMPUTER SCIENCE & IT</span>
+                    <span style="opacity: 0.3;">|</span>
+                    <span>DEPARTMENT OF AI</span>
+                    <i class="fa-solid fa-circle-info info-icon-btn" onclick="openAboutModal()"
+                        style="font-size: 0.9rem; margin-left: 0.5rem; color: var(--active);"></i>
                 </div>
-                <i class="fa-solid fa-gamepad" style="margin-left: auto;"></i>
             </div>
-
-            <div class="control-area" style="border-top: none; margin-top: 0; padding-top: 0;">
-                <!-- Live Stream -->
-                <div class="input-group">
-                    <label class="input-group-label">LIVE CAMERA</label>
-                    <button id="cam-toggle" class="btn-elegant" onmousedown="toggleCamera()"
-                        ontouchstart="toggleCamera()">
-                        <i class="fa-solid fa-video"></i> Start Live Stream
-                    </button>
-                    <div id="status-text" class="status-text">Ready</div>
+        </header>
+
+        <div class="content-row">
+            <!-- LEFT SIDEBAR: CONTROLS & INPUT -->
+            <aside class="sidebar left-sidebar glass-panel">
+                <div class="logo">
+                    <div style="display: flex; flex-direction: column;">
+                        <span style="font-size: 1.3rem; font-weight: 800; letter-spacing: 0.1em;">WQF7006</span>
+                        <span style="font-size: 0.7rem; font-weight: 500; opacity: 0.8; margin-top: 2px;">Computer
+                            Vision & Image Processing</span>
+                    </div>
+                    <i class="fa-solid fa-gamepad" style="margin-left: auto;"></i>
                 </div>
 
-                <!-- Single Video Upload -->
-                <div class="input-group">
-                    <label class="input-group-label">UPLOAD VIDEO</label>
-                    <button class="btn-elegant" onclick="document.getElementById('single-upload').click()">
-                        <i class="fa-solid fa-upload"></i> Upload File
-                    </button>
-                    <input type="file" id="single-upload" accept="video/*" style="display: none;"
-                        onchange="handleSingleUpload(this)">
-                </div>
+                <div class="control-area" style="border-top: none; margin-top: 0; padding-top: 0;">
+                    <!-- Live Stream -->
+                    <div class="input-group">
+                        <label class="input-group-label" style="display: flex; align-items: center; gap: 0.5rem;">
+                            <span class="status-dot"
+                                style="width: 8px; height: 8px; background: var(--accent-gold); border-radius: 50%; box-shadow: 0 0 10px var(--accent-gold);"></span>
+                            LIVE FROM CAMERA
+                        </label>
+                        <button id="cam-toggle" class="btn-elegant" onmousedown="toggleCamera()"
+                            ontouchstart="toggleCamera()">
+                            <i class="fa-solid fa-video"></i> Start Camera Feed
+                        </button>
+                        <div id="status-text" class="status-text">Ready</div>
+                    </div>
 
-                <!-- Batch Upload -->
-                <div class="input-group">
-                    <label class="input-group-label">BATCH PLAYLIST</label>
-                    <button class="btn-elegant" onclick="document.getElementById('batch-upload').click()">
-                        <i class="fa-solid fa-layer-group"></i> Upload Payload
-                    </button>
-                    <input type="file" id="batch-upload" accept="video/*" multiple style="display: none;"
-                        onchange="handleBatchUpload(this)">
-                </div>
+                    <!-- Single Video Upload -->
+                    <div class="input-group">
+                        <label class="input-group-label">UPLOAD VIDEO</label>
+                        <button class="btn-elegant" onclick="document.getElementById('single-upload').click()">
+                            <i class="fa-solid fa-upload"></i> Upload File
+                        </button>
+                        <input type="file" id="single-upload" accept="video/*" style="display: none;"
+                            onchange="handleSingleUpload(this)">
+                    </div>
 
-                <div id="upload-status"></div>
-            </div>
-        </aside>
+                    <!-- Batch Upload -->
+                    <div class="input-group">
+                        <label class="input-group-label">BATCH PLAYLIST</label>
+                        <button class="btn-elegant" onclick="document.getElementById('batch-upload').click()">
+                            <i class="fa-solid fa-layer-group"></i> Upload Payload
+                        </button>
+                        <input type="file" id="batch-upload" accept="video/*" multiple style="display: none;"
+                            onchange="handleBatchUpload(this)">
+                    </div>
 
-        <!-- CENTER: VIDEO & HEADER -->
-        <main class="main-view glass-panel" style="display:flex; flex-direction:column; padding:0; gap:0;">
-            <header class="main-header">
-                <img src="{{ url_for('static', filename='um_logo.png') }}" alt="University Malaya Logo" class="uni-logo"
-                    style="margin-right: 1.5rem;">
-                <div class="header-content">
-                    <h1 style="font-size: 1.2rem; font-weight: 700; margin-bottom: 0.25rem;">Faculty of Computer Science
-                        and Information Technology</h1>
-                    <p style="font-size: 0.85rem; color: var(--accent-secondary); font-weight: 500;">Department of
-                        Artificial Intelligence</p>
-                </div>
-            </header>
-
-            <div
-                style="flex:1; position:relative; width:100%; display:flex; flex-direction:column; justify-content:center; align-items:center;">
-                <!-- New Creative HUD Output -->
-                <div class="hud-pill" id="hud-pill">
-                    <span class="hud-label">DETECTED GESTURE</span>
-                    <span class="hud-value" id="hud-gesture">Waiting...</span>
-                </div>
+                    <div id="upload-status"></div>
 
-                <div style="position:relative;">
-                    <img src="{{ url_for('video_feed') }}" alt="Live Feed" class="video-feed" id="video-feed">
-                    <div class="overlay-status">
-                        <span class="label">LIVE</span>
-                        <div class="status-dot"></div>
+                    <!-- System Utility -->
+                    <div style="margin-top: 2rem; border-top: 1px solid rgba(0,0,0,0.05); padding-top: 1.5rem;">
+                        <button id="stop-all" class="btn-elegant"
+                            style="background: rgba(102, 126, 234, 0.08); color: #667eea; border: 1px solid rgba(102, 126, 234, 0.15);"
+                            onclick="stopAllSources()">
+                            <i class="fa-solid fa-rotate-right"></i> Reset System
+                        </button>
                     </div>
                 </div>
+            </aside>
 
+            <!-- CENTER: VIDEO VIEW -->
+            <main class="main-view glass-panel"
+                style="display:flex; flex-direction:column; padding:0; gap:0; background: transparent !important; border:none !important; box-shadow:none !important;">
                 <div
-                    style="margin-top: 1rem; font-size: 0.8rem; color: var(--accent-secondary); font-weight: 500; letter-spacing: 0.05em;">
-                    Developed by Group 4 (Vision)
-                </div>
-            </div>
-        </main>
+                    style="flex:1; position:relative; width:100%; display:flex; flex-direction:column; justify-content:center; align-items:center;">
+                    <!-- HUD Output -->
+                    <div class="hud-pill" id="hud-pill">
+                        <span class="hud-label">DETECTED GESTURE</span>
+                        <span class="hud-value" id="hud-gesture">Waiting...</span>
+                    </div>
 
-        <!-- RIGHT SIDEBAR: OUTPUT & LOGS -->
-        <aside class="sidebar right-sidebar glass-panel">
-            <div class="logo">
-                <div style="display:flex; flex-direction:column;">
-                    <span style="font-size: 0.9rem; font-weight: 800; letter-spacing: 0.1em;">SESSION LOG</span>
+                    <div style="position:relative;">
+                        <img src="{{ url_for('video_feed') }}" alt="Live Feed" class="video-feed" id="video-feed">
+                        <div class="overlay-status">
+                            <span class="label">LIVE</span>
+                            <div class="status-dot"></div>
+                        </div>
+                    </div>
+
+                    <div
+                        style="margin-top: 1rem; font-size: 0.8rem; color: var(--accent-secondary); font-weight: 500; letter-spacing: 0.05em;">
+                        Developed by OCC2 Group 4 (Vision)
+                    </div>
+                </div>
+            </main>
+
+            <!-- RIGHT SIDEBAR: OUTPUT & LOGS -->
+            <aside class="sidebar right-sidebar glass-panel">
+                <div class="logo">
+                    <div style="display:flex; flex-direction:column;">
+                        <span style="font-size: 0.9rem; font-weight: 800; letter-spacing: 0.1em;">RECOGNITION
+                            HISTORY</span>
+                    </div>
+                    <div style="margin-left: auto; display: flex; gap: 0.5rem;">
+                        <button class="log-control-btn" onclick="exportLog()" title="Export CSV">
+                            <i class="fa-solid fa-file-export"></i>
+                        </button>
+                        <button class="log-control-btn" onclick="clearLog()" title="Clear Log">
+                            <i class="fa-solid fa-trash-can"></i>
+                        </button>
+                    </div>
                 </div>
-                <i class="fa-solid fa-list-ul" style="margin-left: auto;"></i>
-            </div>
 
-            <div class="metric-group">
-                <span class="label">Confidence</span>
-                <div class="value-display" id="confidence-val" style="font-size: 1.5rem; color: var(--text-main);">0%
+                <div class="metric-group" style="align-items: center;">
+                    <span class="label">Confidence</span>
+                    <div class="radial-gauge">
+                        <svg viewBox="0 0 100 100">
+                            <circle class="gauge-bg" cx="50" cy="50" r="45"></circle>
+                            <circle class="gauge-progress" id="gauge-progress" cx="50" cy="50" r="45"></circle>
+                        </svg>
+                        <div class="gauge-value" id="confidence-val">0%</div>
+                    </div>
                 </div>
-            </div>
 
-            <!-- Top Candidates -->
-            <div class="metric-group" style="flex-grow: 0;">
-                <span class="label">Top Candidates</span>
-                <div class="top-predictions" id="top-predictions">
-                    <!-- Populated by JS -->
+                <!-- Top Candidates -->
+                <div class="metric-group" style="flex-grow: 0;">
+                    <span class="label">Top Candidates</span>
+                    <div class="top-predictions" id="top-predictions">
+                        <!-- Populated by JS -->
+                    </div>
                 </div>
-            </div>
 
-            <div class="metric-group" style="flex-grow: 1; display:flex; flex-direction:column; min-height: 0;">
-                <span class="label">Session Log</span>
-                <div class="history-log" id="history-log">
-                    <!-- Items added here -->
+                <div class="metric-group" style="flex-grow: 1; display:flex; flex-direction:column; min-height: 0;">
+                    <span class="label">Recognition History</span>
+                    <div class="history-log" id="history-log">
+                        <!-- Items added here -->
+                    </div>
                 </div>
-            </div>
-        </aside>
-    </div>
-
-    <script>
-        let isCameraRunning = true;
-        let lastLoggedGesture = null;
-
-        function toggleCamera() {
-            const btn = document.getElementById('cam-toggle');
-            const action = isCameraRunning ? 'stop' : 'start';
-
-            fetch('/api/camera/control', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ action: action, source: 'webcam' })
-            })
-                .then(res => res.json())
-                .then(data => {
-                    const vid = document.getElementById('video-feed');
-                    if (data.status === 'stopped') {
-                        isCameraRunning = false;
-                        vid.classList.remove('active');
-                        btn.innerHTML = '<i class="fa-solid fa-power-off"></i> Resume Stream';
-                        document.querySelector('.status-dot').style.background = '#333';
-                    } else {
-                        isCameraRunning = true;
-                        vid.classList.add('active');
-                        btn.innerHTML = '<i class="fa-solid fa-power-off"></i> Terminate Stream';
-                        document.querySelector('.status-dot').style.background = 'var(--accent-gold)';
-                    }
+            </aside>
+        </div>
+
+        <script>
+            let isCameraRunning = true;
+            let lastLoggedGesture = null;
+
+            function toggleCamera() {
+                const btn = document.getElementById('cam-toggle');
+                const action = isCameraRunning ? 'stop' : 'start';
+
+                console.log(`Toggle Camera: ${action}`);
+
+                fetch('/api/camera/control', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ action: action, source: 'webcam' })
                 })
-                .catch(err => console.error(err));
-        }
-
-        function handleSingleUpload(input) {
-            console.log("Single upload triggered with file:", input.files[0]);
-            handleUpload(input, false);
-            input.value = ''; // Reset to allow re-selecting same file
-        }
-
-        function handleBatchUpload(input) {
-            console.log("Batch upload triggered with files:", input.files.length);
-            handleUpload(input, true);
-            input.value = ''; // Reset
-        }
-
-        function handleUpload(input, isBatch) {
-            const files = input.files;
-            if (!files.length) {
-                alert("No file selected!");
-                return;
+                    .then(res => res.json())
+                    .then(data => {
+                        updateUIState(data.status === 'started', 'webcam');
+                    })
+                    .catch(err => console.error(err));
             }
 
-            const statusEl = document.getElementById('upload-status');
-            statusEl.textContent = isBatch ? `Uploading ${files.length} files...` : 'Uploading video...';
-            statusEl.style.opacity = '1';
+            function stopAllSources() {
+                console.log("Stopping all sources...");
+                fetch('/api/camera/control', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ action: 'stop' })
+                })
+                    .then(res => res.json())
+                    .then(data => {
+                        updateUIState(false, null);
+                        addToLog("All sources stopped", "INFO");
+                    });
+            }
 
-            const formData = new FormData();
-            if (isBatch) {
-                for (let i = 0; i < files.length; i++) {
-                    formData.append('files[]', files[i]);
+            function updateUIState(running, type) {
+                isCameraRunning = running;
+                const vid = document.getElementById('video-feed');
+                const camBtn = document.getElementById('cam-toggle');
+                const dot = document.querySelector('.status-dot');
+                const statusText = document.getElementById('status-text');
+
+                if (running) {
+                    vid.classList.add('active');
+                    dot.style.background = 'var(--accent-gold)';
+                    dot.style.boxShadow = '0 0 10px var(--accent-gold)';
+
+                    if (type === 'webcam') {
+                        camBtn.innerHTML = '<i class="fa-solid fa-video-slash"></i> Stop Camera Feed';
+                        statusText.textContent = 'Live Camera Active';
+                    } else {
+                        camBtn.innerHTML = '<i class="fa-solid fa-video"></i> Start Camera Feed';
+                        statusText.textContent = type === 'playlist' ? 'Batch Playlist Playing' : 'Video Playing';
+                    }
+                } else {
+                    vid.classList.remove('active');
+                    dot.style.background = '#333';
+                    dot.style.boxShadow = 'none';
+                    camBtn.innerHTML = '<i class="fa-solid fa-video"></i> Start Camera Feed';
+                    statusText.textContent = 'Ready';
                 }
-            } else {
-                formData.append('file', files[0]);
             }
 
-            fetch('/api/upload', {
-                method: 'POST',
-                body: formData
-            })
-                .then(res => {
-                    if (!res.ok) throw new Error(`Server Error: ${res.statusText}`);
-                    return res.json();
-                })
-                .then(data => {
-                    console.log("Upload response:", data);
-                    if (data.error) throw new Error(data.error);
+            function handleSingleUpload(input) {
+                console.log("Single upload triggered with file:", input.files[0]);
+                handleUpload(input, false);
+                input.value = ''; // Reset to allow re-selecting same file
+            }
 
-                    statusEl.textContent = 'Initializing Queuer...';
+            function handleBatchUpload(input) {
+                console.log("Batch upload triggered with files:", input.files.length);
+                handleUpload(input, true);
+                input.value = ''; // Reset
+            }
 
-                    // Construct Payload
-                    let payload = { action: 'start' };
+            function handleUpload(input, isBatch) {
+                const files = input.files;
+                if (!files.length) {
+                    alert("No file selected!");
+                    return;
+                }
 
-                    if (isBatch || (data.filenames && data.filenames.length > 0)) {
-                        payload.source = 'playlist';
-                        payload.filenames = data.filenames || [data.filename];
-                    } else {
-                        payload.source = 'video';
-                        payload.filename = data.filename;
+                const statusEl = document.getElementById('upload-status');
+                statusEl.textContent = isBatch ? `Uploading ${files.length} files...` : 'Uploading video...';
+                statusEl.style.opacity = '1';
+
+                const formData = new FormData();
+                if (isBatch) {
+                    for (let i = 0; i < files.length; i++) {
+                        formData.append('files[]', files[i]);
                     }
+                } else {
+                    formData.append('file', files[0]);
+                }
+
+                fetch('/api/upload', {
+                    method: 'POST',
+                    body: formData
+                })
+                    .then(res => {
+                        if (!res.ok) throw new Error(`Server Error: ${res.statusText}`);
+                        return res.json();
+                    })
+                    .then(data => {
+                        console.log("Upload response:", data);
+                        if (data.error) throw new Error(data.error);
+
+                        statusEl.textContent = 'Initializing Queuer...';
+
+                        // Construct Payload
+                        let payload = { action: 'start' };
+
+                        if (isBatch || (data.filenames && data.filenames.length > 0)) {
+                            payload.source = 'playlist';
+                            payload.filenames = data.filenames || [data.filename];
+                        } else {
+                            payload.source = 'video';
+                            payload.filename = data.filename;
+                        }
 
-                    console.log("Sending Control Payload:", payload);
+                        console.log("Sending Control Payload:", payload);
 
-                    return fetch('/api/camera/control', {
-                        method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify(payload)
+                        return fetch('/api/camera/control', {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify(payload)
+                        });
+                    })
+                    .then(res => res.json())
+                    .then(data => {
+                        console.log("Control response:", data);
+                        if (data.status === 'started') {
+                            const type = isBatch ? "Batch Playlist" : "Single Video";
+                            updateUIState(true, isBatch ? 'playlist' : 'video');
+                            addToLog(`New Source: ${type}`, "INFO");
+                            statusEl.textContent = 'Processing Started';
+                        } else {
+                            alert("Failed to start video: " + (data.error || "Unknown error"));
+                        }
+                        setTimeout(() => { statusEl.style.opacity = '0'; }, 3000);
+                    })
+                    .catch(err => {
+                        console.error("Upload/Control Error:", err);
+                        statusEl.textContent = 'Error!';
+                        alert("Upload Failed: " + err.message);
                     });
-                })
-                .then(res => res.json())
-                .then(data => {
-                    console.log("Control response:", data);
-                    if (data.status === 'started') {
-                        isCameraRunning = true;
-                        const btn = document.getElementById('cam-toggle');
-                        btn.innerHTML = '<i class="fa-solid fa-stop"></i> Stop Source';
-                        document.getElementById('video-feed').classList.add('active');
-
-                        const type = isBatch ? "Batch Playlist" : "Single Video";
-                        addToLog(`New Source: ${type}`, "INFO");
-                        statusEl.textContent = 'Processing Started';
-                    } else {
-                        alert("Failed to start video: " + (data.error || "Unknown error"));
-                    }
-                    setTimeout(() => { statusEl.style.opacity = '0'; }, 3000);
-                })
-                .catch(err => {
-                    console.error("Upload/Control Error:", err);
-                    statusEl.textContent = 'Error!';
-                    alert("Upload Failed: " + err.message);
-                });
-        }
+            }
 
-        function addToLog(gesture, confidence) {
-            const log = document.getElementById('history-log');
-            const item = document.createElement('div');
-            item.className = 'history-item';
+            function addToLog(gesture, confidence) {
+                const log = document.getElementById('history-log');
+                const item = document.createElement('div');
+                item.className = 'history-item';
 
-            const time = new Date().toLocaleTimeString([], { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' });
+                const time = new Date().toLocaleTimeString([], { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' });
 
-            item.innerHTML = `
-                <span>${gesture}</span>
-                <span>${confidence}</span>
+                item.innerHTML = `
+                <div style="display: flex; flex-direction: column; gap: 2px;">
+                    <span style="color: var(--accent-primary); font-weight: 600;">${gesture}</span>
+                    <span class="item-time">${time}</span>
+                </div>
+                <span style="font-weight: 700; color: var(--active);">${confidence}</span>
             `;
 
-            log.prepend(item);
-        }
-
-        function updateStatus() {
-            fetch('/api/status')
-                .then(response => response.json())
-                .then(data => {
-                    // Update Gesture Name (HUD)
-                    const gestureEl = document.getElementById('hud-gesture');
-                    const confEl = document.getElementById('confidence-val');
-
-                    if (data.gesture) {
-                        const gestureName = data.gesture.toUpperCase().replace(/_/g, ' ');
-                        gestureEl.textContent = gestureName;
-
-                        // Add animation class briefly
-                        const hudPill = document.getElementById('hud-pill');
-                        hudPill.classList.add('pulse');
-                        setTimeout(() => hudPill.classList.remove('pulse'), 300);
-
-                        const confVal = (data.confidence * 100).toFixed(1) + '%';
-                        confEl.textContent = confVal;
-
-                        // Logic for logging: Log if it's a new gesture and high confidence
-                        if (gestureName !== lastLoggedGesture && data.confidence > 0.85) {
-                            lastLoggedGesture = gestureName;
-                            addToLog(gestureName, confVal);
+                log.prepend(item);
+            }
+
+            function clearLog() {
+                if (confirm("Are you sure you want to clear the recognition history?")) {
+                    document.getElementById('history-log').innerHTML = '';
+                    lastLoggedGesture = null;
+                    addToLog("Log Cleared", "INFO");
+                }
+            }
+
+            function exportLog() {
+                const items = document.querySelectorAll('.history-item');
+                if (items.length === 0) {
+                    alert("No data to export!");
+                    return;
+                }
+
+                let csv = "Time,Gesture,Confidence\n";
+                items.forEach(item => {
+                    const gesture = item.querySelector('span:first-child').textContent;
+                    const time = item.querySelector('.item-time').textContent;
+                    const conf = item.querySelector('span:last-child').textContent;
+                    csv += `${time},${gesture},${conf}\n`;
+                });
+
+                const blob = new Blob([csv], { type: 'text/csv' });
+                const url = window.URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.setAttribute('hidden', '');
+                a.setAttribute('href', url);
+                a.setAttribute('download', `cvslr_session_${new Date().getTime()}.csv`);
+                document.body.appendChild(a);
+                a.click();
+                document.body.removeChild(a);
+            }
+
+            function openAboutModal() {
+                document.getElementById('about-modal').style.display = 'flex';
+            }
+
+            function closeAboutModal() {
+                document.getElementById('about-modal').style.display = 'none';
+            }
+
+            // Close modal on outside click
+            window.onclick = function (event) {
+                const modal = document.getElementById('about-modal');
+                if (event.target == modal) {
+                    closeAboutModal();
+                }
+            }
+
+            function updateStatus() {
+                fetch('/api/status')
+                    .then(response => response.json())
+                    .then(data => {
+                        // Update Gesture Name (HUD)
+                        const gestureEl = document.getElementById('hud-gesture');
+                        const confEl = document.getElementById('confidence-val');
+
+                        if (data.gesture) {
+                            const gestureName = data.gesture.toUpperCase().replace(/_/g, ' ');
+
+                            gestureEl.textContent = gestureName;
+
+                            // Add animation class briefly
+                            const hudPill = document.getElementById('hud-pill');
+                            hudPill.classList.add('pulse');
+                            setTimeout(() => hudPill.classList.remove('pulse'), 300);
+
+                            const confVal = (data.confidence * 100).toFixed(1);
+                            confEl.textContent = confVal + '%';
+
+                            // Update Radial Gauge
+                            const circle = document.getElementById('gauge-progress');
+                            const radius = circle.r.baseVal.value;
+                            const circumference = 2 * Math.PI * radius;
+                            const offset = circumference - (data.confidence * circumference);
+                            circle.style.strokeDashoffset = offset;
+
+                            // Change gauge color based on confidence
+                            if (data.confidence > 0.85) circle.style.stroke = 'var(--success)';
+                            else if (data.confidence > 0.6) circle.style.stroke = 'var(--active)';
+                            else circle.style.stroke = 'var(--warning)';
+
+                            // Logic for logging: Log if it's a new gesture and high confidence
+                            if (gestureName !== lastLoggedGesture && data.confidence > 0.85 && gestureName !== 'UNKNOWN') {
+                                lastLoggedGesture = gestureName;
+                                addToLog(gestureName, confVal + '%');
+                            }
                         }
-                    }
 
-                    // Update Top Predictions (Restored Feature)
-                    const listEl = document.getElementById('top-predictions');
-                    listEl.innerHTML = '';
-                    if (data.top_3 && data.top_3.length > 0) {
-                        data.top_3.forEach(item => {
-                            const div = document.createElement('div');
-                            div.className = 'pred-item';
-                            const name = item.name.replace(/_/g, ' ');
-                            const prob = (item.prob * 100).toFixed(0);
-
-                            div.innerHTML = `
-                                <span>${name}</span>
-                                <div style="display:flex; align-items:center; gap:0.5rem;">
-                                    <span>${prob}%</span>
-                                    <div class="pred-bar-bg">
-                                        <div class="pred-bar" style="width: ${prob}%"></div>
-                                    </div>
-                                </div>
-                            `;
-                            listEl.appendChild(div);
-                        });
-                    }
-                })
-                .catch(err => console.error(err));
-        }
+                        // Update Top Predictions (Restored Feature)
+                        const listEl = document.getElementById('top-predictions');
+                        listEl.innerHTML = '';
+                        if (data.top_3 && data.top_3.length > 0) {
+                            data.top_3.forEach(item => {
+                                if (item.prob > 0) {
+                                    const div = document.createElement('div');
+                                    div.className = 'pred-item';
+                                    const name = item.name.replace(/_/g, ' ');
+                                    const prob = (item.prob * 100).toFixed(2);
+
+                                    div.innerHTML = `
+                                        <span>${name}</span>
+                                        <div style="display:flex; align-items:center; gap:0.5rem;">
+                                            <span>${prob}%</span>
+                                            <div class="pred-bar-bg">
+                                                <div class="pred-bar" style="width: ${prob}%"></div>
+                                            </div>
+                                        </div>
+                                    `;
+                                    listEl.appendChild(div);
+                                }
+                            });
+                        }
+                    })
+                    .catch(err => console.error(err));
+            }
 
-        setInterval(updateStatus, 150);
-        document.getElementById('video-feed').classList.add('active'); // Init active
-    </script>
+            setInterval(updateStatus, 150);
+            document.getElementById('video-feed').classList.add('active'); // Init active
+        </script>
+        <!-- ABOUT MODAL -->
+        <div id="about-modal" class="modal">
+            <div class="modal-content glass-panel">
+                <span class="modal-close" onclick="closeAboutModal()">&times;</span>
+                <div class="modal-title">ABOUT WQF7006 SYSTEM</div>
+
+                <div style="font-size: 0.95rem; color: var(--accent-secondary); line-height: 1.6;">
+                    <p style="margin-bottom: 1rem;">
+                        <strong>WQF7006</strong> (Computer Vision Sign Language Recognition) is an advanced AI system
+                        developed by <strong>OCC2 Group 4 (Vision)</strong> at the University of Malaya.
+                    </p>
+
+                    <h3 style="color: var(--accent-primary); margin: 1.5rem 0 0.5rem; font-size: 1rem;">Core Technology
+                    </h3>
+                    <p>Hybrid <strong>CNN-Transformer</strong> architecture optimized for spatial-temporal sign language
+                        features.</p>
+
+                    <h3 style="color: var(--accent-primary); margin: 1.5rem 0 0.5rem; font-size: 1rem;">How to Use</h3>
+                    <ul style="padding-left: 1.2rem;">
+                        <li><strong>Live Camera</strong>: Real-time recognition using your webcam.</li>
+                        <li><strong>Upload Video</strong>: Processes video files using a 30-frame sliding window for
+                            continuous gloss prediction.</li>
+                        <li><strong>Batch Playlist</strong>: Queue multiple videos for sequential processing.</li>
+                    </ul>
+
+                    <h3 style="color: var(--accent-primary); margin: 1.5rem 0 0.5rem; font-size: 1rem;">Key Features
+                    </h3>
+                    <ul style="padding-left: 1.2rem;">
+                        <li>Supports 50 Malaysian Sign Language (MSL) glosses.</li>
+                        <li>Continuous prediction with sliding window logic.</li>
+                        <li>Premium dashboard with real-time confidence visualization.</li>
+                    </ul>
+                </div>
+
+                <div
+                    style="margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--nav-border); font-size: 0.8rem; text-align: center;">
+                    &copy; 2026 Department of AI, University Malaya
+                </div>
+            </div>
+        </div>
 </body>
 
 </html>

video_processor.py

@@ -159,6 +159,61 @@ GESTURE_NAMES = {
     49: 'tandas'
 }
 
+# English translations for Malaysian Sign Language gestures
+GESTURE_TRANSLATIONS = {
+    'abang': 'Brother',
+    'anak_lelaki': 'Son',
+    'anak_perempuan': 'Daughter',
+    'apa': 'What',
+    'apa_khabar': 'How are you',
+    'assalamualaikum': 'Peace be upon you',
+    'ayah': 'Father',
+    'bagaimana': 'How',
+    'bahasa_isyarat': 'Sign Language',
+    'baik': 'Good',
+    'bapa_saudara': 'Uncle',
+    'beli': 'Buy',
+    'beli_2': 'Buy (variant)',
+    'berapa': 'How much',
+    'bila': 'When',
+    'bomba': 'Firefighter',
+    'buat': 'Do/Make',
+    'emak': 'Mother',
+    'emak_saudara': 'Aunt',
+    'hari': 'Day',
+    'hi': 'Hi',
+    'hujan': 'Rain',
+    'jahat': 'Bad',
+    'jangan': 'Don\'t',
+    'kakak': 'Sister',
+    'keluarga': 'Family',
+    'kereta': 'Car',
+    'lelaki': 'Male',
+    'lemak': 'Fat',
+    'main': 'Play',
+    'mana': 'Where',
+    'masalah': 'Problem',
+    'nasi': 'Rice',
+    'nasi_lemak': 'Nasi Lemak',
+    'panas': 'Hot',
+    'panas_2': 'Hot (variant)',
+    'pandai': 'Smart',
+    'pandai_2': 'Smart (variant)',
+    'payung': 'Umbrella',
+    'perempuan': 'Female',
+    'perlahan': 'Slow',
+    'perlahan_2': 'Slow (variant)',
+    'pinjam': 'Borrow',
+    'polis': 'Police',
+    'pukul': 'Hit/Time',
+    'ribut': 'Storm',
+    'saudara': 'Sibling',
+    'sejuk': 'Cold',
+    'siapa': 'Who',
+    'tandas': 'Toilet',
+    'Unknown': 'Unknown'
+}
+
 class GestureRecognizer:
     def __init__(self, model_path='best_cnn_transformer_hybrid.pth'):
         self.device = torch.device("cuda" if torch.cuda.is_available() else "cpu")