mulmocast 2.4.6 → 2.4.8

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.d.ts

@@ -1,4 +1,6 @@
 import { MulmoStudioContext, PublicAPIArgs } from "../types/index.js";
 import type { GraphData } from "graphai";
+export declare const stripHtmlTags: (text: string) => string;
+export declare const calculateTimingRatios: (splitTexts: string[]) => number[];
 export declare const caption_graph_data: GraphData;
 export declare const captions: (context: MulmoStudioContext, args?: PublicAPIArgs) => Promise<MulmoStudioContext>;

package/lib/actions/captions.js

@@ -44,13 +44,21 @@ const getSplitTexts = (text, texts, textSplit) => {
     }
     return [text];
 };
-// Calculate timing ratios based on text length
-const calculateTimingRatios = (splitTexts) => {
-    const totalLength = splitTexts.reduce((sum, t) => sum + t.length, 0);
+// HTML tags commonly used in caption texts
+const CAPTION_HTML_TAGS = "span|br|b|i|em|strong|u|s|div|p|a|sub|sup|mark";
+const captionTagRegex = new RegExp(`</?(?:${CAPTION_HTML_TAGS})(?:\\s[^>]*)?\\/?>`, "gi");
+// Strip known HTML tags to get plain text length (for timing calculation, not sanitization)
+export const stripHtmlTags = (text) => {
+    return text.replace(captionTagRegex, "");
+};
+// Calculate timing ratios based on text length (HTML tags excluded)
+export const calculateTimingRatios = (splitTexts) => {
+    const plainTexts = splitTexts.map(stripHtmlTags);
+    const totalLength = plainTexts.reduce((sum, t) => sum + t.length, 0);
     if (totalLength === 0) {
         return splitTexts.map(() => 1 / splitTexts.length);
     }
-    return splitTexts.map((t) => t.length / totalLength);
+    return plainTexts.map((t) => t.length / totalLength);
 };
 // Convert ratios to cumulative ratios: [0.3, 0.5, 0.2] -> [0, 0.3, 0.8, 1.0]
 const calculateCumulativeRatios = (ratios) => {
@@ -89,6 +97,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.d.ts

@@ -1,5 +1,15 @@
 import { ImageProcessorParams } from "../../types/index.js";
 export declare const imageType = "html_tailwind";
+/**
+ * Resolve image:name references to file:// absolute paths using imageRefs.
+ * e.g., src="image:bg_office" → src="file:///abs/path/to/bg_office.png"
+ */
+export declare const resolveImageRefs: (html: string, imageRefs: Record<string, string>) => string;
+/**
+ * Resolve relative paths in src attributes to file:// absolute paths.
+ * Paths starting with http://, https://, file://, data:, image:, or / are left unchanged.
+ */
+export declare const resolveRelativeImagePaths: (html: string, baseDirPath: string) => string;
 export declare const process: (params: ImageProcessorParams) => Promise<string | undefined>;
 export declare const path: (params: ImageProcessorParams) => string;
 export declare const html: (params: ImageProcessorParams) => Promise<string | undefined>;

package/lib/utils/image_plugins/html_tailwind.js

@@ -6,12 +6,25 @@ import { renderHTMLToImage, interpolate, renderHTMLToFrames } from "../html_rend
 import { framesToVideo } from "../ffmpeg_utils.js";
 import { parrotingImagePath } from "./utils.js";
 export const imageType = "html_tailwind";
+/**
+ * Resolve image:name references to file:// absolute paths using imageRefs.
+ * e.g., src="image:bg_office" → src="file:///abs/path/to/bg_office.png"
+ */
+export const resolveImageRefs = (html, imageRefs) => {
+    return html.replace(/(\bsrc\s*=\s*)(["'])image:([^"']+)\2/gi, (match, prefix, quote, name) => {
+        const resolvedPath = imageRefs[name];
+        if (!resolvedPath) {
+            return match;
+        }
+        return `${prefix}${quote}file://${resolvedPath}${quote}`;
+    });
+};
 /**
  * Resolve relative paths in src attributes to file:// absolute paths.
- * Paths starting with http://, https://, file://, data:, or / are left unchanged.
+ * Paths starting with http://, https://, file://, data:, image:, or / are left unchanged.
  */
-const resolveRelativeImagePaths = (html, baseDirPath) => {
-    return html.replace(/(\bsrc\s*=\s*)(["'])((?!https?:\/\/|file:\/\/|data:|\/)[^"']+)\2/gi, (_, prefix, quote, relativePath) => {
+export const resolveRelativeImagePaths = (html, baseDirPath) => {
+    return html.replace(/(\bsrc\s*=\s*)(["'])((?!https?:\/\/|file:\/\/|data:|image:|\/)[^"']+)\2/gi, (_, prefix, quote, relativePath) => {
         const absolutePath = nodePath.resolve(baseDirPath, relativePath);
         return `${prefix}${quote}file://${absolutePath}${quote}`;
     });
@@ -64,7 +77,8 @@ const processHtmlTailwindAnimated = async (params) => {
         fps: String(fps),
         custom_style: "",
     });
-    const htmlData = resolveRelativeImagePaths(rawHtmlData, context.fileDirs.mulmoFileDirPath);
+    const resolvedRefs = resolveImageRefs(rawHtmlData, params.imageRefs ?? {});
+    const htmlData = resolveRelativeImagePaths(resolvedRefs, 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
@@ -90,7 +104,8 @@ const processHtmlTailwindStatic = async (params) => {
         html_body: html,
         user_script: buildUserScript(script),
     });
-    const htmlData = resolveRelativeImagePaths(rawHtmlData, context.fileDirs.mulmoFileDirPath);
+    const resolvedRefs = resolveImageRefs(rawHtmlData, params.imageRefs ?? {});
+    const htmlData = resolveRelativeImagePaths(resolvedRefs, 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.6",
+  "version": "2.4.8",
   "description": "",
   "type": "module",
   "main": "lib/index.node.js",
@@ -87,7 +87,7 @@
   "homepage": "https://github.com/receptron/mulmocast-cli#readme",
   "dependencies": {
     "@google-cloud/text-to-speech": "^6.4.0",
-    "@google/genai": "^1.42.0",
+    "@google/genai": "^1.44.0",
     "@graphai/anthropic_agent": "^2.0.12",
     "@graphai/browserless_agent": "^2.0.2",
     "@graphai/gemini_agent": "^2.0.5",
@@ -108,10 +108,10 @@
     "fluent-ffmpeg": "^2.1.3",
     "graphai": "^2.0.16",
     "jsdom": "^28.1.0",
-    "marked": "^17.0.3",
+    "marked": "^17.0.4",
     "mulmocast-vision": "^1.0.8",
     "ora": "^9.3.0",
-    "puppeteer": "^24.37.5",
+    "puppeteer": "^24.38.0",
     "replicate": "^1.4.0",
     "yaml": "^2.8.2",
     "yargs": "^18.0.0",
@@ -128,8 +128,8 @@
     "eslint": "^10.0.2",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.5",
-    "eslint-plugin-sonarjs": "^4.0.0",
-    "globals": "^17.3.0",
+    "eslint-plugin-sonarjs": "^4.0.1",
+    "globals": "^17.4.0",
     "prettier": "^3.8.1",
     "tsx": "^4.21.0",
     "typescript": "6.0.0-beta",

package/scripts/test/test_image_ref_scheme.json

@@ -0,0 +1,84 @@
+{
+  "$mulmocast": { "version": "1.1" },
+  "lang": "ja",
+  "canvasSize": { "width": 1080, "height": 1920 },
+  "title": "image: スキームテスト",
+  "speechParams": {
+    "speakers": {
+      "Presenter": { "voiceId": "shimmer" }
+    }
+  },
+  "audioParams": {
+    "bgm": {
+      "kind": "url",
+      "url": "https://github.com/receptron/mulmocast-media/raw/refs/heads/main/bgms/theme001.mp3"
+    },
+    "bgmVolume": 0.12
+  },
+  "imageParams": {
+    "provider": "google",
+    "model": "gemini-3.1-flash-image-preview",
+    "images": {
+      "bg_office": {
+        "type": "imagePrompt",
+        "prompt": "Empty modern tech office with abandoned desks and computer screens still glowing, dramatic morning sunlight, photorealistic, vertical composition 9:16"
+      },
+      "bg_city": {
+        "type": "imagePrompt",
+        "prompt": "Futuristic city skyline at sunset with neon lights reflecting on glass buildings, vibrant colors, photorealistic, vertical composition 9:16"
+      }
+    }
+  },
+  "beats": [
+    {
+      "text": "image:スキームのテストです。背景画像がimageParamsで生成した画像に置き換わります。",
+      "speaker": "Presenter",
+      "image": {
+        "type": "html_tailwind",
+        "html": [
+          "<div class='h-full w-full overflow-hidden relative bg-black'>",
+          "  <div id='wrap' style='position:absolute;inset:0;overflow:hidden'>",
+          "    <img src='image:bg_office' style='width:100%;height:100%;object-fit:cover;filter:brightness(0.7)' />",
+          "  </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:80px;font-weight:900'>image: test</span>",
+          "    </div>",
+          "    <div style='color:white;font-size:48px;font-weight:900;margin-top:20px;text-shadow:0 4px 16px rgba(0,0,0,0.9)'>bg_office を参照</div>",
+          "  </div>",
+          "</div>"
+        ],
+        "script": [
+          "const animation = new MulmoAnimation();",
+          "animation.animate('#wrap', { scale: [1.0, 1.15] }, { start: 0, end: 'auto', easing: 'linear' });"
+        ],
+        "animation": true
+      }
+    },
+    {
+      "text": "二枚目の背景です。別のimageRefsキーを参照しています。",
+      "speaker": "Presenter",
+      "image": {
+        "type": "html_tailwind",
+        "html": [
+          "<div class='h-full w-full overflow-hidden relative bg-black'>",
+          "  <div id='wrap' style='position:absolute;inset:0;overflow:hidden'>",
+          "    <img src='image:bg_city' style='width:100%;height:100%;object-fit:cover;filter:brightness(0.6)' />",
+          "  </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:80px;font-weight:900'>image: test</span>",
+          "    </div>",
+          "    <div style='color:white;font-size:48px;font-weight:900;margin-top:20px;text-shadow:0 4px 16px rgba(0,0,0,0.9)'>bg_city を参照</div>",
+          "  </div>",
+          "</div>"
+        ],
+        "script": [
+          "const animation = new MulmoAnimation();",
+          "animation.animate('#wrap', { translateX: [0, -30] }, { start: 0, end: 'auto', easing: 'linear' });"
+        ],
+        "animation": true
+      }
+    }
+  ]
+}