varg.ai-sdk 0.1.1 → 0.4.0-alpha.1

package/src/react/layouts/grid.tsx

@@ -0,0 +1,28 @@
+import type { VargElement } from "../types";
+
+export const Grid = ({
+  columns,
+  rows,
+  children,
+  resize = "contain",
+}: {
+  columns?: number;
+  rows?: number;
+  children: VargElement[];
+  resize?: "cover" | "contain" | "stretch";
+}) => {
+  const cols = columns ?? children.length;
+  const rowCount = rows ?? Math.ceil(children.length / cols);
+  const positioned = children.map((el, i) => ({
+    ...el,
+    props: {
+      ...el.props,
+      left: `${((i % cols) / cols) * 100}%`,
+      top: `${(Math.floor(i / cols) / rowCount) * 100}%`,
+      width: `${(1 / cols) * 100}%`,
+      height: `${(1 / rowCount) * 100}%`,
+      resize,
+    },
+  }));
+  return <>{positioned}</>;
+};

package/src/react/layouts/index.ts

@@ -0,0 +1,2 @@
+export { Grid } from "./grid";
+export { SplitLayout } from "./split";

package/src/react/layouts/split.tsx

@@ -0,0 +1,20 @@
+import type { VargElement } from "../types";
+import { Grid } from "./grid";
+
+export const SplitLayout = ({
+  left,
+  right,
+  direction = "horizontal",
+}: {
+  left: VargElement;
+  right: VargElement;
+  direction?: "horizontal" | "vertical";
+}) => (
+  <Grid
+    columns={direction === "horizontal" ? 2 : 1}
+    rows={direction === "vertical" ? 2 : 1}
+  >
+    {left}
+    {right}
+  </Grid>
+);

package/src/react/react.test.ts

