mulmocast 2.4.5 → 2.4.7

package/assets/html/caption.html

@@ -21,7 +21,7 @@
       /* Text positioned at the bottom */
       width: 80%;
       position: absolute;
-      bottom: 0px;
+      bottom: ${bottomOffset}%;
       /* Enable text wrapping */
       word-wrap: break-word;
       overflow-wrap: break-word;

package/lib/actions/captions.js

@@ -89,6 +89,7 @@ const generateBeatCaptions = async (beat, context, index) => {
             width: `${canvasSize.width}`,
             height: `${canvasSize.height}`,
             styles: (mergedCaptionParams.styles ?? []).join(";\n"),
+            bottomOffset: `${mergedCaptionParams.bottomOffset ?? 0}`,
         });
         await renderHTMLToImage(htmlData, imagePath, canvasSize.width, canvasSize.height, false, true);
         return {

package/lib/types/schema.d.ts

@@ -327,6 +327,7 @@ export declare const mulmoCaptionParamsSchema: z.ZodObject<{
         type: z.ZodLiteral<"delimiters">;
         delimiters: z.ZodOptional<z.ZodArray<z.ZodString>>;
     }, z.core.$strip>], "type">>;
+    bottomOffset: z.ZodOptional<z.ZodNumber>;
 }, z.core.$strict>;
 export declare const mulmoChartMediaSchema: z.ZodObject<{
     type: z.ZodLiteral<"chart">;
@@ -6288,6 +6289,7 @@ export declare const mulmoBeatSchema: z.ZodObject<{
             type: z.ZodLiteral<"delimiters">;
             delimiters: z.ZodOptional<z.ZodArray<z.ZodString>>;
         }, z.core.$strip>], "type">>;
+        bottomOffset: z.ZodOptional<z.ZodNumber>;
     }, z.core.$strict>>;
     imageNames: z.ZodOptional<z.ZodArray<z.ZodString>>;
     imagePrompt: z.ZodOptional<z.ZodString>;
@@ -6747,6 +6749,7 @@ export declare const mulmoPresentationStyleSchema: z.ZodObject<{
             type: z.ZodLiteral<"delimiters">;
             delimiters: z.ZodOptional<z.ZodArray<z.ZodString>>;
         }, z.core.$strip>], "type">>;
+        bottomOffset: z.ZodOptional<z.ZodNumber>;
     }, z.core.$strict>>;
     audioParams: z.ZodDefault<z.ZodObject<{
         padding: z.ZodDefault<z.ZodOptional<z.ZodNumber>>;
@@ -7202,6 +7205,7 @@ export declare const mulmoScriptSchema: z.ZodObject<{
             type: z.ZodLiteral<"delimiters">;
             delimiters: z.ZodOptional<z.ZodArray<z.ZodString>>;
         }, z.core.$strip>], "type">>;
+        bottomOffset: z.ZodOptional<z.ZodNumber>;
     }, z.core.$strict>>;
     audioParams: z.ZodDefault<z.ZodObject<{
         padding: z.ZodDefault<z.ZodOptional<z.ZodNumber>>;
@@ -10083,6 +10087,7 @@ export declare const mulmoScriptSchema: z.ZodObject<{
                 type: z.ZodLiteral<"delimiters">;
                 delimiters: z.ZodOptional<z.ZodArray<z.ZodString>>;
             }, z.core.$strip>], "type">>;
+            bottomOffset: z.ZodOptional<z.ZodNumber>;
         }, z.core.$strict>>;
         imageNames: z.ZodOptional<z.ZodArray<z.ZodString>>;
         imagePrompt: z.ZodOptional<z.ZodString>;
@@ -10617,6 +10622,7 @@ export declare const mulmoStudioSchema: z.ZodObject<{
                 type: z.ZodLiteral<"delimiters">;
                 delimiters: z.ZodOptional<z.ZodArray<z.ZodString>>;
             }, z.core.$strip>], "type">>;
+            bottomOffset: z.ZodOptional<z.ZodNumber>;
         }, z.core.$strict>>;
         audioParams: z.ZodDefault<z.ZodObject<{
             padding: z.ZodDefault<z.ZodOptional<z.ZodNumber>>;
@@ -13498,6 +13504,7 @@ export declare const mulmoStudioSchema: z.ZodObject<{
                     type: z.ZodLiteral<"delimiters">;
                     delimiters: z.ZodOptional<z.ZodArray<z.ZodString>>;
                 }, z.core.$strip>], "type">>;
+                bottomOffset: z.ZodOptional<z.ZodNumber>;
             }, z.core.$strict>>;
             imageNames: z.ZodOptional<z.ZodArray<z.ZodString>>;
             imagePrompt: z.ZodOptional<z.ZodString>;
