vargai 0.4.0-alpha4 → 0.4.0-alpha40

package/src/studio/ui/index.html

@@ -763,8 +763,8 @@
   <script src="https://unpkg.com/drawflow@0.0.60/dist/drawflow.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.45.0/min/vs/loader.js"></script>
   <script>
-    const DEFAULT_CODE = `import { fal } from "../fal-provider";
-import { Clip, Image, Render, Video } from "../react";
+    const DEFAULT_CODE = `import { fal } from "vargai/ai";
+import { Clip, Image, Render, Video } from "vargai/react";
 
 export default (
   <Render width={1080} height={1920}>

package/src/tests/all.test.ts

@@ -5,7 +5,7 @@
  * Run with: bun run src/tests/all.test.ts
  *
  * Note: Most tests require API keys to be set in environment variables:
- * - FAL_KEY
+ * - FAL_API_KEY (or FAL_KEY)
  * - REPLICATE_API_TOKEN
  * - ELEVENLABS_API_KEY
  * - GROQ_API_KEY
@@ -318,7 +318,7 @@ await test(
     }
     console.log(`   Generated: ${result.data.images[0].url}`);
   },
-  !hasApiKey("FAL_KEY"),
+  !hasApiKey(["FAL_API_KEY", "FAL_KEY"]),
 );
 
 await test(
@@ -334,7 +334,7 @@ await test(
     }
     console.log(`   Generated: ${result.data.video.url}`);
   },
-  !hasApiKey("FAL_KEY"),
+  !hasApiKey(["FAL_API_KEY", "FAL_KEY"]),
 );
 
 // Replicate tests
@@ -455,7 +455,7 @@ await test(
     }
     console.log(`   Output: ${JSON.stringify(result.output).slice(0, 100)}...`);
   },
-  !hasApiKey("FAL_KEY"),
+  !hasApiKey(["FAL_API_KEY", "FAL_KEY"]),
 );
 
 await test(

package/src/tests/index.ts

@@ -20,7 +20,7 @@ Available test files:
   bun run src/tests/all.test.ts
     Comprehensive tests including live API calls.
     Requires API keys set in environment variables:
-    - FAL_KEY
+    - FAL_API_KEY (or FAL_KEY)
     - REPLICATE_API_TOKEN  
     - ELEVENLABS_API_KEY
     - GROQ_API_KEY

package/test-slot-grid.tsx

@@ -0,0 +1,19 @@
+import { Clip, Render, render, Video } from "./src/react";
+import { Grid, Slot } from "./src/react/layouts";
+
+const video1 = <Video src="media/fitness-demo.mp4" />;
+const video2 = <Video src="media/kangaroo-scene.mp4" />;
+
+await render(
+  <Render width={1080} height={1920}>
+    <Clip duration={3}>
+      <Grid columns={1} rows={2}>
+        <Slot class="fit-cover pos-top">{video1}</Slot>
+        <Slot class="fit-cover pos-bottom">{video2}</Slot>
+      </Grid>
+    </Clip>
+  </Render>,
+  { output: "output/test-slot-grid.mp4" },
+);
+
+console.log("done: output/test-slot-grid.mp4");

package/test-slot-userland.tsx

@@ -0,0 +1,30 @@
+import { Clip, Render, render, Video } from "./src/react";
+import { Slot, Split } from "./src/react/layouts";
+
+const video1 = <Video src="media/fitness-demo.mp4" />;
+const video2 = <Video src="media/kangaroo-scene.mp4" />;
+
+const positions = [
+  ["pos-top", "pos-top"],
+  ["pos-bottom", "pos-bottom"],
+  ["pos-center", "pos-center"],
+  ["pos-top", "pos-bottom"],
+] as const;
+
+for (const [pos1, pos2] of positions) {
+  const outFile = `output/test-slot-userland-${pos1}-${pos2}.mp4`;
+
+  await render(
+    <Render width={1080} height={1920}>
+      <Clip duration={3}>
+        <Split direction="vertical">
+          <Slot class={`fit-cover ${pos1}`}>{video1}</Slot>
+          <Slot class={`fit-cover ${pos2}`}>{video2}</Slot>
+        </Split>
+      </Clip>
+    </Render>,
+    { output: outFile },
+  );
+
+  console.log(`done: ${outFile}`);
+}

package/test-sync-v2.ts

@@ -0,0 +1,30 @@
+/**
+ * Quick sync-v2 lipsync test
+ * Required env: FAL_API_KEY
+ */
+
+import { File, fal, generateVideo } from "./src/ai-sdk/index";
+
+async function main() {
+  const videoPath = "output/extracted-videos/tyler/tyler-10.mp4";
+  const audioPath = "output/extracted-videos/tyler/tyler-10.mp4"; // use same video's audio for now
+
+  console.log("loading media files...");
+  const videoFile = File.fromPath(videoPath);
+  const audioFile = File.fromPath(audioPath);
+
+  console.log("lipsyncing with sync-v2...");
+  const { video } = await generateVideo({
+    model: fal.videoModel("sync-v2"),
+    prompt: {
+      video: await videoFile.data(),
+      audio: await audioFile.data(),
+    },
+  });
+
+  console.log(`lipsynced video: ${video.uint8Array.byteLength} bytes`);
+  await Bun.write("output/test-sync-v2.mp4", video.uint8Array);
+  console.log("done! saved to output/test-sync-v2.mp4");
+}
+
+main().catch(console.error);

package/test-sync-v2.tsx

@@ -0,0 +1,29 @@
+/**
+ * Simple sync-v2 lipsync test in React format
+ * Takes an existing video + audio and lipsyncs them together
+ *
+ * Run: bunx vargai render test-sync-v2.tsx
+ */
+import { fal } from "vargai/ai";
+import { Clip, Render, Video } from "vargai/react";
+
+// Source video (existing talking head video)
+const SOURCE_VIDEO = "output/extracted-videos/tyler/tyler-10.mp4";
+
+// Source audio (pre-generated speech)
+const SOURCE_AUDIO = "output/test-speech.mp3";
+
+export default (
+  <Render width={1080} height={1920}>
+    <Clip duration={10}>
+      {/* Lipsync: video + audio -> sync-v2 */}
+      <Video
+        prompt={{
+          video: SOURCE_VIDEO,
+          audio: SOURCE_AUDIO,
+        }}
+        model={fal.videoModel("sync-v2")}
+      />
+    </Clip>
+  </Render>
+);

package/tsconfig.json

@@ -35,7 +35,7 @@
       "vargai/jsx-dev-runtime": ["./src/react/runtime/jsx-dev-runtime.ts"]
     }
   },
