mulmocast 2.6.2 → 2.6.3

package/assets/html/js/animation_runtime.js

@@ -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

@@ -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.js

@@ -80,12 +80,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,

package/lib/actions/image_references.d.ts

@@ -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

@@ -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

@@ -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;

package/lib/actions/images.js

@@ -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"],
             },
         },

package/lib/types/schema.d.ts

@@ -289,6 +289,11 @@ export declare const mulmoMovieMediaSchema: z.ZodObject<{
         path: z.ZodString;
     }, z.core.$strict>], "kind">;
 }, z.core.$strict>;
+export declare const mulmoMoviePromptMediaSchema: z.ZodObject<{
+    type: z.ZodLiteral<"moviePrompt">;
+    prompt: z.ZodString;
+    imageName: z.ZodOptional<z.ZodString>;
+}, z.core.$strict>;
 export declare const mulmoTextSlideMediaSchema: z.ZodObject<{
     type: z.ZodLiteral<"textSlide">;
     slide: z.ZodObject<{
@@ -3009,6 +3014,10 @@ export declare const mulmoImageParamsImagesValueSchema: z.ZodUnion<readonly [z.Z
         kind: z.ZodLiteral<"path">;
         path: z.ZodString;
     }, z.core.$strict>], "kind">;
+}, z.core.$strict>, z.ZodObject<{
+    type: z.ZodLiteral<"moviePrompt">;
+    prompt: z.ZodString;
+    imageName: z.ZodOptional<z.ZodString>;
 }, z.core.$strict>]>;
 export declare const mulmoImageParamsImagesSchema: z.ZodRecord<z.ZodString, z.ZodUnion<readonly [z.ZodObject<{
     type: z.ZodLiteral<"image">;
@@ -3041,6 +3050,10 @@ export declare const mulmoImageParamsImagesSchema: z.ZodRecord<z.ZodString, z.Zo
         kind: z.ZodLiteral<"path">;
         path: z.ZodString;
     }, z.core.$strict>], "kind">;
