@topy-ai/maggie 0.8.11 → 0.8.13
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-zh-TW.md +1 -1
- package/README.md +2 -2
- package/bundled-references/ai-media-generation.md +88 -0
- package/bundled-references/captions-transcription.md +41 -0
- package/bundled-references/generative-visuals.md +94 -0
- package/bundled-references/image-recipes.md +89 -0
- package/bundled-references/web-animation-patterns.md +364 -0
- package/bundled-skills/catalog.json +4 -0
- package/bundled-skills/maggie-design/SKILL.md +7 -2
- package/bundled-skills/maggie-design-motion/SKILL.md +4 -1
- package/bundled-skills/maggie-image/SKILL.md +101 -0
- package/bundled-skills/maggie-landing-page/SKILL.md +5 -1
- package/bundled-skills/maggie-spirit/SKILL.md +4 -2
- package/bundled-skills/maggie-video/SKILL.md +3 -2
- package/bundled-tools/clis/maggie_image.py +221 -0
- package/package.json +1 -1
- package/references/ai-media-generation.md +88 -0
- package/references/captions-transcription.md +41 -0
- package/references/generative-visuals.md +94 -0
- package/references/image-recipes.md +89 -0
- package/references/web-animation-patterns.md +364 -0
package/README-zh-TW.md
CHANGED
|
@@ -143,7 +143,7 @@ structure drift 或重複 treatment product 時 fail closed。
|
|
|
143
143
|
deployment、memory、feedback 和 MaggieDash。內容先 draft/review,外部寫入、
|
|
144
144
|
publish 與 production deployment 需要明確確認。
|
|
145
145
|
|
|
146
|
-
目前 npm 版本為 `0.8.11
|
|
146
|
+
目前 npm 版本為 `0.8.13`,新增 AI 媒體生成規劃 reference(Q 類:自託管模型概覽、程式碼授權≠權重授權規則、商用安全子集 rembg/Real-ESRGAN、成本/BYOK 守則;實際建置待明確許可)。先前 0.8.12 收尾其餘設計類:新增 `maggie-image`(影像處理 CLI:尺寸/OG/favicon/WebP-AVIF/svg/montage)與 web 動效、生成式視覺、圖像配方、字幕四個 reference。先前 0.8.11 收尾 N 類影片功能:`maggie_video.py compile` 再補上視頻 clip ken-burns、sidechain ducking、以及非透明度 overlay 效果(move/slide、圖片 zoom),並新增 `autocut` 子命令(silencedetect 去靜音)。先前 0.8.10 新增圖片 ken-burns + 文字透明度關鍵幀與 `captions`(whisper)子命令。先前 0.8.9 新增 `compile`(宣告式 timeline JSON→單一 ffmpeg 命令)。先前 0.8.8 新增 `maggie-video`(製作與處理行銷影片:剪輯、字幕、裁切成各渠道比例、浮水印、轉碼、響度正規化、clip 組裝、程式化動畫),附一個實測可用的 ffmpeg 配方 CLI(`maggie_video.py`),從參考庫的影片專案(moviepy/editly/ffmpeg 命令層、Revideo/Motion Canvas/CCapture 程式化渲染、MLT/OpenShot/Olive 的 timeline 資料形狀)提煉而來;另加 `ffmpeg-recipes`、`programmatic-video`、`video-timeline-model` 三個 reference。先前 0.8.7 把 redesign 稽核併入 `maggie-design`(改編自 MIT 的 `elayadesign/redesign-skill`):掃描 + 診斷 AI 通病/缺失狀態/雜亂程式碼,再經 in-place/verify 流程就地修正,因此「稽核/打磨/升級既有站點」會路由到 maggie-design。先前 0.8.6 補齊兩個設計技能:加入完整的生產 reference,並把設計來源明確為 Figma 非必需(實時 URL、既有程式碼、Figma、或純截圖)。先前 0.8.5 採納兩個設計技能(改編自 MIT 的 `elayadesign/ai-design-skills`):maggie-landing-page(轉化策略 + 視覺系統紀律,具體數值為可被專案 DESIGN.md 覆蓋的預設值;由 maggie-design 生產與驗證)與 maggie-design-motion(靜態設計→像素級動畫 HTML 複刻→匯出 MP4 + GIF)。先前 0.8.4 將技能庫擴展成完整的「一人用 AI 跑一家公司」C-suite,新增八條職能線:maggie-sales(CRM 中立的銷售管線)、maggie-finance(只解釋的 CFO 指標,含確定性 maggie_finance.py 計算器)、maggie-support(面向客戶的客戶成功)、maggie-product(路線圖 + 預註冊實驗)、maggie-fundraising(pitch deck、data room、投資人更新)、maggie-legal(ToS/隱私/DPA/SOC2 readiness)、maggie-monetization(定價/paywall/dunning,金錢操作需人工批准)、maggie-orchestrator(CEO 編排層:將目標拆成帶審批門的 mission 分派到各職能線,含 maggie_orchestrator.py 規劃器)。先前 0.8.3 將 cmo.so/www 開發經驗沉澱進技能庫:新增兩個技能 maggie-skill-authoring(依 catalog 與 MCP 工具白名單撰寫/校驗社區營銷 playbook 技能)與 maggie-feedback-triage(反饋的團隊接收端:決策/定級/分派、PRD + issue 流程、24/7 隊列守護);新增多個 reference(OAuth PKCE 登入、Expo 約定與 Router 骨架、MCP evals 測試框架、conversation cards、WordPress→Firebase 認證遷移手冊);並增補 maggie-assistant-tools(tool≤user 每輪工具過濾、agent loop 安全不變量、preview-only 橋接代理、MCP resources/prompts、注解加固、CLI 與 ChatGPT 插件打包)、maggie-auth-reference(自清理登入測試套件、自簽單次令牌)、maggie-mobile-app(OTA 開機拉取、live==built 部署守衛)、maggie-deployment(pm2 單包發布、live-hash 校驗)與 maggie-ops(template-as-code 郵件同步)。先前 0.8.2 新增 maggie-spirit(為 AI 品牌生成平面像素 spirit/sprite 系統)與 goal-led AI agent 設計參考;0.8.0 為安全優化 roadmap(scan、image-patch、標頭評分、SSVC、GDPR 日誌規則、新 MCP 工具)。先前 0.8.0 為安全優化 roadmap(scan、image-patch、標頭評分、SSVC、GDPR 日誌規則、新 MCP 工具),含 fix-plan 修補風險分級 T1–T4(判斷補丁是否安全套用)與 host-impact 補丁影響面量測(哪些服務需重啟、是否需重開機)、public-check、Maggie Security、batch 31 排程 agent routines、報告收件匣與無人值守 agent 限制、PHP runtime 盤點與主機鎖、pull 網站改寫、query 點子與社群佇列檢查,batch 30 MaggieDash 先裝核心、release privacy gate、feedback 備援、社群連結與圖片檢查、大量頁面產生與 app 檢查,batch 29 預約規則、部署、app QA、助理與社群功能,以及 batch 28 產品 app、assistant tools、mobile、product release、skills catalog 與 bridge host 功能、batch 26、27 feedback 修正與 idempotent `maggie update`與 Booking email-template 合約/CLI validator 同步。本版完成 2026-09-24 booking feedback batch:Calendar grid/free-slot entry 與 host modal focus-restoration evidence。本版新增 Starter marketplace provisioning plan;本版完成 feedback batches 22、23:加入 declarative browser interaction evidence、design markup/style/content-key gate、compiler source anchoring、entity double-escape protection、`update --help` read-only、noindex hypothetical indexability、可過期 baseline acknowledgement、DOM-only link extraction regression,以及 MaggieDash 0.2.10 的 content override、短期 browser session、CDN-safe public-session cache contracts。authentication 和 isolated dev server 仍由 host 負責。`maggie-booking` workflow、傳統 email/password、Stripe、Resend、public booking flow 及既有安全邊界維持不變;provider-bound video generation 與 transactional delivery 仍記錄在 issue #39,前一批延後功能仍在 issue #38,不會直接成為 active memory。0.7.33 記錄並審查一筆更正回饋;確認 0.7.32 已正確處理 batch index,沒有修改已驗證的 shared behavior。0.7.32 加入 feedback 一基索引支援、MaggieDash panel 的 source/freshness/error evidence、Consent Mode 與實際 write/no-op reconciliation、SEO baseline recapture、sitemap origin rebasing、content-diff scope、migration ledger reconciliation、deployment credential preflight、release provenance/runtime preflight、icon release gate、opt-in blog auto-publish gate,以及 least-privilege VPS deployer。也修復 top-level `maggie feedback` dispatcher parity。0.7.31 加入 update 差異摘要、atomic installer copy、subset install manifest merge,以及 inventory drift 時 doctor non-zero。0.7.30 補上 feedback tracking issue closeout gate 與 batch 14/15 audit ledger。0.7.29 修正 npm package landing page 使用英文 README;0.7.28 加入 versioned Gemini model policy、明確 fallback 與 provenance、bundled-first CLI
|
|
147
147
|
dispatch、`maggie --version`、feedback batch review 聚合與重複偵測、marketplace enrichment evidence、booking
|
|
148
148
|
worker/resolver evidence,以及 read-only migration preflight。它也包含 host-owned mobile app surface contract、signed-in
|
|
149
149
|
camera-state QA、直接 Astro route resolution、correlated feedback batch,以及
|
package/README.md
CHANGED
|
@@ -87,9 +87,9 @@ Then invoke the installed skills from your coding agent, for example:
|
|
|
87
87
|
|
|
88
88
|
Maggie keeps the existing project foundation and asks for decisions before
|
|
89
89
|
shared routes, analytics, or publishing boundaries change. The current
|
|
90
|
-
package ships
|
|
90
|
+
package ships 38 installable skills and a local-first MaggieDash foundation.
|
|
91
91
|
|
|
92
|
-
This package is `0.8.
|
|
92
|
+
This package is `0.8.13` — adds the AI-media-generation planning reference (category Q: licensing + safe subset + cost guardrails; build gated on go-ahead). `0.8.12` adds `maggie-image` (process images via an ImageMagick recipe CLI) + references for web animation, generative visuals, image recipes, and captions. `0.8.11` - `maggie_video.py compile` now also does video-clip ken-burns, sidechain ducking, and non-opacity overlay effects (move/slide, image zoom), and a new `autocut` subcommand removes silent gaps. `0.8.10` added image ken-burns + text opacity keyframes and the `captions` (whisper) subcommand. `0.8.9` added `compile` (declarative timeline JSON -> one ffmpeg command). `0.8.8` added `maggie-video` (produce and process marketing video: cut, caption, resize to channel aspects, watermark, transcode, normalize loudness, assemble clips, render code-drawn animation) with a tested ffmpeg-recipe CLI, distilled from the reference library's video projects; plus references `ffmpeg-recipes`, `programmatic-video`, `video-timeline-model`. `0.8.7` folded a redesign audit into `maggie-design` (from the MIT `elayadesign/redesign-skill`): scan + diagnose generic AI-design patterns/weak states/sloppy code, then fix in place via the in-place/verify flow, so "audit/polish/upgrade an existing site" routes to maggie-design. `0.8.6` completed the two adopted design skills with full production references and made the design source Figma-optional (live URL, existing code, Figma, or a screenshot). `0.8.5` adopted the two design skills (adapted, MIT, from `elayadesign/ai-design-skills`): `maggie-landing-page` (conversion strategy + a visual-system discipline whose values defer to the project's DESIGN.md) and `maggie-design-motion` (static design → pixel-exact animated HTML replica → MP4 + GIF export). `0.8.4` expanded the library into a full "one person runs a company with AI" C-suite with eight new function lanes: `maggie-sales` (CRM-neutral pipeline), `maggie-finance` (explain-only CFO metrics + a deterministic `maggie_finance.py` calculator), `maggie-support` (customer success), `maggie-product` (roadmap + pre-registered experiments), `maggie-fundraising` (deck, data room, investor updates), `maggie-legal` (ToS/privacy/DPA/SOC2 readiness), `maggie-monetization` (pricing/paywalls/dunning; money actions human-approved), and `maggie-orchestrator` (the CEO layer that decomposes a goal into gated missions across the lanes, with a `maggie_orchestrator.py` planner). `0.8.3` folded cmo.so/www development learnings in (maggie-skill-authoring, maggie-feedback-triage, and mobile/MCP/auth references); `0.8.2` added `maggie-spirit`; `0.8.0` was the security optimization roadmap.
|
|
93
93
|
|
|
94
94
|
The 0.7.59 release made `maggie security host-audit` (the deep
|
|
95
95
|
lynis audit over SSH) robust on hosts where a storage test can stall: lynis runs
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
# AI media generation (planning + guardrails)
|
|
2
|
+
|
|
3
|
+
The analysis-and-plan layer for category Q (self-hosted AI image/video/audio
|
|
4
|
+
generation). This is **not** a build: generating media with these models means large
|
|
5
|
+
model-weight downloads (gigabytes) and GPU time, so the actual run is gated on an
|
|
6
|
+
explicit go-ahead and a cost statement (the global spend-first rule). This reference
|
|
7
|
+
maps the landscape, the licensing traps, the commercial-safe subset to start from,
|
|
8
|
+
and the guardrails - so the build, when approved, is scoped and safe. Distilled from
|
|
9
|
+
the reference library's Q-category projects.
|
|
10
|
+
|
|
11
|
+
## The one rule that matters: code license != weights license
|
|
12
|
+
|
|
13
|
+
A repo's code license (often Apache-2.0/MIT) says nothing about whether you may use
|
|
14
|
+
its **model weights commercially**. Many permissively-licensed code repos ship
|
|
15
|
+
weights under research-only or non-commercial terms. **Always check the specific
|
|
16
|
+
model's weight license before any commercial use**, per model, per version. Example:
|
|
17
|
+
`black-forest-labs/flux` code is Apache-2.0, but **FLUX.1-[dev] weights are
|
|
18
|
+
non-commercial** while FLUX.1-[schnell] is Apache-2.0 - same repo, different answer.
|
|
19
|
+
|
|
20
|
+
## Code-license map (from the screened repos)
|
|
21
|
+
|
|
22
|
+
| Repo | code license | adoption posture |
|
|
23
|
+
|---|---|---|
|
|
24
|
+
| AUTOMATIC1111/stable-diffusion-webui | **AGPL-3.0** | arm's-length only; never vendor code |
|
|
25
|
+
| Comfy-Org/ComfyUI | **GPL-3.0** | arm's-length (its HTTP API / workflow JSON); never vendor |
|
|
26
|
+
| lllyasviel/Fooocus, Acly/krita-ai-diffusion | **GPL-3.0** | arm's-length only |
|
|
27
|
+
| danielgatis/rembg, nadermx/backgroundremover | MIT | safe to depend on (bg removal) |
|
|
28
|
+
| xinntao/Real-ESRGAN | BSD-3 | safe to depend on (upscaling) - check weight terms |
|
|
29
|
+
| huggingface/diffusers | Apache-2.0 | safe library; **models vary** - check each |
|
|
30
|
+
| Stability-AI/generative-models, black-forest-labs/flux, guoyww/AnimateDiff, Wan-Video/Wan2.1, zai-org/CogVideo, Lightricks/LTX-Video, hpcaitech/Open-Sora, genmoai/mochi, kohya-ss/sd-scripts | Apache-2.0/MIT code | code safe; **weights almost always have their own (often non-commercial) license - verify per model** |
|
|
31
|
+
| TencentARC/GFPGAN, facefusion/facefusion | NOASSERTION | unclear; treat as restricted until verified; facefusion also has misuse/ethics constraints |
|
|
32
|
+
| suno-ai/bark, facebookresearch/audiocraft | MIT | audio/music code safe; check weight + training-data terms |
|
|
33
|
+
|
|
34
|
+
## Commercial-safe subset to start with (when approved)
|
|
35
|
+
|
|
36
|
+
Lowest risk, highest marketing value, smallest footprint - do these first:
|
|
37
|
+
|
|
38
|
+
1. **Background removal** - `rembg` (MIT; u2net weights, widely used) or
|
|
39
|
+
`backgroundremover` (MIT). Runs CPU-fine for product cut-outs. Pairs with
|
|
40
|
+
`maggie-image` compositing.
|
|
41
|
+
2. **Upscaling / restore** - `Real-ESRGAN` (BSD-3) via the standalone
|
|
42
|
+
`realesrgan-ncnn-vulkan` binary (arm's-length; do NOT vendor Upscayl which is
|
|
43
|
+
AGPL). Enlarge logos/product shots without re-shooting.
|
|
44
|
+
|
|
45
|
+
These two cover the everyday CMO needs (clean product images, upscale assets) with
|
|
46
|
+
no GPL/AGPL code vendored and no license-murky weights.
|
|
47
|
+
|
|
48
|
+
## Orchestration: ComfyUI at arm's length
|
|
49
|
+
|
|
50
|
+
For heavier generation (image/video models), the practical backend is **ComfyUI
|
|
51
|
+
driven over its HTTP API** with a saved **workflow JSON** - invoked as an external
|
|
52
|
+
service, never vendored (it is GPL). The adapter pattern mirrors
|
|
53
|
+
[provider adapter contract](provider-adapter-contract.md): a host supplies the
|
|
54
|
+
running ComfyUI endpoint, the GPU, and the chosen (license-cleared) model weights;
|
|
55
|
+
Maggie submits a workflow + prompt and retrieves the output. Image/video results then
|
|
56
|
+
flow into `maggie-image` / `maggie-video` for sizing, captioning, and assembly.
|
|
57
|
+
|
|
58
|
+
## Guardrails (before any run)
|
|
59
|
+
|
|
60
|
+
- **State cost first.** Model downloads are gigabytes and GPU time is real; announce
|
|
61
|
+
the footprint and get a yes before downloading weights or running a generation
|
|
62
|
+
(global spend-first rule). Small CPU ops (rembg) are the exception.
|
|
63
|
+
- **If a hosted/API model is used instead of self-host**, the global BYOK rule
|
|
64
|
+
applies: route through the aggregator with `provider.order` + `allow_fallbacks:
|
|
65
|
+
false` + explicit `max_tokens`/limits, use our own key, and verify `is_byok`/
|
|
66
|
+
`cost:0`.
|
|
67
|
+
- **Weights license per model** (see the rule above) - record which weights are
|
|
68
|
+
cleared for commercial use.
|
|
69
|
+
- **No vendoring** of AGPL/GPL code (sd-webui, ComfyUI, Fooocus, Upscayl); invoke at
|
|
70
|
+
arm's length.
|
|
71
|
+
- **Provenance + rights + moderation**: generated media needs a recorded,
|
|
72
|
+
redacted provenance note and a rights/moderation check before publishing (as the
|
|
73
|
+
hero-video policy in `maggie-design` already requires for generated assets).
|
|
74
|
+
- **Never pass off generated media as a real photo of a real person/place** without
|
|
75
|
+
disclosure; honour facefusion-style misuse constraints.
|
|
76
|
+
|
|
77
|
+
## Staged plan (each gated on go-ahead + cost)
|
|
78
|
+
|
|
79
|
+
1. `rembg` / `backgroundremover` bg-removal + `Real-ESRGAN` upscaling helpers
|
|
80
|
+
(license-clean, mostly CPU) - likely one release.
|
|
81
|
+
2. ComfyUI HTTP-API adapter + a couple of saved workflows (image gen, inpaint),
|
|
82
|
+
host-supplied GPU + cleared weights - one release.
|
|
83
|
+
3. Video/audio generation models as separate, individually license-vetted adapters -
|
|
84
|
+
later, per model.
|
|
85
|
+
|
|
86
|
+
Pairs with: [generative visuals](generative-visuals.md) (code-drawn visuals, no
|
|
87
|
+
models), `maggie-image` / `maggie-video` (post-processing the output),
|
|
88
|
+
`maggie media generate` (the existing generation entry point).
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
# Captions and transcription
|
|
2
|
+
|
|
3
|
+
Local, offline speech-to-text for video captions and transcripts, used by
|
|
4
|
+
`maggie-video`'s `captions` subcommand. All engines run on the user's machine - **no
|
|
5
|
+
paid API** - so transcription has no per-minute cost, only local CPU/GPU time.
|
|
6
|
+
Distilled from the reference library's R-category projects.
|
|
7
|
+
|
|
8
|
+
## Engines
|
|
9
|
+
|
|
10
|
+
| Engine | What / how | License | Reach for it when |
|
|
11
|
+
|---|---|---|---|
|
|
12
|
+
| openai-whisper | The reference Python CLI: `whisper IN --model base --output_format srt --output_dir DIR` | MIT | the default; simplest install (`pip install openai-whisper`) |
|
|
13
|
+
| whisper.cpp | C/C++ port, fast on CPU, GGML models: `whisper-cli -m model.bin -f IN -osrt -of OUTBASE` | MIT | no GPU / fastest CPU / embedding in a pipeline |
|
|
14
|
+
| whisperX | whisper + forced alignment for **word-level timestamps** and diarization: `whisperx IN --model large-v3 --output_format srt --output_dir DIR` | BSD-4 | word-accurate caption timing or speaker labels |
|
|
15
|
+
|
|
16
|
+
Model size trades speed for accuracy: `tiny` / `base` (fast, rough) -> `small` /
|
|
17
|
+
`medium` -> `large-v3` (slow, best). Use `--lang` to skip auto-detect when known.
|
|
18
|
+
|
|
19
|
+
## Workflow (voiceover -> captions -> on-screen)
|
|
20
|
+
|
|
21
|
+
1. **Transcribe** the voiceover or the video's audio to SRT with a local engine
|
|
22
|
+
(`maggie_video.py captions --input vo.mp3 --output vo.srt --engine whisper
|
|
23
|
+
--model base`). A larger model is slower but more accurate.
|
|
24
|
+
2. **Review** the SRT - never ship an unreviewed transcript; whisper mishears names,
|
|
25
|
+
numbers, and brand terms. A human edits it.
|
|
26
|
+
3. **Put it on screen**, one of:
|
|
27
|
+
- burn in (`maggie_video.py subtitle --input video.mp4 --srt vo.srt --output out.mp4`),
|
|
28
|
+
- soft-mux a toggleable track (`subtitle --soft`), or
|
|
29
|
+
- a `captions` layer in a `maggie_video.py compile` timeline (see
|
|
30
|
+
[video timeline model](video-timeline-model.md)).
|
|
31
|
+
|
|
32
|
+
## Rules
|
|
33
|
+
|
|
34
|
+
- Captions lift watch time and serve sound-off viewing - caption every social video.
|
|
35
|
+
- **Never fabricate a transcript**; generate it from the real audio and have a human
|
|
36
|
+
review before publishing (accuracy, names, and brand terms).
|
|
37
|
+
- Local/offline: no audio leaves the machine, no paid API. If a hosted transcription
|
|
38
|
+
API is ever wired in instead, the global spend-first rule applies - state the cost.
|
|
39
|
+
- Keep caption text inside the safe area (see `maggie-video` channel presets).
|
|
40
|
+
|
|
41
|
+
See `maggie-video` for the subcommands and the burn-in / soft-mux / compile options.
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
# Generative visuals (creative coding)
|
|
2
|
+
|
|
3
|
+
Patterns for generating marketing visuals in code - hero backgrounds, textures, 3D
|
|
4
|
+
product shots, data-viz, and stylized images - distilled from the leading creative-
|
|
5
|
+
coding libraries. We adopt **patterns, not code**. Output becomes a deliverable as a
|
|
6
|
+
**still** (canvas/SVG export) or a **loop** (captured via
|
|
7
|
+
[design-motion production](design-motion-production.md) Part C or
|
|
8
|
+
[ffmpeg recipes](ffmpeg-recipes.md), then assembled in `maggie-video`). Determinism
|
|
9
|
+
by seeding matches `maggie-spirit`'s philosophy: same seed -> same pixels.
|
|
10
|
+
|
|
11
|
+
## Libraries
|
|
12
|
+
|
|
13
|
+
| Library | What / model | Lang | License | Marketing fit |
|
|
14
|
+
|---|---|---|---|---|
|
|
15
|
+
| three.js | WebGL 3D: Scene + Camera + WebGLRenderer; `renderer.render(scene,camera)` in a loop | JS | MIT | 3D product spins, logo stings, depth-y hero backgrounds |
|
|
16
|
+
| Babylon.js | Higher-level 3D engine (PBR, asset pipeline); heavier | JS/TS | Apache-2.0 | 3D product config; alt to three when its pipeline earns the weight |
|
|
17
|
+
| react-three-fiber | three.js as React JSX (`<mesh><boxGeometry/>…`), `useFrame` | JS/TS | MIT | 3D on a React site |
|
|
18
|
+
| p5.js | Canvas sketch: `setup()` once + `draw()` per frame; `random()/noise()` with `randomSeed()/noiseSeed()` | JS | **LGPL-2.1** | generative hero backgrounds, flow fields, noise art |
|
|
19
|
+
| paper.js | Vector scene graph (Path/Group), boolean ops, hit-testing | JS | MIT | editable vector hero art, print-quality SVG |
|
|
20
|
+
| two.js | One 2D API across SVG/Canvas/WebGL renderers | JS | MIT | vector art you want to export as SVG or capture from canvas |
|
|
21
|
+
| rough.js | Hand-drawn/sketchy shapes; `{seed}` = reproducible | JS/TS | MIT | approachable hand-made brand style, doodle accents |
|
|
22
|
+
| zdog | Pseudo-3D round/flat vector, designer-friendly | JS | MIT | cute 3D-ish icons, mascot/logo spins |
|
|
23
|
+
| pts | Computational geometry (Space + Form + Pt) | TS/JS | Apache-2.0 | geometric/particle hero art |
|
|
24
|
+
| hydra | Live-coded video synth (chained GLSL ops) | JS | **AGPL-3.0** | trippy animated backgrounds - **pattern only, do not ship its code** |
|
|
25
|
+
| regl | Functional WebGL (stateless draw commands) | JS | MIT | custom shader backgrounds/gradients when three is overkill |
|
|
26
|
+
| d3 | Data-driven SVG (scales + selections) | JS | ISC | bespoke infographics - but defer standard charts to the `dataviz` skill |
|
|
27
|
+
| fogleman/primitive | Reproduce an image with N geometric primitives (CLI) | Go | MIT | stylize a product photo into abstract art (still or GIF) |
|
|
28
|
+
| svg.js | Lightweight SVG DOM manipulation | JS | MIT | programmatic SVG icons/badges/dividers |
|
|
29
|
+
| nannou | Rust creative framework (desktop) | Rust | MIT/Apache | note only - high-perf generative art in Rust |
|
|
30
|
+
|
|
31
|
+
**License flags:** hydra is **AGPL-3.0**, p5 is **LGPL-2.1**, processing (non-core)
|
|
32
|
+
is GPL - fine as *idea* sources, but do not vendor their code into shipped product;
|
|
33
|
+
reimplement the pattern or use an MIT equivalent (two.js / pts / regl / svg.js).
|
|
34
|
+
|
|
35
|
+
## Patterns and the deliverable path
|
|
36
|
+
|
|
37
|
+
- **2D generative** (p5 / paper / two / rough / zdog / pts / svg.js): `setup()` once +
|
|
38
|
+
`draw()`/`update()` per frame. Use for brand-tinted hero/section backgrounds,
|
|
39
|
+
textures, doodle accents, geometric motifs. **Still:** SVG-capable libs serialize
|
|
40
|
+
their `<svg>` (crisp, editable, print-ready); canvas libs use `canvas.toDataURL()`
|
|
41
|
+
-> PNG. **Loop:** run the sketch headless and capture via design-motion Part C, or
|
|
42
|
+
in-browser with CCapture.js (MIT), then hand to `maggie-video`.
|
|
43
|
+
- **3D** (three / babylon / r3f): Scene + Camera + Renderer; animate by frame index.
|
|
44
|
+
Product spins, 3D logo stings, depth-y backgrounds. **Still:**
|
|
45
|
+
`renderer.domElement.toDataURL()` (set `preserveDrawingBuffer:true`); **loop:** drive
|
|
46
|
+
by frame, capture as above. Prefer three/r3f (MIT); babylon only when needed.
|
|
47
|
+
- **Data-viz** (d3): `d3-scale` + `d3-selection`; SVG is the native output. For
|
|
48
|
+
standard charts, **defer to the `dataviz` skill** (its palette/spec); pull in d3
|
|
49
|
+
only for bespoke marks (arc diagrams, force layouts, custom infographics).
|
|
50
|
+
- **Live visuals** (hydra): chained feedback-graph ops -> animated GLSL. Renders to a
|
|
51
|
+
canvas -> capture -> `maggie-video`. **AGPL: idea only**; for an MIT shader
|
|
52
|
+
background use regl.
|
|
53
|
+
- **Image -> primitives** (fogleman/primitive, MIT, Go CLI): stylize a photo into
|
|
54
|
+
abstract geometry.
|
|
55
|
+
|
|
56
|
+
```bash
|
|
57
|
+
primitive -i input.png -o output.svg -n 100 -m 1
|
|
58
|
+
# -n shapes (50-200); -m mode (1 triangle,2 rect,3 ellipse,4 circle,6 beziers,8 polygon);
|
|
59
|
+
# output type by extension: PNG/JPG (raster), SVG (vector), GIF (animated, needs ImageMagick)
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
**Still:** PNG/SVG directly; **loop:** `.gif` or `%d`-numbered PNG frames ->
|
|
63
|
+
`maggie-video`. It is randomized (no seed): generate once and **store the artifact**;
|
|
64
|
+
do not regenerate on every build.
|
|
65
|
+
|
|
66
|
+
## Determinism
|
|
67
|
+
|
|
68
|
+
p5 `randomSeed()/noiseSeed()`, rough.js `{seed}`, and a seeded PRNG in place of
|
|
69
|
+
`Math.random` give byte-reproducible stills; the frame-index/virtual-clock rule from
|
|
70
|
+
[programmatic video](programmatic-video.md) gives reproducible motion. `primitive`
|
|
71
|
+
and `hydra` are non-deterministic - capture and store their output as a fixed asset.
|
|
72
|
+
|
|
73
|
+
## Placement
|
|
74
|
+
|
|
75
|
+
- **maggie-spirit** owns seeded brand marks/characters; borrow the 2D-canvas sketch
|
|
76
|
+
model and seed discipline for flat-vector mark construction (zdog/two.js/rough).
|
|
77
|
+
Generative *backgrounds/scenes* do not live here.
|
|
78
|
+
- **maggie-design** owns generative hero backgrounds, section textures, 3D product
|
|
79
|
+
shots and image stylization as page/brand visuals; it points at this reference and
|
|
80
|
+
cross-links design-motion / `maggie-video` for capture-to-deliverable.
|
|
81
|
+
- **Reference-only:** d3 (defer to `dataviz`), hydra (AGPL, idea only), regl, babylon,
|
|
82
|
+
nannou/processing/openFrameworks (desktop notes), svg.js.
|
|
83
|
+
|
|
84
|
+
For *AI* media generation (diffusion/video models, bg-removal, upscaling) rather than
|
|
85
|
+
code-drawn visuals, see [AI media generation](ai-media-generation.md) (self-hosted,
|
|
86
|
+
licensing + cost gated).
|
|
87
|
+
|
|
88
|
+
## Credits
|
|
89
|
+
|
|
90
|
+
Patterns adapted (not code) from three.js, p5.js, d3, paper.js, two.js, rough.js,
|
|
91
|
+
zdog, pts, hydra, regl, Babylon.js, react-three-fiber, fogleman/primitive, svg.js,
|
|
92
|
+
nannou - licenses in the table above. Capture pipeline: see
|
|
93
|
+
[programmatic video](programmatic-video.md), [design-motion production](design-motion-production.md),
|
|
94
|
+
[ffmpeg recipes](ffmpeg-recipes.md).
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
# Image recipes
|
|
2
|
+
|
|
3
|
+
The distilled, correct image-processing command layer for marketing assets, used by
|
|
4
|
+
`maggie-image`. These are the commands `maggie_image.py` generates. Distilled from
|
|
5
|
+
ImageMagick, sharp, svgo, resvg, squoosh and imagemin (reference library category P).
|
|
6
|
+
We **invoke binaries at arm's length** (adopt defaults, not code).
|
|
7
|
+
|
|
8
|
+
**Tool posture.** ImageMagick (`magick` on IM7, else `convert`) is almost always
|
|
9
|
+
present and covers nearly every raster op, so it is the **primary** path; dedicated
|
|
10
|
+
tools (svgo, resvg, cwebp, avifenc, pngquant) are the **better-quality alternative
|
|
11
|
+
used automatically when installed**. Web-delivery quality defaults follow sharp/
|
|
12
|
+
squoosh: JPEG/WebP ~80, AVIF ~50. OG/social are **cover-cropped**; logos **pad**.
|
|
13
|
+
Strip metadata on anything public (privacy + bytes).
|
|
14
|
+
|
|
15
|
+
## Resize + fit (the most-used op)
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
# cover / crop to exactly WxH (fills the frame, center-crop)
|
|
19
|
+
convert in.jpg -strip -resize 1200x630^ -gravity center -extent 1200x630 -quality 82 out.jpg
|
|
20
|
+
# contain / letterbox with a pad color
|
|
21
|
+
convert in.jpg -strip -resize 1200x630 -background '#ffffff' -gravity center -extent 1200x630 out.jpg
|
|
22
|
+
# downscale-only (never enlarge): -resize 1200x630>
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
sharp's smart crop (`fit:'cover', position:attention`) avoids cutting off a face;
|
|
26
|
+
ImageMagick has no equal, so for portraits prefer sharp when available.
|
|
27
|
+
|
|
28
|
+
## WebP / AVIF (file-size wins)
|
|
29
|
+
|
|
30
|
+
```bash
|
|
31
|
+
convert in.png -strip -quality 80 -define webp:method=6 out.webp # or: cwebp -q 80 -m 6 in.png -o out.webp
|
|
32
|
+
convert in.png -strip -quality 50 out.avif # or: avifenc -s 6 --min 20 --max 40 in.png out.avif
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
## Channel / OG presets
|
|
36
|
+
|
|
37
|
+
Cover-crop to the target: OG 1200x630, Twitter 1600x900, square 1080x1080, story/reel
|
|
38
|
+
1080x1920, landscape 1920x1080, LinkedIn 1200x627, Pinterest 1000x1500. Same command
|
|
39
|
+
as cover resize with the preset size, `-strip -quality 82`.
|
|
40
|
+
|
|
41
|
+
## Favicon + OG set
|
|
42
|
+
|
|
43
|
+
```bash
|
|
44
|
+
convert in.png -define icon:auto-resize=64,48,32,16 favicon.ico # multi-res .ico
|
|
45
|
+
convert in.png -strip -resize 180x180 apple-touch-icon.png # + 16/32/48/192/512 PNGs
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
## Strip metadata / compress
|
|
49
|
+
|
|
50
|
+
```bash
|
|
51
|
+
convert in.jpg -strip out.jpg # drop EXIF/GPS/ICC
|
|
52
|
+
convert in.jpg -strip -interlace Plane -quality 82 out.jpg # progressive JPEG
|
|
53
|
+
pngquant --quality 60-82 --strip --output out.png in.png # lossy PNG (best); IM fallback: -colors 256 -define png:compression-level=9
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
## SVG optimize / render
|
|
57
|
+
|
|
58
|
+
```bash
|
|
59
|
+
svgo --multipass -i in.svg -o out.svg # keeps viewBox + title (responsive + a11y). If svgo absent, leave the SVG alone - never rasterize as a substitute.
|
|
60
|
+
resvg -w 512 in.svg out.png # best-fidelity SVG -> PNG (or rsvg-convert -w 512); IM fallback (-background none -density 384) is lower fidelity
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
## Montage / contact sheet (carousels, screenshot grids)
|
|
64
|
+
|
|
65
|
+
```bash
|
|
66
|
+
montage a.png b.png c.png -tile 3x -geometry 400x400+10+10 -background '#ffffff' sheet.jpg
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
## The CLI
|
|
70
|
+
|
|
71
|
+
`maggie_image.py` generates each command above (and runs it with `--run` when the
|
|
72
|
+
tool is on PATH; `--force-im` forces the ImageMagick path). It detects IM6 `convert`
|
|
73
|
+
vs IM7 `magick`:
|
|
74
|
+
|
|
75
|
+
```bash
|
|
76
|
+
maggie tool maggie_image.py social --input hero.png --output og.jpg --preset og
|
|
77
|
+
maggie tool maggie_image.py --run webp --input hero.png --output hero.webp --quality 80
|
|
78
|
+
maggie tool maggie_image.py --run favicon --input logo.png --out-dir public/
|
|
79
|
+
maggie tool maggie_image.py svg2png --input logo.svg --output logo.png --width 512
|
|
80
|
+
maggie tool maggie_image.py presets
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
## Licenses
|
|
84
|
+
|
|
85
|
+
Invoked at arm's length: ImageMagick (permissive), SVGO (MIT), resvg (MIT/Apache),
|
|
86
|
+
sharp (Apache-2.0), squoosh codecs (Apache-2.0), imagemin (MIT), cwebp/avifenc
|
|
87
|
+
(BSD). **Avoid vendoring code from** Upscayl (AGPL-3.0) - for AI upscaling invoke the
|
|
88
|
+
separate `realesrgan-ncnn-vulkan` binary instead. sharp/squoosh quality defaults are
|
|
89
|
+
adopted as the preset numbers.
|