@mevdragon/vidfarm-devcli 0.1.0 → 0.2.1

package/templates/template_0000/src/remotion/Root.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AbsoluteFill, Composition, Img, Sequence, interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
+export const RemotionRoot = () => {
+    return (_jsx(Composition, { id: "template-0000", component: TemplateVideo, width: 1080, height: 1920, fps: 30, durationInFrames: 120, defaultProps: { slides: [] }, calculateMetadata: ({ props }) => ({
+            width: 1080,
+            height: 1920,
+            durationInFrames: Math.max(1, sumSlideFrames(props.slides, 30))
+        }) }));
+};
+const TemplateVideo = ({ slides }) => {
+    const { fps } = useVideoConfig();
+    let currentFrame = 0;
+    return (_jsx(AbsoluteFill, { style: { backgroundColor: "#120f0b" }, children: slides.map((slide, index) => {
+            const durationInFrames = msToFrames(slide.durationMs, fps);
+            const sequence = (_jsx(Sequence, { from: currentFrame, durationInFrames: durationInFrames, children: _jsx(SlideFrame, { slide: slide }) }, `${slide.imageUrl}-${index}`));
+            currentFrame += durationInFrames;
+            return sequence;
+        }) }));
+};
+const SlideFrame = ({ slide }) => {
+    const frame = useCurrentFrame();
+    const { fps } = useVideoConfig();
+    const entrance = spring({ fps, frame, config: { damping: 200, stiffness: 140 } });
+    const opacity = interpolate(entrance, [0, 1], [0.35, 1]);
+    const lift = interpolate(entrance, [0, 1], [22, 0]);
+    return (_jsxs(AbsoluteFill, { children: [_jsx(AbsoluteFill, { style: { opacity, transform: `translateY(${lift}px)` }, children: _jsx(Img, { src: slide.imageUrl, style: { width: "100%", height: "100%", objectFit: "fill" } }) }), _jsx(AbsoluteFill, { style: { background: "linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.06) 36%, rgba(0,0,0,0.34) 100%)" } })] }));
+};
+function msToFrames(durationMs, fps) {
+    return Math.max(1, Math.round((durationMs / 1000) * fps));
+}
+function sumSlideFrames(slides, fps) {
+    return slides.reduce((total, slide) => total + msToFrames(slide.durationMs, fps), 0);
+}

package/templates/template_0000/src/remotion/Root.tsx

@@ -0,0 +1,75 @@
+import React from "react";
+import { AbsoluteFill, Composition, Img, Sequence, interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
+
+type Slide = {
+  imageUrl: string;
+  durationMs: number;
+};
+
+type TemplateVideoProps = {
+  slides: Slide[];
+};
+
+export const RemotionRoot: React.FC = () => {
+  return (
+    <Composition
+      id="template-0000"
+      component={TemplateVideo}
+      width={1080}
+      height={1920}
+      fps={30}
+      durationInFrames={120}
+      defaultProps={{ slides: [] }}
+      calculateMetadata={({ props }) => ({
+        width: 1080,
+        height: 1920,
+        durationInFrames: Math.max(1, sumSlideFrames(props.slides, 30))
+      })}
+    />
+  );
+};
+
+const TemplateVideo: React.FC<TemplateVideoProps> = ({ slides }) => {
+  const { fps } = useVideoConfig();
+  let currentFrame = 0;
+
+  return (
+    <AbsoluteFill style={{ backgroundColor: "#120f0b" }}>
+      {slides.map((slide, index) => {
+        const durationInFrames = msToFrames(slide.durationMs, fps);
+        const sequence = (
+          <Sequence key={`${slide.imageUrl}-${index}`} from={currentFrame} durationInFrames={durationInFrames}>
+            <SlideFrame slide={slide} />
+          </Sequence>
+        );
+        currentFrame += durationInFrames;
+        return sequence;
+      })}
+    </AbsoluteFill>
+  );
+};
+
+const SlideFrame: React.FC<{ slide: Slide }> = ({ slide }) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const entrance = spring({ fps, frame, config: { damping: 200, stiffness: 140 } });
+  const opacity = interpolate(entrance, [0, 1], [0.35, 1]);
+  const lift = interpolate(entrance, [0, 1], [22, 0]);
+
+  return (
+    <AbsoluteFill>
+      <AbsoluteFill style={{ opacity, transform: `translateY(${lift}px)` }}>
+        <Img src={slide.imageUrl} style={{ width: "100%", height: "100%", objectFit: "fill" }} />
+      </AbsoluteFill>
+      <AbsoluteFill style={{ background: "linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.06) 36%, rgba(0,0,0,0.34) 100%)" }} />
+    </AbsoluteFill>
+  );
+};
+
+function msToFrames(durationMs: number, fps: number) {
+  return Math.max(1, Math.round((durationMs / 1000) * fps));
+}
+
+function sumSlideFrames(slides: Slide[], fps: number) {
+  return slides.reduce((total, slide) => total + msToFrames(slide.durationMs, fps), 0);
+}

