@slopmachine/svelte 0.1.0 → 0.1.1

package/README.md

@@ -12,6 +12,10 @@ yarn add @slopmachine/svelte
 pnpm add @slopmachine/svelte
 ```
 
+## Demo
+
+https://slopmachine-dev.github.io/slopmachine-sdk/svelte/
+
 ## Usage
 
 ```svelte

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slopmachine/svelte",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Svelte wrapper for SlopMachine",
   "type": "module",
   "main": "src/index.ts",

package/src/SlopImage.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
   import { buildImageUrl, interpolatePrompt, type SlopImageOptions } from "@slopmachine/core";
 
-  interface Props extends SlopImageOptions{
+  interface Props extends  SlopImageOptions {
     class?: string;
   }
 
   let {
+    bucketId,
     prompt,
     aspectRatio = "1:1",
     model,
@@ -17,7 +18,7 @@
 
   let isLoading = $state(true);
 
-  let src = $derived(buildImageUrl({ prompt, aspectRatio, variables, baseUrl, model }));
+  let src = $derived(buildImageUrl({ bucketId, prompt, aspectRatio, variables, baseUrl, model }));
   let prevSrc = $state("");
   let alt = $derived(interpolatePrompt( prompt, variables ) ?? "Generated image");
 
@@ -28,9 +29,36 @@
     }
   });
 
+  $effect(() => {
+    if (src) {
+      fetch(src, { method: 'HEAD' })
+        .then(async (res) => {
+          if (!res.ok) {
+            // console.error(`Failed to load image from ${src}. Status: ${res.status} ${res.statusText}`);
+            try {
+              const errRes = await fetch(src);
+              const errJson = await errRes.json();
+              console.error("SlopImage error:",res.status, errJson.error);
+            } catch (e) {
+              // Failed to fetch or parse error details
+            }
+            isLoading = false;
+          }
+        })
+        .catch((err) => {
+          console.error(`Error fetching image from ${src}:`, err);
+          isLoading = false;
+        });
+    }
+  });
+
   function handleLoad() {
     isLoading = false;
   }
+
+  function handleError() {
+    isLoading = false;
+  }
 </script>
 
 <div
@@ -62,6 +90,7 @@
     {src}
     {alt}
     onload={handleLoad}
+    onerror={handleError}
     class:loaded={!isLoading}
     {...restProps}
   />