@mulmochat-plugin/generate-image 0.1.0 → 0.1.2

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/common/types.d.ts

@@ -5,6 +5,11 @@
  * These types are plugin-agnostic and can be used by any plugin implementation.
  */
 import type { Component } from "vue";
+/**
+ * Backend types that plugins can declare they use.
+ * App layer manages actual provider/model settings for each type.
+ */
+export type BackendType = "textLLM" | "imageGen" | "audio" | "search" | "browse" | "map";
 /**
  * Context passed to plugin execute function
  */
@@ -127,4 +132,6 @@ export interface ToolPlugin<T = unknown, J = unknown, A extends object = object>
     config?: ToolPluginConfig;
     /** Optional sample arguments for testing */
     samples?: ToolSample[];
+    /** Backend types this plugin uses (e.g., ["textLLM", "imageGen"]) */
+    backends?: BackendType[];
 }

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"),r=require("@mulmochat-plugin/ui-image"),o="generateImage",i={type:"function",name:o,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"}}],c=e.defineComponent({__name:"View",props:{selectedResult:{},sendTextMessage:{type:Function}},emits:["updateResult"],setup(t){const n=t,a=e.ref(null);return e.watch(()=>n.selectedResult,s=>{s?.toolName===o&&s.data&&(a.value=s)},{immediate:!0,deep:!0}),(s,h)=>a.value?(e.openBlock(),e.createBlock(e.unref(r.ImageView),{key:0,selectedResult:a.value},null,8,["selectedResult"])):e.createCommentVNode("",!0)}}),m=e.defineComponent({__name:"Preview",props:{result:{}},setup(t){return(n,a)=>(e.openBlock(),e.createBlock(e.unref(r.ImagePreview),{result:t.result},null,8,["result"]))}}),u=async(t,n)=>{const{prompt:a}=n;return t.app?.generateImage?t.app.generateImage(t,a):{message:"generateImage function not available"}};function l(t,n,a){return{toolName:o,data:{imageData:t,prompt:a},message:"",title:n}}const g={toolDefinition:i,execute:u,generatingMessage:"Generating image...",isEnabled:()=>!0,viewComponent:c,previewComponent:m,fileUpload:{acceptedTypes:["image/png","image/jpeg"],handleUpload:l},systemPrompt:`When you are talking about places, objects, people, movies, books and other things, you MUST use the ${o} API to draw pictures to make the conversation more engaging.`,backends:["imageGen"],samples:p},d={plugin:g};exports.default=d;

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 o, ref as m, watch as c, createBlock as r, createCommentVNode as u, openBlock as i, unref as p } from "vue";
+import { ImageView as g, ImagePreview as l } from "@mulmochat-plugin/ui-image";
+const s = "generateImage", d = {
   type: "function",
-  name: r,
+  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",
@@ -43,62 +43,62 @@ const r = "generateImage", d = {
       prompt: "A winding path through an enchanted forest with sunlight filtering through the leaves"
     }
   }
-], f = /* @__PURE__ */ s({
+], f = /* @__PURE__ */ o({
   __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(e) {
+    const a = e, t = m(null);
+    return c(
+      () => a.selectedResult,
+      (n) => {
+        n?.toolName === s && n.data && (t.value = n);
       },
       { immediate: !0, deep: !0 }
-    ), (a, k) => e.value ? (o(), i(p(u), {
+    ), (n, b) => t.value ? (i(), r(p(g), {
       key: 0,
-      selectedResult: e.value
-    }, null, 8, ["selectedResult"])) : c("", !0);
+      selectedResult: t.value
+    }, null, 8, ["selectedResult"])) : u("", !0);
   }
-}), y = /* @__PURE__ */ s({
+}), y = /* @__PURE__ */ o({
   __name: "Preview",
   props: {
     result: {}
   },
-  setup(t) {
-    return (n, e) => (o(), i(p(l), { result: t.result }, null, 8, ["result"]));
+  setup(e) {
+    return (a, t) => (i(), r(p(l), { result: e.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."
-    };
-  }
-}, _ = {
+}), _ = async (e, a) => {
+  const { prompt: t } = a;
+  return e.app?.generateImage ? e.app.generateImage(e, t) : { message: "generateImage function not available" };
+};
+function k(e, a, t) {
+  return {
+    toolName: s,
+    data: { imageData: e, prompt: t },
+    message: "",
+    title: a
+  };
+}
+const v = {
   toolDefinition: d,
-  execute: w,
+  execute: _,
   generatingMessage: "Generating image...",
   isEnabled: () => !0,
   viewComponent: f,
   previewComponent: y,
+  fileUpload: {
+    acceptedTypes: ["image/png", "image/jpeg"],
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    handleUpload: k
+  },
+  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.`,
+  backends: ["imageGen"],
   samples: h
-}, A = { plugin: _ };
+}, A = { plugin: v };
 export {
   A as 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.2",
   "description": "Image generation plugin for MulmoChat",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -24,8 +24,8 @@
     "lint": "eslint src demo"
   },
   "peerDependencies": {
-    "vue": "^3.5.0",
-    "@mulmochat-plugin/ui-image": "^0.1.0"
+    "@mulmochat-plugin/ui-image": "^0.1.0",
+    "vue": "^3.5.0"
   },
   "devDependencies": {
     "@mulmochat-plugin/ui-image": "^0.1.0",
@@ -34,7 +34,7 @@
     "@typescript-eslint/parser": "^8.53.0",
     "@vitejs/plugin-vue": "^6.0.3",
     "eslint": "^9.39.2",
-    "eslint-plugin-vue": "^10.6.2",
+    "eslint-plugin-vue": "^10.7.0",
     "globals": "^17.0.0",
     "tailwindcss": "^4.1.18",
     "typescript": "~5.9.3",