@slopmachine/svelte 0.1.25 → 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,12 @@
+# @slopmachine/svelte
+
+## 0.2.0
+
+### Minor Changes
+
+- 15b923d: Switch pipeline execution parameters to use pipelineId (with optional siloId) instead of pipelineKey.
+
+### Patch Changes
+
+- Updated dependencies [15b923d]
+  - @slopmachine/core@0.2.0

package/README.md

@@ -1,15 +1,15 @@
 # @slopmachine/svelte
 
-The official Svelte wrapper for Slop Machine. Easily integrate Slop Machine image generation into your Svelte 5 applications.
+The official Svelte SDK for Slop Machine. Easily integrate Slop Machine image, video, and text generation into your Svelte 5 applications.
 
 ## Installation
 
 ```bash
-npm install @slopmachine/svelte
+npm install @slopmachine/svelte @slopmachine/core
 # or
-yarn add @slopmachine/svelte
+yarn add @slopmachine/svelte @slopmachine/core
 # or
-pnpm add @slopmachine/svelte
+pnpm add @slopmachine/svelte @slopmachine/core
 ```
 
 ## Demo
@@ -18,33 +18,66 @@ https://docs.slopmachine.dev/demo-svelte/
 
 ## Usage
 
+### 1. Using Pre-Templated Buckets
+
 ```svelte
 <script lang="ts">
-  import { SlopImage } from "@slopmachine/svelte";
+  import { SlopImage, SlopVideo, SlopText } from "@slopmachine/svelte";
 </script>
 
-<div style="width: 400px; height: 400px;">
+<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
   <SlopImage
-    prompt={"A cute dog wearing a hat in a {style} style"}
+    bucketId="my-bucket-id"
     aspectRatio="1:1"
-    variables={{ style: "realistic" }}
+    variables={{ style: "realistic", character: "owl" }}
+    class="rounded-lg shadow"
+  />
+
+  <SlopVideo
+    bucketId="my-video-bucket"
+    aspectRatio="16:9"
+    duration={4}
+    autoplay
+    loop
+    muted
+  />
+
+  <SlopText
+    bucketId="my-text-bucket"
+    variables={{ item: "magical sword" }}
   />
 </div>
 ```
 
-## API / Props
+### 2. Using Dynamic Multi-Step Pipelines
+
+Pipelines give developers runtime prompt flexibility and multi-step AI chaining:
+
+```svelte
+<script lang="ts">
+  import { SlopImage, SlopVideo, SlopText } from "@slopmachine/svelte";
+</script>
 
-### `SlopImage`
+<div>
+  <SlopImage
+    pipelineId="pipe_live_abc123"
+    prompt="A futuristic neon marketplace in Tokyo at dusk"
+    aspectRatio="16:9"
+    metadata={{ source: "user-generated-content" }}
+  />
 
-The `SlopImage` component inherits standard HTML `<img>` attributes and accepts the following additional props:
+  <SlopVideo
+    pipelineId="pipe_live_def456"
+    prompt="Hyperlapse sunset over Martian red sand dunes"
+    aspectRatio="9:16"
+  />
 
-| 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.               |
+  <SlopText
+    pipelineId="pipe_live_ghi789"
+    prompt="Write an intro paragraph for a sci-fi novel about sentient houseplants"
+  />
+</div>
+```
 
 ## License
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slopmachine/svelte",
-  "version": "0.1.25",
+  "version": "0.2.0",
   "llms": "https://docs.slopmachine.dev/llms.txt",
   "llmsFull": "https://docs.slopmachine.dev/llms-full.txt",
   "description": "The official Svelte SDK for Slop Machine",
@@ -19,7 +19,7 @@
     "url": "git+https://github.com/slopmachine-dev/slopmachine-sdk.git"
   },
   "dependencies": {
-    "@slopmachine/core": "^0.1.25",
+    "@slopmachine/core": "^0.2.0",
     "@types/marked": "^5.0.2",
     "marked": "^17.0.4"
   },

package/src/SlopImage.svelte

