Lucy Virtual Try-On

import { createDecartClient, models } from "@decartai/sdk";

const model = models.realtime("lucy-vton-3.6");

// Get user's camera stream with model specifications
const stream = await navigator.mediaDevices.getUserMedia({
  audio: true,
  video: {
    frameRate: model.fps,
    width: model.width,
    height: model.height,
  }
});

// Create a client. Never ship your permanent API key to the browser: fetch a short-lived
// client token from your backend instead. The SDK calls this before every connect and reconnect.
const client = createDecartClient({
  apiKeyProvider: async () => {
    const res = await fetch("/api/realtime-token", { method: "POST" }); // your server: client.tokens.create(...)
    const { apiKey } = await res.json();
    return apiKey;
  }
});

// Connect and try the garment on the live stream
const realtimeClient = await client.realtime.connect(stream, {
  model,
  // Fast mode (4 credits/sec, 2x standard): lower latency and higher throughput.
  // speed: "fast",
  mirror: "auto",
  onRemoteStream: (transformedStream) => {
    const videoElement = document.querySelector("#video-output");
    videoElement.srcObject = transformedStream;
  }
});

// set() replaces the full state — prompt + garment image atomically
await realtimeClient.set({
  prompt: "Wearing a black bomber jacket with a blue logo on the chest",
  image: "https://example.com/garment.png",
});

// Switch the garment on the fly
await realtimeClient.set({
  prompt: "Wearing a red leather jacket",
  image: "https://example.com/red-jacket.png",
});

// Disconnect when done
realtimeClient.disconnect();