Spaces:

YOUSEF2434
/

Computer-Vision-Lab

Paused

App Files Files Community

YOUSEF2434 commited on 13 days ago

Commit

a566fb0

verified ·

1 Parent(s): 6f06b5f

Upload 96 files

Browse files

This view is limited to 50 files because it contains too many changes. See raw diff

Files changed (50) hide show

.env +2 -0
.gitignore +30 -0
Face-Expresion.html +207 -0
Lab-Selection.html +1227 -0
Object-Detection.html +426 -0
Pose.html +380 -0
components.json +21 -0
eslint.config.js +60 -0
index.html +13 -0
jsconfig.json +21 -0
live-feed-object-detection.html +225 -0
login.html +188 -0
movement-detection.html +187 -0
package-lock.json +0 -0
package.json +100 -0
postcss.config.js +6 -0
src/App.jsx +88 -0
src/Layout.jsx +127 -0
src/api/base44Client.js +14 -0
src/components/UserNotRegisteredError.jsx +31 -0
src/components/lessons/AnimatedDiagram.jsx +215 -0
src/components/lessons/Chapter1Slides.jsx +280 -0
src/components/lessons/Chapter2Slides.jsx +396 -0
src/components/lessons/Chapter3Slides.jsx +306 -0
src/components/lessons/ClickReveal.jsx +51 -0
src/components/lessons/KeyTermBadge.jsx +41 -0
src/components/lessons/SlideContainer.jsx +21 -0
src/components/lessons/SlideNavigation.jsx +75 -0
src/components/ui/accordion.jsx +41 -0
src/components/ui/alert-dialog.jsx +97 -0
src/components/ui/alert.jsx +47 -0
src/components/ui/aspect-ratio.jsx +5 -0
src/components/ui/avatar.jsx +35 -0
src/components/ui/badge.jsx +34 -0
src/components/ui/breadcrumb.jsx +92 -0
src/components/ui/button.jsx +48 -0
src/components/ui/calendar.jsx +71 -0
src/components/ui/card.jsx +50 -0
src/components/ui/carousel.jsx +193 -0
src/components/ui/chart.jsx +309 -0
src/components/ui/checkbox.jsx +22 -0
src/components/ui/collapsible.jsx +11 -0
src/components/ui/command.jsx +116 -0
src/components/ui/context-menu.jsx +156 -0
src/components/ui/dialog.jsx +96 -0
src/components/ui/drawer.jsx +92 -0
src/components/ui/dropdown-menu.jsx +156 -0
src/components/ui/form.jsx +134 -0
src/components/ui/hover-card.jsx +25 -0
src/components/ui/input-otp.jsx +53 -0

.env ADDED Viewed

	@@ -0,0 +1,2 @@


1	+ VITE_BASE44_APP_ID=YOUR_REAL_APP_ID
2	+ VITE_BASE44_APP_BASE_URL=YOUR_REAL_BASE44_URL

.gitignore ADDED Viewed

	@@ -0,0 +1,30 @@

+#env
+.env
+.env.*
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+node_modules
+dist
+dist-ssr
+*.local
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.env

Face-Expresion.html ADDED Viewed

	@@ -0,0 +1,207 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Expression Recognition</title>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: 100vh;
+            background-color: #1a1a1a;
+            font-family: 'Segoe UI', sans-serif;
+            color: white;
+        }
+        .video-container {
+            position: relative;
+            width: 640px;
+            height: 480px;
+            background: #000;
+            border-radius: 12px;
+            overflow: hidden;
+            box-shadow: 0 8px 32px rgba(0,0,0,0.5);
+        }
+        video {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            /* Visual mirror only */
+            transform: scaleX(-1);
+        }
+        canvas {
+            position: absolute;
+            top: 0;
+            left: 0;
+            /* Canvas stays normal */
+        }
+        #loader {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0,0,0,0.9);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            z-index: 10;
+        }
+        .spinner {
+            width: 40px;
+            height: 40px;
+            border: 4px solid #f3f3f3;
+            border-top: 4px solid #9b59b6; /* Purple for expressions */
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+            margin-bottom: 15px;
+        }
+        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
+        .controls { margin-top: 20px; display: flex; gap: 15px; }
+        button { padding: 12px 30px; font-size: 16px; border: none; border-radius: 50px; cursor: pointer; font-weight: 600; transition: transform 0.1s; }
+        button:active { transform: scale(0.95); }
+        #btnCapture { background: linear-gradient(135deg, #28a745, #218838); color: white; }
+        #btnCapture:disabled { background: #555; cursor: not-allowed; }
+        #btnRetake { background: linear-gradient(135deg, #dc3545, #c82333); color: white; display: none; }
+        #status { margin-top: 15px; color: #ccc; font-size: 14px; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/face-api.js@0.22.2/dist/face-api.min.js"></script>
+</head>
+<body>
+    <div class="video-container">
+        <video id="video" autoplay muted playsinline></video>
+        <canvas id="canvas"></canvas>
+        <div id="loader">
+            <div class="spinner"></div>
+            <div id="loadingText">Loading Expression Models...</div>
+        </div>
+    </div>
+    <div class="controls">
+        <button id="btnCapture" disabled>Wait...</button>
+        <button id="btnRetake">Retake</button>
+    </div>
+    <div id="status">Initializing system...</div>
+    <script>
+        const video = document.getElementById('video');
+        const canvas = document.getElementById('canvas');
+        const btnCapture = document.getElementById('btnCapture');
+        const btnRetake = document.getElementById('btnRetake');
+        const statusText = document.getElementById('status');
+        const loader = document.getElementById('loader');
+        // Use the same reliable CDN
+        const MODEL_URL = 'https://cdn.jsdelivr.net/gh/cgarciagl/face-api.js@0.22.2/weights/';
+        async function init() {
+            try {
+                // Load SSD MobileNet (High Accuracy Detector)
+                await faceapi.nets.ssdMobilenetv1.loadFromUri(MODEL_URL);
+                // Load Face Expression Model
+                await faceapi.nets.faceExpressionNet.loadFromUri(MODEL_URL);
+                startCamera();
+            } catch (error) {
+                alert("Error loading models: " + error);
+            }
+        }
+        function startCamera() {
+            navigator.mediaDevices.getUserMedia({ video: { width: 640, height: 480 } })
+                .then(stream => { video.srcObject = stream; })
+                .catch(err => { console.error(err); });
+        }
+        video.addEventListener('play', () => {
+            const displaySize = { width: video.videoWidth, height: video.videoHeight };
+            faceapi.matchDimensions(canvas, displaySize);
+            loader.style.display = 'none';
+            btnCapture.disabled = false;
+            btnCapture.innerText = "Capture Expression";
+            statusText.innerText = "Ready. Show me an emotion!";
+        });
+        btnCapture.addEventListener('click', async () => {
+            if (video.paused) return;
+            video.pause();
+            btnCapture.style.display = 'none';
+            btnRetake.style.display = 'inline-block';
+            statusText.innerText = "Analyzing Expressions...";
+            const displaySize = { width: video.videoWidth, height: video.videoHeight };
+            faceapi.matchDimensions(canvas, displaySize);
+            // Detect Faces + Expressions
+            const detections = await faceapi.detectAllFaces(video, new faceapi.SsdMobilenetv1Options({ minConfidence: 0.5 }))
+                .withFaceExpressions();
+            const resizedDetections = faceapi.resizeResults(detections, displaySize);
+            const ctx = canvas.getContext('2d');
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            // 1. Draw Boxes (Mirrored Context)
+            ctx.save();
+            ctx.scale(-1, 1);
+            ctx.translate(-canvas.width, 0);
+            faceapi.draw.drawDetections(canvas, resizedDetections);
+            ctx.restore();
+            // 2. Draw Expressions (Normal Context)
+            resizedDetections.forEach(result => {
+                const expressions = result.expressions;
+                // Sort expressions to find the top one
+                const sorted = Object.entries(expressions).sort((a, b) => b[1] - a[1]);
+                const topEmotion = sorted[0]; // [emotion, score]
+                // Calculate mirrored position for the text/bars
+                const box = result.detection.box;
+                const mirroredX = canvas.width - box.x - box.width;
+                const mirroredPos = { x: mirroredX, y: box.bottomLeft.y };
+                // Draw the top emotion text
+                new faceapi.draw.DrawTextField(
+                    [`${topEmotion[0]} (${Math.round(topEmotion[1] * 100)}%)`],
+                    mirroredPos
+                ).draw(canvas);
+                // OPTIONAL: Draw the full expression bar chart
+                // We offset it slightly so it doesn't overlap the box too much
+                const minConfidence = 0.1; // Only show emotions above 10%
+                faceapi.draw.drawFaceExpressions(canvas, resizedDetections, minConfidence, mirroredPos);
+            });
+            if (detections.length === 0) statusText.innerText = "No face detected.";
+            else statusText.innerText = `Analysis Done. Found ${detections.length} face(s).`;
+        });
+        btnRetake.addEventListener('click', () => {
+            canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
+            video.play();
+            btnCapture.style.display = 'inline-block';
+            btnRetake.style.display = 'none';
+            statusText.innerText = "Ready.";
+        });
+        init();
+    </script>
+</body>
+</html>

Lab-Selection.html ADDED Viewed

	@@ -0,0 +1,1227 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI STEM Lab</title>
