use-vibes 0.3.0 → 0.4.2
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 +153 -1
- package/package.json +28 -7
- package/dist/components/ImgGen.d.ts +0 -22
- package/dist/components/ImgGen.js +0 -168
- package/dist/components/ImgGen.js.map +0 -1
- package/dist/index.d.ts +0 -4
- package/dist/index.js +0 -6
- package/dist/index.js.map +0 -1
package/README.md
CHANGED
|
@@ -8,6 +8,34 @@ A lightweight library that transforms any DOM element into an AI-powered micro-a
|
|
|
8
8
|
pnpm add use-vibes
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
+
### CSS Loading
|
|
12
|
+
|
|
13
|
+
The ImgGen component requires CSS styles. You can include them in two ways:
|
|
14
|
+
|
|
15
|
+
#### Option A: Explicit CSS link (recommended for production)
|
|
16
|
+
|
|
17
|
+
Add a CSS link tag to your HTML:
|
|
18
|
+
|
|
19
|
+
```html
|
|
20
|
+
<link rel="stylesheet" href="/node_modules/use-vibes/dist/components/ImgGen.css" />
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
Or for ESM/CDN environments like importmap scenarios:
|
|
24
|
+
|
|
25
|
+
```html
|
|
26
|
+
<link rel="stylesheet" href="https://esm.sh/use-vibes@0.4.0/components/ImgGen.css" />
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
#### Option B: Automatic CSS loading (convenient for prototyping)
|
|
30
|
+
|
|
31
|
+
Import the style-loader early in your application:
|
|
32
|
+
|
|
33
|
+
```js
|
|
34
|
+
import 'use-vibes/style-loader'; // Auto-loads CSS when imported
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
This approach is perfect for quick prototypes but for production sites, Option A gives you better control over CSS loading order and timing.
|
|
38
|
+
|
|
11
39
|
## Components
|
|
12
40
|
|
|
13
41
|
### ImgGen
|
|
@@ -28,10 +56,121 @@ function MyComponent() {
|
|
|
28
56
|
|
|
29
57
|
#### Props
|
|
30
58
|
|
|
31
|
-
- `prompt`: Text prompt for image generation (required)
|
|
59
|
+
- `prompt`: Text prompt for image generation (required unless `_id` is provided)
|
|
60
|
+
- `_id`: Document ID to load a specific image instead of generating a new one
|
|
32
61
|
- `options`: Options for image generation (optional)
|
|
33
62
|
- `className`: CSS class name for the image element (optional)
|
|
34
63
|
- `alt`: Alt text for the image (defaults to prompt)
|
|
64
|
+
- `overlay`: Whether to show overlay controls and info button (default: `true`)
|
|
65
|
+
- `database`: Database name or instance to use for storing images (default: `'ImgGen'`)
|
|
66
|
+
- `onLoad`: Callback when image load completes successfully
|
|
67
|
+
- `onError`: Callback when image load fails, receives the error as parameter
|
|
68
|
+
- `onDelete`: Callback when an image is deleted, receives the document ID
|
|
69
|
+
- `onPromptEdit`: Callback when the prompt is edited, receives document ID and new prompt
|
|
70
|
+
- `editedPrompt`: Custom prompt text to use for regeneration (overrides document prompt)
|
|
71
|
+
- `generationId`: Optional ID to trigger regeneration of existing images
|
|
72
|
+
- `classes`: Object containing custom CSS classes for styling component parts (see Styling section)
|
|
73
|
+
|
|
74
|
+
#### Features
|
|
75
|
+
|
|
76
|
+
##### Overlay Controls
|
|
77
|
+
|
|
78
|
+
By default, the ImgGen component shows an info button in the bottom-left corner. Clicking it reveals an overlay with:
|
|
79
|
+
|
|
80
|
+
- The prompt text (double-clickable to edit)
|
|
81
|
+
- Version navigation buttons (if multiple versions exist)
|
|
82
|
+
- Refresh button to generate a new version
|
|
83
|
+
- Delete button
|
|
84
|
+
|
|
85
|
+
Setting `overlay={false}` will hide all these controls, showing only the image.
|
|
86
|
+
|
|
87
|
+
##### Prompt Editing
|
|
88
|
+
|
|
89
|
+
Double-click the prompt text in the overlay to edit it. Press Enter to submit changes and regenerate the image with the new prompt.
|
|
90
|
+
|
|
91
|
+
##### Image Regeneration
|
|
92
|
+
|
|
93
|
+
When regenerating images, the component will:
|
|
94
|
+
|
|
95
|
+
- Use the edited prompt if one has been provided (via `editedPrompt` prop, `onPromptEdit` callback, or direct editing in the UI)
|
|
96
|
+
- Fall back to the original prompt from the document if no edits were made
|
|
97
|
+
- Preserve versions under the same document ID to maintain history
|
|
98
|
+
- Add the new image as a version to the existing document instead of creating a new one
|
|
99
|
+
|
|
100
|
+
This allows for iterative refinement of images while maintaining version history.
|
|
101
|
+
|
|
102
|
+
#### Styling
|
|
103
|
+
|
|
104
|
+
The ImgGen component uses CSS custom properties (variables) for styling, making it easy to customize the appearance while maintaining consistency. There are two primary ways to customize styling:
|
|
105
|
+
|
|
106
|
+
##### 1. CSS Variables
|
|
107
|
+
|
|
108
|
+
Override the default styles by setting CSS custom properties in your CSS:
|
|
109
|
+
|
|
110
|
+
```css
|
|
111
|
+
/* In your CSS file */
|
|
112
|
+
:root {
|
|
113
|
+
--imggen-text-color: #222;
|
|
114
|
+
--imggen-overlay-bg: rgba(245, 245, 245, 0.85);
|
|
115
|
+
--imggen-accent: #0088ff;
|
|
116
|
+
--imggen-border-radius: 4px;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
/* Dark theme example */
|
|
120
|
+
.dark-theme {
|
|
121
|
+
--imggen-text-color: #f0f0f0;
|
|
122
|
+
--imggen-overlay-bg: rgba(25, 25, 25, 0.85);
|
|
123
|
+
--imggen-accent: #66b2ff;
|
|
124
|
+
}
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
##### 2. Custom Classes
|
|
128
|
+
|
|
129
|
+
For more granular control, provide a `classes` object with custom CSS classes for specific component parts:
|
|
130
|
+
|
|
131
|
+
```jsx
|
|
132
|
+
<ImgGen
|
|
133
|
+
prompt="A futuristic cityscape"
|
|
134
|
+
classes={{
|
|
135
|
+
root: 'my-custom-container',
|
|
136
|
+
image: 'rounded-xl shadow-lg',
|
|
137
|
+
overlay: 'bg-slate-800/70 text-white',
|
|
138
|
+
progress: 'h-2 bg-green-500',
|
|
139
|
+
button: 'hover:bg-blue-600',
|
|
140
|
+
}}
|
|
141
|
+
/>
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
The component uses these classes in addition to the default ones, allowing you to extend or override styles as needed.
|
|
145
|
+
|
|
146
|
+
##### Available CSS Variables
|
|
147
|
+
|
|
148
|
+
| Variable | Default | Description |
|
|
149
|
+
| ------------------------ | -------------------------- | --------------------------------- |
|
|
150
|
+
| `--imggen-text-color` | `#333` | Main text color |
|
|
151
|
+
| `--imggen-background` | `#333333` | Background color for placeholder |
|
|
152
|
+
| `--imggen-overlay-bg` | `rgba(255, 255, 255, 0.5)` | Overlay panel background |
|
|
153
|
+
| `--imggen-accent` | `#0066cc` | Accent color (progress bar, etc.) |
|
|
154
|
+
| `--imggen-error-text` | `#ff6666` | Error message text color |
|
|
155
|
+
| `--imggen-border-radius` | `8px` | Border radius for containers |
|
|
156
|
+
| `--imggen-button-bg` | `rgba(255, 255, 255, 0.7)` | Button background color |
|
|
157
|
+
| `--imggen-font-size` | `14px` | Default font size |
|
|
158
|
+
|
|
159
|
+
##### Available Class Slots
|
|
160
|
+
|
|
161
|
+
| Class Property | Description |
|
|
162
|
+
| --------------- | -------------------------------- |
|
|
163
|
+
| `root` | Main container element |
|
|
164
|
+
| `image` | The image element |
|
|
165
|
+
| `container` | Container for image and controls |
|
|
166
|
+
| `overlay` | Overlay panel with controls |
|
|
167
|
+
| `progress` | Progress indicator |
|
|
168
|
+
| `placeholder` | Placeholder shown during loading |
|
|
169
|
+
| `error` | Error message container |
|
|
170
|
+
| `controls` | Control buttons container |
|
|
171
|
+
| `button` | Individual buttons |
|
|
172
|
+
| `prompt` | Prompt text/input container |
|
|
173
|
+
| `deleteOverlay` | Delete confirmation dialog |
|
|
35
174
|
|
|
36
175
|
## Development
|
|
37
176
|
|
|
@@ -46,6 +185,19 @@ pnpm build
|
|
|
46
185
|
pnpm test
|
|
47
186
|
```
|
|
48
187
|
|
|
188
|
+
### Testing Notes
|
|
189
|
+
|
|
190
|
+
When writing tests for components that use the image generation functionality:
|
|
191
|
+
|
|
192
|
+
- Use the provided mock implementations for `call-ai` and `use-fireproof`
|
|
193
|
+
- Wrap React state updates in `act()` to prevent test warnings
|
|
194
|
+
- Use `vi.useFakeTimers()` and `vi.advanceTimersByTime()` to control async behavior
|
|
195
|
+
- Be aware that `imageGen` API calls need to be properly mocked
|
|
196
|
+
|
|
197
|
+
### Browser Compatibility
|
|
198
|
+
|
|
199
|
+
This library is compatible with all modern browsers that support React 18+ and ES6 features.
|
|
200
|
+
|
|
49
201
|
## License
|
|
50
202
|
|
|
51
203
|
MIT
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "use-vibes",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.4.2",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Transform any DOM element into an AI-powered micro-app",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -8,10 +8,16 @@
|
|
|
8
8
|
"types": "dist/index.d.ts",
|
|
9
9
|
"exports": {
|
|
10
10
|
".": {
|
|
11
|
+
"types": "./dist/index.d.ts",
|
|
11
12
|
"import": "./dist/index.js",
|
|
12
|
-
"require": "./dist/index.js"
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
"require": "./dist/index.js"
|
|
14
|
+
},
|
|
15
|
+
"./style-loader": {
|
|
16
|
+
"types": "./dist/style-loader.d.ts",
|
|
17
|
+
"import": "./dist/style-loader.js",
|
|
18
|
+
"require": "./dist/style-loader.js"
|
|
19
|
+
},
|
|
20
|
+
"./components/ImgGen.css": "./dist/components/ImgGen.css"
|
|
15
21
|
},
|
|
16
22
|
"files": [
|
|
17
23
|
"dist"
|
|
@@ -28,7 +34,9 @@
|
|
|
28
34
|
"author": "",
|
|
29
35
|
"license": "MIT",
|
|
30
36
|
"dependencies": {
|
|
31
|
-
"call-ai": "^0.10.
|
|
37
|
+
"call-ai": "^0.10.1",
|
|
38
|
+
"use-fireproof": "^0.20.4",
|
|
39
|
+
"uuid": "^11.1.0"
|
|
32
40
|
},
|
|
33
41
|
"peerDependencies": {
|
|
34
42
|
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
|
@@ -37,19 +45,32 @@
|
|
|
37
45
|
"@testing-library/jest-dom": "^6.6.3",
|
|
38
46
|
"@testing-library/react": "^16.3.0",
|
|
39
47
|
"@types/react": "^19.1.0",
|
|
48
|
+
"@types/react-dom": "^19.1.2",
|
|
49
|
+
"@typescript-eslint/eslint-plugin": "^8.32.1",
|
|
50
|
+
"@typescript-eslint/parser": "^8.32.1",
|
|
40
51
|
"@vitejs/plugin-react": "^4.4.1",
|
|
41
52
|
"eslint": "^8.56.0",
|
|
53
|
+
"eslint-plugin-import": "^2.31.0",
|
|
54
|
+
"eslint-plugin-react": "^7.37.5",
|
|
42
55
|
"jsdom": "^26.1.0",
|
|
56
|
+
"prettier": "^3.5.3",
|
|
57
|
+
"react-dom": "^19.1.0",
|
|
43
58
|
"rimraf": "^5.0.5",
|
|
44
59
|
"typescript": "^5.3.3",
|
|
45
60
|
"vitest": "^1.2.2"
|
|
46
61
|
},
|
|
47
62
|
"scripts": {
|
|
48
|
-
"build": "tsc",
|
|
63
|
+
"build": "pnpm clean && tsc && pnpm copy-css",
|
|
64
|
+
"copy-css": "mkdir -p dist/components && cp src/components/ImgGen.css dist/components/",
|
|
65
|
+
"build:watch": "tsc --watch",
|
|
66
|
+
"dev:build": "tsc --watch",
|
|
49
67
|
"lint": "eslint src --ext .ts,.tsx",
|
|
68
|
+
"lint:fix": "eslint src --ext .ts,.tsx --fix --rule 'no-unused-vars: 1' --rule 'no-empty: 1' --rule '@typescript-eslint/no-unused-vars: 1'",
|
|
69
|
+
"format": "prettier --write \"./**/*.{js,jsx,ts,tsx,json,md}\"",
|
|
50
70
|
"test": "vitest run",
|
|
51
71
|
"test:watch": "vitest",
|
|
52
72
|
"clean": "rimraf dist",
|
|
53
|
-
"typecheck": "tsc --noEmit"
|
|
73
|
+
"typecheck": "tsc --noEmit",
|
|
74
|
+
"check": "pnpm lint && pnpm format && pnpm typecheck && pnpm test"
|
|
54
75
|
}
|
|
55
76
|
}
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import type { ImageGenOptions, ImageResponse } from 'call-ai';
|
|
3
|
-
export interface ImgGenProps {
|
|
4
|
-
/** Text prompt for image generation (required) */
|
|
5
|
-
prompt: string;
|
|
6
|
-
/** Options for image generation (optional) */
|
|
7
|
-
options?: ImageGenOptions;
|
|
8
|
-
/** Callback to retrieve cached data before load (optional) */
|
|
9
|
-
beforeLoad?: (key: string) => ImageResponse | null | Promise<ImageResponse | null>;
|
|
10
|
-
/** Callback when image data is loaded (optional) */
|
|
11
|
-
onLoad?: (response: ImageResponse) => void;
|
|
12
|
-
/** CSS class name for the image element (optional) */
|
|
13
|
-
className?: string;
|
|
14
|
-
/** Alt text for the image (defaults to prompt) */
|
|
15
|
-
alt?: string;
|
|
16
|
-
}
|
|
17
|
-
/**
|
|
18
|
-
* React component for generating images with call-ai's imageGen
|
|
19
|
-
* Provides automatic caching, reactive updates, and placeholder handling
|
|
20
|
-
*/
|
|
21
|
-
export declare const ImgGen: React.FC<ImgGenProps>;
|
|
22
|
-
export default ImgGen;
|
|
@@ -1,168 +0,0 @@
|
|
|
1
|
-
import React, { useEffect, useState, useRef } from 'react';
|
|
2
|
-
import { imageGen } from 'call-ai';
|
|
3
|
-
/**
|
|
4
|
-
* Hash function to create a key from the prompt string
|
|
5
|
-
* @param prompt The prompt string to hash
|
|
6
|
-
* @returns A string hash of the prompt
|
|
7
|
-
*/
|
|
8
|
-
function hashPrompt(prompt) {
|
|
9
|
-
let hash = 0;
|
|
10
|
-
for (let i = 0; i < prompt.length; i++) {
|
|
11
|
-
const char = prompt.charCodeAt(i);
|
|
12
|
-
hash = (hash << 5) - hash + char;
|
|
13
|
-
hash = hash & hash; // Convert to 32bit integer
|
|
14
|
-
}
|
|
15
|
-
return hash.toString(16);
|
|
16
|
-
}
|
|
17
|
-
// Default cache implementation using localStorage
|
|
18
|
-
const defaultCacheImpl = {
|
|
19
|
-
get: (key) => {
|
|
20
|
-
try {
|
|
21
|
-
const data = localStorage.getItem(`imggen-${key}`);
|
|
22
|
-
return data ? JSON.parse(data) : null;
|
|
23
|
-
}
|
|
24
|
-
catch (e) {
|
|
25
|
-
console.error('Error retrieving from ImgGen cache', e);
|
|
26
|
-
return null;
|
|
27
|
-
}
|
|
28
|
-
},
|
|
29
|
-
set: (key, value) => {
|
|
30
|
-
try {
|
|
31
|
-
localStorage.setItem(`imggen-${key}`, JSON.stringify(value));
|
|
32
|
-
}
|
|
33
|
-
catch (e) {
|
|
34
|
-
console.error('Error storing in ImgGen cache', e);
|
|
35
|
-
}
|
|
36
|
-
},
|
|
37
|
-
};
|
|
38
|
-
/**
|
|
39
|
-
* React component for generating images with call-ai's imageGen
|
|
40
|
-
* Provides automatic caching, reactive updates, and placeholder handling
|
|
41
|
-
*/
|
|
42
|
-
export const ImgGen = ({ prompt, options = {}, beforeLoad, onLoad, className = '', alt, }) => {
|
|
43
|
-
const [imageData, setImageData] = useState(null);
|
|
44
|
-
const [loading, setLoading] = useState(false);
|
|
45
|
-
const [progress, setProgress] = useState(0);
|
|
46
|
-
const [error, setError] = useState(null);
|
|
47
|
-
const progressTimerRef = useRef(null);
|
|
48
|
-
const promptKey = hashPrompt(prompt);
|
|
49
|
-
const size = options?.size || '1024x1024';
|
|
50
|
-
const [width, height] = size.split('x').map(Number);
|
|
51
|
-
// Reset state when prompt or options change
|
|
52
|
-
useEffect(() => {
|
|
53
|
-
setImageData(null);
|
|
54
|
-
setError(null);
|
|
55
|
-
setProgress(0);
|
|
56
|
-
// Clear any existing progress timer
|
|
57
|
-
if (progressTimerRef.current) {
|
|
58
|
-
clearInterval(progressTimerRef.current);
|
|
59
|
-
progressTimerRef.current = null;
|
|
60
|
-
}
|
|
61
|
-
// Set up progress timer simulation (45 seconds to completion)
|
|
62
|
-
// This is just for visual feedback and doesn't reflect actual progress
|
|
63
|
-
const timer = setInterval(() => {
|
|
64
|
-
setProgress((prev) => {
|
|
65
|
-
const next = prev + (100 - prev) * 0.05;
|
|
66
|
-
return next > 99 ? 99 : next;
|
|
67
|
-
});
|
|
68
|
-
}, 1000);
|
|
69
|
-
progressTimerRef.current = timer;
|
|
70
|
-
// Cleanup on unmount or when dependencies change
|
|
71
|
-
return () => {
|
|
72
|
-
if (progressTimerRef.current) {
|
|
73
|
-
clearInterval(progressTimerRef.current);
|
|
74
|
-
}
|
|
75
|
-
};
|
|
76
|
-
}, [prompt, JSON.stringify(options)]);
|
|
77
|
-
// Generate the image when prompt or options change
|
|
78
|
-
useEffect(() => {
|
|
79
|
-
let isMounted = true;
|
|
80
|
-
// Don't generate image if prompt is falsy
|
|
81
|
-
if (!prompt) {
|
|
82
|
-
setLoading(false);
|
|
83
|
-
return;
|
|
84
|
-
}
|
|
85
|
-
const generateImage = async () => {
|
|
86
|
-
try {
|
|
87
|
-
setLoading(true);
|
|
88
|
-
// Try to get from cache via the beforeLoad callback if provided
|
|
89
|
-
let data = null;
|
|
90
|
-
if (beforeLoad) {
|
|
91
|
-
data = await beforeLoad(promptKey);
|
|
92
|
-
}
|
|
93
|
-
else {
|
|
94
|
-
// Use default cache implementation
|
|
95
|
-
data = defaultCacheImpl.get(promptKey);
|
|
96
|
-
}
|
|
97
|
-
// If no data in cache, generate new image
|
|
98
|
-
if (!data) {
|
|
99
|
-
// Use the actual imageGen function from call-ai
|
|
100
|
-
data = await imageGen(prompt, options);
|
|
101
|
-
// Cache the result using default implementation
|
|
102
|
-
// if beforeLoad wasn't provided
|
|
103
|
-
if (!beforeLoad) {
|
|
104
|
-
defaultCacheImpl.set(promptKey, data);
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
|
-
// Update state with the image data
|
|
108
|
-
if (isMounted && data) {
|
|
109
|
-
setImageData(data.data[0].b64_json);
|
|
110
|
-
setProgress(100);
|
|
111
|
-
// Clear progress timer
|
|
112
|
-
if (progressTimerRef.current) {
|
|
113
|
-
clearInterval(progressTimerRef.current);
|
|
114
|
-
progressTimerRef.current = null;
|
|
115
|
-
}
|
|
116
|
-
// Call onLoad callback if provided
|
|
117
|
-
if (onLoad) {
|
|
118
|
-
onLoad(data);
|
|
119
|
-
}
|
|
120
|
-
}
|
|
121
|
-
}
|
|
122
|
-
catch (err) {
|
|
123
|
-
if (isMounted) {
|
|
124
|
-
setError(err instanceof Error ? err : new Error(String(err)));
|
|
125
|
-
}
|
|
126
|
-
}
|
|
127
|
-
finally {
|
|
128
|
-
if (isMounted) {
|
|
129
|
-
setLoading(false);
|
|
130
|
-
}
|
|
131
|
-
}
|
|
132
|
-
};
|
|
133
|
-
generateImage();
|
|
134
|
-
return () => {
|
|
135
|
-
isMounted = false;
|
|
136
|
-
};
|
|
137
|
-
}, [prompt, JSON.stringify(options), promptKey, beforeLoad, onLoad]);
|
|
138
|
-
// Render placeholder while loading
|
|
139
|
-
if (loading || !imageData) {
|
|
140
|
-
return (React.createElement("div", { className: `img-gen-placeholder ${className}`, style: {
|
|
141
|
-
width: `${width}px`,
|
|
142
|
-
height: `${height}px`,
|
|
143
|
-
backgroundColor: '#f0f0f0',
|
|
144
|
-
position: 'relative',
|
|
145
|
-
overflow: 'hidden',
|
|
146
|
-
display: 'flex',
|
|
147
|
-
alignItems: 'center',
|
|
148
|
-
justifyContent: 'center',
|
|
149
|
-
} },
|
|
150
|
-
React.createElement("div", { style: {
|
|
151
|
-
position: 'absolute',
|
|
152
|
-
bottom: 0,
|
|
153
|
-
left: 0,
|
|
154
|
-
height: '4px',
|
|
155
|
-
width: `${progress}%`,
|
|
156
|
-
backgroundColor: '#0066cc',
|
|
157
|
-
transition: 'width 0.3s ease-in-out',
|
|
158
|
-
} }),
|
|
159
|
-
React.createElement("div", { style: { textAlign: 'center', padding: '10px' } }, error ? (React.createElement("div", { className: "img-gen-error" },
|
|
160
|
-
React.createElement("p", null,
|
|
161
|
-
"Error: ",
|
|
162
|
-
error.message))) : !prompt ? (React.createElement("div", null, "Waiting for prompt")) : (React.createElement("div", null, "Generating image...")))));
|
|
163
|
-
}
|
|
164
|
-
// Render the generated image
|
|
165
|
-
return (React.createElement("img", { src: `data:image/png;base64,${imageData}`, className: `img-gen ${className}`, alt: alt || prompt, width: width, height: height, style: { maxWidth: '100%' } }));
|
|
166
|
-
};
|
|
167
|
-
export default ImgGen;
|
|
168
|
-
//# sourceMappingURL=ImgGen.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ImgGen.js","sourceRoot":"","sources":["../../src/components/ImgGen.tsx"],"names":[],"mappings":"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"}
|
package/dist/index.d.ts
DELETED
package/dist/index.js
DELETED
package/dist/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,sDAAsD;AACtD,OAAO,EAAE,QAAQ,EAA4C,MAAM,SAAS,CAAC;AAC7E,OAAO,EAAE,QAAQ,EAA4C,CAAC;AAE9D,0BAA0B;AAC1B,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qBAAqB,CAAC"}
|