@odori/cli 0.0.7 → 0.0.9

package/src/render.ts

@@ -36,21 +36,41 @@ const renderUrl = (origin: string, target: RenderTarget, frame: number) => {
 };
 
 /**
- * Flags the render browser is launched with.
+ * Which graphics backend the render browser draws with.
  *
- * Headless Chrome has no GPU, so a WebGL context is simply refused and
- * `getContext("webgl2")` returns null: a video that post-processes through a
- * shader renders black in the export and nowhere else, which is the worst
- * shape a bug can take. This turns on ANGLE's software backend, which draws
- * the same picture on any machine and is therefore the right one for a
- * renderer that has to agree with itself across parallel workers.
+ * Not a menu of backend names. Remotion offers angle, swangle, egl, vulkan and
+ * two more, and the author has to learn ANGLE's taxonomy and then guess. The
+ * only question worth asking is whether this render is the artifact or a look
+ * at it, so that is the only question asked.
  *
- * Measured against the pinned build rather than guessed. The combination that
- * reads as obvious, `--use-gl=angle --use-angle=swiftshader`, leaves WebGL2
- * off; this flag alone turns it on. Nothing changes for a video that never
- * asks for a GL context.
+ * `software` is ANGLE's SwiftShader: the same pixels on every machine, which
+ * is what a cache, a parallel render and a byte-for-byte test all depend on.
+ * `gpu` uses whatever the machine has.
+ *
+ * Measured on this pipeline at 1080p, 60 frames, frame skip off, and the
+ * reason both exist:
+ *
+ *   five full-screen post-processing passes   86ms software   81ms gpu
+ *   a raymarch that exits early on most rays  46ms software   38ms gpu
+ *   1500 fixed iterations, no early exit     507ms software   37ms gpu
+ *
+ * The GPU sits at under 40ms whatever the shader, because it is still waiting
+ * on the DOM capture and the encode rather than on itself. Software tracks the
+ * shader. So for post-processing the choice is worth nothing, and for work
+ * that is genuinely per-pixel expensive it is worth fourteen times, which is
+ * the difference between iterating and not.
  */
-export const BROWSER_ARGS = ["--enable-unsafe-swiftshader"];
+export type Graphics = "software" | "gpu";
+
+export const DEFAULT_GRAPHICS: Graphics = "software";
+
+/*
+ * Measured rather than guessed: `--use-gl=angle --use-angle=swiftshader`, the
+ * combination that reads as obvious, leaves WebGL2 unavailable in the pinned
+ * build. These are the two that work.
+ */
+export const browserArgs = (graphics: Graphics = DEFAULT_GRAPHICS): string[] =>
+  graphics === "gpu" ? ["--use-gl=angle", "--use-angle=default"] : ["--enable-unsafe-swiftshader"];
 
 export type RenderPage = {browser: Browser; page: Page; errors: string[]};
 
