vargai 0.4.0-alpha4 → 0.4.0-alpha40

package/src/providers/fal.ts

@@ -7,6 +7,11 @@ import { fal } from "@fal-ai/client";
 import type { JobStatusUpdate, ProviderConfig } from "../core/schema/types";
 import { BaseProvider, ensureUrl } from "./base";
 
+const falApiKey = process.env.FAL_API_KEY ?? process.env.FAL_KEY;
+if (falApiKey) {
+  fal.config({ credentials: falApiKey });
+}
+
 export class FalProvider extends BaseProvider {
   readonly name = "fal";
 
@@ -369,6 +374,197 @@ export class FalProvider extends BaseProvider {
     console.log("[fal] completed!");
     return result;
   }
+
+  // ============================================================================
+  // Grok Imagine Video methods (xAI)
+  // ============================================================================
+
+  /**
+   * Generate video from text using Grok Imagine Video
+   * Supports 1-15 second videos at 480p or 720p resolution
+   */
+  async grokTextToVideo(args: {
+    prompt: string;
+    duration?: number;
+    aspectRatio?: "16:9" | "4:3" | "3:2" | "1:1" | "2:3" | "3:4" | "9:16";
+    resolution?: "480p" | "720p";
+  }) {
+    const modelId = "xai/grok-imagine-video/text-to-video";
+
+    console.log(`[fal] starting grok text-to-video: ${modelId}`);
+    console.log(`[fal] prompt: ${args.prompt}`);
+
+    const result = await fal.subscribe(modelId, {
+      input: {
+        prompt: args.prompt,
+        duration: args.duration ?? 6,
+        aspect_ratio: args.aspectRatio ?? "16:9",
+        resolution: args.resolution ?? "720p",
+      },
+      logs: true,
+      onQueueUpdate: (update) => {
+        if (update.status === "IN_PROGRESS") {
+          console.log(
+            `[fal] ${update.logs?.map((l) => l.message).join(" ") || "processing..."}`,
+          );
+        }
+      },
+    });
+
+    console.log("[fal] completed!");
+    return result;
+  }
+
+  /**
+   * Generate video from image using Grok Imagine Video
+   * Supports 1-15 second videos at 480p or 720p resolution
+   */
+  async grokImageToVideo(args: {
+    prompt: string;
+    imageUrl: string;
+    duration?: number;
+    aspectRatio?:
+      | "auto"
+      | "16:9"
+      | "4:3"
+      | "3:2"
+      | "1:1"
+      | "2:3"
+      | "3:4"
+      | "9:16";
+    resolution?: "480p" | "720p";
+  }) {
+    const modelId = "xai/grok-imagine-video/image-to-video";
+
+    console.log(`[fal] starting grok image-to-video: ${modelId}`);
+    console.log(`[fal] prompt: ${args.prompt}`);
+
+    const imageUrl = await ensureUrl(args.imageUrl, (buffer) =>
+      this.uploadFile(buffer),
+    );
+
+    const result = await fal.subscribe(modelId, {
+      input: {
+        prompt: args.prompt,
+        image_url: imageUrl,
+        duration: args.duration ?? 6,
+        aspect_ratio: args.aspectRatio ?? "auto",
+        resolution: args.resolution ?? "720p",
+      },
+      logs: true,
+      onQueueUpdate: (update) => {
+        if (update.status === "IN_PROGRESS") {
+          console.log(
+            `[fal] ${update.logs?.map((l) => l.message).join(" ") || "processing..."}`,
+          );
+        }
+      },
+    });
+
+    console.log("[fal] completed!");
+    return result;
+  }
+
+  /**
+   * Edit video using Grok Imagine Video
+   * Video will be resized to max 854x480 and truncated to 8 seconds
+   */
+  async grokEditVideo(args: {
+    prompt: string;
+    videoUrl: string;
+    resolution?: "auto" | "480p" | "720p";
+  }) {
+    const modelId = "xai/grok-imagine-video/edit-video";
+
+    console.log(`[fal] starting grok edit-video: ${modelId}`);
+    console.log(`[fal] prompt: ${args.prompt}`);
+
+    const videoUrl = await ensureUrl(args.videoUrl, (buffer) =>
+      this.uploadFile(buffer),
+    );
+
+    const result = await fal.subscribe(modelId, {
+      input: {
+        prompt: args.prompt,
+        video_url: videoUrl,
+        resolution: args.resolution ?? "auto",
+      },
+      logs: true,
+      onQueueUpdate: (update) => {
+        if (update.status === "IN_PROGRESS") {
+          console.log(
+            `[fal] ${update.logs?.map((l) => l.message).join(" ") || "processing..."}`,
+          );
+        }
+      },
+    });
+
+    console.log("[fal] completed!");
+    return result;
+  }
+
+  // ============================================================================
+  // Qwen Image Edit 2511 Multiple Angles
+  // ============================================================================
+
+  /**
+   * Adjust camera angle of an image using Qwen Image Edit 2511 Multiple Angles
+   * Generates same scene from different angles (azimuth/elevation)
+   */
+  async qwenMultipleAngles(args: {
+    imageUrl: string;
+    horizontalAngle?: number;
+    verticalAngle?: number;
+    zoom?: number;
+    additionalPrompt?: string;
+    loraScale?: number;
+    imageSize?: string | { width: number; height: number };
+    guidanceScale?: number;
+    numInferenceSteps?: number;
+    acceleration?: "none" | "regular";
+    negativePrompt?: string;
+    seed?: number;
+    outputFormat?: "png" | "jpeg" | "webp";
+    numImages?: number;
+  }) {
+    const modelId = "fal-ai/qwen-image-edit-2511-multiple-angles";
+
+    console.log(`[fal] starting qwen multiple angles: ${modelId}`);
+
+    const imageUrl = await ensureUrl(args.imageUrl, (buffer) =>
+      this.uploadFile(buffer),
+    );
+
+    const result = await fal.subscribe(modelId, {
+      input: {
+        image_urls: [imageUrl],
+        horizontal_angle: args.horizontalAngle ?? 0,
+        vertical_angle: args.verticalAngle ?? 0,
+        zoom: args.zoom ?? 5,
+        additional_prompt: args.additionalPrompt,
+        lora_scale: args.loraScale ?? 1,
+        image_size: args.imageSize,
+        guidance_scale: args.guidanceScale ?? 4.5,
+        num_inference_steps: args.numInferenceSteps ?? 28,
+        acceleration: args.acceleration ?? "regular",
+        negative_prompt: args.negativePrompt ?? "",
+        seed: args.seed,
+        output_format: args.outputFormat ?? "png",
+        num_images: args.numImages ?? 1,
+      },
+      logs: true,
+      onQueueUpdate: (update) => {
+        if (update.status === "IN_PROGRESS") {
+          console.log(
+            `[fal] ${update.logs?.map((l) => l.message).join(" ") || "processing..."}`,
+          );
+        }
+      },
+    });
+
+    console.log("[fal] completed!");
+    return result;
+  }
 }
 
 // Export singleton instance

