@slopmachine/svelte 0.0.2 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +51 -0
- package/package.json +1 -1
- package/src/SlopImage.svelte +32 -3
package/README.md
ADDED
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
# @slopmachine/svelte
|
|
2
|
+
|
|
3
|
+
The official Svelte wrapper for Slop Machine. Easily integrate Slop Machine image generation into your Svelte 5 applications.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @slopmachine/svelte
|
|
9
|
+
# or
|
|
10
|
+
yarn add @slopmachine/svelte
|
|
11
|
+
# or
|
|
12
|
+
pnpm add @slopmachine/svelte
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Demo
|
|
16
|
+
|
|
17
|
+
https://slopmachine-dev.github.io/slopmachine-sdk/svelte/
|
|
18
|
+
|
|
19
|
+
## Usage
|
|
20
|
+
|
|
21
|
+
```svelte
|
|
22
|
+
<script lang="ts">
|
|
23
|
+
import { SlopImage } from '@slopmachine/svelte';
|
|
24
|
+
</script>
|
|
25
|
+
|
|
26
|
+
<div style="width: 400px; height: 400px;">
|
|
27
|
+
<SlopImage
|
|
28
|
+
prompt={"A cute dog wearing a hat in a {style} style"}
|
|
29
|
+
aspectRatio="1:1"
|
|
30
|
+
variables={{ style: "realistic" }}
|
|
31
|
+
/>
|
|
32
|
+
</div>
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
## API / Props
|
|
36
|
+
|
|
37
|
+
### `SlopImage`
|
|
38
|
+
|
|
39
|
+
The `SlopImage` component inherits standard HTML `<img>` attributes and accepts the following additional props:
|
|
40
|
+
|
|
41
|
+
| Prop | Type | Default | Description |
|
|
42
|
+
| :------------ | :----------------------- | :----------- | :------------------------------------------------------ |
|
|
43
|
+
| `prompt` | `string` | **Required** | The prompt to use for image generation. |
|
|
44
|
+
| `aspectRatio` | `string` | `"1:1"` | The aspect ratio of the image (e.g. `"16:9"`, `"1:1"`). |
|
|
45
|
+
| `variables` | `Record<string, string>` | `{}` | Variables to interpolate into the prompt. |
|
|
46
|
+
| `model` | `string` | `undefined` | The AI model to use for generation. |
|
|
47
|
+
| `baseUrl` | `string` | `undefined` | Custom base URL for the Slop Machine API. |
|
|
48
|
+
|
|
49
|
+
## License
|
|
50
|
+
|
|
51
|
+
MIT
|
package/package.json
CHANGED
package/src/SlopImage.svelte
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
-
import { buildImageUrl, interpolatePrompt, type
|
|
2
|
+
import { buildImageUrl, interpolatePrompt, type SlopImageOptions } from "@slopmachine/core";
|
|
3
3
|
|
|
4
|
-
interface Props extends
|
|
4
|
+
interface Props extends SlopImageOptions {
|
|
5
5
|
class?: string;
|
|
6
6
|
}
|
|
7
7
|
|
|
8
8
|
let {
|
|
9
|
+
bucketId,
|
|
9
10
|
prompt,
|
|
10
11
|
aspectRatio = "1:1",
|
|
11
12
|
model,
|
|
@@ -17,7 +18,7 @@
|
|
|
17
18
|
|
|
18
19
|
let isLoading = $state(true);
|
|
19
20
|
|
|
20
|
-
let src = $derived(buildImageUrl({ prompt, aspectRatio, variables, baseUrl, model }));
|
|
21
|
+
let src = $derived(buildImageUrl({ bucketId, prompt, aspectRatio, variables, baseUrl, model }));
|
|
21
22
|
let prevSrc = $state("");
|
|
22
23
|
let alt = $derived(interpolatePrompt( prompt, variables ) ?? "Generated image");
|
|
23
24
|
|
|
@@ -28,9 +29,36 @@
|
|
|
28
29
|
}
|
|
29
30
|
});
|
|
30
31
|
|
|
32
|
+
$effect(() => {
|
|
33
|
+
if (src) {
|
|
34
|
+
fetch(src, { method: 'HEAD' })
|
|
35
|
+
.then(async (res) => {
|
|
36
|
+
if (!res.ok) {
|
|
37
|
+
// console.error(`Failed to load image from ${src}. Status: ${res.status} ${res.statusText}`);
|
|
38
|
+
try {
|
|
39
|
+
const errRes = await fetch(src);
|
|
40
|
+
const errJson = await errRes.json();
|
|
41
|
+
console.error("SlopImage error:",res.status, errJson.error);
|
|
42
|
+
} catch (e) {
|
|
43
|
+
// Failed to fetch or parse error details
|
|
44
|
+
}
|
|
45
|
+
isLoading = false;
|
|
46
|
+
}
|
|
47
|
+
})
|
|
48
|
+
.catch((err) => {
|
|
49
|
+
console.error(`Error fetching image from ${src}:`, err);
|
|
50
|
+
isLoading = false;
|
|
51
|
+
});
|
|
52
|
+
}
|
|
53
|
+
});
|
|
54
|
+
|
|
31
55
|
function handleLoad() {
|
|
32
56
|
isLoading = false;
|
|
33
57
|
}
|
|
58
|
+
|
|
59
|
+
function handleError() {
|
|
60
|
+
isLoading = false;
|
|
61
|
+
}
|
|
34
62
|
</script>
|
|
35
63
|
|
|
36
64
|
<div
|
|
@@ -62,6 +90,7 @@
|
|
|
62
90
|
{src}
|
|
63
91
|
{alt}
|
|
64
92
|
onload={handleLoad}
|
|
93
|
+
onerror={handleError}
|
|
65
94
|
class:loaded={!isLoading}
|
|
66
95
|
{...restProps}
|
|
67
96
|
/>
|