@@ -13968,6 +13975,7 @@ export declare const mulmoPromptTemplateSchema: z.ZodObject<{
                 type: z.ZodLiteral<"delimiters">;
                 delimiters: z.ZodOptional<z.ZodArray<z.ZodString>>;
             }, z.core.$strip>], "type">>;
+            bottomOffset: z.ZodOptional<z.ZodNumber>;
         }, z.core.$strict>>;
         audioParams: z.ZodDefault<z.ZodObject<{
             padding: z.ZodDefault<z.ZodOptional<z.ZodNumber>>;
@@ -14417,6 +14425,7 @@ export declare const mulmoPromptTemplateFileSchema: z.ZodObject<{
                 type: z.ZodLiteral<"delimiters">;
                 delimiters: z.ZodOptional<z.ZodArray<z.ZodString>>;
             }, z.core.$strip>], "type">>;
+            bottomOffset: z.ZodOptional<z.ZodNumber>;
         }, z.core.$strict>>;
         audioParams: z.ZodDefault<z.ZodObject<{
             padding: z.ZodDefault<z.ZodOptional<z.ZodNumber>>;

package/lib/types/schema.js

@@ -174,6 +174,7 @@ export const mulmoCaptionParamsSchema = z
     styles: z.array(z.string()).optional(), // css styles
     captionSplit: captionSplitSchema.optional(), // how to determine caption timing
     textSplit: textSplitSchema.optional(), // how to split text into segments (default: none)
+    bottomOffset: z.number().min(0).max(100).optional(), // bottom offset in percentage (e.g., 20 = 20% from bottom)
 })
     .strict();
 export const mulmoChartMediaSchema = z

package/lib/utils/context.d.ts

@@ -1960,6 +1960,7 @@ export declare const createStudioData: (_mulmoScript: MulmoScript, fileName: str
                     type: "delimiters";
                     delimiters?: string[] | undefined;
                 } | undefined;
+                bottomOffset?: number | undefined;
             } | undefined;
             imageNames?: string[] | undefined;
             imagePrompt?: string | undefined;
@@ -2050,6 +2051,7 @@ export declare const createStudioData: (_mulmoScript: MulmoScript, fileName: str
                 type: "delimiters";
                 delimiters?: string[] | undefined;
             } | undefined;
+            bottomOffset?: number | undefined;
         } | undefined;
         title?: string | undefined;
         description?: string | undefined;
@@ -4052,6 +4054,7 @@ export declare const initializeContextFromFiles: (files: FileObject, raiseError:
                         type: "delimiters";
                         delimiters?: string[] | undefined;
                     } | undefined;
+                    bottomOffset?: number | undefined;
                 } | undefined;
                 imageNames?: string[] | undefined;
                 imagePrompt?: string | undefined;
@@ -4142,6 +4145,7 @@ export declare const initializeContextFromFiles: (files: FileObject, raiseError:
                     type: "delimiters";
                     delimiters?: string[] | undefined;
                 } | undefined;
+                bottomOffset?: number | undefined;
             } | undefined;
             title?: string | undefined;
             description?: string | undefined;
@@ -4534,6 +4538,7 @@ export declare const initializeContextFromFiles: (files: FileObject, raiseError:
                 type: "delimiters";
                 delimiters?: string[] | undefined;
             } | undefined;
