Tutorial

import type { SanaStreamingStateMessage } from "@reactor-models/sana-streaming";

// Projects model `state` snapshots into SanaState. Returns the previous
// object when nothing changed so React can bail out of re-rendering the
// whole tree on the model's frequent identical echoes.
export function reduce(state: SanaState, msg: SanaStreamingStateMessage): SanaState {
  const next: SanaState = {
    running: msg.running,
    started: msg.started,
    paused: msg.paused,
    currentChunk: msg.current_chunk,
    // current_prompt is typed `unknown` on the wire; the model only ever
    // sends a string or null.
    currentPrompt: (msg.current_prompt as string | null) ?? null,
    seed: msg.seed,
  };
  const changed = (Object.keys(next) as (keyof SanaState)[]).some((k) => next[k] !== state[k]);
  return changed ? next : state;
}

const [state, setState] = useState(DEFAULT_STATE);

// The only reducer input: the typed `state` snapshot.
useSanaStreamingState((msg) => {
  setState((s) => reduce(s, msg));
});

// A rejected command, or a prompt the model could not process.
useSanaStreamingCommandError((msg) => {
  showCommandError(msg.reason);
});

useSanaStreamingGenerationReset(() => {
  // Model reset clears its prompt; mirror that locally.
  setResetNonce((n) => n + 1);
  setStageCleared(true);
});

const stream = await navigator.mediaDevices.getUserMedia({
  video: { width: { ideal: 640 }, height: { ideal: 360 }, facingMode: "user" },
});
const videoTrack = stream.getVideoTracks()[0];
videoTrack.contentHint = "detail"; // hold resolution; adapt framerate

import { SanaStreamingMainVideoView } from "@reactor-models/sana-streaming";

<SanaStreamingMainVideoView
  videoObjectFit="contain"
  className="absolute inset-0 h-full w-full"
/>;

const { setPrompt, status } = useSanaStreaming();
const [text, setText] = useState("");

const apply = (prompt: string) => {
  if (status !== "ready") return;
  setPrompt({ prompt }).catch(console.error);
};

const { pause, resume, reset, status } = useSanaStreaming();
const notReady = status !== "ready";

{paused ? (
  <IconButton icon="play" label="Resume" disabled={notReady}
    onClick={() => resume().catch(console.error)} />
) : (
  <IconButton icon="pause" label="Pause" disabled={notReady}
    onClick={() => pause().catch(console.error)} />
)}
<IconButton icon="reset" label="Reset" tone="danger" disabled={notReady}
  onClick={() => reset().catch(console.error)} />;