mulmocast 1.2.29 → 1.2.31

package/README.md

@@ -283,6 +283,8 @@ Commands:
   mulmo images <file>     Generate image files
   mulmo movie <file>      Generate movie file
   mulmo pdf <file>        Generate PDF files
+  mulmo markdown <file>   Generate markdown files
+  mulmo html <file>       Generate html files
   mulmo tool <command>    Generate Mulmo script and other tools
 
 Options:
@@ -396,6 +398,50 @@ Options:
                                    [choices: "letter", "a4"] [default: "letter"]
 ```
 
+```
+mulmo markdown <file>
+
+Generate markdown files
+
+Positionals:
+  file  Mulmo Script File                                    [string] [required]
+
+Options:
+      --version            Show version number                         [boolean]
+  -v, --verbose            verbose log     [boolean] [required] [default: false]
+  -h, --help               Show help                                   [boolean]
+  -o, --outdir             output dir                                   [string]
+  -b, --basedir            base dir                                     [string]
+  -l, --lang               target language
+  [string] [choices: "en", "ja", "fr", "es", "de", "zh-CN", "zh-TW", "ko", "it",
+                                                               "pt", "ar", "hi"]
+  -f, --force              Force regenerate           [boolean] [default: false]
+  -p, --presentationStyle  Presentation Style                           [string]
+      --image_width        Image width (e.g., 400px, 50%, auto)         [string]
+```
+
+```
+mulmo html <file>
+
+Generate html files
+
+Positionals:
+  file  Mulmo Script File                                    [string] [required]
+
+Options:
+      --version            Show version number                         [boolean]
+  -v, --verbose            verbose log     [boolean] [required] [default: false]
+  -h, --help               Show help                                   [boolean]
+  -o, --outdir             output dir                                   [string]
+  -b, --basedir            base dir                                     [string]
+  -l, --lang               target language
+  [string] [choices: "en", "ja", "fr", "es", "de", "zh-CN", "zh-TW", "ko", "it",
+                                                               "pt", "ar", "hi"]
+  -f, --force              Force regenerate           [boolean] [default: false]
+  -p, --presentationStyle  Presentation Style                           [string]
+      --image_width        Image width (e.g., 400px, 50%, auto)         [string]
+```
+
 ```
 mulmo tool <command>
 

package/lib/actions/html.d.ts

@@ -0,0 +1,3 @@
+import { MulmoStudioContext } from "../types/index.js";
+export declare const htmlFilePath: (context: MulmoStudioContext) => string;
+export declare const html: (context: MulmoStudioContext, imageWidth?: string) => Promise<void>;

package/lib/actions/html.js

@@ -0,0 +1,76 @@
+import fs from "fs";
+import path from "path";
+import { isNull } from "graphai";
+import { localizedText } from "../utils/utils.js";
+import { writingMessage } from "../utils/file.js";
+import { MulmoStudioContextMethods } from "../methods/mulmo_studio_context.js";
+const generateHtmlContent = (context, imageWidth) => {
+    const { studio, multiLingual, lang = "en" } = context;
+    const title = studio.script.title || "MulmoCast Content";
+    const description = studio.script.description || "";
+    let html = "";
+    if (description) {
+        html += `${description}\n\n`;
+    }
+    studio.script.beats.forEach((beat, index) => {
+        const text = localizedText(beat, multiLingual?.[index], lang);
+        const studioBeat = studio.beats[index];
+        if (text.trim() || studioBeat?.html || studioBeat?.imageFile) {
+            if (studioBeat?.html) {
+                html += `${studioBeat.html}\n\n`;
+            }
+            else if (studioBeat?.imageFile && isNull(studioBeat.html)) {
+                const imagePath = path.relative(context.fileDirs.outDirPath, studioBeat.imageFile);
+                const altText = `Beat ${index + 1}`;
+                if (imageWidth) {
+                    // Use HTML img tag for width control
+                    html += `<img src="${imagePath}" alt="${altText}" width="${imageWidth}" />\n\n`;
+                }
+                else {
+                    // Use standard html image syntax
+                    html += `<img src="${imagePath}" alt="${altText}" />\n\n`;
+                }
+            }
+            if (text.trim()) {
+                html += `${text}\n\n`;
+            }
+        }
+    });
+    return `
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${title}</title>
+    <!-- Tailwind CSS CDN -->
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="min-h-screen flex flex-col">
+${html}
+  </body>
+</html>
+`;
+};
+export const htmlFilePath = (context) => {
+    const { studio, fileDirs, lang = "en" } = context;
+    // Add language suffix only when target language is different from script's original language
+    const langSuffix = studio.script.lang !== lang ? `_${lang}` : "";
+    const filename = `${studio.filename}${langSuffix}.html`;
+    return path.join(fileDirs.outDirPath, filename);
+};
+const generateHtml = async (context, imageWidth) => {
+    const outputHtmlPath = htmlFilePath(context);
+    const htmlContent = generateHtmlContent(context, imageWidth);
+    fs.writeFileSync(outputHtmlPath, htmlContent, "utf8");
+    writingMessage(outputHtmlPath);
+};
+export const html = async (context, imageWidth) => {
+    try {
+        MulmoStudioContextMethods.setSessionState(context, "html", true);
+        await generateHtml(context, imageWidth);
+    }
+    finally {
+        MulmoStudioContextMethods.setSessionState(context, "html", false);
+    }
+};