+    <style>
+        :root {
+            /* Dark Mode Variables */
+            --bg-color: #121212;
+            --card-bg: #1e1e1e;
+            --accent-color: #0a84ff; /* Apple-style vibrant blue */
+            --accent-hover: #409cff;
+            --text-main: #f5f5f7;
+            --text-secondary: #a1a1a6;
+            /* Window Colors */
+            --mac-window-bg: #2c2c2e;
+            --mac-header-bg: #3a3a3c;
+            --mac-border: rgba(0, 0, 0, 0.5);
+        }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+            background-color: var(--bg-color);
+            color: var(--text-main);
+            margin: 0;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            min-height: 100vh;
+            padding: 20px;
+        }
+        /* Playground Header */
+        header {
+            margin-bottom: 50px;
+            text-align: center;
+            max-width: 800px;
+        }
+        h1 {
+            color: var(--text-main);
+            font-weight: 800;
+            font-size: 3rem;
+            margin: 0 0 15px 0;
+            letter-spacing: -0.03em;
+            background: linear-gradient(90deg, #fff, #a1a1a6);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        p.subtitle {
+            color: var(--text-secondary);
+            font-size: 1.3rem;
+            line-height: 1.5;
+        }
+        /* Card Container */
+        .playground-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
+            gap: 30px;
+            width: 95%;
+            max-width: 1400px;
+        }
+        /* Lab Cards */
+        .card {
+            background: var(--card-bg);
+            border-radius: 24px;
+            padding: 40px;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+            transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease;
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            border: 1px solid rgba(255,255,255,0.08);
+            position: relative;
+            overflow: hidden;
+        }
+        .card:hover {
+            transform: translateY(-8px);
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
+            border-color: rgba(255,255,255,0.2);
+        }
+        .card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 6px;
+            background: linear-gradient(90deg, var(--accent-color), #bc52ff);
+            opacity: 0.7;
+        }
+        .icon-box {
+            width: 64px;
+            height: 64px;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 16px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 32px;
+            margin-bottom: 25px;
+        }
+        .card h2 {
+            margin: 0 0 15px 0;
+            font-size: 1.8rem;
+            font-weight: 700;
+            color: var(--text-main);
+        }
+        .card p {
+            margin: 0 0 30px 0;
+            color: var(--text-secondary);
+            line-height: 1.6;
+            font-size: 1.1rem;
+            flex-grow: 1;
+        }
+        .card strong {
+            color: #fff;
+            font-weight: 600;
+        }
+        .launch-btn {
+            background-color: var(--accent-color);
+            color: white;
+            border: none;
+            padding: 14px 28px;
+            border-radius: 30px;
+            font-weight: 600;
+            font-size: 1.1rem;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            width: 100%;
+            text-align: center;
+        }
+        .launch-btn:hover {
+            background-color: var(--accent-hover);
+            transform: scale(1.02);
+        }
+        /* Modal Overlay */
+        .modal-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.75);
+            backdrop-filter: blur(8px);
+            z-index: 1000;
+            display: none; /* Changed from visibility hidden to display none for stricter reset */
+            align-items: center;
+            justify-content: center;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+        .modal-overlay.active {
+            display: flex;
+            opacity: 1;
+        }
+        /* macOS Window Styling */
+        .mac-window {
+            width: 85%;
+            max-width: 1000px;
+            height: 85vh;
+            background: var(--mac-window-bg);
+            border-radius: 12px;
+            box-shadow: 0 50px 100px rgba(0, 0, 0, 0.6);
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+            border: 1px solid rgba(255,255,255,0.1);
+            transform: scale(0.95);
+            transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1);
+            position: relative;
+        }
+        .modal-overlay.active .mac-window {
+            transform: scale(1);
+        }
+        /* Window Header */
+        .window-header {
+            height: 44px;
+            background: var(--mac-header-bg);
+            border-bottom: 1px solid #1c1c1e;
+            display: flex;
+            align-items: center;
+            padding-left: 16px;
+            cursor: default;
+        }
+        /* The Red Button */
+        .traffic-light {
+            width: 14px;
+            height: 14px;
+            border-radius: 50%;
+            background-color: #ff453a;
+            border: none;
+            cursor: pointer;
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
+        }
+        .traffic-light:hover::after {
+            content: "×";
+            color: #3b0000;
+            font-size: 11px;
+            font-weight: 900;
+            margin-top: -1px;
+        }
+        .window-title {
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            font-size: 14px;
+            color: #cfcfcf;
+            font-weight: 500;
+        }
+        /* Window Content */
+        .window-content {
+            flex: 1;
+            background: #000;
+            position: relative;
+        }
+        iframe {
+            width: 100%;
+            height: 100%;
+            border: none;
+            background: #121212;
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <h1>AI Model Laboratory</h1>
+        <p class="subtitle">Welcome to the hands-on section! Based on the slideshow we just watched, choose an experiment below to test how computers "see" the world.</p>
+    </header>
+<div class="playground-grid">
+  <!-- Option 1: Pose Estimation -->
+  <div class="card">
+    <div class="icon-box">🧘</div>
+    <h2>Pose Estimation</h2>
+    <p>
+      <strong>Remember the slide about skeletons?</strong><br><br>
+      In this experiment, the AI will try to find your joints (like elbows, knees, and shoulders) and connect them with lines.
+      <br><br>
+      <em>Try this: Try to do some movements with yout hands and face. Does the AI follow your movement?</em>
+    </p>
+    <button class="launch-btn" onclick="openWindow('Pose Estimation', 'pose.html')">Launch Experiment</button>
+  </div>
+  <!-- Option 2: Object Recognition -->
+  <div class="card">
+    <div class="icon-box">🔍</div>
+    <h2>Object Recognition</h2>
+    <p>
+      <strong>How does a self-driving car see?</strong><br><br>
+      This model is trained to recognize thousands of everyday items. It draws a box around what it sees and gives it a label.
+      <br><br>
+      <em>Try this: Hold up a pen, a water bottle, or your shoe. Can it guess them all correctly?</em>
+    </p>
+<center>
+        <button id="dev-trigger-btn">Wondering what objects this model can detect? Click here to find out!</button>
+</center>
+<br>
+    <button class="launch-btn" onclick="openWindow('Object Recognition', 'Object-Detection.html')">Launch Experiment</button>
+  </div>
+  <!-- Option 3: Face Expression -->
+  <div class="card">
+    <div class="icon-box">😊</div>
+    <h2>Face Expression</h2>
+    <p>
+      <strong>Can computers understand feelings?</strong><br><br>
+      This AI looks at the geometry of your face—how much your mouth curves or your eyebrows lift—to guess your emotion.
+      <br><br>
+      <em>Try this: Make a super happy face, then a sad face. See if the "Confidence Score" changes!</em>
+    </p>
+    <button class="launch-btn" onclick="openWindow('Face Expression', 'Face-Expresion.html')">Launch Experiment</button>
+  </div>
+</div>
+<h1 style="text-align:center; margin:60px 0 30px;">
+  Here are some extra ones that you might like....
+</h1>
+<div class="playground-grid">
+  <!-- Extra Option 1 -->
+  <div class="card">
+    <div class="icon-box">🏃</div>
+<h2>JS WebCam Motion Detection</h2>
+<p>
+  <strong>Can a computer actually “see” movement?</strong><br><br>
+  This project watches your webcam and compares each frame to the one before it.
+  When something moves—even a tiny bit—the computer highlights the change so you can
+  spot motion glowing on the screen.<br><br>
+  <em>Try this: Wave your hand slowly, then quickly. Notice how the motion pattern changes!</em>
+</p>
+    <button class="launch-btn" onclick="openWindow('Movement Detection', 'movement-detection.html')">Launch Experiment</button>
+  </div>
+  <!-- Extra Option 2 -->
+  <div class="card">
+    <div class="icon-box">👁️</div>
+    <h2>Object Detection with TensorFlow.js</h2>
+    <p>
+    <strong>How can a computer tell what's in a picture?</strong><br><br>
+    This project uses a pre‑trained AI model that can look at an image—or even your
+    webcam—and point out objects it recognizes. It doesn’t just guess the object,
+    it also shows *where* it is in the picture by drawing a box around it.<br><br>
+    <em>Try this: Hold up different objects (like a pencil, cup, or book) and see
+    which ones the AI can detect!</em>
+    </p>
+        <button class="launch-btn" onclick="openWindow('Object Detection with TensorFlow.js', 'live-feed-object-detection.html')">Launch Experiment</button>
+  </div>
+</div>
+<!-- Modal Overlay -->
+<div class="modal-overlay" id="modalOverlay">
+  <div class="mac-window" id="macWindow">
+    <div class="window-header">
+      <div class="traffic-light" id="closeBtn"></div>
+      <div class="window-title" id="windowTitle">Terminal</div>
+    </div>
+    <div class="window-content">
+      <iframe id="labFrame" src=""></iframe>
+    </div>
+  </div>
+</div>
+    <script>
+        // Wait for DOM to load to prevent "not defined" errors
+        document.addEventListener('DOMContentLoaded', function() {
+            const overlay = document.getElementById('modalOverlay');
+            const macWindow = document.getElementById('macWindow');
+            const labFrame = document.getElementById('labFrame');
+            const windowTitle = document.getElementById('windowTitle');
+            const closeBtn = document.getElementById('closeBtn');
+            // Global function to be called by buttons
+            window.openWindow = function(title, fileName) {
+                if (windowTitle) windowTitle.textContent = "Running: " + title;
+                if (overlay) overlay.classList.add('active');
+                // Set the iframe SRC to the actual file link
+                if (labFrame) labFrame.src = fileName;
+            };
+            function closeWindow() {
+                if (overlay) overlay.classList.remove('active');
+                // Clear iframe src to stop the page from running in background
+                setTimeout(() => {
+                    if (labFrame) labFrame.src = "";
+                }, 300);
+            }
+            // Close button listener
+            if (closeBtn) {
+                closeBtn.addEventListener('click', closeWindow);
+            }
+            // Click outside to close Logic
+            if (overlay) {
+                overlay.addEventListener('click', function(event) {
+                    if (event.target === overlay) {
+                        closeWindow();
+                    }
+                });
+            }
+            // Prevent clicks inside the window from closing it
+            if (macWindow) {
+                macWindow.addEventListener('click', function(event) {
+                    event.stopPropagation();
+                });
+            }
+        });
+    </script>
+</body>
+</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+        /* The Trigger Button */
+        #dev-trigger-btn {
+            background-color: #007AFF;
+            color: white;
+            border: none;
+            padding: 12px 24px;
+            font-size: 16px;
+            font-weight: 600;
+            border-radius: 8px;
+            cursor: pointer;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+            transition: transform 0.1s ease;
+        }
+        #dev-trigger-btn:active {
+            transform: scale(0.96);
+        }
+        /* Modal Overlay (Background) */
+        #modal-overlay {
+            display: none; /* Hidden by default */
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.4);
+            backdrop-filter: blur(5px);
+            z-index: 1000;
+            justify-content: center;
+            align-items: center;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+        /* The Dark MacOS Window */
+        #macos-window {
+            width: 80%;
+            max-width: 900px;
+            height: 70%;
+            background-color: #1e1e1e; /* Dark Mode Background */
+            border-radius: 12px;
+            box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.1);
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+            transform: scale(0.95);
+            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+        }
+        /* Window Title Bar */
+        .window-header {
+            height: 38px;
+            background: linear-gradient(to bottom, #3a3a3a, #2b2b2b);
+            border-bottom: 1px solid #000;
+            display: flex;
+            align-items: center;
+            padding: 0 16px;
+            flex-shrink: 0;
+        }
+        /* Traffic Light Buttons */
+        .window-controls {
+            display: flex;
+            gap: 8px;
+        }
+        .control-dot {
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            border: 1px solid rgba(0,0,0,0.2);
+        }
+        .close-dot { background-color: #ff5f56; cursor: pointer; }
+        .close-dot:hover { background-color: #ff3b30; } /* Brightens on hover */
+        .minimize-dot { background-color: #ffbd2e; }
+        .expand-dot { background-color: #27c93f; }
+        .window-title {
+            color: #d1d1d1;
+            font-size: 13px;
+            font-weight: 500;
+            margin-left: 20px;
+            flex-grow: 1;
+            text-align: center;
+            padding-right: 60px; /* Balance the title */
+        }
+        /* Content Area */
+        .window-content {
+            padding: 20px;
+            overflow-y: auto;
+            color: #fff;
+        }
+        /* Grid for Tiles */
+        .tiles-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+            gap: 16px;
+        }
+        /* Individual Tile Style */
+        .tile {
+            background-color: #2c2c2e;
+            border: 1px solid #3a3a3c;
+            border-radius: 8px;
+            padding: 16px;
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+            transition: background-color 0.2s;
+        }
+        .tile:hover {
+            background-color: #3a3a3c;
+        }
+        .tile-icon {
+            font-size: 32px;
+        }
+        .tile-name {
+            font-size: 16px;
+            font-weight: 700;
+            color: #fff;
+            text-transform: capitalize;
+        }
+        .tile-desc {
+            font-size: 13px;
+            line-height: 1.4;
+            color: #a1a1a6;
+        }
+        /* Scrollbar Styling */
+        .window-content::-webkit-scrollbar {
+            width: 8px;
+        }
+        .window-content::-webkit-scrollbar-track {
+            background: #1e1e1e;
+        }
+        .window-content::-webkit-scrollbar-thumb {
+            background: #48484a;
+            border-radius: 4px;
+        }
+        /* Animation States */
+        #modal-overlay.active {
+            display: flex;
+            opacity: 1;
+        }
+        #modal-overlay.active #macos-window {
+            transform: scale(1);
+        }
+    </style>
+</head>
+<body>
+    <!-- 1. The Trigger Button -->
+    <!-- 2. The Modal Structure -->
+    <div id="modal-overlay">
+        <div id="macos-window">
+            <!-- Header with Red Button -->
+            <div class="window-header">
+<div class="window-controls">
+    <div class="control-dot close-dot" id="close-btn" title="Close"></div>
+</div>
+                <div class="window-title">COCO Dataset Classes (80 Objects)</div>
+            </div>
+            <!-- Content -->
+            <div class="window-content">
+                <div style="margin-bottom: 20px; color: #a1a1a6; font-size: 14px;">
+                    This AI model is trained to see the world like you do. Below are the 80 different things it can instantly recognize in a photo.
+                </div>
+                <div class="tiles-grid" id="tiles-container">
+                    <!-- Tiles injected via JS -->
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Data: 80 COCO Classes with Emojis and Kid-Friendly Explanations
+        const cocoData = [
+            { name: "person", emoji: "👤", desc: "A human being, like you, your friends, or your teacher." },
+            { name: "bicycle", emoji: "🚲", desc: "A two-wheeled vehicle that you pedal to ride." },
+            { name: "car", emoji: "🚗", desc: "A vehicle with four wheels used to drive on roads." },
+            { name: "motorcycle", emoji: "🏍️", desc: "Like a bicycle, but with a fast engine and heavier wheels." },
+            { name: "airplane", emoji: "✈️", desc: "A flying machine with wings that carries passengers across the sky." },
+            { name: "bus", emoji: "🚌", desc: "A large vehicle that carries many people along a set route." },
+            { name: "train", emoji: "🚆", desc: "A series of connected cars that run on a metal track." },
+            { name: "truck", emoji: "🚚", desc: "A large, heavy vehicle used for carrying cargo or big loads." },
+            { name: "boat", emoji: "⛵", desc: "A vehicle designed to float and travel on water." },
+            { name: "traffic light", emoji: "🚦", desc: "A signal with red, yellow, and green lights to control cars." },
+            { name: "fire hydrant", emoji: "🚒", desc: "A pipe on the street that firefighters use to get water." },
+            { name: "stop sign", emoji: "🛑", desc: "A red octagon sign that tells drivers to stop moving." },
+            { name: "parking meter", emoji: "🅿️", desc: "A machine where you pay money to park your car on the street." },
+            { name: "bench", emoji: "🪑", desc: "A long seat for several people, usually found in parks." },
+            { name: "bird", emoji: "🐦", desc: "An animal with feathers and wings that can usually fly." },
+            { name: "cat", emoji: "🐈", desc: "A small, furry pet that purrs and catches mice." },
+            { name: "dog", emoji: "🐕", desc: "A loyal pet with four legs that barks and loves to play." },
+            { name: "horse", emoji: "🐎", desc: "A large, strong animal that people can ride." },
+            { name: "sheep", emoji: "🐑", desc: "A fluffy farm animal that gives us wool for clothes." },
+            { name: "cow", emoji: "🐄", desc: "A large farm animal that gives us milk." },
+            { name: "elephant", emoji: "🐘", desc: "A huge animal with big ears and a long trunk." },
+            { name: "bear", emoji: "🐻", desc: "A large, strong wild animal with thick fur." },
+            { name: "zebra", emoji: "🦓", desc: "A wild horse-like animal with black and white stripes." },
+            { name: "giraffe", emoji: "🦒", desc: "The tallest animal, with a very long neck to eat tree leaves." },
+            { name: "backpack", emoji: "🎒", desc: "A bag you carry on your back to hold books and supplies." },
+            { name: "umbrella", emoji: "☂️", desc: "A tool you hold over your head to stay dry in the rain." },
+            { name: "handbag", emoji: "👜", desc: "A small bag used to carry personal items like a wallet." },
+            { name: "tie", emoji: "👔", desc: "A long piece of cloth worn around the neck with a suit." },
+            { name: "suitcase", emoji: "🧳", desc: "A large bag used for packing clothes when traveling." },
+            { name: "frisbee", emoji: "🥏", desc: "A plastic disc you throw to a friend or dog." },
+            { name: "skis", emoji: "⛷️", desc: "Long, flat runners you attach to boots to glide on snow." },
+            { name: "snowboard", emoji: "🏂", desc: "A single wide board you stand on to surf down snowy hills." },
+            { name: "sports ball", emoji: "⚽", desc: "Any round object used in games like soccer, basketball, or tennis." },
+            { name: "kite", emoji: "🪁", desc: "A light frame with paper or cloth that flies in the wind." },
+            { name: "baseball bat", emoji: "⚾", desc: "A smooth wooden or metal stick used to hit a baseball." },
+            { name: "baseball glove", emoji: "🧤", desc: "A leather mitt worn to catch a baseball safely." },
+            { name: "skateboard", emoji: "🛹", desc: "A short board with wheels that you stand on and ride." },
+            { name: "surfboard", emoji: "🏄", desc: "A long board used to ride ocean waves." },
+            { name: "tennis racket", emoji: "🎾", desc: "A bat with a net mesh used to hit a tennis ball." },
+            { name: "bottle", emoji: "🍾", desc: "A container with a narrow neck for holding liquids." },
+            { name: "wine glass", emoji: "🍷", desc: "A fancy glass with a stem, used for special drinks." },
+            { name: "cup", emoji: "☕", desc: "A small open container for drinking tea or coffee." },
+            { name: "fork", emoji: "🍴", desc: "A tool with prongs used to pick up food." },
+            { name: "knife", emoji: "🔪", desc: "A tool with a sharp edge used for cutting food." },
+            { name: "spoon", emoji: "🥄", desc: "A tool with a small scoop for eating soup or cereal." },
+            { name: "bowl", emoji: "🥣", desc: "A round, deep dish used for soup or cereal." },
+            { name: "banana", emoji: "🍌", desc: "A long, curved yellow fruit that you peel to eat." },
+            { name: "apple", emoji: "🍎", desc: "A round red or green fruit that is crunchy and sweet." },
+            { name: "sandwich", emoji: "🥪", desc: "Two slices of bread with meat, cheese, or veggies inside." },
+            { name: "orange", emoji: "🍊", desc: "A round citrus fruit with a thick skin and juicy inside." },
+            { name: "broccoli", emoji: "🥦", desc: "A green vegetable that looks like a little tree." },
+            { name: "carrot", emoji: "🥕", desc: "A crunchy orange vegetable that grows underground." },
+            { name: "hot dog", emoji: "🌭", desc: "A cooked sausage served in a long, soft bun." },
+            { name: "pizza", emoji: "🍕", desc: "A round dough base topped with tomato sauce and cheese." },
+            { name: "donut", emoji: "🍩", desc: "A sweet, fried ring of dough, often with frosting." },
+            { name: "cake", emoji: "🎂", desc: "A sweet baked dessert often eaten at birthday parties." },
+            { name: "chair", emoji: "🪑", desc: "A piece of furniture designed for one person to sit on." },
+            { name: "couch", emoji: "🛋️", desc: "A soft, long seat where multiple people can relax." },
+            { name: "potted plant", emoji: "🪴", desc: "A plant grown inside a container for decoration." },
+            { name: "bed", emoji: "🛏️", desc: "A piece of furniture with a mattress for sleeping." },
+            { name: "dining table", emoji: "🍽️", desc: "A large table where families sit to eat meals." },
+            { name: "toilet", emoji: "🚽", desc: "A bathroom fixture used for getting rid of waste." },
+            { name: "tv", emoji: "📺", desc: "An electronic screen for watching shows and movies." },
+            { name: "laptop", emoji: "💻", desc: "A portable computer that you can use on your lap." },
+            { name: "mouse", emoji: "🖱️", desc: "A handheld device used to move the cursor on a computer." },
+            { name: "remote", emoji: "📡", desc: "A controller used to change channels on a TV from afar." },
+            { name: "keyboard", emoji: "⌨️", desc: "A board with buttons for typing letters into a computer." },
+            { name: "cell phone", emoji: "📱", desc: "A small phone you can carry in your pocket." },
+            { name: "microwave", emoji: "⏲️", desc: "An oven that heats food very quickly." },
+            { name: "oven", emoji: "🥘", desc: "A kitchen appliance used for baking and roasting food." },
+            { name: "toaster", emoji: "🍞", desc: "A machine that browns bread slices." },
+            { name: "sink", emoji: "🚰", desc: "A basin with a faucet for washing hands or dishes." },
+            { name: "refrigerator", emoji: "❄️", desc: "A cold closet that keeps food fresh." },
+            { name: "book", emoji: "📖", desc: "A set of pages with writing or pictures to read." },
+            { name: "clock", emoji: "⏰", desc: "A device that tells you what time it is." },
+            { name: "vase", emoji: "🏺", desc: "A decorative container used for holding flowers." },
+            { name: "scissors", emoji: "✂️", desc: "A tool with two blades used for cutting paper." },
+            { name: "teddy bear", emoji: "🧸", desc: "A soft toy bear that is cuddly and cute." },
+            { name: "hair drier", emoji: "💨", desc: "A machine that blows hot air to dry wet hair." },
+            { name: "toothbrush", emoji: "🪥", desc: "A small brush used to clean your teeth." }
+        ];
+        // DOM Elements
+        const triggerBtn = document.getElementById('dev-trigger-btn');
+        const modal = document.getElementById('modal-overlay');
+        const closeBtn = document.getElementById('close-btn');
+        const tilesContainer = document.getElementById('tiles-container');
+        const macosWindow = document.getElementById('macos-window');
+        // 1. Populate the Grid
+        function renderTiles() {
+            tilesContainer.innerHTML = cocoData.map(item => `
+                <div class="tile">
+                    <div class="tile-icon">${item.emoji}</div>
+                    <div class="tile-name">${item.name}</div>
+                    <div class="tile-desc">${item.desc}</div>
+                </div>
+            `).join('');
+        }
+        // 2. Open Modal Function
+        triggerBtn.addEventListener('click', () => {
+            renderTiles(); // Render content on open
+            modal.classList.add('active'); // Show modal
+        });
+        // 3. Close Modal Function
+        function closeModal() {
+            modal.classList.remove('active');
+        }
+        // Event: Click the Red Dot
+        closeBtn.addEventListener('click', closeModal);
+        // Event: Click Outside the Window
+        modal.addEventListener('click', (e) => {
+            // If the user clicks the dark background (modal), close it.
+            // If they click INSIDE the window, do nothing.
+            if (e.target === modal) {
+                closeModal();
+            }
+        });
+    </script>
+</body>
+</html>

Object-Detection.html ADDED Viewed

	@@ -0,0 +1,426 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Enhanced Object Detection</title>
+<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
+<style>
+  body { font-family: 'Roboto', sans-serif; margin: 2em; color: #3d3d3d; background: #f0f2f5; }
+  h1 { color: #007f8b; text-align: center; }
+  .container { max-width: 1200px; margin: 0 auto; background: white; padding: 20px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
+  /* Controls Section */
+  .controls { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; padding: 15px; background: #e6fcfd; border-radius: 8px; align-items: center; }
+  .control-group { display: flex; flex-direction: column; min-width: 200px; }
+  label { font-weight: bold; font-size: 0.9em; margin-bottom: 5px; color: #007f8b; }
+  input[type=range] { width: 100%; }
+  .upload-btn { background: #007f8b; color: white; padding: 10px 20px; border-radius: 25px; cursor: pointer; display: inline-block; font-weight: bold; text-align: center; }
+  .upload-btn:hover { background: #006069; }
+  input[type="file"] { display: none; }
+  /* Image Grid */
+/* Replace the existing .image-grid and .detect-card styles */
+.image-grid {
+  /* Disable Grid, use Columns instead */
+  display: block;
+  column-count: 3; /* Creates 3 columns like Pinterest */
+  column-gap: 20px;
+}
+/* Responsive: 2 columns on smaller screens */
+@media (max-width: 900px) {
+  .image-grid { column-count: 2; }
+}
+@media (max-width: 600px) {
+  .image-grid { column-count: 1; }
+}
+.detect-card {
+  position: relative;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  background: #000;
+  cursor: pointer;
+  transition: transform 0.2s;
+  z-index: 1;
+  /* NEW: Prevents card from splitting across columns */
+  break-inside: avoid-column;
+  margin-bottom: 20px;
+}
+  .detect-card:hover { transform: scale(1.01); }
+  .detect-card img { display: block; width: 100%; height: auto; transition: opacity 0.3s; }
+  /* Processing State */
+  .detect-card.processing { pointer-events: none; } /* Prevent double clicks */
+  .detect-card.processing img { opacity: 0.6; filter: grayscale(50%); }
+  /* --- NEW: Inference Loading Bar --- */
+  .inference-panel {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    background: rgba(255, 255, 255, 0.95);
+    padding: 15px;
+    box-sizing: border-box;
+    transform: translateY(100%); /* Hidden by default */
+    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
+    z-index: 50;
+    border-top: 3px solid #007f8b;
+  }
+  /* Show panel when processing */
+  .detect-card.processing .inference-panel {
+    transform: translateY(0);
+  }
+  .inference-status {
+    display: flex;
+    justify-content: space-between;
+    font-weight: bold;
+    color: #007f8b;
+    margin-bottom: 8px;
+    font-size: 0.9rem;
+  }
+  .progress-track {
+    width: 100%;
+    height: 6px;
+    background: #e0e0e0;
+    border-radius: 3px;
+    overflow: hidden;
+  }
+  .progress-bar {
+    height: 100%;
+    background: #007f8b;
+    width: 30%;
+    border-radius: 3px;
+    animation: loading 1.5s infinite ease-in-out;
+  }
+  @keyframes loading {
+    0% { transform: translateX(-100%); }
+    100% { transform: translateX(400%); }
+  }
+  /* ---------------------------------- */
+  /* Bounding Boxes */
+  .highlighter { position: absolute; border: 2px solid; border-radius: 4px; z-index: 10; pointer-events: none; }
+  .label-tag { position: absolute; padding: 2px 6px; color: white; font-size: 11px; font-weight: bold; border-radius: 4px; pointer-events: none; z-index: 11; white-space: nowrap; box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
+  /* Loading Spinner (Initial Model Load) */
+  #loader { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px; background: white; border-radius: 8px; box-shadow: 0 0 20px rgba(0,0,0,0.2); display: none; z-index: 1000; font-weight: bold; }
+</style>
+</head>
+<body>
+<div class="container">
+  <h1>Smart Object Recognition</h1>
+  <div class="controls">
+    <div class="control-group">
+      <label for="imageUpload" class="upload-btn">📂 Upload Image</label>
+      <input type="file" id="imageUpload" accept="image/*">
+    </div>
+    <div class="control-group">
+      <label>Confidence Threshold: <span id="confValue">50</span>%</label>
+      <input type="range" id="confidenceSlider" min="10" max="90" value="50">
+      <small>Increase to remove weak guesses.</small>
+    </div>
+    <div class="control-group">
+      <label>Overlap Fix (NMS): <span id="overlapValue">30</span>%</label>
+      <input type="range" id="overlapSlider" min="0" max="100" value="30">
+      <small>Lower value = Fewer overlapping boxes.</small>
+    </div>
+  </div>
+  <div id="loader">Loading AI Model...</div>
+  <div class="image-grid" id="imageContainer">
+    <!-- Image 1 -->
+    <div class="detect-card">
+      <img src="https://assets.codepen.io/9177687/coupledog.jpeg" crossorigin="anonymous" />
+    </div>
+    <!-- Image 2 -->
+    <div class="detect-card">
+      <img src="https://assets.codepen.io/9177687/doggo.jpeg" crossorigin="anonymous" />
+    </div>
+    <!-- Image 3 (FIXED: Added wrapper div) -->
+    <div class="detect-card">
+      <img src="https://tse3.mm.bing.net/th/id/OIP.mIJJ36cXpVujF1wnZnd4VQHaE8?rs=1&pid=ImgDetMain&o=7&rm=3" crossorigin="anonymous" />
+    </div>
+    <!-- Image 4 -->
+    <div class="detect-card">
+      <img src="https://images.pexels.com/photos/23409055/pexels-photo-23409055/free-photo-of-cars-on-street-in-town.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" crossorigin="anonymous" />
+    </div>
+    <!-- Image 5 -->
+    <div class="detect-card">
+      <img src="https://tse4.mm.bing.net/th/id/OIP.bWwaHeR-aoBb3esBRaAEEgHaE8?rs=1&pid=ImgDetMain&o=7&rm=3" crossorigin="anonymous" />
+    </div>
+    <!-- Image 6 -->
+    <div class="detect-card">
+      <img src="https://tse4.mm.bing.net/th/id/OIP.vs_d1C-7n4PoNv0GVlaVDwHaFj?rs=1&pid=ImgDetMain&o=7&rm=3" crossorigin="anonymous" />
+    </div>
+    <!-- Image 7 -->
+    <div class="detect-card">
+      <img src="https://tse4.mm.bing.net/th/id/OIP.V1zVa5IUI22o0i6gG4or2QHaLH?rs=1&pid=ImgDetMain&o=7&rm=3" crossorigin="anonymous" />
+    </div>
+    <!-- Image 8 -->
+    <div class="detect-card">
+      <img src="https://th.bing.com/th/id/R.2be55af1ab4a38df1a9b54bf6b68a8bd?rik=f7wiKdc8N42mgA&pid=ImgRaw&r=0" crossorigin="anonymous" />
+    </div>
+    <!-- Image 9 -->
+    <div class="detect-card">
+      <img src="https://images.pexels.com/photos/20625972/pexels-photo-20625972.jpeg?cs=srgb&dl=pexels-saturnus99-20625972.jpg&fm=jpg" crossorigin="anonymous" />
+    </div>
+    <!-- Image 10 -->
+    <div class="detect-card">
+      <img src="https://tse4.mm.bing.net/th/id/OIP.ZMnNqw1GVTa9HpHvsTYcjQAAAA?rs=1&pid=ImgDetMain&o=7&rm=3" crossorigin="anonymous" />
+    </div>
+    <!-- Image 11 -->
+    <div class="detect-card">
+      <img src="https://bestbackpacklab.com/wp-content/uploads/2021/05/children-1536x864.jpg" crossorigin="anonymous" />
+    </div>
+    <!-- Image 12 -->
+    <div class="detect-card">
+      <img src="https://tse1.explicit.bing.net/th/id/OIP.za2l0WGKXbR4Qkj8phu2UwHaE8?rs=1&pid=ImgDetMain&o=7&rm=3" crossorigin="anonymous" />
+    </div>
+    <!-- Image 13 -->
+    <div class="detect-card">
+      <img src="https://tse2.mm.bing.net/th/id/OIP.bcOP7ZTpLAyyl3tKpdk5gAHaFB?rs=1&pid=ImgDetMain&o=7&rm=3" crossorigin="anonymous" />
+    </div>
+    <!-- Image 14 -->
+    <div class="detect-card">
+      <img src="https://tse3.mm.bing.net/th/id/OIP.PC6Fr2mEuGUsEiaNfCSOaAHaE7?rs=1&pid=ImgDetMain&o=7&rm=3" crossorigin="anonymous" />
+    </div>
+    <!-- Image 15 -->
+    <div class="detect-card">
+      <img src="https://tse3.mm.bing.net/th/id/OIF.EABwKojMHBX0uEfpxor95w?rs=1&pid=ImgDetMain&o=7&rm=3" crossorigin="anonymous" />
+    </div>
+    <!-- Image 16 -->
+    <div class="detect-card">
+      <img src="https://tse4.mm.bing.net/th/id/OIP.qliYrfiREN-ydW4DxWYfSgHaE7?w=626&h=417&rs=1&pid=ImgDetMain&o=7&rm=3" crossorigin="anonymous" />
+    </div>
+  </div>
+</div>
+<script type="module">
+import { ObjectDetector, FilesetResolver } from "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.2";
+const loader = document.getElementById("loader");
+let objectDetector;
+let runningMode = "IMAGE";
+// SETTINGS
+let confidenceThreshold = 0.5;
+let overlapThreshold = 0.3;
+// 1. Initialize MediaPipe
+const initializeObjectDetector = async () => {
+  loader.style.display = "block";
+  const vision = await FilesetResolver.forVisionTasks("https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.2/wasm");
+  objectDetector = await ObjectDetector.createFromOptions(vision, {
+    baseOptions: {
+      modelAssetPath: `https://storage.googleapis.com/mediapipe-models/object_detector/efficientdet_lite2/float16/1/efficientdet_lite2.tflite`,
+      delegate: "GPU"
+    },
+    scoreThreshold: 0.2,
+    runningMode: runningMode
+  });
+  loader.style.display = "none";
+  console.log("Model Loaded: EfficientDet-Lite2");
+};
+initializeObjectDetector();
+// 2. NMS Filter Function
+function filterDetections(detections, iouLimit) {
+  detections.sort((a, b) => b.categories[0].score - a.categories[0].score);
+  const selected = [];
+  const active = new Array(detections.length).fill(true);
+  for (let i = 0; i < detections.length; i++) {
+    if (!active[i]) continue;
+    if (detections[i].categories[0].score < confidenceThreshold) continue;
+    selected.push(detections[i]);
+    const boxA = detections[i].boundingBox;
+    for (let j = i + 1; j < detections.length; j++) {
+      if (!active[j]) continue;
+      const boxB = detections[j].boundingBox;
+      const x1 = Math.max(boxA.originX, boxB.originX);
+      const y1 = Math.max(boxA.originY, boxB.originY);
+      const x2 = Math.min(boxA.originX + boxA.width, boxB.originX + boxB.width);
+      const y2 = Math.min(boxA.originY + boxA.height, boxB.originY + boxB.height);
+      if (x2 < x1 || y2 < y1) continue;
+      const intersection = (x2 - x1) * (y2 - y1);
+      const areaA = boxA.width * boxA.height;
+      const areaB = boxB.width * boxB.height;
+      const union = areaA + areaB - intersection;
+      const iou = intersection / union;
+      if (iou > iouLimit) {
+        active[j] = false;
+      }
+    }
+  }
+  return selected;
+}
+// 3. Handle Clicks & Draw
+async function handleClick(event) {
+  if (!objectDetector) return;
+  const img = event.target;
+  const card = img.parentNode;
+  // -- NEW: Inject/Show Inference Bar --
+  let infoPanel = card.querySelector('.inference-panel');
+  if (!infoPanel) {
+    infoPanel = document.createElement('div');
+    infoPanel.className = 'inference-panel';
+    infoPanel.innerHTML = `
+      <div class="inference-status">
+        <span>Running Inference...</span>
+        <span>Please wait</span>
+      </div>
+      <div class="progress-track">
+        <div class="progress-bar"></div>
+      </div>
+    `;
+    card.appendChild(infoPanel);
+  }
+  // 1. Show Loading State
+  card.classList.add('processing');
+  // Clear old boxes immediately so the user sees a "reset"
+  card.querySelectorAll('.highlighter, .label-tag').forEach(el => el.remove());
+  // 2. Force a tiny delay so the browser renders the loading bar
+  // before the heavy synchronous AI detection freezes the thread.
+  await new Promise(resolve => requestAnimationFrame(() => setTimeout(resolve, 50)));
+  try {
+    // 3. Run Detection
+    const predictions = objectDetector.detect(img);
+    const filteredDetections = filterDetections(predictions.detections, overlapThreshold);
+    displayDetections(filteredDetections, img);
+  } catch(e) {
+    console.error(e);
+    alert("Error running model");
+  } finally {
+    // 4. Hide Loading State
+    card.classList.remove('processing');
+  }
+}
+function displayDetections(detections, img) {
+  const ratioX = img.width / img.naturalWidth;
+  const ratioY = img.height / img.naturalHeight;
+  detections.forEach(detection => {
+    const box = detection.boundingBox;
+    const category = detection.categories[0];
+    const score = Math.round(category.score * 100);
+    const color = getColorForLabel(category.categoryName);
+    const highlighter = document.createElement("div");
+    highlighter.className = "highlighter";
+    highlighter.style.left = `${box.originX * ratioX}px`;
+    highlighter.style.top = `${box.originY * ratioY}px`;
+    highlighter.style.width = `${box.width * ratioX}px`;
+    highlighter.style.height = `${box.height * ratioY}px`;
+    highlighter.style.borderColor = color;
+    highlighter.style.backgroundColor = color + "20";
+    const label = document.createElement("div");
+    label.className = "label-tag";
+    label.innerText = `${category.categoryName} ${score}%`;
+    label.style.backgroundColor = color;
+    const topPos = (box.originY * ratioY) - 25;
+    label.style.left = `${box.originX * ratioX}px`;
+    label.style.top = `${topPos > 0 ? topPos : (box.originY * ratioY)}px`;
+    img.parentNode.appendChild(highlighter);
+    img.parentNode.appendChild(label);
+  });
+}
+function getColorForLabel(label) {
+  let hash = 0;
+  for (let i = 0; i < label.length; i++) {
+    hash = label.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  const c = (hash & 0x00FFFFFF).toString(16).toUpperCase();
+  return "#" + "00000".substring(0, 6 - c.length) + c;
+}
+// 4. Initialization & Event Listeners
+const imageContainer = document.getElementById("imageContainer");
+imageContainer.addEventListener('click', (e) => {
+  if (e.target.tagName === 'IMG') handleClick(e);
+});
+document.getElementById('imageUpload').addEventListener('change', (e) => {
+  const file = e.target.files[0];
+  if (!file) return;
+  const reader = new FileReader();
+  reader.onload = (event) => {
+    const div = document.createElement('div');
+    div.className = 'detect-card';
+    const img = document.createElement('img');
+    img.src = event.target.result;
+    div.appendChild(img);
+    imageContainer.insertBefore(div, imageContainer.firstChild);
+  };
+  reader.readAsDataURL(file);
+});
+document.getElementById('confidenceSlider').addEventListener('input', (e) => {
+  confidenceThreshold = e.target.value / 100;
+  document.getElementById('confValue').innerText = e.target.value;
+});
+document.getElementById('overlapSlider').addEventListener('input', (e) => {
+  overlapThreshold = e.target.value / 100;
+  document.getElementById('overlapValue').innerText = e.target.value;
+});
+</script>
+</body>
+</html>

Pose.html ADDED Viewed

	@@ -0,0 +1,380 @@

+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <title>MediaPipe Hands + FaceMesh (Bigger + Better)</title>
+  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils@0.3.1675466862/camera_utils.js" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands@0.4.1675469240/hands.js" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh@0.4.1633559619/face_mesh.js" crossorigin="anonymous"></script>
+  <style>
+    :root { color-scheme: dark; }
+    html, body { margin: 0; width: 100%; height: 100%; background: #000; overflow: hidden; }
+    #video { position: absolute; left: 0; top: 0; width: 2px; height: 2px; opacity: 0; pointer-events: none; z-index: -1; }
+    #canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; background: #000; }
+    #hud{
+      position:fixed; left:14px; top:14px; z-index:10; display:none;
+      padding:10px 12px; border-radius:10px;
+      background:rgba(18,18,18,0.72); border:1px solid rgba(255,255,255,0.10);
+      backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
+      box-shadow:0 10px 24px rgba(0,0,0,0.45);
+      font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+      line-height:1.15; user-select:none; min-width: 190px;
+    }
+    .row{ display:flex; justify-content:space-between; gap:10px; }
+    .k{ color:rgba(255,255,255,0.65); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; }
+    .v{ font-size:18px; font-weight:800; }
+    #start{
+      position:fixed; inset:0; margin:auto; z-index:20;
+      width:min(380px, calc(100vw - 36px)); height:56px;
+      border:0; border-radius:999px; cursor:pointer;
+      font-weight:800; letter-spacing:0.08em; text-transform:uppercase;
+      color:#001114;
+      background:linear-gradient(135deg, #00ffff 0%, #00d4ff 45%, #00ff9a 100%);
+      box-shadow:0 0 0 1px rgba(0,255,255,0.18), 0 18px 44px rgba(0,255,255,0.18);
+    }
+  </style>
+</head>
+<body>
+  <video id="video" playsinline muted></video>
+  <canvas id="canvas"></canvas>
+  <div id="hud">
+    <div class="row"><div class="k">Render</div><div id="fpsR" class="v">0</div></div>
+    <div class="row"><div class="k">Hands</div><div id="fpsH" class="v">0</div></div>
+    <div class="row"><div class="k">Face</div><div id="fpsF" class="v">0</div></div>
+    <div class="row"><div class="k">Face</div><div id="faceOn" class="v" style="font-size:14px;">OFF</div></div>
+  </div>
+  <button id="start">Start</button>
+  <script>
+    const HANDS_BASE = "https://cdn.jsdelivr.net/npm/@mediapipe/hands@0.4.1675469240/";
+    const FACE_BASE  = "https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh@0.4.1633559619/";
+    // Camera input (keep low for speed)
+    const CAM_W = 320, CAM_H = 240;
+    // Make face/hands BIGGER (visual-only scaling around their own centers)
+    // This does NOT change tracking, only how we draw it.
+    const HAND_SCALE = 1.35;
+    const FACE_SCALE = 1.25;
+    // Visual thickness/size (also makes them look bigger/better)
+    const HAND_LINE_W = 3.5;
+    const HAND_POINT  = 4;
+    const FACE_POINT  = 1.4;
+    // Scheduler rates
+    const HANDS_HZ = 24;
+    const FACE_HZ  = 10;
+    // Model options
+    const MAX_HANDS = 2;
+    const HANDS_COMPLEXITY = 0;
+    const FACE_REFINE = false; // set true for nicer eyes/lips (slower)
+    const videoEl = document.getElementById('video');
+    const canvasEl = document.getElementById('canvas');
+    const ctx = canvasEl.getContext('2d', { alpha: false, desynchronized: true });
+    function resizeCanvas() {
+      const dpr = Math.min(window.devicePixelRatio || 1, 1.5);
+      canvasEl.width = Math.floor(window.innerWidth * dpr);
+      canvasEl.height = Math.floor(window.innerHeight * dpr);
+      canvasEl.style.width = window.innerWidth + 'px';
+      canvasEl.style.height = window.innerHeight + 'px';
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+      clearBlack();
+    }
+    function clearBlack() {
+      ctx.fillStyle = '#000000';
+      ctx.fillRect(0, 0, window.innerWidth, window.innerHeight);
+    }
+    window.addEventListener('resize', resizeCanvas, { passive: true });
+    resizeCanvas();
+    // Contain mapping (camera aspect to screen)
+    function getViewRect() {
+      const cw = window.innerWidth, ch = window.innerHeight;
+      const camAR = CAM_W / CAM_H;
+      const canvasAR = cw / ch;
+      let vw, vh, vx, vy;
+      if (canvasAR > camAR) { vh = ch; vw = vh * camAR; vx = (cw - vw) * 0.5; vy = 0; }
+      else { vw = cw; vh = vw / camAR; vx = 0; vy = (ch - vh) * 0.5; }
+      return { x: vx, y: vy, w: vw, h: vh };
+    }
+    function mapLM(lm, view) {
+      return { x: view.x + lm.x * view.w, y: view.y + lm.y * view.h };
+    }
+    // Compute centroid in pixel space (for visual scaling)
+    function centroidPx(landmarks, view) {
+      let sx = 0, sy = 0;
+      const n = landmarks.length;
+      for (let i = 0; i < n; i++) {
+        const p = mapLM(landmarks[i], view);
+        sx += p.x; sy += p.y;
+      }
+      return { x: sx / n, y: sy / n };
+    }
+    function drawPointsScaled(landmarks, color, sizePx, view, scale) {
+      if (!landmarks || !landmarks.length) return;
+      const c = centroidPx(landmarks, view);
+      ctx.fillStyle = color;
+      ctx.beginPath();
+      for (let i = 0, n = landmarks.length; i < n; i++) {
+        const p = mapLM(landmarks[i], view);
+        const x = c.x + (p.x - c.x) * scale;
+        const y = c.y + (p.y - c.y) * scale;
+        ctx.rect(x, y, sizePx, sizePx);
+      }
+      ctx.fill();
+    }
+    function drawEdgesScaled(landmarks, edges, color, lineWidth, view, scale) {
+      if (!landmarks || !landmarks.length) return;
+      const c = centroidPx(landmarks, view);
+      ctx.strokeStyle = color;
+      ctx.lineWidth = lineWidth;
+      ctx.beginPath();
+      for (let i = 0; i < edges.length; i++) {
+        const a = edges[i][0], b = edges[i][1];
+        const p0 = mapLM(landmarks[a], view);
+        const p1 = mapLM(landmarks[b], view);
+        const x0 = c.x + (p0.x - c.x) * scale;
+        const y0 = c.y + (p0.y - c.y) * scale;
+        const x1 = c.x + (p1.x - c.x) * scale;
+        const y1 = c.y + (p1.y - c.y) * scale;
+        ctx.moveTo(x0, y0);
+        ctx.lineTo(x1, y1);
+      }
+      ctx.stroke();
+    }
+    // Hands skeleton (21 landmarks)
+    const HAND_EDGES = [
+      [0,1],[1,2],[2,3],[3,4],
+      [0,5],[5,6],[6,7],[7,8],
+      [0,9],[9,10],[10,11],[11,12],
+      [0,13],[13,14],[14,15],[15,16],
+      [0,17],[17,18],[18,19],[19,20],
+      [5,9],[9,13],[13,17]
+    ];
+    // ===== Smoothing + interpolation (normalized coords) =====
+    const EMA_HANDS = 0.65;
+    const EMA_FACE  = 0.45;
+    function cloneLms(lms) {
+      if (!lms) return null;
+      const out = new Array(lms.length);
+      for (let i = 0; i < lms.length; i++) out[i] = { x: lms[i].x, y: lms[i].y, z: lms[i].z };
+      return out;
+    }
+    function emaUpdate(prev, next, alpha) {
+      if (!next) return null;
+      if (!prev || prev.length !== next.length) return cloneLms(next);
+      const out = new Array(next.length);
+      for (let i = 0; i < next.length; i++) {
+        const p = prev[i], n = next[i];
+        out[i] = { x: p.x + (n.x - p.x) * alpha, y: p.y + (n.y - p.y) * alpha, z: 0 };
+      }
+      return out;
+    }
+    function lerpFrame(a, b, t) {
+      if (!a) return null;
+      if (!b || a.length !== b.length) return a;
+      const out = new Array(a.length);
+      for (let i = 0; i < a.length; i++) {
+        out[i] = { x: a[i].x + (b[i].x - a[i].x) * t, y: a[i].y + (b[i].y - a[i].y) * t, z: 0 };
+      }
+      return out;
+    }
+    let prevLH=null, currLH=null, prevRH=null, currRH=null;
+    let prevFace=null, currFace=null;
+    let prevHandsTs=0, lastHandsTs=0;
+    let prevFaceTs=0, lastFaceTs=0;
+    // HUD FPS
+    const hudEl = document.getElementById('hud');
+    const fpsREl = document.getElementById('fpsR');
+    const fpsHEl = document.getElementById('fpsH');
+    const fpsFEl = document.getElementById('fpsF');
+    const faceOnEl = document.getElementById('faceOn');
+    let rFrames = 0, rLastT = performance.now();
+    function tickRenderFps() {
+      rFrames++;
+      const now = performance.now();
+      const dt = now - rLastT;
+      if (dt >= 500) {
+        fpsREl.textContent = String(Math.round((rFrames * 1000) / dt));
+        rLastT = now; rFrames = 0;
+      }
+    }
+    let hFrames = 0, hLastT = performance.now();
+    function tickHandsFps() {
+      hFrames++;
+      const now = performance.now();
+      const dt = now - hLastT;
+      if (dt >= 900) {
+        fpsHEl.textContent = String(Math.round((hFrames * 1000) / dt));
+        hLastT = now; hFrames = 0;
+      }
+    }
+    let fFrames = 0, fLastT = performance.now();
+    function tickFaceFps() {
+      fFrames++;
+      const now = performance.now();
+      const dt = now - fLastT;
+      if (dt >= 1100) {
+        fpsFEl.textContent = String(Math.round((fFrames * 1000) / dt));
+        fLastT = now; fFrames = 0;
+      }
+    }
+    function renderLoop() {
+      clearBlack();
+      const view = getViewRect();
+      const now = performance.now();
+      const hdt = Math.max(1, lastHandsTs - prevHandsTs);
+      const ht = Math.min(1, Math.max(0, (now - lastHandsTs) / hdt));
+      const drawLH = lerpFrame(prevLH, currLH, ht);
+      const drawRH = lerpFrame(prevRH, currRH, ht);
+      const fdt = Math.max(1, lastFaceTs - prevFaceTs);
+      const ft = Math.min(1, Math.max(0, (now - lastFaceTs) / fdt));
+      const drawFace = lerpFrame(prevFace, currFace, ft);
+      if (drawLH) {
+        drawEdgesScaled(drawLH, HAND_EDGES, '#00ff00', HAND_LINE_W, view, HAND_SCALE);
+        drawPointsScaled(drawLH, '#00ff00', HAND_POINT, view, HAND_SCALE);
+      }
+      if (drawRH) {
+        drawEdgesScaled(drawRH, HAND_EDGES, '#ffff00', HAND_LINE_W, view, HAND_SCALE);
+        drawPointsScaled(drawRH, '#ffff00', HAND_POINT, view, HAND_SCALE);
+      }
+      if (drawFace) {
+        drawPointsScaled(drawFace, '#ff00ff', FACE_POINT, view, FACE_SCALE);
+      }
+      tickRenderFps();
+      requestAnimationFrame(renderLoop);
+    }
+    // ===== Models =====
+    const hands = new Hands({ locateFile: (f) => HANDS_BASE + f });
+    hands.setOptions({
+      maxNumHands: MAX_HANDS,
+      modelComplexity: HANDS_COMPLEXITY,
+      minDetectionConfidence: 0.5,
+      minTrackingConfidence: 0.5,
+    });
+    hands.onResults((res) => {
+      prevHandsTs = lastHandsTs;
+      lastHandsTs = performance.now();
+      tickHandsFps();
+      let left = null, right = null;
+      const lms = res.multiHandLandmarks || [];
+      const hd  = res.multiHandedness || [];
+      for (let i = 0; i < lms.length; i++) {
+        const label = hd[i]?.label;
+        if (label === 'Left') left = lms[i];
+        else if (label === 'Right') right = lms[i];
+      }
+      prevLH = currLH; currLH = emaUpdate(currLH, left, EMA_HANDS);
+      prevRH = currRH; currRH = emaUpdate(currRH, right, EMA_HANDS);
+    });
+    const faceMesh = new FaceMesh({ locateFile: (f) => FACE_BASE + f });
+    faceMesh.setOptions({
+      maxNumFaces: 1,
+      refineLandmarks: FACE_REFINE,
+      minDetectionConfidence: 0.5,
+      minTrackingConfidence: 0.5,
+    });
+    faceMesh.onResults((res) => {
+      prevFaceTs = lastFaceTs;
+      lastFaceTs = performance.now();
+      tickFaceFps();
+      const face = res.multiFaceLandmarks?.[0] || null;
+      prevFace = currFace;
+      currFace = emaUpdate(currFace, face, EMA_FACE);
+      faceOnEl.textContent = face ? "ON" : "OFF";
+      faceOnEl.style.color = face ? "#00ff80" : "#ff3b3b";
+    });
+    // ===== Deterministic scheduler =====
+    let busy = false;
+    let lastHandsRun = 0, lastFaceRun = 0;
+    let preferFaceNext = true;
+    function due(now, lastT, hz) { return (now - lastT) >= (1000 / hz); }
+    async function runScheduled(now) {
+      if (busy) return;
+      const handsDue = due(now, lastHandsRun, HANDS_HZ);
+      const faceDue  = due(now, lastFaceRun,  FACE_HZ);
+      let run = null;
+      if (handsDue && !faceDue) run = 'hands';
+      else if (!handsDue && faceDue) run = 'face';
+      else if (handsDue && faceDue) run = (preferFaceNext ? 'face' : 'hands');
+      else return;
+      busy = true;
+      try {
+        if (run === 'hands') {
+          lastHandsRun = now;
+          preferFaceNext = true;
+          await hands.send({ image: videoEl });
+        } else {
+          lastFaceRun = now;
+          preferFaceNext = false;
+          await faceMesh.send({ image: videoEl });
+        }
+      } finally {
+        busy = false;
+      }
+    }
+    const camera = new Camera(videoEl, {
+      width: CAM_W,
+      height: CAM_H,
+      onFrame: async () => { await runScheduled(performance.now()); }
+    });
+    document.getElementById('start').addEventListener('click', async () => {
+      document.getElementById('start').style.display = 'none';
+      hudEl.style.display = 'block';
+      clearBlack();
+      const t = performance.now();
+      prevHandsTs = lastHandsTs = t;
+      prevFaceTs  = lastFaceTs  = t;
+      lastHandsRun = t - 1000;
+      lastFaceRun  = t - 1000;
+      await camera.start();
+      requestAnimationFrame(renderLoop);
+    });
+  </script>
+</body>
+</html>

components.json ADDED Viewed

	@@ -0,0 +1,21 @@

+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": false,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

eslint.config.js ADDED Viewed

	@@ -0,0 +1,60 @@

+import globals from "globals";
+import pluginJs from "@eslint/js";
+import pluginReact from "eslint-plugin-react";
+import pluginReactHooks from "eslint-plugin-react-hooks";
+import pluginUnusedImports from "eslint-plugin-unused-imports";
+export default [
+  {
+    files: [
+      "src/components/**/*.{js,mjs,cjs,jsx}",
+      "src/pages/**/*.{js,mjs,cjs,jsx}",
+      "src/Layout.jsx",
+    ],
+    ignores: ["src/lib/**/*", "src/components/ui/**/*"],
+    ...pluginJs.configs.recommended,
+    ...pluginReact.configs.flat.recommended,
+    languageOptions: {
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 2022,
+        sourceType: "module",
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
+    settings: {
+      react: {
+        version: "detect",
+      },
+    },
+    plugins: {
+      react: pluginReact,
+      "react-hooks": pluginReactHooks,
+      "unused-imports": pluginUnusedImports,
+    },
+    rules: {
+      "no-unused-vars": "off",
+      "react/jsx-uses-vars": "error",
+      "react/jsx-uses-react": "error",
+      "unused-imports/no-unused-imports": "error",
+      "unused-imports/no-unused-vars": [
+        "warn",
+        {
+          vars: "all",
+          varsIgnorePattern: "^_",
+          args: "after-used",
+          argsIgnorePattern: "^_",
+        },
+      ],
+      "react/prop-types": "off",
+      "react/react-in-jsx-scope": "off",
+      "react/no-unknown-property": [
+        "error",
+        { ignore: ["cmdk-input-wrapper", "toast-close"] },
+      ],
+      "react-hooks/rules-of-hooks": "error",
+    },
+  },
+];

index.html ADDED Viewed

	@@ -0,0 +1,13 @@

+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="https://base44.com/logo_v2.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="manifest" href="/manifest.json" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

jsconfig.json ADDED Viewed

	@@ -0,0 +1,21 @@

+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "jsx": "react-jsx",
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "lib": ["esnext", "dom"],
+    "target": "esnext",
+    "checkJs": true,
+    "skipLibCheck": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "types": []
+  },
+  "include": ["src/components/**/*.js", "src/pages/**/*.jsx", "src/Layout.jsx"],
+  "exclude": ["node_modules", "dist", "src/vite-plugins", "src/components/ui", "src/api", "src/lib"]
+}

live-feed-object-detection.html ADDED Viewed

	@@ -0,0 +1,225 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>🤖 AI Object Scanner</title>
+    <!-- These are the Brains (TensorFlow.js) -->
+    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.0.0/dist/tf.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd"></script>
+    <style>
+        /* CSS: The Future Lab Look */
+        body {
+            background-color: #0d1117; /* Deep space dark */
+            color: #00f3ff; /* Cyber blue */
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            min-height: 100vh;
+            margin: 0;
+            padding: 20px;
+        }
+        h1 {
+            text-shadow: 0 0 15px #00f3ff;
+            letter-spacing: 2px;
+            margin-bottom: 5px;
+        }
+        p {
+            color: #ccc;
+            margin-bottom: 20px;
+        }
+        /* The container keeps the video and the boxes aligned */
+        .cam-container {
+            position: relative; /* This is crucial for positioning boxes */
+            border: 3px solid #333;
+            border-radius: 10px;
+            overflow: hidden;
+            box-shadow: 0 0 30px rgba(0, 243, 255, 0.2);
+            background: #000;
+            min-width: 640px;
+            min-height: 480px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        video {
+            display: block; /* Removes weird gaps */
+            width: 640px;
+            height: 480px;
+        }
+        /* The layer where we draw the boxes */
+        #box-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none; /* Let clicks pass through */
+        }
+        /* The style of the detection boxes */
+        .detection-box {
+            position: absolute;
+            border: 2px solid #00f3ff;
+            background-color: rgba(0, 243, 255, 0.1); /* See-through blue */
+            z-index: 10;
+        }
+        .detection-label {
+            position: absolute;
+            top: -25px;
+            left: 0;
+            background-color: #00f3ff;
+            color: #000;
+            padding: 2px 8px;
+            font-size: 14px;
+            font-weight: bold;
+        }
+        button {
+            background-color: #00f3ff;
+            color: #000;
+            border: none;
+            padding: 15px 40px;
+            font-size: 1.2rem;
+            font-weight: bold;
+            cursor: pointer;
+            border-radius: 50px;
+            margin-top: 20px;
+            transition: transform 0.2s;
+        }
+        button:hover {
+            transform: scale(1.05);
+            box-shadow: 0 0 20px #00f3ff;
+        }
+        button:disabled {
+            background-color: #555;
+            color: #888;
+            cursor: wait;
+            transform: none;
+            box-shadow: none;
+        }
+        .status {
+            font-family: monospace;
+            font-size: 1.2rem;
+            margin-top: 10px;
+        }
+    </style>
+</head>
+<body>
+    <h1>🤖 AI Vision Lab</h1>
+    <p>Hold objects up to the camera (cellphone, cup, book, person) to scan them.</p>
+    <div class="cam-container">
+        <!-- The video plays here -->
+        <video id="webcam" autoplay muted playsinline></video>
+        <!-- The colored boxes appear here -->
+        <div id="box-overlay"></div>
+    </div>
+    <div class="status" id="statusText">⏳ Initializing Systems...</div>
+    <button id="startBtn" onclick="enableCam()" disabled>Please Wait...</button>
+    <script>
+        // JAVASCRIPT: Where the AI lives
+        const video = document.getElementById('webcam');
+        const overlay = document.getElementById('box-overlay');
+        const startBtn = document.getElementById('startBtn');
+        const statusText = document.getElementById('statusText');
+        let model = undefined;
+        // 1. LOAD THE AI MODEL
+        // We do this immediately so it's ready when the user clicks start
+        cocoSsd.load().then(function (loadedModel) {
+            model = loadedModel;
+            statusText.innerText = "✅ System Ready";
+            startBtn.disabled = false;
+            startBtn.innerText = "🔴 Activate Scanner";
+        });
+        // 2. ENABLE WEBCAM
+        function enableCam() {
+            if (!model) {
+                return; // Model isn't ready yet
+            }
+            // Hide the button after clicking
+            startBtn.style.display = 'none';
+            statusText.innerText = "👀 Scanning...";
+            // Ask for camera permission
+            const constraints = {
+                video: { width: 640, height: 480 }
+            };
+            navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
+                video.srcObject = stream;
+                // When the video actually has data, start the prediction loop
+                video.addEventListener('loadeddata', predictWebcam);
+            });
+        }
+        // 3. THE PREDICTION LOOP
+        function predictWebcam() {
+            // Ask the model to look at the video frame
+            model.detect(video).then(function (predictions) {
+                // Clear the old boxes from the last frame
+                overlay.innerHTML = '';
+                // Loop through every object the AI found
+                for (let n = 0; n < predictions.length; n++) {
+                    // Only show things if the AI is more than 66% sure
+                    if (predictions[n].score > 0.66) {
+                        // Create the box formatting
+                        const p = document.createElement('div');
+                        p.classList.add('detection-box');
+                        // We need the coordinates: [x, y, width, height]
+                        // These numbers come from the AI
+                        const x = predictions[n].bbox[0];
+                        const y = predictions[n].bbox[1];
+                        const width = predictions[n].bbox[2];
+                        const height = predictions[n].bbox[3];
+                        // Apply the math to the CSS
+                        p.style.left = x + 'px';
+                        p.style.top = y + 'px';
+                        p.style.width = width + 'px';
+                        p.style.height = height + 'px';
+                        // Create the text label (e.g., "cup 90%")
+                        const label = document.createElement('span');
+                        label.classList.add('detection-label');
+                        label.innerText = predictions[n].class.toUpperCase() + ' ' + Math.round(parseFloat(predictions[n].score) * 100) + '%';
+                        // Add the label to the box, and the box to the screen
+                        p.appendChild(label);
+                        overlay.appendChild(p);
+                    }
+                }
+                // Call this function again immediately to create a video loop
+                window.requestAnimationFrame(predictWebcam);
+            });
+        }
+    </script>
+</body>
+</html>

	@@ -0,0 +1,188 @@

+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="https://base44.com/logo_v2.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="manifest" href="/manifest.json" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Class Entry</title>
+  <style>
+    :root{
+      --bg1:#0f172a;      /* slate-900 */
+      --bg2:#2e1065;      /* purple-900-ish */
+      --card:#0b1220cc;
+      --border:#ffffff1a;
+      --text:#e5e7eb;
+      --muted:#cbd5e180;
+      --cyan:#22d3ee;
+      --purple:#a855f7;
+      --danger:#fb7185;
+    }
+    *{box-sizing:border-box}
+    html,body{height:100%; margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;}
+    body{
+      color:var(--text);
+      background: radial-gradient(900px 500px at 20% 20%, rgba(59,130,246,.22), transparent 60%),
+                  radial-gradient(900px 500px at 80% 80%, rgba(168,85,247,.22), transparent 60%),
+                  linear-gradient(135deg, var(--bg1), var(--bg2), var(--bg1));
+      display:grid;
+      place-items:center;
+      padding:24px;
+      overflow-x:hidden;
+    }
+    .card{
+      width:min(520px, 100%);
+      background: linear-gradient(180deg, rgba(15,23,42,.75), rgba(15,23,42,.45));
+      border:1px solid var(--border);
+      border-radius:24px;
+      padding:28px;
+      backdrop-filter: blur(14px);
+      box-shadow: 0 25px 60px rgba(0,0,0,.45);
+      position:relative;
+      overflow:hidden;
+    }
+    .glow{
+      position:absolute; inset:-80px;
+      background: radial-gradient(circle at 30% 20%, rgba(34,211,238,.16), transparent 55%),
+                  radial-gradient(circle at 70% 80%, rgba(168,85,247,.16), transparent 55%);
+      pointer-events:none;
+    }
+    h1{margin:0 0 8px; font-size:28px; letter-spacing:.2px;}
+    .sub{margin:0 0 18px; color:var(--muted); line-height:1.4;}
+    label{display:block; font-size:14px; color:#e5e7ebcc; margin:14px 0 8px;}
+    input{
+      width:100%;
+      padding:14px 14px;
+      border-radius:14px;
+      border:1px solid rgba(255,255,255,.15);
+      background: rgba(2,6,23,.55);
+      color:var(--text);
+      outline:none;
+      font-size:16px;
+    }
+    input:focus{
+      border-color: rgba(34,211,238,.55);
+      box-shadow: 0 0 0 4px rgba(34,211,238,.12);
+    }
+    .row{display:flex; gap:12px; margin-top:16px; align-items:center; flex-wrap:wrap;}
+    button{
+      border:0;
+      border-radius:16px;
+      padding:12px 16px;
+      font-size:16px;
+      font-weight:700;
+      color:white;
+      cursor:pointer;
+      background: linear-gradient(90deg, rgba(59,130,246,1), rgba(168,85,247,1));
+      box-shadow: 0 16px 30px rgba(168,85,247,.22);
+    }
+    button:active{transform: translateY(1px);}
+    .hint{
+      font-size:13px;
+      color:var(--muted);
+      flex: 1 1 auto;
+    }
+    .error{
+      margin-top:12px;
+      color: var(--danger);
+      font-size:14px;
+      display:none;
+    }
+    .ok{
+      margin-top:12px;
+      color: rgba(34,211,238,.95);
+      font-size:14px;
+      display:none;
+    }
+    .tiny{
+      margin-top:18px;
+      border-top:1px solid var(--border);
+      padding-top:12px;
+      color:#ffffff66;
+      font-size:12px;
+      text-align:center;
+    }
+  </style>
+</head>
+<body>
+  <div class="card">
+    <div class="glow"></div>
+    <h1>Computer Vision Lab</h1>
+    <p class="sub">Enter your class username to continue.</p>
+    <form id="entryForm" autocomplete="off">
+      <label for="username">Username</label>
+      <input id="username" name="username" placeholder="e.g., cv-student" required />
+      <div class="row">
+        <button type="submit">Continue</button>
+        <div class="hint">Tip: usernames are case-insensitive in this form.</div>
+      </div>
+      <div id="ok" class="ok">Accepted. Redirecting…</div>
+      <div id="error" class="error">That username isn’t allowed.</div>
+    </form>
+    <div class="tiny">Class access check (client-side)</div>
+  </div>
+  <script>
+    // ---- Configure these two values ----
+    const ONLY_ALLOWED_USERNAME = "GLIS26STEM";  // the one username you want to allow
+    const REDIRECT_TO = "./Dashboard.html";       // where to go after success (change this)
+    // -----------------------------------
+    const form = document.getElementById("entryForm");
+    const input = document.getElementById("username");
+    const error = document.getElementById("error");
+    const ok = document.getElementById("ok");
+    const normalize = (s) => (s || "").trim().toLowerCase();
+    form.addEventListener("submit", (e) => {
+      e.preventDefault();
+      const entered = normalize(input.value);
+      const allowed = normalize(ONLY_ALLOWED_USERNAME);
+      error.style.display = "none";
+      ok.style.display = "none";
+      if (!entered) return;
+      if (entered === allowed) {
+        ok.style.display = "block";
+        // Remember they passed (optional)
+        localStorage.setItem("class_username", entered);
+        localStorage.setItem("class_access_granted", "true");
+        setTimeout(() => {
+          window.location.href = REDIRECT_TO;
+        }, 450);
+      } else {
+        error.style.display = "block";
+        input.focus();
+        input.select();
+      }
+    });
+  </script>
+</body>
+</html>

movement-detection.html ADDED Viewed

	@@ -0,0 +1,187 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>🕵️‍♂️ Secret Agent Motion Detector</title>
+    <style>
+        /* CSS: Making it look cool */
+        body {
+            background-color: #1a1a1a; /* Dark spy background */
+            color: #00ff41; /* Hacker green text */
+            font-family: 'Courier New', Courier, monospace; /* Typewriter font */
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            min-height: 100vh;
+            margin: 0;
+            padding: 20px;
+        }
+        h1 {
+            text-shadow: 0 0 10px #00ff41;
+            margin-bottom: 10px;
+        }
+        .instructions {
+            background: #222;
+            padding: 15px;
+            border-radius: 10px;
+            border: 1px solid #444;
+            max-width: 600px;
+            text-align: center;
+            margin-bottom: 20px;
+            color: #ddd;
+        }
+        /* The canvas where the magic happens */
+        #canvasFinal {
+            border: 4px solid #00ff41;
+            border-radius: 8px;
+            box-shadow: 0 0 20px rgba(0, 255, 65, 0.3);
+            background-color: #000;
+            max-width: 100%;
+            display: none; /* Hidden until camera starts */
+        }
+        /* Hide the raw video stream and processing canvas */
+        #camStream, #canvasHidden {
+            display: none;
+        }
+        button {
+            background-color: #00ff41;
+            color: #000;
+            border: none;
+            padding: 15px 30px;
+            font-size: 1.2rem;
+            font-weight: bold;
+            font-family: inherit;
+            cursor: pointer;
+            border-radius: 5px;
+            margin-bottom: 20px;
+            transition: all 0.3s;
+        }
+        button:hover {
+            background-color: #fff;
+            box-shadow: 0 0 15px #fff;
+        }
+        .status {
+            margin-top: 10px;
+            font-size: 0.9rem;
+            color: #888;
+        }
+    </style>
+</head>
+<body>
+    <button id="startBtn" onclick="startSpyCamera()">🚀 Activate Movement Detection Mode</button>
+    <p class="status" id="statusText">Waiting for activation...</p>
+    <!-- These are the HTML elements that handle the video -->
+    <video id="camStream" playsinline autoplay></video>
+    <canvas id="canvasHidden"></canvas>
+    <canvas id="canvasFinal"></canvas>
+    <script>
+        // JAVASCRIPT: The Brains of the Operation
+        // 1. Grab our HTML elements so we can control them
+        const video = document.getElementById('camStream');
+        const hiddenCanvas = document.getElementById('canvasHidden');
+        const finalCanvas = document.getElementById('canvasFinal');
+        const startBtn = document.getElementById('startBtn');
+        const statusText = document.getElementById('statusText');
+        // Contexts are like the "paintbrushes" for the canvas
+        const hiddenCtx = hiddenCanvas.getContext('2d');
+        const finalCtx = finalCanvas.getContext('2d');
+        // We need a place to store the "previous" frame to compare against
+        let previousFrameData = null;
+        async function startSpyCamera() {
+            try {
+                // 2. Ask the browser for permission to use the camera
+                const stream = await navigator.mediaDevices.getUserMedia({ video: true });
+                // Connect the camera stream to our hidden video element
+                video.srcObject = stream;
+                // Update the UI
+                statusText.innerText = "System Active. Scanning for movement...";
+                startBtn.style.display = "none"; // Hide button
+                finalCanvas.style.display = "block"; // Show screen
+                // Start the loop!
+                requestAnimationFrame(processVideo);
+            } catch (err) {
+                // If they say no or don't have a camera
+                statusText.innerText = "⚠️ Error: Could not access camera. Please allow permission.";
+                console.error(err);
+            }
+        }
+        function processVideo() {
+            // Check if the video is ready and playing
+            if (video.readyState === video.HAVE_ENOUGH_DATA) {
+                // Set canvas sizes to match the video size
+                const width = video.videoWidth;
+                const height = video.videoHeight;
+                hiddenCanvas.width = width;
+                hiddenCanvas.height = height;
+                finalCanvas.width = width;
+                finalCanvas.height = height;
+                // 3. Draw the current video frame onto the hidden canvas
+                hiddenCtx.drawImage(video, 0, 0, width, height);
+                // 4. Get the pixel data (the raw numbers for every color)
+                const currentFrame = hiddenCtx.getImageData(0, 0, width, height);
+                const currentData = currentFrame.data;
+                // Create a new image for the result
+                const outputImage = finalCtx.createImageData(width, height);
+                const outputData = outputImage.data;
+                // 5. THE ALGORITHM: Compare this frame to the previous one
+                if (previousFrameData) {
+                    const prevData = previousFrameData.data;
+                    // Loop through every pixel (pixels are groups of 4: Red, Green, Blue, Alpha)
+                    for (let i = 0; i < currentData.length; i += 4) {
+                        // This math calculates the difference between old and new
+                        // If pixels are the same, it turns GREY.
+                        // If they are different, it creates high contrast colors.
+                        outputData[i] = 0.5 * (255 - currentData[i]) + 0.5 * prevData[i];     // Red
+                        outputData[i+1] = 0.5 * (255 - currentData[i+1]) + 0.5 * prevData[i+1]; // Green
+                        outputData[i+2] = 0.5 * (255 - currentData[i+2]) + 0.5 * prevData[i+2]; // Blue
+                        outputData[i+3] = 255; // Alpha (Opacity) is always 100%
+                    }
+                    // Draw the result to the main screen
+                    finalCtx.putImageData(outputImage, 0, 0);
+                }
+                // 6. Save the current frame to be the "previous" frame for next time
+                // We clone it so we don't overwrite it immediately
+                previousFrameData = new ImageData(
+                    new Uint8ClampedArray(currentFrame.data),
+                    currentFrame.width,
+                    currentFrame.height
+                );
+            }
+            // Repeat this function as fast as the screen can refresh
+            requestAnimationFrame(processVideo);
+        }
+    </script>
+</body>
+</html>

package-lock.json ADDED Viewed

The diff for this file is too large to render. See raw diff

package.json ADDED Viewed

	@@ -0,0 +1,100 @@

+{
+  "name": "base44-app",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint . --quiet",
+    "lint:fix": "eslint . --fix",
+    "typecheck": "tsc -p ./jsconfig.json",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@base44/sdk": "^0.8.3",
+    "@base44/vite-plugin": "^0.2.15",
+    "@hello-pangea/dnd": "^17.0.0",
+    "@hookform/resolvers": "^4.1.2",
+    "@radix-ui/react-accordion": "^1.2.3",
+    "@radix-ui/react-alert-dialog": "^1.1.6",
+    "@radix-ui/react-aspect-ratio": "^1.1.2",
+    "@radix-ui/react-avatar": "^1.1.3",
+    "@radix-ui/react-checkbox": "^1.1.4",
+    "@radix-ui/react-collapsible": "^1.1.3",
+    "@radix-ui/react-context-menu": "^2.2.6",
+    "@radix-ui/react-dialog": "^1.1.6",
+    "@radix-ui/react-dropdown-menu": "^2.1.6",
+    "@radix-ui/react-hover-card": "^1.1.6",
+    "@radix-ui/react-label": "^2.1.2",
+    "@radix-ui/react-menubar": "^1.1.6",
+    "@radix-ui/react-navigation-menu": "^1.2.5",
+    "@radix-ui/react-popover": "^1.1.6",
+    "@radix-ui/react-progress": "^1.1.2",
+    "@radix-ui/react-radio-group": "^1.2.3",
+    "@radix-ui/react-scroll-area": "^1.2.3",
+    "@radix-ui/react-select": "^2.1.6",
+    "@radix-ui/react-separator": "^1.1.2",
+    "@radix-ui/react-slider": "^1.2.3",
+    "@radix-ui/react-slot": "^1.1.2",
+    "@radix-ui/react-switch": "^1.1.3",
+    "@radix-ui/react-tabs": "^1.1.3",
+    "@radix-ui/react-toast": "^1.2.2",
+    "@radix-ui/react-toggle": "^1.1.2",
+    "@radix-ui/react-toggle-group": "^1.1.2",
+    "@radix-ui/react-tooltip": "^1.1.8",
+    "@stripe/react-stripe-js": "^3.0.0",
+    "@stripe/stripe-js": "^5.2.0",
+    "@tanstack/react-query": "^5.84.1",
+    "canvas-confetti": "^1.9.4",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.0.0",
+    "date-fns": "^3.6.0",
+    "embla-carousel-react": "^8.5.2",
+    "framer-motion": "^11.16.4",
+    "html2canvas": "^1.4.1",
+    "input-otp": "^1.4.2",
+    "jspdf": "^4.0.0",
+    "lodash": "^4.17.21",
+    "lucide-react": "^0.475.0",
+    "moment": "^2.30.1",
+    "next-themes": "^0.4.4",
+    "react": "^18.2.0",
+    "react-day-picker": "^8.10.1",
+    "react-dom": "^18.2.0",
+    "react-hook-form": "^7.54.2",
+    "react-hot-toast": "^2.6.0",
+    "react-leaflet": "^4.2.1",
+    "react-markdown": "^9.0.1",
+    "react-quill": "^0.0.2",
+    "react-resizable-panels": "^2.1.7",
+    "react-router-dom": "^6.26.0",
+    "recharts": "^2.15.4",
+    "sonner": "^2.0.1",
+    "tailwind-merge": "^3.0.2",
+    "tailwindcss-animate": "^1.0.7",
+    "three": "^0.171.0",
+    "vaul": "^1.1.2",
+    "zod": "^3.24.2"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.19.0",
+    "@types/node": "^22.13.5",
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
+    "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.20",
+    "baseline-browser-mapping": "^2.8.32",
+    "eslint": "^9.19.0",
+    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.18",
+    "eslint-plugin-unused-imports": "^4.3.0",
+    "globals": "^15.14.0",
+    "postcss": "^8.5.3",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.8.2",
+    "vite": "^6.4.1"
+  }
+}

postcss.config.js ADDED Viewed

	@@ -0,0 +1,6 @@

+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/App.jsx ADDED Viewed

	@@ -0,0 +1,88 @@

+import { useEffect, useState } from "react";
+import LabSelection from "./login.jsx";
+import { QueryClientProvider } from '@tanstack/react-query'
+import { queryClientInstance } from '@/lib/query-client'
+import NavigationTracker from '@/lib/NavigationTracker'
+import { pagesConfig } from './pages.config'
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+import PageNotFound from './lib/PageNotFound';
+import { AuthProvider, useAuth } from '@/lib/AuthContext';
+import UserNotRegisteredError from '@/components/UserNotRegisteredError';
+const { Pages, Layout, mainPage } = pagesConfig;
+const mainPageKey = mainPage ?? Object.keys(Pages)[0];
+const MainPage = mainPageKey ? Pages[mainPageKey] : <></>;
+const LayoutWrapper = ({ children, currentPageName }) => Layout ?
+  <Layout currentPageName={currentPageName}>{children}</Layout>
+  : <>{children}</>;
+const AuthenticatedApp = () => {
+  const { isLoadingAuth, isLoadingPublicSettings, authError, navigateToLogin } = useAuth();
+  // Show loading spinner while checking app public settings or auth
+  if (isLoadingPublicSettings || isLoadingAuth) {
+    return (
+      <div className="fixed inset-0 flex items-center justify-center">
+        <div className="w-8 h-8 border-4 border-slate-200 border-t-slate-800 rounded-full animate-spin"></div>
+      </div>
+    );
+  }
+  // Handle authentication errors
+  if (authError) {
+    if (authError.type === 'user_not_registered') {
+      return <UserNotRegisteredError />;
+    } else if (authError.type === 'auth_required') {
+      // Redirect to login automatically
+      navigateToLogin();
+      return null;
+    }
+  }
+  // Render the main app
+  return (
+    <Routes>
+      <Route path="/" element={
+        <LayoutWrapper currentPageName={mainPageKey}>
+          <MainPage />
+        </LayoutWrapper>
+      } />
+      {Object.entries(Pages).map(([path, Page]) => (
+        <Route
+          key={path}
+          path={`/${path}`}
+          element={
+            <LayoutWrapper currentPageName={path}>
+              <Page />
+            </LayoutWrapper>
+          }
+        />
+      ))}
+      <Route path="*" element={<PageNotFound />} />
+    </Routes>
+  );
+};
+function App() {
+  const [labApproved, setLabApproved] = useState(false);
+  if (!labApproved) {
+    return <LabSelection onApproved={() => setLabApproved(true)} />;
+  }
+  return (
+    <AuthProvider>
+      <QueryClientProvider client={queryClientInstance}>
+        <Router>
+          <NavigationTracker />
+          <AuthenticatedApp />
+        </Router>
+      </QueryClientProvider>
+    </AuthProvider>
+  );
+}
+export default App;

src/Layout.jsx ADDED Viewed

	@@ -0,0 +1,127 @@

+import React, { useState, useEffect } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { createPageUrl } from '@/utils';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Brain, Home, BookOpen, Cpu, Target, Menu, X, Sparkles } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+const navItems = [
+  { name: 'Home', icon: Home, page: 'Home' },
+  { name: 'Lessons', icon: BookOpen, page: 'Lessons' },
+  { name: 'Quiz', icon: Target, page: 'Quiz' }
+];
+export default function Layout({ children, currentPageName }) {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const location = useLocation();
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [location.pathname]);
+  return (
+    <div className="min-h-screen bg-slate-900">
+      {/* Navigation */}
+      <nav className="fixed top-0 left-0 right-0 z-50 bg-slate-900/80 backdrop-blur-xl border-b border-white/10">
+        <div className="max-w-6xl mx-auto px-6">
+          <div className="flex items-center justify-between h-16">
+            {/* Logo */}
+            <Link to={createPageUrl('Home')} className="flex items-center gap-3">
+              <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
+                <Brain className="w-6 h-6 text-white" />
+              </div>
+              <span className="font-bold text-white text-lg hidden sm:block">Computer Vision Lab</span>
+            </Link>
+            {/* Desktop Navigation */}
+            <div className="hidden md:flex items-center gap-1">
+              {navItems.map((item) => {
+                const isActive = currentPageName === item.page;
+                return (
+                  <Link key={item.page} to={createPageUrl(item.page)}>
+                    <Button
+                      variant="ghost"
+                      className={`relative rounded-xl px-4 ${
+                        isActive
+                          ? 'text-white bg-white/10'
+                          : 'text-white/70 hover:text-white hover:bg-white/5'
+                      }`}
+                    >
+                      <item.icon className="w-4 h-4 mr-2" />
+                      {item.name}
+                      {isActive && (
+                        <motion.div
+                          layoutId="activeTab"
+                          className="absolute bottom-0 left-0 right-0 h-0.5 bg-gradient-to-r from-blue-500 to-purple-500"
+                        />
+                      )}
+                    </Button>
+                  </Link>
+                );
+              })}
+            </div>
+            {/* Mobile Menu Button */}
+            <Button
+              size="icon"
+              className="md:hidden text-white bg-transparent hover:bg-white/10 border-0"
+              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+            >
+              {mobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
+            </Button>
+          </div>
+        </div>
+        {/* Mobile Menu */}
+        <AnimatePresence>
+          {mobileMenuOpen && (
+            <motion.div
+              initial={{ opacity: 0, height: 0 }}
+              animate={{ opacity: 1, height: 'auto' }}
+              exit={{ opacity: 0, height: 0 }}
+              className="md:hidden bg-slate-900/95 backdrop-blur-xl border-b border-white/10"
+            >
+              <div className="px-6 py-4 space-y-2">
+                {navItems.map((item) => {
+                  const isActive = currentPageName === item.page;
+                  return (
+                    <Link
+                      key={item.page}
+                      to={createPageUrl(item.page)}
+                      onClick={() => setMobileMenuOpen(false)}
+                    >
+                      <div className={`flex items-center gap-3 p-3 rounded-xl ${
+                        isActive
+                          ? 'bg-white/10 text-white'
+                          : 'text-white/70 hover:bg-white/5 hover:text-white'
+                      }`}>
+                        <item.icon className="w-5 h-5" />
+                        <span className="font-medium">{item.name}</span>
+                      </div>
+                    </Link>
+                  );
+                })}
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </nav>
+      {/* Main Content */}
+      <main>
+        {children}
+      </main>
+      {/* Footer */}
+<footer className="bg-slate-900 border-t border-white/10 py-9 px-6">
+  <div className="max-w-6xl mx-auto">
+    <div className="pt-3 text-center text-white/40 text-sm">
+      <p>© 2026 Computer Vision Lab</p>
+    </div>
+  </div>
+</footer>
+        </div>
+  );
+}

src/api/base44Client.js ADDED Viewed

	@@ -0,0 +1,14 @@

+import { createClient } from '@base44/sdk';
+import { appParams } from '@/lib/app-params';
+const { appId, token, functionsVersion, appBaseUrl } = appParams;
+//Create a client with authentication required
+export const base44 = createClient({
+  appId,
+  token,
+  functionsVersion,
+  serverUrl: '',
+  requiresAuth: false,
+  appBaseUrl
+});

src/components/UserNotRegisteredError.jsx ADDED Viewed

	@@ -0,0 +1,31 @@

+import React from 'react';
+const UserNotRegisteredError = () => {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-b from-white to-slate-50">
+      <div className="max-w-md w-full p-8 bg-white rounded-lg shadow-lg border border-slate-100">
+        <div className="text-center">
+          <div className="inline-flex items-center justify-center w-16 h-16 mb-6 rounded-full bg-orange-100">
+            <svg className="w-8 h-8 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+            </svg>
+          </div>
+          <h1 className="text-3xl font-bold text-slate-900 mb-4">Access Restricted</h1>
+          <p className="text-slate-600 mb-8">
+            You are not registered to use this application. Please contact the app administrator to request access.
+          </p>
+          <div className="p-4 bg-slate-50 rounded-md text-sm text-slate-600">
+            <p>If you believe this is an error, you can:</p>
+            <ul className="list-disc list-inside mt-2 space-y-1">
+              <li>Verify you are logged in with the correct account</li>
+              <li>Contact the app administrator for access</li>
+              <li>Try logging out and back in again</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default UserNotRegisteredError;

src/components/lessons/AnimatedDiagram.jsx ADDED Viewed

	@@ -0,0 +1,215 @@

+import React from 'react';
+import { motion } from 'framer-motion';
+export function BoundingBoxDemo() {
+  return (
+    <div className="relative w-full max-w-md mx-auto aspect-video bg-gradient-to-br from-slate-800 to-slate-900 rounded-2xl overflow-hidden border border-white/10">
+      {/* Simulated Image */}
+      <div className="absolute inset-0 flex items-center justify-center">
+        <div className="text-6xl">🚗</div>
+      </div>
+      {/* Animated Bounding Box */}
+      <motion.div
+        className="absolute border-4 border-cyan-400 rounded-lg"
+        initial={{ opacity: 0, scale: 0.8 }}
+        animate={{
+          opacity: [0, 1, 1, 1],
+          scale: [0.8, 1, 1, 1],
+        }}
+        transition={{ duration: 2, repeat: Infinity, repeatDelay: 1 }}
+        style={{
+          top: '25%',
+          left: '30%',
+          width: '40%',
+          height: '50%'
+        }}
+      >
+        <motion.div
+          className="absolute -top-8 left-0 bg-cyan-400 text-slate-900 px-3 py-1 rounded-lg text-sm font-bold"
+          initial={{ opacity: 0, y: 10 }}
+          animate={{ opacity: [0, 1, 1, 0], y: [10, 0, 0, -10] }}
+          transition={{ duration: 2, repeat: Infinity, repeatDelay: 1, delay: 0.3 }}
+        >
+          Car 98%
+        </motion.div>
+        {/* Corner markers */}
+        {[
+          { top: -4, left: -4 },
+          { top: -4, right: -4 },
+          { bottom: -4, left: -4 },
+          { bottom: -4, right: -4 }
+        ].map((pos, i) => (
+          <motion.div
+            key={i}
+            className="absolute w-3 h-3 bg-cyan-400 rounded-full"
+            style={pos}
+            animate={{ scale: [1, 1.3, 1] }}
+            transition={{ duration: 1, repeat: Infinity, delay: i * 0.1 }}
+          />
+        ))}
+      </motion.div>
+    </div>
+  );
+}
+export function PoseSkeletonDemo() {
+  const keypoints = [
+    { id: 'head', x: 50, y: 10, label: 'Head' },
+    { id: 'neck', x: 50, y: 22 },
+    { id: 'lshoulder', x: 35, y: 25 },
+    { id: 'rshoulder', x: 65, y: 25 },
+    { id: 'lelbow', x: 25, y: 40 },
+    { id: 'relbow', x: 75, y: 40 },
+    { id: 'lwrist', x: 20, y: 55 },
+    { id: 'rwrist', x: 80, y: 55 },
+    { id: 'hip', x: 50, y: 50 },
+    { id: 'lhip', x: 40, y: 52 },
+    { id: 'rhip', x: 60, y: 52 },
+    { id: 'lknee', x: 38, y: 70 },
+    { id: 'rknee', x: 62, y: 70 },
+    { id: 'lankle', x: 35, y: 90 },
+    { id: 'rankle', x: 65, y: 90 },
+  ];
+  const bones = [
+    ['head', 'neck'],
+    ['neck', 'lshoulder'],
+    ['neck', 'rshoulder'],
+    ['lshoulder', 'lelbow'],
+    ['rshoulder', 'relbow'],
+    ['lelbow', 'lwrist'],
+    ['relbow', 'rwrist'],
+    ['neck', 'hip'],
+    ['hip', 'lhip'],
+    ['hip', 'rhip'],
+    ['lhip', 'lknee'],
+    ['rhip', 'rknee'],
+    ['lknee', 'lankle'],
+    ['rknee', 'rankle'],
+  ];
+  const getPoint = (id) => keypoints.find(k => k.id === id);
+  return (
+    <div className="relative w-full max-w-sm mx-auto aspect-[3/4] bg-gradient-to-br from-purple-900/50 to-pink-900/50 rounded-2xl overflow-hidden border border-white/10">
+      <svg className="w-full h-full" viewBox="0 0 100 100">
+        {/* Bones */}
+        {bones.map(([from, to], i) => {
+          const p1 = getPoint(from);
+          const p2 = getPoint(to);
+          return (
+            <motion.line
+              key={i}
+              x1={p1.x}
+              y1={p1.y}
+              x2={p2.x}
+              y2={p2.y}
+              stroke="url(#boneGradient)"
+              strokeWidth="2"
+              strokeLinecap="round"
+              initial={{ pathLength: 0, opacity: 0 }}
+              animate={{ pathLength: 1, opacity: 1 }}
+              transition={{ duration: 0.5, delay: i * 0.05 }}
+            />
+          );
+        })}
+        {/* Keypoints */}
+        {keypoints.map((point, i) => (
+          <motion.circle
+            key={point.id}
+            cx={point.x}
+            cy={point.y}
+            r="3"
+            fill="#EC4899"
+            initial={{ scale: 0 }}
+            animate={{ scale: [1, 1.3, 1] }}
+            transition={{
+              scale: { duration: 1, repeat: Infinity, delay: i * 0.1 },
+              default: { delay: i * 0.05 }
+            }}
+          />
+        ))}
+        <defs>
+          <linearGradient id="boneGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" stopColor="#8B5CF6" />
+            <stop offset="100%" stopColor="#EC4899" />
+          </linearGradient>
+        </defs>
+      </svg>
+    </div>
+  );
+}
+export function EmotionFaceDemo() {
+  const emotions = [
+    { emoji: '😊', label: 'Happy', color: 'from-yellow-400 to-orange-400' },
+    { emoji: '😢', label: 'Sad', color: 'from-blue-400 to-indigo-400' },
+    { emoji: '😠', label: 'Angry', color: 'from-red-400 to-rose-400' },
+    { emoji: '😲', label: 'Surprise', color: 'from-purple-400 to-pink-400' },
+    { emoji: '😐', label: 'Neutral', color: 'from-gray-400 to-slate-400' },
+  ];
+  const [currentEmotion, setCurrentEmotion] = React.useState(0);
+  React.useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentEmotion((prev) => (prev + 1) % emotions.length);
+    }, 2000);
+    return () => clearInterval(interval);
+  }, []);
+  const emotion = emotions[currentEmotion];
+  return (
+    <div className="relative w-full max-w-sm mx-auto">
+      <motion.div
+        key={currentEmotion}
+        initial={{ scale: 0.8, opacity: 0 }}
+        animate={{ scale: 1, opacity: 1 }}
+        exit={{ scale: 0.8, opacity: 0 }}
+        className="aspect-square bg-gradient-to-br from-slate-800 to-slate-900 rounded-3xl border border-white/10 flex flex-col items-center justify-center"
+      >
+        <motion.div
+          className="text-8xl mb-4"
+          animate={{ scale: [1, 1.1, 1] }}
+          transition={{ duration: 1, repeat: Infinity }}
+        >
+          {emotion.emoji}
+        </motion.div>
+        <motion.div
+          className={`px-6 py-2 rounded-full bg-gradient-to-r ${emotion.color} text-white font-bold text-lg`}
+          initial={{ y: 20, opacity: 0 }}
+          animate={{ y: 0, opacity: 1 }}
+          transition={{ delay: 0.2 }}
+        >
+          {emotion.label}
+        </motion.div>
+      </motion.div>
+      {/* Confidence Bars */}
+      <div className="mt-6 space-y-2">
+        {emotions.map((e, i) => (
+          <div key={i} className="flex items-center gap-3">
+            <span className="text-xl w-8">{e.emoji}</span>
+            <div className="flex-1 h-3 bg-white/10 rounded-full overflow-hidden">
+              <motion.div
+                className={`h-full bg-gradient-to-r ${e.color}`}
+                initial={{ width: 0 }}
+                animate={{ width: i === currentEmotion ? '95%' : `${Math.random() * 30 + 5}%` }}
+                transition={{ duration: 0.5 }}
+              />
+            </div>
+            <span className="text-white/60 text-sm w-12 text-right">
+              {i === currentEmotion ? '95%' : `${Math.floor(Math.random() * 20 + 5)}%`}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

src/components/lessons/Chapter1Slides.jsx ADDED Viewed

	@@ -0,0 +1,280 @@

+import React from 'react';
+import { motion } from 'framer-motion';
+import { Eye, Car, Bot, Camera, Zap, Target, CheckCircle2 } from 'lucide-react';
+import ClickReveal from './ClickReveal';
+import KeyTermBadge from './KeyTermBadge';
+import { BoundingBoxDemo } from './AnimatedDiagram';
+export const chapter1Slides = [
+  // Slide 1: What is Object Detection?
+  {
+    content: (
+      <div className="space-y-10">
+        <motion.div
+          initial={{ scale: 0 }}
+          animate={{ scale: 1 }}
+          transition={{ type: "spring", delay: 0.2 }}
+          className="w-28 h-28 mx-auto rounded-3xl bg-gradient-to-br from-blue-500 to-cyan-500 flex items-center justify-center shadow-2xl shadow-blue-500/30"
+        >
+          <Eye className="w-14 h-14 text-white" />
+        </motion.div>
+        <div className="text-center mb-8">
+          <h1 className="text-5xl md:text-6xl font-black text-white mb-6 leading-tight">
+            What is Object Detection?
+          </h1>
+          <p className="text-xl text-white/70">Chapter 1 • Slide 1 of 5</p>
+        </div>
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.4 }}
+          className="bg-white/5 backdrop-blur-xl rounded-3xl p-10 border border-white/10"
+        >
+          <p className="text-2xl text-white/90 leading-relaxed mb-8">
+            <KeyTermBadge term="Object Detection" definition="A computer vision technique that identifies and locates objects in images or videos" color="cyan" /> is like giving a computer the power to <span className="text-cyan-400 font-semibold">see and identify things</span> in pictures and videos — just like you can!
+          </p>
+          <div className="flex items-center justify-center gap-8 my-8">
+            <div className="text-7xl">👁️</div>
+            <div className="text-5xl">➡️</div>
+            <div className="text-7xl">🤖</div>
+          </div>
+          <p className="text-xl text-white/70 leading-relaxed">
+            When you look at a photo, you instantly know "that's a dog" or "that's a car." Object detection teaches computers to do the same thing automatically!
+          </p>
+        </motion.div>
+        <ClickReveal title="🤔 Fun Fact!" color="blue">
+          <p className="text-lg">Your brain processes images in just 13 milliseconds — but modern AI can now detect objects almost as fast!</p>
+        </ClickReveal>
+      </div>
+    )
+  },
+  // Slide 2: How Computers See Objects
+  {
+    content: (
+      <div className="space-y-10">
+        <div className="text-center mb-8">
+          <h1 className="text-5xl md:text-6xl font-black text-white mb-6">
+            How Computers See Objects
+          </h1>
+          <p className="text-2xl text-white/70">Bounding Boxes & Labels</p>
+        </div>
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.3 }}
+          className="mb-10"
+        >
+          <BoundingBoxDemo />
+        </motion.div>
+        <div className="grid md:grid-cols-2 gap-6">
+          <motion.div
+            initial={{ opacity: 0, x: -20 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ delay: 0.5 }}
+            className="bg-white/5 backdrop-blur-xl rounded-3xl p-8 border border-white/10"
+          >
+            <div className="text-5xl mb-4">📦</div>
+            <h3 className="text-2xl font-bold text-white mb-4 flex items-center gap-2">
+              <Target className="w-7 h-7 text-cyan-400" />
+              Bounding Boxes
+            </h3>
+            <p className="text-white/80 leading-relaxed text-lg">
+              A <KeyTermBadge term="Bounding Box" definition="A rectangle drawn around an object to show where it is in the image" color="cyan" /> is a rectangle that the computer draws around each object it finds. It's like drawing a box around something to say "Look here!"
+            </p>
+          </motion.div>
+          <motion.div
+            initial={{ opacity: 0, x: 20 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ delay: 0.6 }}
+            className="bg-white/5 backdrop-blur-xl rounded-3xl p-8 border border-white/10"
+          >
+            <div className="text-5xl mb-4">⚡</div>
+            <h3 className="text-2xl font-bold text-white mb-4 flex items-center gap-2">
+              <Zap className="w-7 h-7 text-yellow-400" />
+              Confidence Score
+            </h3>
+            <p className="text-white/80 leading-relaxed text-lg">
+              The computer also gives a <KeyTermBadge term="Confidence Score" definition="A percentage showing how sure the AI is about its prediction" color="yellow" /> — like saying "I'm 98% sure this is a car!"
+            </p>
+          </motion.div>
+        </div>
+      </div>
+    )
+  },
+  // Slide 3: Real-World Examples
+  {
+    content: (
+      <div className="space-y-8">
+        <div className="text-center">
+          <h1 className="text-4xl md:text-5xl font-black text-white mb-4">
+            Real-World Examples
+          </h1>
+          <p className="text-xl text-white/70">Object detection is everywhere!</p>
+        </div>
+        <div className="grid gap-6">
+          {[
+            {
+              icon: Car,
+              title: "Self-Driving Cars",
+              description: "Cars use object detection to spot other vehicles, pedestrians, traffic signs, and road markings to drive safely.",
+              color: "from-blue-500 to-cyan-500"
+            },
+            {
+              icon: Bot,
+              title: "Robots & Automation",
+              description: "Factory robots detect products on assembly lines to pick, sort, and package items automatically.",
+              color: "from-purple-500 to-pink-500"
+            },
+            {
+              icon: Camera,
+              title: "Phone Cameras",
+              description: "Your phone's camera detects faces to focus properly and apply cool filters!",
+              color: "from-emerald-500 to-teal-500"
+            }
+          ].map((item, i) => (
+            <motion.div
+              key={i}
+              initial={{ opacity: 0, x: -30 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ delay: 0.3 + i * 0.15 }}
+              className="bg-white/5 backdrop-blur-xl rounded-2xl p-6 border border-white/10 flex items-start gap-4"
+            >
+              <div className={`w-14 h-14 rounded-xl bg-gradient-to-br ${item.color} flex items-center justify-center flex-shrink-0`}>
+                <item.icon className="w-7 h-7 text-white" />
+              </div>
+              <div>
+                <h3 className="text-xl font-bold text-white mb-2">{item.title}</h3>
+                <p className="text-white/70">{item.description}</p>
+              </div>
+            </motion.div>
+          ))}
+        </div>
+        <ClickReveal title="🚗 Did you know?" color="blue">
+          <p>A single self-driving car processes about 1 terabyte of data per day — that's like watching 500 hours of HD video!</p>
+        </ClickReveal>
+      </div>
+    )
+  },
+  // Slide 4: How Detection Works
+  {
+    content: (
+      <div className="space-y-8">
+        <div className="text-center">
+          <h1 className="text-4xl md:text-5xl font-black text-white mb-4">
+            How Detection Works
+          </h1>
+          <p className="text-xl text-white/70">The magic behind the scenes</p>
+        </div>
+        <div className="relative">
+          {/* Process Steps */}
+          <div className="space-y-6">
+            {[
+              { step: 1, title: "Input Image", desc: "The computer receives a photo or video frame", icon: "📷" },
+              { step: 2, title: "Grid Division", desc: "The image is split into a grid of small cells", icon: "🔲" },
+              { step: 3, title: "Feature Extraction", desc: "AI looks for patterns, edges, and shapes", icon: "🔍" },
+              { step: 4, title: "Predictions", desc: "Each cell predicts what objects might be there", icon: "🎯" },
+              { step: 5, title: "Output", desc: "Final boxes and labels are drawn on the image", icon: "✅" }
+            ].map((item, i) => (
+              <motion.div
+                key={i}
+                initial={{ opacity: 0, x: -30 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ delay: 0.2 + i * 0.1 }}
+                className="flex items-center gap-4"
+              >
+                <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 border border-cyan-500/30 flex items-center justify-center text-2xl">
+                  {item.icon}
+                </div>
+                <div className="flex-1 bg-white/5 rounded-2xl p-4 border border-white/10">
+                  <div className="flex items-center gap-2 mb-1">
+                    <span className="w-6 h-6 rounded-full bg-cyan-500 text-white text-sm font-bold flex items-center justify-center">{item.step}</span>
+                    <h4 className="font-bold text-white">{item.title}</h4>
+                  </div>
+                  <p className="text-white/70 text-sm">{item.desc}</p>
+                </div>
+              </motion.div>
+            ))}
+          </div>
+        </div>
+        <ClickReveal title="⚡ Speed Matters!" color="yellow">
+          <p>YOLO (You Only Look Once) can process 45 frames per second — faster than your eyes can blink!</p>
+        </ClickReveal>
+      </div>
+    )
+  },
+  // Slide 5: Chapter Summary
+  {
+    content: (
+      <div className="space-y-10">
+        <div className="text-center mb-8">
+          <div className="text-7xl mb-6">🎉</div>
+          <h1 className="text-5xl md:text-6xl font-black text-white mb-6">
+            Chapter Complete!
+          </h1>
+          <p className="text-2xl text-white/70">You've mastered Object Detection</p>
+        </div>
+        <div className="bg-gradient-to-br from-blue-500/20 to-cyan-500/20 rounded-3xl p-10 border border-cyan-500/30">
+          <h3 className="text-2xl font-bold text-white mb-6 flex items-center gap-3">
+            <CheckCircle2 className="w-8 h-8 text-cyan-400" />
+            What You Learned
+          </h3>
+          <div className="grid gap-4">
+            {[
+              { icon: "👁️", text: "Object detection finds and identifies things in images" },
+              { icon: "📦", text: "Bounding boxes show where objects are located" },
+              { icon: "💯", text: "Confidence scores tell us how sure the AI is" },
+              { icon: "🚗", text: "This technology powers cars, robots, and phones!" }
+            ].map((item, i) => (
+              <motion.div
+                key={i}
+                initial={{ opacity: 0, x: -20 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ delay: 0.3 + i * 0.1 }}
+                className="flex items-center gap-4 bg-white/5 rounded-2xl p-5"
+              >
+                <div className="text-4xl">{item.icon}</div>
+                <p className="text-white/90 text-lg flex-1">{item.text}</p>
+              </motion.div>
+            ))}
+          </div>
+        </div>
+        <div className="grid md:grid-cols-3 gap-6">
+          <div className="bg-white/5 rounded-2xl p-6 text-center border border-white/10">
+            <div className="text-4xl mb-3">🎯</div>
+            <div className="text-3xl font-bold text-cyan-400">5</div>
+            <div className="text-white/60">Slides Completed</div>
+          </div>
+          <div className="bg-white/5 rounded-2xl p-6 text-center border border-white/10">
+            <div className="text-4xl mb-3">🧠</div>
+            <div className="text-3xl font-bold text-blue-400">80+</div>
+            <div className="text-white/60">Object Classes</div>
+          </div>
+          <div className="bg-white/5 rounded-2xl p-6 text-center border border-white/10">
+            <div className="text-4xl mb-3">⚡</div>
+            <div className="text-3xl font-bold text-purple-400">45</div>
+            <div className="text-white/60">FPS Speed</div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+];

src/components/lessons/Chapter2Slides.jsx ADDED Viewed

	@@ -0,0 +1,396 @@

+import React from 'react';
+import { motion } from 'framer-motion';
+import { Activity, Dumbbell, Gamepad2, Stethoscope, Play, CheckCircle2 } from 'lucide-react';
+import ClickReveal from './ClickReveal';
+import KeyTermBadge from './KeyTermBadge';
+import { PoseSkeletonDemo } from './AnimatedDiagram';
+export const chapter2Slides = [
+  // Slide 1: What is Pose Estimation?
+  {
+    content: (
+      <div className="space-y-8">
+        <motion.div
+          initial={{ scale: 0 }}
+          animate={{ scale: 1 }}
+          transition={{ type: "spring", delay: 0.2 }}
+          className="w-24 h-24 mx-auto rounded-3xl bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center shadow-2xl shadow-purple-500/30"
+        >
+          <Activity className="w-12 h-12 text-white" />
+        </motion.div>
+        <div className="text-center">
+          <h1 className="text-4xl md:text-5xl font-black text-white mb-4">
+            What is Pose Estimation?
+          </h1>
+          <p className="text-xl text-white/70">Chapter 2 • Slide 1 of 5</p>
+        </div>
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.4 }}
+          className="bg-white/5 backdrop-blur-xl rounded-3xl p-8 border border-white/10"
+        >
+          <p className="text-xl text-white/90 leading-relaxed mb-6">
+            <KeyTermBadge term="Pose Estimation" definition="Technology that detects human body positions by identifying key body points" color="purple" /> is like teaching a computer to understand <span className="text-purple-400 font-semibold">body language</span>!
+          </p>
+          <p className="text-lg text-white/70 leading-relaxed">
+            It finds important points on your body — like your nose, shoulders, elbows, and knees — and connects them to create a "skeleton" that shows how you're moving.
+          </p>
+        </motion.div>
+        <ClickReveal title="🎮 Cool Connection!" color="purple">
+          <p>Video games like Just Dance use pose estimation to track your dance moves in real-time!</p>
+        </ClickReveal>
+      </div>
+    )
+  },
+  // Slide 2: Keypoints and Skeleton Lines
+  {
+    content: (
+      <div className="space-y-8">
+        <div className="text-center">
+          <h1 className="text-4xl md:text-5xl font-black text-white mb-4">
+            Keypoints & Skeleton
+          </h1>
+          <p className="text-xl text-white/70">Building a digital body map</p>
+        </div>
+        <div className="grid md:grid-cols-2 gap-6">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.3 }}
+          >
+            <PoseSkeletonDemo />
+          </motion.div>
+          <div className="space-y-4">
+            <motion.div
+              initial={{ opacity: 0, x: 20 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ delay: 0.4 }}
+              className="bg-white/5 backdrop-blur-xl rounded-2xl p-5 border border-white/10"
+            >
+              <h3 className="text-xl font-bold text-white mb-3 flex items-center gap-2">
+                <span className="w-3 h-3 rounded-full bg-pink-500" />
+                Keypoints
+              </h3>
+              <p className="text-white/80">
+                <KeyTermBadge term="Keypoints" definition="Specific body locations like joints that the AI tracks" color="pink" /> are the important spots on your body that the AI tracks — typically 17 points including your nose, eyes, shoulders, elbows, wrists, hips, knees, and ankles.
+              </p>
+            </motion.div>
+            <motion.div
+              initial={{ opacity: 0, x: 20 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ delay: 0.5 }}
+              className="bg-white/5 backdrop-blur-xl rounded-2xl p-5 border border-white/10"
+            >
+              <h3 className="text-xl font-bold text-white mb-3 flex items-center gap-2">
+                <div className="w-8 h-0.5 bg-gradient-to-r from-purple-500 to-pink-500" />
+                Skeleton Lines
+              </h3>
+              <p className="text-white/80">
+                Lines connect the keypoints to show your body structure — like a stick figure that moves exactly like you!
+              </p>
+            </motion.div>
+            <motion.div
+              initial={{ opacity: 0, x: 20 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ delay: 0.6 }}
+              className="bg-gradient-to-br from-purple-500/20 to-pink-500/20 rounded-2xl p-5 border border-purple-500/30"
+            >
+              <p className="text-white/90 font-medium">
+                💡 Each keypoint has X, Y coordinates (position) and sometimes a confidence score!
+              </p>
+            </motion.div>
+          </div>
+        </div>
+      </div>
+    )
+  },
+  // Slide 3: Real-World Uses
+  {
+    content: (
+      <div className="space-y-8">
+        <div className="text-center">
+          <h1 className="text-4xl md:text-5xl font-black text-white mb-4">
+            Real-World Uses
+          </h1>
+          <p className="text-xl text-white/70">Pose estimation helps everywhere!</p>
+        </div>
+        <div className="grid gap-6">
+          {[
+            {
+              icon: Dumbbell,
+              title: "Sports & Fitness",
+              description: "Coaches analyze athlete movements to improve technique. Fitness apps check if you're doing exercises correctly!",
+              color: "from-purple-500 to-pink-500"
+            },
+            {
+              icon: Gamepad2,
+              title: "Gaming & VR",
+              description: "Motion-controlled games track your body to make you the controller. Dance games know exactly how you move!",
+              color: "from-blue-500 to-purple-500"
+            },
+            {
+              icon: Stethoscope,
+              title: "Healthcare",
+              description: "Physical therapists use it to track patient recovery. It can even help detect early signs of movement disorders.",
+              color: "from-emerald-500 to-teal-500"
+            }
+          ].map((item, i) => (
+            <motion.div
+              key={i}
+              initial={{ opacity: 0, x: -30 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ delay: 0.3 + i * 0.15 }}
+              className="bg-white/5 backdrop-blur-xl rounded-2xl p-6 border border-white/10 flex items-start gap-4"
+            >
+              <div className={`w-14 h-14 rounded-xl bg-gradient-to-br ${item.color} flex items-center justify-center flex-shrink-0`}>
+                <item.icon className="w-7 h-7 text-white" />
+              </div>
+              <div>
+                <h3 className="text-xl font-bold text-white mb-2">{item.title}</h3>
+                <p className="text-white/70">{item.description}</p>
+              </div>
+            </motion.div>
+          ))}
+        </div>
+        <ClickReveal title="🏃 Amazing Fact!" color="purple">
+          <p>Olympic coaches use pose estimation to analyze athletes frame-by-frame, finding improvements invisible to the human eye!</p>
+        </ClickReveal>
+      </div>
+    )
+  },
+  // Slide 4: Animated Stick Figure
+  {
+    content: (
+      <div className="space-y-8">
+        <div className="text-center">
+          <h1 className="text-4xl md:text-5xl font-black text-white mb-4">
+            See It Move!
+          </h1>
+          <p className="text-xl text-white/70">Watch pose estimation in action</p>
+        </div>
+        <AnimatedStickFigure />
+        <div className="grid md:grid-cols-3 gap-4">
+          {[
+            { label: "Real-time Tracking", icon: "⚡" },
+            { label: "17 Keypoints", icon: "📍" },
+            { label: "Smooth Motion", icon: "🌊" }
+          ].map((item, i) => (
+            <motion.div
+              key={i}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.5 + i * 0.1 }}
+              className="bg-white/5 rounded-xl p-4 border border-white/10 text-center"
+            >
+              <span className="text-2xl">{item.icon}</span>
+              <p className="text-white/80 mt-2 font-medium">{item.label}</p>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    )
+  },
+  // Slide 5: Chapter Summary
+  {
+    content: (
+      <div className="space-y-10">
+        <div className="text-center mb-8">
+          <div className="text-7xl mb-6">🎊</div>
+          <h1 className="text-5xl md:text-6xl font-black text-white mb-6">
+            Chapter Complete!
+          </h1>
+          <p className="text-2xl text-white/70">You've mastered Pose Estimation</p>
+        </div>
+        <div className="bg-gradient-to-br from-purple-500/20 to-pink-500/20 rounded-3xl p-10 border border-purple-500/30">
+          <h3 className="text-2xl font-bold text-white mb-6 flex items-center gap-3">
+            <CheckCircle2 className="w-8 h-8 text-purple-400" />
+            Key Takeaways
+          </h3>
+          <div className="grid gap-4">
+            {[
+              { icon: "🎯", text: "Pose estimation tracks body movements using keypoints" },
+              { icon: "🦴", text: "17 keypoints create a full body skeleton" },
+              { icon: "⚽", text: "Used in sports, gaming, healthcare, and more" },
+              { icon: "⚡", text: "Works in real-time for interactive applications" }
+            ].map((item, i) => (
+              <motion.div
+                key={i}
+                initial={{ opacity: 0, x: -20 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ delay: 0.3 + i * 0.1 }}
+                className="flex items-center gap-4 bg-white/5 rounded-2xl p-5"
+              >
+                <div className="text-4xl">{item.icon}</div>
+                <p className="text-white/90 text-lg flex-1">{item.text}</p>
+              </motion.div>
+            ))}
+          </div>
+        </div>
+        <div className="grid md:grid-cols-3 gap-6">
+          <div className="bg-white/5 rounded-2xl p-6 text-center border border-white/10">
+            <div className="text-4xl mb-3">🎯</div>
+            <div className="text-3xl font-bold text-purple-400">5</div>
+            <div className="text-white/60">Slides Completed</div>
+          </div>
+          <div className="bg-white/5 rounded-2xl p-6 text-center border border-white/10">
+            <div className="text-4xl mb-3">📍</div>
+            <div className="text-3xl font-bold text-pink-400">17</div>
+            <div className="text-white/60">Body Keypoints</div>
+          </div>
+          <div className="bg-white/5 rounded-2xl p-6 text-center border border-white/10">
+            <div className="text-4xl mb-3">👥</div>
+            <div className="text-3xl font-bold text-violet-400">Multi</div>
+            <div className="text-white/60">Person Tracking</div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+];
+function AnimatedStickFigure() {
+  const [pose, setPose] = React.useState(0);
+  const poses = ['standing', 'waving'];
+  React.useEffect(() => {
+    const interval = setInterval(() => {
+      setPose(p => (p + 1) % poses.length);
+    }, 2000);
+    return () => clearInterval(interval);
+  }, []);
+  const poseConfigs = {
+    standing: {
+      head: { x: 50, y: 15 },
+      neck: { x: 50, y: 22 },
+      lshoulder: { x: 38, y: 25 },
+      rshoulder: { x: 62, y: 25 },
+      lelbow: { x: 32, y: 38 },
+      relbow: { x: 68, y: 38 },
+      lwrist: { x: 30, y: 50 },
+      rwrist: { x: 70, y: 50 },
+      hip: { x: 50, y: 50 },
+      lhip: { x: 42, y: 52 },
+      rhip: { x: 58, y: 52 },
+      lknee: { x: 42, y: 70 },
+      rknee: { x: 58, y: 70 },
+      lankle: { x: 42, y: 88 },
+      rankle: { x: 58, y: 88 }
+    },
+    waving: {
+      head: { x: 50, y: 15 },
+      neck: { x: 50, y: 22 },
+      lshoulder: { x: 38, y: 25 },
+      rshoulder: { x: 62, y: 25 },
+      lelbow: { x: 32, y: 38 },
+      relbow: { x: 75, y: 15 },
+      lwrist: { x: 30, y: 50 },
+      rwrist: { x: 85, y: 8 },
+      hip: { x: 50, y: 50 },
+      lhip: { x: 42, y: 52 },
+      rhip: { x: 58, y: 52 },
+      lknee: { x: 42, y: 70 },
+      rknee: { x: 58, y: 70 },
+      lankle: { x: 42, y: 88 },
+      rankle: { x: 58, y: 88 }
+    }
+  };
+  const currentPose = poseConfigs[poses[pose]];
+  const bones = [
+    ['head', 'neck'],
+    ['neck', 'lshoulder'],
+    ['neck', 'rshoulder'],
+    ['lshoulder', 'lelbow'],
+    ['rshoulder', 'relbow'],
+    ['lelbow', 'lwrist'],
+    ['relbow', 'rwrist'],
+    ['neck', 'hip'],
+    ['hip', 'lhip'],
+    ['hip', 'rhip'],
+    ['lhip', 'lknee'],
+    ['rhip', 'rknee'],
+    ['lknee', 'lankle'],
+    ['rknee', 'rankle'],
+  ];
+  return (
+    <div className="relative max-w-md mx-auto">
+      <div className="aspect-[3/4] bg-gradient-to-br from-purple-900/50 to-pink-900/50 rounded-3xl overflow-hidden border border-white/10">
+        <svg className="w-full h-full" viewBox="0 0 100 100">
+          {/* Bones */}
+          {bones.map(([from, to], i) => (
+            <motion.line
+              key={i}
+              x1={currentPose[from].x}
+              y1={currentPose[from].y}
+              x2={currentPose[to].x}
+              y2={currentPose[to].y}
+              stroke="url(#poseGradient)"
+              strokeWidth="3"
+              strokeLinecap="round"
+              initial={false}
+              animate={{
+                x1: currentPose[from].x,
+                y1: currentPose[from].y,
+                x2: currentPose[to].x,
+                y2: currentPose[to].y
+              }}
+              transition={{ type: "spring", stiffness: 100, damping: 15 }}
+            />
+          ))}
+          {/* Keypoints */}
+          {Object.entries(currentPose).map(([key, pos], i) => (
+            <motion.circle
+              key={key}
+              r="4"
+              fill="#EC4899"
+              initial={false}
+              animate={{ cx: pos.x, cy: pos.y }}
+              transition={{ type: "spring", stiffness: 100, damping: 15 }}
+            />
+          ))}
+          <defs>
+            <linearGradient id="poseGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+              <stop offset="0%" stopColor="#8B5CF6" />
+              <stop offset="100%" stopColor="#EC4899" />
+            </linearGradient>
+          </defs>
+        </svg>
+      </div>
+      {/* Pose Label */}
+      <motion.div
+        key={pose}
+        initial={{ opacity: 0, y: 10 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="mt-4 text-center"
+      >
+        <span className="px-6 py-2 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 text-white font-bold text-lg">
+          {poses[pose].charAt(0).toUpperCase() + poses[pose].slice(1)}
+        </span>
+      </motion.div>
+    </div>
+  );
+}

src/components/lessons/Chapter3Slides.jsx ADDED Viewed

	@@ -0,0 +1,306 @@

+import React from 'react';
+import { motion } from 'framer-motion';
+import { Smile, Brain, AlertTriangle, Gamepad2, Accessibility, Heart, Shield, CheckCircle2 } from 'lucide-react';
+import ClickReveal from './ClickReveal';
+import KeyTermBadge from './KeyTermBadge';
+import { EmotionFaceDemo } from './AnimatedDiagram';
+export const chapter3Slides = [
+  // Slide 1: What is Emotion Recognition?
+  {
+    content: (
+      <div className="space-y-8">
+        <motion.div
+          initial={{ scale: 0 }}
+          animate={{ scale: 1 }}
+          transition={{ type: "spring", delay: 0.2 }}
+          className="w-24 h-24 mx-auto rounded-3xl bg-gradient-to-br from-emerald-500 to-teal-500 flex items-center justify-center shadow-2xl shadow-emerald-500/30"
+        >
+          <Smile className="w-12 h-12 text-white" />
+        </motion.div>
+        <div className="text-center">
+          <h1 className="text-4xl md:text-5xl font-black text-white mb-4">
+            What is Emotion Recognition?
+          </h1>
+          <p className="text-xl text-white/70">Chapter 3 • Slide 1 of 5</p>
+        </div>
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.4 }}
+          className="bg-white/5 backdrop-blur-xl rounded-3xl p-8 border border-white/10"
+        >
+          <p className="text-xl text-white/90 leading-relaxed mb-6">
+            <KeyTermBadge term="Emotion Recognition" definition="AI technology that identifies human emotions from facial expressions" color="green" /> teaches computers to understand how people are feeling by looking at their faces!
+          </p>
+          <p className="text-lg text-white/70 leading-relaxed">
+            Just like you can tell when a friend is happy, sad, or surprised, AI can learn to read these same expressions — and it's getting really good at it!
+          </p>
+        </motion.div>
+        <ClickReveal title="🧠 Mind-Blowing Fact!" color="green">
+          <p>Humans can recognize emotions in just 100 milliseconds — that's faster than the blink of an eye! AI is learning to match this speed.</p>
+        </ClickReveal>
+      </div>
+    )
+  },
+  // Slide 2: The 7 Emotions
+  {
+    content: (
+      <div className="space-y-8">
+        <div className="text-center">
+          <h1 className="text-4xl md:text-5xl font-black text-white mb-4">
+            The 7 Basic Emotions
+          </h1>
+          <p className="text-xl text-white/70">What AI learns to detect</p>
+        </div>
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+          {[
+            { emoji: "😊", label: "Happy", color: "from-yellow-400 to-orange-400" },
+            { emoji: "😢", label: "Sad", color: "from-blue-400 to-indigo-400" },
+            { emoji: "😠", label: "Angry", color: "from-red-400 to-rose-400" },
+            { emoji: "😨", label: "Fear", color: "from-purple-400 to-violet-400" },
+            { emoji: "😲", label: "Surprise", color: "from-pink-400 to-fuchsia-400" },
+            { emoji: "🤢", label: "Disgust", color: "from-green-400 to-lime-400" },
+            { emoji: "😐", label: "Neutral", color: "from-gray-400 to-slate-400" }
+          ].map((emotion, i) => (
+            <motion.div
+              key={i}
+              initial={{ opacity: 0, scale: 0.8 }}
+              animate={{ opacity: 1, scale: 1 }}
+              transition={{ delay: 0.2 + i * 0.08 }}
+              whileHover={{ scale: 1.05, y: -5 }}
+              className="bg-white/5 backdrop-blur-xl rounded-2xl p-4 border border-white/10 text-center cursor-pointer"
+            >
+              <motion.span
+                className="text-5xl block mb-2"
+                animate={{ rotate: [0, -5, 5, 0] }}
+                transition={{ duration: 2, repeat: Infinity, delay: i * 0.2 }}
+              >
+                {emotion.emoji}
+              </motion.span>
+              <span className={`inline-block px-3 py-1 rounded-full bg-gradient-to-r ${emotion.color} text-white font-bold text-sm`}>
+                {emotion.label}
+              </span>
+            </motion.div>
+          ))}
+          <motion.div
+            initial={{ opacity: 0, scale: 0.8 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ delay: 0.8 }}
+            className="bg-gradient-to-br from-emerald-500/20 to-teal-500/20 backdrop-blur-xl rounded-2xl p-4 border border-emerald-500/30 flex items-center justify-center"
+          >
+            <p className="text-white/80 text-sm font-medium text-center">
+              These 7 emotions are called <KeyTermBadge term="FER" definition="Facial Expression Recognition - the standard set of 7 emotions used in AI" color="green" /> emotions!
+            </p>
+          </motion.div>
+        </div>
+        <ClickReveal title="🌍 Universal Expressions" color="green">
+          <p>These 7 emotions are recognized across all cultures! A smile means happiness whether you're in Tokyo, New York, or Cairo.</p>
+        </ClickReveal>
+      </div>
+    )
+  },
+  // Slide 3: How the Model Reads Faces
+  {
+    content: (
+      <div className="space-y-8">
+        <div className="text-center">
+          <h1 className="text-4xl md:text-5xl font-black text-white mb-4">
+            How AI Reads Faces
+          </h1>
+          <p className="text-xl text-white/70">The technical magic explained</p>
+        </div>
+        <div className="grid md:grid-cols-2 gap-8">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.3 }}
+          >
+            <EmotionFaceDemo />
+          </motion.div>
+          <div className="space-y-4">
+            <motion.div
+              initial={{ opacity: 0, x: 20 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ delay: 0.4 }}
+              className="bg-white/5 backdrop-blur-xl rounded-2xl p-5 border border-white/10"
+            >
+              <h3 className="text-xl font-bold text-white mb-3">48×48 Pixels</h3>
+              <p className="text-white/80">
+                The AI looks at tiny <KeyTermBadge term="Grayscale" definition="Black and white image without color - makes processing faster" color="green" /> images — just 48 by 48 pixels! That's smaller than most emojis.
+              </p>
+            </motion.div>
+            <motion.div
+              initial={{ opacity: 0, x: 20 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ delay: 0.5 }}
+              className="bg-white/5 backdrop-blur-xl rounded-2xl p-5 border border-white/10"
+            >
+              <h3 className="text-xl font-bold text-white mb-3">Pattern Recognition</h3>
+              <p className="text-white/80">
+                The model looks for patterns: raised eyebrows = surprise, frown + lowered brows = anger, upturned mouth = happy!
+              </p>
+            </motion.div>
+            <motion.div
+              initial={{ opacity: 0, x: 20 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ delay: 0.6 }}
+              className="bg-white/5 backdrop-blur-xl rounded-2xl p-5 border border-white/10"
+            >
+              <h3 className="text-xl font-bold text-white mb-3">Confidence Scores</h3>
+              <p className="text-white/80">
+                The AI gives a <KeyTermBadge term="Classification" definition="Putting something into a category - like sorting emotions" color="green" /> score for each emotion, like "85% happy, 10% neutral, 5% surprise."
+              </p>
+            </motion.div>
+          </div>
+        </div>
+      </div>
+    )
+  },
+  // Slide 4: Real-World Uses
+  {
+    content: (
+      <div className="space-y-8">
+        <div className="text-center">
+          <h1 className="text-4xl md:text-5xl font-black text-white mb-4">
+            Real-World Applications
+          </h1>
+          <p className="text-xl text-white/70">Where emotion AI helps</p>
+        </div>
+        <div className="grid gap-6">
+          {[
+            {
+              icon: Gamepad2,
+              title: "Video Games",
+              description: "Games can adapt to your mood! If you look frustrated, the game might offer hints. If you're having fun, it might increase the challenge.",
+              color: "from-purple-500 to-pink-500"
+            },
+            {
+              icon: Heart,
+              title: "Smart Assistants",
+              description: "Virtual assistants might change their tone based on your mood — being more upbeat when you're sad or calmer when you're stressed.",
+              color: "from-red-500 to-rose-500"
+            },
+            {
+              icon: Accessibility,
+              title: "Accessibility",
+              description: "Helps people with autism or other conditions understand facial expressions better through real-time feedback.",
+              color: "from-emerald-500 to-teal-500"
+            }
+          ].map((item, i) => (
+            <motion.div
+              key={i}
+              initial={{ opacity: 0, x: -30 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ delay: 0.3 + i * 0.15 }}
+              className="bg-white/5 backdrop-blur-xl rounded-2xl p-6 border border-white/10 flex items-start gap-4"
+            >
+              <div className={`w-14 h-14 rounded-xl bg-gradient-to-br ${item.color} flex items-center justify-center flex-shrink-0`}>
+                <item.icon className="w-7 h-7 text-white" />
+              </div>
+              <div>
+                <h3 className="text-xl font-bold text-white mb-2">{item.title}</h3>
+                <p className="text-white/70">{item.description}</p>
+              </div>
+            </motion.div>
+          ))}
+        </div>
+        <ClickReveal title="🎬 In Movies!" color="green">
+          <p>Film studios use emotion recognition to test audience reactions to trailers and scenes before movies are released!</p>
+        </ClickReveal>
+      </div>
+    )
+  },
+  // Slide 5: Chapter Summary
+  {
+    content: (
+      <div className="space-y-10">
+        <div className="text-center mb-8">
+          <div className="text-7xl mb-6">🌟</div>
+          <h1 className="text-5xl md:text-6xl font-black text-white mb-6">
+            Chapter Complete!
+          </h1>
+          <p className="text-2xl text-white/70">You've mastered Emotion Recognition</p>
+        </div>
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.3 }}
+          className="bg-gradient-to-br from-amber-500/20 to-orange-500/20 rounded-3xl p-8 border border-amber-500/30"
+        >
+          <div className="flex items-start gap-4">
+            <AlertTriangle className="w-8 h-8 text-amber-400 flex-shrink-0" />
+            <div>
+              <h3 className="text-xl font-bold text-white mb-2">Remember</h3>
+              <p className="text-white/80 text-lg">
+                Just because AI <em>can</em> do something doesn't mean it <em>should</em>. Always use emotion recognition responsibly!
+              </p>
+            </div>
+          </div>
+        </motion.div>
+        <div className="bg-gradient-to-br from-emerald-500/20 to-teal-500/20 rounded-3xl p-10 border border-emerald-500/30">
+          <h3 className="text-2xl font-bold text-white mb-6 flex items-center gap-3">
+            <CheckCircle2 className="w-8 h-8 text-emerald-400" />
+            What You Learned
+          </h3>
+          <div className="grid gap-4">
+            {[
+              { icon: "😊", text: "Emotion AI detects 7 basic facial expressions" },
+              { icon: "🖼️", text: "It uses small grayscale images (48×48 pixels)" },
+              { icon: "🎮", text: "Applications include games, assistants, and accessibility" },
+              { icon: "⚖️", text: "Ethics and privacy are crucial considerations" }
+            ].map((item, i) => (
+              <motion.div
+                key={i}
+                initial={{ opacity: 0, x: -20 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ delay: 0.5 + i * 0.1 }}
+                className="flex items-center gap-4 bg-white/5 rounded-2xl p-5"
+              >
+                <div className="text-4xl">{item.icon}</div>
+                <p className="text-white/90 text-lg flex-1">{item.text}</p>
+              </motion.div>
+            ))}
+          </div>
+        </div>
+        <div className="grid md:grid-cols-3 gap-6">
+          <div className="bg-white/5 rounded-2xl p-6 text-center border border-white/10">
+            <div className="text-4xl mb-3">🎯</div>
+            <div className="text-3xl font-bold text-emerald-400">5</div>
+            <div className="text-white/60">Slides Completed</div>
+          </div>
+          <div className="bg-white/5 rounded-2xl p-6 text-center border border-white/10">
+            <div className="text-4xl mb-3">😊</div>
+            <div className="text-3xl font-bold text-teal-400">7</div>
+            <div className="text-white/60">Emotions Tracked</div>
+          </div>
+          <div className="bg-white/5 rounded-2xl p-6 text-center border border-white/10">
+            <div className="text-4xl mb-3">🖼️</div>
+            <div className="text-3xl font-bold text-cyan-400">48×48</div>
+            <div className="text-white/60">Pixel Size</div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+];

src/components/lessons/ClickReveal.jsx ADDED Viewed

	@@ -0,0 +1,51 @@

+import React, { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Sparkles, ChevronDown } from 'lucide-react';
+export default function ClickReveal({ title, children, color = "blue" }) {
+  const [isRevealed, setIsRevealed] = useState(false);
+  const colors = {
+    blue: "from-blue-500/20 to-cyan-500/20 border-blue-500/30 hover:border-blue-400/50",
+    purple: "from-purple-500/20 to-pink-500/20 border-purple-500/30 hover:border-purple-400/50",
+    green: "from-emerald-500/20 to-teal-500/20 border-emerald-500/30 hover:border-emerald-400/50",
+    yellow: "from-yellow-500/20 to-orange-500/20 border-yellow-500/30 hover:border-yellow-400/50"
+  };
+  return (
+    <motion.div
+      className={`rounded-2xl bg-gradient-to-br ${colors[color]} backdrop-blur-sm border-2 overflow-hidden cursor-pointer transition-all duration-300`}
+      onClick={() => setIsRevealed(!isRevealed)}
+      whileHover={{ scale: 1.01 }}
+      whileTap={{ scale: 0.99 }}
+    >
+      <div className="p-5 flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <Sparkles className="w-5 h-5 text-yellow-400" />
+          <span className="font-semibold text-white">{title}</span>
+        </div>
+        <motion.div
+          animate={{ rotate: isRevealed ? 180 : 0 }}
+          transition={{ duration: 0.3 }}
+        >
+          <ChevronDown className="w-5 h-5 text-white/60" />
+        </motion.div>
+      </div>
+      <AnimatePresence>
+        {isRevealed && (
+          <motion.div
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: "auto", opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{ duration: 0.3 }}
+          >
+            <div className="px-5 pb-5 text-white/80 border-t border-white/10 pt-4">
+              {children}
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </motion.div>
+  );
+}

src/components/lessons/KeyTermBadge.jsx ADDED Viewed

	@@ -0,0 +1,41 @@

+import React, { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+export default function KeyTermBadge({ term, definition, color = "cyan" }) {
+  const [showDefinition, setShowDefinition] = useState(false);
+  const colors = {
+    cyan: "bg-cyan-500/20 text-cyan-300 border-cyan-500/30 hover:bg-cyan-500/30",
+    purple: "bg-purple-500/20 text-purple-300 border-purple-500/30 hover:bg-purple-500/30",
+    pink: "bg-pink-500/20 text-pink-300 border-pink-500/30 hover:bg-pink-500/30",
+    green: "bg-emerald-500/20 text-emerald-300 border-emerald-500/30 hover:bg-emerald-500/30",
+    yellow: "bg-yellow-500/20 text-yellow-300 border-yellow-500/30 hover:bg-yellow-500/30"
+  };
+  return (
+    <span className="relative inline-block">
+      <motion.button
+        className={`px-3 py-1 rounded-lg border ${colors[color]} font-semibold text-sm transition-colors cursor-pointer`}
+        onClick={() => setShowDefinition(!showDefinition)}
+        whileHover={{ scale: 1.05 }}
+        whileTap={{ scale: 0.95 }}
+      >
+        {term}
+      </motion.button>
+      <AnimatePresence>
+        {showDefinition && (
+          <motion.div
+            initial={{ opacity: 0, y: 10, scale: 0.9 }}
+            animate={{ opacity: 1, y: 0, scale: 1 }}
+            exit={{ opacity: 0, y: 10, scale: 0.9 }}
+            className="absolute z-50 left-0 top-full mt-2 p-3 rounded-xl bg-slate-800 border border-white/20 shadow-xl min-w-[200px] max-w-[300px]"
+          >
+            <p className="text-white/90 text-sm">{definition}</p>
+            <div className="absolute -top-2 left-4 w-4 h-4 bg-slate-800 border-l border-t border-white/20 transform rotate-45" />
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </span>
+  );
+}

src/components/lessons/SlideContainer.jsx ADDED Viewed

	@@ -0,0 +1,21 @@

+import React from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+export default function SlideContainer({ children, slideKey }) {
+  return (
+    <AnimatePresence mode="wait">
+      <motion.div
+        key={slideKey}
+        initial={{ opacity: 0, x: 50 }}
+        animate={{ opacity: 1, x: 0 }}
+        exit={{ opacity: 0, x: -50 }}
+        transition={{ duration: 0.4, ease: "easeOut" }}
+        className="min-h-screen pt-24 pb-32 px-6"
+      >
+        <div className="max-w-4xl mx-auto">
+          {children}
+        </div>
+      </motion.div>
+    </AnimatePresence>
+  );
+}

src/components/lessons/SlideNavigation.jsx ADDED Viewed

	@@ -0,0 +1,75 @@

+import React from 'react';
+import { motion } from 'framer-motion';
+import { Button } from '@/components/ui/button';
+import { ChevronLeft, ChevronRight, Home } from 'lucide-react';
+export default function SlideNavigation({
+  currentSlide,
+  totalSlides,
+  onPrev,
+  onNext,
+  onHome,
+  chapterTitle
+}) {
+  return (
+    <div className="fixed bottom-0 left-0 right-0 z-50">
+      <div className="bg-slate-900/90 backdrop-blur-xl border-t border-white/10">
+        <div className="max-w-4xl mx-auto px-6 py-4">
+          <div className="flex items-center justify-between gap-4">
+            {/* Progress Dots */}
+            <div className="hidden sm:flex items-center gap-2">
+              {Array.from({ length: totalSlides }).map((_, i) => (
+                <motion.div
+                  key={i}
+                  className={`h-2 rounded-full transition-all duration-300 ${
+                    i === currentSlide
+                      ? 'w-8 bg-gradient-to-r from-cyan-400 to-purple-400'
+                      : i < currentSlide
+                        ? 'w-2 bg-white/50'
+                        : 'w-2 bg-white/20'
+                  }`}
+                  initial={false}
+                  animate={{ scale: i === currentSlide ? 1.1 : 1 }}
+                />
+              ))}
+            </div>
+            {/* Slide Counter (Mobile) */}
+            <div className="sm:hidden text-white/70 font-medium">
+              {currentSlide + 1} / {totalSlides}
+            </div>
+            {/* Navigation Buttons */}
+            <div className="flex items-center gap-3">
+              <Button
+                size="icon"
+                onClick={onHome}
+                className="text-white/70 hover:text-white bg-white/5 hover:bg-white/10 rounded-xl border-0"
+              >
+                <Home className="w-5 h-5" />
+              </Button>
+              <Button
+                onClick={onPrev}
+                disabled={currentSlide === 0}
+                className="border-2 border-white/20 text-white bg-white/5 hover:bg-white/10 rounded-xl disabled:opacity-30 disabled:cursor-not-allowed font-semibold"
+              >
+                <ChevronLeft className="w-5 h-5 mr-1" />
+                Back
+              </Button>
+              <Button
+                onClick={onNext}
+                disabled={currentSlide === totalSlides - 1}
+                className="bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 rounded-xl disabled:opacity-30 disabled:cursor-not-allowed text-white font-bold border-0 shadow-lg"
+              >
+                Next
+                <ChevronRight className="w-5 h-5 ml-1" />
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/ui/accordion.jsx ADDED Viewed

	@@ -0,0 +1,41 @@

+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react"
+import { cn } from "@/lib/utils"
+const Accordion = AccordionPrimitive.Root
+const AccordionItem = React.forwardRef(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item ref={ref} className={cn("border-b", className)} {...props} />
+))
+AccordionItem.displayName = "AccordionItem"
+const AccordionTrigger = React.forwardRef(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}>
+      {children}
+      <ChevronDown
+        className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+const AccordionContent = React.forwardRef(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}>
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

src/components/ui/alert-dialog.jsx ADDED Viewed

	@@ -0,0 +1,97 @@

+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+const AlertDialog = AlertDialogPrimitive.Root
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+const AlertDialogOverlay = React.forwardRef(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref} />
+))
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+const AlertDialogContent = React.forwardRef(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props} />
+  </AlertDialogPortal>
+))
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+const AlertDialogHeader = ({
+  className,
+  ...props
+}) => (
+  <div
+    className={cn("flex flex-col space-y-2 text-center sm:text-left", className)}
+    {...props} />
+)
+AlertDialogHeader.displayName = "AlertDialogHeader"
+const AlertDialogFooter = ({
+  className,
+  ...props
+}) => (
+  <div
+    className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+    {...props} />
+)
+AlertDialogFooter.displayName = "AlertDialogFooter"
+const AlertDialogTitle = React.forwardRef(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title ref={ref} className={cn("text-lg font-semibold", className)} {...props} />
+))
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+const AlertDialogDescription = React.forwardRef(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props} />
+))
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName
+const AlertDialogAction = React.forwardRef(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
+))
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+const AlertDialogCancel = React.forwardRef(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
+    {...props} />
+))
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}