-  "include": ["src/**/*"],
+  "include": ["src/**/*", "launch-videos/**/*"],
   "exclude": [
     "node_modules",
     "action",

package/video.tsx

@@ -0,0 +1,7 @@
+export default (
+  <Render>
+    <Clip>
+      <Video prompt="a cat coding" model={fal.videoModel("wan-2.5")} />
+    </Clip>
+  </Render>
+);

package/src/ai-sdk/providers/editly/ffmpeg.ts

@@ -1,60 +0,0 @@
-import { $ } from "bun";
-import type { VideoInfo } from "./types";
-
-const FFMPEG_COMMON_ARGS = ["-hide_banner", "-loglevel", "error"];
-
-export async function ffmpeg(
-  args: string[],
-  options?: { stdin?: "pipe" | "ignore"; stdout?: "pipe" | "inherit" },
-): Promise<{ stdout: Buffer; exitCode: number }> {
-  const proc = Bun.spawn(["ffmpeg", ...FFMPEG_COMMON_ARGS, ...args], {
-    stdin: options?.stdin ?? "ignore",
-    stdout: options?.stdout === "inherit" ? "inherit" : "pipe",
-    stderr: "inherit",
-  });
-
-  const stdout =
-    options?.stdout === "inherit"
-      ? Buffer.alloc(0)
-      : Buffer.from(await new Response(proc.stdout).arrayBuffer());
-  const exitCode = await proc.exited;
-
-  return { stdout, exitCode };
-}
-
-export async function ffprobe(path: string): Promise<VideoInfo> {
-  const result =
-    await $`ffprobe -v error -show_entries stream=width,height,r_frame_rate,codec_type -show_entries format=duration -of json ${path}`.json();
-
-  const videoStream = result.streams?.find(
-    (s: { codec_type: string }) => s.codec_type === "video",
-  );
-  const duration = parseFloat(result.format?.duration ?? "0");
-
-  let fps: number | undefined;
-  const framerateStr: string | undefined = videoStream?.r_frame_rate;
-  if (framerateStr) {
-    const parts = framerateStr.split("/").map(Number);
-    const num = parts[0];
-    const den = parts[1];
-    if (den && den > 0 && num) fps = num / den;
-  }
-
-  return {
-    duration,
-    width: videoStream?.width,
-    height: videoStream?.height,
-    fps,
-    framerateStr,
-  };
-}
-
-export async function readDuration(path: string): Promise<number> {
-  const result =
-    await $`ffprobe -v error -show_entries format=duration -of default=noprint_wrappers=1:nokey=1 ${path}`.text();
-  return parseFloat(result.trim());
-}
-
-export function multipleOf2(n: number): number {
-  return Math.round(n / 2) * 2;
-}

package/src/react/renderers/animate.ts

@@ -1,59 +0,0 @@
-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;
-}