mulmocast 2.4.7 → 2.4.8

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) => {

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