package/lib/actions/image_agents.d.ts

@@ -12,9 +12,9 @@ export declare const imagePreprocessAgent: (namedInputs: {
     htmlImageSystemPrompt: string;
 } | {
     imagePath: string | undefined;
+    movieFile: string | undefined;
     referenceImageForMovie: string | undefined;
     imageParams: MulmoImageParams;
-    movieFile: string | undefined;
     soundEffectFile?: string;
     soundEffectPrompt?: string;
     soundEffectModel?: string;
@@ -36,6 +36,7 @@ export declare const imagePreprocessAgent: (namedInputs: {
         movieParams: MulmoMovieParams;
     };
     markdown?: string;
+    html?: string;
     htmlPrompt?: undefined;
     htmlImageFile?: undefined;
     htmlPath?: undefined;
@@ -66,6 +67,7 @@ export declare const imagePreprocessAgent: (namedInputs: {
         movieParams: MulmoMovieParams;
     };
     markdown?: string;
+    html?: string;
     htmlPrompt?: undefined;
     htmlImageFile?: undefined;
     htmlPath?: undefined;
@@ -99,6 +101,7 @@ export declare const imagePreprocessAgent: (namedInputs: {
         movieParams: MulmoMovieParams;
     };
     markdown?: string;
+    html?: string;
     htmlPrompt?: undefined;
     htmlImageFile?: undefined;
     htmlPath?: undefined;

package/lib/actions/image_agents.js

@@ -63,8 +63,17 @@ export const imagePreprocessAgent = async (namedInputs) => {
         if (plugin.markdown) {
             returnValue.markdown = plugin.markdown({ beat, context, imagePath, ...htmlStyle(context, beat) });
         }
+        if (plugin.html) {
+            returnValue.html = await plugin.html({ beat, context, imagePath, ...htmlStyle(context, beat) });
+        }
+        const isTypeMovie = beat.image.type === "movie";
         // undefined prompt indicates that image generation is not needed
-        return { ...returnValue, imagePath: pluginPath, referenceImageForMovie: pluginPath };
+        return {
+            ...returnValue,
+            imagePath: isTypeMovie ? undefined : pluginPath,
+            movieFile: isTypeMovie ? pluginPath : undefined,
+            referenceImageForMovie: pluginPath,
+        };
     }
     if (beat.moviePrompt && !beat.imagePrompt) {
         return { ...returnValue, imagePath, imageFromMovie: true }; // no image prompt, only movie prompt

package/lib/actions/images.d.ts

@@ -35,9 +35,9 @@ export declare const beat_graph_data: {
                 htmlImageSystemPrompt: string;
             } | {
                 imagePath: string | undefined;
+                movieFile: string | undefined;
                 referenceImageForMovie: string | undefined;
                 imageParams: MulmoImageParams;
-                movieFile: string | undefined;
                 soundEffectFile?: string;
                 soundEffectPrompt?: string;
                 soundEffectModel?: string;
@@ -59,6 +59,7 @@ export declare const beat_graph_data: {
                     movieParams: import("../types/type.js").MulmoMovieParams;
                 };
                 markdown?: string;
+                html?: string;
                 htmlPrompt?: undefined;
                 htmlImageFile?: undefined;
                 htmlPath?: undefined;
@@ -89,6 +90,7 @@ export declare const beat_graph_data: {
                     movieParams: import("../types/type.js").MulmoMovieParams;
                 };
                 markdown?: string;
+                html?: string;
                 htmlPrompt?: undefined;
                 htmlImageFile?: undefined;
                 htmlPath?: undefined;
@@ -122,6 +124,7 @@ export declare const beat_graph_data: {
                     movieParams: import("../types/type.js").MulmoMovieParams;
                 };
                 markdown?: string;
+                html?: string;
                 htmlPrompt?: undefined;
                 htmlImageFile?: undefined;
                 htmlPath?: undefined;
@@ -363,6 +366,7 @@ export declare const beat_graph_data: {
                 hasMovieAudio: string;
                 htmlImageFile: string;
                 markdown: string;
+                html: string;
             };
             output: {
                 imageFile: string;
@@ -372,6 +376,7 @@ export declare const beat_graph_data: {
                 hasMovieAudio: string;
                 htmlImageFile: string;
                 markdown: string;
+                html: string;
             };
             isResult: boolean;
         };

package/lib/actions/images.js

@@ -286,6 +286,7 @@ export const beat_graph_data = {
                 hasMovieAudio: ":audioChecker.hasMovieAudio",
                 htmlImageFile: ":preprocessor.htmlImageFile",
                 markdown: ":preprocessor.markdown",
+                html: ":preprocessor.html",
             },
             output: {
                 imageFile: ".imageFile",
@@ -295,6 +296,7 @@ export const beat_graph_data = {
                 hasMovieAudio: ".hasMovieAudio",
                 htmlImageFile: ".htmlImageFile",
                 markdown: ".markdown",
+                html: ".html",
             },
             isResult: true,
         },

package/lib/actions/index.d.ts

@@ -7,3 +7,4 @@ export * from "./movie.js";
 export * from "./pdf.js";
 export * from "./translate.js";
 export * from "./markdown.js";
+export * from "./html.js";

package/lib/actions/index.js

@@ -7,3 +7,4 @@ export * from "./movie.js";
 export * from "./pdf.js";
 export * from "./translate.js";
 export * from "./markdown.js";
+export * from "./html.js";

package/lib/actions/markdown.js

@@ -18,7 +18,7 @@ const generateMarkdownContent = (context, imageWidth) => {
             if (studioBeat?.markdown) {
                 markdown += `${studioBeat.markdown}\n\n`;
             }
-            else if (studioBeat?.imageFile && studioBeat.markdown !== "") {
+            else if (studioBeat?.imageFile) {
                 const imagePath = path.relative(context.fileDirs.outDirPath, studioBeat.imageFile);
                 if (imageWidth) {
                     // Use HTML img tag for width control

package/lib/cli/bin.js

@@ -11,6 +11,7 @@ import * as imagesCmd from "./commands/image/index.js";
 import * as movieCmd from "./commands/movie/index.js";
 import * as pdfCmd from "./commands/pdf/index.js";
 import * as markdownCmd from "./commands/markdown/index.js";
+import * as htmlCmd from "./commands/html/index.js";
 import * as toolCmd from "./commands/tool/index.js";
 import { GraphAILogger } from "graphai";
 const __filename = fileURLToPath(import.meta.url);
@@ -34,6 +35,7 @@ export const main = async () => {
         .command(movieCmd)
         .command(pdfCmd)
         .command(markdownCmd)
+        .command(htmlCmd)
         .command(toolCmd)
         .demandCommand()
         .strict()

package/lib/cli/commands/html/builder.d.ts

@@ -0,0 +1,16 @@
+import type { Argv } from "yargs";
+export declare const builder: (yargs: Argv) => Argv<{
+    o: string | undefined;
+} & {
+    b: string | undefined;
+} & {
+    l: string | undefined;
+} & {
+    f: boolean;
+} & {
+    p: string | undefined;
+} & {
+    file: string | undefined;
+} & {
+    image_width: string | undefined;
+}>;

package/lib/cli/commands/html/builder.js

@@ -0,0 +1,5 @@
+import { commonOptions } from "../../common.js";
+export const builder = (yargs) => commonOptions(yargs).option("image_width", {
+    describe: "Image width (e.g., 400px, 50%, auto)",
+    type: "string",
+});

package/lib/cli/commands/html/handler.d.ts

@@ -0,0 +1,4 @@
+import { CliArgs } from "../../../types/cli_types.js";
+export declare const handler: (argv: CliArgs<{
+    image_width?: string;
+}>) => Promise<void>;

package/lib/cli/commands/html/handler.js

@@ -0,0 +1,11 @@
+import { images, html } from "../../../actions/index.js";
+import { initializeContext, runTranslateIfNeeded } from "../../helpers.js";
+export const handler = async (argv) => {
+    const context = await initializeContext(argv);
+    if (!context) {
+        process.exit(1);
+    }
+    await runTranslateIfNeeded(context);
+    await images(context);
+    await html(context, argv.image_width);
+};

package/lib/cli/commands/html/index.d.ts

@@ -0,0 +1,4 @@
+export declare const command = "html <file>";
+export declare const desc = "Generate html files";
+export { builder } from "./builder.js";
+export { handler } from "./handler.js";

package/lib/cli/commands/html/index.js

@@ -0,0 +1,4 @@
+export const command = "html <file>";
+export const desc = "Generate html files";
+export { builder } from "./builder.js";
+export { handler } from "./handler.js";

package/lib/data/scriptTemplates.d.ts

@@ -381,6 +381,85 @@ export declare const scriptTemplates: ({
     description?: undefined;
     canvasSize?: undefined;
     captionParams?: undefined;
+} | {
+    $mulmocast: {
+        credit: string;
+        version: string;
+    };
+    beats: ({
+        image: {
+            html: string[];
+            type: string;
+            markdown?: undefined;
+            slide?: undefined;
+            data?: undefined;
+            style?: undefined;
+        };
+        text: string;
+    } | {
+        image: {
+            markdown: string[];
+            type: string;
+            html?: undefined;
+            slide?: undefined;
+            data?: undefined;
+            style?: undefined;
+        };
+        text: string;
+    } | {
+        image: {
+            slide: {
+                subtitle: string;
+                title: string;
+            };
+            type: string;
+            html?: undefined;
+            markdown?: undefined;
+            data?: undefined;
+            style?: undefined;
+        };
+        text: string;
+    } | {
+        image: {
+            data: {
+                heading: string;
+                subheading: string;
+                items?: undefined;
+                title?: undefined;
+            };
+            style: string;
+            type: string;
+            html?: undefined;
+            markdown?: undefined;
+            slide?: undefined;
+        };
+        text: string;
+    } | {
+        image: {
+            data: {
+                items: string[];
+                title: string;
+                heading?: undefined;
+                subheading?: undefined;
+            };
+            style: string;
+            type: string;
+            html?: undefined;
+            markdown?: undefined;
+            slide?: undefined;
+        };
+        text: string;
+    })[];
+    filename: string;
+    lang: string;
+    title: string;
+    references?: undefined;
+    htmlImageParams?: undefined;
+    imageParams?: undefined;
+    movieParams?: undefined;
+    description?: undefined;
+    canvasSize?: undefined;
+    captionParams?: undefined;
 } | {
     $mulmocast: {
         credit: string;

package/lib/data/scriptTemplates.js

@@ -497,6 +497,118 @@ export const scriptTemplates = [
         ],
         title: "[TITLE: Brief, engaging title for the topic]",
     },
+    {
+        $mulmocast: {
+            credit: "closing",
+            version: "1.1",
+        },
+        beats: [
+            {
+                image: {
+                    html: [
+                        '<main class="flex-grow">',
+                        "  <!-- Hero Section -->",
+                        '  <section class="bg-blue-600 text-white py-20">',
+                        '    <div class="container mx-auto px-6 text-center">',
+                        '      <h1 class="text-4xl md:text-5xl font-bold mb-4">Welcome to Mulmocast</h1>',
+                        '      <p class="text-lg md:text-xl mb-8">A modern web experience powered by Tailwind CSS</p>',
+                        '      <a href="#features" class="bg-white text-blue-600 px-6 py-3 rounded-lg font-semibold shadow hover:bg-gray-100 transition">',
+                        "        Learn More",
+                        "      </a>",
+                        "    </div>",
+                        "  </section>",
+                        "",
+                        "  <!-- Features Section -->",
+                        '  <section id="features" class="py-16 bg-gray-100">',
+                        '    <div class="container mx-auto px-6">',
+                        '      <div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">',
+                        "        <div>",
+                        '          <div class="text-blue-600 text-4xl mb-2">⚡</div>',
+                        '          <h3 class="text-xl font-semibold mb-2">Fast</h3>',
+                        '          <p class="text-gray-600">Built with performance in mind using modern tools.</p>',
+                        "        </div>",
+                        "        <div>",
+                        '          <div class="text-blue-600 text-4xl mb-2">🎨</div>',
+                        '          <h3 class="text-xl font-semibold mb-2">Beautiful</h3>',
+                        '          <p class="text-gray-600">Styled with Tailwind CSS for clean, responsive design.</p>',
+                        "        </div>",
+                        "        <div>",
+                        '          <div class="text-blue-600 text-4xl mb-2">🚀</div>',
+                        '          <h3 class="text-xl font-semibold mb-2">Launch Ready</h3>',
+                        '          <p class="text-gray-600">Easy to deploy and extend for your next big idea.</p>',
+                        "        </div>",
+                        "      </div>",
+                        "    </div>",
+                        "  </section>",
+                        "</main>",
+                        "",
+                        "<!-- Footer -->",
+                        '<footer class="bg-white text-gray-500 text-center py-6 border-t">',
+                        "  2025 Mulmocast.",
+                        "</footer>",
+                    ],
+                    type: "html_tailwind",
+                },
+                text: "This is a tailwind html format.",
+            },
+            {
+                image: {
+                    markdown: [
+                        "# Markdown Table Example",
+                        "| Item              | In Stock | Price |",
+                        "| :---------------- | :------: | ----: |",
+                        "| Python Hat        |   True   | 23.99 |",
+                        "| SQL Hat           |   True   | 23.99 |",
+                        "| Codecademy Tee    |  False   | 19.99 |",
+                        "| Codecademy Hoodie |  False   | 42.99 |",
+                    ],
+                    type: "markdown",
+                },
+                text: "This is a table of items in the store.",
+            },
+            {
+                image: {
+                    slide: {
+                        subtitle: "Tom Johnson",
+                        title: "This is the title of the presentation",
+                    },
+                    type: "textSlide",
+                },
+                text: "This is a sample slide, which just displays the title and the presenter's name of this presentation.",
+            },
+            {
+                image: {
+                    data: {
+                        heading: "How AI Is Reshaping Referencing",
+                        subheading: "From sources to systems: reliability, traceability, and credit in the age of models",
+                    },
+                    style: "sectionDividerSlide",
+                    type: "vision",
+                },
+                text: "sectionDividerSlide",
+            },
+            {
+                image: {
+                    data: {
+                        items: [
+                            "Executive summary",
+                            "Reference reliability and hallucinations",
+                            "Attribution and credit in AI workflows",
+                            "Standards & compliance (academia, journalism, law)",
+                            "Roadmap & recommendations",
+                        ],
+                        title: "Agenda",
+                    },
+                    style: "agendaSlide",
+                    type: "vision",
+                },
+                text: "agendaSlide",
+            },
+        ],
+        filename: "html_sample",
+        lang: "en",
+        title: "[TITLE: Brief, engaging title for the topic]",
+    },
     {
         $mulmocast: {
             credit: "closing",

package/lib/methods/mulmo_beat.d.ts

@@ -6,6 +6,7 @@ export declare const MulmoBeatMethods: {
         process: (params: import("../types/type.js").ImageProcessorParams) => Promise<string | undefined> | void;
         path: (params: import("../types/type.js").ImageProcessorParams) => string | undefined;
         markdown?: (params: import("../types/type.js").ImageProcessorParams) => string | undefined;
+        html?: (params: import("../types/type.js").ImageProcessorParams) => Promise<string | undefined>;
     };
     getImageReferenceForImageGenerator(beat: MulmoBeat, imageRefs: Record<string, string>): string[];
 };

package/lib/types/schema.d.ts

@@ -5778,9 +5778,11 @@ export declare const mulmoStudioBeatSchema: z.ZodObject<{
     captionFile: z.ZodOptional<z.ZodString>;
     htmlImageFile: z.ZodOptional<z.ZodString>;
     markdown: z.ZodOptional<z.ZodString>;
+    html: z.ZodOptional<z.ZodString>;
 }, "strict", z.ZodTypeAny, {
     duration?: number | undefined;
     markdown?: string | undefined;
+    html?: string | undefined;
     id?: string | undefined;
     startAt?: number | undefined;
     hash?: string | undefined;
@@ -5798,6 +5800,7 @@ export declare const mulmoStudioBeatSchema: z.ZodObject<{
 }, {
     duration?: number | undefined;
     markdown?: string | undefined;
+    html?: string | undefined;
     id?: string | undefined;
     startAt?: number | undefined;
     hash?: string | undefined;
@@ -6031,12 +6034,14 @@ export declare const mulmoSessionStateSchema: z.ZodObject<{
         caption: z.ZodBoolean;
         pdf: z.ZodBoolean;
         markdown: z.ZodBoolean;
+        html: z.ZodBoolean;
     }, "strip", z.ZodTypeAny, {
         image: boolean;
         video: boolean;
         audio: boolean;
         markdown: boolean;
         pdf: boolean;
+        html: boolean;
         multiLingual: boolean;
         caption: boolean;
     }, {
@@ -6045,6 +6050,7 @@ export declare const mulmoSessionStateSchema: z.ZodObject<{
         audio: boolean;
         markdown: boolean;
         pdf: boolean;
+        html: boolean;
         multiLingual: boolean;
         caption: boolean;
     }>;
@@ -6086,6 +6092,7 @@ export declare const mulmoSessionStateSchema: z.ZodObject<{
         audio: boolean;
         markdown: boolean;
         pdf: boolean;
+        html: boolean;
         multiLingual: boolean;
         caption: boolean;
     };
@@ -6107,6 +6114,7 @@ export declare const mulmoSessionStateSchema: z.ZodObject<{
         audio: boolean;
         markdown: boolean;
         pdf: boolean;
+        html: boolean;
         multiLingual: boolean;
         caption: boolean;
     };
@@ -8488,9 +8496,11 @@ export declare const mulmoStudioSchema: z.ZodObject<{
         captionFile: z.ZodOptional<z.ZodString>;
         htmlImageFile: z.ZodOptional<z.ZodString>;
         markdown: z.ZodOptional<z.ZodString>;
+        html: z.ZodOptional<z.ZodString>;
     }, "strict", z.ZodTypeAny, {
         duration?: number | undefined;
         markdown?: string | undefined;
+        html?: string | undefined;
         id?: string | undefined;
         startAt?: number | undefined;
         hash?: string | undefined;
@@ -8508,6 +8518,7 @@ export declare const mulmoStudioSchema: z.ZodObject<{
     }, {
         duration?: number | undefined;
         markdown?: string | undefined;
+        html?: string | undefined;
         id?: string | undefined;
         startAt?: number | undefined;
         hash?: string | undefined;
@@ -8527,6 +8538,7 @@ export declare const mulmoStudioSchema: z.ZodObject<{
     beats: {
         duration?: number | undefined;
         markdown?: string | undefined;
+        html?: string | undefined;
         id?: string | undefined;
         startAt?: number | undefined;
         hash?: string | undefined;
@@ -8875,6 +8887,7 @@ export declare const mulmoStudioSchema: z.ZodObject<{
     beats: {
         duration?: number | undefined;
         markdown?: string | undefined;
+        html?: string | undefined;
         id?: string | undefined;
         startAt?: number | undefined;
         hash?: string | undefined;

package/lib/types/schema.js

@@ -405,6 +405,7 @@ export const mulmoStudioBeatSchema = z
     captionFile: z.string().optional(), // path to the caption image
     htmlImageFile: z.string().optional(), // path to the html image
     markdown: z.string().optional(), // markdown string (alternative to image)
+    html: z.string().optional(), // html string (alternative to image)
 })
     .strict();
 export const mulmoStudioMultiLingualDataSchema = z.object({
@@ -426,6 +427,7 @@ export const mulmoSessionStateSchema = z.object({
         caption: z.boolean(),
         pdf: z.boolean(),
         markdown: z.boolean(),
+        html: z.boolean(),
     }),
     inBeatSession: z.object({
         audio: z.record(z.string(), z.boolean()),

package/lib/types/type.d.ts

@@ -85,7 +85,7 @@ export type Text2HtmlAgentInfo = {
 };
 export type BeatMediaType = "movie" | "image";
 export type StoryToScriptGenerateMode = (typeof storyToScriptGenerateMode)[keyof typeof storyToScriptGenerateMode];
-export type SessionType = "audio" | "image" | "video" | "multiLingual" | "caption" | "pdf" | "markdown";
+export type SessionType = "audio" | "image" | "video" | "multiLingual" | "caption" | "pdf" | "markdown" | "html";
 export type BeatSessionType = "audio" | "image" | "multiLingual" | "caption" | "movie" | "html" | "imageReference" | "soundEffect" | "lipSync";
 export type SessionProgressEvent = {
     kind: "session";

package/lib/utils/context.d.ts

@@ -3,6 +3,7 @@ export declare const createStudioData: (_mulmoScript: MulmoScript, fileName: str
     beats: {
         duration?: number | undefined;
         markdown?: string | undefined;
+        html?: string | undefined;
         id?: string | undefined;
         startAt?: number | undefined;
         hash?: string | undefined;
@@ -356,6 +357,7 @@ export declare const initializeContextFromFiles: (files: FileObject, raiseError:
         beats: {
             duration?: number | undefined;
             markdown?: string | undefined;
+            html?: string | undefined;
             id?: string | undefined;
             startAt?: number | undefined;
             hash?: string | undefined;
@@ -834,6 +836,7 @@ export declare const initializeContextFromFiles: (files: FileObject, raiseError:
             caption: boolean;
             pdf: boolean;
             markdown: boolean;
+            html: boolean;
         };
         inBeatSession: {
             audio: {};

package/lib/utils/context.js

@@ -35,6 +35,7 @@ const initSessionState = () => {
             caption: false,
             pdf: false,
             markdown: false,
+            html: false,
         },
         inBeatSession: {
             audio: {},

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

@@ -2,3 +2,4 @@ import { ImageProcessorParams } from "../../types/index.js";
 export declare const imageType = "html_tailwind";
 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

@@ -16,5 +16,12 @@ const processHtmlTailwind = async (params) => {
     await renderHTMLToImage(htmlData, imagePath, canvasSize.width, canvasSize.height);
     return imagePath;
 };
+const dumpHtml = async (params) => {
+    const { beat } = params;
+    if (!beat.image || beat.image.type !== imageType)
+        return;
+    return Array.isArray(beat.image.html) ? beat.image.html.join("\n") : beat.image.html;
+};
 export const process = processHtmlTailwind;
 export const path = parrotingImagePath;
+export const html = dumpHtml;

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

@@ -4,4 +4,5 @@ export declare const findImagePlugin: (imageType?: string) => {
     process: (params: ImageProcessorParams) => Promise<string | undefined> | void;
     path: (params: ImageProcessorParams) => string | undefined;
     markdown?: (params: ImageProcessorParams) => string | undefined;
+    html?: (params: ImageProcessorParams) => Promise<string | undefined>;
 } | undefined;

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

@@ -3,3 +3,4 @@ export declare const imageType = "markdown";
 export declare const process: (params: ImageProcessorParams) => Promise<string | undefined>;
 export declare const path: (params: ImageProcessorParams) => string;
 export declare const markdown: (params: ImageProcessorParams) => string | undefined;
+export declare const html: (params: ImageProcessorParams) => Promise<string>;

package/lib/utils/image_plugins/markdown.js

@@ -1,5 +1,6 @@
 import { renderMarkdownToImage } from "../markdown.js";
 import { parrotingImagePath } from "./utils.js";
+import { marked } from "marked";
 export const imageType = "markdown";
 const processMarkdown = async (params) => {
     const { beat, imagePath, textSlideStyle, canvasSize } = params;
@@ -15,6 +16,11 @@ const dumpMarkdown = (params) => {
         return;
     return Array.isArray(beat.image.markdown) ? beat.image.markdown.join("\n") : beat.image.markdown;
 };
+const dumpHtml = async (params) => {
+    const markdown = dumpMarkdown(params);
+    return await marked.parse(markdown ?? "");
+};
 export const process = processMarkdown;
 export const path = parrotingImagePath;
 export const markdown = dumpMarkdown;
+export const html = dumpHtml;

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

@@ -3,3 +3,4 @@ export declare const imageType = "textSlide";
 export declare const process: (params: ImageProcessorParams) => Promise<string | undefined>;
 export declare const path: (params: ImageProcessorParams) => string;
 export declare const markdown: (params: ImageProcessorParams) => string | undefined;
+export declare const html: (params: ImageProcessorParams) => Promise<string>;

package/lib/utils/image_plugins/text_slide.js

@@ -1,5 +1,6 @@
 import { renderMarkdownToImage } from "../markdown.js";
 import { parrotingImagePath } from "./utils.js";
+import { marked } from "marked";
 export const imageType = "textSlide";
 const processTextSlide = async (params) => {
     const { beat, imagePath, textSlideStyle, canvasSize } = params;
@@ -27,6 +28,11 @@ const dumpMarkdown = (params) => {
     const bulletsString = (slide.bullets ?? []).map((text) => `- ${text}`).join("\n");
     return `${titleString}${subtitleString}${bulletsString}`;
 };
+const dumpHtml = async (params) => {
+    const markdown = dumpMarkdown(params);
+    return await marked.parse(markdown ?? "");
+};
 export const process = processTextSlide;
 export const path = parrotingImagePath;
 export const markdown = dumpMarkdown;
+export const html = dumpHtml;

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

@@ -2,3 +2,4 @@ import { ImageProcessorParams } from "../../types/index.js";
 export declare const imageType = "vision";
 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/vision.js

@@ -15,5 +15,13 @@ const processVision = async (params) => {
     });
     return imagePath;
 };
+const dumpHtml = async (params) => {
+    const { beat } = params;
+    if (!beat.image || beat.image.type !== imageType)
+        return;
+    const handler = new htmlPlugin({});
+    return handler.getHtml(templateNameTofunctionName(beat.image.style), beat.image.data);
+};
 export const process = processVision;
 export const path = parrotingImagePath;
+export const html = dumpHtml;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mulmocast",
-  "version": "1.2.29",
+  "version": "1.2.31",
   "description": "",
   "type": "module",
   "main": "lib/index.node.js",
@@ -50,6 +50,7 @@
     "prompt": "npx tsx ./src/cli/bin.ts tool prompt",
     "schema": "npx tsx ./src/cli/bin.ts tool schema",
     "markdown": "npx tsx ./src/cli/bin.ts markdown",
+    "html": "npx tsx ./src/cli/bin.ts html",
     "story_to_script": "npx tsx ./src/cli/bin.ts tool story_to_script",
     "whisper": "npx tsx ./src/cli/bin.ts tool whisper",
     "latest": "yarn upgrade-interactive  --latest",
@@ -68,7 +69,7 @@
   "homepage": "https://github.com/receptron/mulmocast-cli#readme",
   "dependencies": {
     "@google-cloud/text-to-speech": "^6.3.0",
-    "@google/genai": "^1.17.0",
+    "@google/genai": "^1.19.0",
     "@graphai/anthropic_agent": "^2.0.11",
     "@graphai/browserless_agent": "^2.0.1",
     "@graphai/gemini_agent": "^2.0.1",
@@ -78,18 +79,18 @@
     "@graphai/stream_agent_filter": "^2.0.2",
     "@graphai/vanilla": "^2.0.12",
     "@graphai/vanilla_node_agents": "^2.0.4",
-    "@inquirer/input": "^4.2.2",
-    "@inquirer/select": "^4.3.2",
-    "@modelcontextprotocol/sdk": "^1.17.5",
+    "@inquirer/input": "^4.2.4",
+    "@inquirer/select": "^4.3.4",
+    "@modelcontextprotocol/sdk": "^1.18.0",
     "@mozilla/readability": "^0.6.0",
     "@tavily/core": "^0.5.11",
     "clipboardy": "^4.0.0",
     "dotenv": "^17.2.2",
     "fluent-ffmpeg": "^2.1.3",
     "graphai": "^2.0.14",
-    "jsdom": "^26.1.0",
-    "marked": "^16.2.1",
-    "mulmocast-vision": "^0.1.4",
+    "jsdom": "^27.0.0",
+    "marked": "^16.3.0",
+    "mulmocast-vision": "^1.0.3",
     "ora": "^8.2.0",
     "puppeteer": "^24.20.0",
     "replicate": "^1.1.0",

package/scripts/templates/html_sample.json

@@ -0,0 +1,111 @@
+{
+  "$mulmocast": {
+    "version": "1.1",
+    "credit": "closing"
+  },
+  "title": "[TITLE: Brief, engaging title for the topic]",
+  "lang": "en",
+  "beats": [
+    {
+      "text": "This is a tailwind html format.",
+      "image": {
+        "type": "html_tailwind",
+        "html": [
+          "<main class=\"flex-grow\">",
+          "  <!-- Hero Section -->",
+          "  <section class=\"bg-blue-600 text-white py-20\">",
+          "    <div class=\"container mx-auto px-6 text-center\">",
+          "      <h1 class=\"text-4xl md:text-5xl font-bold mb-4\">Welcome to Mulmocast</h1>",
+          "      <p class=\"text-lg md:text-xl mb-8\">A modern web experience powered by Tailwind CSS</p>",
+          "      <a href=\"#features\" class=\"bg-white text-blue-600 px-6 py-3 rounded-lg font-semibold shadow hover:bg-gray-100 transition\">",
+          "        Learn More",
+          "      </a>",
+          "    </div>",
+          "  </section>",
+          "",
+          "  <!-- Features Section -->",
+          "  <section id=\"features\" class=\"py-16 bg-gray-100\">",
+          "    <div class=\"container mx-auto px-6\">",
+          "      <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8 text-center\">",
+          "        <div>",
+          "          <div class=\"text-blue-600 text-4xl mb-2\">⚡</div>",
+          "          <h3 class=\"text-xl font-semibold mb-2\">Fast</h3>",
+          "          <p class=\"text-gray-600\">Built with performance in mind using modern tools.</p>",
+          "        </div>",
+          "        <div>",
+          "          <div class=\"text-blue-600 text-4xl mb-2\">🎨</div>",
+          "          <h3 class=\"text-xl font-semibold mb-2\">Beautiful</h3>",
+          "          <p class=\"text-gray-600\">Styled with Tailwind CSS for clean, responsive design.</p>",
+          "        </div>",
+          "        <div>",
+          "          <div class=\"text-blue-600 text-4xl mb-2\">🚀</div>",
+          "          <h3 class=\"text-xl font-semibold mb-2\">Launch Ready</h3>",
+          "          <p class=\"text-gray-600\">Easy to deploy and extend for your next big idea.</p>",
+          "        </div>",
+          "      </div>",
+          "    </div>",
+          "  </section>",
+          "</main>",
+          "",
+          "<!-- Footer -->",
+          "<footer class=\"bg-white text-gray-500 text-center py-6 border-t\">",
+          "  2025 Mulmocast.",
+          "</footer>"
+        ]
+      }
+    },
+    {
+      "text": "This is a table of items in the store.",
+      "image": {
+        "type": "markdown",
+        "markdown": [
+          "# Markdown Table Example",
+          "| Item              | In Stock | Price |",
+          "| :---------------- | :------: | ----: |",
+          "| Python Hat        |   True   | 23.99 |",
+          "| SQL Hat           |   True   | 23.99 |",
+          "| Codecademy Tee    |  False   | 19.99 |",
+          "| Codecademy Hoodie |  False   | 42.99 |"
+        ]
+      }
+    },
+    {
+      "text": "This is a sample slide, which just displays the title and the presenter's name of this presentation.",
+      "image": {
+        "type": "textSlide",
+        "slide": {
+          "title": "This is the title of the presentation",
+          "subtitle": "Tom Johnson"
+        }
+      }
+    },
+    {
+      "text": "sectionDividerSlide",
+      "image": {
+        "type": "vision",
+        "style": "sectionDividerSlide",
+        "data": {
+          "heading": "How AI Is Reshaping Referencing",
+          "subheading": "From sources to systems: reliability, traceability, and credit in the age of models"
+        }
+      }
+    },
+    {
+      "text": "agendaSlide",
+      "image": {
+        "type": "vision",
+        "style": "agendaSlide",
+        "data": {
+          "title": "Agenda",
+          "items": [
+            "Executive summary",
+            "Reference reliability and hallucinations",
+            "Attribution and credit in AI workflows",
+            "Standards & compliance (academia, journalism, law)",
+            "Roadmap & recommendations"
+          ]
+        }
+      }
+    }
+  ]
+}