src/components/ui/alert.jsx ADDED Viewed

	@@ -0,0 +1,47 @@

+import * as React from "react"
+import { cva } from "class-variance-authority";
+import { cn } from "@/lib/utils"
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+const Alert = React.forwardRef(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props} />
+))
+Alert.displayName = "Alert"
+const AlertTitle = React.forwardRef(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props} />
+))
+AlertTitle.displayName = "AlertTitle"
+const AlertDescription = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props} />
+))
+AlertDescription.displayName = "AlertDescription"
+export { Alert, AlertTitle, AlertDescription }

src/components/ui/aspect-ratio.jsx ADDED Viewed

	@@ -0,0 +1,5 @@

+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
+const AspectRatio = AspectRatioPrimitive.Root
+export { AspectRatio }

src/components/ui/avatar.jsx ADDED Viewed

	@@ -0,0 +1,35 @@

+"use client"
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+import { cn } from "@/lib/utils"
+const Avatar = React.forwardRef(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)}
+    {...props} />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+const AvatarImage = React.forwardRef(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props} />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+const AvatarFallback = React.forwardRef(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props} />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+export { Avatar, AvatarImage, AvatarFallback }

src/components/ui/badge.jsx ADDED Viewed

	@@ -0,0 +1,34 @@

+import * as React from "react"
+import { cva } from "class-variance-authority";
+import { cn } from "@/lib/utils"
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+function Badge({
+  className,
+  variant,
+  ...props
+}) {
+  return (<div className={cn(badgeVariants({ variant }), className)} {...props} />);
+}
+export { Badge, badgeVariants }

