@odori/cli 0.0.7 → 0.0.8

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/studio/src/Studio.tsx

@@ -4,6 +4,7 @@ import {VideosView} from "./views/VideosView";
 import {ComponentsView} from "./views/ComponentsView";
 import {BrandsView} from "./views/BrandsView";
 import {AssetsView} from "./views/AssetsView";
+import {IntegrationsView} from "./views/IntegrationsView";
 import {HomeView} from "./views/HomeView";
 import {CommandPalette} from "./components/CommandPalette";
 import {Wordmark} from "./components/Wordmark";
@@ -11,7 +12,7 @@ import {Button, Icon, Kbd} from "./components/ui";
 import {Settings} from "./components/Settings";
 import {useTheme} from "./theme";
 
-const VIEWS = ["videos", "components", "brands", "assets"] as const;
+const VIEWS = ["videos", "components", "brands", "assets", "integrations"] as const;
 
 export type StudioView = (typeof VIEWS)[number] | "home";
 
@@ -145,6 +146,7 @@ export const Studio = () => {
           <BrandsView selection={route.selection} onSelect={(name) => navigate("brands", name)} />
         ) : null}
         {route.view === "assets" ? <AssetsView /> : null}
+        {route.view === "integrations" ? <IntegrationsView /> : null}
         {route.view === "home" ? <HomeView onOpen={(view, selection) => navigate(view, selection)} /> : null}
       </main>
 

package/studio/src/studio.css

@@ -1894,3 +1894,109 @@ html[data-inspector="collapsed"] .main:not([data-single="true"]) {
   margin-left: auto;
   text-transform: uppercase;
 }
