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,
    hasVideo: msg.has_video,
    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));
});

// Transient set_video "decode failed" errors are auto-retried by FileInput;
// don't flash the banner for them.
useSanaStreamingCommandError((msg) => {
  if (!isTransientDecodeFailure(msg)) showCommandError(msg.reason);
});

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

// Typed slice of useSanaStreaming() the start flow needs.
interface StartControls {
  setMode: (params: { mode: SanaMode }) => Promise<void>;
  start: () => Promise<void>;
}

// The start flow is always set_mode -> start. Re-sending set_mode keeps the
// flow self-contained regardless of which mode the model is in; the model
// treats a repeated set_mode as idempotent.
export async function startGeneration(model: StartControls, mode: SanaMode) {
  await model.setMode({ mode });
  await model.start();
}

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

const { setVideo, uploadFile, setMode, start, status } = useSanaStreaming();

// Shared upload path for manual picks and preset clips.
async function uploadVideo(file: File) {
  const ref = await uploadFile(file);
  lastRefRef.current = ref;
  retriesRef.current = DECODE_RETRIES;
  await setVideo({ video: ref });
  onSource(URL.createObjectURL(file)); // the stage plays this next to the output
}

useSanaStreamingCommandError((msg) => {
  if (msg.command !== "set_video" || !msg.reason.startsWith("decode failed")) return;
  if (retriesRef.current > 0 && lastRefRef.current) {
    retriesRef.current -= 1;
    setVideo({ video: lastRefRef.current }).catch(() => {
      setError("Upload failed: " + msg.reason);
    });
  } else {
    setError("Upload failed: " + msg.reason);
  }
});

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)} />;