src/components/ui/breadcrumb.jsx ADDED Viewed

	@@ -0,0 +1,92 @@

+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { ChevronRight, MoreHorizontal } from "lucide-react"
+import { cn } from "@/lib/utils"
+const Breadcrumb = React.forwardRef(
+  ({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />
+)
+Breadcrumb.displayName = "Breadcrumb"
+const BreadcrumbList = React.forwardRef(({ className, ...props }, ref) => (
+  <ol
+    ref={ref}
+    className={cn(
+      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+      className
+    )}
+    {...props} />
+))
+BreadcrumbList.displayName = "BreadcrumbList"
+const BreadcrumbItem = React.forwardRef(({ className, ...props }, ref) => (
+  <li
+    ref={ref}
+    className={cn("inline-flex items-center gap-1.5", className)}
+    {...props} />
+))
+BreadcrumbItem.displayName = "BreadcrumbItem"
+const BreadcrumbLink = React.forwardRef(({ asChild, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a"
+  return (
+    (<Comp
+      ref={ref}
+      className={cn("transition-colors hover:text-foreground", className)}
+      {...props} />)
+  );
+})
+BreadcrumbLink.displayName = "BreadcrumbLink"
+const BreadcrumbPage = React.forwardRef(({ className, ...props }, ref) => (
+  <span
+    ref={ref}
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    className={cn("font-normal text-foreground", className)}
+    {...props} />
+))
+BreadcrumbPage.displayName = "BreadcrumbPage"
+const BreadcrumbSeparator = ({
+  children,
+  className,
+  ...props
+}) => (
+  <li
+    role="presentation"
+    aria-hidden="true"
+    className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)}
+    {...props}>
+    {children ?? <ChevronRight />}
+  </li>
+)
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
+const BreadcrumbEllipsis = ({
+  className,
+  ...props
+}) => (
+  <span
+    role="presentation"
+    aria-hidden="true"
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}>
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More</span>
+  </span>
+)
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}