+
+/* Integrations: one provider per row, the key one-way by design. */
+.integrations-view {
+  max-width: 640px;
+  padding: 24px;
+  display: grid;
+  gap: 16px;
+}
+
+.integration-list {
+  list-style: none;
+  margin: 12px 0 0;
+  padding: 0;
+  display: grid;
+  gap: 12px;
+}
+
+.integration {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 14px 16px;
+  display: grid;
+  gap: 10px;
+}
+
+.integration-head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.integration-title {
+  font-weight: 600;
+}
+
+.integration-docs {
+  margin-left: auto;
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.integration-form {
+  display: flex;
+  gap: 8px;
+}
+
+.integration-input {
+  flex: 1;
+  min-width: 0;
+  background: var(--field, transparent);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 6px 10px;
+  color: inherit;
+  font: inherit;
+  font-size: 13px;
+}
+
+.integration-usage {
+  margin: 0;
+  font-size: 12px;
+  color: var(--muted);
+  overflow-x: auto;
+}
+
+/* Generate: prompt to registered role, the terminal's numbers rendered. */
+.generate-prompt {
+  width: 100%;
+  resize: vertical;
+  background: var(--field, transparent);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 8px 10px;
+  color: inherit;
+  font: inherit;
+  font-size: 13px;
+}
+
+.generate-controls {
+  display: flex;
+  align-items: end;
+  gap: 10px;
+}
+
+.generate-field {
+  display: grid;
+  gap: 4px;
+  font-size: 11px;
+  color: var(--muted);
+}
+
+.generate-field input {
+  background: var(--field, transparent);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 5px 8px;
+  color: inherit;
+  font: inherit;
+  font-size: 13px;
+  width: 120px;
+}
+
+.generate-report {
+  display: grid;
+  gap: 8px;
+}

package/studio/src/views/IntegrationsView.tsx

@@ -0,0 +1,270 @@
+import {useEffect, useState} from "react";
+import {Badge, Button, Empty, SectionTitle} from "../components/ui";
+
+type ProviderStatus = {
+  name: string;
+  title: string;
+  kind: string;
+  keyVariable: string;
+  docsUrl: string;
+  source: "environment" | "stored" | null;
+};
+
+/**
+ * Where generation providers are connected.
+ *
+ * The page is deliberately one-way about secrets: a key can be typed here and
+ * sent to the local server once, but it never comes back — status is a source
+ * ("environment", "stored") and nothing else. A key from the environment wins
+ * over a stored one and cannot be edited here, because the place to change an
+ * environment is the environment.
+ */
+export const IntegrationsView = () => {
+  const [providers, setProviders] = useState<ProviderStatus[] | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const load = async () => {
+    try {
+      const response = await fetch("/__odori/integrations");
+      if (!response.ok) throw new Error(`${response.status}`);
+      const body = (await response.json()) as {providers: ProviderStatus[]};
+      setProviders(body.providers);
+    } catch {
+      setError("Studio could not reach its own server. Is odori dev still running?");
+    }
+  };
+
+  useEffect(() => {
+    void load();
+  }, []);
+
+  if (error) return <Empty title="Integrations unavailable">{error}</Empty>;
+  if (!providers) return <Empty title="Loading" />;
+
+  return (
+    <div className="integrations-view">
+      <section>
+        <SectionTitle>Music</SectionTitle>
+        <p className="hint">
+          A provider generates at author time only: the track lands in <code>public/audio</code>, prepared and
+          committed, and the render never calls a network. Keys live in <code>~/.config/odori</code> on this machine —
+          never in the project, and never readable from this page.
+        </p>
+        <ul className="integration-list">
+          {providers.map((provider) => (
+            <IntegrationRow key={provider.name} provider={provider} onChanged={load} />
+          ))}
+        </ul>
+      </section>
+      {providers.some((provider) => provider.source !== null) ? (
+        <section>
+          <SectionTitle>Generate a bed</SectionTitle>
+          <GeneratePanel />
+        </section>
+      ) : null}
+    </div>
+  );
+};
+
+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[];
+};
+
+/**
+ * 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.
+ */
+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>
+  );
+};
+
+const IntegrationRow = ({provider, onChanged}: {provider: ProviderStatus; onChanged: () => Promise<void>}) => {
+  const [draft, setDraft] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [message, setMessage] = useState<string | null>(null);
+
+  const submit = async (key: string) => {
+    setBusy(true);
+    setMessage(null);
+    try {
+      const response = await fetch("/__odori/integrations", {
+        method: "POST",
+        headers: {"content-type": "application/json"},
+        body: JSON.stringify({provider: provider.name, key}),
+      });
+      const body = (await response.json()) as {error?: string; verified?: boolean | null};
+      if (!response.ok) {
+        setMessage(body.error ?? "The key was not accepted.");
+        return;
+      }
+      setDraft("");
+      setMessage(
+        key === ""
+          ? "Key removed."
+          : body.verified
+            ? "Connected. The key was checked against the provider and stored on this machine."
+            : "Stored. The provider could not be reached to check it, so the first generation will tell.",
+      );
+      await onChanged();
+    } catch {
+      setMessage("Studio could not reach its own server.");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const connected = provider.source !== null;
+  const fromEnvironment = provider.source === "environment";
+
+  return (
+    <li className="integration">
+      <div className="integration-head">
+        <span className="integration-title">{provider.title}</span>
+        {connected ? (
+          <Badge tone="success">{fromEnvironment ? `connected · ${provider.keyVariable}` : "connected"}</Badge>
+        ) : (
+          <Badge tone="warning">not configured</Badge>
+        )}
+        <a className="integration-docs" href={provider.docsUrl} target="_blank" rel="noreferrer">
+          docs
+        </a>
+      </div>
+      {fromEnvironment ? (
+        <p className="hint">
+          The key comes from <code>{provider.keyVariable}</code> in the environment, which always wins over a stored
+          one. Change it where the environment is set.
+        </p>
+      ) : (
+        <form
+          className="integration-form"
+          onSubmit={(event) => {
+            event.preventDefault();
+            if (draft.trim()) void submit(draft.trim());
+          }}
+        >
+          <input
+            className="integration-input"
+            type="password"
+            autoComplete="off"
+            placeholder={connected ? "Replace the stored key" : `Paste an API key (${provider.keyVariable})`}
+            value={draft}
+            onChange={(event) => setDraft(event.target.value)}
+            disabled={busy}
+            aria-label={`${provider.title} API key`}
+          />
+          <Button disabled={busy || !draft.trim()} onClick={() => void submit(draft.trim())}>
+            {connected ? "Replace" : "Connect"}
+          </Button>
+          {connected ? (
+            <Button disabled={busy} onClick={() => void submit("")}>
+              Disconnect
+            </Button>
+          ) : null}
+        </form>
+      )}
+      {message ? <p className="hint">{message}</p> : null}
+      <p className="integration-usage">
+        <code>odori bed "steady ambient, no drums" --generate --role bed.main</code>
+      </p>
+    </li>
+  );
+};