@mulmochat-plugin/generate-image 0.1.0 → 0.1.1

package/README.md

@@ -1,6 +1,10 @@
-# @mulmochat-plugin/generate-image
+# MulmoChat Plugin
 
-Image generation plugin for MulmoChat.
+A plugin for [MulmoChat](https://github.com/receptron/MulmoChat) - a multi-modal voice chat application with OpenAI's GPT-4 Realtime API.
+
+## What this plugin does
+
+Generate images using AI based on text prompts. This plugin provides the UI components and tool definition, while the actual image generation is handled by the host application via `context.app.generateImage()`.
 
 ## Installation
 
@@ -11,40 +15,14 @@ yarn add @mulmochat-plugin/generate-image @mulmochat-plugin/ui-image
 ## Usage
 
 ```typescript
-import { plugin } from "@mulmochat-plugin/generate-image";
+import Plugin from "@mulmochat-plugin/generate-image";
 import "@mulmochat-plugin/generate-image/style.css";
 
-// Register plugin with MulmoChat
-```
-
-## Dependencies
-
-This plugin requires `@mulmochat-plugin/ui-image` as a peer dependency for the view components.
-
-## Host App Integration
-
-This plugin calls `context.app.generateImage(toolName, prompt)` to generate images. The host application (MulmoChat) must provide this function via the `ToolContext.app` object.
-
-The host app is responsible for:
-- Selecting the image generation backend (Google Gemini, OpenAI, ComfyUI, etc.)
-- Configuring API keys and model settings
-- Handling the actual image generation API calls
-
-Example host app implementation:
-
-```typescript
-const context: ToolContext = {
-  app: {
-    generateImage: async (toolName: string, prompt: string) => {
-      // Call your image generation API here
-      const imageData = await yourImageGenerationAPI(prompt);
-      return {
-        message: "Image generated",
-        data: { imageData, prompt },
-      };
-    },
-  },
-};
+// Add to pluginList
+const pluginList = [
+  // ... other plugins
+  Plugin,
+];
 ```
 
 ## Development
@@ -53,15 +31,19 @@ const context: ToolContext = {
 # Install dependencies
 yarn install
 
-# Start dev server
+# Start dev server (http://localhost:5173/)
 yarn dev
 
+# Build
+yarn build
+
 # Type check
 yarn typecheck
 
 # Lint
 yarn lint
-
-# Build
-yarn build
 ```
+
+## License
+
+MIT

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue"),i=require("@mulmochat-plugin/ui-image"),s="generateImage",o={type:"function",name:s,description:"Generate an image based on the prompt and display it on the screen. Be descriptive and specify the concrete details of the images in the prompt. Each call generates one image.",parameters:{type:"object",properties:{prompt:{type:"string",description:"A detailed prompt describing the image to generate"}},required:["prompt"]}},p=[{name:"Sunset Beach",args:{imageData:"https://picsum.photos/id/28/800/600",prompt:"A beautiful sunset over a calm ocean beach with palm trees"}},{name:"Mountain Lake",args:{imageData:"https://picsum.photos/id/29/800/600",prompt:"A serene mountain lake surrounded by pine trees and snow-capped peaks"}},{name:"City Skyline",args:{imageData:"https://picsum.photos/id/43/800/600",prompt:"A modern city skyline at night with glowing skyscrapers"}},{name:"Forest Path",args:{imageData:"https://picsum.photos/id/15/800/600",prompt:"A winding path through an enchanted forest with sunlight filtering through the leaves"}}],m=t.defineComponent({__name:"View",props:{selectedResult:{},sendTextMessage:{type:Function}},emits:["updateResult"],setup(n){const r=n,e=t.ref(null);return t.watch(()=>r.selectedResult,a=>{a?.toolName===s&&a.data&&(e.value=a)},{immediate:!0,deep:!0}),(a,d)=>e.value?(t.openBlock(),t.createBlock(t.unref(i.ImageView),{key:0,selectedResult:e.value},null,8,["selectedResult"])):t.createCommentVNode("",!0)}}),c=t.defineComponent({__name:"Preview",props:{result:{}},setup(n){return(r,e)=>(t.openBlock(),t.createBlock(t.unref(i.ImagePreview),{result:n.result},null,8,["result"]))}}),u=async(n,r)=>{try{const{prompt:e}=r;if(!e||typeof e!="string"||e.trim().length===0)throw new Error("A prompt is required to generate an image");return n.app?.generateImage?await n.app.generateImage(s,e):{message:`Image generation requested: "${e}"`,data:{imageData:`https://picsum.photos/seed/${encodeURIComponent(e)}/800/600`,prompt:e},instructions:"The image has been generated and displayed. Ask the user if they like it or want any modifications."}}catch(e){return console.error("Image generation error",e),{message:`Image generation error: ${e instanceof Error?e.message:"Unknown error"}`,instructions:"Acknowledge that there was an error generating the image and suggest trying again with a different prompt."}}},g={toolDefinition:o,execute:u,generatingMessage:"Generating image...",isEnabled:()=>!0,viewComponent:m,previewComponent:c,samples:p},l={plugin:g};exports.default=l;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),m=require("@mulmochat-plugin/ui-image"),s="generateImage",c={type:"function",name:s,description:"Generate an image based on the prompt and display it on the screen. Be descriptive and specify the concrete details of the images in the prompt. Each call generates one image.",parameters:{type:"object",properties:{prompt:{type:"string",description:"A detailed prompt describing the image to generate"}},required:["prompt"]}},f=[{name:"Sunset Beach",args:{imageData:"https://picsum.photos/id/28/800/600",prompt:"A beautiful sunset over a calm ocean beach with palm trees"}},{name:"Mountain Lake",args:{imageData:"https://picsum.photos/id/29/800/600",prompt:"A serene mountain lake surrounded by pine trees and snow-capped peaks"}},{name:"City Skyline",args:{imageData:"https://picsum.photos/id/43/800/600",prompt:"A modern city skyline at night with glowing skyscrapers"}},{name:"Forest Path",args:{imageData:"https://picsum.photos/id/15/800/600",prompt:"A winding path through an enchanted forest with sunlight filtering through the leaves"}}],v=e.defineComponent({__name:"View",props:{selectedResult:{},sendTextMessage:{type:Function}},emits:["updateResult"],setup(a){const l=a,n=e.ref(null);return e.watch(()=>l.selectedResult,i=>{i?.toolName===s&&i.data&&(n.value=i)},{immediate:!0,deep:!0}),(i,o)=>n.value?(e.openBlock(),e.createBlock(e.unref(m.ImageView),{key:0,selectedResult:n.value},null,8,["selectedResult"])):e.createCommentVNode("",!0)}}),y=e.defineComponent({__name:"Preview",props:{result:{}},setup(a){return(l,n)=>(e.openBlock(),e.createBlock(e.unref(m.ImagePreview),{result:a.result},null,8,["result"]))}}),h={class:"space-y-4"},b=["value"],k={key:0},M=["value"],E={key:1},N=["value"],x=["value"],V=e.defineComponent({__name:"ImageGenerationConfig",props:{value:{}},emits:["update:value"],setup(a,{emit:l}){const n=a,i=l,o=e.computed(()=>typeof n.value=="string"?{backend:n.value,styleModifier:"",geminiModel:"gemini-2.5-flash-image",openaiModel:"gpt-image-1"}:{...n.value,geminiModel:n.value.geminiModel||"gemini-2.5-flash-image",openaiModel:n.value.openaiModel||"gpt-image-1"}),u=r=>{const t=r.target.value;i("update:value",{...o.value,backend:t})},d=r=>{const t=r.target.value;i("update:value",{...o.value,styleModifier:t})},p=r=>{const t=r.target.value;i("update:value",{...o.value,geminiModel:t})},g=r=>{const t=r.target.value;i("update:value",{...o.value,openaiModel:t})};return(r,t)=>(e.openBlock(),e.createElementBlock("div",h,[e.createElementVNode("div",null,[t[1]||(t[1]=e.createElementVNode("label",{class:"block text-sm font-medium text-gray-700 mb-2"}," Image Generation Backend ",-1)),e.createElementVNode("select",{value:o.value.backend,onChange:u,class:"w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"},[...t[0]||(t[0]=[e.createElementVNode("option",{value:"gemini"},"Google Gemini",-1),e.createElementVNode("option",{value:"openai"},"OpenAI",-1),e.createElementVNode("option",{value:"comfyui"},"ComfyUI (Local)",-1)])],40,b),t[2]||(t[2]=e.createElementVNode("p",{class:"text-xs text-gray-500 mt-1"}," Choose between cloud-based Gemini or OpenAI, or a local ComfyUI workflow for image generation. ",-1))]),o.value.backend==="gemini"?(e.openBlock(),e.createElementBlock("div",k,[t[4]||(t[4]=e.createElementVNode("label",{class:"block text-sm font-medium text-gray-700 mb-2"}," Gemini Model ",-1)),e.createElementVNode("select",{value:o.value.geminiModel||"gemini-2.5-flash-image",onChange:p,class:"w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"},[...t[3]||(t[3]=[e.createElementVNode("option",{value:"gemini-2.5-flash-image"},"Gemini 2.5 Flash Image",-1),e.createElementVNode("option",{value:"gemini-3-pro-image-preview"}," Gemini 3 Pro Image (Preview) ",-1)])],40,M),t[5]||(t[5]=e.createElementVNode("p",{class:"text-xs text-gray-500 mt-1"}," Select which Gemini model to use for image generation. ",-1))])):e.createCommentVNode("",!0),o.value.backend==="openai"?(e.openBlock(),e.createElementBlock("div",E,[t[7]||(t[7]=e.createElementVNode("label",{class:"block text-sm font-medium text-gray-700 mb-2"}," OpenAI Model ",-1)),e.createElementVNode("select",{value:o.value.openaiModel||"gpt-image-1",onChange:g,class:"w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"},[...t[6]||(t[6]=[e.createElementVNode("option",{value:"gpt-image-1"},"GPT Image 1",-1),e.createElementVNode("option",{value:"gpt-image-1.5"},"GPT Image 1.5",-1),e.createElementVNode("option",{value:"gpt-image-1-mini"},"GPT Image 1 Mini",-1)])],40,N),t[8]||(t[8]=e.createElementVNode("p",{class:"text-xs text-gray-500 mt-1"}," Select which OpenAI image model to use. ",-1))])):e.createCommentVNode("",!0),e.createElementVNode("div",null,[t[9]||(t[9]=e.createElementVNode("label",{class:"block text-sm font-medium text-gray-700 mb-2"}," Additional Style Modifier ",-1)),e.createElementVNode("input",{type:"text",value:o.value.styleModifier||"",onInput:d,placeholder:"e.g., ghibli-style anime, oil painting, cyberpunk",class:"w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"},null,40,x),t[10]||(t[10]=e.createElementVNode("p",{class:"text-xs text-gray-500 mt-1"}," This style will be automatically appended to all image generation prompts. Leave empty for no additional styling. ",-1))])]))}}),I=async(a,l)=>{const{prompt:n}=l;return a.app?.generateImage?a.app.generateImage(a,n):{message:"generateImage function not available"}};function w(a,l,n){return{toolName:s,data:{imageData:a,prompt:n},message:"",title:l}}const C={toolDefinition:c,execute:I,generatingMessage:"Generating image...",isEnabled:()=>!0,viewComponent:v,previewComponent:y,fileUpload:{acceptedTypes:["image/png","image/jpeg"],handleUpload:w},systemPrompt:`When you are talking about places, objects, people, movies, books and other things, you MUST use the ${s} API to draw pictures to make the conversation more engaging.`,config:{key:"imageGenerationBackend",defaultValue:{backend:"gemini",styleModifier:"",geminiModel:"gemini-2.5-flash-image",openaiModel:"gpt-image-1"},component:V},samples:f},G={plugin:C};exports.default=G;

package/dist/index.d.ts

@@ -9,3 +9,4 @@ declare const _default: {
     plugin: ToolPlugin;
 };
 export default _default;
+export type { ImageGenerationConfigValue } from "./plugin/types";

package/dist/index.js

@@ -1,8 +1,8 @@
-import { defineComponent as s, ref as m, watch as g, createBlock as i, createCommentVNode as c, openBlock as o, unref as p } from "vue";
-import { ImageView as u, ImagePreview as l } from "@mulmochat-plugin/ui-image";
-const r = "generateImage", d = {
+import { defineComponent as g, ref as b, watch as k, createBlock as d, createCommentVNode as p, openBlock as r, unref as c, computed as x, createElementBlock as m, createElementVNode as t } from "vue";
+import { ImageView as M, ImagePreview as I } from "@mulmochat-plugin/ui-image";
+const u = "generateImage", w = {
   type: "function",
-  name: r,
+  name: u,
   description: "Generate an image based on the prompt and display it on the screen. Be descriptive and specify the concrete details of the images in the prompt. Each call generates one image.",
   parameters: {
     type: "object",
@@ -14,7 +14,7 @@ const r = "generateImage", d = {
     },
     required: ["prompt"]
   }
-}, h = [
+}, C = [
   {
     name: "Sunset Beach",
     args: {
@@ -43,62 +43,164 @@ const r = "generateImage", d = {
       prompt: "A winding path through an enchanted forest with sunlight filtering through the leaves"
     }
   }
-], f = /* @__PURE__ */ s({
+], G = /* @__PURE__ */ g({
   __name: "View",
   props: {
     selectedResult: {},
     sendTextMessage: { type: Function }
   },
   emits: ["updateResult"],
-  setup(t) {
-    const n = t, e = m(null);
-    return g(
-      () => n.selectedResult,
-      (a) => {
-        a?.toolName === r && a.data && (e.value = a);
+  setup(n) {
+    const l = n, a = b(null);
+    return k(
+      () => l.selectedResult,
+      (i) => {
+        i?.toolName === u && i.data && (a.value = i);
       },
       { immediate: !0, deep: !0 }
-    ), (a, k) => e.value ? (o(), i(p(u), {
+    ), (i, o) => a.value ? (r(), d(c(M), {
       key: 0,
-      selectedResult: e.value
-    }, null, 8, ["selectedResult"])) : c("", !0);
+      selectedResult: a.value
+    }, null, 8, ["selectedResult"])) : p("", !0);
   }
-}), y = /* @__PURE__ */ s({
+}), A = /* @__PURE__ */ g({
   __name: "Preview",
   props: {
     result: {}
   },
-  setup(t) {
-    return (n, e) => (o(), i(p(l), { result: t.result }, null, 8, ["result"]));
+  setup(n) {
+    return (l, a) => (r(), d(c(I), { result: n.result }, null, 8, ["result"]));
   }
-}), w = async (t, n) => {
-  try {
-    const { prompt: e } = n;
-    if (!e || typeof e != "string" || e.trim().length === 0)
-      throw new Error("A prompt is required to generate an image");
-    return t.app?.generateImage ? await t.app.generateImage(r, e) : {
-      message: `Image generation requested: "${e}"`,
-      data: {
-        imageData: `https://picsum.photos/seed/${encodeURIComponent(e)}/800/600`,
-        prompt: e
-      },
-      instructions: "The image has been generated and displayed. Ask the user if they like it or want any modifications."
-    };
-  } catch (e) {
-    return console.error("Image generation error", e), {
-      message: `Image generation error: ${e instanceof Error ? e.message : "Unknown error"}`,
-      instructions: "Acknowledge that there was an error generating the image and suggest trying again with a different prompt."
+}), _ = { class: "space-y-4" }, P = ["value"], O = { key: 0 }, T = ["value"], S = { key: 1 }, B = ["value"], E = ["value"], N = /* @__PURE__ */ g({
+  __name: "ImageGenerationConfig",
+  props: {
+    value: {}
+  },
+  emits: ["update:value"],
+  setup(n, { emit: l }) {
+    const a = n, i = l, o = x(() => typeof a.value == "string" ? {
+      backend: a.value,
+      styleModifier: "",
+      geminiModel: "gemini-2.5-flash-image",
+      openaiModel: "gpt-image-1"
+    } : {
+      ...a.value,
+      geminiModel: a.value.geminiModel || "gemini-2.5-flash-image",
+      openaiModel: a.value.openaiModel || "gpt-image-1"
+    }), f = (s) => {
+      const e = s.target.value;
+      i("update:value", {
+        ...o.value,
+        backend: e
+      });
+    }, v = (s) => {
+      const e = s.target.value;
+      i("update:value", {
+        ...o.value,
+        styleModifier: e
+      });
+    }, y = (s) => {
+      const e = s.target.value;
+      i("update:value", {
+        ...o.value,
+        geminiModel: e
+      });
+    }, h = (s) => {
+      const e = s.target.value;
+      i("update:value", {
+        ...o.value,
+        openaiModel: e
+      });
     };
+    return (s, e) => (r(), m("div", _, [
+      t("div", null, [
+        e[1] || (e[1] = t("label", { class: "block text-sm font-medium text-gray-700 mb-2" }, " Image Generation Backend ", -1)),
+        t("select", {
+          value: o.value.backend,
+          onChange: f,
+          class: "w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+        }, [...e[0] || (e[0] = [
+          t("option", { value: "gemini" }, "Google Gemini", -1),
+          t("option", { value: "openai" }, "OpenAI", -1),
+          t("option", { value: "comfyui" }, "ComfyUI (Local)", -1)
+        ])], 40, P),
+        e[2] || (e[2] = t("p", { class: "text-xs text-gray-500 mt-1" }, " Choose between cloud-based Gemini or OpenAI, or a local ComfyUI workflow for image generation. ", -1))
+      ]),
+      o.value.backend === "gemini" ? (r(), m("div", O, [
+        e[4] || (e[4] = t("label", { class: "block text-sm font-medium text-gray-700 mb-2" }, " Gemini Model ", -1)),
+        t("select", {
+          value: o.value.geminiModel || "gemini-2.5-flash-image",
+          onChange: y,
+          class: "w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+        }, [...e[3] || (e[3] = [
+          t("option", { value: "gemini-2.5-flash-image" }, "Gemini 2.5 Flash Image", -1),
+          t("option", { value: "gemini-3-pro-image-preview" }, " Gemini 3 Pro Image (Preview) ", -1)
+        ])], 40, T),
+        e[5] || (e[5] = t("p", { class: "text-xs text-gray-500 mt-1" }, " Select which Gemini model to use for image generation. ", -1))
+      ])) : p("", !0),
+      o.value.backend === "openai" ? (r(), m("div", S, [
+        e[7] || (e[7] = t("label", { class: "block text-sm font-medium text-gray-700 mb-2" }, " OpenAI Model ", -1)),
+        t("select", {
+          value: o.value.openaiModel || "gpt-image-1",
+          onChange: h,
+          class: "w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+        }, [...e[6] || (e[6] = [
+          t("option", { value: "gpt-image-1" }, "GPT Image 1", -1),
+          t("option", { value: "gpt-image-1.5" }, "GPT Image 1.5", -1),
+          t("option", { value: "gpt-image-1-mini" }, "GPT Image 1 Mini", -1)
+        ])], 40, B),
+        e[8] || (e[8] = t("p", { class: "text-xs text-gray-500 mt-1" }, " Select which OpenAI image model to use. ", -1))
+      ])) : p("", !0),
+      t("div", null, [
+        e[9] || (e[9] = t("label", { class: "block text-sm font-medium text-gray-700 mb-2" }, " Additional Style Modifier ", -1)),
+        t("input", {
+          type: "text",
+          value: o.value.styleModifier || "",
+          onInput: v,
+          placeholder: "e.g., ghibli-style anime, oil painting, cyberpunk",
+          class: "w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+        }, null, 40, E),
+        e[10] || (e[10] = t("p", { class: "text-xs text-gray-500 mt-1" }, " This style will be automatically appended to all image generation prompts. Leave empty for no additional styling. ", -1))
+      ])
+    ]));
   }
-}, _ = {
-  toolDefinition: d,
-  execute: w,
+}), D = async (n, l) => {
+  const { prompt: a } = l;
+  return n.app?.generateImage ? n.app.generateImage(n, a) : { message: "generateImage function not available" };
+};
+function L(n, l, a) {
+  return {
+    toolName: u,
+    data: { imageData: n, prompt: a },
+    message: "",
+    title: l
+  };
+}
+const U = {
+  toolDefinition: w,
+  execute: D,
   generatingMessage: "Generating image...",
   isEnabled: () => !0,
-  viewComponent: f,
-  previewComponent: y,
-  samples: h
-}, A = { plugin: _ };
+  viewComponent: G,
+  previewComponent: A,
+  fileUpload: {
+    acceptedTypes: ["image/png", "image/jpeg"],
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    handleUpload: L
+  },
+  systemPrompt: `When you are talking about places, objects, people, movies, books and other things, you MUST use the ${u} API to draw pictures to make the conversation more engaging.`,
+  config: {
+    key: "imageGenerationBackend",
+    defaultValue: {
+      backend: "gemini",
+      styleModifier: "",
+      geminiModel: "gemini-2.5-flash-image",
+      openaiModel: "gpt-image-1"
+    },
+    component: N
+  },
+  samples: C
+}, F = { plugin: U };
 export {
-  A as default
+  F as default
 };

package/dist/plugin/ImageGenerationConfig.vue.d.ts

@@ -0,0 +1,11 @@
+import type { ImageGenerationConfigValue } from "./types";
+type __VLS_Props = {
+    value: "gemini" | "openai" | "comfyui" | ImageGenerationConfigValue;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:value": (value: ImageGenerationConfigValue) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:value"?: ((value: ImageGenerationConfigValue) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/plugin/index.d.ts

@@ -10,8 +10,9 @@
  * // Use plugin directly
  * ```
  */
-import type { ToolPlugin } from "../common";
+import type { ToolPlugin, ToolResult } from "../common";
 import type { ImageToolData, GenerateImageArgs } from "./types";
+export declare function createUploadedImageResult(imageData: string, fileName: string, prompt: string): ToolResult<ImageToolData, never>;
 /**
  * GenerateImage plugin instance
  */

package/dist/plugin/types.d.ts

@@ -7,3 +7,10 @@ export type { ImageToolData } from "@mulmochat-plugin/ui-image";
 export interface GenerateImageArgs {
     prompt: string;
 }
+/** Configuration value for image generation backend */
+export interface ImageGenerationConfigValue {
+    backend: "gemini" | "openai" | "comfyui";
+    styleModifier?: string;
+    geminiModel?: "gemini-2.5-flash-image" | "gemini-3-pro-image-preview";
+    openaiModel?: "gpt-image-1" | "gpt-image-1.5" | "gpt-image-1-mini";
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mulmochat-plugin/generate-image",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Image generation plugin for MulmoChat",
   "type": "module",
   "main": "./dist/index.cjs",