sveltekit-ui 1.0.40 → 1.0.42

package/dist/Components/ImageEditor/Panels/AI/index.svelte

@@ -3,15 +3,17 @@
   import InfoBox from "../../../InfoBox/index.svelte"
   import Dropdown from "../../../Dropdown/index.svelte"
   import TextInput from "../../../TextInput/index.svelte"
+  import FileInput from "../../../FileInput/index.svelte"
 
   let { manager } = $props()
 </script>
 
 <div>
   <Dropdown manager={manager?.ai_tab_dropdown_manager} />
-  {#if manager?.ai_tab_dropdown_manager?.val == "text_to_image"}
+  {#if manager?.ai_tab_dropdown_manager?.val == "image_generator"}
     <div style="padding-top: .5rem;">
       <TextInput manager={manager?.ai_generate_image_from_text_text_input_manager} />
+      <FileInput manager={manager?.ai_generate_image_images_prompt_file_input_manager} />
       <Button manager={manager?.ai_generate_image_from_text_button_manager} />
     </div>
   {:else if manager?.ai_tab_dropdown_manager?.val == "remove_background"}

package/dist/Components/ImageEditor/index.svelte.js

@@ -108,8 +108,9 @@ export function create_image_editor_manager(config) {
   let file_quality_slider_manager = $state(null)
 
   let ai_tab_dropdown_manager = $state(null)
-  let ai_text_to_image_is_loading = $state(null)
+  let ai_image_generator_is_loading = $state(null)
   let ai_generate_image_from_text_text_input_manager = $state(null)
+  let ai_generate_image_images_prompt_file_input_manager = $state(null)
   let ai_generate_image_from_text_button_manager = $state(null)
   let ai_remove_background_is_loading = $state(false)
   let ai_restore_resolution_is_loading = $state(false)
@@ -786,14 +787,14 @@ export function create_image_editor_manager(config) {
 
   // ai ↓↓↓
 
-  async function ai_text_to_image(input) {
+  async function ai_image_generator(input) {
     ai_error_message = null
-    if (typeof config?.ai_text_to_image !== "function") {
-      ai_error_message = "ai_text_to_image function not provided to config"
+    if (typeof config?.ai_image_generator !== "function") {
+      ai_error_message = "ai_image_generator function not provided to config"
       return
     }
-    ai_text_to_image_is_loading = true
-    const res = await config?.ai_text_to_image(input)
+    ai_image_generator_is_loading = true
+    const res = await config?.ai_image_generator(input)
     if (res?.is_success) {
       try {
         const data_url = `data:image/webp;base64,${res?.data?.b64_json}`
@@ -810,7 +811,7 @@ export function create_image_editor_manager(config) {
     } else {
       ai_error_message = res?.error_message ?? "Error generating image"
     }
-    ai_text_to_image_is_loading = false
+    ai_image_generator_is_loading = false
   }
 
   async function ai_remove_background(input) {
@@ -1113,7 +1114,12 @@ export function create_image_editor_manager(config) {
     set_file_data_base()
   }
 
+  function set_is_popover(input) {
+    is_popover = !!input
+  }
+
   async function init(config) {
+    is_popover = !!config?.is_popover
     popover_manager = create_popover_manager({
       min_width: 320,
       target_width: 900,
@@ -1492,27 +1498,38 @@ export function create_image_editor_manager(config) {
     })
     ai_tab_dropdown_manager = create_dropdown_manager({
       type: "horiz_selector",
-      val: "text_to_image",
+      val: "image_generator",
       options: [
-        { key: "text_to_image", name: "Text to Image" },
+        { key: "image_generator", name: "Image Generator" },
         { key: "remove_background", name: "Remove Background" },
         { key: "restore_resolution", name: "Restore Resolution" },
         { key: "restore_face", name: "Restore Face" },
       ],
     })
     ai_generate_image_from_text_text_input_manager = create_text_input_manager({
+      label: "Text Prompt",
       type: "text_area",
       rows: 3,
       placeholder: "Describe what you want your image to be of",
-      is_disabled: () => ai_text_to_image_is_loading,
+      is_disabled: () => ai_image_generator_is_loading,
+    })
+    ai_generate_image_images_prompt_file_input_manager = create_file_input_manager({
+      label: "Image Prompt",
+      is_multiselect: true,
+      is_drop_zone: false,
+      accept: ["image/png", "image/jpeg", "image/webp"],
     })
     ai_generate_image_from_text_button_manager = create_button_manager({
       text: "Generate Image From text",
       is_compressed: true,
       mt: 1,
-      is_loading: () => ai_text_to_image_is_loading,
+      is_loading: () => ai_image_generator_is_loading,
       is_disabled: () => is_disabled,
-      on_click: () => ai_text_to_image(ai_generate_image_from_text_text_input_manager?.val),
+      on_click: () =>
+        ai_image_generator({
+          text_prompt: ai_generate_image_from_text_text_input_manager?.val,
+          images_prompt: ai_generate_image_images_prompt_file_input_manager?.val,
+        }),
     })
     ai_remove_bg_button_manager = create_button_manager({
       text: "Remove Background",
@@ -1837,12 +1854,15 @@ export function create_image_editor_manager(config) {
     get ai_tab_dropdown_manager() {
       return ai_tab_dropdown_manager
     },
-    get ai_text_to_image_is_loading() {
-      return ai_text_to_image_is_loading
+    get ai_image_generator_is_loading() {
+      return ai_image_generator_is_loading
     },
     get ai_generate_image_from_text_text_input_manager() {
       return ai_generate_image_from_text_text_input_manager
     },
+    get ai_generate_image_images_prompt_file_input_manager() {
+      return ai_generate_image_images_prompt_file_input_manager
+    },
     get ai_generate_image_from_text_button_manager() {
       return ai_generate_image_from_text_button_manager
     },
@@ -1903,5 +1923,6 @@ export function create_image_editor_manager(config) {
     download_image,
     set_file_from_inputs,
     drop_handler,
+    set_is_popover,
   }
 }

package/dist/client/docs/index.js

@@ -4070,7 +4070,7 @@ export const definitions = {
         default: null,
         description: "invoked when the user taps 'Finish', receives the final edited file",
       },
-      ai_text_to_image: {
+      ai_image_generator: {
         type: "function",
         default: null,
         description:
@@ -4527,13 +4527,17 @@ export const definitions = {
         type: "object",
         description: "dropdown manager to switch among AI-related tasks",
       },
-      ai_text_to_image_is_loading: {
+      ai_image_generator_is_loading: {
         type: "boolean",
         description: "true if the text-to-image AI call is in progress",
       },
       ai_generate_image_from_text_text_input_manager: {
         type: "object",
-        description: "text input manager containing the user’s text prompt for AI generation",
+        description: "text input manager containing the user’s text prompt for AI image generation",
+      },
+      ai_generate_image_images_prompt_file_input_manager: {
+        type: "object",
+        description: "text input manager containing the user’s image prompt for AI image generation",
       },
       ai_generate_image_from_text_button_manager: {
         type: "object",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sveltekit-ui",
-  "version": "1.0.40",
+  "version": "1.0.42",
   "description": "A SvelteKit UI component library for building modern web applications",
   "license": "MIT",
   "type": "module",
@@ -31,7 +31,7 @@
     "@sveltejs/vite-plugin-svelte": "^6.1.3",
     "@vercel/analytics": "^1.5.0",
     "typescript": "^5.9.2",
-    "vite": "^7.1.3"
+    "vite": "^7.1.4"
   },
   "homepage": "https://www.sveltekit-ui.com",
   "keywords": [

package/src/lib/Components/ImageEditor/Panels/AI/index.svelte

@@ -3,15 +3,17 @@
   import InfoBox from "$lib/Components/InfoBox/index.svelte"
   import Dropdown from "$lib/Components/Dropdown/index.svelte"
   import TextInput from "$lib/Components/TextInput/index.svelte"
+  import FileInput from "$lib/Components/FileInput/index.svelte"
 
   let { manager } = $props()
 </script>
 
 <div>
   <Dropdown manager={manager?.ai_tab_dropdown_manager} />
-  {#if manager?.ai_tab_dropdown_manager?.val == "text_to_image"}
+  {#if manager?.ai_tab_dropdown_manager?.val == "image_generator"}
     <div style="padding-top: .5rem;">
       <TextInput manager={manager?.ai_generate_image_from_text_text_input_manager} />
+      <FileInput manager={manager?.ai_generate_image_images_prompt_file_input_manager} />
       <Button manager={manager?.ai_generate_image_from_text_button_manager} />
     </div>
   {:else if manager?.ai_tab_dropdown_manager?.val == "remove_background"}

package/src/lib/Components/ImageEditor/index.svelte.js

@@ -108,8 +108,9 @@ export function create_image_editor_manager(config) {
   let file_quality_slider_manager = $state(null)
 
   let ai_tab_dropdown_manager = $state(null)
-  let ai_text_to_image_is_loading = $state(null)
+  let ai_image_generator_is_loading = $state(null)
   let ai_generate_image_from_text_text_input_manager = $state(null)
+  let ai_generate_image_images_prompt_file_input_manager = $state(null)
   let ai_generate_image_from_text_button_manager = $state(null)
   let ai_remove_background_is_loading = $state(false)
   let ai_restore_resolution_is_loading = $state(false)
@@ -786,14 +787,14 @@ export function create_image_editor_manager(config) {
 
   // ai ↓↓↓
 
-  async function ai_text_to_image(input) {
+  async function ai_image_generator(input) {
     ai_error_message = null
-    if (typeof config?.ai_text_to_image !== "function") {
-      ai_error_message = "ai_text_to_image function not provided to config"
+    if (typeof config?.ai_image_generator !== "function") {
+      ai_error_message = "ai_image_generator function not provided to config"
       return
     }
-    ai_text_to_image_is_loading = true
-    const res = await config?.ai_text_to_image(input)
+    ai_image_generator_is_loading = true
+    const res = await config?.ai_image_generator(input)
     if (res?.is_success) {
       try {
         const data_url = `data:image/webp;base64,${res?.data?.b64_json}`
@@ -810,7 +811,7 @@ export function create_image_editor_manager(config) {
     } else {
       ai_error_message = res?.error_message ?? "Error generating image"
     }
-    ai_text_to_image_is_loading = false
+    ai_image_generator_is_loading = false
   }
 
   async function ai_remove_background(input) {
@@ -1113,7 +1114,12 @@ export function create_image_editor_manager(config) {
     set_file_data_base()
   }
 
+  function set_is_popover(input) {
+    is_popover = !!input
+  }
+
   async function init(config) {
+    is_popover = !!config?.is_popover
     popover_manager = create_popover_manager({
       min_width: 320,
       target_width: 900,
@@ -1492,27 +1498,38 @@ export function create_image_editor_manager(config) {
     })
     ai_tab_dropdown_manager = create_dropdown_manager({
       type: "horiz_selector",
-      val: "text_to_image",
+      val: "image_generator",
       options: [
-        { key: "text_to_image", name: "Text to Image" },
+        { key: "image_generator", name: "Image Generator" },
         { key: "remove_background", name: "Remove Background" },
         { key: "restore_resolution", name: "Restore Resolution" },
         { key: "restore_face", name: "Restore Face" },
       ],
     })
     ai_generate_image_from_text_text_input_manager = create_text_input_manager({
+      label: "Text Prompt",
       type: "text_area",
       rows: 3,
       placeholder: "Describe what you want your image to be of",
-      is_disabled: () => ai_text_to_image_is_loading,
+      is_disabled: () => ai_image_generator_is_loading,
+    })
+    ai_generate_image_images_prompt_file_input_manager = create_file_input_manager({
+      label: "Image Prompt",
+      is_multiselect: true,
+      is_drop_zone: false,
+      accept: ["image/png", "image/jpeg", "image/webp"],
     })
     ai_generate_image_from_text_button_manager = create_button_manager({
       text: "Generate Image From text",
       is_compressed: true,
       mt: 1,
-      is_loading: () => ai_text_to_image_is_loading,
+      is_loading: () => ai_image_generator_is_loading,
       is_disabled: () => is_disabled,
-      on_click: () => ai_text_to_image(ai_generate_image_from_text_text_input_manager?.val),
+      on_click: () =>
+        ai_image_generator({
+          text_prompt: ai_generate_image_from_text_text_input_manager?.val,
+          images_prompt: ai_generate_image_images_prompt_file_input_manager?.val,
+        }),
     })
     ai_remove_bg_button_manager = create_button_manager({
       text: "Remove Background",
@@ -1837,12 +1854,15 @@ export function create_image_editor_manager(config) {
     get ai_tab_dropdown_manager() {
       return ai_tab_dropdown_manager
     },
-    get ai_text_to_image_is_loading() {
-      return ai_text_to_image_is_loading
+    get ai_image_generator_is_loading() {
+      return ai_image_generator_is_loading
     },
     get ai_generate_image_from_text_text_input_manager() {
       return ai_generate_image_from_text_text_input_manager
     },
+    get ai_generate_image_images_prompt_file_input_manager() {
+      return ai_generate_image_images_prompt_file_input_manager
+    },
     get ai_generate_image_from_text_button_manager() {
       return ai_generate_image_from_text_button_manager
     },
@@ -1903,5 +1923,6 @@ export function create_image_editor_manager(config) {
     download_image,
     set_file_from_inputs,
     drop_handler,
+    set_is_popover,
   }
 }

package/src/lib/client/docs/index.js

@@ -4070,7 +4070,7 @@ export const definitions = {
         default: null,
         description: "invoked when the user taps 'Finish', receives the final edited file",
       },
-      ai_text_to_image: {
+      ai_image_generator: {
         type: "function",
         default: null,
         description:
@@ -4527,13 +4527,17 @@ export const definitions = {
         type: "object",
         description: "dropdown manager to switch among AI-related tasks",
       },
-      ai_text_to_image_is_loading: {
+      ai_image_generator_is_loading: {
         type: "boolean",
         description: "true if the text-to-image AI call is in progress",
       },
       ai_generate_image_from_text_text_input_manager: {
         type: "object",
-        description: "text input manager containing the user’s text prompt for AI generation",
+        description: "text input manager containing the user’s text prompt for AI image generation",
+      },
+      ai_generate_image_images_prompt_file_input_manager: {
+        type: "object",
+        description: "text input manager containing the user’s image prompt for AI image generation",
       },
       ai_generate_image_from_text_button_manager: {
         type: "object",

package/src/routes/[component]/Showcase/ImageEditor/index.svelte

@@ -4,9 +4,9 @@
   import ImageEditor from "$lib/Components/ImageEditor/index.svelte"
   import { create_image_editor_manager } from "$lib/Components/ImageEditor/index.svelte.js"
 
-  // async function ai_text_to_image(input) {
+  // async function ai_image_generator(input) {
   //   try {
-  //     const response = await fetch("/api/images/generate", {
+  //     const response = await fetch("/api/tools/generate", {
   //       method: "POST",
   //       body: JSON.stringify({ prompt: input }),
   //     })
@@ -38,7 +38,7 @@
   //     let res = await fetch(input)
   //     let blob = await res.blob()
   //     form_data.append("file", blob, rand_name)
-  //     let response = await fetch("/api/images/remove_background", {
+  //     let response = await fetch("/api/tools/remove_background", {
   //       method: "POST",
   //       body: form_data,
   //     })
@@ -66,7 +66,8 @@
   // }
 
   let image_editor_manager = create_image_editor_manager({
-    // ai_text_to_image: ai_text_to_image,
+    is_popover: false,
+    // ai_image_generator: ai_image_generator,
     // ai_remove_image_background: ai_remove_image_background,
     // ai_restore_resolution: ai_restore_resolution,
     // ai_restore_face: ai_restore_face,