FastH3 tutorial

import { NextResponse } from "next/server";

const TOKEN_LIFETIME_SECONDS = 3600;

export async function POST() {
  const apiKey = process.env.REACTOR_API_KEY!;
  const res = await fetch("https://api.reactor.inc/tokens", {
    method: "POST",
    headers: {
      "Reactor-API-Key": apiKey,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      expires_after: TOKEN_LIFETIME_SECONDS,
      authorization_details: [
        {
          type: "session",
          resources: { models: { match: ["reactor/fast-h3"] } },
          max_sessions: 1,
        },
      ],
    }),
  });
  const { jwt, expires_at } = await res.json();
  return NextResponse.json(
    { jwt, expires_at },
    { headers: { "Cache-Control": "private, no-store" } },
  );
}

import { FastH3Provider } from "@reactor-models/fast-h3";

const TOKEN_REFRESH_SKEW_MS = 60_000;
let cachedToken: { jwt: string; expiresAtMs: number } | null = null;
let inflightToken: Promise<string> | null = null;

async function fetchToken(): Promise<string> {
  if (cachedToken && Date.now() < cachedToken.expiresAtMs - TOKEN_REFRESH_SKEW_MS) {
    return cachedToken.jwt;
  }
  if (inflightToken) return inflightToken; // coalesce parallel hops
  inflightToken = (async () => {
    try {
      const r = await fetch("/api/reactor/token", { cache: "no-store" });
      const { jwt, expires_at } = await r.json();
      cachedToken = { jwt, expiresAtMs: expires_at * 1000 };
      return jwt;
    } finally {
      inflightToken = null;
    }
  })();
  return inflightToken;
}

export function FastH3App() {
  return <FastH3Provider jwtToken={fetchToken}>{/* … */}</FastH3Provider>;
}

const { status, connect, enqueue, setAutoplay, getState } = useFastH3();

async function queueEpisode() {
  // Lazy connect: compose offline; the session starts only now.
  if (status !== "ready") await connect();

  // Capacity-gate against a FRESH snapshot — a partly queued episode is
  // worse than a clear refusal up front.
  const state = await getState();
  if (state) {
    const free = state.generation_capacity - state.generation_queued;
    if (free < scenes.length) {
      throw new Error(`The generation queue has ${free} free slot(s)…`);
    }
    // Autoplay makes the playout queue self-starting, and it is what
    // performs the seamless chained handover between an episode's scenes.
    if (!state.autoplay) await setAutoplay({ enabled: true });
  }

  const episode = crypto.randomUUID().slice(0, 12);
  let previousClipId: string | undefined;
  for (const [index, prompt] of scenes.entries()) {
    const reply = await enqueue({
      prompt,
      metadata: makeTag({ episode, title, scene: index + 1, scenes: scenes.length }),
      // Scene 1 opens from text; every later scene opens on the previous
      // scene's final frame. Hard-cut prompts are what keep the chain sharp.
      ...(previousClipId ? { continue_from_clip_id: previousClipId } : {}),
    });
    if (!reply) {
      // Refused — the broadcast command_error carries the model's reason.
      throw new Error(`Scene ${index + 1} was refused; the episode stops here.`);
    }
    previousClipId = reply.clip.clip_id;
  }
}

const { status, stop, setAutoplay } = useFastH3();
useFastH3ClipStarted((msg) => {
  const tag = parseTag(msg.clip.metadata);
  setLabel(tag ? `${tag.title} — scene ${tag.scene}/${tag.scenes}` : msg.clip.prompt.slice(0, 60));
});

if (!snapshot.playing)
  return <p>The stream holds on black between clips. Queue an episode … to roll.</p>;

return <button onClick={() => void stop()}>{snapshot.autoplay ? "Skip" : "Stop"}</button>;

const { requestClip, downloadClipAsFile } = useFastH3();

const clip = await requestClip(10); // last 10 seconds of the live stream
await downloadClipAsFile(clip, "fast-h3-clip.mp4");

useFastH3CommandError((msg) =>
  setErrors((prev) => [`${msg.command}: ${msg.reason}`, ...prev].slice(0, 3)),
);