mulmocast 0.0.6 → 0.0.8

package/lib/types/schema.js

@@ -148,10 +148,16 @@ export const videoParamsSchema = z
   })
   .strict();
 */
+export const beatAudioParamsSchema = z
+    .object({
+    padding: z.number().optional().describe("Padding between beats"), // seconds
+})
+    .strict();
+// Note: we can't extend beatAudioParamsSchema because it has padding as optional
 export const audioParamsSchema = z
     .object({
-    introPadding: z.number().describe("Padding at the beginning of the audio"), // seconds
     padding: z.number().describe("Padding between beats"), // seconds
+    introPadding: z.number().describe("Padding at the beginning of the audio"), // seconds
     closingPadding: z.number().describe("Padding before the last beat"), // seconds
     outroPadding: z.number().describe("Padding at the end of the audio"), // seconds
 })
@@ -164,6 +170,7 @@ export const mulmoBeatSchema = z
     audio: mulmoAudioAssetSchema.optional(),
     duration: z.number().optional().describe("Duration of the beat. Used only when the text is empty"),
     imageParams: mulmoImageParamsSchema.optional(), // beat specific parameters
+    audioParams: beatAudioParamsSchema.optional(), // beat specific parameters
     speechOptions: speechOptionsSchema.optional(),
     textSlideParams: textSlideParamsSchema.optional(),
     imagePrompt: z.string().optional(), // specified or inserted by preprocessor
@@ -252,12 +259,44 @@ export const mulmoStudioMultiLingualDataSchema = z.object({
     multiLingualTexts: multiLingualTextsSchema,
 });
 export const mulmoStudioMultiLingualSchema = z.array(mulmoStudioMultiLingualDataSchema).min(1);
+export const mulmoSessionStateSchema = z.object({
+    inSession: z.object({
+        audio: z.boolean(),
+        image: z.boolean(),
+        video: z.boolean(),
+        multiLingual: z.boolean(),
+        caption: z.boolean(),
+        pdf: z.boolean(),
+    }),
+    inBeatSession: z.object({
+        audio: z.set(z.number()),
+        image: z.set(z.number()),
+        multiLingual: z.set(z.number()),
+        caption: z.set(z.number()),
+    }),
+});
 export const mulmoStudioSchema = z
     .object({
     script: mulmoScriptSchema,
     filename: z.string(),
     beats: z.array(mulmoStudioBeatSchema).min(1),
     multiLingual: mulmoStudioMultiLingualSchema,
+    state: mulmoSessionStateSchema.default({
+        inSession: {
+            audio: false,
+            image: false,
+            video: false,
+            multiLingual: false,
+            caption: false,
+            pdf: false,
+        },
+        inBeatSession: {
+            audio: new Set(),
+            image: new Set(),
+            multiLingual: new Set(),
+            caption: new Set(),
+        },
+    }),
 })
     .strict();
 export const mulmoScriptTemplateSchema = z
@@ -265,7 +304,7 @@ export const mulmoScriptTemplateSchema = z
     title: z.string(),
     description: z.string(),
     systemPrompt: z.string(),
-    script: mulmoScriptSchema.optional(),
+    scriptName: z.string().optional(),
 })
     .strict();
 export const mulmoStoryboardSceneSchema = z

package/lib/types/type.d.ts

@@ -1,5 +1,6 @@
 import { langSchema, localizedTextSchema, mulmoBeatSchema, mulmoScriptSchema, mulmoStudioSchema, mulmoStudioBeatSchema, mulmoStoryboardSchema, mulmoStoryboardSceneSchema, mulmoStudioMultiLingualSchema, mulmoStudioMultiLingualDataSchema, speakerDictionarySchema, mulmoImageParamsSchema, mulmoSpeechParamsSchema, textSlideParamsSchema, speechOptionsSchema, mulmoCanvasDimensionSchema, mulmoScriptTemplateSchema, text2ImageProviderSchema, text2SpeechProviderSchema, mulmoPresentationStyleSchema, multiLingualTextsSchema, mulmoMermaidMediaSchema, mulmoTextSlideMediaSchema, mulmoMarkdownMediaSchema, mulmoImageMediaSchema, mulmoChartMediaSchema, mediaSourceSchema } from "./schema.js";
