@slopmachine/react 0.0.1 → 0.1.0

package/README.md

@@ -0,0 +1,51 @@
+# @slopmachine/react
+
+The official React SDK for Slop Machine. This package provides React components to easily integrate Slop Machine image generation into your applications.
+
+## Installation
+
+```bash
+npm install @slopmachine/react
+# or
+yarn add @slopmachine/react
+# or
+pnpm add @slopmachine/react
+```
+
+## Usage
+
+```tsx
+import { SlopImage } from "@slopmachine/react";
+
+function App() {
+  return (
+    <div style={{ width: "400px", height: "400px" }}>
+      <SlopImage
+        prompt="A cute cat drinking coffee in a {style} style"
+        aspectRatio="1:1"
+        variables={{ style: "anime" }}
+      />
+    </div>
+  );
+}
+
+export default App;
+```
+
+## API / Props
+
+### `SlopImage`
+
+The `SlopImage` component inherits from standard `React.ImgHTMLAttributes<HTMLImageElement>` (excluding `src` and `alt`) and accepts the following additional props:
+
+| Prop          | Type                     | Default      | Description                                             |
+| :------------ | :----------------------- | :----------- | :------------------------------------------------------ |
+| `prompt`      | `string`                 | **Required** | The prompt to use for image generation.                 |
+| `aspectRatio` | `string`                 | `"1:1"`      | The aspect ratio of the image (e.g. `"16:9"`, `"1:1"`). |
+| `variables`   | `Record<string, string>` | `{}`         | Variables to interpolate into the prompt.               |
+| `model`       | `string`                 | `undefined`  | The AI model to use for generation.                     |
+| `baseUrl`     | `string`                 | `undefined`  | Custom base URL for the Slop Machine API.               |
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { SlopMachineOptions } from '@slopmachine/core';
+import { SlopImageOptions } from '@slopmachine/core';
 
-interface SlopImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src" | "alt">, SlopMachineOptions {
+interface SlopImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src" | "alt">, SlopImageOptions {
 }
 declare const SlopImage: React.FC<SlopImageProps>;
 

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { SlopMachineOptions } from '@slopmachine/core';
+import { SlopImageOptions } from '@slopmachine/core';
 
-interface SlopImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src" | "alt">, SlopMachineOptions {
+interface SlopImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src" | "alt">, SlopImageOptions {
 }
 declare const SlopImage: React.FC<SlopImageProps>;
 

package/dist/index.js

@@ -46,6 +46,10 @@ var SlopImage = ({
     () => (0, import_core.buildImageUrl)({ prompt, aspectRatio, variables, baseUrl, model }),
     [prompt, aspectRatio, variables, baseUrl, model]
   );
+  const alt = (0, import_react.useMemo)(
+    () => (0, import_core.interpolatePrompt)(prompt, variables) ?? "Generated image",
+    [prompt, variables]
+  );
   const [isLoading, setIsLoading] = (0, import_react.useState)(true);
   const [currentSrc, setCurrentSrc] = (0, import_react.useState)(src);
   if (src !== currentSrc) {
@@ -194,7 +198,7 @@ var SlopImage = ({
             "img",
             {
               src,
-              alt: prompt,
+              alt,
               onLoad: () => setIsLoading(false),
               className: cn(
                 "h-full w-full object-cover transition-opacity duration-500",

package/dist/index.mjs

@@ -2,7 +2,10 @@
 import { useMemo, useState } from "react";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
-import { buildImageUrl } from "@slopmachine/core";
+import {
+  buildImageUrl,
+  interpolatePrompt
+} from "@slopmachine/core";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function cn(...inputs) {
   return twMerge(clsx(inputs));
@@ -20,6 +23,10 @@ var SlopImage = ({
     () => buildImageUrl({ prompt, aspectRatio, variables, baseUrl, model }),
     [prompt, aspectRatio, variables, baseUrl, model]
   );
+  const alt = useMemo(
+    () => interpolatePrompt(prompt, variables) ?? "Generated image",
+    [prompt, variables]
+  );
   const [isLoading, setIsLoading] = useState(true);
   const [currentSrc, setCurrentSrc] = useState(src);
   if (src !== currentSrc) {
@@ -168,7 +175,7 @@ var SlopImage = ({
             "img",
             {
               src,
-              alt: prompt,
+              alt,
               onLoad: () => setIsLoading(false),
               className: cn(
                 "h-full w-full object-cover transition-opacity duration-500",

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@slopmachine/react",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "description": "The official React SDK for Slop Machine",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
-      "require": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "require": "./dist/index.js"
     }
   },
   "scripts": {

package/src/components/SlopImage.tsx

@@ -2,7 +2,11 @@ import React, { useMemo, useState } from "react";
 import { clsx, type ClassValue } from "clsx";
 import { twMerge } from "tailwind-merge";
 
-import { buildImageUrl, type SlopMachineOptions } from "@slopmachine/core";
+import {
+  buildImageUrl,
+  interpolatePrompt,
+  type SlopImageOptions,
+} from "@slopmachine/core";
 
 // Utility for Tailwind classes
 function cn(...inputs: ClassValue[]) {
@@ -12,7 +16,7 @@ function cn(...inputs: ClassValue[]) {
 interface SlopImageProps
   extends
     Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src" | "alt">,
-    SlopMachineOptions {}
+    SlopImageOptions {}
 
 export const SlopImage: React.FC<SlopImageProps> = ({
   prompt,
@@ -29,6 +33,11 @@ export const SlopImage: React.FC<SlopImageProps> = ({
     [prompt, aspectRatio, variables, baseUrl, model],
   );
 
+  const alt = useMemo(
+    () => interpolatePrompt(prompt, variables) ?? "Generated image",
+    [prompt, variables],
+  );
+
   const [isLoading, setIsLoading] = useState(true);
   const [currentSrc, setCurrentSrc] = useState(src);
 
@@ -157,7 +166,7 @@ export const SlopImage: React.FC<SlopImageProps> = ({
         <img
           key={src}
           src={src}
-          alt={prompt}
+          alt={alt}
           onLoad={() => setIsLoading(false)}
           className={cn(
             "h-full w-full object-cover transition-opacity duration-500",