@@ -15,7 +15,7 @@
   />
   ```
 
-  @version 0.1.25
+  @version 0.2.0
 -->
 <script lang="ts">
   import {
@@ -50,13 +50,18 @@
      * Additional CSS classes to apply directly to the `<img />` element.
      */
     imageClass?: string;
+    [key: string]: any;
   }
 
   let {
-    bucketId,
+    bucketId = undefined,
+    pipelineId = undefined,
+    siloId = undefined,
+    prompt = undefined,
+    metadata = undefined,
     aspectRatio = "1:1",
-    version,
-    resultId,
+    version = undefined,
+    resultId = undefined,
     quality = "fast",
     variables = {},
     baseUrl = undefined,
@@ -66,6 +71,8 @@
     objectFit = "cover",
     imageClass = "",
     loader,
+    onload,
+    onerror,
     ...restProps
   }: SlopImageProps = $props();
 
@@ -74,6 +81,10 @@
   let computedSrc = $derived(
     buildImageUrl({
       bucketId,
+      pipelineId,
+      siloId,
+      prompt,
+      metadata,
       aspectRatio,
       version,
       resultId,
@@ -142,12 +153,14 @@
     }
   });
 
-  function handleLoad() {
+  function handleLoad(e: Event) {
     isLoading = false;
+    onload?.(e);
   }
 
-  function handleError() {
+  function handleError(e: Event) {
     isLoading = false;
+    onerror?.(e);
   }
 </script>
 
@@ -193,10 +206,10 @@
       {src}
       {alt}
       style="object-fit: {objectFit};"
-      onload={handleLoad}
-      onerror={handleError}
       class="slop-image {imageClass} {isLoading ? '' : 'loaded'}"
       {...restProps}
+      onload={handleLoad}
+      onerror={handleError}
     />
   </div>
 </div>

package/src/SlopText.svelte

@@ -23,11 +23,15 @@
    * </SlopText>
    * ```
    *
-   * @version 0.1.25
+   * @version 0.2.0
    */
   interface Props {
     // SlopTextOptions
-    bucketId: string;
+    bucketId?: string | undefined;
+    pipelineId?: string | undefined;
+    siloId?: string | undefined;
+    prompt?: string | undefined;
+    metadata?: Record<string, any> | undefined;
     version?: number | undefined;
     resultId?: string | undefined;
     model?: string | undefined;
@@ -42,7 +46,11 @@
   }
 
   let {
-    bucketId,
+    bucketId = undefined,
+    pipelineId = undefined,
+    siloId = undefined,
+    prompt = undefined,
+    metadata = undefined,
     version = undefined,
     resultId = undefined,
     model = undefined,
@@ -70,6 +78,10 @@
 
         const url = buildTextUrl({
           bucketId,
+          pipelineId,
+          siloId,
+          prompt,
+          metadata,
           version,
           resultId,
           variables,

package/src/SlopVideo.svelte

@@ -18,7 +18,7 @@
   />
   ```
 
-  @version 0.1.25
+  @version 0.2.0
 -->
 <script lang="ts">
   import {
@@ -53,10 +53,14 @@
   }
 
   let {
-    bucketId,
+    bucketId = undefined,
+    pipelineId = undefined,
+    siloId = undefined,
+    prompt = undefined,
+    metadata = undefined,
     aspectRatio = "16:9",
-    version,
-    resultId,
+    version = undefined,
+    resultId = undefined,
     model,
     quality = "fast",
     variables = {},
@@ -70,6 +74,8 @@
     loop = true,
     muted = true,
     playsinline = true,
+    onloadeddata,
+    onerror,
     ...restProps
   }: SlopVideoProps = $props();
 
@@ -78,6 +84,10 @@
   let computedSrc = $derived(
     buildVideoUrl({
       bucketId,
+      pipelineId,
+      siloId,
+      prompt,
+      metadata,
       aspectRatio,
       version,
       resultId,
@@ -146,12 +156,14 @@
     }
   });
 
-  function handleLoadedData() {
+  function handleLoadedData(e: Event) {
     isLoading = false;
+    onloadeddata?.(e);
   }
 
-  function handleError() {
+  function handleError(e: Event) {
     isLoading = false;
+    onerror?.(e);
   }
 </script>
 
@@ -200,10 +212,10 @@
       {loop}
       {muted}
       {playsinline}
-      onloadeddata={handleLoadedData}
-      onerror={handleError}
       class:loaded={!isLoading}
       {...restProps}
+      onloadeddata={handleLoadedData}
+      onerror={handleError}
     ></video>
   </div>
 </div>