@slopmachine/react 0.1.0 → 0.1.2

package/README.md

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

package/dist/index.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
@@ -25,7 +35,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/components/SlopImage.tsx
-var import_react = require("react");
+var import_react = __toESM(require("react"));
 var import_clsx = require("clsx");
 var import_tailwind_merge = require("tailwind-merge");
 var import_core = require("@slopmachine/core");
@@ -34,6 +44,7 @@ function cn(...inputs) {
   return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
 }
 var SlopImage = ({
+  bucketId,
   prompt,
   className,
   aspectRatio = "1:1",
@@ -42,10 +53,24 @@ var SlopImage = ({
   baseUrl,
   ...props
 }) => {
-  const src = (0, import_react.useMemo)(
-    () => (0, import_core.buildImageUrl)({ prompt, aspectRatio, variables, baseUrl, model }),
-    [prompt, aspectRatio, variables, baseUrl, model]
+  const rawSrc = (0, import_react.useMemo)(
+    () => (0, import_core.buildImageUrl)({
+      bucketId,
+      prompt,
+      aspectRatio,
+      variables,
+      baseUrl,
+      model
+    }),
+    [bucketId, prompt, aspectRatio, variables, baseUrl, model]
   );
+  const [src, setSrc] = (0, import_react.useState)(rawSrc);
+  import_react.default.useEffect(() => {
+    const timer = setTimeout(() => {
+      setSrc(rawSrc);
+    }, 100);
+    return () => clearTimeout(timer);
+  }, [rawSrc]);
   const alt = (0, import_react.useMemo)(
     () => (0, import_core.interpolatePrompt)(prompt, variables) ?? "Generated image",
     [prompt, variables]
@@ -56,6 +81,23 @@ var SlopImage = ({
     setCurrentSrc(src);
     setIsLoading(true);
   }
+  import_react.default.useEffect(() => {
+    if (!src) return;
+    fetch(src, { method: "HEAD" }).then(async (res) => {
+      if (!res.ok) {
+        try {
+          const errRes = await fetch(src);
+          const errJson = await errRes.json();
+          console.error("SlopImage error:", res.status, errJson.error);
+        } catch (e) {
+        }
+        setIsLoading(false);
+      }
+    }).catch((err) => {
+      console.error(`Error fetching image from ${src}:`, err);
+      setIsLoading(false);
+    });
+  }, [src]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `
         @keyframes slop-shimmer {
@@ -200,6 +242,7 @@ var SlopImage = ({
               src,
               alt,
               onLoad: () => setIsLoading(false),
+              onError: () => setIsLoading(false),
               className: cn(
                 "h-full w-full object-cover transition-opacity duration-500",
                 isLoading ? "opacity-0" : "opacity-100"

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/components/SlopImage.tsx
-import { useMemo, useState } from "react";
+import React, { useMemo, useState } from "react";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 import {
@@ -11,6 +11,7 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 var SlopImage = ({
+  bucketId,
   prompt,
   className,
   aspectRatio = "1:1",
@@ -19,10 +20,24 @@ var SlopImage = ({
   baseUrl,
   ...props
 }) => {
-  const src = useMemo(
-    () => buildImageUrl({ prompt, aspectRatio, variables, baseUrl, model }),
-    [prompt, aspectRatio, variables, baseUrl, model]
+  const rawSrc = useMemo(
+    () => buildImageUrl({
+      bucketId,
+      prompt,
+      aspectRatio,
+      variables,
+      baseUrl,
+      model
+    }),
+    [bucketId, prompt, aspectRatio, variables, baseUrl, model]
   );
+  const [src, setSrc] = useState(rawSrc);
+  React.useEffect(() => {
+    const timer = setTimeout(() => {
+      setSrc(rawSrc);
+    }, 100);
+    return () => clearTimeout(timer);
+  }, [rawSrc]);
   const alt = useMemo(
     () => interpolatePrompt(prompt, variables) ?? "Generated image",
     [prompt, variables]
@@ -33,6 +48,23 @@ var SlopImage = ({
     setCurrentSrc(src);
     setIsLoading(true);
   }
+  React.useEffect(() => {
+    if (!src) return;
+    fetch(src, { method: "HEAD" }).then(async (res) => {
+      if (!res.ok) {
+        try {
+          const errRes = await fetch(src);
+          const errJson = await errRes.json();
+          console.error("SlopImage error:", res.status, errJson.error);
+        } catch (e) {
+        }
+        setIsLoading(false);
+      }
+    }).catch((err) => {
+      console.error(`Error fetching image from ${src}:`, err);
+      setIsLoading(false);
+    });
+  }, [src]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("style", { children: `
         @keyframes slop-shimmer {
@@ -177,6 +209,7 @@ var SlopImage = ({
               src,
               alt,
               onLoad: () => setIsLoading(false),
+              onError: () => setIsLoading(false),
               className: cn(
                 "h-full w-full object-cover transition-opacity duration-500",
                 isLoading ? "opacity-0" : "opacity-100"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slopmachine/react",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "The official React SDK for Slop Machine",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/components/SlopImage.tsx

@@ -19,6 +19,7 @@ interface SlopImageProps
     SlopImageOptions {}
 
 export const SlopImage: React.FC<SlopImageProps> = ({
+  bucketId,
   prompt,
   className,
   aspectRatio = "1:1",
@@ -28,11 +29,28 @@ export const SlopImage: React.FC<SlopImageProps> = ({
   ...props
 }) => {
   // Construct API URL
-  const src = useMemo(
-    () => buildImageUrl({ prompt, aspectRatio, variables, baseUrl, model }),
-    [prompt, aspectRatio, variables, baseUrl, model],
+  const rawSrc = useMemo(
+    () =>
+      buildImageUrl({
+        bucketId,
+        prompt,
+        aspectRatio,
+        variables,
+        baseUrl,
+        model,
+      }),
+    [bucketId, prompt, aspectRatio, variables, baseUrl, model],
   );
 
+  const [src, setSrc] = useState(rawSrc);
+
+  React.useEffect(() => {
+    const timer = setTimeout(() => {
+      setSrc(rawSrc);
+    }, 100);
+    return () => clearTimeout(timer);
+  }, [rawSrc]);
+
   const alt = useMemo(
     () => interpolatePrompt(prompt, variables) ?? "Generated image",
     [prompt, variables],
@@ -46,6 +64,31 @@ export const SlopImage: React.FC<SlopImageProps> = ({
     setIsLoading(true);
   }
 
+  React.useEffect(() => {
+    if (!src) return;
+
+    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
+          }
+          setIsLoading(false);
+        }
+      })
+      .catch((err) => {
+        console.error(`Error fetching image from ${src}:`, err);
+        setIsLoading(false);
+      });
+  }, [src]);
+
   return (
     <>
       <style>{`
@@ -73,7 +116,8 @@ export const SlopImage: React.FC<SlopImageProps> = ({
           backgroundColor: "var(--muted, #f3f4f6)",
           position: "relative",
           overflow: "hidden",
-        }}>
+        }}
+      >
         {/* Loading overlay */}
         <div
           className={cn(
@@ -94,7 +138,8 @@ export const SlopImage: React.FC<SlopImageProps> = ({
             opacity: isLoading ? 1 : 0,
             pointerEvents: isLoading ? "auto" : "none",
             transition: "opacity 300ms ease-in-out",
-          }}>
+          }}
+        >
           <div
             className="flex flex-col items-center gap-2"
             style={{
@@ -102,7 +147,8 @@ export const SlopImage: React.FC<SlopImageProps> = ({
               flexDirection: "column",
               alignItems: "center",
               gap: "0.5rem",
-            }}>
+            }}
+          >
             <svg
               className="spinner size-6 text-muted-foreground"
               xmlns="http://www.w3.org/2000/svg"
@@ -113,7 +159,8 @@ export const SlopImage: React.FC<SlopImageProps> = ({
                 height: "24px",
                 color: "var(--muted-foreground, #6b7280)",
                 animation: "slop-spin 1s linear infinite",
-              }}>
+              }}
+            >
               <circle
                 className="opacity-25"
                 cx="12"
@@ -135,7 +182,8 @@ export const SlopImage: React.FC<SlopImageProps> = ({
               style={{
                 fontSize: "0.75rem",
                 color: "var(--muted-foreground, #6b7280)",
-              }}>
+              }}
+            >
               Loading...
             </span>
           </div>
@@ -168,6 +216,7 @@ export const SlopImage: React.FC<SlopImageProps> = ({
           src={src}
           alt={alt}
           onLoad={() => setIsLoading(false)}
+          onError={() => setIsLoading(false)}
           className={cn(
             "h-full w-full object-cover transition-opacity duration-500",
             isLoading ? "opacity-0" : "opacity-100",