src/components/ui/button.jsx ADDED Viewed

	@@ -0,0 +1,48 @@

+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva } from "class-variance-authority";
+import { cn } from "@/lib/utils"
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+const Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button"
+  return (
+    (<Comp
+      className={cn(buttonVariants({ variant, size, className }))}
+      ref={ref}
+      {...props} />)
+  );
+})
+Button.displayName = "Button"
+export { Button, buttonVariants }

src/components/ui/calendar.jsx ADDED Viewed

	@@ -0,0 +1,71 @@

+import * as React from "react"
+import { ChevronLeft, ChevronRight } from "lucide-react"
+import { DayPicker } from "react-day-picker"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}) {
+  return (
+    (<DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn("p-3", className)}
+      classNames={{
+        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+        month: "space-y-4",
+        caption: "flex justify-center pt-1 relative items-center",
+        caption_label: "text-sm font-medium",
+        nav: "space-x-1 flex items-center",
+        nav_button: cn(
+          buttonVariants({ variant: "outline" }),
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+        ),
+        nav_button_previous: "absolute left-1",
+        nav_button_next: "absolute right-1",
+        table: "w-full border-collapse space-y-1",
+        head_row: "flex",
+        head_cell:
+          "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
+        row: "flex w-full mt-2",
+        cell: cn(
+          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
+          props.mode === "range"
+            ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
+            : "[&:has([aria-selected])]:rounded-md"
+        ),
+        day: cn(
+          buttonVariants({ variant: "ghost" }),
+          "h-8 w-8 p-0 font-normal aria-selected:opacity-100"
+        ),
+        day_range_start: "day-range-start",
+        day_range_end: "day-range-end",
+        day_selected:
+          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        day_today: "bg-accent text-accent-foreground",
+        day_outside:
+          "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
+        day_disabled: "text-muted-foreground opacity-50",
+        day_range_middle:
+          "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        day_hidden: "invisible",
+        ...classNames,
+      }}
+      components={{
+        IconLeft: ({ className, ...props }) => (
+          <ChevronLeft className={cn("h-4 w-4", className)} {...props} />
+        ),
+        IconRight: ({ className, ...props }) => (
+          <ChevronRight className={cn("h-4 w-4", className)} {...props} />
+        ),
+      }}
+      {...props} />)
+  );
+}
+Calendar.displayName = "Calendar"
+export { Calendar }