@@ -0,0 +1,309 @@
+import { describe, expect, test } from "bun:test";
+import { existsSync, unlinkSync } from "node:fs";
+import { fal } from "../ai-sdk/providers/fal-provider";
+import {
+  Animate,
+  Captions,
+  Clip,
+  Image,
+  Packshot,
+  Render,
+  render,
+  Slider,
+  Split,
+  Swipe,
+  Title,
+  Video,
+} from "./index";
+
+describe("varg-react elements", () => {
+  test("Render creates correct element structure", () => {
+    const element = Render({
+      width: 1280,
+      height: 720,
+      fps: 30,
+      children: [],
+    });
+
+    expect(element.type).toBe("render");
+    expect(element.props.width).toBe(1280);
+    expect(element.props.height).toBe(720);
+    expect(element.props.fps).toBe(30);
+  });
+
+  test("Video creates correct element structure", () => {
+    const element = Video({
+      prompt: "ocean waves",
+      model: fal.videoModel("wan-2.5"),
+    });
+
+    expect(element.type).toBe("video");
+    expect(element.props.prompt).toBe("ocean waves");
+  });
+
+  test("Clip creates correct element structure", () => {
+    const element = Clip({
+      duration: 5,
+      transition: { name: "fade", duration: 0.5 },
+      children: [],
+    });
+
+    expect(element.type).toBe("clip");
+    expect(element.props.duration).toBe(5);
+    expect(element.props.transition).toEqual({ name: "fade", duration: 0.5 });
+  });
+
+  test("Image creates correct element structure", () => {
+    const element = Image({
+      prompt: "fat tiger on couch",
+      model: fal.imageModel("flux-schnell"),
+      aspectRatio: "16:9",
+      zoom: "in",
+    });
+
+    expect(element.type).toBe("image");
+    expect(element.props.prompt).toBe("fat tiger on couch");
+    expect(element.props.aspectRatio).toBe("16:9");
+    expect(element.props.zoom).toBe("in");
+  });
+
+  test("Title creates correct element with text children", () => {
+    const element = Title({
+      position: "bottom",
+      color: "#ffffff",
+      children: "I'M IN DANGER",
+    });
+
+    expect(element.type).toBe("title");
+    expect(element.props.position).toBe("bottom");
+    expect(element.props.color).toBe("#ffffff");
+    expect(element.children).toContain("I'M IN DANGER");
+  });
+
+  test("Animate creates correct element with nested image", () => {
+    const image = Image({ prompt: "luigi in wheelchair" });
+    const element = Animate({
+      image,
+      model: fal.videoModel("wan-2.5"),
+      motion: "wheels spinning fast",
+      duration: 5,
+    });
+
+    expect(element.type).toBe("animate");
+    expect(element.props.image).toBe(image);
+    expect(element.props.motion).toBe("wheels spinning fast");
+    expect(element.props.duration).toBe(5);
+  });
+
+  test("nested composition builds correct tree", () => {
+    const root = Render({
+      width: 1080,
+      height: 1920,
+      children: [
+        Clip({
+          duration: 5,
+          children: [
+            Image({
+              prompt: "ralph wiggum",
+              model: fal.imageModel("flux-schnell"),
+            }),
+            Title({ children: "HELLO" }),
+          ],
+        }),
+        Clip({
+          duration: 3,
+          transition: { name: "fade", duration: 0.3 },
+          children: [
+            Image({
+              prompt: "fat tiger",
+              model: fal.imageModel("flux-schnell"),
+            }),
+          ],
+        }),
+      ],
+    });
+
+    expect(root.type).toBe("render");
+    expect(root.children.length).toBe(2);
+
+    const clip1 = root.children[0] as ReturnType<typeof Clip>;
+    expect(clip1.type).toBe("clip");
+    expect(clip1.children.length).toBe(2);
+
+    const clip2 = root.children[1] as ReturnType<typeof Clip>;
+    expect(clip2.type).toBe("clip");
+    expect(clip2.props.transition).toEqual({ name: "fade", duration: 0.3 });
+  });
+});
+
+describe("varg-react render", () => {
+  test("render throws on non-render root", async () => {
+    const clip = Clip({ duration: 5, children: [] });
+
+    expect(render(clip)).rejects.toThrow("Root element must be <Render>");
+  });
+
+  test("render requires model prop for image with prompt", async () => {
+    const root = Render({
+      width: 720,
+      height: 720,
+      children: [
+        Clip({
+          duration: 3,
+          children: [Image({ prompt: "test image without model" })],
+        }),
+      ],
+    });
+
+    expect(render(root)).rejects.toThrow("model");
+  });
+});
+
+describe("layout renderers", () => {
+  const testImage1 = "media/cyberpunk-street.png";
+  const testImage2 = "media/fal-coffee-shop.png";
+  const outPath = "output/layout-test.mp4";
+
+  test("Split renders side-by-side images", async () => {
+    const root = Render({
+      width: 1280,
+      height: 720,
+      children: [
+        Clip({
+          duration: 2,
+          children: [
+            Split({
+              direction: "horizontal",
+              children: [
+                Image({ src: testImage1 }),
+                Image({ src: testImage2 }),
+              ],
+            }),
+          ],
+        }),
+      ],
+    });
+
+    const result = await render(root, { output: outPath, quiet: true });
+    expect(result).toBeInstanceOf(Uint8Array);
+    expect(result.length).toBeGreaterThan(0);
+    expect(existsSync(outPath)).toBe(true);
+    unlinkSync(outPath);
+  });
+
+  test(
+    "Slider renders with slide transitions",
+    async () => {
+      const root = Render({
+        width: 1280,
+        height: 720,
+        children: [
+          Clip({
+            duration: 4,
+            children: [
+              Slider({
+                direction: "horizontal",
+                children: [
+                  Image({ src: testImage1 }),
+                  Image({ src: testImage2 }),
+                ],
+              }),
+            ],
+          }),
+        ],
+      });
+
+      const result = await render(root, { output: outPath, quiet: true });
+      expect(result).toBeInstanceOf(Uint8Array);
+      expect(existsSync(outPath)).toBe(true);
+      unlinkSync(outPath);
+    },
+    { timeout: 30000 },
+  );
+
+  test(
+    "Swipe renders with swipe animation",
+    async () => {
+      const root = Render({
+        width: 1280,
+        height: 720,
+        children: [
+          Clip({
+            duration: 4,
+            children: [
+              Swipe({
+                direction: "left",
+                interval: 2,
+                children: [
+                  Image({ src: testImage1 }),
+                  Image({ src: testImage2 }),
+                ],
+              }),
+            ],
+          }),
+        ],
+      });
+
+      const result = await render(root, { output: outPath, quiet: true });
+      expect(result).toBeInstanceOf(Uint8Array);
+      expect(existsSync(outPath)).toBe(true);
+      unlinkSync(outPath);
+    },
+    { timeout: 30000 },
+  );
+
+  test("Packshot renders end card with logo and cta", async () => {
+    const root = Render({
+      width: 1280,
+      height: 720,
+      children: [
+        Clip({
+          duration: 3,
+          children: [
+            Packshot({
+              background: "#1a1a2e",
+              logo: testImage1,
+              logoPosition: "center",
+              logoSize: "40%",
+              cta: "Subscribe Now!",
+              ctaPosition: "bottom",
+              ctaColor: "#FFD700",
+              duration: 3,
+            }),
+          ],
+        }),
+      ],
+    });
+
+    const result = await render(root, { output: outPath, quiet: true });
+    expect(result).toBeInstanceOf(Uint8Array);
+    expect(existsSync(outPath)).toBe(true);
+    unlinkSync(outPath);
+  });
+
+  test(
+    "Captions burns subtitles from SRT file",
+    async () => {
+      const root = Render({
+        width: 1280,
+        height: 720,
+        children: [
+          Clip({
+            duration: 3,
+            children: [Image({ src: testImage1 })],
+          }),
+          Captions({
+            srt: "media/dora-test.srt",
+            style: "tiktok",
+          }),
+        ],
+      });
+
+      const result = await render(root, { output: outPath, quiet: true });
+      expect(result).toBeInstanceOf(Uint8Array);
+      expect(existsSync(outPath)).toBe(true);
+      unlinkSync(outPath);
+    },
+    { timeout: 30000 },
+  );
+});

