@slopmachine/svelte 0.0.1 → 0.1.0
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 +47 -0
- package/package.json +2 -1
- package/src/SlopImage.svelte +4 -3
package/README.md
ADDED
|
@@ -0,0 +1,47 @@
|
|
|
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
|
+
## Usage
|
|
16
|
+
|
|
17
|
+
```svelte
|
|
18
|
+
<script lang="ts">
|
|
19
|
+
import { SlopImage } from '@slopmachine/svelte';
|
|
20
|
+
</script>
|
|
21
|
+
|
|
22
|
+
<div style="width: 400px; height: 400px;">
|
|
23
|
+
<SlopImage
|
|
24
|
+
prompt={"A cute dog wearing a hat in a {style} style"}
|
|
25
|
+
aspectRatio="1:1"
|
|
26
|
+
variables={{ style: "realistic" }}
|
|
27
|
+
/>
|
|
28
|
+
</div>
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
## API / Props
|
|
32
|
+
|
|
33
|
+
### `SlopImage`
|
|
34
|
+
|
|
35
|
+
The `SlopImage` component inherits standard HTML `<img>` attributes and accepts the following additional props:
|
|
36
|
+
|
|
37
|
+
| Prop | Type | Default | Description |
|
|
38
|
+
| :------------ | :----------------------- | :----------- | :------------------------------------------------------ |
|
|
39
|
+
| `prompt` | `string` | **Required** | The prompt to use for image generation. |
|
|
40
|
+
| `aspectRatio` | `string` | `"1:1"` | The aspect ratio of the image (e.g. `"16:9"`, `"1:1"`). |
|
|
41
|
+
| `variables` | `Record<string, string>` | `{}` | Variables to interpolate into the prompt. |
|
|
42
|
+
| `model` | `string` | `undefined` | The AI model to use for generation. |
|
|
43
|
+
| `baseUrl` | `string` | `undefined` | Custom base URL for the Slop Machine API. |
|
|
44
|
+
|
|
45
|
+
## License
|
|
46
|
+
|
|
47
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@slopmachine/svelte",
|
|
3
|
-
"version": "0.0
|
|
3
|
+
"version": "0.1.0",
|
|
4
4
|
"description": "Svelte wrapper for SlopMachine",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "src/index.ts",
|
|
7
7
|
"svelte": "src/index.ts",
|
|
8
8
|
"exports": {
|
|
9
9
|
".": {
|
|
10
|
+
"types": "./src/index.ts",
|
|
10
11
|
"svelte": "./src/index.ts",
|
|
11
12
|
"default": "./src/index.ts"
|
|
12
13
|
}
|
package/src/SlopImage.svelte
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
-
import { buildImageUrl, 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
|
|
|
@@ -19,6 +19,7 @@
|
|
|
19
19
|
|
|
20
20
|
let src = $derived(buildImageUrl({ prompt, aspectRatio, variables, baseUrl, model }));
|
|
21
21
|
let prevSrc = $state("");
|
|
22
|
+
let alt = $derived(interpolatePrompt( prompt, variables ) ?? "Generated image");
|
|
22
23
|
|
|
23
24
|
$effect(() => {
|
|
24
25
|
if (src !== prevSrc) {
|
|
@@ -59,7 +60,7 @@
|
|
|
59
60
|
|
|
60
61
|
<img
|
|
61
62
|
{src}
|
|
62
|
-
alt
|
|
63
|
+
{alt}
|
|
63
64
|
onload={handleLoad}
|
|
64
65
|
class:loaded={!isLoading}
|
|
65
66
|
{...restProps}
|