mulmocast 2.1.29 → 2.1.30

package/lib/utils/image_plugins/markdown_layout.js

@@ -0,0 +1,127 @@
+import { marked } from "marked";
+import { generateMermaidHtml } from "./mermaid.js";
+// Regex to match mermaid code blocks
+const mermaidBlockRegex = /```mermaid\n([\s\S]*?)```/g;
+// Convert string or string array to markdown string
+const toMarkdownString = (content) => {
+    if (Array.isArray(content)) {
+        return content.join("\n");
+    }
+    return content;
+};
+// Replace mermaid code blocks with rendered HTML
+const convertMermaidBlocks = (text) => {
+    return text.replace(mermaidBlockRegex, (_match, code) => {
+        return generateMermaidHtml(code.trim());
+    });
+};
+// Parse markdown content to HTML (with mermaid support)
+const parseMarkdown = async (content) => {
+    const text = toMarkdownString(content);
+    const textWithMermaidHtml = convertMermaidBlocks(text);
+    return await marked.parse(textWithMermaidHtml);
+};
+// Generate header HTML
+const generateHeaderHtml = async (data) => {
+    const headerHtml = await parseMarkdown(data);
+    return `
+    <div class="shrink-0 px-8 py-4 border-b border-gray-200 bg-gray-50">
+      <div class="prose prose-lg max-w-none">${headerHtml}</div>
+    </div>
+  `;
+};
+// Generate sidebar HTML
+const generateSidebarHtml = async (data) => {
+    const sidebarHtml = await parseMarkdown(data);
+    return `
+    <div class="shrink-0 w-56 px-4 py-4 border-r border-gray-200 bg-gray-100 overflow-auto">
+      <div class="prose prose-sm max-w-none">${sidebarHtml}</div>
+    </div>
+  `;
+};
+// Generate row-2 layout HTML (two columns)
+const generateRow2Html = async (data) => {
+    const [left, right] = data;
+    const leftHtml = await parseMarkdown(left);
+    const rightHtml = await parseMarkdown(right);
+    return `
+    <div class="h-full flex gap-6">
+      <div class="flex-1 overflow-auto">
+        <div class="prose max-w-none">${leftHtml}</div>
+      </div>
+      <div class="flex-1 overflow-auto">
+        <div class="prose max-w-none">${rightHtml}</div>
+      </div>
+    </div>
+  `;
+};
+// Generate 2x2 grid layout HTML
+const generate2x2Html = async (data) => {
+    const [tl, tr, bl, br] = data;
+    const [tlHtml, trHtml, blHtml, brHtml] = await Promise.all([parseMarkdown(tl), parseMarkdown(tr), parseMarkdown(bl), parseMarkdown(br)]);
+    return `
+    <div class="h-full grid grid-cols-2 grid-rows-2 gap-4">
+      <div class="overflow-auto p-4 bg-gray-50 rounded-lg">
+        <div class="prose prose-sm max-w-none">${tlHtml}</div>
+      </div>
+      <div class="overflow-auto p-4 bg-gray-50 rounded-lg">
+        <div class="prose prose-sm max-w-none">${trHtml}</div>
+      </div>
+      <div class="overflow-auto p-4 bg-gray-50 rounded-lg">
+        <div class="prose prose-sm max-w-none">${blHtml}</div>
+      </div>
+      <div class="overflow-auto p-4 bg-gray-50 rounded-lg">
+        <div class="prose prose-sm max-w-none">${brHtml}</div>
+      </div>
+    </div>
+  `;
+};
+// Generate content HTML (single column)
+const generateContentHtml = async (data) => {
+    const contentHtml = await parseMarkdown(data);
+    return `<div class="prose max-w-none">${contentHtml}</div>`;
+};
+// Generate Tailwind HTML for layout
+export const generateLayoutHtml = async (md) => {
+    const parts = ['<div class="w-full h-full flex flex-col overflow-hidden">'];
+    if (md.header) {
+        parts.push(await generateHeaderHtml(md.header));
+    }
+    parts.push('<div class="flex-1 flex min-h-0 overflow-hidden">');
+    if (md["sidebar-left"]) {
+        parts.push(await generateSidebarHtml(md["sidebar-left"]));
+    }
+    parts.push('<div class="flex-1 p-6 overflow-auto">');
+    if ("row-2" in md) {
+        parts.push(await generateRow2Html(md["row-2"]));
+    }
+    else if ("2x2" in md) {
+        parts.push(await generate2x2Html(md["2x2"]));
+    }
+    else if ("content" in md) {
+        parts.push(await generateContentHtml(md.content));
+    }
+    parts.push("</div>", "</div>", "</div>");
+    return parts.join("");
+};
+// Convert layout to plain markdown string
+export const layoutToMarkdown = (md) => {
+    const parts = [];
+    if (md.header) {
+        parts.push(toMarkdownString(md.header));
+    }
+    if (md["sidebar-left"]) {
+        parts.push(toMarkdownString(md["sidebar-left"]));
+    }
+    if ("row-2" in md) {
+        parts.push(...md["row-2"].map(toMarkdownString));
+    }
+    else if ("2x2" in md) {
+        parts.push(...md["2x2"].map(toMarkdownString));
+    }
+    else if ("content" in md) {
+        parts.push(toMarkdownString(md.content));
+    }
+    return parts.join("\n\n");
+};
+export { toMarkdownString, parseMarkdown };

