npm - mulmocast - Versions diffs - 2.6.2 → 2.6.4 - Mend

mulmocast 2.6.2 → 2.6.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (40) hide show

package/README.md +2 -1
package/assets/html/chart.html +40 -7
package/assets/html/js/animation_runtime.js +10 -0
package/assets/html/js/auto_render.js +14 -0
package/lib/actions/image_agents.d.ts +6 -0
package/lib/actions/image_agents.js +31 -5
package/lib/actions/image_references.d.ts +8 -1
package/lib/actions/image_references.js +101 -2
package/lib/actions/images.d.ts +42 -0
package/lib/actions/images.js +17 -5
package/lib/agents/movie_genai_agent.js +36 -6
package/lib/agents/movie_replicate_agent.js +20 -3
package/lib/methods/mulmo_presentation_style.d.ts +6 -0
package/lib/slide/layouts/index.js +3 -0
package/lib/slide/layouts/waterfall.d.ts +2 -0
package/lib/slide/layouts/waterfall.js +63 -0
package/lib/slide/render.js +4 -1
package/lib/slide/schema.d.ts +176 -0
package/lib/slide/schema.js +18 -0
package/lib/slide/utils.d.ts +1 -0
package/lib/slide/utils.js +21 -1
package/lib/types/agent.d.ts +6 -0
package/lib/types/provider2agent.d.ts +6 -11
package/lib/types/provider2agent.js +10 -0
package/lib/types/schema.d.ts +545 -0
package/lib/types/schema.js +28 -1
package/lib/types/slide.d.ts +176 -0
package/lib/types/slide.js +18 -0
package/lib/types/type.d.ts +2 -1
package/lib/utils/context.d.ts +196 -0
package/lib/utils/html_render.d.ts +6 -0
package/lib/utils/html_render.js +33 -3
package/lib/utils/image_plugins/chart.js +19 -6
package/lib/utils/image_plugins/html_tailwind.js +48 -34
package/lib/utils/image_plugins/mermaid.js +5 -1
package/package.json +7 -7
package/scripts/test/test_beat_local_refs.json +211 -0
package/scripts/test/test_ir_visualizations.json +317 -0
package/scripts/test/test_movie_references.json +101 -0
package/scripts/test/test_plugin_features.json +151 -0

package/README.md CHANGED Viewed

@@ -396,8 +396,9 @@ MulmoCast includes a powerful **Slide DSL** (`type: "slide"`) for creating struc
 ### Features
-- **11 Layouts**: title, columns, comparison, grid, bigQuote, stats, timeline, split, matrix, table, funnel
+- **12 Layouts**: title, columns, comparison, grid, bigQuote, stats, timeline, split, matrix, table, funnel, waterfall
 - **10 Content Block Types**: text, bullets, code, callout, metric, divider, image, imageRef, chart, mermaid
+- **Chart.js Plugins**: sankey (`chartjs-chart-sankey`) and treemap (`chartjs-chart-treemap`) auto-loaded by chart type
 - **13-Color Theme System**: Semantic color palette with dark/light support
 - **6 Preset Themes**: dark, pop, warm, creative, minimal, corporate

package/assets/html/chart.html CHANGED Viewed

@@ -5,14 +5,18 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Simple Chart.js Bar Chart</title>
     <style>
+        html, body { height: 100%; margin: 0; }
+        body { display: flex; flex-direction: column; align-items: center; justify-content: center; }
         ${style}
         .chart-container {
             width: ${chart_width}px;
-            margin: 0 auto;
+            height: 70vh;
+            position: relative;
         }
     </style>
     <!-- Include Chart.js from CDN -->
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
+    ${chart_plugins}
 </head>
 <body>
     <h1>${title}</h1>
@@ -20,9 +24,7 @@
         <canvas id="myChart" data-chart-ready="false"></canvas>
     </div>
-    <!-- Plain JavaScript instead of TypeScript -->
     <script>
