Pika H3 Flex overview

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

const reactor = new Reactor({ modelName: "reactor/pika-h3-flex" });
const video = document.querySelector("video")!;
const audio = document.querySelector("audio")!;

reactor.on("trackReceived", (name, _track, stream) => {
  if (name === "main_video") {
    video.srcObject = stream;
    void video.play().catch(console.error);
  }
  if (name === "main_audio") {
    audio.srcObject = stream;
    void audio.play().catch(console.error);
  }
});

reactor.on("message", async (message) => {
  if (message.type === "clip_generated") {
    const { clip } = message.data as { clip: { clip_id: string } };
    await reactor.sendCommand("play", { clip_id: clip.clip_id });
  }
});

reactor.on("statusChanged", async (status) => {
  if (status !== "ready") return;
  await reactor.sendCommand("enqueue", {
    prompt:
      "A ceramic artist turns a blue bowl on a wheel in a sunlit studio. The camera slowly pushes in. The wheel hums and rain taps the window. No music.",
  });
});

await reactor.connect(await getToken()); // Implement getToken() on your server.

import {
  PikaH3FlexProvider,
  PikaH3FlexMainVideoView,
  usePikaH3Flex,
  usePikaH3FlexClipGenerated,
} from "@reactor-models/pika-h3-flex";

export function App({ token }: { token: string }) {
  return (
    <PikaH3FlexProvider jwtToken={token} connectOptions={{ autoConnect: true }}>
      <Player />
    </PikaH3FlexProvider>
  );
}

function Player() {
  const { status, enqueue, play } = usePikaH3Flex();

  usePikaH3FlexClipGenerated((message) => {
    void play({ clip_id: message.clip.clip_id });
  });

  return (
    <>
      <PikaH3FlexMainVideoView audioTrack="main_audio" muted={false} className="w-full" />
      <button
        disabled={status !== "ready"}
        onClick={() =>
          void enqueue({
            prompt:
              "A ceramic artist turns a blue bowl on a wheel in a sunlit studio. The camera slowly pushes in. The wheel hums and rain taps the window. No music.",
          })
        }
      >
        Generate
      </button>
    </>
  );
}

import asyncio
import os
from reactor_sdk import Reactor, ReactorStatus

async def main():
    reactor = Reactor(model_name="reactor/pika-h3-flex",
                      api_key=os.environ["REACTOR_API_KEY"])

    @reactor.on_status(ReactorStatus.READY)
    async def on_ready(status):
        await reactor.send_command("enqueue", {
            "prompt": "A ceramic artist turns a blue bowl on a wheel in a sunlit studio. The camera slowly pushes in. The wheel hums and rain taps the window. No music.",
        })

    @reactor.on_message
    def on_message(msg):
        if msg["type"] == "clip_generated":
            asyncio.ensure_future(
                reactor.send_command("play", {"clip_id": msg["data"]["clip"]["clip_id"]})
            )

    await reactor.connect()
    await asyncio.Event().wait()  # run until interrupted

asyncio.run(main())