Icarus is a Chrome extension that uses computer vision to detect early signs of eye fatigue in real time — monitoring blink rate, squinting, eye rubbing, and screen distance — and intervenes the moment strain appears.

cmdf-2026/
├── extension/       Chrome extension (MediaPipe detection, popup UI)
├── backend/         Next.js API server (MongoDB, Gemini AI insights)
├── dashboard/       Local prototype dashboard (HTML/JS, Chart.js)
└── PRD.md           Product requirements for the Lovable frontend

• Node.js 18+
• A Chromium-based browser (Chrome, Edge, Arc)
• MongoDB Atlas account (connection string)
• Google Gemini API key
• ngrok account + authtoken (only needed for Lovable/external access)

The backend is a Next.js app that exposes REST endpoints and stores session data in MongoDB.

cd backend
npm install

Create backend/.env.local:

MONGODB_URI="mongodb+srv://<user>:<pass>@<cluster>.mongodb.net/?appName=icarus"
GEMINI_API_KEY="your-gemini-api-key"
NGROK_AUTHTOKEN="your-ngrok-authtoken"   # only needed for dev:ngrok

cd backend
npm run dev
# API available at http://localhost:3000

cd backend
npm run dev:ngrok
# Starts Next.js on port 3000 + opens a public ngrok tunnel
# Prints the tunnel URL — copy it into Lovable's VITE_API_BASE env var

If port 3000 is already in use, kill the occupying process first:

netstat -ano | findstr :3000
taskkill /PID <PID> /F

The extension captures webcam frames, runs MediaPipe FaceLandmarker, and posts strain samples to the backend every 10 seconds.

1. Open Chrome and go to chrome://extensions
2. Enable Developer mode (top-right toggle)
3. Click Load unpacked
4. Select the extension/ folder

Click the refresh icon on the extension card at chrome://extensions, then reload any page where the popup is open.

The extension posts samples to http://localhost:3000 by default. This is hardcoded in extension/scripts/session.js (API_BASE).

A standalone HTML dashboard for quick local inspection. No build step required.

# Just open the file directly in your browser:
open dashboard/index.html
# or on Windows:
start dashboard/index.html

The dashboard reads from http://localhost:3000 by default. Click the ⚙ button to switch the API base URL to a ngrok tunnel.

The production web dashboard is built and hosted on Lovable.

1. Start the backend with npm run dev:ngrok
2. Copy the ngrok URL from the terminal output
3. In your Lovable project settings → Environment Variables, set:

   VITE_API_BASE=https://xxxx.ngrok-free.app
   

4. Redeploy/rebuild the Lovable project

All fetch calls in the Lovable frontend must include the header: ngrok-skip-browser-warning: true

Terminal 1                   Browser tab 1        Browser tab 2
──────────────────────────   ──────────────────   ──────────────────
cd backend                   chrome://extensions  Lovable preview URL
npm run dev:ngrok             Load unpacked →
                              extension/
                              [copy ngrok URL]
                              → paste into Lovable
                              VITE_API_BASE

All three run simultaneously. The extension posts to the backend; the Lovable dashboard reads from it.