-        // Wait for DOM and Chart.js to be ready, then render.
         function initChart() {
             if (!window.Chart) return false;
             const ctx = document.getElementById('myChart');
@@ -32,10 +34,41 @@
             // Disable animation for static image generation
             if (!chartData.options) chartData.options = {};
             chartData.options.animation = false;
+            chartData.options.responsive = true;
+            chartData.options.maintainAspectRatio = false;
-            // Initialize the chart
+            // Treemap: convert backgroundColor array to scriptable function
+            if (chartData.type === 'treemap') {
+                chartData.data.datasets.forEach((ds) => {
+                    if (Array.isArray(ds.backgroundColor)) {
+                        const colors = ds.backgroundColor;
+                        ds.backgroundColor = (c) => colors[c.dataIndex % colors.length];
+                    }
+                });
+            }
+            // Sankey: convert colorFrom/colorTo objects to lookup functions
+            if (chartData.type === 'sankey') {
+                chartData.data.datasets.forEach((ds) => {
+                    if (ds.colorFrom && typeof ds.colorFrom === 'object') {
+                        const fromMap = ds.colorFrom;
+                        ds.colorFrom = (c) => fromMap[c.dataset.data[c.dataIndex].from] || '#999';
+                    }
+                    if (ds.colorTo && typeof ds.colorTo === 'object') {
+                        const toMap = ds.colorTo;
+                        ds.colorTo = (c) => toMap[c.dataset.data[c.dataIndex].to] || '#999';
+                    }
+                });
+            }
+            try {
+                const chart = new Chart(ctx, chartData);
+                chart.resize();
+                chart.update();
+            } catch (e) {
+                console.error('Chart init error:', e);
+            }
-            new Chart(ctx, chartData);
             requestAnimationFrame(() => {
                 requestAnimationFrame(() => {
                     ctx.dataset.chartReady = "true";
@@ -49,7 +82,7 @@
             setTimeout(waitForChart, 50);
         }
-        document.addEventListener('DOMContentLoaded', function() {
+        document.addEventListener('DOMContentLoaded', () => {
             waitForChart();
         });
     </script>

package/assets/html/js/animation_runtime.js CHANGED Viewed

@@ -234,6 +234,16 @@ MulmoAnimation.prototype._applyCoverBaseStyle = function (el, iw, ih) {
   el.style.height = ih + "px";
 };
+/**
+ * Render all animations at their final state (last frame).
+ * Used for generating static images (PDF, thumbnails) from animated content.
+ * @param {number} fps - frames per second
+ */
+MulmoAnimation.prototype.renderFinal = function (fps) {
+  const lastFrame = Math.max(0, window.__MULMO.totalFrames - 1);
+  this.update(lastFrame, fps);
+};
 /**
  * Update all registered animations for the given frame.
  * @param {number} frame - current frame number

package/assets/html/js/auto_render.js CHANGED Viewed

@@ -25,6 +25,20 @@ if (typeof window.render === "function") {
   }
 }
+/**
+ * Render the final frame of the animation (all content fully visible).
+ * Used by Puppeteer to capture a static image for PDF/thumbnail generation.
+ * Returns a Promise (or value) from the render function.
+ */
+window.renderFinal = function () {
+  const mulmo = window.__MULMO;
+  const lastFrame = Math.max(0, (mulmo.totalFrames || 0) - 1);
+  mulmo.frame = lastFrame;
+  if (typeof window.render === "function") {
+    return window.render(lastFrame, mulmo.totalFrames, mulmo.fps);
+  }
+};
 /**
  * Play animation in real-time using requestAnimationFrame.
  * Returns a Promise that resolves when all frames have been rendered.

package/lib/actions/image_agents.d.ts CHANGED Viewed

@@ -22,6 +22,12 @@ type ImagePreprocessAgentReturnValue = {
         agent: string;
         movieParams: MulmoMovieParams;
     };
+    firstFrameImagePath?: string;
+    lastFrameImagePath?: string;
+    movieReferenceImages?: {
+        imagePath: string;
+        referenceType: "ASSET" | "STYLE";
+    }[];
 };
 type ImagePreprocessAgentResponseBase = ImagePreprocessAgentReturnValue & {
     imagePath?: string;

package/lib/actions/image_agents.js CHANGED Viewed

@@ -66,6 +66,28 @@ export const imagePreprocessAgent = async (namedInputs) => {
         }
     }
     returnValue.movieAgentInfo = MulmoPresentationStyleMethods.getMovieAgentInfo(context.presentationStyle, beat);
+    // Resolve movie reference images from imageRefs
+    const movieParams = beat.movieParams ?? context.presentationStyle.movieParams;
+    if (movieParams?.firstFrameImageName && imageRefs) {
+        const firstFramePath = imageRefs[movieParams.firstFrameImageName];
+        if (firstFramePath) {
+            returnValue.firstFrameImagePath = firstFramePath;
+        }
+    }
+    if (movieParams?.lastFrameImageName && imageRefs) {
+        const lastFramePath = imageRefs[movieParams.lastFrameImageName];
+        if (lastFramePath) {
+            returnValue.lastFrameImagePath = lastFramePath;
+        }
+    }
+    if (movieParams?.referenceImages && imageRefs) {
+        returnValue.movieReferenceImages = movieParams.referenceImages
+            .map((ref) => {
+            const refPath = imageRefs[ref.imageName];
+            return refPath ? { imagePath: refPath, referenceType: ref.referenceType } : undefined;
+        })
+            .filter((r) => r !== undefined);
+    }
     if (beat.image) {
         const plugin = MulmoBeatMethods.getPlugin(beat);
         const pluginPath = plugin.path({ beat, context, imagePath, ...htmlStyle(context, beat) });
@@ -80,12 +102,12 @@ export const imagePreprocessAgent = async (namedInputs) => {
         if (isAnimatedHtml) {
             const animatedVideoPath = getBeatAnimatedVideoPath(context, index);
             // ImagePluginPreprocessAgentResponse
+            // imageFromMovie is false: the plugin generates both the .mp4 video AND
+            // a high-quality final-frame PNG directly from HTML (better than extracting from compressed video).
             return {
                 ...returnValue,
-                imagePath, // for thumbnail extraction
+                imagePath, // static final-frame PNG (generated by the plugin)
                 movieFile: animatedVideoPath, // .mp4 path for the pipeline
-                imageFromMovie: true, // triggers extractImageFromMovie
-                useLastFrame: true, // extract last frame for PDF/static (animation complete state)
                 referenceImageForMovie: pluginPath,
                 markdown,
                 html,
@@ -106,13 +128,17 @@ export const imagePreprocessAgent = async (namedInputs) => {
     }
     if (beat.moviePrompt && !beat.imagePrompt) {
         // ImageOnlyMoviePreprocessAgentResponse
-        return { ...returnValue, imagePath, imageFromMovie: true }; // no image prompt, only movie prompt
+        // If firstFrameImageName is specified, use the resolved ref image as the movie's first frame
+        const base = { ...returnValue, imagePath, imageFromMovie: true };
+        return returnValue.firstFrameImagePath ? { ...base, referenceImageForMovie: returnValue.firstFrameImagePath } : base;
     }
     // referenceImages for "edit_image", openai agent.
     const referenceImages = MulmoBeatMethods.getImageReferenceForImageGenerator(beat, imageRefs ?? {});
     const prompt = imagePrompt(beat, imageAgentInfo.imageParams.style);
     // ImageGenearalPreprocessAgentResponse
-    return { ...returnValue, imagePath, referenceImageForMovie: imagePath, imageAgentInfo, prompt, referenceImages };
+    // firstFrameImagePath (from movieParams.firstFrameImageName) takes precedence over generated image
+    const movieFirstFramePath = returnValue.firstFrameImagePath ?? imagePath;
+    return { ...returnValue, imagePath, referenceImageForMovie: movieFirstFramePath, imageAgentInfo, prompt, referenceImages };
 };
 export const imagePluginAgent = async (namedInputs) => {
     const { context, beat, index, imageRefs, movieRefs } = namedInputs;

package/lib/actions/image_references.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { MulmoStudioContext, MulmoImagePromptMedia } from "../types/index.js";
+import { MulmoStudioContext, MulmoBeat, MulmoImagePromptMedia } from "../types/index.js";
 export declare const generateReferenceImage: (inputs: {
     context: MulmoStudioContext;
     key: string;
@@ -11,5 +11,12 @@ export type MediaRefs = {
     movieRefs: Record<string, string>;
 };
 export declare const getMediaRefs: (context: MulmoStudioContext) => Promise<MediaRefs>;
+export declare const resolveBeatLocalRefs: (namedInputs: {
+    context: MulmoStudioContext;
+    beat: MulmoBeat;
+    index: number;
+    imageRefs: Record<string, string>;
+    movieRefs: Record<string, string>;
+}) => Promise<MediaRefs>;
 /** @deprecated Use getMediaRefs instead */
 export declare const getImageRefs: (context: MulmoStudioContext) => Promise<Record<string, string>>;

package/lib/actions/image_references.js CHANGED Viewed

@@ -2,8 +2,8 @@ import { GraphAI, GraphAILogger } from "graphai";
 import { getReferenceImagePath } from "../utils/file.js";
 import { graphOption } from "./images.js";
 import { MulmoPresentationStyleMethods, MulmoMediaSourceMethods } from "../methods/index.js";
-import { imageOpenaiAgent, mediaMockAgent, imageGenAIAgent, imageReplicateAgent } from "../agents/index.js";
-import { agentGenerationError, imageReferenceAction, imageFileTarget } from "../utils/error_cause.js";
+import { imageOpenaiAgent, mediaMockAgent, imageGenAIAgent, imageReplicateAgent, movieGenAIAgent, movieReplicateAgent } from "../agents/index.js";
+import { agentGenerationError, imageReferenceAction, imageFileTarget, movieFileTarget } from "../utils/error_cause.js";
 // public api
 // Application may call this function directly to generate reference image.
 export const generateReferenceImage = async (inputs) => {
@@ -77,6 +77,105 @@ export const getMediaRefs = async (context) => {
 const resolveMovieReference = async (movie, context, key) => {
     return MulmoMediaSourceMethods.imageReference(movie.source, context, key);
 };
+const generateReferenceMovie = async (inputs) => {
+    const { context, key, index, moviePrompt, imagePath } = inputs;
+    const moviePath = getReferenceImagePath(context, key, "mp4");
+    const movieAgentInfo = MulmoPresentationStyleMethods.getMovieAgentInfo(context.presentationStyle);
+    GraphAILogger.info(`Generating reference movie for ${key}: ${moviePrompt.prompt}`);
+    const movie_graph_data = {
+        version: 0.5,
+        nodes: {
+            movieGenerator: {
+                agent: movieAgentInfo.agent,
+                inputs: {
+                    media: "movie",
+                    prompt: moviePrompt.prompt,
+                    imagePath: imagePath ?? null,
+                    movieFile: moviePath,
+                    cache: {
+                        force: [context.force],
+                        file: moviePath,
+                        index,
+                        id: key,
+                        mulmoContext: context,
+                        sessionType: "imageReference",
+                    },
+                },
+                params: {
+                    model: movieAgentInfo.movieParams.model,
+                    canvasSize: context.presentationStyle.canvasSize,
+                },
+            },
+        },
+    };
+    try {
+        const options = await graphOption(context);
+        const graph = new GraphAI(movie_graph_data, { movieGenAIAgent, movieReplicateAgent, mediaMockAgent }, options);
+        await graph.run();
+        return moviePath;
+    }
+    catch (error) {
+        GraphAILogger.error(error);
+        throw new Error(`generateReferenceMovie: generate error: key=${key}`, {
+            cause: agentGenerationError(movieAgentInfo.agent, imageReferenceAction, movieFileTarget),
+        });
+    }
+};
+const resolveLocalRefs = async (context, images, beatIndex, globalImageRefs) => {
+    const localImageRefs = {};
+    const localMovieRefs = {};
+    // Stage 1: image, imagePrompt, movie (parallel)
+    await Promise.all(Object.keys(images)
+        .sort()
+        .map(async (key, i) => {
+        const entry = images[key];
+        if (entry.type === "imagePrompt") {
+            localImageRefs[key] = await generateReferenceImage({
+                context,
+                key,
+                index: beatIndex * 100 + i,
+                image: entry,
+            });
+        }
+        else if (entry.type === "image") {
+            localImageRefs[key] = await MulmoMediaSourceMethods.imageReference(entry.source, context, key);
+        }
+        else if (entry.type === "movie") {
+            localMovieRefs[key] = await resolveMovieReference(entry, context, key);
+        }
+    }));
+    // Stage 2: moviePrompt (imageName references imageRefs only)
+    const combinedImageRefs = { ...globalImageRefs, ...localImageRefs };
+    await Promise.all(Object.keys(images)
+        .sort()
+        .map(async (key, i) => {
+        const entry = images[key];
+        if (entry.type === "moviePrompt") {
+            const mp = entry;
+            const refImagePath = mp.imageName ? combinedImageRefs[mp.imageName] : undefined;
+            localMovieRefs[key] = await generateReferenceMovie({
+                context,
+                key,
+                index: beatIndex * 100 + i,
+                moviePrompt: mp,
+                imagePath: refImagePath,
+            });
+        }
+    }));
+    return { localImageRefs, localMovieRefs };
+};
+export const resolveBeatLocalRefs = async (namedInputs) => {
+    const { context, beat, index, imageRefs, movieRefs } = namedInputs;
+    const images = beat.images;
+    if (!images) {
+        return { imageRefs, movieRefs };
+    }
+    const { localImageRefs, localMovieRefs } = await resolveLocalRefs(context, images, index, imageRefs);
+    return {
+        imageRefs: { ...imageRefs, ...localImageRefs },
+        movieRefs: { ...movieRefs, ...localMovieRefs },
+    };
+};
 /** @deprecated Use getMediaRefs instead */
 export const getImageRefs = async (context) => {
     const { imageRefs } = await getMediaRefs(context);

package/lib/actions/images.d.ts CHANGED Viewed

@@ -25,6 +25,22 @@ export declare const beat_graph_data: {
         withBackup: {
             value: boolean;
         };
+        localRefs: {
+            agent: (namedInputs: {
+                context: MulmoStudioContext;
+                beat: import("../types/type.js").MulmoBeat;
+                index: number;
+                imageRefs: Record<string, string>;
+                movieRefs: Record<string, string>;
+            }) => Promise<import("./image_references.js").MediaRefs>;
+            inputs: {
+                context: string;
+                beat: string;
+                index: string;
+                imageRefs: string;
+                movieRefs: string;
+            };
+        };
         preprocessor: {
             agent: (namedInputs: {
                 context: MulmoStudioContext;
@@ -54,6 +70,12 @@ export declare const beat_graph_data: {
                     agent: string;
                     movieParams: import("../types/type.js").MulmoMovieParams;
                 };
+                firstFrameImagePath?: string;
+                lastFrameImagePath?: string;
+                movieReferenceImages?: {
+                    imagePath: string;
+                    referenceType: "ASSET" | "STYLE";
+                }[];
             } & {
                 imagePath?: string;
             }) | ({
@@ -79,6 +101,12 @@ export declare const beat_graph_data: {
                     agent: string;
                     movieParams: import("../types/type.js").MulmoMovieParams;
                 };
+                firstFrameImagePath?: string;
+                lastFrameImagePath?: string;
+                movieReferenceImages?: {
+                    imagePath: string;
+                    referenceType: "ASSET" | "STYLE";
+                }[];
             } & {
                 imagePath?: string;
             } & {
@@ -115,6 +143,12 @@ export declare const beat_graph_data: {
                     agent: string;
                     movieParams: import("../types/type.js").MulmoMovieParams;
                 };
+                firstFrameImagePath?: string;
+                lastFrameImagePath?: string;
+                movieReferenceImages?: {
+                    imagePath: string;
+                    referenceType: "ASSET" | "STYLE";
+                }[];
             } & {
                 imagePath?: string;
             } & {
@@ -143,6 +177,12 @@ export declare const beat_graph_data: {
                     agent: string;
                     movieParams: import("../types/type.js").MulmoMovieParams;
                 };
+                firstFrameImagePath?: string;
+                lastFrameImagePath?: string;
+                movieReferenceImages?: {
+                    imagePath: string;
+                    referenceType: "ASSET" | "STYLE";
+                }[];
             } & {
                 imagePath?: string;
             } & {
@@ -266,6 +306,8 @@ export declare const beat_graph_data: {
                 onComplete: string[];
                 prompt: string;
                 imagePath: string;
+                lastFrameImagePath: string;
+                referenceImages: string;
                 movieFile: string;
                 cache: {
                     force: string[];

package/lib/actions/images.js CHANGED Viewed

@@ -14,7 +14,7 @@ import { fileCacheAgentFilter } from "../utils/filters.js";
 import { settings2GraphAIConfig } from "../utils/utils.js";
 import { audioCheckerError } from "../utils/error_cause.js";
 import { extractImageFromMovie, ffmpegGetMediaDuration, trimMusic } from "../utils/ffmpeg_utils.js";
-import { getMediaRefs } from "./image_references.js";
+import { getMediaRefs, resolveBeatLocalRefs } from "./image_references.js";
 import { imagePreprocessAgent, imagePluginAgent, htmlImageGeneratorAgent } from "./image_agents.js";
 const vanillaAgents = vanilla.default ?? vanilla;
 const imageAgents = {
@@ -60,8 +60,8 @@ export const beat_graph_data = {
         forceLipSync: { value: false },
         forceSoundEffect: { value: false },
         withBackup: { value: false },
-        preprocessor: {
-            agent: imagePreprocessAgent,
+        localRefs: {
+            agent: resolveBeatLocalRefs,
             inputs: {
                 context: ":context",
                 beat: ":beat",
@@ -70,6 +70,16 @@ export const beat_graph_data = {
                 movieRefs: ":movieRefs",
             },
         },
+        preprocessor: {
+            agent: imagePreprocessAgent,
+            inputs: {
+                context: ":context",
+                beat: ":beat",
+                index: ":__mapIndex",
+                imageRefs: ":localRefs.imageRefs",
+                movieRefs: ":localRefs.movieRefs",
+            },
+        },
         imagePlugin: {
             if: ":beat.image",
             defaultValue: {},
@@ -78,8 +88,8 @@ export const beat_graph_data = {
                 context: ":context",
                 beat: ":beat",
                 index: ":__mapIndex",
-                imageRefs: ":imageRefs",
-                movieRefs: ":movieRefs",
+                imageRefs: ":localRefs.imageRefs",
+                movieRefs: ":localRefs.movieRefs",
                 onComplete: [":preprocessor"],
             },
         },
@@ -167,6 +177,8 @@ export const beat_graph_data = {
                 onComplete: [":imageGenerator", ":imagePlugin"], // to wait for imageGenerator to finish
                 prompt: ":beat.moviePrompt",
                 imagePath: ":preprocessor.referenceImageForMovie",
+                lastFrameImagePath: ":preprocessor.lastFrameImagePath",
+                referenceImages: ":preprocessor.movieReferenceImages",
                 movieFile: ":preprocessor.movieFile", // for google genai agent
                 cache: {
                     force: [":context.force", ":forceMovie"],

package/lib/agents/movie_genai_agent.js CHANGED Viewed

@@ -94,25 +94,55 @@ const generateExtendedVideo = async (ai, model, prompt, aspectRatio, imagePath,
     }
     return downloadVideo(ai, result.video, movieFile, isVertexAI);
 };
-const generateStandardVideo = async (ai, model, prompt, aspectRatio, imagePath, duration, movieFile, isVertexAI) => {
-    const isVeo3 = model === "veo-3.0-generate-001" || model === "veo-3.1-generate-preview";
+const generateStandardVideo = async (ai, model, prompt, aspectRatio, imagePath, lastFrameImagePath, referenceImages, duration, movieFile, isVertexAI) => {
+    const capabilities = provider2MovieAgent.google.modelParams[model];
     const payload = {
         model,
         prompt,
         config: {
-            durationSeconds: isVeo3 ? undefined : duration,
+            durationSeconds: capabilities?.supportsPersonGeneration === false ? undefined : duration,
             aspectRatio,
-            personGeneration: imagePath ? undefined : PersonGeneration.ALLOW_ALL,
+            personGeneration: imagePath || !capabilities?.supportsPersonGeneration ? undefined : PersonGeneration.ALLOW_ALL,
         },
         image: imagePath ? loadImageAsBase64(imagePath) : undefined,
     };
+    // Validate and apply lastFrame
+    if (lastFrameImagePath) {
+        if (!capabilities?.supportsLastFrame) {
+            GraphAILogger.warn(`movieGenAIAgent: model ${model} does not support lastFrame — ignoring lastFrameImageName`);
+        }
+        else if (!imagePath) {
+            GraphAILogger.warn(`movieGenAIAgent: lastFrame requires a first frame image (imagePrompt or firstFrameImageName) — ignoring lastFrameImageName`);
+        }
+        else {
+            payload.config.lastFrame = loadImageAsBase64(lastFrameImagePath);
+        }
+    }
+    // Validate and apply referenceImages (mutually exclusive with image/lastFrame)
+    if (referenceImages && referenceImages.length > 0) {
+        if (!capabilities?.supportsReferenceImages) {
+            GraphAILogger.warn(`movieGenAIAgent: model ${model} does not support referenceImages — ignoring`);
+        }
+        else if (imagePath) {
+            GraphAILogger.warn(`movieGenAIAgent: referenceImages cannot be combined with first frame image — ignoring referenceImages`);
+        }
+        else if (lastFrameImagePath) {
+            GraphAILogger.warn(`movieGenAIAgent: referenceImages cannot be combined with lastFrame — ignoring referenceImages`);
+        }
+        else {
+            payload.config.referenceImages = referenceImages.map((ref) => ({
+                image: loadImageAsBase64(ref.imagePath),
+                referenceType: ref.referenceType,
+            }));
+        }
+    }
     const operation = await ai.models.generateVideos(payload);
     const response = await pollUntilDone(ai, operation);
     const video = getVideoFromResponse(response);
     return downloadVideo(ai, video, movieFile, isVertexAI);
 };
 export const movieGenAIAgent = async ({ namedInputs, params, config, }) => {
-    const { prompt, imagePath, movieFile } = namedInputs;
+    const { prompt, imagePath, lastFrameImagePath, referenceImages, movieFile } = namedInputs;
     const aspectRatio = getAspectRatio(params.canvasSize, ASPECT_RATIOS);
     const model = params.model ?? provider2MovieAgent.google.defaultModel;
     const apiKey = config?.apiKey;
@@ -144,7 +174,7 @@ export const movieGenAIAgent = async ({ namedInputs, params, config, }) => {
             return generateExtendedVideo(ai, model, prompt, aspectRatio, imagePath, requestedDuration, movieFile, isVertexAI);
         }
         // Standard mode
-        return generateStandardVideo(ai, model, prompt, aspectRatio, imagePath, duration, movieFile, isVertexAI);
+        return generateStandardVideo(ai, model, prompt, aspectRatio, imagePath, lastFrameImagePath, referenceImages, duration, movieFile, isVertexAI);
     }
     catch (error) {
         GraphAILogger.info("Failed to generate movie:", error.message);

package/lib/agents/movie_replicate_agent.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { GraphAILogger } from "graphai";
 import Replicate from "replicate";
 import { apiKeyMissingError, agentGenerationError, agentInvalidResponseError, imageAction, movieFileTarget, videoDurationTarget, unsupportedModelTarget, } from "../utils/error_cause.js";
 import { provider2MovieAgent, getModelDuration } from "../types/provider2agent.js";
-async function generateMovie(model, apiKey, prompt, imagePath, aspectRatio, duration) {
+async function generateMovie(model, apiKey, prompt, imagePath, lastFrameImagePath, aspectRatio, duration) {
     const replicate = new Replicate({
         auth: apiKey,
     });
@@ -37,6 +37,23 @@ async function generateMovie(model, apiKey, prompt, imagePath, aspectRatio, dura
             input.image = base64Image;
         }
     }
+    // Add last frame image if provided and model supports it
+    if (lastFrameImagePath) {
+        const lastImageParam = provider2MovieAgent.replicate.modelParams[model]?.last_image;
+        if (lastImageParam) {
+            if (!imagePath) {
+                GraphAILogger.warn(`movieReplicateAgent: model ${model} requires a first frame image to use lastFrame — ignoring lastFrameImageName`);
+            }
+            else {
+                const buffer = readFileSync(lastFrameImagePath);
+                const base64Image = `data:image/png;base64,${buffer.toString("base64")}`;
+                input[lastImageParam] = base64Image;
+            }
+        }
+        else {
+            GraphAILogger.warn(`movieReplicateAgent: model ${model} does not support lastFrame — ignoring lastFrameImageName`);
+        }
+    }
     try {
         const output = await replicate.run(model, { input });
         // Download the generated video
@@ -72,7 +89,7 @@ export const getAspectRatio = (canvasSize) => {
     return "9:16";
 };
 export const movieReplicateAgent = async ({ namedInputs, params, config, }) => {
-    const { prompt, imagePath } = namedInputs;
+    const { prompt, imagePath, lastFrameImagePath } = namedInputs;
     const aspectRatio = getAspectRatio(params.canvasSize);
     const model = params.model ?? provider2MovieAgent.replicate.defaultModel;
     if (!provider2MovieAgent.replicate.modelParams[model]) {
@@ -93,7 +110,7 @@ export const movieReplicateAgent = async ({ namedInputs, params, config, }) => {
         });
     }
     try {
-        const buffer = await generateMovie(model, apiKey, prompt, imagePath, aspectRatio, duration);
+        const buffer = await generateMovie(model, apiKey, prompt, imagePath, lastFrameImagePath, aspectRatio, duration);
         if (buffer) {
             return { buffer };
         }

package/lib/methods/mulmo_presentation_style.d.ts CHANGED Viewed

@@ -173,6 +173,12 @@ export declare const MulmoPresentationStyleMethods: {
             })[] | undefined;
             vertexai_project?: string | undefined;
             vertexai_location?: string | undefined;
+            firstFrameImageName?: string | undefined;
+            lastFrameImageName?: string | undefined;
+            referenceImages?: {
+                imageName: string;
+                referenceType: "ASSET" | "STYLE";
+            }[] | undefined;
             speed?: number | undefined;
         };
         keyName: string;

package/lib/slide/layouts/index.js CHANGED Viewed

@@ -9,6 +9,7 @@ import { layoutSplit } from "./split.js";
 import { layoutMatrix } from "./matrix.js";
 import { layoutTable } from "./table.js";
 import { layoutFunnel } from "./funnel.js";
+import { layoutWaterfall } from "./waterfall.js";
 import { escapeHtml } from "../utils.js";
 /** Render the inner content of a slide (without the wrapper div) */
 export const renderSlideContent = (slide) => {
@@ -35,6 +36,8 @@ export const renderSlideContent = (slide) => {
             return layoutTable(slide);
         case "funnel":
             return layoutFunnel(slide);
+        case "waterfall":
+            return layoutWaterfall(slide);
         default: {
             const _exhaustive = slide;
             return `<p class="text-white p-8">Unknown layout: ${escapeHtml(String(_exhaustive.layout))}</p>`;

package/lib/slide/layouts/waterfall.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import type { WaterfallSlide } from "../schema.js";
2	+ export declare const layoutWaterfall: (data: WaterfallSlide) => string;