-import { pdf_modes, pdf_sizes } from "../utils/const.js";
+import { pdf_modes, pdf_sizes, storyToScriptGenerateMode } from "../utils/const.js";
+import { LLM } from "../utils/utils.js";
 import { z } from "zod";
 export type LANG = z.infer<typeof langSchema>;
 export type MulmoBeat = z.infer<typeof mulmoBeatSchema>;
@@ -50,7 +51,7 @@ export type ScriptingParams = {
     templateName: string;
     filename: string;
     llm_model?: string;
-    llm_agent?: string;
+    llm?: LLM;
 };
 export type ImageProcessorParams = {
     beat: MulmoBeat;
@@ -67,3 +68,4 @@ export type Text2ImageAgentInfo = {
     imageParams: MulmoImageParams;
 };
 export type BeatMediaType = "movie" | "image";
+export type StoryToScriptGenerateMode = (typeof storyToScriptGenerateMode)[keyof typeof storyToScriptGenerateMode];

package/lib/utils/const.d.ts

@@ -5,3 +5,7 @@ export declare const cacheDirName = "cache";
 export declare const pdf_modes: string[];
 export declare const pdf_sizes: string[];
 export declare const languages: string[];
+export declare const storyToScriptGenerateMode: {
+    stepWise: string;
+    oneStep: string;
+};

package/lib/utils/const.js

@@ -5,3 +5,7 @@ export const cacheDirName = "cache";
 export const pdf_modes = ["slide", "talk", "handout"];
 export const pdf_sizes = ["letter", "a4"];
 export const languages = ["en", "ja"];
+export const storyToScriptGenerateMode = {
+    stepWise: "step_wise",
+    oneStep: "one_step",
+};

package/lib/utils/file.d.ts

@@ -41,6 +41,7 @@ export declare const defaultBGMPath: string;
 export declare const getHTMLFile: (filename: string) => string;
 export declare const getBaseDirPath: (basedir?: string) => string;
 export declare const getFullPath: (baseDirPath: string | undefined, file: string) => string;
+export declare const readScriptTemplateFile: (scriptName: string) => any;
 export declare const readTemplatePrompt: (templateName: string) => string;
 export declare const getAvailableTemplates: () => (MulmoScriptTemplate & {
     filename: string;

package/lib/utils/file.js

@@ -111,11 +111,23 @@ export const getFullPath = (baseDirPath, file) => {
     }
     return path.resolve(file);
 };
+export const readScriptTemplateFile = (scriptName) => {
+    const scriptPath = path.resolve(__dirname, "../../scripts/templates", scriptName);
+    const scriptData = fs.readFileSync(scriptPath, "utf-8");
+    // NOTE: We don't want to schema parse the script here to eliminate default values.
+    return JSON.parse(scriptData);
+};
 export const readTemplatePrompt = (templateName) => {
     const templatePath = getTemplateFilePath(templateName);
-    const scriptData = fs.readFileSync(templatePath, "utf-8");
-    const template = mulmoScriptTemplateSchema.parse(JSON.parse(scriptData));
-    const prompt = MulmoScriptTemplateMethods.getSystemPrompt(template);
+    const templateData = fs.readFileSync(templatePath, "utf-8");
+    const template = mulmoScriptTemplateSchema.parse(JSON.parse(templateData));
+    const script = (() => {
+        if (template.scriptName) {
+            return readScriptTemplateFile(template.scriptName);
+        }
+        return undefined;
+    })();
+    const prompt = MulmoScriptTemplateMethods.getSystemPrompt(template, script);
     return prompt;
 };
 export const getAvailableTemplates = () => {
@@ -133,7 +145,7 @@ export const getAvailableTemplates = () => {
     });
 };
 export const writingMessage = (filePath) => {
-    GraphAILogger.info(`writing: ${filePath}`);
+    GraphAILogger.debug(`writing: ${filePath}`);
 };
 export const resolveMediaSource = (source, context) => {
     if (source.kind === "path") {

package/lib/utils/filters.js

@@ -5,9 +5,10 @@ import fsPromise from "fs/promises";
 import { GraphAILogger } from "graphai";
 import { writingMessage } from "./file.js";
 import { text2hash } from "./utils.js";
+import { MulmoStudioMethods } from "../methods/mulmo_studio.js";
 export const fileCacheAgentFilter = async (context, next) => {
     const { namedInputs } = context;
-    const { file, text, force } = namedInputs;
+    const { file, force, studio, index, sessionType } = namedInputs;
     const shouldUseCache = async () => {
         if (force) {
             return false;
@@ -21,19 +22,23 @@ export const fileCacheAgentFilter = async (context, next) => {
         }
     };
     if (await shouldUseCache()) {
-        const elements = file.split("/");
-        GraphAILogger.info("cache hit: " + elements[elements.length - 1], text.slice(0, 10));
         return true;
     }
-    const output = (await next(context));
-    const buffer = output ? output["buffer"] : undefined;
-    if (buffer) {
-        writingMessage(file);
-        await fsPromise.writeFile(file, buffer);
-        return true;
+    try {
+        MulmoStudioMethods.setBeatSessionState(studio, sessionType, index, true);
+        const output = (await next(context));
+        const buffer = output ? output["buffer"] : undefined;
+        if (buffer) {
+            writingMessage(file);
+            await fsPromise.writeFile(file, buffer);
+            return true;
+        }
+        GraphAILogger.log("no cache, no buffer: " + file);
+        return false;
+    }
+    finally {
+        MulmoStudioMethods.setBeatSessionState(studio, sessionType, index, false);
     }
-    GraphAILogger.log("no cache, no buffer: " + file);
-    return false;
 };
 export const browserlessCacheGenerator = (cacheDir) => {
     const browserlessCache = async (context, next) => {

package/lib/utils/markdown.js

@@ -1,4 +1,3 @@
-import { GraphAILogger } from "graphai";
 import { marked } from "marked";
 import puppeteer from "puppeteer";
 const isCI = process.env.CI === "true";
@@ -21,7 +20,6 @@ export const renderHTMLToImage = async (html, outputPath, width, height, isMerma
     // Step 3: Capture screenshot of the page (which contains the Markdown-rendered HTML)
     await page.screenshot({ path: outputPath, omitBackground: omitBackground });
     await browser.close();
-    GraphAILogger.info(`HTML image rendered to ${outputPath}`);
 };
 export const renderMarkdownToImage = async (markdown, style, outputPath, width, height) => {
     const header = `<head><style>${style}</style></head>`;

package/lib/utils/preprocess.d.ts

@@ -7,7 +7,22 @@ export declare const createOrUpdateStudioData: (_mulmoScript: MulmoScript, curre
         imageFile?: string | undefined;
         captionFile?: string | undefined;
     }[];
+    multiLingual: {
+        multiLingualTexts: Record<string, {
+            text: string;
+            lang: string;
+            texts?: string[] | undefined;
+            ttsTexts?: string[] | undefined;
+            duration?: number | undefined;
+        }>;
+    }[];
     script: {
+        audioParams: {
+            padding: number;
+            introPadding: number;
+            closingPadding: number;
+            outroPadding: number;
+        };
         $mulmocast: {
             version: "1.0";
             credit?: "closing" | undefined;
@@ -27,12 +42,6 @@ export declare const createOrUpdateStudioData: (_mulmoScript: MulmoScript, curre
                 } | undefined;
             }>;
         };
-        audioParams: {
-            introPadding: number;
-            padding: number;
-            closingPadding: number;
-            outroPadding: number;
-        };
         beats: {
             text: string;
             speaker: string;
@@ -164,6 +173,9 @@ export declare const createOrUpdateStudioData: (_mulmoScript: MulmoScript, curre
                 style?: string | undefined;
                 moderation?: string | undefined;
             } | undefined;
+            audioParams?: {
+                padding?: number | undefined;
+            } | undefined;
             textSlideParams?: {
                 cssStyles: string | string[];
             } | undefined;
@@ -193,13 +205,20 @@ export declare const createOrUpdateStudioData: (_mulmoScript: MulmoScript, curre
         __test_invalid__?: boolean | undefined;
     };
     filename: string;
-    multiLingual: {
-        multiLingualTexts: Record<string, {
-            text: string;
-            lang: string;
-            texts?: string[] | undefined;
-            ttsTexts?: string[] | undefined;
-            duration?: number | undefined;
-        }>;
-    }[];
+    state: {
+        inSession: {
+            pdf: boolean;
+            image: boolean;
+            audio: boolean;
+            video: boolean;
+            multiLingual: boolean;
+            caption: boolean;
+        };
+        inBeatSession: {
+            image: Set<number>;
+            audio: Set<number>;
+            multiLingual: Set<number>;
+            caption: Set<number>;
+        };
+    };
 };

package/lib/utils/preprocess.js

@@ -4,12 +4,13 @@ const rebuildStudio = (currentStudio, mulmoScript, fileName) => {
     if (parsed.success) {
         return parsed.data;
     }
-    return {
+    // We need to parse it to fill default values
+    return mulmoStudioSchema.parse({
         script: mulmoScript,
         filename: fileName,
         beats: [...Array(mulmoScript.beats.length)].map(() => ({})),
         multiLingual: [...Array(mulmoScript.beats.length)].map(() => ({ multiLingualTexts: {} })),
-    };
+    });
 };
 const mulmoCredit = (speaker) => {
     return {

package/lib/utils/prompt.d.ts

@@ -2,7 +2,7 @@ import { MulmoBeat, MulmoScript, MulmoScriptTemplate, MulmoStoryboard } from "..
 export declare const imagePrompt: (beat: MulmoBeat, style?: string) => string;
 export declare const graphDataScriptFromUrlPrompt: (sourceTextInput: string) => string;
 export declare const graphDataScriptGeneratePrompt: (scene: string) => string;
-export declare const getMulmoScriptTemplateSystemPrompt: (template: MulmoScriptTemplate) => string;
+export declare const getMulmoScriptTemplateSystemPrompt: (template: MulmoScriptTemplate, script?: MulmoScript) => string;
 export declare const interactiveClarificationPrompt = "If there are any unclear points, be sure to ask the user questions and clarify them before generating the script.";
 export declare const prefixPrompt = "Here is the web content that can be used as reference material for the script:";
 export declare const translateSystemPrompt = "Please translate the given text into the language specified in language (in locale format, like en, ja, fr, ch).";
@@ -13,3 +13,4 @@ export declare const sceneToBeatsPrompt: ({ sampleBeats, beatsPerScene, allScene
     allScenes: string;
 }) => string;
 export declare const storyToScriptInfoPrompt: (scriptWithoutBeats: Omit<MulmoScript, "beats">, story: MulmoStoryboard) => string;
+export declare const storyToScriptPrompt: (script: MulmoScript, beatsPerScene: number, story: MulmoStoryboard) => string;

package/lib/utils/prompt.js

@@ -10,10 +10,10 @@ export const graphDataScriptFromUrlPrompt = (sourceTextInput) => {
 export const graphDataScriptGeneratePrompt = (scene) => {
     return `Please generate a script from the following scenes: ${scene}`;
 };
-export const getMulmoScriptTemplateSystemPrompt = (template) => {
+export const getMulmoScriptTemplateSystemPrompt = (template, script) => {
     // script is provided, use it as a script template
-    if (template.script) {
-        return `${template.systemPrompt}\n\`\`\`JSON\n${JSON.stringify(template.script)}\n\`\`\``;
+    if (script) {
+        return `${template.systemPrompt}\n\`\`\`JSON\n${JSON.stringify(script)}\n\`\`\``;
     }
     // script is not provided, use the default schema
     const defaultSchema = zodToJsonSchema(mulmoScriptSchema, {
@@ -55,3 +55,20 @@ Only include keys that exist in the sample script.
 Do not add any keys that are not present in the sample script.
 Please provide your response as valid JSON within \`\`\`json code blocks for clarity.`.trim();
 };
+export const storyToScriptPrompt = (script, beatsPerScene, story) => {
+    return `Generate script for the given storyboard, following the structure of the sample scripts below.
+Storyboard:
+- title: ${story.title}
+- references: ${story.references?.map((reference) => JSON.stringify(reference)).join("\n")}
+- scenes: ${JSON.stringify(story.scenes)}
+
+Sample script:
+\`\`\`JSON
+${JSON.stringify(script)}
+\`\`\`
+
+Generate exactly ${beatsPerScene} scripts (beats) for each scene.
+Only include keys that exist in the sample script.
+Do not add any keys that are not present in the sample script.
+Please provide your response as valid JSON within \`\`\`json code blocks for clarity.`.trim();
+};

package/lib/utils/utils.d.ts

@@ -1,8 +1,12 @@
 import { MulmoBeat, MulmoStudioMultiLingualData } from "../types/index.js";
-export declare const llmAgents: string[];
-type LLMAgent = (typeof llmAgents)[number];
-export declare const defaultOpenAIModel: string;
-export declare const llmPair: (_agent?: LLMAgent, _model?: string) => {
+export declare const llm: readonly ["openAI", "anthropic", "gemini", "groq"];
+export type LLM = (typeof llm)[number];
+export declare const llmConfig: Record<LLM, {
+    agent: string;
+    defaultModel: string;
+    max_tokens: number;
+}>;
+export declare const llmPair: (_llm?: LLM, _model?: string) => {
     agent: string;
     model: string;
     max_tokens: number;
@@ -11,4 +15,3 @@ export declare const chunkArray: <T>(array: T[], size?: number) => T[][];
 export declare const isHttp: (fileOrUrl: string) => boolean;
 export declare const text2hash: (input: string) => string;
 export declare const localizedText: (beat: MulmoBeat, multiLingualData?: MulmoStudioMultiLingualData, lang?: string) => string;
-export {};

package/lib/utils/utils.js

@@ -1,22 +1,32 @@
 import * as crypto from "crypto";
-export const llmAgents = ["openAIAgent", "anthropicAgent", "geminiAgent", "groqAgent"];
-const defaultModels = {
-    anthropicAgent: "claude-3-7-sonnet-20250219",
-    geminiAgent: "gemini-1.5-flash",
-    groqAgent: "llama3-8b-8192",
-    openAIAgent: "gpt-4o",
+export const llm = ["openAI", "anthropic", "gemini", "groq"];
+export const llmConfig = {
+    openAI: {
+        agent: "openAIAgent",
+        defaultModel: "gpt-4o",
+        max_tokens: 8192,
+    },
+    anthropic: {
+        agent: "anthropicAgent",
+        defaultModel: "claude-3-7-sonnet-20250219",
+        max_tokens: 8192,
+    },
+    gemini: {
+        agent: "geminiAgent",
+        defaultModel: "gemini-1.5-flash",
+        max_tokens: 8192,
+    },
+    groq: {
+        agent: "groqAgent",
+        defaultModel: "llama3-8b-8192",
+        max_tokens: 4096,
+    },
 };
-const longMaxTokens = {
-    anthropicAgent: 8192,
-    geminiAgent: 8192,
-    groqAgent: 4096,
-    openAIAgent: 8192,
-};
-export const defaultOpenAIModel = defaultModels["openAIAgent"];
-export const llmPair = (_agent, _model) => {
-    const agent = _agent && llmAgents.includes(_agent ?? "") ? _agent : "openAIAgent";
-    const model = _model ?? defaultModels[agent ?? ""];
-    const max_tokens = longMaxTokens[agent];
+export const llmPair = (_llm, _model) => {
+    const llmKey = _llm ?? "openAI";
+    const agent = llmConfig[llmKey]?.agent ?? llmConfig.openAI.agent;
+    const model = _model ?? llmConfig[llmKey]?.defaultModel ?? llmConfig.openAI.defaultModel;
+    const max_tokens = llmConfig[llmKey]?.max_tokens ?? llmConfig.openAI.max_tokens;
     return { agent, model, max_tokens };
 };
 export const chunkArray = (array, size = 3) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mulmocast",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "description": "",
   "type": "module",
   "main": "lib/cli/bin.js",
@@ -9,6 +9,7 @@
   },
   "files": [
     "./lib",
+    "./scripts/templates",
     "./assets/music/StarsBeyondEx.mp3",
     "./assets/audio/silent300.mp3",
     "./assets/audio/silent800.mp3",
@@ -66,7 +67,7 @@
     "dotenv": "^16.4.7",
     "fluent-ffmpeg": "^2.1.3",
     "google-auth-library": "^9.15.1",
-    "graphai": "^1.0.14",
+    "graphai": "^2.0.3",
     "inquirer": "^12.6.1",
     "marked": "^15.0.11",
     "ora": "^8.2.0",

package/scripts/templates/business.json

@@ -0,0 +1,201 @@
+{
+  "$mulmocast": {
+    "version": "1.0",
+    "credit": "closing"
+  },
+  "title": "Sample Title",
+  "references": [
+    {
+      "url": "https://www.somegreatwebsite.com/article/123",
+      "title": "Title of the article we are referencing",
+      "type": "article"
+    }
+  ],
+  "lang": "en",
+  "beats": [
+    {
+      "text": "Today we're exploring a fascinating concept that has shaped some of the most innovative companies and leaders of our time: the Reality Distortion Field.",
+      "image": {
+        "type": "textSlide",
+        "slide": {
+          "title": "This is the title of the presentation"
+        }
+      }
+    },
+    {
+      "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": "The evolution of humans is a complex journey that spans millions of years, shaped by biology, environment, and culture. Here's a high-level summary of the key stages in human evolution",
+      "image": {
+        "type": "textSlide",
+        "slide": {
+          "title": "Human Evolution",
+          "bullets": [
+            "Early Primates",
+            "Hominids and Hominins",
+            "Australopithecus",
+            "Genus Homo Emerges",
+            "Homo erectus and Migration",
+            "Neanderthals and Other Archaic Humans",
+            "Homo sapiens"
+          ]
+        }
+      }
+    },
+    {
+      "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 page shows the sales and profits of this company from January 2024 to June 2024.",
+      "image": {
+        "type": "chart",
+        "title": "Sales and Profits (from Jan to June)",
+        "chartData": {
+          "type": "bar",
+          "data": {
+            "labels": ["January", "February", "March", "April", "May", "June"],
+            "datasets": [
+              {
+                "label": "Revenue ($1000s)",
+                "data": [120, 135, 180, 155, 170, 190],
+                "backgroundColor": "rgba(54, 162, 235, 0.5)",
+                "borderColor": "rgba(54, 162, 235, 1)",
+                "borderWidth": 1
+              },
+              {
+                "label": "Profit ($1000s)",
+                "data": [45, 52, 68, 53, 61, 73],
+                "backgroundColor": "rgba(75, 192, 192, 0.5)",
+                "borderColor": "rgba(75, 192, 192, 1)",
+                "borderWidth": 1
+              }
+            ]
+          },
+          "options": {
+            "responsive": true,
+            "animation": false
+          }
+        }
+      }
+    },
+    {
+      "text": "This is a sample pie chart",
+      "image": {
+        "type": "chart",
+        "title": "A sample pie chart",
+        "chartData": {
+          "type": "pie",
+          "data": {
+            "labels": ["OpenAIと投資家の取り分", "マイクロソフトの取り分"],
+            "datasets": [
+              {
+                "data": [90, 10],
+                "backgroundColor": ["rgba(75, 192, 192, 0.5)", "rgba(54, 162, 235, 0.5)"],
+                "borderColor": ["rgba(75, 192, 192, 1)", "rgba(54, 162, 235, 1)"],
+                "borderWidth": 1
+              }
+            ]
+          },
+          "options": {
+            "responsive": true,
+            "animation": false,
+            "plugins": {
+              "legend": {
+                "position": "bottom"
+              }
+            }
+          }
+        }
+      }
+    },
+    {
+      "text": "Next, let's look at a diagram of our business process flow. This illustrates the key steps from product development to sales.",
+      "image": {
+        "type": "mermaid",
+        "title": "Business Process Flow",
+        "code": {
+          "kind": "text",
+          "text": "graph LR\n    A[Market Research] --> B[Product Planning]\n    B --> C[Development]\n    C --> D[Testing]\n    D --> E[Manufacturing]\n    E --> F[Marketing]\n    F --> G[Sales]\n    G --> H[Customer Support]\n    H --> A"
+        }
+      }
+    },
+    {
+      "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 the image of the future of enterprise applications.",
+      "image": {
+        "type": "image",
+        "source": {
+          "kind": "url",
+          "url": "https://satoshi.blogs.com/mag2/May2025/enterprise_app.png"
+        }
+      }
+    }
+  ]
+}