package/src/react/render.ts

@@ -0,0 +1,21 @@
+import { renderRoot } from "./renderers";
+import type { RenderOptions, VargElement } from "./types";
+
+export async function render(
+  element: VargElement,
+  options: RenderOptions = {},
+): Promise<Uint8Array> {
+  if (element.type !== "render") {
+    throw new Error("Root element must be <Render>");
+  }
+
+  return renderRoot(element as VargElement<"render">, options);
+}
+
+export const renderStream = {
+  async *stream(element: VargElement, options: RenderOptions = {}) {
+    yield { type: "start", progress: 0 };
+    const result = await render(element, options);
+    yield { type: "complete", progress: 100, result };
+  },
+};

package/src/react/renderers/animate.ts

@@ -0,0 +1,59 @@
+import { File } from "../../ai-sdk/file";
+import type { generateVideo } from "../../ai-sdk/generate-video";
+import type { AnimateProps, VargElement } from "../types";
+import type { RenderContext } from "./context";
+import { renderImage } from "./image";
+import { addTask, completeTask, startTask } from "./progress";
+import { computeCacheKey, resolvePath } from "./utils";
+
+export async function renderAnimate(
+  element: VargElement<"animate">,
+  ctx: RenderContext,
+): Promise<string> {
+  const props = element.props as AnimateProps;
+
+  let imagePath: string;
+  if (props.src) {
+    imagePath = props.src;
+  } else if (props.image) {
+    if (props.image.type !== "image") {
+      throw new Error(
+        `Animate 'image' prop must be an <Image /> element, got <${props.image.type} />`,
+      );
+    }
+    imagePath = await renderImage(props.image as VargElement<"image">, ctx);
+  } else {
+    throw new Error("Animate element requires either 'src' or 'image' prop");
+  }
+
+  const model = props.model;
+  if (!model) {
+    throw new Error("Animate element requires 'model' prop");
+  }
+
+  const imageData = await Bun.file(resolvePath(imagePath)).arrayBuffer();
+  const cacheKey = computeCacheKey(element);
+
+  const modelId = typeof model === "string" ? model : model.modelId;
+  const taskId = ctx.progress
+    ? addTask(ctx.progress, "animate", modelId)
+    : null;
+  if (taskId && ctx.progress) startTask(ctx.progress, taskId);
+
+  const { video } = await ctx.generateVideo({
+    model,
+    prompt: {
+      text: props.motion ?? "",
+      images: [new Uint8Array(imageData)],
+    },
+    duration: props.duration ?? 5,
+    cacheKey,
+  } as Parameters<typeof generateVideo>[0]);
+
+  if (taskId && ctx.progress) completeTask(ctx.progress, taskId);
+
+  const tempPath = await File.toTemp(video);
+  ctx.tempFiles.push(tempPath);
+
+  return tempPath;
+}