A React + TypeScript baby safety monitor powered by the Gemini Vision API. Point a camera at a room, detect hazards, define dangerous actions, and get alerted in real time.

• Node.js 18+
• A Google Gemini API key (free tier works)

cd cradle-guard
npm install

npm run dev

Open http://localhost:3000 in your browser.

npm run build
npm run preview

1. Enter your Gemini API key in the input field (used only in your browser, never sent to any server other than Google's)
2. Click Start Camera — allow camera permissions when prompted
3. Point the camera at the room where your baby will be
4. Click Scan Room — Gemini Vision analyses the frame and returns a list of detected hazards with severity ratings

1. Click Generate to have Gemini create a list of specific dangerous scenarios based on the hazards found (e.g. "Baby pulls lamp off nightstand")
2. Toggle actions on/off using the toggle switches
3. Add your own custom alerts in the input box (e.g. "baby touches the lamp")
4. Remove any actions you don't want

1. Choose one or more notification methods:
   • Push Notification — browser notification to your device
   • Sound Alarm — plays an audio beep through your speakers
   • Email Alert — enter your email (you'll need a backend/service like EmailJS to actually send)
   • SMS / Text — enter your phone number (requires Twilio or similar)
2. Set Detection Sensitivity (Low / Medium / High)
3. Click Activate Monitor

• Live camera feed with a real-time scan line
• Gemini checks a frame every 8 seconds
• Any triggered danger actions appear as alerts
• All events are logged with timestamps
• Click Stop Monitoring to return to settings

# On your dev machine
npm run build

# Copy the dist/ folder to your Pi
scp -r dist/ pi@raspberrypi.local:~/cradle-guard

# On the Pi — serve with any static server
npx serve dist
# or
python3 -m http.server 3000 --directory dist

Then open a browser on the Pi (or from another device on the same network) at http://raspberrypi.local:3000.

Tip: For best results on a Pi camera, set facingMode: 'environment' (already configured in useCamera.ts).

• Your Gemini API key is never stored — it lives only in React state and is cleared on page refresh
• The monitor checks one frame every 8 seconds to stay within free API rate limits — adjust INTERVAL_MS in Monitor.tsx to change this
• Email and SMS alerts are UI-only in this version; wire them up to EmailJS or Twilio to fully activate