+}, z.core.$strict>, z.ZodObject<{
+    type: z.ZodLiteral<"moviePrompt">;
+    prompt: z.ZodString;
+    imageName: z.ZodOptional<z.ZodString>;
 }, z.core.$strict>]>>;
 export declare const mulmoFillOptionSchema: z.ZodObject<{
     style: z.ZodDefault<z.ZodOptional<z.ZodEnum<{
@@ -3125,6 +3138,10 @@ export declare const mulmoImageParamsSchema: z.ZodObject<{
             kind: z.ZodLiteral<"path">;
             path: z.ZodString;
         }, z.core.$strict>], "kind">;
+    }, z.core.$strict>, z.ZodObject<{
+        type: z.ZodLiteral<"moviePrompt">;
+        prompt: z.ZodString;
+        imageName: z.ZodOptional<z.ZodString>;
     }, z.core.$strict>]>>>;
     backgroundImage: z.ZodOptional<z.ZodNullable<z.ZodUnion<readonly [z.ZodString, z.ZodObject<{
         source: z.ZodDiscriminatedUnion<[z.ZodObject<{
@@ -6364,6 +6381,42 @@ export declare const mulmoBeatSchema: z.ZodObject<{
         }, z.core.$strip>], "type">>;
         bottomOffset: z.ZodOptional<z.ZodNumber>;
     }, z.core.$strict>>;
+    images: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnion<readonly [z.ZodObject<{
+        type: z.ZodLiteral<"image">;
+        source: z.ZodDiscriminatedUnion<[z.ZodObject<{
+            kind: z.ZodLiteral<"url">;
+            url: z.ZodURL;
+        }, z.core.$strict>, z.ZodObject<{
+            kind: z.ZodLiteral<"base64">;
+            data: z.ZodString;
+        }, z.core.$strict>, z.ZodObject<{
+            kind: z.ZodLiteral<"path">;
+            path: z.ZodString;
+        }, z.core.$strict>], "kind">;
+    }, z.core.$strict>, z.ZodObject<{
+        type: z.ZodLiteral<"imagePrompt">;
+        prompt: z.ZodString;
+        canvasSize: z.ZodOptional<z.ZodObject<{
+            width: z.ZodNumber;
+            height: z.ZodNumber;
+        }, z.core.$strict>>;
+    }, z.core.$strict>, z.ZodObject<{
+        type: z.ZodLiteral<"movie">;
+        source: z.ZodDiscriminatedUnion<[z.ZodObject<{
+            kind: z.ZodLiteral<"url">;
+            url: z.ZodURL;
+        }, z.core.$strict>, z.ZodObject<{
+            kind: z.ZodLiteral<"base64">;
+            data: z.ZodString;
+        }, z.core.$strict>, z.ZodObject<{
+            kind: z.ZodLiteral<"path">;
+            path: z.ZodString;
+        }, z.core.$strict>], "kind">;
+    }, z.core.$strict>, z.ZodObject<{
+        type: z.ZodLiteral<"moviePrompt">;
+        prompt: z.ZodString;
+        imageName: z.ZodOptional<z.ZodString>;
+    }, z.core.$strict>]>>>;
     imageNames: z.ZodOptional<z.ZodArray<z.ZodString>>;
     imagePrompt: z.ZodOptional<z.ZodString>;
     moviePrompt: z.ZodOptional<z.ZodString>;
@@ -6490,6 +6543,10 @@ export declare const mulmoPresentationStyleSchema: z.ZodObject<{
                 kind: z.ZodLiteral<"path">;
                 path: z.ZodString;
             }, z.core.$strict>], "kind">;
+        }, z.core.$strict>, z.ZodObject<{
+            type: z.ZodLiteral<"moviePrompt">;
+            prompt: z.ZodString;
+            imageName: z.ZodOptional<z.ZodString>;
         }, z.core.$strict>]>>>;
         backgroundImage: z.ZodOptional<z.ZodNullable<z.ZodUnion<readonly [z.ZodString, z.ZodObject<{
             source: z.ZodDiscriminatedUnion<[z.ZodObject<{
@@ -6962,6 +7019,10 @@ export declare const mulmoScriptSchema: z.ZodObject<{
                 kind: z.ZodLiteral<"path">;
                 path: z.ZodString;
             }, z.core.$strict>], "kind">;
+        }, z.core.$strict>, z.ZodObject<{
+            type: z.ZodLiteral<"moviePrompt">;
+            prompt: z.ZodString;
+            imageName: z.ZodOptional<z.ZodString>;
         }, z.core.$strict>]>>>;
         backgroundImage: z.ZodOptional<z.ZodNullable<z.ZodUnion<readonly [z.ZodString, z.ZodObject<{
             source: z.ZodDiscriminatedUnion<[z.ZodObject<{
@@ -10196,6 +10257,42 @@ export declare const mulmoScriptSchema: z.ZodObject<{
             }, z.core.$strip>], "type">>;
             bottomOffset: z.ZodOptional<z.ZodNumber>;
         }, z.core.$strict>>;
+        images: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnion<readonly [z.ZodObject<{
+            type: z.ZodLiteral<"image">;
+            source: z.ZodDiscriminatedUnion<[z.ZodObject<{
+                kind: z.ZodLiteral<"url">;
+                url: z.ZodURL;
+            }, z.core.$strict>, z.ZodObject<{
+                kind: z.ZodLiteral<"base64">;
+                data: z.ZodString;
+            }, z.core.$strict>, z.ZodObject<{
+                kind: z.ZodLiteral<"path">;
+                path: z.ZodString;
+            }, z.core.$strict>], "kind">;
+        }, z.core.$strict>, z.ZodObject<{
+            type: z.ZodLiteral<"imagePrompt">;
+            prompt: z.ZodString;
+            canvasSize: z.ZodOptional<z.ZodObject<{
+                width: z.ZodNumber;
+                height: z.ZodNumber;
+            }, z.core.$strict>>;
+        }, z.core.$strict>, z.ZodObject<{
+            type: z.ZodLiteral<"movie">;
+            source: z.ZodDiscriminatedUnion<[z.ZodObject<{
+                kind: z.ZodLiteral<"url">;
+                url: z.ZodURL;
+            }, z.core.$strict>, z.ZodObject<{
+                kind: z.ZodLiteral<"base64">;
+                data: z.ZodString;
+            }, z.core.$strict>, z.ZodObject<{
+                kind: z.ZodLiteral<"path">;
+                path: z.ZodString;
+            }, z.core.$strict>], "kind">;
+        }, z.core.$strict>, z.ZodObject<{
+            type: z.ZodLiteral<"moviePrompt">;
+            prompt: z.ZodString;
+            imageName: z.ZodOptional<z.ZodString>;
+        }, z.core.$strict>]>>>;
         imageNames: z.ZodOptional<z.ZodArray<z.ZodString>>;
         imagePrompt: z.ZodOptional<z.ZodString>;
         moviePrompt: z.ZodOptional<z.ZodString>;
@@ -10397,6 +10494,10 @@ export declare const mulmoStudioSchema: z.ZodObject<{
                     kind: z.ZodLiteral<"path">;
                     path: z.ZodString;
                 }, z.core.$strict>], "kind">;
+            }, z.core.$strict>, z.ZodObject<{
+                type: z.ZodLiteral<"moviePrompt">;
+                prompt: z.ZodString;
+                imageName: z.ZodOptional<z.ZodString>;
             }, z.core.$strict>]>>>;
             backgroundImage: z.ZodOptional<z.ZodNullable<z.ZodUnion<readonly [z.ZodString, z.ZodObject<{
                 source: z.ZodDiscriminatedUnion<[z.ZodObject<{
@@ -13631,6 +13732,42 @@ export declare const mulmoStudioSchema: z.ZodObject<{
                 }, z.core.$strip>], "type">>;
                 bottomOffset: z.ZodOptional<z.ZodNumber>;
             }, z.core.$strict>>;
+            images: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnion<readonly [z.ZodObject<{
+                type: z.ZodLiteral<"image">;
+                source: z.ZodDiscriminatedUnion<[z.ZodObject<{
+                    kind: z.ZodLiteral<"url">;
+                    url: z.ZodURL;
+                }, z.core.$strict>, z.ZodObject<{
+                    kind: z.ZodLiteral<"base64">;
+                    data: z.ZodString;
+                }, z.core.$strict>, z.ZodObject<{
+                    kind: z.ZodLiteral<"path">;
+                    path: z.ZodString;
+                }, z.core.$strict>], "kind">;
+            }, z.core.$strict>, z.ZodObject<{
+                type: z.ZodLiteral<"imagePrompt">;
+                prompt: z.ZodString;
+                canvasSize: z.ZodOptional<z.ZodObject<{
+                    width: z.ZodNumber;
+                    height: z.ZodNumber;
+                }, z.core.$strict>>;
+            }, z.core.$strict>, z.ZodObject<{
+                type: z.ZodLiteral<"movie">;
+                source: z.ZodDiscriminatedUnion<[z.ZodObject<{
+                    kind: z.ZodLiteral<"url">;
+                    url: z.ZodURL;
+                }, z.core.$strict>, z.ZodObject<{
+                    kind: z.ZodLiteral<"base64">;
+                    data: z.ZodString;
+                }, z.core.$strict>, z.ZodObject<{
+                    kind: z.ZodLiteral<"path">;
+                    path: z.ZodString;
+                }, z.core.$strict>], "kind">;
+            }, z.core.$strict>, z.ZodObject<{
+                type: z.ZodLiteral<"moviePrompt">;
+                prompt: z.ZodString;
+                imageName: z.ZodOptional<z.ZodString>;
+            }, z.core.$strict>]>>>;
             imageNames: z.ZodOptional<z.ZodArray<z.ZodString>>;
             imagePrompt: z.ZodOptional<z.ZodString>;
             moviePrompt: z.ZodOptional<z.ZodString>;
@@ -13768,6 +13905,10 @@ export declare const mulmoPromptTemplateSchema: z.ZodObject<{
                     kind: z.ZodLiteral<"path">;
                     path: z.ZodString;
                 }, z.core.$strict>], "kind">;
+            }, z.core.$strict>, z.ZodObject<{
+                type: z.ZodLiteral<"moviePrompt">;
+                prompt: z.ZodString;
+                imageName: z.ZodOptional<z.ZodString>;
             }, z.core.$strict>]>>>;
             backgroundImage: z.ZodOptional<z.ZodNullable<z.ZodUnion<readonly [z.ZodString, z.ZodObject<{
                 source: z.ZodDiscriminatedUnion<[z.ZodObject<{
@@ -14234,6 +14375,10 @@ export declare const mulmoPromptTemplateFileSchema: z.ZodObject<{
                     kind: z.ZodLiteral<"path">;
                     path: z.ZodString;
                 }, z.core.$strict>], "kind">;
+            }, z.core.$strict>, z.ZodObject<{
+                type: z.ZodLiteral<"moviePrompt">;
+                prompt: z.ZodString;
+                imageName: z.ZodOptional<z.ZodString>;
             }, z.core.$strict>]>>>;
             backgroundImage: z.ZodOptional<z.ZodNullable<z.ZodUnion<readonly [z.ZodString, z.ZodObject<{
                 source: z.ZodDiscriminatedUnion<[z.ZodObject<{

package/lib/types/schema.js

@@ -148,6 +148,13 @@ export const mulmoMovieMediaSchema = z
     source: mediaSourceSchema,
 })
     .strict();
+export const mulmoMoviePromptMediaSchema = z
+    .object({
+    type: z.literal("moviePrompt"),
+    prompt: z.string().min(1),
+    imageName: z.string().optional().describe("Reference an imageRefs key to use as image-to-video input"),
+})
+    .strict();
 export const mulmoTextSlideMediaSchema = z
     .object({
     type: z.literal("textSlide"),
@@ -337,7 +344,12 @@ export const mulmoImagePromptMediaSchema = z
     canvasSize: z.object({ width: z.number(), height: z.number() }).strict().optional(),
 })
     .strict();
-export const mulmoImageParamsImagesValueSchema = z.union([mulmoImageMediaSchema, mulmoImagePromptMediaSchema, mulmoMovieMediaSchema]);
+export const mulmoImageParamsImagesValueSchema = z.union([
+    mulmoImageMediaSchema,
+    mulmoImagePromptMediaSchema,
+    mulmoMovieMediaSchema,
+    mulmoMoviePromptMediaSchema,
+]);
 export const mulmoImageParamsImagesSchema = z.record(imageIdSchema, mulmoImageParamsImagesValueSchema);
 export const mulmoFillOptionSchema = z
     .object({
@@ -486,6 +498,9 @@ export const mulmoBeatSchema = z
     speechOptions: speechOptionsSchema.optional(),
     textSlideParams: textSlideParamsSchema.optional(),
     captionParams: mulmoCaptionParamsSchema.optional(),
+    images: mulmoImageParamsImagesSchema
+        .optional()
+        .describe("Beat-local media references. Same schema as imageParams.images. Merged with global refs (local takes precedence)."),
     imageNames: z.array(imageIdSchema).optional(), // list of image names to use for image generation. The default is all images in the imageParams.images.
     imagePrompt: z.string().optional(),
     moviePrompt: z.string().optional(),

package/lib/types/type.d.ts

@@ -1,5 +1,5 @@
 import { type CallbackFunction } from "graphai";
-import { langSchema, localizedTextSchema, mulmoBeatSchema, mulmoScriptSchema, mulmoStudioSchema, mulmoStudioBeatSchema, mulmoStoryboardSchema, mulmoStoryboardSceneSchema, mulmoStudioMultiLingualSchema, mulmoStudioMultiLingualArraySchema, mulmoStudioMultiLingualDataSchema, mulmoStudioMultiLingualFileSchema, speakerDictionarySchema, speakerSchema, mulmoSpeechParamsSchema, mulmoImageParamsSchema, mulmoImageParamsImagesValueSchema, mulmoImageParamsImagesSchema, mulmoFillOptionSchema, mulmoTransitionSchema, mulmoVideoFilterSchema, mulmoMovieParamsSchema, mulmoSoundEffectParamsSchema, mulmoLipSyncParamsSchema, textSlideParamsSchema, speechOptionsSchema, speakerDataSchema, mulmoCanvasDimensionSchema, mulmoPromptTemplateSchema, mulmoPromptTemplateFileSchema, text2ImageProviderSchema, text2HtmlImageProviderSchema, text2MovieProviderSchema, text2SpeechProviderSchema, mulmoPresentationStyleSchema, multiLingualTextsSchema, mulmoImageAssetSchema, mulmoMermaidMediaSchema, mulmoTextSlideMediaSchema, mulmoMarkdownMediaSchema, mulmoImageMediaSchema, mulmoChartMediaSchema, mediaSourceSchema, mediaSourceMermaidSchema, backgroundImageSchema, backgroundImageSourceSchema, mulmoSessionStateSchema, mulmoOpenAIImageModelSchema, mulmoGoogleImageModelSchema, mulmoGoogleMovieModelSchema, mulmoReplicateMovieModelSchema, mulmoImagePromptMediaSchema, mulmoMovieMediaSchema, markdownLayoutSchema, row2Schema, grid2x2Schema } from "./schema.js";
+import { langSchema, localizedTextSchema, mulmoBeatSchema, mulmoScriptSchema, mulmoStudioSchema, mulmoStudioBeatSchema, mulmoStoryboardSchema, mulmoStoryboardSceneSchema, mulmoStudioMultiLingualSchema, mulmoStudioMultiLingualArraySchema, mulmoStudioMultiLingualDataSchema, mulmoStudioMultiLingualFileSchema, speakerDictionarySchema, speakerSchema, mulmoSpeechParamsSchema, mulmoImageParamsSchema, mulmoImageParamsImagesValueSchema, mulmoImageParamsImagesSchema, mulmoFillOptionSchema, mulmoTransitionSchema, mulmoVideoFilterSchema, mulmoMovieParamsSchema, mulmoSoundEffectParamsSchema, mulmoLipSyncParamsSchema, textSlideParamsSchema, speechOptionsSchema, speakerDataSchema, mulmoCanvasDimensionSchema, mulmoPromptTemplateSchema, mulmoPromptTemplateFileSchema, text2ImageProviderSchema, text2HtmlImageProviderSchema, text2MovieProviderSchema, text2SpeechProviderSchema, mulmoPresentationStyleSchema, multiLingualTextsSchema, mulmoImageAssetSchema, mulmoMermaidMediaSchema, mulmoTextSlideMediaSchema, mulmoMarkdownMediaSchema, mulmoImageMediaSchema, mulmoChartMediaSchema, mediaSourceSchema, mediaSourceMermaidSchema, backgroundImageSchema, backgroundImageSourceSchema, mulmoSessionStateSchema, mulmoOpenAIImageModelSchema, mulmoGoogleImageModelSchema, mulmoGoogleMovieModelSchema, mulmoReplicateMovieModelSchema, mulmoImagePromptMediaSchema, mulmoMovieMediaSchema, mulmoMoviePromptMediaSchema, markdownLayoutSchema, row2Schema, grid2x2Schema } from "./schema.js";
 import { pdf_modes, pdf_sizes, storyToScriptGenerateMode } from "./const.js";
 import type { LLM } from "./provider2agent.js";
 import { z } from "zod";
@@ -48,6 +48,7 @@ export type MulmoGoogleImageModel = z.infer<typeof mulmoGoogleImageModelSchema>;
 export type MulmoGoogleMovieModel = z.infer<typeof mulmoGoogleMovieModelSchema>;
 export type MulmoReplicateMovieModel = z.infer<typeof mulmoReplicateMovieModelSchema>;
 export type MulmoImagePromptMedia = z.infer<typeof mulmoImagePromptMediaSchema>;
+export type MulmoMoviePromptMedia = z.infer<typeof mulmoMoviePromptMediaSchema>;
 export type MulmoMarkdownLayout = z.infer<typeof markdownLayoutSchema>;
 export type MulmoRow2 = z.infer<typeof row2Schema>;
 export type MulmoGrid2x2 = z.infer<typeof grid2x2Schema>;

package/lib/utils/context.d.ts

@@ -78,6 +78,10 @@ export declare const createStudioData: (_mulmoScript: MulmoScript, fileName: str
                     kind: "path";
                     path: string;
                 };
+            } | {
+                type: "moviePrompt";
+                prompt: string;
+                imageName?: string | undefined;
             } | {
                 type: "imagePrompt";
                 prompt: string;
@@ -1980,6 +1984,42 @@ export declare const createStudioData: (_mulmoScript: MulmoScript, fileName: str
                 } | undefined;
                 bottomOffset?: number | undefined;
             } | undefined;
+            images?: Record<string, {
+                type: "image";
+                source: {
+                    kind: "url";
+                    url: string;
+                } | {
+                    kind: "base64";
+                    data: string;
+                } | {
+                    kind: "path";
+                    path: string;
+                };
+            } | {
+                type: "movie";
+                source: {
+                    kind: "url";
+                    url: string;
+                } | {
+                    kind: "base64";
+                    data: string;
+                } | {
+                    kind: "path";
+                    path: string;
+                };
+            } | {
+                type: "moviePrompt";
+                prompt: string;
+                imageName?: string | undefined;
+            } | {
+                type: "imagePrompt";
+                prompt: string;
+                canvasSize?: {
+                    width: number;
+                    height: number;
+                } | undefined;
+            }> | undefined;
             imageNames?: string[] | undefined;
             imagePrompt?: string | undefined;
             moviePrompt?: string | undefined;
@@ -2190,6 +2230,10 @@ export declare const initializeContextFromFiles: (files: FileObject, raiseError:
                         kind: "path";
                         path: string;
                     };
+                } | {
+                    type: "moviePrompt";
+                    prompt: string;
+                    imageName?: string | undefined;
                 } | {
                     type: "imagePrompt";
                     prompt: string;
@@ -4092,6 +4136,42 @@ export declare const initializeContextFromFiles: (files: FileObject, raiseError:
                     } | undefined;
                     bottomOffset?: number | undefined;
                 } | undefined;
+                images?: Record<string, {
+                    type: "image";
+                    source: {
+                        kind: "url";
+                        url: string;
+                    } | {
+                        kind: "base64";
+                        data: string;
+                    } | {
+                        kind: "path";
+                        path: string;
+                    };
+                } | {
+                    type: "movie";
+                    source: {
+                        kind: "url";
+                        url: string;
+                    } | {
+                        kind: "base64";
+                        data: string;
+                    } | {
+                        kind: "path";
+                        path: string;
+                    };
+                } | {
+                    type: "moviePrompt";
+                    prompt: string;
+                    imageName?: string | undefined;
+                } | {
+                    type: "imagePrompt";
+                    prompt: string;
+                    canvasSize?: {
+                        width: number;
+                        height: number;
+                    } | undefined;
+                }> | undefined;
                 imageNames?: string[] | undefined;
                 imagePrompt?: string | undefined;
                 moviePrompt?: string | undefined;
@@ -4309,6 +4389,10 @@ export declare const initializeContextFromFiles: (files: FileObject, raiseError:
                     kind: "path";
                     path: string;
                 };
+            } | {
+                type: "moviePrompt";
+                prompt: string;
+                imageName?: string | undefined;
             } | {
                 type: "imagePrompt";
                 prompt: string;

package/lib/utils/html_render.d.ts

@@ -16,5 +16,11 @@ export declare const renderHTMLToFrames: (html: string, outputDir: string, width
  * page.screencast() captures frames directly to an mp4 file.
  */
 export declare const renderHTMLToVideo: (html: string, videoPath: string, width: number, height: number, totalFrames: number, fps: number) => Promise<void>;
+/**
+ * Render the final frame of an animated HTML page as a static image.
+ * Loads the animated HTML, calls window.renderFinal() to set all animations
+ * to their end state, then takes a screenshot. Used for PDF/thumbnail generation.
+ */
+export declare const renderHTMLToFinalFrame: (html: string, outputPath: string, width: number, height: number) => Promise<void>;
 export declare const renderMarkdownToImage: (markdown: string, style: string, outputPath: string, width: number, height: number) => Promise<void>;
 export declare const interpolate: (template: string, data: Record<string, string>) => string;

package/lib/utils/html_render.js

@@ -233,6 +233,35 @@ export const renderHTMLToVideo = async (html, videoPath, width, height, totalFra
         await browser.close();
     }
 };
+/**
+ * Render the final frame of an animated HTML page as a static image.
+ * Loads the animated HTML, calls window.renderFinal() to set all animations
+ * to their end state, then takes a screenshot. Used for PDF/thumbnail generation.
+ */
+export const renderHTMLToFinalFrame = async (html, outputPath, width, height) => {
+    const browser = await puppeteer.launch({
+        args: isCI ? ["--no-sandbox", "--allow-file-access-from-files"] : ["--allow-file-access-from-files"],
+    });
+    try {
+        const page = await browser.newPage();
+        await loadHtmlIntoPage(page, html, 30000);
+        await page.setViewport({ width, height });
+        await page.addStyleTag({ content: "html{height:100%;margin:0;padding:0;overflow:hidden}" });
+        await scaleContentToFit(page, width, height);
+        await waitForVideosReady(page);
+        // Render the final frame (all animations at end state)
+        await page.evaluate(async () => {
+            const w = window;
+            if (typeof w.renderFinal === "function") {
+                await Promise.resolve(w.renderFinal());
+            }
+        });
+        await page.screenshot({ path: outputPath });
+    }
+    finally {
+        await browser.close();
+    }
+};
 export const renderMarkdownToImage = async (markdown, style, outputPath, width, height) => {
     const header = `<head><style>${style}</style></head>`;
     const body = await marked(markdown);

package/lib/utils/image_plugins/html_tailwind.js

@@ -2,7 +2,7 @@ import fs from "node:fs";
 import nodePath from "node:path";
 import { MulmoBeatMethods } from "../../methods/mulmo_beat.js";
 import { getHTMLFile, getJSFile } from "../file.js";
-import { renderHTMLToImage, interpolate, renderHTMLToFrames, renderHTMLToVideo } from "../html_render.js";
+import { renderHTMLToImage, interpolate, renderHTMLToFrames, renderHTMLToVideo, renderHTMLToFinalFrame } from "../html_render.js";
 import { framesToVideo } from "../ffmpeg_utils.js";
 import { parrotingImagePath } from "./utils.js";
 import { swipeElementsToHtml, swipeElementsToScript } from "../swipe_to_html.js";
@@ -84,22 +84,13 @@ const getAnimationConfig = (params) => {
     const movie = MulmoBeatMethods.isMovieMode(animation);
     return { fps, movie };
 };
-const processHtmlTailwindAnimated = async (params) => {
-    const { beat, imagePath, canvasSize, context } = params;
-    if (!beat.image || beat.image.type !== imageType)
-        return;
-    const animConfig = getAnimationConfig(params);
-    if (!animConfig)
-        return;
-    const duration = params.beatDuration ?? beat.duration;
-    if (duration === undefined) {
-        throw new Error("html_tailwind animation requires beat.duration or audio-derived duration. Set duration in the beat or ensure audio is generated first.");
-    }
-    const fps = animConfig.fps;
-    const totalFrames = Math.floor(duration * fps);
-    if (totalFrames <= 0) {
-        throw new Error(`html_tailwind animation: totalFrames is ${totalFrames} (duration=${duration}, fps=${fps}). Increase duration or fps.`);
-    }
+/** Large frame count to ensure all animations reach their end state when exact duration is unknown */
+const FINAL_FRAME_TOTAL = 9000;
+/**
+ * Build the animated HTML string from beat data and template.
+ */
+const buildAnimatedHtml = (params, totalFrames, fps) => {
+    const { beat, context } = params;
     const imageData = beat.image;
     const { html, script } = resolveHtmlAndScript(imageData);
     const template = getHTMLFile("tailwind_animated");
@@ -115,26 +106,49 @@ const processHtmlTailwindAnimated = async (params) => {
     });
     const resolvedImageRefs = resolveImageRefs(rawHtmlData, params.imageRefs ?? {});
     const resolvedAllRefs = resolveMovieRefs(resolvedImageRefs, params.movieRefs ?? {});
-    const htmlData = resolveRelativeImagePaths(resolvedAllRefs, context.fileDirs.mulmoFileDirPath);
-    // imagePath is set to the .mp4 path by imagePluginAgent for animated beats
-    const videoPath = imagePath;
-    if (animConfig.movie) {
-        // CDP screencast: real-time recording (experimental, faster)
-        await renderHTMLToVideo(htmlData, videoPath, canvasSize.width, canvasSize.height, totalFrames, fps);
-    }
-    else {
-        // Frame-by-frame screenshot (deterministic, slower)
-        const framesDir = videoPath.replace(/\.[^/.]+$/, "_frames");
-        fs.mkdirSync(framesDir, { recursive: true });
-        try {
-            await renderHTMLToFrames(htmlData, framesDir, canvasSize.width, canvasSize.height, totalFrames, fps);
-            await framesToVideo(framesDir, videoPath, fps, canvasSize.width, canvasSize.height);
+    return resolveRelativeImagePaths(resolvedAllRefs, context.fileDirs.mulmoFileDirPath);
+};
+const processHtmlTailwindAnimated = async (params) => {
+    const { beat, imagePath, canvasSize } = params;
+    if (!beat.image || beat.image.type !== imageType)
+        return;
+    const animConfig = getAnimationConfig(params);
+    if (!animConfig)
+        return;
+    const duration = params.beatDuration ?? beat.duration;
+    const fps = animConfig.fps;
+    // Generate video if duration is available
+    if (duration !== undefined) {
+        const totalFrames = Math.floor(duration * fps);
+        if (totalFrames <= 0) {
+            throw new Error(`html_tailwind animation: totalFrames is ${totalFrames} (duration=${duration}, fps=${fps}). Increase duration or fps.`);
+        }
+        const htmlData = buildAnimatedHtml(params, totalFrames, fps);
+        // imagePath is set to the .mp4 path by imagePluginAgent for animated beats
+        const videoPath = imagePath;
+        if (animConfig.movie) {
+            await renderHTMLToVideo(htmlData, videoPath, canvasSize.width, canvasSize.height, totalFrames, fps);
         }
-        finally {
-            fs.rmSync(framesDir, { recursive: true, force: true });
+        else {
+            const framesDir = videoPath.replace(/\.[^/.]+$/, "_frames");
+            fs.mkdirSync(framesDir, { recursive: true });
+            try {
+                await renderHTMLToFrames(htmlData, framesDir, canvasSize.width, canvasSize.height, totalFrames, fps);
+                await framesToVideo(framesDir, videoPath, fps, canvasSize.width, canvasSize.height);
+            }
+            finally {
+                fs.rmSync(framesDir, { recursive: true, force: true });
+            }
         }
     }
-    return videoPath;
+    // Generate a high-quality static image of the final frame for PDF/thumbnail use.
+    // Uses a large totalFrames so all animations are guaranteed to reach their end state,
+    // even when exact duration is unknown (e.g., PDF generation without audio).
+    const finalFramePath = imagePath.replace(/_animated\.mp4$/, ".png");
+    const finalHtml = buildAnimatedHtml(params, FINAL_FRAME_TOTAL, fps);
+    await renderHTMLToFinalFrame(finalHtml, finalFramePath, canvasSize.width, canvasSize.height);
+    // Return video path when video was generated, otherwise return the static PNG path
+    return duration !== undefined ? imagePath : finalFramePath;
 };
 const processHtmlTailwindStatic = async (params) => {
     const { beat, imagePath, canvasSize, context } = params;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mulmocast",
-  "version": "2.6.2",
+  "version": "2.6.3",
   "description": "",
   "type": "module",
   "main": "lib/index.node.js",
@@ -88,7 +88,7 @@
   "homepage": "https://github.com/receptron/mulmocast-cli#readme",
   "dependencies": {
     "@google-cloud/text-to-speech": "^6.4.0",
-    "@google/genai": "^1.44.0",
+    "@google/genai": "^1.45.0",
     "@graphai/anthropic_agent": "^2.0.12",
     "@graphai/browserless_agent": "^2.0.2",
     "@graphai/gemini_agent": "^2.0.5",
@@ -98,8 +98,8 @@
     "@graphai/stream_agent_filter": "^2.0.3",
     "@graphai/vanilla": "^2.0.12",
     "@graphai/vanilla_node_agents": "^2.0.4",
-    "@inquirer/input": "^5.0.8",
-    "@inquirer/select": "^5.1.0",
+    "@inquirer/input": "^5.0.10",
+    "@inquirer/select": "^5.1.2",
     "@modelcontextprotocol/sdk": "^1.27.1",
     "@mozilla/readability": "^0.6.0",
     "@tavily/core": "^0.5.11",
@@ -108,7 +108,7 @@
     "dotenv": "^17.3.1",
     "fluent-ffmpeg": "^2.1.3",
     "graphai": "^2.0.16",
-    "jsdom": "^28.1.0",
+    "jsdom": "^29.0.0",
     "marked": "^17.0.4",
     "mulmocast-vision": "^1.0.9",
     "ora": "^9.3.0",
@@ -133,8 +133,8 @@
     "globals": "^17.4.0",
     "prettier": "^3.8.1",
     "tsx": "^4.21.0",
-    "typescript": "6.0.0-beta",
-    "typescript-eslint": "^8.57.0"
+    "typescript": "6.0.1-rc",
+    "typescript-eslint": "^8.57.1"
   },
   "engines": {
     "node": ">=22.0.0"

package/scripts/test/test_beat_local_refs.json

@@ -0,0 +1,211 @@
+{
+  "$mulmocast": { "version": "1.1" },
+  "lang": "en",
+  "canvasSize": { "width": 1080, "height": 1920 },
+  "title": "Beat-local media references test",
+  "speechParams": {
+    "provider": "openai",
+    "speakers": {
+      "Presenter": { "provider": "openai", "voiceId": "alloy" }
+    }
+  },
+  "imageParams": {
+    "provider": "google",
+    "model": "gemini-2.5-flash-image",
+    "images": {
+      "global_bg": {
+        "type": "image",
+        "source": {
+          "kind": "url",
+          "url": "https://raw.githubusercontent.com/receptron/mulmocast-cli/refs/heads/main/assets/images/mulmocast_credit.png"
+        }
+      },
+      "character": {
+        "type": "imagePrompt",
+        "prompt": "A friendly cartoon robot mascot with round blue body, big expressive eyes, small antenna on head, waving hand, white background, simple clean illustration style"
+      },
+      "global_movie": {
+        "type": "movie",
+        "source": {
+          "kind": "path",
+          "path": "../../test/assets/hello.mp4"
+        }
+      }
+    }
+  },
+  "beats": [
+    {
+      "text": "Beat1. Beat-local image referenced via image:name in html_tailwind.",
+      "speaker": "Presenter",
+      "images": {
+        "local_bg": {
+          "type": "image",
+          "source": {
+            "kind": "url",
+            "url": "https://raw.githubusercontent.com/receptron/mulmocast-cli/refs/heads/main/assets/images/mulmocast_credit.png"
+          }
+        }
+      },
+      "image": {
+        "type": "html_tailwind",
+        "html": [
+          "<div class='h-full w-full overflow-hidden relative bg-black'>",
+          "  <div style='position:absolute;inset:0;overflow:hidden'>",
+          "    <img src='image:local_bg' style='width:100%;height:100%;object-fit:cover;filter:brightness(0.8)' />",
+          "  </div>",
+          "  <div style='position:absolute;top:50%;left:40px;right:40px;transform:translateY(-50%);text-align:center'>",
+          "    <div style='display:inline-block;background:rgba(59,130,246,0.85);padding:12px 32px;border-radius:12px'>",
+          "      <span style='color:white;font-size:72px;font-weight:900'>Beat 1</span>",
+          "    </div>",
+          "    <div style='color:white;font-size:44px;font-weight:900;margin-top:20px;text-shadow:0 4px 16px rgba(0,0,0,0.9)'>Local image → image:name</div>",
+          "  </div>",
+          "</div>"
+        ]
+      }
+    },
+    {
+      "text": "Beat2. Local key overrides the global one with the same name. This beat sees the local version of global_bg.",
+      "speaker": "Presenter",
+      "images": {
+        "global_bg": {
+          "type": "image",
+          "source": {
+            "kind": "path",
+            "path": "../../assets/images/mulmocast_credit.png"
+          }
+        }
+      },
+      "image": {
+        "type": "html_tailwind",
+        "html": [
+          "<div class='h-full w-full overflow-hidden relative bg-black'>",
+          "  <div style='position:absolute;inset:0;overflow:hidden'>",
+          "    <img src='image:global_bg' style='width:100%;height:100%;object-fit:cover;filter:brightness(0.8)' />",
+          "  </div>",
+          "  <div style='position:absolute;top:50%;left:40px;right:40px;transform:translateY(-50%);text-align:center'>",
+          "    <div style='display:inline-block;background:rgba(239,68,68,0.85);padding:12px 32px;border-radius:12px'>",
+          "      <span style='color:white;font-size:72px;font-weight:900'>Beat 2</span>",
+          "    </div>",
+          "    <div style='color:white;font-size:44px;font-weight:900;margin-top:20px;text-shadow:0 4px 16px rgba(0,0,0,0.9)'>Local overrides global_bg</div>",
+          "  </div>",
+          "</div>"
+        ]
+      }
+    },
+    {
+      "text": "Beat3. No beat.images. Uses global refs only. Both image:global_bg and movie:global_movie work.",
+      "speaker": "Presenter",
+      "image": {
+        "type": "html_tailwind",
+        "html": [
+          "<div class='h-full w-full overflow-hidden relative bg-black'>",
+          "  <div style='position:absolute;inset:0;overflow:hidden'>",
+          "    <video src='movie:global_movie' autoplay muted loop style='width:100%;height:100%;object-fit:cover;filter:brightness(0.7)'></video>",
+          "  </div>",
+          "  <div style='position:absolute;top:50%;left:40px;right:40px;transform:translateY(-50%);text-align:center'>",
+          "    <div style='display:inline-block;background:rgba(34,197,94,0.85);padding:12px 32px;border-radius:12px'>",
+          "      <span style='color:white;font-size:72px;font-weight:900'>Beat 3</span>",
+          "    </div>",
+          "    <div style='color:white;font-size:44px;font-weight:900;margin-top:20px;text-shadow:0 4px 16px rgba(0,0,0,0.9)'>Global refs only (no beat.images)</div>",
+          "  </div>",
+          "</div>",
+          ""
+        ],
+        "animation": { "movie": true }
+      }
+    },
+    {
+      "text": "Beat4. Beat-local movie ref used in html_tailwind via movie:name.",
+      "speaker": "Presenter",
+      "images": {
+        "local_movie": {
+          "type": "movie",
+          "source": {
+            "kind": "path",
+            "path": "../../test/assets/hello.mp4"
+          }
+        }
+      },
+      "image": {
+        "type": "html_tailwind",
+        "html": [
+          "<div class='h-full w-full overflow-hidden relative bg-black'>",
+          "  <div style='position:absolute;inset:0;overflow:hidden'>",
+          "    <video src='movie:local_movie' autoplay muted loop style='width:100%;height:100%;object-fit:cover'></video>",
+          "  </div>",
+          "  <div style='position:absolute;top:50%;left:40px;right:40px;transform:translateY(-50%);text-align:center'>",
+          "    <div style='display:inline-block;background:rgba(168,85,247,0.85);padding:12px 32px;border-radius:12px'>",
+          "      <span style='color:white;font-size:72px;font-weight:900'>Beat 4</span>",
+          "    </div>",
+          "    <div style='color:white;font-size:44px;font-weight:900;margin-top:20px;text-shadow:0 4px 16px rgba(0,0,0,0.9)'>Local movie → movie:name</div>",
+          "  </div>",
+          "</div>"
+        ],
+        "animation": { "movie": true }
+      }
+    },
+    {
+      "text": "Beat5. This beat generates a new image using the global character reference for consistency. The same robot appears in a different scene.",
+      "speaker": "Presenter",
+      "images": {
+        "generated": {
+          "type": "imagePrompt",
+          "prompt": "The friendly cartoon robot mascot exploring a futuristic neon city at night, cyberpunk style, BRIGHT WELL-LIT SCENE"
+        }
+      },
+      "imageNames": ["character"],
+      "image": {
+        "type": "html_tailwind",
+        "html": [
+          "<div class='h-full w-full flex flex-col bg-gray-900'>",
+          "  <div style='flex:1;display:flex;align-items:center;justify-content:center;padding:40px'>",
+          "    <img src='image:generated' style='max-width:80%;max-height:100%;object-fit:contain;border-radius:24px;box-shadow:0 8px 32px rgba(0,0,0,0.5)' />",
+          "  </div>",
+          "  <div style='flex:1;display:flex;align-items:center;justify-content:center;padding:40px'>",
+          "    <div style='text-align:center'>",
+          "      <div style='display:inline-block;background:rgba(59,130,246,0.85);padding:8px 24px;border-radius:8px;margin-bottom:16px'>",
+          "        <span style='color:white;font-size:36px;font-weight:700'>Beat 5 — Global Ref → Image Gen</span>",
+          "      </div>",
+          "      <div style='color:white;font-size:40px;font-weight:900;line-height:1.4;margin-top:16px'>imageNames references global_bg</div>",
+          "      <div style='color:rgba(255,255,255,0.7);font-size:32px;margin-top:12px;line-height:1.4'>Beat-level imagePrompt generates a new image<br>using the global reference for consistency</div>",
+          "    </div>",
+          "  </div>",
+          "</div>"
+        ]
+      }
+    },
+    {
+      "text": "Beat6. This beat generates a video from the global character image. The moviePrompt uses the character as the starting frame for image-to-video generation.",
+      "speaker": "Presenter",
+      "images": {
+        "generated_movie": {
+          "type": "moviePrompt",
+          "prompt": "The robot mascot waves and dances happily, smooth animation",
+          "imageName": "character"
+        }
+      },
+      "image": {
+        "type": "html_tailwind",
+        "html": [
+          "<div class='h-full w-full flex flex-col bg-gray-900'>",
+          "  <div style='flex:1;display:flex;align-items:center;justify-content:center;padding:40px'>",
+          "    <div style='max-width:80%;max-height:100%;border-radius:24px;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,0.5)'>",
+          "      <video src='movie:generated_movie' autoplay muted loop style='width:100%;height:100%;object-fit:contain'></video>",
+          "    </div>",
+          "  </div>",
+          "  <div style='flex:1;display:flex;align-items:center;justify-content:center;padding:40px'>",
+          "    <div style='text-align:center'>",
+          "      <div style='display:inline-block;background:rgba(168,85,247,0.85);padding:8px 24px;border-radius:8px;margin-bottom:16px'>",
+          "        <span style='color:white;font-size:36px;font-weight:700'>Beat 6 — Global Ref → Movie Gen</span>",
+          "      </div>",
+          "      <div style='color:white;font-size:40px;font-weight:900;line-height:1.4;margin-top:16px'>moviePrompt.imageName = character</div>",
+          "      <div style='color:rgba(255,255,255,0.7);font-size:32px;margin-top:12px;line-height:1.4'>Image-to-video: global character image<br>becomes the starting frame for video</div>",
+          "    </div>",
+          "  </div>",
+          "</div>"
+        ],
+        "animation": { "movie": true }
+      }
+    }
+  ]
+}