mulmocast 0.0.23 → 0.0.24

package/assets/html/caption.html

@@ -19,6 +19,7 @@
     }
     .caption {
       /* Text positioned at the bottom */
+      width: 80%;
       position: absolute;
       bottom: 0px;
       /* Enable text wrapping */
@@ -34,6 +35,7 @@
       padding-right: 10%;
       padding-top: 4px;
       background: rgba(0, 0, 0, 0.4);
+      ${styles}
     }
   </style>
 </head>

package/lib/actions/audio.d.ts

@@ -3,5 +3,5 @@ import type { CallbackFunction } from "graphai";
 import { MulmoStudioContext, MulmoBeat } from "../types/index.js";
 export declare const getBeatAudioPath: (text: string, context: MulmoStudioContext, beat: MulmoBeat, lang?: string) => string | undefined;
 export declare const audioFilePath: (context: MulmoStudioContext) => string;
-export declare const generateBeatAudio: (index: number, context: MulmoStudioContext, callbacks?: CallbackFunction[]) => Promise<void>;
-export declare const audio: (context: MulmoStudioContext, callbacks?: CallbackFunction[]) => Promise<MulmoStudioContext>;
+export declare const generateBeatAudio: (index: number, context: MulmoStudioContext, settings?: Record<string, string>, callbacks?: CallbackFunction[]) => Promise<void>;
+export declare const audio: (context: MulmoStudioContext, settings?: Record<string, string>, callbacks?: CallbackFunction[]) => Promise<MulmoStudioContext>;

package/lib/actions/audio.js

@@ -1,6 +1,5 @@
 import "dotenv/config";
-import { GraphAI } from "graphai";
-import { TaskManager } from "graphai/lib/task_manager.js";
+import { GraphAI, TaskManager } from "graphai";
 import * as agents from "@graphai/vanilla";
 import ttsNijivoiceAgent from "../agents/tts_nijivoice_agent.js";
 import addBGMAgent from "../agents/add_bgm_agent.js";
@@ -12,7 +11,7 @@ import { fileWriteAgent } from "@graphai/vanilla_node_agents";
 import { MulmoPresentationStyleMethods } from "../methods/index.js";
 import { fileCacheAgentFilter } from "../utils/filters.js";
 import { getAudioArtifactFilePath, getAudioFilePath, getOutputStudioFilePath, resolveDirPath, defaultBGMPath, mkdir, writingMessage } from "../utils/file.js";
-import { text2hash, localizedText } from "../utils/utils.js";
+import { text2hash, localizedText, settings2GraphAIConfig } from "../utils/utils.js";
 import { MulmoStudioContextMethods } from "../methods/mulmo_studio_context.js";
 import { MulmoMediaSourceMethods } from "../methods/mulmo_media_source.js";
 const vanillaAgents = agents.default ?? agents;
@@ -200,7 +199,7 @@ const audioAgents = {
     addBGMAgent,
     combineAudioFilesAgent,
 };
