Schema

"use client";

import {
  SanaStreamingProvider,
  useSanaStreaming,
  useSanaStreamingChunkComplete,
  SanaStreamingMainVideoView,
} from "@reactor-models/sana-streaming";
import { useEffect } from "react";

// Token minted on your server; see Authentication for the full caching
// pattern. Cache in memory, not the browser's HTTP cache — a resolver
// that mints fresh on every call breaks the session it's already in.
let cachedToken: { jwt: string; expiresAtMs: number } | null = null;
async function getJwt() {
  if (cachedToken && Date.now() < cachedToken.expiresAtMs - 60_000) return cachedToken.jwt;
  const r = await fetch("/api/reactor/token", { cache: "no-store" });
  const { jwt, expires_at } = await r.json();
  cachedToken = { jwt, expiresAtMs: expires_at * 1000 };
  return cachedToken.jwt;
}

function Editor() {
  const { status, publish, setPrompt, start } = useSanaStreaming();

  useSanaStreamingChunkComplete((msg) =>
    console.log("chunk", msg.chunk_index, msg.active_prompt),
  );

  useEffect(() => {
    if (status !== "ready") return;
    void (async () => {
      // Publish the camera as the live source. Pin the resolution first (see Tracks above).
      const cam = await navigator.mediaDevices.getUserMedia({ video: true });
      const track = cam.getVideoTracks()[0];
      track.contentHint = "detail";
      await publish("camera", track);

      // Describe the edit, then start.
      await setPrompt({ prompt: "Van Gogh oil painting, swirling brushstrokes, vivid colors" });
      await start();
    })();
  }, [status]);

  return (
    <SanaStreamingMainVideoView videoObjectFit="contain" className="h-full w-full" />
  );
}

export default function App() {
  return (
    <SanaStreamingProvider getJwt={getJwt} connectOptions={{ autoConnect: true }}>
      <Editor />
    </SanaStreamingProvider>
  );
}

import asyncio, os
import cv2
from reactor_sdk import Reactor

async def stream_webcam(camera):
    capture = cv2.VideoCapture(0)
    try:
        while capture.isOpened():
            ok, frame = capture.read()  # BGR uint8, (H, W, 3)
            if not ok:
                break
            camera.push_frame(frame[:, :, ::-1])  # BGR -> RGB
            await asyncio.sleep(1 / 24)
    finally:
        capture.release()

async def main():
    reactor = Reactor(model_name="reactor/sana-streaming", api_key=os.environ["REACTOR_API_KEY"])

    @reactor.on_message("chunk_complete")
    def _(msg):
        print(f"chunk {msg['chunk_index']}: {msg['active_prompt']}")

    await reactor.connect()

    # Publish the camera as the source, describe the edit, then start.
    camera = await reactor.publish_track("camera")
    asyncio.create_task(stream_webcam(camera))
    await reactor.send_command("set_prompt", {
        "prompt": "Apply a loose watercolor wash, bleeding edges, soft pastel palette",
    })
    await reactor.send_command("start", {})
    await asyncio.Event().wait()

asyncio.run(main())