package/lib/utils/image_plugins/mermaid.d.ts

@@ -1,5 +1,6 @@
 import { ImageProcessorParams } from "../../types/index.js";
 export declare const imageType = "mermaid";
+export declare const generateMermaidHtml: (code: string, title?: string) => string;
 export declare const process: (params: ImageProcessorParams) => Promise<string | undefined>;
 export declare const path: (params: ImageProcessorParams) => string;
 export declare const markdown: (params: ImageProcessorParams) => string | undefined;

package/lib/utils/image_plugins/mermaid.js

@@ -1,9 +1,22 @@
 import { MulmoMediaSourceMethods } from "../../methods/index.js";
 import { getHTMLFile } from "../file.js";
 import { renderHTMLToImage, interpolate } from "../html_render.js";
-import { parrotingImagePath } from "./utils.js";
-import nodeProcess from "node:process";
+import { parrotingImagePath, generateUniqueId } from "./utils.js";
 export const imageType = "mermaid";
+// Generate mermaid HTML from code string (shared utility)
+export const generateMermaidHtml = (code, title) => {
+    const diagramId = generateUniqueId("mermaid");
+    const titleHtml = title ? `<h3 class="text-xl font-semibold mb-4">${title}</h3>` : "";
+    return `
+<div class="mermaid-container mb-6">
+  ${titleHtml}
+  <div class="flex justify-center">
+    <div id="${diagramId}" class="mermaid">
+      ${code.trim()}
+    </div>
+  </div>
+</div>`;
+};
 const processMermaid = async (params) => {
     const { beat, imagePath, canvasSize, context, textSlideStyle } = params;
     if (!beat?.image || beat.image.type !== imageType)
@@ -38,17 +51,7 @@ const dumpHtml = async (params) => {
     const title = beat.image.title || "Diagram";
     const appendix = beat.image.appendix?.join("\n") || "";
     const fullCode = `${diagramCode}\n${appendix}`.trim();
-    // eslint-disable-next-line sonarjs/pseudo-random
-    const diagramId = nodeProcess.env.NODE_ENV === "test" ? "id" : `mermaid-${Math.random().toString(36).substr(2, 9)}`;
-    return `
-<div class="mermaid-container mb-6">
-  <h3 class="text-xl font-semibold mb-4">${title}</h3>
-  <div class="flex justify-center">
-    <div id="${diagramId}" class="mermaid">
-      ${fullCode}
-    </div>
-  </div>
-</div>`;
+    return generateMermaidHtml(fullCode, title);
 };
 export const process = processMermaid;
 export const path = parrotingImagePath;

package/lib/utils/image_plugins/text_slide.js

@@ -1,5 +1,5 @@
 import { renderMarkdownToImage } from "../html_render.js";
-import { parrotingImagePath } from "./utils.js";
+import { parrotingImagePath, resolveStyle } from "./utils.js";
 import { marked } from "marked";
 export const imageType = "textSlide";
 const processTextSlide = async (params) => {
@@ -7,6 +7,7 @@ const processTextSlide = async (params) => {
     if (!beat.image || beat.image.type !== imageType)
         return;
     const slide = beat.image.slide;
+    const style = resolveStyle(beat.image.style, textSlideStyle);
     const markdown = dumpMarkdown(params) ?? "";
     const topMargin = (() => {
         if (slide.bullets?.length && slide.bullets.length > 0) {
@@ -15,7 +16,7 @@ const processTextSlide = async (params) => {
         const marginTop = slide.subtitle ? canvasSize.height * 0.4 : canvasSize.height * 0.45;
         return `body {margin-top: ${marginTop}px;}`;
     })();
-    await renderMarkdownToImage(markdown, textSlideStyle + topMargin, imagePath, canvasSize.width, canvasSize.height);
+    await renderMarkdownToImage(markdown, style + topMargin, imagePath, canvasSize.width, canvasSize.height);
     return imagePath;
 };
 const dumpMarkdown = (params) => {

package/lib/utils/image_plugins/utils.d.ts

@@ -1,2 +1,4 @@
 import { ImageProcessorParams } from "../../types/index.js";
 export declare const parrotingImagePath: (params: ImageProcessorParams) => string;
+export declare const resolveStyle: (styleName: string | undefined, fallbackStyle: string) => string;
+export declare const generateUniqueId: (prefix: string) => string;

package/lib/utils/image_plugins/utils.js

@@ -1,3 +1,16 @@
+import { getMarkdownStyle } from "../../data/markdownStyles.js";
+import { randomUUID } from "node:crypto";
+import nodeProcess from "node:process";
 export const parrotingImagePath = (params) => {
     return params.imagePath;
 };
+export const resolveStyle = (styleName, fallbackStyle) => {
+    const customStyle = styleName ? getMarkdownStyle(styleName) : undefined;
+    return customStyle ? customStyle.css : fallbackStyle;
+};
+export const generateUniqueId = (prefix) => {
+    if (nodeProcess.env.NODE_ENV === "test") {
+        return "id";
+    }
+    return `${prefix}-${randomUUID().slice(0, 8)}`;
+};

package/package.json

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

package/scripts/test/test_markdown_layout.json

@@ -0,0 +1,152 @@
+{
+  "$mulmocast": {
+    "version": "1.0"
+  },
+  "title": "Markdown Layout Test",
+  "lang": "ja",
+  "speechParams": {
+    "speakers": {
+      "Presenter": {
+        "voiceId": "shimmer",
+        "displayName": { "en": "Presenter" }
+      }
+    }
+  },
+  "beats": [
+    {
+      "id": "row2-only",
+      "speaker": "Presenter",
+      "text": "row-2レイアウトのテストです。",
+      "image": {
+        "type": "markdown",
+        "markdown": {
+          "row-2": ["# 左側\n\n- ポイント1\n- ポイント2\n- ポイント3", "# 右側\n\n```typescript\nconst x = 1;\nconsole.log(x);\n```"]
+        }
+      }
+    },
+    {
+      "id": "2x2-only",
+      "speaker": "Presenter",
+      "text": "2x2グリッドレイアウトのテストです。",
+      "image": {
+        "type": "markdown",
+        "markdown": {
+          "2x2": ["## Q1\n\n売上: 100万円", "## Q2\n\n売上: 120万円", "## Q3\n\n売上: 150万円", "## Q4\n\n売上: 180万円"]
+        }
+      }
+    },
+    {
+      "id": "row2-with-header",
+      "speaker": "Presenter",
+      "text": "ヘッダー付きrow-2レイアウトのテストです。",
+      "image": {
+        "type": "markdown",
+        "markdown": {
+          "header": "# プレゼンテーションタイトル",
+          "row-2": ["## 概要\n\nこれは左側のコンテンツです。", "## 詳細\n\nこれは右側のコンテンツです。"]
+        }
+      }
+    },
+    {
+      "id": "row2-with-sidebar",
+      "speaker": "Presenter",
+      "text": "サイドバー付きrow-2レイアウトのテストです。",
+      "image": {
+        "type": "markdown",
+        "markdown": {
+          "sidebar-left": ["目次", "1. はじめに", "2. 本文", "3. まとめ"],
+          "row-2": ["# メインコンテンツ\n\n詳細な説明がここに入ります。", "# サブコンテンツ\n\n補足情報です。"]
+        }
+      }
+    },
+    {
+      "id": "row2-full",
+      "speaker": "Presenter",
+      "text": "フルレイアウト（ヘッダー＋サイドバー＋row-2）のテストです。",
+      "image": {
+        "type": "markdown",
+        "markdown": {
+          "header": "# GraphAI入門",
+          "sidebar-left": "**目次**\n\n1. 概要\n2. 特徴\n3. 使い方",
+          "row-2": [
+            "## 概要\n\nGraphAIはワークフローエンジンです。\n\n- 宣言的\n- 柔軟\n- 拡張可能",
+            "## コード例\n\n```typescript\nconst graph = new GraphAI({\n  nodes: {...}\n});\nawait graph.run();\n```"
+          ]
+        }
+      }
+    },
+    {
+      "id": "2x2-with-header",
+      "speaker": "Presenter",
+      "text": "ヘッダー付き2x2グリッドのテストです。",
+      "image": {
+        "type": "markdown",
+        "markdown": {
+          "header": ["# 年間レポート", "2024年度"],
+          "2x2": ["### Q1\n売上: 100万", "### Q2\n売上: 120万", "### Q3\n売上: 150万", "### Q4\n売上: 180万"]
+        }
+      }
+    },
+    {
+      "id": "2x2-with-sidebar",
+      "speaker": "Presenter",
+      "text": "サイドバー付き2x2グリッドのテストです。",
+      "image": {
+        "type": "markdown",
+        "markdown": {
+          "sidebar-left": ["📊 レポート", "---", "Q1", "Q2", "Q3", "Q4"],
+          "2x2": ["**北海道**\n人口: 500万", "**東京**\n人口: 1400万", "**大阪**\n人口: 880万", "**福岡**\n人口: 510万"]
+        }
+      }
+    },
+    {
+      "id": "2x2-full",
+      "speaker": "Presenter",
+      "text": "フルレイアウト（ヘッダー＋サイドバー＋2x2）のテストです。",
+      "image": {
+        "type": "markdown",
+        "markdown": {
+          "header": "# 地域別売上",
+          "sidebar-left": "**凡例**\n\n🟢 好調\n🟡 普通\n🔴 不調",
+          "2x2": ["## 北海道 🟢\n\n前年比 +15%", "## 東北 🟡\n\n前年比 +3%", "## 関東 🟢\n\n前年比 +20%", "## 関西 🔴\n\n前年比 -5%"]
+        }
+      }
+    },
+    {
+      "id": "content-only",
+      "speaker": "Presenter",
+      "text": "シンプルなコンテンツのみのレイアウトです。",
+      "image": {
+        "type": "markdown",
+        "markdown": {
+          "content": "# シンプルなスライド\n\nこれは単一カラムのコンテンツです。\n\n- ポイント1\n- ポイント2\n- ポイント3\n\n```typescript\nconsole.log('Hello');\n```"
+        }
+      }
+    },
+    {
+      "id": "content-with-header",
+      "speaker": "Presenter",
+      "text": "ヘッダー付きコンテンツのテストです。",
+      "image": {
+        "type": "markdown",
+        "markdown": {
+          "header": "# ドキュメントタイトル",
+          "content": "## 本文\n\nここに詳細な説明文が入ります。\n\n1. 手順1\n2. 手順2\n3. 手順3"
+        }
+      }
+    },
+    {
+      "id": "content-full",
+      "speaker": "Presenter",
+      "text": "フルレイアウト（ヘッダー＋サイドバー＋content）のテストです。",
+      "image": {
+        "type": "markdown",
+        "markdown": {
+          "header": "# ユーザーガイド",
+          "sidebar-left": "**目次**\n\n1. 概要\n2. インストール\n3. 使い方",
+          "content": "## 概要\n\nこのアプリケーションは...\n\n### 特徴\n\n- 簡単操作\n- 高速処理\n- 拡張可能"
+        }
+      }
+    }
+  ]
+}

package/scripts/test/test_markdown_mermaid.json

@@ -0,0 +1,58 @@
+{
+  "$mulmocast": {
+    "version": "1.0",
+    "credit": "closing"
+  },
+  "title": "Markdown with Mermaid Test",
+  "speechParams": {
+    "speakers": {
+      "Presenter": {
+        "voiceId": "shimmer",
+        "displayName": {
+          "en": "Presenter"
+        }
+      }
+    }
+  },
+  "beats": [
+    {
+      "speaker": "Presenter",
+      "text": "This slide shows markdown with embedded mermaid using row-2 layout.",
+      "image": {
+        "type": "markdown",
+        "markdown": {
+          "row-2": [
+            ["# Architecture Overview", "", "- Component A handles requests", "- Component B processes data", "", "Key points about the flow..."],
+            ["```mermaid", "graph TD", "    A[Component A] --> B[Component B]", "    B --> C[Database]", "```"]
+          ]
+        }
+      }
+    },
+    {
+      "speaker": "Presenter",
+      "text": "This slide shows a simple markdown with mermaid in content area.",
+      "image": {
+        "type": "markdown",
+        "markdown": {
+          "header": "# System Architecture",
+          "content": ["## Flow Diagram", "", "```mermaid", "flowchart LR", "    User --> API", "    API --> Service", "    Service --> DB[(Database)]", "```"]
+        }
+      }
+    },
+    {
+      "speaker": "Presenter",
+      "text": "This uses 2x2 layout with mermaid in one cell.",
+      "image": {
+        "type": "markdown",
+        "markdown": {
+          "2x2": [
+            ["# Input", "User provides data"],
+            ["```mermaid", "graph TD", "    Input --> Process", "```"],
+            ["# Processing", "Data is transformed"],
+            ["```mermaid", "graph TD", "    Process --> Output", "```"]
+          ]
+        }
+      }
+    }
+  ]
+}

package/scripts/test/test_text_slide_style.json

@@ -0,0 +1,70 @@
+{
+  "$mulmocast": {
+    "version": "1.0",
+    "credit": "closing"
+  },
+  "title": "Text Slide Style Test",
+  "speechParams": {
+    "speakers": {
+      "Presenter": {
+        "voiceId": "shimmer",
+        "displayName": {
+          "en": "Presenter"
+        }
+      }
+    }
+  },
+  "beats": [
+    {
+      "speaker": "Presenter",
+      "text": "This is a corporate blue style slide.",
+      "image": {
+        "type": "textSlide",
+        "slide": {
+          "title": "Corporate Blue",
+          "subtitle": "Business Style",
+          "bullets": ["Professional appearance", "Blue gradient background", "Clean typography"]
+        },
+        "style": "corporate-blue"
+      }
+    },
+    {
+      "speaker": "Presenter",
+      "text": "This is a cyber neon style slide.",
+      "image": {
+        "type": "textSlide",
+        "slide": {
+          "title": "Cyber Neon",
+          "subtitle": "Tech Style",
+          "bullets": ["Glowing green text", "Dark background", "Futuristic feel"]
+        },
+        "style": "cyber-neon"
+      }
+    },
+    {
+      "speaker": "Presenter",
+      "text": "This is a zen garden style slide.",
+      "image": {
+        "type": "textSlide",
+        "slide": {
+          "title": "Zen Garden",
+          "subtitle": "Japanese Style",
+          "bullets": ["Minimalist design", "Calm colors", "Elegant typography"]
+        },
+        "style": "zen-garden"
+      }
+    },
+    {
+      "speaker": "Presenter",
+      "text": "This slide uses default style without specifying style property.",
+      "image": {
+        "type": "textSlide",
+        "slide": {
+          "title": "Default Style",
+          "subtitle": "No Style Specified",
+          "bullets": ["Uses textSlideParams", "Fallback behavior"]
+        }
+      }
+    }
+  ]
+}

package/scripts/test/test_vertexai.json

@@ -1,5 +1,8 @@
 {
-  "$schema": "../../assets/schema.json",
+  "$mulmocast": {
+    "version": "1.1",
+    "credit": "closing"
+  },
   "title": "Vertex AI Test",
   "description": "Test Vertex AI integration",
   "lang": "en",

package/scripts/test/test_vertexai.json~

@@ -0,0 +1,21 @@
+{
+  "$schema": "../../assets/schema.json",
+  "title": "Vertex AI Test",
+  "description": "Test Vertex AI integration",
+  "lang": "en",
+  "imageParams": {
+    "provider": "google",
+    "model": "imagen-4.0-generate-001",
+    "vertexai_project": "${GOOGLE_PROJECT_ID}",
+    "vertexai_location": "us-central1"
+  },
+  "speechParams": {
+    "provider": "mock"
+  },
+  "beats": [
+    {
+      "text": "Hello",
+      "imagePrompt": "A simple blue circle on white background"
+    }
+  ]
+}

package/scripts/test/zenn_combined_example.json

@@ -0,0 +1,39 @@
+{
+  "$mulmocast": { "version": "1.1" },
+  "lang": "ja",
+  "title": "実践例",
+  "speechParams": {
+    "speakers": {
+      "Presenter": {
+        "provider": "openai",
+        "voiceId": "shimmer"
+      }
+    }
+  },
+  "beats": [
+    {
+      "speaker": "Presenter",
+      "text": "3つの機能を組み合わせた実践例です。",
+      "duration": 3,
+      "image": {
+        "type": "markdown",
+        "markdown": {
+          "header": "# プロジェクトフロー",
+          "row-2": [
+            ["```mermaid", "graph TD", "    A[企画] --> B[設計]", "    B --> C[開発]", "    C --> D[テスト]", "    D --> E[リリース]", "```"],
+            [
+              "## フェーズ説明",
+              "",
+              "1. **企画**: 要件定義",
+              "2. **設計**: アーキテクチャ設計",
+              "3. **開発**: 実装",
+              "4. **テスト**: 品質保証",
+              "5. **リリース**: 本番デプロイ"
+            ]
+          ]
+        },
+        "style": "corporate-blue"
+      }
+    }
+  ]
+}