-export const generateBeatAudio = async (index, context, callbacks) => {
+export const generateBeatAudio = async (index, context, settings, callbacks) => {
     try {
         MulmoStudioContextMethods.setSessionState(context, "audio", true);
         const fileName = MulmoStudioContextMethods.getFileName(context);
@@ -209,8 +208,9 @@ export const generateBeatAudio = async (index, context, callbacks) => {
         const audioSegmentDirPath = resolveDirPath(audioDirPath, fileName);
         mkdir(outDirPath);
         mkdir(audioSegmentDirPath);
+        const config = settings2GraphAIConfig(settings);
         const taskManager = new TaskManager(getConcurrency(context));
-        const graph = new GraphAI(graph_tts, audioAgents, { agentFilters, taskManager });
+        const graph = new GraphAI(graph_tts, audioAgents, { agentFilters, taskManager, config });
         graph.injectValue("__mapIndex", index);
         graph.injectValue("beat", context.studio.script.beats[index]);
         graph.injectValue("studioBeat", context.studio.beats[index]);
@@ -227,7 +227,7 @@ export const generateBeatAudio = async (index, context, callbacks) => {
         MulmoStudioContextMethods.setSessionState(context, "audio", false);
     }
 };
-export const audio = async (context, callbacks) => {
+export const audio = async (context, settings, callbacks) => {
     try {
         MulmoStudioContextMethods.setSessionState(context, "audio", true);
         const fileName = MulmoStudioContextMethods.getFileName(context);
@@ -239,8 +239,9 @@ export const audio = async (context, callbacks) => {
         const outputStudioFilePath = getOutputStudioFilePath(outDirPath, fileName);
         mkdir(outDirPath);
         mkdir(audioSegmentDirPath);
+        const config = settings2GraphAIConfig(settings);
         const taskManager = new TaskManager(getConcurrency(context));
-        const graph = new GraphAI(graph_data, audioAgents, { agentFilters, taskManager });
+        const graph = new GraphAI(graph_data, audioAgents, { agentFilters, taskManager, config });
         graph.injectValue("context", context);
         graph.injectValue("audioArtifactFilePath", audioArtifactFilePath);
         graph.injectValue("audioCombinedFilePath", audioCombinedFilePath);

package/lib/actions/captions.js

@@ -1,3 +1,4 @@
+import { mulmoCaptionParamsSchema } from "../types/index.js";
 import { GraphAI, GraphAILogger } from "graphai";
 import * as agents from "@graphai/vanilla";
 import { getHTMLFile, getCaptionImagePath } from "../utils/file.js";
@@ -23,22 +24,23 @@ const graph_data = {
                             const { beat, context, index } = namedInputs;
                             try {
                                 MulmoStudioContextMethods.setBeatSessionState(context, "caption", index, true);
-                                const caption = MulmoStudioContextMethods.getCaption(context);
+                                const captionParams = mulmoCaptionParamsSchema.parse({ ...context.studio.script.captionParams, ...beat.captionParams });
                                 const canvasSize = MulmoPresentationStyleMethods.getCanvasSize(context.presentationStyle);
                                 const imagePath = getCaptionImagePath(context, index);
                                 const template = getHTMLFile("caption");
                                 const text = (() => {
                                     const multiLingual = context.multiLingual;
-                                    if (caption && multiLingual) {
-                                        return multiLingual[index].multiLingualTexts[caption].text;
+                                    if (captionParams.lang && multiLingual) {
+                                        return multiLingual[index].multiLingualTexts[captionParams.lang].text;
                                     }
-                                    GraphAILogger.warn(`No multiLingual caption found for beat ${index}, lang: ${caption}`);
+                                    GraphAILogger.warn(`No multiLingual caption found for beat ${index}, lang: ${captionParams.lang}`);
                                     return beat.text;
                                 })();
                                 const htmlData = interpolate(template, {
                                     caption: text,
                                     width: `${canvasSize.width}`,
                                     height: `${canvasSize.height}`,
+                                    styles: captionParams.styles.join(";\n"),
                                 });
                                 await renderHTMLToImage(htmlData, imagePath, canvasSize.width, canvasSize.height, false, true);
                                 context.studio.beats[index].captionFile = imagePath;

package/lib/actions/images.d.ts

@@ -32,11 +32,11 @@ export declare const imagePreprocessAgent: (namedInputs: {
     imagePath: string | undefined;
     referenceImage: string | undefined;
     htmlPrompt?: undefined;
-    htmlSystemPrompt?: undefined;
+    htmlImageSystemPrompt?: undefined;
 } | {
     imagePath: string;
     htmlPrompt: string;
-    htmlSystemPrompt: string[];
+    htmlImageSystemPrompt: string[];
 } | {
     imagePath: string;
     images: string[];
@@ -64,7 +64,7 @@ export declare const imagePreprocessAgent: (namedInputs: {
     };
     movieFile: string | undefined;
     htmlPrompt?: undefined;
-    htmlSystemPrompt?: undefined;
+    htmlImageSystemPrompt?: undefined;
 } | {
     images: string[];
     imageParams: {
@@ -93,7 +93,7 @@ export declare const imagePreprocessAgent: (namedInputs: {
     referenceImage: string;
     prompt: string;
     htmlPrompt?: undefined;
-    htmlSystemPrompt?: undefined;
+    htmlImageSystemPrompt?: undefined;
 }>;
 export declare const imagePluginAgent: (namedInputs: {
     context: MulmoStudioContext;
@@ -101,5 +101,5 @@ export declare const imagePluginAgent: (namedInputs: {
     index: number;
 }) => Promise<void>;
 export declare const getImageRefs: (context: MulmoStudioContext) => Promise<Record<string, string>>;
-export declare const images: (context: MulmoStudioContext, callbacks?: CallbackFunction[]) => Promise<MulmoStudioContext>;
-export declare const generateBeatImage: (index: number, context: MulmoStudioContext, callbacks?: CallbackFunction[]) => Promise<void>;
+export declare const images: (context: MulmoStudioContext, settings?: Record<string, string>, callbacks?: CallbackFunction[]) => Promise<MulmoStudioContext>;
+export declare const generateBeatImage: (index: number, context: MulmoStudioContext, settings?: Record<string, string>, callbacks?: CallbackFunction[]) => Promise<void>;

package/lib/actions/images.js

@@ -1,7 +1,6 @@
 import dotenv from "dotenv";
 import fs from "fs";
-import { GraphAI, GraphAILogger } from "graphai";
-import { TaskManager } from "graphai/lib/task_manager.js";
+import { GraphAI, GraphAILogger, TaskManager } from "graphai";
 import * as agents from "@graphai/vanilla";
 import { openAIAgent } from "@graphai/openai_agent";
 import { anthropicAgent } from "@graphai/anthropic_agent";
@@ -11,7 +10,8 @@ import { fileCacheAgentFilter } from "../utils/filters.js";
 import { imageGoogleAgent, imageOpenaiAgent, movieGoogleAgent, movieReplicateAgent, mediaMockAgent } from "../agents/index.js";
 import { MulmoPresentationStyleMethods, MulmoStudioContextMethods } from "../methods/index.js";
 import { findImagePlugin } from "../utils/image_plugins/index.js";
-import { imagePrompt } from "../utils/prompt.js";
+import { userAssert, settings2GraphAIConfig } from "../utils/utils.js";
+import { imagePrompt, htmlImageSystemPrompt } from "../utils/prompt.js";
 import { defaultOpenAIImageModel } from "../utils/const.js";
 import { renderHTMLToImage } from "../utils/markdown.js";
 const vanillaAgents = agents.default ?? agents;
@@ -43,15 +43,7 @@ export const imagePreprocessAgent = async (namedInputs) => {
     }
     if (beat.htmlPrompt) {
         const htmlPrompt = beat.htmlPrompt.prompt + (beat.htmlPrompt.data ? "\n\n data\n" + JSON.stringify(beat.htmlPrompt.data, null, 2) : "");
-        const htmlSystemPrompt = [
-            "Based on the provided information, create a single slide HTML page using Tailwind CSS.",
-            `The view port size is ${context.presentationStyle.canvasSize.width}x${context.presentationStyle.canvasSize.height}. Make sure the HTML fits within the view port.`,
-            "If charts are needed, use Chart.js to present them in a clean and visually appealing way.",
-            "Include a balanced mix of comments, graphs, and illustrations to enhance visual impact.",
-            "Output only the HTML code. Do not include any comments, explanations, or additional information outside the HTML.",
-            "If data is provided, use it effectively to populate the slide.",
-        ];
-        return { imagePath, htmlPrompt, htmlSystemPrompt };
+        return { imagePath, htmlPrompt, htmlImageSystemPrompt: htmlImageSystemPrompt(context.presentationStyle.canvasSize) };
     }
     // images for "edit_image"
     const images = (() => {
@@ -128,7 +120,7 @@ const beat_graph_data = {
             },
             inputs: {
                 prompt: ":preprocessor.htmlPrompt",
-                system: ":preprocessor.htmlSystemPrompt",
+                system: ":preprocessor.htmlImageSystemPrompt",
             },
         },
         htmlImageGenerator: {
@@ -297,7 +289,7 @@ const googleAuth = async () => {
         throw error;
     }
 };
-const graphOption = async (context) => {
+const graphOption = async (context, settings) => {
     const agentFilters = [
         {
             name: "fileCacheAgentFilter",
@@ -311,21 +303,22 @@ const graphOption = async (context) => {
         taskManager,
     };
     const imageAgentInfo = MulmoPresentationStyleMethods.getImageAgentInfo(context.presentationStyle);
+    const config = settings2GraphAIConfig(settings);
     // We need to get google's auth token only if the google is the text2image provider.
     if (imageAgentInfo.provider === "google" || context.presentationStyle.movieParams?.provider === "google") {
+        userAssert(!!process.env.GOOGLE_PROJECT_ID, "GOOGLE_PROJECT_ID is not set");
         GraphAILogger.log("google was specified as text2image engine");
         const token = await googleAuth();
-        options.config = {
-            imageGoogleAgent: {
-                projectId: process.env.GOOGLE_PROJECT_ID,
-                token,
-            },
-            movieGoogleAgent: {
-                projectId: process.env.GOOGLE_PROJECT_ID,
-                token,
-            },
+        config["imageGoogleAgent"] = {
+            projectId: process.env.GOOGLE_PROJECT_ID,
+            token,
+        };
+        config["movieGoogleAgent"] = {
+            projectId: process.env.GOOGLE_PROJECT_ID,
+            token,
         };
     }
+    options.config = config;
     return options;
 };
 // TODO: unit test
@@ -417,8 +410,8 @@ const getConcurrency = (context) => {
     }
     return 4;
 };
-const generateImages = async (context, callbacks) => {
-    const options = await graphOption(context);
+const generateImages = async (context, settings, callbacks) => {
+    const options = await graphOption(context, settings);
     const injections = await prepareGenerateImages(context);
     const graph = new GraphAI(graph_data, {
         ...vanillaAgents,
@@ -442,10 +435,10 @@ const generateImages = async (context, callbacks) => {
     const res = await graph.run();
     return res.mergeResult;
 };
-export const images = async (context, callbacks) => {
+export const images = async (context, settings, callbacks) => {
     try {
         MulmoStudioContextMethods.setSessionState(context, "image", true);
-        const newContext = await generateImages(context, callbacks);
+        const newContext = await generateImages(context, settings, callbacks);
         MulmoStudioContextMethods.setSessionState(context, "image", false);
         return newContext;
     }
@@ -454,8 +447,8 @@ export const images = async (context, callbacks) => {
         throw error;
     }
 };
-export const generateBeatImage = async (index, context, callbacks) => {
-    const options = await graphOption(context);
+export const generateBeatImage = async (index, context, settings, callbacks) => {
+    const options = await graphOption(context, settings);
     const injections = await prepareGenerateImages(context);
     const graph = new GraphAI(beat_graph_data, {
         ...vanillaAgents,

package/lib/actions/movie.js

@@ -69,7 +69,8 @@ const getOutputOption = (audioId, videoId) => {
         "-b:a 128k", // Audio bitrate
     ];
 };
-const createVideo = async (audioArtifactFilePath, outputVideoPath, context, caption) => {
+const createVideo = async (audioArtifactFilePath, outputVideoPath, context) => {
+    const caption = MulmoStudioContextMethods.getCaption(context);
     const start = performance.now();
     const ffmpegContext = FfmpegContextInit();
     const missingIndex = context.studio.beats.findIndex((beat) => !beat.imageFile && !beat.movieFile);
@@ -208,12 +209,11 @@ export const movieFilePath = (context) => {
 export const movie = async (context) => {
     MulmoStudioContextMethods.setSessionState(context, "video", true);
     try {
-        const caption = MulmoStudioContextMethods.getCaption(context);
         const fileName = MulmoStudioContextMethods.getFileName(context);
         const outDirPath = MulmoStudioContextMethods.getOutDirPath(context);
         const audioArtifactFilePath = getAudioArtifactFilePath(outDirPath, fileName);
         const outputVideoPath = movieFilePath(context);
-        if (await createVideo(audioArtifactFilePath, outputVideoPath, context, caption)) {
+        if (await createVideo(audioArtifactFilePath, outputVideoPath, context)) {
             writingMessage(outputVideoPath);
         }
     }

package/lib/agents/image_openai_agent.d.ts

@@ -13,6 +13,8 @@ export declare const imageOpenaiAgent: AgentFunction<{
 }, {
     prompt: string;
     images: string[] | null | undefined;
+}, {
+    apiKey?: string;
 }>;
 declare const imageOpenaiAgentInfo: AgentFunctionInfo;
 export default imageOpenaiAgentInfo;

package/lib/agents/image_openai_agent.js

@@ -4,9 +4,10 @@ import { GraphAILogger } from "graphai";
 import OpenAI, { toFile } from "openai";
 import { defaultOpenAIImageModel } from "../utils/const.js";
 // https://platform.openai.com/docs/guides/image-generation
-export const imageOpenaiAgent = async ({ namedInputs, params }) => {
+export const imageOpenaiAgent = async ({ namedInputs, params, config }) => {
     const { prompt, images } = namedInputs;
-    const { apiKey, moderation, canvasSize } = params;
+    const { moderation, canvasSize } = params;
+    const { apiKey } = { ...config };
     const model = params.model ?? defaultOpenAIImageModel;
     const openai = new OpenAI({ apiKey });
     const size = (() => {

package/lib/agents/tts_elevenlabs_agent.js

@@ -1,8 +1,8 @@
 import { GraphAILogger } from "graphai";
-export const ttsElevenlabsAgent = async ({ namedInputs, params }) => {
+export const ttsElevenlabsAgent = async ({ namedInputs, params, config }) => {
     const { text } = namedInputs;
     const { voice, model, stability, similarityBoost, suppressError } = params;
-    const apiKey = process.env.ELEVENLABS_API_KEY;
+    const apiKey = config?.apiKey ?? process.env.ELEVENLABS_API_KEY;
     if (!apiKey) {
         throw new Error("ELEVENLABS_API_KEY environment variable is required");
     }

package/lib/agents/tts_nijivoice_agent.js

@@ -6,8 +6,9 @@ const errorMessage = [
     "1. Obtain an API key from Niji Voice (https://platform.nijivoice.com/) and set it as the NIJIVOICE_API_KEY environment variable.",
     '2. Use OpenAI\'s TTS instead of Niji Voice by changing speechParams.provider from "nijivoice" to "openai".',
 ].join("\n");
-export const ttsNijivoiceAgent = async ({ params, namedInputs }) => {
-    const { apiKey, suppressError, voice, speed, speed_global } = params;
+export const ttsNijivoiceAgent = async ({ params, namedInputs, config }) => {
+    const { suppressError, voice, speed, speed_global } = params;
+    const { apiKey } = config ?? {};
     const { text } = namedInputs;
     assert(apiKey ?? nijovoiceApiKey, errorMessage);
     const url = `https://api.nijivoice.com/api/platform/v1/voice-actors/${voice}/generate-voice`;

package/lib/agents/tts_openai_agent.js

@@ -1,8 +1,9 @@
 import { GraphAILogger } from "graphai";
 import OpenAI from "openai";
-export const ttsOpenaiAgent = async ({ namedInputs, params }) => {
+export const ttsOpenaiAgent = async ({ namedInputs, params, config }) => {
     const { text } = namedInputs;
-    const { apiKey, model, voice, suppressError, instructions } = params;
+    const { model, voice, suppressError, instructions } = params;
+    const { apiKey } = config ?? {};
     const openai = new OpenAI({ apiKey });
     try {
         const tts_options = {

package/lib/types/schema.d.ts

@@ -260,31 +260,13 @@ export declare const mulmoTextSlideMediaSchema: z.ZodObject<{
 }>;
 export declare const mulmoCaptionParamsSchema: z.ZodObject<{
     lang: z.ZodOptional<z.ZodString>;
-    textColor: z.ZodDefault<z.ZodString>;
-    backgroundColor: z.ZodDefault<z.ZodString>;
-    fontSize: z.ZodDefault<z.ZodNumber>;
-    fontFamily: z.ZodDefault<z.ZodString>;
-    fontWeight: z.ZodDefault<z.ZodString>;
-    textAlign: z.ZodDefault<z.ZodString>;
-    textDecoration: z.ZodDefault<z.ZodString>;
+    styles: z.ZodDefault<z.ZodArray<z.ZodString, "many">>;
 }, "strict", z.ZodTypeAny, {
-    textColor: string;
-    backgroundColor: string;
-    fontSize: number;
-    fontFamily: string;
-    fontWeight: string;
-    textAlign: string;
-    textDecoration: string;
+    styles: string[];
     lang?: string | undefined;
 }, {
     lang?: string | undefined;
-    textColor?: string | undefined;
-    backgroundColor?: string | undefined;
-    fontSize?: number | undefined;
-    fontFamily?: string | undefined;
-    fontWeight?: string | undefined;
-    textAlign?: string | undefined;
-    textDecoration?: string | undefined;
+    styles?: string[] | undefined;
 }>;
 export declare const mulmoChartMediaSchema: z.ZodObject<{
     type: z.ZodLiteral<"chart">;
@@ -1904,31 +1886,13 @@ export declare const mulmoBeatSchema: z.ZodObject<{
     }>>;
     captionParams: z.ZodOptional<z.ZodObject<{
         lang: z.ZodOptional<z.ZodString>;
-        textColor: z.ZodDefault<z.ZodString>;
-        backgroundColor: z.ZodDefault<z.ZodString>;
-        fontSize: z.ZodDefault<z.ZodNumber>;
-        fontFamily: z.ZodDefault<z.ZodString>;
-        fontWeight: z.ZodDefault<z.ZodString>;
-        textAlign: z.ZodDefault<z.ZodString>;
-        textDecoration: z.ZodDefault<z.ZodString>;
+        styles: z.ZodDefault<z.ZodArray<z.ZodString, "many">>;
     }, "strict", z.ZodTypeAny, {
-        textColor: string;
-        backgroundColor: string;
-        fontSize: number;
-        fontFamily: string;
-        fontWeight: string;
-        textAlign: string;
-        textDecoration: string;
+        styles: string[];
         lang?: string | undefined;
     }, {
         lang?: string | undefined;
-        textColor?: string | undefined;
-        backgroundColor?: string | undefined;
-        fontSize?: number | undefined;
-        fontFamily?: string | undefined;
-        fontWeight?: string | undefined;
-        textAlign?: string | undefined;
-        textDecoration?: string | undefined;
+        styles?: string[] | undefined;
     }>>;
     imageNames: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
     imagePrompt: z.ZodOptional<z.ZodString>;
@@ -2116,13 +2080,7 @@ export declare const mulmoBeatSchema: z.ZodObject<{
         cssStyles: string | string[];
     } | undefined;
     captionParams?: {
-        textColor: string;
-        backgroundColor: string;
-        fontSize: number;
-        fontFamily: string;
-        fontWeight: string;
-        textAlign: string;
-        textDecoration: string;
+        styles: string[];
         lang?: string | undefined;
     } | undefined;
     imageNames?: string[] | undefined;
@@ -2302,13 +2260,7 @@ export declare const mulmoBeatSchema: z.ZodObject<{
     } | undefined;
     captionParams?: {
         lang?: string | undefined;
-        textColor?: string | undefined;
-        backgroundColor?: string | undefined;
-        fontSize?: number | undefined;
-        fontFamily?: string | undefined;
-        fontWeight?: string | undefined;
-        textAlign?: string | undefined;
-        textDecoration?: string | undefined;
+        styles?: string[] | undefined;
     } | undefined;
     imageNames?: string[] | undefined;
     imagePrompt?: string | undefined;
@@ -2707,31 +2659,13 @@ export declare const mulmoPresentationStyleSchema: z.ZodObject<{
     }>>;
     captionParams: z.ZodOptional<z.ZodObject<{
         lang: z.ZodOptional<z.ZodString>;
-        textColor: z.ZodDefault<z.ZodString>;
-        backgroundColor: z.ZodDefault<z.ZodString>;
-        fontSize: z.ZodDefault<z.ZodNumber>;
-        fontFamily: z.ZodDefault<z.ZodString>;
-        fontWeight: z.ZodDefault<z.ZodString>;
-        textAlign: z.ZodDefault<z.ZodString>;
-        textDecoration: z.ZodDefault<z.ZodString>;
+        styles: z.ZodDefault<z.ZodArray<z.ZodString, "many">>;
     }, "strict", z.ZodTypeAny, {
-        textColor: string;
-        backgroundColor: string;
-        fontSize: number;
-        fontFamily: string;
-        fontWeight: string;
-        textAlign: string;
-        textDecoration: string;
+        styles: string[];
         lang?: string | undefined;
     }, {
         lang?: string | undefined;
-        textColor?: string | undefined;
-        backgroundColor?: string | undefined;
-        fontSize?: number | undefined;
-        fontFamily?: string | undefined;
-        fontWeight?: string | undefined;
-        textAlign?: string | undefined;
-        textDecoration?: string | undefined;
+        styles?: string[] | undefined;
     }>>;
     audioParams: z.ZodDefault<z.ZodObject<{
         padding: z.ZodDefault<z.ZodNumber>;
@@ -2901,13 +2835,7 @@ export declare const mulmoPresentationStyleSchema: z.ZodObject<{
         cssStyles: string | string[];
     } | undefined;
     captionParams?: {
-        textColor: string;
-        backgroundColor: string;
-        fontSize: number;
-        fontFamily: string;
-        fontWeight: string;
-        textAlign: string;
-        textDecoration: string;
+        styles: string[];
         lang?: string | undefined;
     } | undefined;
 }, {
@@ -2978,13 +2906,7 @@ export declare const mulmoPresentationStyleSchema: z.ZodObject<{
     } | undefined;
     captionParams?: {
         lang?: string | undefined;
-        textColor?: string | undefined;
-        backgroundColor?: string | undefined;
-        fontSize?: number | undefined;
-        fontFamily?: string | undefined;
-        fontWeight?: string | undefined;
-        textAlign?: string | undefined;
-        textDecoration?: string | undefined;
+        styles?: string[] | undefined;
     } | undefined;
     canvasSize?: {
         width: number;
@@ -3276,31 +3198,13 @@ export declare const mulmoScriptSchema: z.ZodObject<{
     }>>;
     captionParams: z.ZodOptional<z.ZodObject<{
         lang: z.ZodOptional<z.ZodString>;
-        textColor: z.ZodDefault<z.ZodString>;
-        backgroundColor: z.ZodDefault<z.ZodString>;
-        fontSize: z.ZodDefault<z.ZodNumber>;
-        fontFamily: z.ZodDefault<z.ZodString>;
-        fontWeight: z.ZodDefault<z.ZodString>;
-        textAlign: z.ZodDefault<z.ZodString>;
-        textDecoration: z.ZodDefault<z.ZodString>;
+        styles: z.ZodDefault<z.ZodArray<z.ZodString, "many">>;
     }, "strict", z.ZodTypeAny, {
-        textColor: string;
-        backgroundColor: string;
-        fontSize: number;
-        fontFamily: string;
-        fontWeight: string;
-        textAlign: string;
-        textDecoration: string;
+        styles: string[];
         lang?: string | undefined;
     }, {
         lang?: string | undefined;
-        textColor?: string | undefined;
-        backgroundColor?: string | undefined;
-        fontSize?: number | undefined;
-        fontFamily?: string | undefined;
-        fontWeight?: string | undefined;
-        textAlign?: string | undefined;
-        textDecoration?: string | undefined;
+        styles?: string[] | undefined;
     }>>;
     audioParams: z.ZodDefault<z.ZodObject<{
         padding: z.ZodDefault<z.ZodNumber>;
@@ -4090,31 +3994,13 @@ export declare const mulmoScriptSchema: z.ZodObject<{
         }>>;
         captionParams: z.ZodOptional<z.ZodObject<{
             lang: z.ZodOptional<z.ZodString>;
-            textColor: z.ZodDefault<z.ZodString>;
-            backgroundColor: z.ZodDefault<z.ZodString>;
-            fontSize: z.ZodDefault<z.ZodNumber>;
-            fontFamily: z.ZodDefault<z.ZodString>;
-            fontWeight: z.ZodDefault<z.ZodString>;
-            textAlign: z.ZodDefault<z.ZodString>;
-            textDecoration: z.ZodDefault<z.ZodString>;
+            styles: z.ZodDefault<z.ZodArray<z.ZodString, "many">>;
         }, "strict", z.ZodTypeAny, {
-            textColor: string;
-            backgroundColor: string;
-            fontSize: number;
-            fontFamily: string;
-            fontWeight: string;
-            textAlign: string;
-            textDecoration: string;
+            styles: string[];
             lang?: string | undefined;
         }, {
             lang?: string | undefined;
-            textColor?: string | undefined;
-            backgroundColor?: string | undefined;
-            fontSize?: number | undefined;
-            fontFamily?: string | undefined;
-            fontWeight?: string | undefined;
-            textAlign?: string | undefined;
-            textDecoration?: string | undefined;
+            styles?: string[] | undefined;
         }>>;
         imageNames: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
         imagePrompt: z.ZodOptional<z.ZodString>;
@@ -4302,13 +4188,7 @@ export declare const mulmoScriptSchema: z.ZodObject<{
             cssStyles: string | string[];
         } | undefined;
         captionParams?: {
-            textColor: string;
-            backgroundColor: string;
-            fontSize: number;
-            fontFamily: string;
-            fontWeight: string;
-            textAlign: string;
-            textDecoration: string;
+            styles: string[];
             lang?: string | undefined;
         } | undefined;
         imageNames?: string[] | undefined;
@@ -4488,13 +4368,7 @@ export declare const mulmoScriptSchema: z.ZodObject<{
         } | undefined;
         captionParams?: {
             lang?: string | undefined;
-            textColor?: string | undefined;
-            backgroundColor?: string | undefined;
-            fontSize?: number | undefined;
-            fontFamily?: string | undefined;
-            fontWeight?: string | undefined;
-            textAlign?: string | undefined;
-            textDecoration?: string | undefined;
+            styles?: string[] | undefined;
         } | undefined;
         imageNames?: string[] | undefined;
         imagePrompt?: string | undefined;
@@ -4717,13 +4591,7 @@ export declare const mulmoScriptSchema: z.ZodObject<{
             cssStyles: string | string[];
         } | undefined;
         captionParams?: {
-            textColor: string;
-            backgroundColor: string;
-            fontSize: number;
-            fontFamily: string;
-            fontWeight: string;
-            textAlign: string;
-            textDecoration: string;
+            styles: string[];
             lang?: string | undefined;
         } | undefined;
         imageNames?: string[] | undefined;
@@ -4780,13 +4648,7 @@ export declare const mulmoScriptSchema: z.ZodObject<{
         cssStyles: string | string[];
     } | undefined;
     captionParams?: {
-        textColor: string;
-        backgroundColor: string;
-        fontSize: number;
-        fontFamily: string;
-        fontWeight: string;
-        textAlign: string;
-        textDecoration: string;
+        styles: string[];
         lang?: string | undefined;
     } | undefined;
     references?: {
@@ -4970,13 +4832,7 @@ export declare const mulmoScriptSchema: z.ZodObject<{
         } | undefined;
         captionParams?: {
             lang?: string | undefined;
-            textColor?: string | undefined;
-            backgroundColor?: string | undefined;
-            fontSize?: number | undefined;
-            fontFamily?: string | undefined;
-            fontWeight?: string | undefined;
-            textAlign?: string | undefined;
-            textDecoration?: string | undefined;
+            styles?: string[] | undefined;
         } | undefined;
         imageNames?: string[] | undefined;
         imagePrompt?: string | undefined;
@@ -5054,13 +4910,7 @@ export declare const mulmoScriptSchema: z.ZodObject<{
     } | undefined;
     captionParams?: {
         lang?: string | undefined;
-        textColor?: string | undefined;
-        backgroundColor?: string | undefined;
-        fontSize?: number | undefined;
-        fontFamily?: string | undefined;
-        fontWeight?: string | undefined;
-        textAlign?: string | undefined;
-        textDecoration?: string | undefined;
+        styles?: string[] | undefined;
     } | undefined;
     canvasSize?: {
         width: number;
@@ -5516,31 +5366,13 @@ export declare const mulmoStudioSchema: z.ZodObject<{
         }>>;
         captionParams: z.ZodOptional<z.ZodObject<{
             lang: z.ZodOptional<z.ZodString>;
-            textColor: z.ZodDefault<z.ZodString>;
-            backgroundColor: z.ZodDefault<z.ZodString>;
-            fontSize: z.ZodDefault<z.ZodNumber>;
-            fontFamily: z.ZodDefault<z.ZodString>;
-            fontWeight: z.ZodDefault<z.ZodString>;
-            textAlign: z.ZodDefault<z.ZodString>;
-            textDecoration: z.ZodDefault<z.ZodString>;
+            styles: z.ZodDefault<z.ZodArray<z.ZodString, "many">>;
         }, "strict", z.ZodTypeAny, {
-            textColor: string;
-            backgroundColor: string;
-            fontSize: number;
-            fontFamily: string;
-            fontWeight: string;
-            textAlign: string;
-            textDecoration: string;
+            styles: string[];
             lang?: string | undefined;
         }, {
             lang?: string | undefined;
-            textColor?: string | undefined;
-            backgroundColor?: string | undefined;
-            fontSize?: number | undefined;
-            fontFamily?: string | undefined;
-            fontWeight?: string | undefined;
-            textAlign?: string | undefined;
-            textDecoration?: string | undefined;
+            styles?: string[] | undefined;
         }>>;
         audioParams: z.ZodDefault<z.ZodObject<{
             padding: z.ZodDefault<z.ZodNumber>;
@@ -6330,31 +6162,13 @@ export declare const mulmoStudioSchema: z.ZodObject<{
             }>>;
             captionParams: z.ZodOptional<z.ZodObject<{
                 lang: z.ZodOptional<z.ZodString>;
-                textColor: z.ZodDefault<z.ZodString>;
-                backgroundColor: z.ZodDefault<z.ZodString>;
-                fontSize: z.ZodDefault<z.ZodNumber>;
-                fontFamily: z.ZodDefault<z.ZodString>;
-                fontWeight: z.ZodDefault<z.ZodString>;
-                textAlign: z.ZodDefault<z.ZodString>;
-                textDecoration: z.ZodDefault<z.ZodString>;
+                styles: z.ZodDefault<z.ZodArray<z.ZodString, "many">>;
             }, "strict", z.ZodTypeAny, {
-                textColor: string;
-                backgroundColor: string;
-                fontSize: number;
-                fontFamily: string;
-                fontWeight: string;
-                textAlign: string;
-                textDecoration: string;
+                styles: string[];
                 lang?: string | undefined;
             }, {
                 lang?: string | undefined;
-                textColor?: string | undefined;
-                backgroundColor?: string | undefined;
-                fontSize?: number | undefined;
-                fontFamily?: string | undefined;
-                fontWeight?: string | undefined;
-                textAlign?: string | undefined;
-                textDecoration?: string | undefined;
+                styles?: string[] | undefined;
             }>>;
             imageNames: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
             imagePrompt: z.ZodOptional<z.ZodString>;
@@ -6542,13 +6356,7 @@ export declare const mulmoStudioSchema: z.ZodObject<{
                 cssStyles: string | string[];
             } | undefined;
             captionParams?: {
-                textColor: string;
-                backgroundColor: string;
-                fontSize: number;
-                fontFamily: string;
-                fontWeight: string;
-                textAlign: string;
-                textDecoration: string;
+                styles: string[];
                 lang?: string | undefined;
             } | undefined;
             imageNames?: string[] | undefined;
@@ -6728,13 +6536,7 @@ export declare const mulmoStudioSchema: z.ZodObject<{
             } | undefined;
             captionParams?: {
                 lang?: string | undefined;
-                textColor?: string | undefined;
-                backgroundColor?: string | undefined;
-                fontSize?: number | undefined;
-                fontFamily?: string | undefined;
-                fontWeight?: string | undefined;
-                textAlign?: string | undefined;
-                textDecoration?: string | undefined;
+                styles?: string[] | undefined;
             } | undefined;
             imageNames?: string[] | undefined;
             imagePrompt?: string | undefined;
@@ -6957,13 +6759,7 @@ export declare const mulmoStudioSchema: z.ZodObject<{
                 cssStyles: string | string[];
             } | undefined;
             captionParams?: {
-                textColor: string;
-                backgroundColor: string;
-                fontSize: number;
-                fontFamily: string;
-                fontWeight: string;
-                textAlign: string;
-                textDecoration: string;
+                styles: string[];
                 lang?: string | undefined;
             } | undefined;
             imageNames?: string[] | undefined;
@@ -7020,13 +6816,7 @@ export declare const mulmoStudioSchema: z.ZodObject<{
             cssStyles: string | string[];
         } | undefined;
         captionParams?: {
-            textColor: string;
-            backgroundColor: string;
-            fontSize: number;
-            fontFamily: string;
-            fontWeight: string;
-            textAlign: string;
-            textDecoration: string;
+            styles: string[];
             lang?: string | undefined;
         } | undefined;
         references?: {
@@ -7210,13 +7000,7 @@ export declare const mulmoStudioSchema: z.ZodObject<{
             } | undefined;
             captionParams?: {
                 lang?: string | undefined;
-                textColor?: string | undefined;
-                backgroundColor?: string | undefined;
-                fontSize?: number | undefined;
-                fontFamily?: string | undefined;
-                fontWeight?: string | undefined;
-                textAlign?: string | undefined;
-                textDecoration?: string | undefined;
+                styles?: string[] | undefined;
             } | undefined;
             imageNames?: string[] | undefined;
             imagePrompt?: string | undefined;
@@ -7294,13 +7078,7 @@ export declare const mulmoStudioSchema: z.ZodObject<{
         } | undefined;
         captionParams?: {
             lang?: string | undefined;
-            textColor?: string | undefined;
-            backgroundColor?: string | undefined;
-            fontSize?: number | undefined;
-            fontFamily?: string | undefined;
-            fontWeight?: string | undefined;
-            textAlign?: string | undefined;
-            textDecoration?: string | undefined;
+            styles?: string[] | undefined;
         } | undefined;
         canvasSize?: {
             width: number;
@@ -7568,13 +7346,7 @@ export declare const mulmoStudioSchema: z.ZodObject<{
                 cssStyles: string | string[];
             } | undefined;
             captionParams?: {
-                textColor: string;
-                backgroundColor: string;
-                fontSize: number;
-                fontFamily: string;
-                fontWeight: string;
-                textAlign: string;
-                textDecoration: string;
+                styles: string[];
                 lang?: string | undefined;
             } | undefined;
             imageNames?: string[] | undefined;
@@ -7631,13 +7403,7 @@ export declare const mulmoStudioSchema: z.ZodObject<{
             cssStyles: string | string[];
         } | undefined;
         captionParams?: {
-            textColor: string;
-            backgroundColor: string;
-            fontSize: number;
-            fontFamily: string;
-            fontWeight: string;
-            textAlign: string;
-            textDecoration: string;
+            styles: string[];
             lang?: string | undefined;
         } | undefined;
         references?: {
@@ -7832,13 +7598,7 @@ export declare const mulmoStudioSchema: z.ZodObject<{
             } | undefined;
             captionParams?: {
                 lang?: string | undefined;
-                textColor?: string | undefined;
-                backgroundColor?: string | undefined;
-                fontSize?: number | undefined;
-                fontFamily?: string | undefined;
-                fontWeight?: string | undefined;
-                textAlign?: string | undefined;
-                textDecoration?: string | undefined;
+                styles?: string[] | undefined;
             } | undefined;
             imageNames?: string[] | undefined;
             imagePrompt?: string | undefined;
@@ -7916,13 +7676,7 @@ export declare const mulmoStudioSchema: z.ZodObject<{
         } | undefined;
         captionParams?: {
             lang?: string | undefined;
-            textColor?: string | undefined;
-            backgroundColor?: string | undefined;
-            fontSize?: number | undefined;
-            fontFamily?: string | undefined;
-            fontWeight?: string | undefined;
-            textAlign?: string | undefined;
-            textDecoration?: string | undefined;
+            styles?: string[] | undefined;
         } | undefined;
         canvasSize?: {
             width: number;
@@ -8213,31 +7967,13 @@ export declare const mulmoScriptTemplateSchema: z.ZodObject<{
         }>>;
         captionParams: z.ZodOptional<z.ZodObject<{
             lang: z.ZodOptional<z.ZodString>;
-            textColor: z.ZodDefault<z.ZodString>;
-            backgroundColor: z.ZodDefault<z.ZodString>;
-            fontSize: z.ZodDefault<z.ZodNumber>;
-            fontFamily: z.ZodDefault<z.ZodString>;
-            fontWeight: z.ZodDefault<z.ZodString>;
-            textAlign: z.ZodDefault<z.ZodString>;
-            textDecoration: z.ZodDefault<z.ZodString>;
+            styles: z.ZodDefault<z.ZodArray<z.ZodString, "many">>;
         }, "strict", z.ZodTypeAny, {
-            textColor: string;
-            backgroundColor: string;
-            fontSize: number;
-            fontFamily: string;
-            fontWeight: string;
-            textAlign: string;
-            textDecoration: string;
+            styles: string[];
             lang?: string | undefined;
         }, {
             lang?: string | undefined;
-            textColor?: string | undefined;
-            backgroundColor?: string | undefined;
-            fontSize?: number | undefined;
-            fontFamily?: string | undefined;
-            fontWeight?: string | undefined;
-            textAlign?: string | undefined;
-            textDecoration?: string | undefined;
+            styles?: string[] | undefined;
         }>>;
         audioParams: z.ZodDefault<z.ZodObject<{
             padding: z.ZodDefault<z.ZodNumber>;
@@ -8407,13 +8143,7 @@ export declare const mulmoScriptTemplateSchema: z.ZodObject<{
             cssStyles: string | string[];
         } | undefined;
         captionParams?: {
-            textColor: string;
-            backgroundColor: string;
-            fontSize: number;
-            fontFamily: string;
-            fontWeight: string;
-            textAlign: string;
-            textDecoration: string;
+            styles: string[];
             lang?: string | undefined;
         } | undefined;
     }, {
@@ -8484,13 +8214,7 @@ export declare const mulmoScriptTemplateSchema: z.ZodObject<{
         } | undefined;
         captionParams?: {
             lang?: string | undefined;
-            textColor?: string | undefined;
-            backgroundColor?: string | undefined;
-            fontSize?: number | undefined;
-            fontFamily?: string | undefined;
-            fontWeight?: string | undefined;
-            textAlign?: string | undefined;
-            textDecoration?: string | undefined;
+            styles?: string[] | undefined;
         } | undefined;
         canvasSize?: {
             width: number;
@@ -8597,13 +8321,7 @@ export declare const mulmoScriptTemplateSchema: z.ZodObject<{
             cssStyles: string | string[];
         } | undefined;
         captionParams?: {
-            textColor: string;
-            backgroundColor: string;
-            fontSize: number;
-            fontFamily: string;
-            fontWeight: string;
-            textAlign: string;
-            textDecoration: string;
+            styles: string[];
             lang?: string | undefined;
         } | undefined;
     } | undefined;
@@ -8680,13 +8398,7 @@ export declare const mulmoScriptTemplateSchema: z.ZodObject<{
         } | undefined;
         captionParams?: {
             lang?: string | undefined;
-            textColor?: string | undefined;
-            backgroundColor?: string | undefined;
-            fontSize?: number | undefined;
-            fontFamily?: string | undefined;
-            fontWeight?: string | undefined;
-            textAlign?: string | undefined;
-            textDecoration?: string | undefined;
+            styles?: string[] | undefined;
         } | undefined;
         canvasSize?: {
             width: number;
@@ -8968,31 +8680,13 @@ export declare const mulmoScriptTemplateFileSchema: z.ZodObject<{
         }>>;
         captionParams: z.ZodOptional<z.ZodObject<{
             lang: z.ZodOptional<z.ZodString>;
-            textColor: z.ZodDefault<z.ZodString>;
-            backgroundColor: z.ZodDefault<z.ZodString>;
-            fontSize: z.ZodDefault<z.ZodNumber>;
-            fontFamily: z.ZodDefault<z.ZodString>;
-            fontWeight: z.ZodDefault<z.ZodString>;
-            textAlign: z.ZodDefault<z.ZodString>;
-            textDecoration: z.ZodDefault<z.ZodString>;
+            styles: z.ZodDefault<z.ZodArray<z.ZodString, "many">>;
         }, "strict", z.ZodTypeAny, {
-            textColor: string;
-            backgroundColor: string;
-            fontSize: number;
-            fontFamily: string;
-            fontWeight: string;
-            textAlign: string;
-            textDecoration: string;
+            styles: string[];
             lang?: string | undefined;
         }, {
             lang?: string | undefined;
-            textColor?: string | undefined;
-            backgroundColor?: string | undefined;
-            fontSize?: number | undefined;
-            fontFamily?: string | undefined;
-            fontWeight?: string | undefined;
-            textAlign?: string | undefined;
-            textDecoration?: string | undefined;
+            styles?: string[] | undefined;
         }>>;
         audioParams: z.ZodDefault<z.ZodObject<{
             padding: z.ZodDefault<z.ZodNumber>;
@@ -9162,13 +8856,7 @@ export declare const mulmoScriptTemplateFileSchema: z.ZodObject<{
             cssStyles: string | string[];
         } | undefined;
         captionParams?: {
-            textColor: string;
-            backgroundColor: string;
-            fontSize: number;
-            fontFamily: string;
-            fontWeight: string;
-            textAlign: string;
-            textDecoration: string;
+            styles: string[];
             lang?: string | undefined;
         } | undefined;
     }, {
@@ -9239,13 +8927,7 @@ export declare const mulmoScriptTemplateFileSchema: z.ZodObject<{
         } | undefined;
         captionParams?: {
             lang?: string | undefined;
-            textColor?: string | undefined;
-            backgroundColor?: string | undefined;
-            fontSize?: number | undefined;
-            fontFamily?: string | undefined;
-            fontWeight?: string | undefined;
-            textAlign?: string | undefined;
-            textDecoration?: string | undefined;
+            styles?: string[] | undefined;
         } | undefined;
         canvasSize?: {
             width: number;
@@ -9355,13 +9037,7 @@ export declare const mulmoScriptTemplateFileSchema: z.ZodObject<{
             cssStyles: string | string[];
         } | undefined;
         captionParams?: {
-            textColor: string;
-            backgroundColor: string;
-            fontSize: number;
-            fontFamily: string;
-            fontWeight: string;
-            textAlign: string;
-            textDecoration: string;
+            styles: string[];
             lang?: string | undefined;
         } | undefined;
     } | undefined;
@@ -9439,13 +9115,7 @@ export declare const mulmoScriptTemplateFileSchema: z.ZodObject<{
         } | undefined;
         captionParams?: {
             lang?: string | undefined;
-            textColor?: string | undefined;
-            backgroundColor?: string | undefined;
-            fontSize?: number | undefined;
-            fontFamily?: string | undefined;
-            fontWeight?: string | undefined;
-            textAlign?: string | undefined;
-            textDecoration?: string | undefined;
+            styles?: string[] | undefined;
         } | undefined;
         canvasSize?: {
             width: number;

package/lib/types/schema.js

@@ -87,13 +87,7 @@ export const mulmoTextSlideMediaSchema = z
 export const mulmoCaptionParamsSchema = z
     .object({
     lang: langSchema.optional(),
-    textColor: z.string().default("#FFFFFF"),
-    backgroundColor: z.string().default("#000000"),
-    fontSize: z.number().default(16),
-    fontFamily: z.string().default("Arial"),
-    fontWeight: z.string().default("normal"),
-    textAlign: z.string().default("left"),
-    textDecoration: z.string().default("none"),
+    styles: z.array(z.string()).default([]), // css styles
 })
     .strict();
 export const mulmoChartMediaSchema = z

package/lib/utils/preprocess.d.ts

@@ -217,13 +217,7 @@ export declare const createOrUpdateStudioData: (_mulmoScript: MulmoScript, curre
                 cssStyles: string | string[];
             } | undefined;
             captionParams?: {
-                textColor: string;
-                backgroundColor: string;
-                fontSize: number;
-                fontFamily: string;
-                fontWeight: string;
-                textAlign: string;
-                textDecoration: string;
+                styles: string[];
                 lang?: string | undefined;
             } | undefined;
             imageNames?: string[] | undefined;
@@ -280,13 +274,7 @@ export declare const createOrUpdateStudioData: (_mulmoScript: MulmoScript, curre
             cssStyles: string | string[];
         } | undefined;
         captionParams?: {
-            textColor: string;
-            backgroundColor: string;
-            fontSize: number;
-            fontFamily: string;
-            fontWeight: string;
-            textAlign: string;
-            textDecoration: string;
+            styles: string[];
             lang?: string | undefined;
         } | undefined;
         references?: {

package/lib/utils/prompt.d.ts

@@ -1,4 +1,4 @@
-import { MulmoBeat, MulmoScript, MulmoScriptTemplate, MulmoStoryboard } from "../types/index.js";
+import { MulmoBeat, MulmoScript, MulmoScriptTemplate, MulmoStoryboard, MulmoCanvasDimension } from "../types/index.js";
 export declare const imagePrompt: (beat: MulmoBeat, style?: string) => string;
 export declare const graphDataScriptFromUrlPrompt: (sourceTextInput: string) => string;
 export declare const graphDataScriptGeneratePrompt: (scene: string) => string;
@@ -17,3 +17,4 @@ export declare const storyToScriptPrompt: (script: MulmoScript, beatsPerScene: n
 export declare const searchQueryPrompt: (inquiry: string, followUpQueries: string) => string;
 export declare const reflectionPrompt: (researchTopic: string, searchResults: string) => string;
 export declare const finalAnswerPrompt: (userInput: string, searchResults: string, researchTopic: string) => string;
+export declare const htmlImageSystemPrompt: (canvasSize: MulmoCanvasDimension) => string[];

package/lib/utils/prompt.js

@@ -124,3 +124,13 @@ export const finalAnswerPrompt = (userInput, searchResults, researchTopic) => {
   Current Date: ${currentDate}
   `;
 };
+export const htmlImageSystemPrompt = (canvasSize) => {
+    return [
+        "Based on the provided information, create a single slide HTML page using Tailwind CSS.",
+        `The view port size is ${canvasSize.width}x${canvasSize.height}. Make sure the HTML fits within the view port.`,
+        "If charts are needed, use Chart.js to present them in a clean and visually appealing way.",
+        "Include a balanced mix of comments, graphs, and illustrations to enhance visual impact.",
+        "Output only the HTML code. Do not include any comments, explanations, or additional information outside the HTML.",
+        "If data is provided, use it effectively to populate the slide.",
+    ];
+};

package/lib/utils/utils.d.ts

@@ -1,4 +1,5 @@
 import { MulmoBeat, MulmoStudioMultiLingualData } from "../types/index.js";
+import type { ConfigDataDictionary, DefaultConfigData } from "graphai";
 export declare const llm: readonly ["openAI", "anthropic", "gemini", "groq"];
 export type LLM = (typeof llm)[number];
 export declare const llmConfig: Record<LLM, {
@@ -17,3 +18,4 @@ export declare const text2hash: (input: string) => string;
 export declare const localizedText: (beat: MulmoBeat, multiLingualData?: MulmoStudioMultiLingualData, lang?: string) => string;
 export declare const sleep: (milliseconds: number) => Promise<unknown>;
 export declare function userAssert(condition: boolean, message: string): asserts condition;
+export declare const settings2GraphAIConfig: (settings?: Record<string, string>) => ConfigDataDictionary<DefaultConfigData>;

package/lib/utils/utils.js

@@ -60,3 +60,45 @@ export function userAssert(condition, message) {
         throw new Error(message);
     }
 }
+export const settings2GraphAIConfig = (settings) => {
+    const config = {};
+    if (settings) {
+        if (settings.OPENAI_API_KEY) {
+            config.openAIAgent = {
+                apiKey: settings.OPENAI_API_KEY,
+            };
+            config.ttsOpenaiAgent = {
+                apiKey: settings.OPENAI_API_KEY,
+            };
+            config.imageOpenaiAgent = {
+                apiKey: settings.OPENAI_API_KEY,
+            };
+        }
+        if (settings.ANTHROPIC_API_TOKEN) {
+            config.anthropicAgent = {
+                apiKey: settings.ANTHROPIC_API_TOKEN,
+            };
+        }
+        if (settings.REPLICATE_API_TOKEN) {
+            config.movieReplicateAgent = {
+                apiKey: settings.REPLICATE_API_TOKEN,
+            };
+        }
+        if (settings.NIJIVOICE_API_KEY) {
+            config.ttsNijivoiceAgent = {
+                apiKey: settings.NIJIVOICE_API_KEY,
+            };
+        }
+        if (settings.ELEVENLABS_API_KEY) {
+            config.ttsElevenlabsAgent = {
+                apiKey: settings.ELEVENLABS_API_KEY,
+            };
+        }
+        // TODO
+        // browserlessAgent
+        // ttsGoogleAgent
+        // geminiAgent, groqAgent for tool
+        // TAVILY_API_KEY ( for deep research)
+    }
+    return config;
+};

package/package.json

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