+            bottomOffset?: number | undefined;
         } | undefined;
     };
     sessionState: {

package/lib/utils/image_plugins/html_tailwind.js

@@ -1,10 +1,21 @@
 import fs from "node:fs";
+import nodePath from "node:path";
 import { MulmoBeatMethods } from "../../methods/mulmo_beat.js";
 import { getHTMLFile } from "../file.js";
 import { renderHTMLToImage, interpolate, renderHTMLToFrames } from "../html_render.js";
 import { framesToVideo } from "../ffmpeg_utils.js";
 import { parrotingImagePath } from "./utils.js";
 export const imageType = "html_tailwind";
+/**
+ * Resolve relative paths in src attributes to file:// absolute paths.
+ * Paths starting with http://, https://, file://, data:, or / are left unchanged.
+ */
+const resolveRelativeImagePaths = (html, baseDirPath) => {
+    return html.replace(/(\bsrc\s*=\s*)(["'])((?!https?:\/\/|file:\/\/|data:|\/)[^"']+)\2/gi, (_, prefix, quote, relativePath) => {
+        const absolutePath = nodePath.resolve(baseDirPath, relativePath);
+        return `${prefix}${quote}file://${absolutePath}${quote}`;
+    });
+};
 const DEFAULT_ANIMATION_FPS = 30;
 /** Join html field into a single string (handles both string and string[]) */
 const joinHtml = (html) => {
@@ -28,7 +39,7 @@ const getAnimationConfig = (params) => {
     return { fps: DEFAULT_ANIMATION_FPS };
 };
 const processHtmlTailwindAnimated = async (params) => {
-    const { beat, imagePath, canvasSize } = params;
+    const { beat, imagePath, canvasSize, context } = params;
     if (!beat.image || beat.image.type !== imageType)
         return;
     const animConfig = getAnimationConfig(params);
@@ -46,13 +57,14 @@ const processHtmlTailwindAnimated = async (params) => {
     const html = joinHtml(beat.image.html);
     const template = getHTMLFile("tailwind_animated");
     const script = "script" in beat.image ? beat.image.script : undefined;
-    const htmlData = interpolate(template, {
+    const rawHtmlData = interpolate(template, {
         html_body: html,
         user_script: buildUserScript(script),
         totalFrames: String(totalFrames),
         fps: String(fps),
         custom_style: "",
     });
+    const htmlData = resolveRelativeImagePaths(rawHtmlData, context.fileDirs.mulmoFileDirPath);
     // imagePath is set to the .mp4 path by imagePluginAgent for animated beats
     const videoPath = imagePath;
     // Create frames directory next to the video file
@@ -68,16 +80,17 @@ const processHtmlTailwindAnimated = async (params) => {
     return videoPath;
 };
 const processHtmlTailwindStatic = async (params) => {
-    const { beat, imagePath, canvasSize } = params;
+    const { beat, imagePath, canvasSize, context } = params;
     if (!beat.image || beat.image.type !== imageType)
         return;
     const html = joinHtml(beat.image.html);
     const template = getHTMLFile("tailwind");
     const script = "script" in beat.image ? beat.image.script : undefined;
-    const htmlData = interpolate(template, {
+    const rawHtmlData = interpolate(template, {
         html_body: html,
         user_script: buildUserScript(script),
     });
+    const htmlData = resolveRelativeImagePaths(rawHtmlData, context.fileDirs.mulmoFileDirPath);
     await renderHTMLToImage(htmlData, imagePath, canvasSize.width, canvasSize.height);
     return imagePath;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mulmocast",
-  "version": "2.4.5",
+  "version": "2.4.7",
   "description": "",
   "type": "module",
   "main": "lib/index.node.js",

package/scripts/test/cinematic_showcase.json

@@ -339,10 +339,7 @@
           "  </div>",
           "</div>"
         ],
-        "script": [
-          "const animation = new MulmoAnimation();",
-          "animation.animate('#t', { opacity: [0, 1] }, { start: 0.5, end: 1.5 });"
-        ],
+        "script": ["const animation = new MulmoAnimation();", "animation.animate('#t', { opacity: [0, 1] }, { start: 0.5, end: 1.5 });"],
         "animation": true
       }
     },
@@ -490,10 +487,7 @@
           "  <div id='t' class='text-7xl font-bold' style='font-family:\"Courier New\",Monaco,monospace;color:#00ff00;opacity:0'>THE MATRIX</div>",
           "</div>"
         ],
-        "script": [
-          "const animation = new MulmoAnimation();",
-          "animation.animate('#t', { opacity: [0, 1] }, { start: 0.3, end: 1.0 });"
-        ],
+        "script": ["const animation = new MulmoAnimation();", "animation.animate('#t', { opacity: [0, 1] }, { start: 0.3, end: 1.0 });"],
         "animation": true
       }
     },
@@ -565,10 +559,7 @@
           "  <div id='t' class='text-7xl font-bold tracking-wide' style='font-family:Georgia,serif;color:#2c3e50;opacity:0'>DOCUMENTARY</div>",
           "</div>"
         ],
-        "script": [
-          "const animation = new MulmoAnimation();",
-          "animation.animate('#t', { opacity: [0, 1] }, { start: 0.5, end: 1.5 });"
-        ],
+        "script": ["const animation = new MulmoAnimation();", "animation.animate('#t', { opacity: [0, 1] }, { start: 0.5, end: 1.5 });"],
         "animation": true
       }
     },
@@ -716,10 +707,7 @@
           "  </div>",
           "</div>"
         ],
-        "script": [
-          "const animation = new MulmoAnimation();",
-          "animation.animate('#t', { opacity: [0, 1] }, { start: 1.0, end: 2.5 });"
-        ],
+        "script": ["const animation = new MulmoAnimation();", "animation.animate('#t', { opacity: [0, 1] }, { start: 1.0, end: 2.5 });"],
         "animation": true
       }
     },
@@ -913,10 +901,7 @@
           "  </div>",
           "</div>"
         ],
-        "script": [
-          "const animation = new MulmoAnimation();",
-          "animation.animate('#title', { opacity: [0, 1] }, { start: 0.5, end: 1.5 });"
-        ],
+        "script": ["const animation = new MulmoAnimation();", "animation.animate('#title', { opacity: [0, 1] }, { start: 0.5, end: 1.5 });"],
         "animation": true
       }
     },
@@ -1368,4 +1353,4 @@
       }
     }
   ]
-}
+}