package/src/react/assets.ts

@@ -0,0 +1,9 @@
+export const assets = {
+  characters: {
+    orangeGirl: "https://s3.varg.ai/uploads/images/1_0475e227.png",
+  },
+  backgrounds: {
+    orangeGradient:
+      "https://s3.varg.ai/uploads/images/xyearp51qvve-zi3nrcve-zbno2hfgt5gergjrof_995f553d.png",
+  },
+} as const;

package/src/react/elements.ts

@@ -1,5 +1,4 @@
 import type {
-  AnimateProps,
   CaptionsProps,
   ClipProps,
   ImageProps,
@@ -71,10 +70,6 @@ export function Video(props: VideoProps): VargElement<"video"> {
   return createElement("video", props as Record<string, unknown>, undefined);
 }
 
-export function Animate(props: AnimateProps): VargElement<"animate"> {
-  return createElement("animate", props as Record<string, unknown>, undefined);
-}
-
 export function Speech(props: SpeechProps): VargElement<"speech"> {
   return createElement(
     "speech",

package/src/react/examples/branching.tsx

@@ -1,6 +1,6 @@
 import { elevenlabs } from "../../ai-sdk/providers/elevenlabs";
 import { fal } from "../../ai-sdk/providers/fal";
-import { Animate, Clip, Image, Render, Speech, Title } from "..";
+import { Clip, Image, Render, Speech, Title, Video } from "..";
 
 // Non-linear tree: multiple clips with independent branches
 // Clip 1: TalkingHead (Image -> Animate + Speech)
@@ -35,10 +35,12 @@ export default (
   <Render width={1080} height={1920}>
     {/* Clip 1: Talking head intro */}
     <Clip duration={5}>
-      <Animate
-        image={character}
+      <Video
+        prompt={{
+          text: "talking naturally, slight head movements, friendly expression",
+          images: [character],
+        }}
         model={fal.videoModel("wan-2.5")}
-        motion="talking naturally, slight head movements, friendly expression"
       />
       <Speech voice="adam" model={elevenlabs.speechModel("turbo")}>
         Hey everyone! Today we're looking at the biggest smartphone upgrade of

package/src/react/examples/character-video.tsx

@@ -1,6 +1,6 @@
 import { elevenlabs } from "../../ai-sdk/providers/elevenlabs";
 import { fal } from "../../ai-sdk/providers/fal";
-import { Animate, Clip, Image, Music, Render, render } from "..";
+import { Clip, Image, Music, Render, render, Video } from "..";
 
 const MADI_REF =
   "https://s3.varg.ai/fellowers/madi/character_shots/madi_shot_03_closeup.png";
@@ -54,16 +54,19 @@ async function main() {
 
       {SCENES.map((scene) => (
         <Clip key={scene.prompt} duration={2}>
-          <Animate
-            image={Image({
-              prompt: { text: scene.prompt, images: [MADI_REF] },
-              model: fal.imageModel("nano-banana-pro/edit"),
-              aspectRatio: "9:16",
-              resize: "cover",
-            })}
-            motion={scene.motion}
+          <Video
+            prompt={{
+              text: scene.motion,
+              images: [
+                Image({
+                  prompt: { text: scene.prompt, images: [MADI_REF] },
+                  model: fal.imageModel("nano-banana-pro/edit"),
+                  aspectRatio: "9:16",
+                  resize: "cover",
+                }),
+              ],
+            }}
             model={fal.videoModel("wan-2.5")}
-            duration={5}
           />
         </Clip>
       ))}

package/src/react/examples/local-files-test.tsx

@@ -0,0 +1,19 @@
+import { fal } from "../../ai-sdk/providers/fal";
+import { Clip, Image, Render, Video } from "..";
+
+export default (
+  <Render width={1080} height={1920}>
+    <Clip duration={3}>
+      <Image src="media/cyberpunk-street.png" />
+    </Clip>
+    <Clip duration={3}>
+      <Video
+        prompt={{
+          text: "camera pans across the scene",
+          images: [Image({ src: "media/fal-coffee-shop.png" })],
+        }}
+        model={fal.videoModel("kling-v2.5")}
+      />
+    </Clip>
+  </Render>
+);

package/src/react/examples/ltx2-test.tsx

@@ -0,0 +1,25 @@
+import { fal } from "../../ai-sdk/providers/fal";
+import { Clip, Render, Video } from "..";
+
+export default (
+  <Render width={1248} height={704}>
+    <Clip>
+      <Video
+        prompt={{
+          text: "Camera slowly dollies in toward her face, city lights flicker",
+          images: [
+            "https://storage.googleapis.com/falserverless/example_inputs/ltxv-2-i2v-input.jpg",
+          ],
+        }}
+        model={fal.videoModel("ltx-2-19b-distilled")}
+        keepAudio
+        providerOptions={{
+          fal: {
+            generate_audio: true,
+            camera_lora: "dolly_in",
+          },
+        }}
+      />
+    </Clip>
+  </Render>
+);

package/src/react/examples/madi.tsx

@@ -1,6 +1,6 @@
 import { elevenlabs } from "../../ai-sdk/providers/elevenlabs";
 import { fal } from "../../ai-sdk/providers/fal";
-import { Animate, Clip, Image, Music, Render } from "..";
+import { Clip, Image, Music, Render, Video } from "..";
 
 const MADI_REF =
   "https://s3.varg.ai/fellowers/madi/character_shots/madi_shot_03_closeup.png";
@@ -43,16 +43,19 @@ export default (
 
     {SCENES.map((scene) => (
       <Clip key={scene.prompt} duration={2}>
-        <Animate
-          image={Image({
-            prompt: { text: scene.prompt, images: [MADI_REF] },
-            model: fal.imageModel("nano-banana-pro/edit"),
-            aspectRatio: "9:16",
-            resize: "cover",
-          })}
-          motion={scene.motion}
+        <Video
+          prompt={{
+            text: scene.motion,
+            images: [
+              Image({
+                prompt: { text: scene.prompt, images: [MADI_REF] },
+                model: fal.imageModel("nano-banana-pro/edit"),
+                aspectRatio: "9:16",
+                resize: "cover",
+              }),
+            ],
+          }}
           model={fal.videoModel("wan-2.5")}
-          duration={5}
         />
       </Clip>
     ))}

package/src/react/examples/mcmeows.tsx

@@ -0,0 +1,40 @@
+import { elevenlabs } from "../../ai-sdk/providers/elevenlabs";
+import { fal } from "../../ai-sdk/providers/fal";
+import { Clip, Music, Render, render, Title, Video } from "..";
+
+export default (
+  <Render>
+    <Clip duration={4}>
+      <Video prompt="A sophisticated tabby cat wearing a tailored tiny business suit and small round glasses, standing upright at a McDonald's counter. One paw raised pointing assertively at the illuminated menu board above. The cat has an extremely serious, concentrated expression with furrowed brows. Cinematic lighting with warm McDonald's interior ambiance, shallow depth of field focusing on the cat's determined face, photorealistic fur texture with fine detail. Professional business atmosphere meets fast food chaos." />
+    </Clip>
+
+    <Clip duration={4}>
+      <Video prompt="Absolute mayhem - four to five cats in a chaotic pile fight. Orange tabby, black and white tuxedo cat, calico with patches, and fluffy gray cat all scrambling, paws flailing, tumbling over each other in exaggerated cartoon-style motion. They're all desperately reaching for a single perfect golden McDonald's french fry sitting on a red plastic tray in the center. Wide-eyed expressions, mouths open mid-meow, dynamic motion blur, comedic timing. Fast food restaurant background slightly blurred. Playful, over-the-top energy." />
+    </Clip>
+
+    <Clip duration={3}>
+      <Video prompt="Proud orange tabby cat wearing an official McDonald's crew member visor and name tag, standing upright behind a restaurant register counter. Front paws crossed confidently across chest, chin lifted with a smug, self-satisfied expression. Perfect posture, professional demeanor. Bright McDonald's interior lighting, red and yellow color scheme in background. The cat radiates 'employee of the month' energy. Crisp, clean, professional fast food aesthetic." />
+      <Title position="bottom">McMeow's: NOW HIRING</Title>
+    </Clip>
+
+    <Music
+      model={elevenlabs.musicModel()}
+      prompt="playful upbeat comedy music with quirky pizzicato strings and light percussion, funny corporate training video vibes"
+      duration={11}
+    />
+  </Render>
+);
+
+async function main() {
+  const component = await import("./mcmeows.tsx").then((m) => m.default);
+  await render(component, {
+    output: "output/mcmeows.mp4",
+    cache: ".cache/ai",
+    verbose: true,
+    defaults: {
+      video: fal.videoModel("wan-2.5"),
+    },
+  });
+}
+
+main().catch(console.error);

package/src/react/examples/music-defaults.tsx

@@ -0,0 +1,24 @@
+import { elevenlabs } from "../../ai-sdk/providers/elevenlabs";
+import { Clip, Image, Music, Render, render } from "..";
+
+export default (
+  <Render width={1920} height={1080}>
+    <Clip duration={5}>
+      <Image src="media/cyberpunk-street.png" />
+    </Clip>
+    <Music prompt="calm ambient electronic music" duration={5} />
+  </Render>
+);
+
+async function main() {
+  const component = await import("./music-defaults.tsx").then((m) => m.default);
+  await render(component, {
+    output: "output/music-defaults.mp4",
+    defaults: {
+      music: elevenlabs.musicModel(),
+    },
+  });
+  console.log("done! check output/music-defaults.mp4");
+}
+
+main().catch(console.error);

package/src/react/examples/quickstart-test.tsx

@@ -0,0 +1,101 @@
+/**
+ * Quickstart Test - Verification script for video generation setup
+ *
+ * This minimal test confirms your FAL_API_KEY is working correctly.
+ * It generates a simple 3-second animated image.
+ *
+ * Run: bun run src/react/examples/quickstart-test.tsx
+ * Output: output/quickstart-test.mp4
+ */
+
+import { fal } from "../../ai-sdk/providers/fal";
+import { Clip, Image, Render, render, Video } from "..";
+
+const quickstartVideo = (
+  <Render width={720} height={720}>
+    <Clip duration={3}>
+      <Video
+        prompt={{
+          text: "robot waves hello, friendly gesture, slight head tilt",
+          images: [
+            Image({
+              prompt:
+                "a friendly robot waving hello, simple cartoon style, blue and white colors, clean background",
+              model: fal.imageModel("flux-schnell"),
+              aspectRatio: "1:1",
+            }),
+          ],
+        }}
+        model={fal.videoModel("wan-2.5")}
+      />
+    </Clip>
+  </Render>
+);
+
+export default quickstartVideo;
+
+async function main() {
+  console.log("=== Varg Video Generation - Setup Verification ===\n");
+
+  // Check for FAL_API_KEY
+  if (!process.env.FAL_API_KEY) {
+    console.error("ERROR: FAL_API_KEY not found in environment");
+    console.error("\nTo fix this:");
+    console.error("1. Get an API key at: https://fal.ai/dashboard/keys");
+    console.error("2. Add to .env file: FAL_API_KEY=fal_xxxxx");
+    console.error("3. Run this test again");
+    process.exit(1);
+  }
+
+  console.log("FAL_API_KEY found");
+
+  // Check for optional keys
+  const hasElevenLabs = !!process.env.ELEVENLABS_API_KEY;
+  const hasReplicate = !!process.env.REPLICATE_API_TOKEN;
+  const hasGroq = !!process.env.GROQ_API_KEY;
+
+  console.log("\nOptional keys:");
+  console.log(
+    `  ELEVENLABS_API_KEY: ${hasElevenLabs ? "found" : "not found (music/voice unavailable)"}`,
+  );
+  console.log(
+    `  REPLICATE_API_TOKEN: ${hasReplicate ? "found" : "not found (lipsync unavailable)"}`,
+  );
+  console.log(
+    `  GROQ_API_KEY: ${hasGroq ? "found" : "not found (transcription unavailable)"}`,
+  );
+
+  console.log("\n--- Running verification test ---\n");
+  console.log("Generating a simple 3-second animation...");
+  console.log("This may take 30-60 seconds on first run.\n");
+
+  try {
+    const buffer = await render(quickstartVideo, {
+      output: "output/quickstart-test.mp4",
+      cache: ".cache/ai",
+    });
+
+    console.log("\n=== SUCCESS ===");
+    console.log(
+      `Output: output/quickstart-test.mp4 (${(buffer.byteLength / 1024 / 1024).toFixed(2)} MB)`,
+    );
+    console.log("\nYour setup is working! You can now:");
+    console.log("1. Try the templates in .claude/skills/video-generation.md");
+    console.log(
+      "2. Run existing examples: bun run src/react/examples/madi.tsx",
+    );
+    console.log("3. Create your own videos using the React engine");
+  } catch (error) {
+    console.error("\n=== VERIFICATION FAILED ===");
+    console.error("Error:", error instanceof Error ? error.message : error);
+    console.error("\nCommon fixes:");
+    console.error("- Check FAL_API_KEY is correct (no extra spaces)");
+    console.error("- Ensure you have credits at fal.ai");
+    console.error("- Try running: bun install");
+    process.exit(1);
+  }
+}
+
+if (import.meta.main) {
+  main();
+}

package/src/react/examples/qwen-angles-test.tsx

@@ -0,0 +1,72 @@
+/**
+ * Qwen Image Edit 2511 Multiple Angles Test
+ *
+ * Demonstrates camera angle adjustment using Qwen model.
+ * Generates the same scene from different perspectives (azimuth/elevation).
+ *
+ * Run with: bun run src/cli/index.ts render src/react/examples/qwen-angles-test.tsx
+ */
+
+import { fal } from "../../ai-sdk/providers/fal";
+import { Clip, Image, Render } from "..";
+
+// Source image - replace with your own image URL or local path
+const sourceImage =
+  "https://v3b.fal.media/files/b/0a8973cb/qUbVwDCcMlvX4drBGYB1H.png";
+
+export default (
+  <Render width={1024} height={1024}>
+    {/* Original image - front view */}
+    <Clip duration={2}>
+      <Image src={sourceImage} resize="cover" />
+    </Clip>
+
+    {/* Right side view (90 degrees horizontal) */}
+    <Clip duration={2}>
+      <Image
+        prompt={{ text: "", images: [sourceImage] }}
+        model={fal.imageModel("qwen-angles")}
+        aspectRatio="1:1"
+        providerOptions={{
+          fal: {
+            horizontal_angle: 90,
+            vertical_angle: 0,
+            zoom: 5,
+          },
+        }}
+      />
+    </Clip>
+
+    {/* Bird's eye view (60 degrees vertical) */}
+    <Clip duration={2}>
+      <Image
+        prompt={{ text: "", images: [sourceImage] }}
+        model={fal.imageModel("qwen-angles")}
+        aspectRatio="1:1"
+        providerOptions={{
+          fal: {
+            horizontal_angle: 0,
+            vertical_angle: 60,
+            zoom: 5,
+          },
+        }}
+      />
+    </Clip>
+
+    {/* Close-up from 45 degree angle */}
+    <Clip duration={2}>
+      <Image
+        prompt={{ text: "", images: [sourceImage] }}
+        model={fal.imageModel("qwen-angles")}
+        aspectRatio="1:1"
+        providerOptions={{
+          fal: {
+            horizontal_angle: 45,
+            vertical_angle: 30,
+            zoom: 8,
+          },
+        }}
+      />
+    </Clip>
+  </Render>
+);

package/src/react/index.ts

@@ -1,6 +1,7 @@
+export type { CacheStorage } from "../ai-sdk/cache";
 export type { SizeValue } from "../ai-sdk/providers/editly/types";
+export { assets } from "./assets";
 export {
-  Animate,
   Captions,
   Clip,
   Image,
@@ -17,10 +18,9 @@ export {
   Title,
   Video,
 } from "./elements";
-export { Grid, SplitLayout } from "./layouts";
+export { Grid, Slot, SplitLayout } from "./layouts";
 export { render, renderStream } from "./render";
 export type {
-  AnimateProps,
   CaptionsProps,
   ClipProps,
   ImageProps,

package/src/react/layouts/grid.tsx

@@ -21,7 +21,7 @@ export const Grid = ({
       top: `${(Math.floor(i / cols) / rowCount) * 100}%`,
       width: `${(1 / cols) * 100}%`,
       height: `${(1 / rowCount) * 100}%`,
-      resize,
+      resize: (el.props as Record<string, unknown>).resize ?? resize,
     },
   }));
   return <>{positioned}</>;

package/src/react/layouts/index.ts

@@ -1,2 +1,3 @@
 export { Grid } from "./grid";
-export { SplitLayout } from "./split";
+export { Slot } from "./slot";
+export { Split, SplitLayout } from "./split";