package/templates/template_0000/src/remotion/index.js

@@ -0,0 +1,3 @@
+import { registerRoot } from "remotion";
+import { RemotionRoot } from "./Root.js";
+registerRoot(RemotionRoot);

package/templates/template_0000/src/remotion/index.tsx

@@ -0,0 +1,4 @@
+import { registerRoot } from "remotion";
+import { RemotionRoot } from "./Root.js";
+
+registerRoot(RemotionRoot);

package/templates/template_0000/src/sdk.js

@@ -0,0 +1,3 @@
+export function defineTemplate(definition) {
+    return definition;
+}

package/templates/template_0000/src/sdk.ts

@@ -0,0 +1,122 @@
+import type { ZodTypeAny } from "zod";
+
+export type ProviderType = "openai" | "gemini" | "openrouter" | "perplexity";
+
+export interface TemplateOperationDefinition {
+  description: string;
+  inputSchema: ZodTypeAny;
+  workflow: string;
+  providerHint?: ProviderType;
+  webhookSupport?: boolean;
+  smokeTestPayload?: Record<string, unknown>;
+}
+
+export interface TemplateAboutMetadata {
+  title: string;
+  description: string;
+  viral_dna: string;
+  visual_dna: string;
+  preview_media: string[];
+  link_to_original: string;
+}
+
+export interface JobExecutionResult {
+  progress?: number;
+  output?: Record<string, unknown>;
+}
+
+export interface TemplateDefinition {
+  id: string;
+  slugId: string;
+  version: string;
+  about: TemplateAboutMetadata;
+  configSchema: ZodTypeAny;
+  skillPath?: string;
+  operations: Record<string, TemplateOperationDefinition>;
+  jobs: Record<string, (ctx: TemplateJobContext, input: Record<string, unknown>) => Promise<JobExecutionResult>>;
+}
+
+export interface TemplateJobContext {
+  env: "development" | "production";
+  customer: {
+    id: string;
+    email: string;
+    name: string;
+    defaultWebhookUrl: string | null;
+  };
+  templateConfig: Record<string, unknown>;
+  logger: {
+    debug(message: string, metadata?: Record<string, unknown>): void;
+    info(message: string, metadata?: Record<string, unknown>): void;
+    warn(message: string, metadata?: Record<string, unknown>): void;
+    error(message: string, metadata?: Record<string, unknown>): void;
+    progress(progress: number, message: string, metadata?: Record<string, unknown>): void;
+  };
+  jobs: {
+    enqueueChild(input: {
+      operationName: string;
+      workflowName: string;
+      payload: Record<string, unknown>;
+      providerHint?: ProviderType;
+    }): Promise<{ jobId: string }>;
+  };
+  storage: {
+    putJson(key: string, value: unknown): Promise<{ key: string; url: string | null }>;
+    putText(key: string, value: string, contentType?: string): Promise<{ key: string; url: string | null }>;
+    putBuffer(
+      key: string,
+      value: Uint8Array,
+      options?: { contentType?: string; kind?: string; metadata?: Record<string, unknown> }
+    ): Promise<{ key: string; url: string | null }>;
+    getPublicUrl(key: string): string | null;
+  };
+  billing: {
+    record(input: {
+      type: "ai_generation" | "render" | "storage_write" | "cpu_estimate";
+      costUsd: number;
+      chargeUsd?: number;
+      metadata?: Record<string, unknown>;
+    }): Promise<void>;
+  };
+  providers: {
+    generateText(input: {
+      provider: ProviderType;
+      model: string;
+      prompt: string;
+      temperature?: number;
+    }): Promise<{ text: string; usage: { inputTokens: number; outputTokens: number; costUsd: number } }>;
+    generateImage(input: {
+      provider: ProviderType;
+      model: string;
+      prompt: string;
+      promptAttachments?: string[];
+      size?: string;
+      aspectRatio?: string;
+      imageSize?: "1K" | "2K" | "4K";
+    }): Promise<{ bytes: Uint8Array; contentType: string; revisedPrompt: string | null }>;
+    analyzeImageLayout(input: {
+      provider: ProviderType;
+      model: string;
+      imageUrl: string;
+      overlayText: string;
+    }): Promise<{
+      zone: "top" | "center" | "bottom";
+      align: "left" | "center" | "right";
+      maxWidthPercent: number;
+      justification: string;
+    }>;
+  };
+  remotion: {
+    render(input: {
+      compositionId: string;
+      serveUrl?: string;
+      entryPoint?: string;
+      outputKey?: string;
+      inputProps: Record<string, unknown>;
+    }): Promise<{ renderId: string; outputUrl: string | null; metadata: Record<string, unknown> }>;
+  };
+}
+
+export function defineTemplate(definition: TemplateDefinition): TemplateDefinition {
+  return definition;
+}

