Vibe Coder Guide¶

Add Moveris liveness detection to my app.

Requirements:
- Create a React component with webcam access using getUserMedia
- Capture frames at ~10 FPS (count = model min_frames, e.g. 10 for mixed-10-v2, 30 for mixed-30-v2)
- Encode frames as base64 PNG
- Send to https://api.moveris.com/api/v1/fast-check
- Use X-API-Key header for authentication
- Display verdict (live/fake) and confidence score
- Handle loading and error states

Request body format:
{
  session_id: crypto.randomUUID(),
  source: "live",
  model: "mixed-10-v2",
  frames: [{ index, timestamp_ms, pixels }]
}

Important: API calls should go through a backend/edge function to protect the API key.

Create a liveness detection integration with Moveris API (v2).

Tech stack: React with TypeScript
API endpoint: POST https://api.moveris.com/api/v1/fast-check
Auth: X-API-Key header

Requirements:
1. Capture frames (count matches model, e.g. 10 for mixed-10-v2, 30 for mixed-30-v2) at ~10 FPS from webcam
2. Encode each frame as base64 PNG data URL
3. Generate unique session_id using crypto.randomUUID()

Request body structure:
{
  session_id: string,
  source: "live",
  model: "mixed-10-v2",
  frames: [
    { index: number, timestamp_ms: number, pixels: string }
  ]
}

Response structure (HTTP JSON envelope — read `data` for the result):
{
  success: boolean,
  message: string,
  data: {
    verdict: "live" | "fake",
    confidence: number (0-100),
    real_score: number (0.0-1.0),
    score: number (0-100)
  } | null,
  errors: array (when success is false)
}

Generate a complete, production-ready implementation with:
- Custom React hook for reusability
- Proper error handling for 401, 429, and 500 errors
- Loading states and user feedback
- TypeScript interfaces for type safety

Build a webcam liveness verification feature using Moveris API.

Steps:
1. Access user's camera with getUserMedia
2. Show live camera preview
3. On button click, capture frames (e.g. 10 for mixed-10-v2) over ~1 second
4. Send frames to https://api.moveris.com/api/v1/fast-check
5. Show live/fake result with confidence percentage

API Details:
- Method: POST
- Header: X-API-Key: (use environment variable)
- Body: { session_id: UUID, source: "live", model: "mixed-10-v2", frames: [{index, timestamp_ms, pixels}] }
- Response: JSON envelope with `data.verdict`, `data.score` / confidence fields (see API reference)

Include a nice UI with:
- Camera preview with face guide overlay
- "Verify" button with loading state
- Result display showing verdict and confidence
- Error handling with user-friendly messages

Create a Python Flask API endpoint for liveness detection using Moveris.

Endpoint: POST /verify-liveness
Accept: multipart/form-data with image files (count = model min_frames, e.g. 10 for mixed-10-v2)

Implementation:
1. Receive uploaded image files (count matches model)
2. Convert each to base64 PNG
3. Call Moveris API at https://api.moveris.com/api/v1/fast-check
4. Return the verdict and confidence

Moveris request format:
{
  "session_id": "uuid-string",
  "source": "live",
  "model": "mixed-10-v2",
  "frames": [
    {"index": 0, "timestamp_ms": 0, "pixels": "data:image/png;base64,..."}
  ]
}

Use X-API-Key header with API key from environment variable.
Parse Moveris JSON: check `success`, then use `data` for verdict/scores; on failure use `message` / `errors`. Your Flask response can mirror that or unwrap `data` for the client.