picture-it 0.2.0 → 0.2.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.
Files changed (27) hide show
  1. package/README.md +110 -29
  2. package/dist/index.js +4870 -0
  3. package/fonts/DMSerifDisplay-Regular.ttf +0 -0
  4. package/fonts/Inter-Bold.ttf +0 -0
  5. package/fonts/Inter-Regular.ttf +0 -0
  6. package/fonts/Inter-SemiBold.ttf +0 -0
  7. package/fonts/SpaceGrotesk-Bold.ttf +0 -0
  8. package/fonts/SpaceGrotesk-Medium.ttf +0 -0
  9. package/hero-v2.png +0 -0
  10. package/package.json +9 -8
  11. package/hero.png +0 -0
  12. package/index.ts +0 -493
  13. package/scripts/download-fonts.ts +0 -14
  14. package/src/compositor.ts +0 -614
  15. package/src/config.ts +0 -102
  16. package/src/contrast.ts +0 -155
  17. package/src/fal.ts +0 -218
  18. package/src/fonts.ts +0 -165
  19. package/src/model-router.ts +0 -78
  20. package/src/operations.ts +0 -85
  21. package/src/pipeline.ts +0 -243
  22. package/src/postprocess.ts +0 -124
  23. package/src/presets.ts +0 -105
  24. package/src/satori-jsx.ts +0 -17
  25. package/src/templates/index.ts +0 -457
  26. package/src/types.ts +0 -226
  27. package/src/zones.ts +0 -63
package/README.md CHANGED
@@ -1,23 +1,41 @@
1
1
  # picture-it
2
2
 
3
- ![picture-it hero](hero.png)
3
+ ![picture-it hero](hero-v2.png)
4
4
 
5
5
  Photoshop for AI agents. Composable image operations from the CLI.
6
6
 
7
7
  Each command takes an image in, does one thing, and outputs an image. Chain them together to build any visual.
8
8
 
9
+ ## Samples
10
+
11
+ | | |
12
+ | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
13
+ | ![YouTube Thumbnail](samples/youtube-thumbnail.png) | ![iPhone Comparison](samples/iphone-comparison.png) |
14
+ | **YouTube Thumbnail** — `generate` → `edit` → `crop` | **Product Comparison** — `generate` bg → `remove-bg` × 2 → `compose` |
15
+ | Text behind subject, readable at any size. FAL renders the text as part of the scene so it interacts with depth. | Uses original Apple product images. AI edit models alter product details, so `remove-bg` from a trusted source image and compositing is the reliable path for product blogs. |
16
+ | ![Magazine Cover](samples/magazine-cover.png) | ![Movie Poster](samples/movie-poster.png) |
17
+ | **Magazine Cover** — `generate` → `edit` → `compose` | **Sci-Fi Movie Poster** — `generate` → `edit` → `compose` → `grade` |
18
+ | AI-generated portrait with Satori-rendered masthead, headlines, and credits layered on top. Pixel-perfect typography over AI art. | Multi-pass: Flux generates the scene, SeedDream adds volumetric fog, Satori renders the title and credits. Cinematic grade finishes it. |
19
+ | ![Hoka Mach 7](samples/hoka-mach7-social.png) | |
20
+ | **Product Social Ad** — `generate` → `edit` → `compose` → `grade` → `vignette` | |
21
+ | 4-pass workflow: Flux Dev generates floating shoe scene, SeedDream places "MACH 7" text behind the shoe for 3D depth, Satori renders product info overlay, then cool-tech grade + vignette. | |
22
+
9
23
  ## Install
10
24
 
25
+ Requires Node.js 18+.
26
+
11
27
  ```bash
28
+ npm install -g picture-it
29
+ pnpm add -g picture-it
12
30
  bun install -g picture-it
13
31
  ```
14
32
 
15
- Requires Bun 1.3+.
16
-
17
- One-off usage also works:
33
+ One-off usage:
18
34
 
19
35
  ```bash
20
36
  bunx picture-it@latest info -i image.png
37
+ pnpm dlx picture-it@latest info -i image.png
38
+ npx picture-it@latest info -i image.png
21
39
  ```
22
40
 
23
41
  ## Setup
@@ -120,8 +138,16 @@ picture-it pipeline --spec steps.json -o final.png
120
138
 