package/templates/template_0000/src/style-options.js

@@ -0,0 +1,51 @@
+export const TEMPLATE_FONT_OPTIONS = [
+    {
+        id: "source_code_pro",
+        label: "Source Code Pro",
+        family: "Source Code Pro",
+        assetFile: "SourceCodePro[wght].ttf"
+    },
+    {
+        id: "montserrat",
+        label: "Montserrat",
+        family: "Montserrat",
+        assetFile: "Montserrat[wght].ttf"
+    },
+    {
+        id: "yesteryear",
+        label: "Yesteryear",
+        family: "Yesteryear",
+        assetFile: "Yesteryear-Regular.ttf"
+    },
+    {
+        id: "dm_serif_display",
+        label: "DM Serif Display",
+        family: "DM Serif Display",
+        assetFile: "DMSerifDisplay-Regular.ttf"
+    },
+    {
+        id: "abel",
+        label: "Abel",
+        family: "Abel",
+        assetFile: "Abel-Regular.ttf"
+    }
+];
+export const TEMPLATE_TEXT_BACKGROUND_COLOR_OPTIONS = [
+    { id: "black", label: "Black", hex: "#000000" },
+    { id: "red", label: "Red", hex: "#EA403F" },
+    { id: "orange", label: "Orange", hex: "#FF933D" },
+    { id: "yellow", label: "Yellow", hex: "#F2CD46" },
+    { id: "lime_green", label: "Lime Green", hex: "#78C25E" },
+    { id: "teal", label: "Teal", hex: "#77C8A6" },
+    { id: "light_blue", label: "Light Blue", hex: "#3496F0" },
+    { id: "dark_blue", label: "Dark Blue", hex: "#3496F0" },
+    { id: "violet", label: "Violet", hex: "#5756D4" },
+    { id: "pink", label: "Pink", hex: "#F7D7E9" },
+    { id: "brown", label: "Brown", hex: "#A3895B" },
+    { id: "dark_green", label: "Dark Green", hex: "#32523B" },
+    { id: "blue_gray", label: "Blue Gray", hex: "#2F688C" },
+    { id: "light_gray", label: "Light Gray", hex: "#92979E" },
+    { id: "dark_gray", label: "Dark Gray", hex: "#333333" }
+];
+export const TEMPLATE_FONT_IDS = TEMPLATE_FONT_OPTIONS.map((option) => option.id);
+export const TEMPLATE_TEXT_BACKGROUND_COLOR_IDS = TEMPLATE_TEXT_BACKGROUND_COLOR_OPTIONS.map((option) => option.id);

package/templates/template_0000/src/style-options.ts

@@ -0,0 +1,60 @@
+export const TEMPLATE_FONT_OPTIONS = [
+  {
+    id: "source_code_pro",
+    label: "Source Code Pro",
+    family: "Source Code Pro",
+    assetFile: "SourceCodePro[wght].ttf"
+  },
+  {
+    id: "montserrat",
+    label: "Montserrat",
+    family: "Montserrat",
+    assetFile: "Montserrat[wght].ttf"
+  },
+  {
+    id: "yesteryear",
+    label: "Yesteryear",
+    family: "Yesteryear",
+    assetFile: "Yesteryear-Regular.ttf"
+  },
+  {
+    id: "dm_serif_display",
+    label: "DM Serif Display",
+    family: "DM Serif Display",
+    assetFile: "DMSerifDisplay-Regular.ttf"
+  },
+  {
+    id: "abel",
+    label: "Abel",
+    family: "Abel",
+    assetFile: "Abel-Regular.ttf"
+  }
+] as const;
+
+export const TEMPLATE_TEXT_BACKGROUND_COLOR_OPTIONS = [
+  { id: "black", label: "Black", hex: "#000000" },
+  { id: "red", label: "Red", hex: "#EA403F" },
+  { id: "orange", label: "Orange", hex: "#FF933D" },
+  { id: "yellow", label: "Yellow", hex: "#F2CD46" },
+  { id: "lime_green", label: "Lime Green", hex: "#78C25E" },
+  { id: "teal", label: "Teal", hex: "#77C8A6" },
+  { id: "light_blue", label: "Light Blue", hex: "#3496F0" },
+  { id: "dark_blue", label: "Dark Blue", hex: "#3496F0" },
+  { id: "violet", label: "Violet", hex: "#5756D4" },
+  { id: "pink", label: "Pink", hex: "#F7D7E9" },
+  { id: "brown", label: "Brown", hex: "#A3895B" },
+  { id: "dark_green", label: "Dark Green", hex: "#32523B" },
+  { id: "blue_gray", label: "Blue Gray", hex: "#2F688C" },
+  { id: "light_gray", label: "Light Gray", hex: "#92979E" },
+  { id: "dark_gray", label: "Dark Gray", hex: "#333333" }
+] as const;
+
+export type TemplateFontOption = (typeof TEMPLATE_FONT_OPTIONS)[number];
+export type TemplateFontId = TemplateFontOption["id"];
+export type TemplateTextBackgroundColorOption = (typeof TEMPLATE_TEXT_BACKGROUND_COLOR_OPTIONS)[number];
+export type TemplateTextBackgroundColorId = TemplateTextBackgroundColorOption["id"];
+
+export const TEMPLATE_FONT_IDS = TEMPLATE_FONT_OPTIONS.map((option) => option.id) as [TemplateFontId, ...TemplateFontId[]];
+export const TEMPLATE_TEXT_BACKGROUND_COLOR_IDS = TEMPLATE_TEXT_BACKGROUND_COLOR_OPTIONS.map(
+  (option) => option.id
+) as [TemplateTextBackgroundColorId, ...TemplateTextBackgroundColorId[]];

package/templates/template_0000/src/template-dna.ts

@@ -0,0 +1,15 @@
+// Generated by `vidfarm analyze-viral-dna` and `vidfarm analyze-visual-dna`.
+// Keep source notes in `research/source_notes.md` and reference media in `research/preview/`.
+
+export const templateLinkToOriginal = "";
+export const templateSourceNotesPath = "research/source_notes.md";
+export const templatePreviewMediaRelativePaths = [] as const;
+
+export const templateViralDna =
+  "Run `vidfarm analyze-viral-dna --template-dir .` after adding source notes and preview media.";
+export const templateVisualDna =
+  "Run `vidfarm analyze-visual-dna --template-dir .` after adding source notes and preview media.";
+
+export const templateViralDnaAnalysis = null;
+
+export const templateVisualDnaAnalysis = null;