vargai 0.4.0-alpha4 → 0.4.0-alpha40

package/src/react/renderers/context.ts

@@ -1,17 +1,20 @@
 import type { generateImage } from "ai";
-import type { fileCache } from "../../ai-sdk/file-cache";
+import type { CacheStorage } from "../../ai-sdk/cache";
 import type { generateVideo } from "../../ai-sdk/generate-video";
+import type { DefaultModels } from "../types";
 import type { ProgressTracker } from "./progress";
 
 export interface RenderContext {
   width: number;
   height: number;
   fps: number;
-  cache?: ReturnType<typeof fileCache>;
+  cache?: CacheStorage;
   generateImage: typeof generateImage;
   generateVideo: typeof generateVideo;
   tempFiles: string[];
   progress?: ProgressTracker;
   /** In-memory deduplication for concurrent renders of the same element */
   pending: Map<string, Promise<string>>;
+  /** Default models for elements that don't specify one */
+  defaults?: DefaultModels;
 }

package/src/react/renderers/image.ts

@@ -54,9 +54,11 @@ export async function renderImage(
     throw new Error("Image element requires either 'prompt' or 'src'");
   }
 
-  const model = props.model;
+  const model = props.model ?? ctx.defaults?.image;
   if (!model) {
-    throw new Error("Image element requires 'model' prop when using prompt");
+    throw new Error(
+      "Image element requires 'model' prop (or set defaults.image in render options)",
+    );
   }
 
   // Compute cache key for deduplication
@@ -83,6 +85,7 @@ export async function renderImage(
       model,
       prompt: resolvedPrompt,
       aspectRatio: props.aspectRatio,
+      providerOptions: props.providerOptions,
       n: 1,
       cacheKey,
     } as Parameters<typeof generateImage>[0]);

package/src/react/renderers/index.ts

@@ -1,4 +1,3 @@
-export { renderAnimate } from "./animate";
 export { renderCaptions } from "./captions";
 export { renderClip } from "./clip";
 export type { RenderContext } from "./context";

package/src/react/renderers/music.ts

@@ -10,9 +10,9 @@ export async function renderMusic(
   const props = element.props as MusicProps;
 
   const prompt = props.prompt;
-  const model = props.model;
+  const model = props.model ?? ctx.defaults?.music;
   if (!prompt || !model) {
-    throw new Error("Music generation requires both prompt and model");
+    throw new Error("Music requires prompt and model (or set defaults.music)");
   }
 
   const cacheKey = JSON.stringify({
@@ -22,7 +22,7 @@ export async function renderMusic(
     duration: props.duration,
   });
 
-  const modelId = model.modelId;
+  const modelId = model.modelId ?? "music";
   const taskId = ctx.progress ? addTask(ctx.progress, "music", modelId) : null;
 
   const generateFn = async () => {
@@ -40,6 +40,11 @@ export async function renderMusic(
     const cached = await ctx.cache.get(cacheKey);
     if (cached) {
       audioData = cached as Uint8Array;
+      // Signal cache hit to progress tracker
+      if (taskId && ctx.progress) {
+        startTask(ctx.progress, taskId);
+        completeTask(ctx.progress, taskId);
+      }
     } else {
       if (taskId && ctx.progress) startTask(ctx.progress, taskId);
       audioData = await generateFn();

package/src/react/renderers/packshot/blinking-button.ts

@@ -0,0 +1,413 @@
+import { spawn } from "node:child_process";
+import { mkdir, rm } from "node:fs/promises";
+import path from "node:path";
+import sharp from "sharp";
+
+export interface BlinkingButtonOptions {
+  text: string;
+  width: number; // Video frame width
+  height: number; // Video frame height
+  duration: number;
+  fps: number;
+  bgColor: string; // Hex color like "#FF6B00"
+  textColor: string; // Hex color like "#FFFFFF"
+  blinkFrequency?: number; // Seconds per cycle (default: 0.8)
+  position?: "top" | "center" | "bottom"; // Vertical position
+  buttonWidth?: number; // Button width in pixels
+  buttonHeight?: number; // Button height in pixels
+}
+
+/**
+ * Parse hex color to RGB values
+ */
+function hexToRgb(hex: string): { r: number; g: number; b: number } {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  if (!result) {
+    return { r: 255, g: 107, b: 0 }; // Default orange
+  }
+  return {
+    r: parseInt(result[1] as string, 16),
+    g: parseInt(result[2] as string, 16),
+    b: parseInt(result[3] as string, 16),
+  };
+}
+
+/**
+ * Clamp value to max (for color brightening)
+ */
+function clamp(value: number, max = 255): number {
+  return Math.min(Math.floor(value), max);
+}
+
+/**
+ * Create SVG for button background with gradient and rounded corners
+ */
+function createButtonSvg(
+  width: number,
+  height: number,
+  radius: number,
+  topColor: { r: number; g: number; b: number },
+  bottomColor: { r: number; g: number; b: number },
+): string {
+  return `<svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="btnGrad" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" style="stop-color:rgb(${topColor.r},${topColor.g},${topColor.b})" />
+      <stop offset="100%" style="stop-color:rgb(${bottomColor.r},${bottomColor.g},${bottomColor.b})" />
+    </linearGradient>
+  </defs>
+  <rect width="${width}" height="${height}" rx="${radius}" ry="${radius}" fill="url(#btnGrad)" />
+</svg>`;
+}
+
+/**
+ * Create a blinking CTA button video using Sharp for image generation
+ * and ffmpeg for video assembly.
+ *
+ * Matches Python SDK quality:
+ * - Gradient background (lighter top -> darker bottom)
+ * - Rounded corners (45% of height)
+ * - Scale animation (1.0 -> 1.03)
+ * - Brightness animation (0.85 -> 1.2)
+ * - Custom font support (TikTokSans-Bold)
+ */
+export interface BlinkingButtonResult {
+  path: string;
+  x: number;
+  y: number;
+}
+
+export async function createBlinkingButton(
+  options: BlinkingButtonOptions,
+): Promise<BlinkingButtonResult> {
+  const {
+    text,
+    width,
+    height,
+    duration,
+    fps,
+    bgColor,
+    textColor,
+    blinkFrequency = 0.8,
+    position = "bottom",
+  } = options;
+
+  const totalFrames = Math.ceil(duration * fps);
+
+  // Button dimensions — large and prominent like app store CTAs
+  const btnWidth = options.buttonWidth ?? Math.floor(width * 0.7);
+  const btnHeight = options.buttonHeight ?? Math.floor(height * 0.09);
+  const cornerRadius = Math.floor(btnHeight * 0.45);
+
+  // Animation padding (button can grow ~14% with overshoot + glow radius)
+  const maxScale = 1.14; // accounts for 1.12 * 1.15 overshoot peak
+  const glowRadius = 18;
+  const glowExtraScale = 1.15; // glow is 15% larger than button
+  const totalMaxScale = maxScale * glowExtraScale; // ~1.31 for glow bounds
+  const scalePadding = Math.ceil(
+    Math.max(btnWidth, btnHeight) * (totalMaxScale - 1.0) * 2,
+  );
+  const padding = scalePadding + glowRadius * 2;
+  const canvasWidth = btnWidth + padding * 2;
+  const canvasHeight = btnHeight + padding * 2;
+
+  // Parse colors and create gradient (lighter top, darker bottom)
+  const rgb = hexToRgb(bgColor);
+  const topColor = {
+    r: clamp(rgb.r * 1.15),
+    g: clamp(rgb.g * 1.15),
+    b: clamp(rgb.b * 1.15),
+  };
+  const bottomColor = {
+    r: Math.floor(rgb.r * 0.95),
+    g: Math.floor(rgb.g * 0.95),
+    b: Math.floor(rgb.b * 0.95),
+  };
+
+  // Font path (relative to this file's compiled location)
+  const fontPath = path.resolve(
+    import.meta.dirname,
+    "../../../assets/fonts/TikTokSans-Bold.ttf",
+  );
+
+  // Create button SVG with gradient
+  const buttonSvg = createButtonSvg(
+    btnWidth,
+    btnHeight,
+    cornerRadius,
+    topColor,
+    bottomColor,
+  );
+
+  // Create text image using Sharp's text feature
+  const fontSize = Math.floor(btnHeight * 0.55);
+  const textBuffer = await sharp({
+    text: {
+      text: `<span foreground="${textColor}" font_weight="bold">${escapeXml(text)}</span>`,
+      font: "TikTokSans",
+      fontfile: fontPath,
+      rgba: true,
+      align: "center",
+      dpi: Math.floor(fontSize * 2.8), // Larger DPI for bolder text
+    },
+  })
+    .png()
+    .toBuffer();
+
+  // Get text dimensions for centering
+  const textMeta = await sharp(textBuffer).metadata();
+  const textWidth = textMeta.width ?? 0;
+  const textHeight = textMeta.height ?? 0;
+
+  // Create base button frame (button + text on transparent canvas)
+  const baseButtonBuffer = await sharp({
+    create: {
+      width: canvasWidth,
+      height: canvasHeight,
+      channels: 4,
+      background: { r: 0, g: 0, b: 0, alpha: 0 },
+    },
+  })
+    .composite([
+      // Button background (centered in canvas)
+      {
+        input: Buffer.from(buttonSvg),
+        top: padding,
+        left: padding,
+      },
+      // Text centered on button
+      {
+        input: textBuffer,
+        top: padding + Math.floor((btnHeight - textHeight) / 2),
+        left: padding + Math.floor((btnWidth - textWidth) / 2),
+      },
+    ])
+    .png()
+    .toBuffer();
+
+  // Pre-render glow buffer: blurred, brightened copy of the button for halo effect
+  const glowBuffer = await sharp(baseButtonBuffer)
+    .blur(glowRadius)
+    .modulate({ brightness: 1.4 })
+    .png()
+    .toBuffer();
+
+  // Calculate button position on full frame
+  const btnY = getButtonYPosition(position, height, canvasHeight);
+  const btnX = Math.floor((width - canvasWidth) / 2);
+
+  // Create frames directory for intermediate files
+  const framesDir = `/tmp/varg-btn-frames-${Date.now()}`;
+  await mkdir(framesDir, { recursive: true });
+
+  // Generate animation frames
+  // Using file-based approach for reliability with alpha channel
+  for (let i = 0; i < totalFrames; i++) {
+    const t = i / fps;
+    // Elastic pulse curve: fast expand with overshoot, settle, slow contract
+    const phase = (t % blinkFrequency) / blinkFrequency; // 0 -> 1 within each cycle
+    let osc: number;
+    if (phase < 0.25) {
+      // Fast rise with overshoot to 1.15
+      osc = Math.sin((phase / 0.25) * Math.PI * 0.5) * 1.15;
+    } else if (phase < 0.4) {
+      // Settle back from 1.15 to 1.0
+      const settle = (phase - 0.25) / 0.15;
+      osc = 1.15 - 0.15 * settle;
+    } else {
+      // Slow ease-out fall back to 0
+      const fall = (phase - 0.4) / 0.6;
+      osc = Math.cos(fall * Math.PI * 0.5);
+    }
+
+    const scale = 1.0 + 0.12 * osc; // 1.0 -> 1.14 -> 1.12 -> 1.0
+    const brightness = 0.85 + 0.35 * Math.max(0, osc); // 0.85 -> 1.2 -> 0.85
+    const glowOpacity = Math.max(0, osc) * 0.6; // 0 -> 0.6 -> 0
+
+    const scaledW = Math.round(canvasWidth * scale);
+    const scaledH = Math.round(canvasHeight * scale);
+
+    // Calculate offset to keep button centered after scaling
+    const offsetX = Math.floor((canvasWidth - scaledW) / 2);
+    const offsetY = Math.floor((canvasHeight - scaledH) / 2);
+
+    // Scale button, apply brightness, then fit to canvas
+    let btnPipeline = sharp(baseButtonBuffer)
+      .resize(scaledW, scaledH, { kernel: "lanczos3" })
+      .modulate({ brightness });
+
+    if (scaledW > canvasWidth || scaledH > canvasHeight) {
+      // Button exceeds canvas during overshoot — crop from center
+      const cropLeft = Math.floor((scaledW - canvasWidth) / 2);
+      const cropTop = Math.floor((scaledH - canvasHeight) / 2);
+      btnPipeline = btnPipeline.extract({
+        left: Math.max(0, cropLeft),
+        top: Math.max(0, cropTop),
+        width: Math.min(scaledW, canvasWidth),
+        height: Math.min(scaledH, canvasHeight),
+      });
+    } else {
+      btnPipeline = btnPipeline.extend({
+        top: Math.max(0, offsetY),
+        bottom: Math.max(0, canvasHeight - scaledH - offsetY),
+        left: Math.max(0, offsetX),
+        right: Math.max(0, canvasWidth - scaledW - offsetX),
+        background: { r: 0, g: 0, b: 0, alpha: 0 },
+      });
+    }
+
+    const btnFrame = await btnPipeline.png().toBuffer();
+
+    // Scale glow slightly larger than button for halo effect
+    const glowScale = scale * 1.15;
+    const glowW = Math.round(canvasWidth * glowScale);
+    const glowH = Math.round(canvasHeight * glowScale);
+    const glowOffX = Math.floor((canvasWidth - glowW) / 2);
+    const glowOffY = Math.floor((canvasHeight - glowH) / 2);
+
+    // Render glow frame with animated opacity
+    // Scale alpha channel using raw pixel manipulation for precise opacity control
+    let glowResized: sharp.Sharp;
+    if (glowW > canvasWidth || glowH > canvasHeight) {
+      // Glow is larger than canvas — resize then crop to canvas from center
+      const cropLeft = Math.floor((glowW - canvasWidth) / 2);
+      const cropTop = Math.floor((glowH - canvasHeight) / 2);
+      glowResized = sharp(glowBuffer)
+        .resize(glowW, glowH, { kernel: "lanczos3" })
+        .extract({
+          left: Math.max(0, cropLeft),
+          top: Math.max(0, cropTop),
+          width: canvasWidth,
+          height: canvasHeight,
+        });
+    } else {
+      // Glow fits — extend with transparent padding
+      glowResized = sharp(glowBuffer)
+        .resize(glowW, glowH, { kernel: "lanczos3" })
+        .extend({
+          top: Math.max(0, glowOffY),
+          bottom: Math.max(0, canvasHeight - glowH - glowOffY),
+          left: Math.max(0, glowOffX),
+          right: Math.max(0, canvasWidth - glowW - glowOffX),
+          background: { r: 0, g: 0, b: 0, alpha: 0 },
+        });
+    }
+
+    const { data: glowPixels, info: glowInfo } = await glowResized
+      .raw()
+      .toBuffer({ resolveWithObject: true });
+
+    // Multiply alpha channel by glowOpacity
+    for (let p = 3; p < glowPixels.length; p += 4) {
+      glowPixels[p] = Math.round((glowPixels[p] as number) * glowOpacity);
+    }
+
+    const glowFrame = await sharp(glowPixels, {
+      raw: {
+        width: glowInfo.width,
+        height: glowInfo.height,
+        channels: 4,
+      },
+    })
+      .png()
+      .toBuffer();
+
+    // Composite: transparent canvas <- glow (behind) <- button (on top)
+    await sharp({
+      create: {
+        width: canvasWidth,
+        height: canvasHeight,
+        channels: 4,
+        background: { r: 0, g: 0, b: 0, alpha: 0 },
+      },
+    })
+      .composite([
+        { input: glowFrame, top: 0, left: 0 },
+        { input: btnFrame, top: 0, left: 0 },
+      ])
+      .png()
+      .toFile(`${framesDir}/frame_${String(i).padStart(5, "0")}.png`);
+  }
+
+  // Combine frames into video with alpha channel (ProRes 4444)
+  const outputPath = `/tmp/varg-blink-btn-${Date.now()}.mov`;
+
+  await runFfmpeg([
+    "-y",
+    "-framerate",
+    String(fps),
+    "-i",
+    `${framesDir}/frame_%05d.png`,
+    "-c:v",
+    "prores_ks",
+    "-profile:v",
+    "4444",
+    "-pix_fmt",
+    "yuva444p10le",
+    "-t",
+    String(duration),
+    outputPath,
+  ]);
+
+  // Cleanup frames directory
+  await rm(framesDir, { recursive: true, force: true });
+
+  return { path: outputPath, x: btnX, y: btnY };
+}
+
+/**
+ * Calculate button Y position based on position prop
+ */
+function getButtonYPosition(
+  position: "top" | "center" | "bottom",
+  videoHeight: number,
+  buttonHeight: number,
+): number {
+  switch (position) {
+    case "top":
+      return Math.floor(videoHeight * 0.15);
+    case "center":
+      return Math.floor((videoHeight - buttonHeight) / 2);
+    case "bottom":
+    default:
+      return Math.floor(videoHeight * 0.78 - buttonHeight / 2);
+  }
+}
+
+/**
+ * Escape XML special characters for SVG/Pango text
+ */
+function escapeXml(text: string): string {
+  return text
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&apos;");
+}
+
+/**
+ * Run ffmpeg command and wait for completion
+ */
+function runFfmpeg(args: string[]): Promise<void> {
+  return new Promise((resolve, reject) => {
+    const ffmpeg = spawn("ffmpeg", args, {
+      stdio: ["pipe", "pipe", "pipe"],
+    });
+
+    let stderr = "";
+    ffmpeg.stderr?.on("data", (data) => {
+      stderr += data.toString();
+    });
+
+    ffmpeg.on("close", (code) => {
+      if (code === 0) {
+        resolve();
+      } else {
+        reject(new Error(`ffmpeg exited with code ${code}: ${stderr}`));
+      }
+    });
+
+    ffmpeg.on("error", reject);
+  });
+}