src/components/ui/card.jsx ADDED Viewed

	@@ -0,0 +1,50 @@

+import * as React from "react"
+import { cn } from "@/lib/utils"
+const Card = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("rounded-xl border bg-card text-card-foreground shadow", className)}
+    {...props} />
+))
+Card.displayName = "Card"
+const CardHeader = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props} />
+))
+CardHeader.displayName = "CardHeader"
+const CardTitle = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props} />
+))
+CardTitle.displayName = "CardTitle"
+const CardDescription = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props} />
+))
+CardDescription.displayName = "CardDescription"
+const CardContent = React.forwardRef(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+const CardFooter = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props} />
+))
+CardFooter.displayName = "CardFooter"
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

src/components/ui/carousel.jsx ADDED Viewed

	@@ -0,0 +1,193 @@

+import * as React from "react"
+import useEmblaCarousel from "embla-carousel-react";
+import { ArrowLeft, ArrowRight } from "lucide-react"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+const CarouselContext = React.createContext(null)
+function useCarousel() {
+  const context = React.useContext(CarouselContext)
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />")
+  }
+  return context
+}
+const Carousel = React.forwardRef((
+  {
+    orientation = "horizontal",
+    opts,
+    setApi,
+    plugins,
+    className,
+    children,
+    ...props
+  },
+  ref
+) => {
+  const [carouselRef, api] = useEmblaCarousel({
+    ...opts,
+    axis: orientation === "horizontal" ? "x" : "y",
+  }, plugins)
+  const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+  const [canScrollNext, setCanScrollNext] = React.useState(false)
+  const onSelect = React.useCallback((api) => {
+    if (!api) {
+      return
+    }
+    setCanScrollPrev(api.canScrollPrev())
+    setCanScrollNext(api.canScrollNext())
+  }, [])
+  const scrollPrev = React.useCallback(() => {
+    api?.scrollPrev()
+  }, [api])
+  const scrollNext = React.useCallback(() => {
+    api?.scrollNext()
+  }, [api])
+  const handleKeyDown = React.useCallback((event) => {
+    if (event.key === "ArrowLeft") {
+      event.preventDefault()
+      scrollPrev()
+    } else if (event.key === "ArrowRight") {
+      event.preventDefault()
+      scrollNext()
+    }
+  }, [scrollPrev, scrollNext])
+  React.useEffect(() => {
+    if (!api || !setApi) {
+      return
+    }
+    setApi(api)
+  }, [api, setApi])
+  React.useEffect(() => {
+    if (!api) {
+      return
+    }
+    onSelect(api)
+    api.on("reInit", onSelect)
+    api.on("select", onSelect)
+    return () => {
+      api?.off("select", onSelect)
+    };
+  }, [api, onSelect])
+  return (
+    (<CarouselContext.Provider
+      value={{
+        carouselRef,
+        api: api,
+        opts,
+        orientation:
+          orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext,
+      }}>
+      <div
+        ref={ref}
+        onKeyDownCapture={handleKeyDown}
+        className={cn("relative", className)}
+        role="region"
+        aria-roledescription="carousel"
+        {...props}>
+        {children}
+      </div>
+    </CarouselContext.Provider>)
+  );
+})
+Carousel.displayName = "Carousel"
+const CarouselContent = React.forwardRef(({ className, ...props }, ref) => {
+  const { carouselRef, orientation } = useCarousel()
+  return (
+    (<div ref={carouselRef} className="overflow-hidden">
+      <div
+        ref={ref}
+        className={cn(
+          "flex",
+          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          className
+        )}
+        {...props} />
+    </div>)
+  );
+})
+CarouselContent.displayName = "CarouselContent"
+const CarouselItem = React.forwardRef(({ className, ...props }, ref) => {
+  const { orientation } = useCarousel()
+  return (
+    (<div
+      ref={ref}
+      role="group"
+      aria-roledescription="slide"
+      className={cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        className
+      )}
+      {...props} />)
+  );
+})
+CarouselItem.displayName = "CarouselItem"
+const CarouselPrevious = React.forwardRef(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+  return (
+    (<Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn("absolute  h-8 w-8 rounded-full", orientation === "horizontal"
+        ? "-left-12 top-1/2 -translate-y-1/2"
+        : "-top-12 left-1/2 -translate-x-1/2 rotate-90", className)}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}>
+      <ArrowLeft className="h-4 w-4" />
+      <span className="sr-only">Previous slide</span>
+    </Button>)
+  );
+})
+CarouselPrevious.displayName = "CarouselPrevious"
+const CarouselNext = React.forwardRef(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
+  return (
+    (<Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn("absolute h-8 w-8 rounded-full", orientation === "horizontal"
+        ? "-right-12 top-1/2 -translate-y-1/2"
+        : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90", className)}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}>
+      <ArrowRight className="h-4 w-4" />
+      <span className="sr-only">Next slide</span>
+    </Button>)
+  );
+})
+CarouselNext.displayName = "CarouselNext"
+export { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext };

src/components/ui/chart.jsx ADDED Viewed

	@@ -0,0 +1,309 @@

+"use client";
+import * as React from "react"
+import * as RechartsPrimitive from "recharts"
+import { cn } from "@/lib/utils"
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = {
+  light: "",
+  dark: ".dark"
+}
+const ChartContext = React.createContext(null)
+function useChart() {
+  const context = React.useContext(ChartContext)
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />")
+  }
+  return context
+}
+const ChartContainer = React.forwardRef(({ id, className, children, config, ...props }, ref) => {
+  const uniqueId = React.useId()
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
+  return (
+    (<ChartContext.Provider value={{ config }}>
+      <div
+        data-chart={chartId}
+        ref={ref}
+        className={cn(
+          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+          className
+        )}
+        {...props}>
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>)
+  );
+})
+ChartContainer.displayName = "Chart"
+const ChartStyle = ({
+  id,
+  config
+}) => {
+  const colorConfig = Object.entries(config).filter(([, config]) => config.theme || config.color)
+  if (!colorConfig.length) {
+    return null
+  }
+  return (
+    (<style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+.map(([key, itemConfig]) => {
+const color =
+  itemConfig.theme?.[theme] ||
+  itemConfig.color
+return color ? `  --color-${key}: ${color};` : null
+})
+.join("\n")}
+}
+`)
+          .join("\n"),
+      }} />)
+  );
+}
+const ChartTooltip = RechartsPrimitive.Tooltip
+const ChartTooltipContent = React.forwardRef((
+  {
+    active,
+    payload,
+    className,
+    indicator = "dot",
+    hideLabel = false,
+    hideIndicator = false,
+    label,
+    labelFormatter,
+    labelClassName,
+    formatter,
+    color,
+    nameKey,
+    labelKey,
+  },
+  ref
+) => {
+  const { config } = useChart()
+  const tooltipLabel = React.useMemo(() => {
+    if (hideLabel || !payload?.length) {
+      return null
+    }
+    const [item] = payload
+    const key = `${labelKey || item.dataKey || item.name || "value"}`
+    const itemConfig = getPayloadConfigFromPayload(config, item, key)
+    const value =
+      !labelKey && typeof label === "string"
+        ? config[label]?.label || label
+        : itemConfig?.label
+    if (labelFormatter) {
+      return (
+        (<div className={cn("font-medium", labelClassName)}>
+          {labelFormatter(value, payload)}
+        </div>)
+      );
+    }
+    if (!value) {
+      return null
+    }
+    return <div className={cn("font-medium", labelClassName)}>{value}</div>;
+  }, [
+    label,
+    labelFormatter,
+    payload,
+    hideLabel,
+    labelClassName,
+    config,
+    labelKey,
+  ])
+  if (!active || !payload?.length) {
+    return null
+  }
+  const nestLabel = payload.length === 1 && indicator !== "dot"
+  return (
+    (<div
+      ref={ref}
+      className={cn(
+        "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+        className
+      )}>
+      {!nestLabel ? tooltipLabel : null}
+      <div className="grid gap-1.5">
+        {payload.map((item, index) => {
+          const key = `${nameKey || item.name || item.dataKey || "value"}`
+          const itemConfig = getPayloadConfigFromPayload(config, item, key)
+          const indicatorColor = color || item.payload.fill || item.color
+          return (
+            (<div
+              key={item.dataKey}
+              className={cn(
+                "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+                indicator === "dot" && "items-center"
+              )}>
+              {formatter && item?.value !== undefined && item.name ? (
+                formatter(item.value, item.name, item, index, item.payload)
+              ) : (
+                <>
+                  {itemConfig?.icon ? (
+                    <itemConfig.icon />
+                  ) : (
+                    !hideIndicator && (
+                      <div
+                        className={cn("shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]", {
+                          "h-2.5 w-2.5": indicator === "dot",
+                          "w-1": indicator === "line",
+                          "w-0 border-[1.5px] border-dashed bg-transparent":
+                            indicator === "dashed",
+                          "my-0.5": nestLabel && indicator === "dashed",
+                        })}
+                        style={
+                          {
+                            "--color-bg": indicatorColor,
+                            "--color-border": indicatorColor
+                          }
+                        } />
+                    )
+                  )}
+                  <div
+                    className={cn(
+                      "flex flex-1 justify-between leading-none",
+                      nestLabel ? "items-end" : "items-center"
+                    )}>
+                    <div className="grid gap-1.5">
+                      {nestLabel ? tooltipLabel : null}
+                      <span className="text-muted-foreground">
+                        {itemConfig?.label || item.name}
+                      </span>
+                    </div>
+                    {item.value && (
+                      <span className="font-mono font-medium tabular-nums text-foreground">
+                        {item.value.toLocaleString()}
+                      </span>
+                    )}
+                  </div>
+                </>
+              )}
+            </div>)
+          );
+        })}
+      </div>
+    </div>)
+  );
+})
+ChartTooltipContent.displayName = "ChartTooltip"
+const ChartLegend = RechartsPrimitive.Legend
+const ChartLegendContent = React.forwardRef((
+  { className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
+  ref
+) => {
+  const { config } = useChart()
+  if (!payload?.length) {
+    return null
+  }
+  return (
+    (<div
+      ref={ref}
+      className={cn(
+        "flex items-center justify-center gap-4",
+        verticalAlign === "top" ? "pb-3" : "pt-3",
+        className
+      )}>
+      {payload.map((item) => {
+        const key = `${nameKey || item.dataKey || "value"}`
+        const itemConfig = getPayloadConfigFromPayload(config, item, key)
+        return (
+          (<div
+            key={item.value}
+            className={cn(
+              "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
+            )}>
+            {itemConfig?.icon && !hideIcon ? (
+              <itemConfig.icon />
+            ) : (
+              <div
+                className="h-2 w-2 shrink-0 rounded-[2px]"
+                style={{
+                  backgroundColor: item.color,
+                }} />
+            )}
+            {itemConfig?.label}
+          </div>)
+        );
+      })}
+    </div>)
+  );
+})
+ChartLegendContent.displayName = "ChartLegend"
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(
+  config,
+  payload,
+  key
+) {
+  if (typeof payload !== "object" || payload === null) {
+    return undefined
+  }
+  const payloadPayload =
+    "payload" in payload &&
+    typeof payload.payload === "object" &&
+    payload.payload !== null
+      ? payload.payload
+      : undefined
+  let configLabelKey = key
+  if (
+    key in payload &&
+    typeof payload[key] === "string"
+  ) {
+    configLabelKey = payload[key]
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key] === "string"
+  ) {
+    configLabelKey = payloadPayload[key]
+  }
+  return configLabelKey in config
+    ? config[configLabelKey]
+    : config[key];
+}
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+}

src/components/ui/checkbox.jsx ADDED Viewed

	@@ -0,0 +1,22 @@

+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+import { cn } from "@/lib/utils"
+const Checkbox = React.forwardRef(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}>
+    <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+export { Checkbox }

src/components/ui/collapsible.jsx ADDED Viewed

	@@ -0,0 +1,11 @@

+"use client"
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+const Collapsible = CollapsiblePrimitive.Root
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

src/components/ui/command.jsx ADDED Viewed

	@@ -0,0 +1,116 @@

+import * as React from "react"
+import { Command as CommandPrimitive } from "cmdk"
+import { Search } from "lucide-react"
+import { cn } from "@/lib/utils"
+import { Dialog, DialogContent } from "@/components/ui/dialog"
+const Command = React.forwardRef(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      className
+    )}
+    {...props} />
+))
+Command.displayName = CommandPrimitive.displayName
+const CommandDialog = ({
+  children,
+  ...props
+}) => {
+  return (
+    (<Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0">
+        <Command
+          className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>)
+  );
+}
+const CommandInput = React.forwardRef(({ className, ...props }, ref) => (
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props} />
+  </div>
+))
+CommandInput.displayName = CommandPrimitive.Input.displayName
+const CommandList = React.forwardRef(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    {...props} />
+))
+CommandList.displayName = CommandPrimitive.List.displayName
+const CommandEmpty = React.forwardRef((props, ref) => (
+  <CommandPrimitive.Empty ref={ref} className="py-6 text-center text-sm" {...props} />
+))
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+const CommandGroup = React.forwardRef(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      className
+    )}
+    {...props} />
+))
+CommandGroup.displayName = CommandPrimitive.Group.displayName
+const CommandSeparator = React.forwardRef(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator ref={ref} className={cn("-mx-1 h-px bg-border", className)} {...props} />
+))
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+const CommandItem = React.forwardRef(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      className
+    )}
+    {...props} />
+))
+CommandItem.displayName = CommandPrimitive.Item.displayName
+const CommandShortcut = ({
+  className,
+  ...props
+}) => {
+  return (
+    (<span
+      className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
+      {...props} />)
+  );
+}
+CommandShortcut.displayName = "CommandShortcut"
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}

src/components/ui/context-menu.jsx ADDED Viewed

	@@ -0,0 +1,156 @@

+import * as React from "react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+import { cn } from "@/lib/utils"
+const ContextMenu = ContextMenuPrimitive.Root
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger
+const ContextMenuGroup = ContextMenuPrimitive.Group
+const ContextMenuPortal = ContextMenuPrimitive.Portal
+const ContextMenuSub = ContextMenuPrimitive.Sub
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
+const ContextMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => (
+  <ContextMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}>
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </ContextMenuPrimitive.SubTrigger>
+))
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
+const ContextMenuSubContent = React.forwardRef(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props} />
+))
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
+const ContextMenuContent = React.forwardRef(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Portal>
+    <ContextMenuPrimitive.Content
+      ref={ref}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props} />
+  </ContextMenuPrimitive.Portal>
+))
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
+const ContextMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props} />
+))
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
+const ContextMenuCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => (
+  <ContextMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}>
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.CheckboxItem>
+))
+ContextMenuCheckboxItem.displayName =
+  ContextMenuPrimitive.CheckboxItem.displayName
+const ContextMenuRadioItem = React.forwardRef(({ className, children, ...props }, ref) => (
+  <ContextMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}>
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Circle className="h-4 w-4 fill-current" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.RadioItem>
+))
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
+const ContextMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold text-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props} />
+))
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
+const ContextMenuSeparator = React.forwardRef(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    {...props} />
+))
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
+const ContextMenuShortcut = ({
+  className,
+  ...props
+}) => {
+  return (
+    (<span
+      className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
+      {...props} />)
+  );
+}
+ContextMenuShortcut.displayName = "ContextMenuShortcut"
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+}

src/components/ui/dialog.jsx ADDED Viewed

	@@ -0,0 +1,96 @@

+"use client"
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+import { cn } from "@/lib/utils"
+const Dialog = DialogPrimitive.Root
+const DialogTrigger = DialogPrimitive.Trigger
+const DialogPortal = DialogPrimitive.Portal
+const DialogClose = DialogPrimitive.Close
+const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props} />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}>
+      {children}
+      <DialogPrimitive.Close
+        className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+const DialogHeader = ({
+  className,
+  ...props
+}) => (
+  <div
+    className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)}
+    {...props} />
+)
+DialogHeader.displayName = "DialogHeader"
+const DialogFooter = ({
+  className,
+  ...props
+}) => (
+  <div
+    className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+    {...props} />
+)
+DialogFooter.displayName = "DialogFooter"
+const DialogTitle = React.forwardRef(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
+    {...props} />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+const DialogDescription = React.forwardRef(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props} />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}

src/components/ui/drawer.jsx ADDED Viewed

	@@ -0,0 +1,92 @@

+"use client"
+import * as React from "react"
+import { Drawer as DrawerPrimitive } from "vaul"
+import { cn } from "@/lib/utils"
+const Drawer = ({
+  shouldScaleBackground = true,
+  ...props
+}) => (
+  <DrawerPrimitive.Root shouldScaleBackground={shouldScaleBackground} {...props} />
+)
+Drawer.displayName = "Drawer"
+const DrawerTrigger = DrawerPrimitive.Trigger
+const DrawerPortal = DrawerPrimitive.Portal
+const DrawerClose = DrawerPrimitive.Close
+const DrawerOverlay = React.forwardRef(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Overlay
+    ref={ref}
+    className={cn("fixed inset-0 z-50 bg-black/80", className)}
+    {...props} />
+))
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
+const DrawerContent = React.forwardRef(({ className, children, ...props }, ref) => (
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+        className
+      )}
+      {...props}>
+      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      {children}
+    </DrawerPrimitive.Content>
+  </DrawerPortal>
+))
+DrawerContent.displayName = "DrawerContent"
+const DrawerHeader = ({
+  className,
+  ...props
+}) => (
+  <div
+    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
+    {...props} />
+)
+DrawerHeader.displayName = "DrawerHeader"
+const DrawerFooter = ({
+  className,
+  ...props
+}) => (
+  <div className={cn("mt-auto flex flex-col gap-2 p-4", className)} {...props} />
+)
+DrawerFooter.displayName = "DrawerFooter"
+const DrawerTitle = React.forwardRef(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
+    {...props} />
+))
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName
+const DrawerDescription = React.forwardRef(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props} />
+))
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}

src/components/ui/dropdown-menu.jsx ADDED Viewed

	@@ -0,0 +1,156 @@

+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+import { cn } from "@/lib/utils"
+const DropdownMenu = DropdownMenuPrimitive.Root
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+const DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props}>
+    {children}
+    <ChevronRight className="ml-auto" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName
+const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props} />
+))
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName
+const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props} />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props} />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}>
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName
+const DropdownMenuRadioItem = React.forwardRef(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}>
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+const DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
+    {...props} />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+const DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props} />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}) => {
+  return (
+    (<span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props} />)
+  );
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}

src/components/ui/form.jsx ADDED Viewed

	@@ -0,0 +1,134 @@

+"use client";
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { Controller, FormProvider, useFormContext } from "react-hook-form";
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+const Form = FormProvider
+const FormFieldContext = React.createContext({})
+const FormField = (
+  {
+    ...props
+  }
+) => {
+  return (
+    (<FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>)
+  );
+}
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState, formState } = useFormContext()
+  const fieldState = getFieldState(fieldContext.name, formState)
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+  const { id } = itemContext
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+const FormItemContext = React.createContext({})
+const FormItem = React.forwardRef(({ className, ...props }, ref) => {
+  const id = React.useId()
+  return (
+    (<FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+    </FormItemContext.Provider>)
+  );
+})
+FormItem.displayName = "FormItem"
+const FormLabel = React.forwardRef(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField()
+  return (
+    (<Label
+      ref={ref}
+      className={cn(error && "text-destructive", className)}
+      htmlFor={formItemId}
+      {...props} />)
+  );
+})
+FormLabel.displayName = "FormLabel"
+const FormControl = React.forwardRef(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+  return (
+    (<Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props} />)
+  );
+})
+FormControl.displayName = "FormControl"
+const FormDescription = React.forwardRef(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField()
+  return (
+    (<p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn("text-[0.8rem] text-muted-foreground", className)}
+      {...props} />)
+  );
+})
+FormDescription.displayName = "FormDescription"
+const FormMessage = React.forwardRef(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message) : children
+  if (!body) {
+    return null
+  }
+  return (
+    (<p
+      ref={ref}
+      id={formMessageId}
+      className={cn("text-[0.8rem] font-medium text-destructive", className)}
+      {...props}>
+      {body}
+    </p>)
+  );
+})
+FormMessage.displayName = "FormMessage"
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}

src/components/ui/hover-card.jsx ADDED Viewed

	@@ -0,0 +1,25 @@

+"use client"
+import * as React from "react"
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+import { cn } from "@/lib/utils"
+const HoverCard = HoverCardPrimitive.Root
+const HoverCardTrigger = HoverCardPrimitive.Trigger
+const HoverCardContent = React.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <HoverCardPrimitive.Content
+    ref={ref}
+    align={align}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props} />
+))
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
+export { HoverCard, HoverCardTrigger, HoverCardContent }

src/components/ui/input-otp.jsx ADDED Viewed

	@@ -0,0 +1,53 @@

+import * as React from "react"
+import { OTPInput, OTPInputContext } from "input-otp"
+import { Minus } from "lucide-react"
+import { cn } from "@/lib/utils"
+const InputOTP = React.forwardRef(({ className, containerClassName, ...props }, ref) => (
+  <OTPInput
+    ref={ref}
+    containerClassName={cn("flex items-center gap-2 has-[:disabled]:opacity-50", containerClassName)}
+    className={cn("disabled:cursor-not-allowed", className)}
+    {...props} />
+))
+InputOTP.displayName = "InputOTP"
+const InputOTPGroup = React.forwardRef(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("flex items-center", className)} {...props} />
+))
+InputOTPGroup.displayName = "InputOTPGroup"
+const InputOTPSlot = React.forwardRef(({ index, className, ...props }, ref) => {
+  const inputOTPContext = React.useContext(OTPInputContext)
+  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
+  return (
+    (<div
+      ref={ref}
+      className={cn(
+        "relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
+        isActive && "z-10 ring-1 ring-ring",
+        className
+      )}
+      {...props}>
+      {char}
+      {hasFakeCaret && (
+        <div
+          className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
+        </div>
+      )}
+    </div>)
+  );
+})
+InputOTPSlot.displayName = "InputOTPSlot"
+const InputOTPSeparator = React.forwardRef(({ ...props }, ref) => (
+  <div ref={ref} role="separator" {...props}>
+    <Minus />
+  </div>
+))
+InputOTPSeparator.displayName = "InputOTPSeparator"
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }