Schema

reactor.on("message", (msg) => {
  switch (msg.type) {
    case "state":
      console.log(`Chunk ${msg.data.current_chunk} · frame ${msg.data.current_frame}`);
      console.log(`Running: ${msg.data.running} · prompt: ${msg.data.current_prompt}`);
      break;
    case "image_accepted":
      console.log(`Reference image set: ${msg.data.width}x${msg.data.height}`);
      break;
    case "generation_started":
      console.log(`Generation started: ${msg.data.prompt}`);
      break;
    case "command_error":
      console.error(`${msg.data.command} rejected: ${msg.data.reason}`);
      break;
  }
});

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

const reactor = new Reactor({
  modelName: "helios",
});

// Set up video display
const videoElement = document.getElementById("video") as HTMLVideoElement;
reactor.on("trackReceived", (name, track, stream) => {
  videoElement.srcObject = stream;
  videoElement.play().catch(console.warn);
});

// Listen for state updates
reactor.on("message", (msg) => {
  if (msg.type === "state") {
    document.getElementById("info")!.textContent =
      `Chunk: ${msg.data.current_chunk} | Frame: ${msg.data.current_frame}`;
  }
  if (msg.type === "chunk_complete") {
    console.log(`Now showing: ${msg.data.active_prompt}`);
  }
});

// Connect (see Authentication guide for how to obtain a token)
await reactor.connect(token);

// Set a seed for reproducibility
await reactor.sendCommand("set_seed", { seed: 42 });

// Schedule prompts for a cinematic sequence
await reactor.sendCommand("schedule_prompt", {
  prompt: "A peaceful forest at dawn, soft morning light filtering through the trees",
  chunk: 0,
});

await reactor.sendCommand("schedule_prompt", {
  prompt: "Sunlight breaking through the canopy, golden rays illuminating the forest floor",
  chunk: 5,
});

await reactor.sendCommand("schedule_prompt", {
  prompt: "A deer walking through the misty forest clearing",
  chunk: 10,
});

// Start generation
await reactor.sendCommand("start", {});

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

const reactor = new Reactor({
  modelName: "helios",
});

// Set up video display
const videoElement = document.getElementById("video") as HTMLVideoElement;
reactor.on("trackReceived", (name, track, stream) => {
  videoElement.srcObject = stream;
  videoElement.play().catch(console.warn);
});

// Connect
await reactor.connect(token);

// Upload a reference image
const fileInput = document.getElementById("file") as HTMLInputElement;
const imageFile = fileInput.files![0];
const imageRef = await reactor.uploadFile(imageFile);

// Set the image and prompt atomically. Sending set_image + set_prompt
// separately before start races: the image can land a chunk late, so the
// first chunk renders from the prompt alone. set_conditioning commits both
// in one message. See set_conditioning above.
await reactor.sendCommand("set_conditioning", {
  image: imageRef,
  prompt: "A cinematic slow zoom into the scene, golden hour lighting, gentle motion",
});

// Start generation
await reactor.sendCommand("start", {});

// Later: swap to a new image mid-generation
const newInput = document.getElementById("new-file") as HTMLInputElement;
const newRef = await reactor.uploadFile(newInput.files![0]);
await reactor.sendCommand("set_image", { image: newRef });