@stellartech/image-style-widget-directus 1.0.2 → 1.0.3
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 +67 -0
- package/package.json +7 -1
package/README.md
ADDED
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
# @stellartech/image-style-widget-directus
|
|
2
|
+
|
|
3
|
+
A Directus interface extension that provides a visual style selector and image reviewer for AI-generated content workflows.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- **Style Selection**: Browse and select from predefined styles with example images and prompts
|
|
8
|
+
- **Image Review**: Compare and select between generated image variants
|
|
9
|
+
- **Lightbox View**: Click images to view them in full-size overlay
|
|
10
|
+
- **Prompt Display**: View truncated prompts with full text available
|
|
11
|
+
- **Generation Controls**: Regenerate images and edit prompts directly from the interface
|
|
12
|
+
|
|
13
|
+
## Installation
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
npm install @stellartech/image-style-widget-directus
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
Or add to your Directus extensions folder and build:
|
|
20
|
+
|
|
21
|
+
```bash
|
|
22
|
+
cd extensions/image-style-widget
|
|
23
|
+
npm install
|
|
24
|
+
npm run build
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
## Usage
|
|
28
|
+
|
|
29
|
+
Once installed, the interface will be available in Directus when configuring fields. Select "Image Style Widget" as the interface type for your field.
|
|
30
|
+
|
|
31
|
+
### Style Selection Mode
|
|
32
|
+
|
|
33
|
+
Displays style cards with:
|
|
34
|
+
- Two example images per style
|
|
35
|
+
- Style name and prompt preview
|
|
36
|
+
- Radio selection for choosing a style
|
|
37
|
+
- Option to generate new example images
|
|
38
|
+
|
|
39
|
+
### Image Review Mode
|
|
40
|
+
|
|
41
|
+
Displays image cards with:
|
|
42
|
+
- Two generated image variants side by side
|
|
43
|
+
- Image badges for identification
|
|
44
|
+
- Selection buttons to choose preferred image
|
|
45
|
+
- Actions to edit prompt, regenerate, or delete
|
|
46
|
+
|
|
47
|
+
## Development
|
|
48
|
+
|
|
49
|
+
```bash
|
|
50
|
+
# Install dependencies
|
|
51
|
+
npm install
|
|
52
|
+
|
|
53
|
+
# Build the extension
|
|
54
|
+
npm run build
|
|
55
|
+
|
|
56
|
+
# Watch mode for development
|
|
57
|
+
npm run dev
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
## Requirements
|
|
61
|
+
|
|
62
|
+
- Directus 11.0.0 or higher
|
|
63
|
+
- Vue 3.4.0 or higher
|
|
64
|
+
|
|
65
|
+
## License
|
|
66
|
+
|
|
67
|
+
MIT
|
package/package.json
CHANGED
|
@@ -2,7 +2,13 @@
|
|
|
2
2
|
"name": "@stellartech/image-style-widget-directus",
|
|
3
3
|
"description": "Visual style selector and image reviewer for Directus",
|
|
4
4
|
"icon": "image",
|
|
5
|
-
"version": "1.0.
|
|
5
|
+
"version": "1.0.3",
|
|
6
|
+
"license": "MIT",
|
|
7
|
+
"repository": {
|
|
8
|
+
"type": "git",
|
|
9
|
+
"url": "https://github.com/StellarTechLab/directus-misc.git",
|
|
10
|
+
"directory": "extensions/image-style-widget"
|
|
11
|
+
},
|
|
6
12
|
"type": "module",
|
|
7
13
|
"keywords": [
|
|
8
14
|
"directus",
|