@@ -59,9 +79,10 @@ export const openRenderPage = async (
   origin: string,
   target: RenderTarget,
   config: ResolvedConfig,
+  graphics: Graphics = DEFAULT_GRAPHICS,
 ): Promise<RenderPage> => {
   const executablePath = await browserExecutable(config);
-  const browser = await chromium.launch({executablePath, headless: true, args: BROWSER_ARGS});
+  const browser = await chromium.launch({executablePath, headless: true, args: browserArgs(graphics)});
   const page = await browser.newPage({
     viewport: {width: target.width, height: target.height},
     deviceScaleFactor: 1,
@@ -81,10 +102,24 @@ export const openRenderPage = async (
   return {browser, page, errors};
 };
 
-/** Seek through the readiness handshake instead of guessing with timeouts. */
-export const seekTo = async (page: Page, frame: number) => {
+/**
+ * Seek through the readiness handshake instead of guessing with timeouts.
+ *
+ * A frame that throws never publishes its marker, so the wait runs out and
+ * Playwright reports that a selector did not appear, which says nothing about
+ * why. The page errors gathered since the mount are the actual answer, and
+ * passing them in is the difference between "locator timed out" and the name
+ * of the function that threw. One malformed interpolate() call cost an
+ * afternoon to a message that had already been collected and thrown away.
+ */
+export const seekTo = async (page: Page, frame: number, errors?: string[]) => {
   await page.evaluate((next) => window.__ODORI_SET_FRAME__?.(next), frame);
-  await page.locator(`[data-odori-frame="${frame}"]`).waitFor({timeout: 20000});
+  try {
+    await page.locator(`[data-odori-frame="${frame}"]`).waitFor({timeout: 20000});
+  } catch (error) {
+    const reported = errors?.length ? ` ${[...new Set(errors)].join(" ")}` : "";
+    throw new Error(`Frame ${frame} never became ready.${reported}`, {cause: error});
+  }
 };
 
 export const readTimeline = async (page: Page) =>
@@ -240,11 +275,12 @@ export const renderStill = async (
   frame: number,
   output: string,
   config: ResolvedConfig,
+  graphics: Graphics = DEFAULT_GRAPHICS,
 ): Promise<string> => {
-  const {browser, page, errors} = await openRenderPage(origin, target, config);
+  const {browser, page, errors} = await openRenderPage(origin, target, config, graphics);
   try {
     await mkdir(dirname(output), {recursive: true});
-    await seekTo(page, frame);
+    await seekTo(page, frame, errors);
     await page.screenshot({path: output});
     if (errors.length > 0) log.warn(`The page reported an error while rendering: ${errors[0]}`);
     return output;
@@ -340,6 +376,7 @@ const openChunkEncoder = (
 
 type LaneOptions = {
   skipUnchanged: boolean;
+  graphics: Graphics;
   signal?: AbortSignal;
   encode: EncodeOptions;
   format: VideoFormat;
@@ -366,12 +403,12 @@ const captureLane = async (
   stats: CaptureStats,
   options: LaneOptions,
 ): Promise<void> => {
-  let session = await openRenderPage(origin, target, config);
+  let session = await openRenderPage(origin, target, config, options.graphics);
   const errors = session.errors;
 
   const reopen = async () => {
     await session.browser.close().catch(() => undefined);
-    session = await openRenderPage(origin, target, config);
+    session = await openRenderPage(origin, target, config, options.graphics);
     session.errors.push(...errors);
   };
 
@@ -414,7 +451,7 @@ const captureLane = async (
 
           for (let attempt = 0; ; attempt += 1) {
             try {
-              await seekTo(session.page, frame);
+              await seekTo(session.page, frame, session.errors);
               const signature = await signatureOf();
               let image: Buffer;
               if (options.skipUnchanged && previousFrame && signature === previousSignature) {
@@ -486,6 +523,8 @@ export type RenderOptions = {
   /** Container and codec. Defaults to H.264 in MP4. */
   format?: VideoFormat;
   skipUnchangedFrames?: boolean;
+  /** Which graphics backend draws the frames. Defaults to software. */
+  graphics?: Graphics;
   /**
    * Mix the composition's cues into the file. Defaults to true, because the
    * score is part of the video. Set false for a silent cut: a loop for a
@@ -516,7 +555,14 @@ export const renderMovie = async (
   const ffmpeg = await ffmpegExecutable(config);
   const browserPath = await browserExecutable(config);
   // Cached frames belong to the browser that drew them.
-  const renderer = (await resolveBrowser(config))?.version ?? browserPath;
+  /*
+   * The backend is part of what a frame is, so it is part of the key. Without
+   * it a --fast render would reuse chunks a software render drew, and the two
+   * are only similar, not identical: measured at 0.999993 SSIM. A video joined
+   * from both would carry a seam nothing could explain.
+   */
+  const graphics = options.graphics ?? DEFAULT_GRAPHICS;
+  const renderer = `${(await resolveBrowser(config))?.version ?? browserPath}:${graphics}`;
 
   const requested = Math.max(1, Math.min(options.concurrency ?? config.concurrency ?? defaultConcurrency(), 16));
   const encode: EncodeOptions = {
@@ -562,6 +608,7 @@ export const renderMovie = async (
       lanes.map((lane) =>
         captureLane(origin, target, config, lane, stats, {
           skipUnchanged,
+          graphics,
           signal: options.signal,
           encode,
           format: chunkFormat,

package/src/server.ts

@@ -42,6 +42,15 @@ const RESOLVED_ID = `\0${VIRTUAL_ID}`;
  * the aliases below are simply not installed — Vite then resolves `odori`
  * through its own exports map, which is what should happen.
  */
+/** The CLI's own published version, for the status bar. */
+const cliVersion = (): string => {
+  try {
+    return (createRequire(import.meta.url)("../package.json") as {version: string}).version;
+  } catch {
+    return "dev";
+  }
+};
+
 const runtimeSource = (root: string): string | null => {
   for (const from of [resolve(root, "package.json"), import.meta.url]) {
     try {
@@ -99,6 +108,7 @@ const odoriProjectPlugin = (config: ResolvedConfig, getGraph: () => ProjectGraph
         audioDir: config.audioDir,
         docsUrl: config.docsUrl,
         audio: graph.audio,
+        version: cliVersion(),
         sourceHash: graph.sourceHash,
         assets: config.assets ?? [],
         files: {

package/studio/src/Studio.tsx

@@ -149,7 +149,7 @@ export const Studio = () => {
       </main>
 
       <footer className="statusbar">
-        <span>source {project.sourceHash.slice(0, 10)}</span>
+        <span>odori {project.version}</span>
         <a className="statusbar-link" href={project.docsUrl} target="_blank" rel="noreferrer">
           Documentation
           <Icon name="external" />

package/studio/src/components/GenerateBed.tsx

@@ -0,0 +1,148 @@
+import {useEffect, useState} from "react";
+import {Button} from "./ui";
+import {INTEGRATIONS_CHANGED, loadProviders} from "../integrations";
+
+/**
+ * Prompt to registered role, without a terminal. The server walks the same
+ * path the CLI does — provider, prepare, register — and the numbers it prints
+ * there render here, warnings included, with the result playable in place.
+ *
+ * This lives with the audio library because that is where the result lands:
+ * a generated bed is an asset the moment the pipeline finishes with it. Keys
+ * are configured in Settings, under Audio; the panel gates on a provider
+ * being connected and unlocks in place when one is stored, announced over a
+ * window event so no reload sits between pasting a key and using it.
+ */
+export const GenerateBed = () => {
+  const [connected, setConnected] = useState<boolean | null>(null);
+
+  useEffect(() => {
+    const load = () => {
+      loadProviders()
+        .then((providers) => setConnected(providers.some((provider) => provider.source !== null)))
+        .catch(() => setConnected(null));
+    };
+    load();
+    window.addEventListener(INTEGRATIONS_CHANGED, load);
+    return () => window.removeEventListener(INTEGRATIONS_CHANGED, load);
+  }, []);
+
+  if (connected === null) return null;
+  if (!connected) {
+    return (
+      <p className="hint">
+        A provider can compose a bed from a prompt, prepared and levelled like any file you drop in. Open Settings
+        from the gear in the header and paste an API key under Audio; the panel unlocks here the moment one is
+        stored.
+      </p>
+    );
+  }
+
+  return <GeneratePanel />;
+};
+
+type GenerateReport = {
+  destination: string;
+  role: string;
+  url: string | null;
+  registered: {file: string; already: boolean} | null;
+  before: {lufs: number; peak: number; range: number};
+  after: {lufs: number; peak: number};
+  warnings: string[];
+};
+
+const GeneratePanel = () => {
+  const [prompt, setPrompt] = useState("");
+  const [seconds, setSeconds] = useState(60);
+  const [role, setRole] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [report, setReport] = useState<GenerateReport | null>(null);
+
+  const generate = async () => {
+    setBusy(true);
+    setError(null);
+    setReport(null);
+    try {
+      const response = await fetch("/__odori/generate", {
+        method: "POST",
+        headers: {"content-type": "application/json"},
+        body: JSON.stringify({prompt: prompt.trim(), seconds, role: role.trim() || undefined}),
+      });
+      const body = (await response.json()) as GenerateReport & {error?: string};
+      if (!response.ok) {
+        setError(body.error ?? "Generation failed.");
+        return;
+      }
+      setReport(body);
+    } catch {
+      setError("Studio could not reach its own server. Is odori dev still running?");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div className="integration generate-panel">
+      <textarea
+        className="generate-prompt"
+        rows={2}
+        placeholder="steady ambient bed, no drums, warm"
+        value={prompt}
+        onChange={(event) => setPrompt(event.target.value)}
+        disabled={busy}
+        aria-label="Prompt"
+      />
+      <div className="generate-controls">
+        <label className="generate-field">
+          seconds
+          <input
+            type="number"
+            min={5}
+            max={300}
+            value={seconds}
+            onChange={(event) => setSeconds(Number(event.target.value) || 60)}
+            disabled={busy}
+          />
+        </label>
+        <label className="generate-field">
+          role
+          <input
+            type="text"
+            placeholder="bed.main"
+            value={role}
+            onChange={(event) => setRole(event.target.value)}
+            disabled={busy}
+          />
+        </label>
+        <Button variant="primary" disabled={busy || !prompt.trim()} onClick={() => void generate()}>
+          {busy ? "Generating…" : "Generate"}
+        </Button>
+      </div>
+      {busy ? <p className="hint">The provider is composing, then the track is levelled to the stem target. A minute is normal.</p> : null}
+      {error ? <p className="hint">{error}</p> : null}
+      {report ? (
+        <div className="generate-report">
+          {report.url ? <audio controls src={report.url} style={{width: "100%"}} /> : null}
+          <p className="hint">
+            {report.destination} · {report.before.lufs.toFixed(1)} → {report.after.lufs.toFixed(1)} LUFS · range{" "}
+            {report.before.range.toFixed(1)} LU
+            {report.registered
+              ? report.registered.already
+                ? ` · "${report.role}" was already registered`
+                : ` · registered "${report.role}" in ${report.registered.file}`
+              : ""}
+          </p>
+          {report.warnings.map((warning) => (
+            <p key={warning} className="hint">
+              {warning}
+            </p>
+          ))}
+          <p className="integration-usage">
+            <code>{`<Audio src="${report.role}" fadeIn="1s" fadeOut="1.5s" duckUnder />`}</code>
+          </p>
+        </div>
+      ) : null}
+    </div>
+  );
+};