121
139
  ```json
122
140
  [
123
- { "op": "generate", "prompt": "dark stage with green spotlight", "size": "1200x630" },
124
- { "op": "edit", "prompt": "place Figure 1 as a glowing cube in the spotlight", "assets": ["logo.png"] },
141
+ {
142
+ "op": "generate",
143
+ "prompt": "dark stage with green spotlight",
144
+ "size": "1200x630"
145
+ },
146
+ {
147
+ "op": "edit",
148
+ "prompt": "place Figure 1 as a glowing cube in the spotlight",
149
+ "assets": ["logo.png"]
150
+ },
125
151
  { "op": "crop", "size": "1200x630" },
126
152
  { "op": "grade", "name": "cinematic" },
127
153
  { "op": "vignette" }
@@ -139,7 +165,11 @@ picture-it batch --spec batch.json --output-dir ./images/
139
165
  {
140
166
  "id": "hero",
141
167
  "pipeline": [
142
- { "op": "generate", "prompt": "abstract dark background", "size": "1200x630" },
168
+ {
169
+ "op": "generate",
170
+ "prompt": "abstract dark background",
171
+ "size": "1200x630"
172
+ },
143
173
  { "op": "grade", "name": "cinematic" }
144
174
  ]
145
175
  },
@@ -171,13 +201,13 @@ picture-it upscale -i small.png --scale 2 -o large.png
171
201
 
172
202
  The tool automatically picks the cheapest model that can handle the job:
173
203
 
174
- | Operation | Default model | Cost |
175
- |---|---|---|
176
- | `generate` | flux-schnell | $0.003 |
177
- | `edit` (1-10 images) | seedream | $0.04 |
178
- | `edit` (>10 images) | banana2 | $0.08 |
179
- | `edit --model banana-pro` | banana-pro | $0.15 |
180
- | `remove-bg` | birefnet | — |
204
+ | Operation | Default model | Cost |
205
+ | ------------------------- | ------------- | ------ |
206
+ | `generate` | flux-schnell | $0.003 |
207
+ | `edit` (1-10 images) | seedream | $0.04 |
208
+ | `edit` (>10 images) | banana2 | $0.08 |
209
+ | `edit --model banana-pro` | banana-pro | $0.15 |
210
+ | `remove-bg` | birefnet | — |
181
211
 
182
212
  Override with `--model <name>` on any command.
183
213
 
@@ -185,15 +215,15 @@ Override with `--model <name>` on any command.
185
215
 
186
216
  Use `--platform <name>` on `generate`, `crop`, or `template`:
187
217
 
188
- | Preset | Size |
189
- |---|---|
190
- | `blog-featured` | 1200x630 |
191
- | `og-image` | 1200x630 |
192
- | `twitter-header` | 1500x500 |
193
- | `instagram-square` | 1080x1080 |
194
- | `instagram-story` | 1080x1920 |
195
- | `youtube-thumbnail` | 1280x720 |
196
- | `linkedin-post` | 1200x627 |
218
+ | Preset | Size |
219
+ | ------------------- | --------- |
220
+ | `blog-featured` | 1200x630 |
221
+ | `og-image` | 1200x630 |
222
+ | `twitter-header` | 1500x500 |
223
+ | `instagram-square` | 1080x1080 |
224
+ | `instagram-story` | 1080x1920 |
225
+ | `youtube-thumbnail` | 1280x720 |
226
+ | `linkedin-post` | 1200x627 |
197
227
 
198
228
  ## Output behavior
199
229
 
@@ -233,11 +263,62 @@ picture-it replace-bg -i product.jpg --prompt "clean white studio background wit
233
263
  - **@fal-ai/client** — AI image generation and editing
234
264
  - **Commander.js** — CLI framework
235
265
 
236
- ## Publish to npm
266
+ ## Claude Skill
267
+
268
+ picture-it includes a Claude skill so AI agents know how to use it effectively — which models to pick, how to chain operations, composition techniques, and gotchas.
237
269
 
238
- 1. Update the version in `package.json` and `index.ts` together.
239
- 2. Make sure you are logged in to npm.
240
- 3. Run `bun publish --dry-run` and inspect the package contents.
241
- 4. Publish with `bun publish --access public`.
270
+ ### Install the skill
271
+
272
+ **Global install** (available in all projects):
273
+
274
+ ```bash
275
+ npx skills add geongeorge/picture-it -g
276
+ ```
277
+
278
+ **Project install** (available in current project only):
279
+
280
+ ```bash
281
+ npx skills add geongeorge/picture-it
282
+ ```
283
+
284
+ Browse and review on [clawhub.ai](https://clawhub.ai/geongeorge/picture-it) | [skills.sh](https://skills.sh)
285
+
286
+ You can also install manually:
287
+
288
+ ```bash
289
+ cp -r skill/picture-it ~/.claude/skills/picture-it
290
+ ```
291
+
292
+ The skill teaches agents:
293
+
294
+ - Which commands to use and when
295
+ - Model selection (cheapest model that handles the job)
296
+ - Multi-pass editing workflows (generate → edit → grade → crop)
297
+ - Text-behind-subject technique for thumbnails and posters
298
+ - Product photography with `remove-bg` + `compose` (preserves originals)
299
+ - Background removal model selection (bria for best edges)
300
+ - Common gotchas (rectangular glow artifacts, product detail alteration, etc.)
301
+ - How to write effective FAL prompts
302
+ - Overlay composition with JSON
303
+
304
+ The skill includes a `references/composition-guide.md` that agents load on demand for detailed techniques.
305
+
306
+ ## Build and Publish
307
+
308
+ Bun is required for development (building from TypeScript). The published package runs on plain Node.js.
309
+
310
+ ```bash
311
+ # Build (compiles TS → JS, replaces shebang with #!/usr/bin/env node)
312
+ bun run build
313
+
314
+ # Test the build
315
+ node dist/index.js --version
316
+
317
+ # Dry run
318
+ npm publish --dry-run
319
+
320
+ # Publish
321
+ npm publish --access public
322
+ ```
242
323
 
243
- `picture-it` is currently available as an npm package name.
324
+ The `prepublishOnly` script runs the build automatically before publishing.