Tutorial

// 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: SanaMessage): SanaState {
  if (msg.type !== "state") return state;
  const d = msg.data;
  const next: SanaState = {
    running: d.running,
    started: d.started,
    paused: d.paused,
    currentChunk: d.current_chunk,
    currentPrompt: d.current_prompt,
    hasVideo: d.has_video,
    seed: d.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);

useReactorMessage((msg: SanaMessage) => {
  setState((s) => reduce(s, msg));
  // Transient set_video "decode failed" errors are auto-retried by
  // FileInput; don't flash the banner for them.
  if (msg.type === "command_error" && !isTransientDecodeFailure(msg)) {
    showCommandError(msg.data.reason);
  }
  if (msg.type === "generation_reset") {
    // Model reset clears its source video + prompt; mirror that locally.
    setSourceUrl(null);
    setResetNonce((n) => n + 1);
    setStageCleared(true);
  }
});

// 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(sendCommand, mode: SanaMode) {
  await sendCommand("set_mode", { mode });
  await sendCommand("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 sendCommand = useReactor((s) => s.sendCommand);
const uploadFile = useReactor((s) => s.uploadFile);

// 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 sendCommand("set_video", { video: ref });
  onSource(URL.createObjectURL(file)); // the stage plays this next to the output
}

useReactorMessage((msg: SanaMessage) => {
  if (msg.type !== "command_error") return;
  const { command, reason } = msg.data;
  if (command !== "set_video" || !reason.startsWith("decode failed")) return;
  if (retriesRef.current > 0 && lastRefRef.current) {
    retriesRef.current -= 1;
    sendCommand("set_video", { video: lastRefRef.current }).catch(() => {
      setError("Upload failed: " + reason);
    });
  } else {
    setError("Upload failed: " + reason);
  }
});

import { ReactorView } from "@reactor-team/js-sdk";

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

const sendCommand = useReactor((s) => s.sendCommand);
const [text, setText] = useState("");

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

const send = (cmd: string, data: Record<string, unknown> = {}) =>
  sendCommand(cmd, data).catch(console.error);

{
  started &&
    (paused ? (
      <IconButton icon="play" label="Resume" onClick={() => send("resume")} />
    ) : (
      <IconButton icon="pause" label="Pause" onClick={() => send("pause")} />
    ));
}
<IconButton icon="reset" label="Reset" onClick={() => send("reset")} />;