129 lines
6.4 KiB
Markdown
129 lines
6.4 KiB
Markdown
---
|
|
phase: 42-wallpapers-social-format-conversion-voice
|
|
plan: 02
|
|
subsystem: api
|
|
tags: [sharp, svg, llm, puter-inference, wallpaper, social-post, hashtags, carousel, renderers, typescript]
|
|
|
|
# Dependency graph
|
|
requires:
|
|
- phase: 42-wallpapers-social-format-conversion-voice
|
|
plan: 01
|
|
provides: WallpaperBundle, AppIconBundle, SocialPostBundle types in types.ts; stub wallpaper-renderer.ts and social-renderer.ts
|
|
- phase: 41-diagrams-icons-theme-engine
|
|
provides: puterChatComplete helper, icon-renderer.ts as implementation reference, sharp rasterization patterns
|
|
provides:
|
|
- renderWallpaper function + PLATFORM_DIMENSIONS constant in wallpaper-renderer.ts
|
|
- renderSocialPost function + PLATFORM_CHAR_LIMITS constant in social-renderer.ts
|
|
- LLM SVG generation via puterChatComplete with system prompt enforcing exact viewBox dimensions
|
|
- Sharp rasterization at exact platform dimensions with density: 300
|
|
- Multi-size app icon bundle (1024/512/256/64/32px)
|
|
- Instagram carousel with per-slide character limits and hashtag suggestions
|
|
affects:
|
|
- 42-05 (UI panels for wallpaper and social-post depend on these renderers)
|
|
- 42-06 (UI wiring connects job runner to rendered results)
|
|
|
|
# Tech tracking
|
|
tech-stack:
|
|
added: []
|
|
patterns:
|
|
- "System prompt + user message pattern for LLM: role:system with exact output instructions, role:user with creative prompt"
|
|
- "density: 300 when loading SVG into sharp — prevents blur at large wallpaper dimensions (pitfall from research)"
|
|
- "Robust markdown fence stripping: /```json([\s\S]*?)```/ with fallback to bare /(\{[\s\S]*\})/ extraction"
|
|
- "Conditional bundle type: same renderer returns AppIconBundle for app-icon/favicon, WallpaperBundle for all other platforms"
|
|
|
|
key-files:
|
|
created: []
|
|
modified:
|
|
- server/src/services/renderers/wallpaper-renderer.ts
|
|
- server/src/services/renderers/social-renderer.ts
|
|
|
|
key-decisions:
|
|
- "PLATFORM_DIMENSIONS exported as named constant (not magic numbers) — all 12 platforms in one lookup table"
|
|
- "APP_ICON_SIZES = [1024, 512, 256, 64, 32] as const — multi-size bundle returned when platform is app-icon or favicon"
|
|
- "PLATFORM_CHAR_LIMITS exported as named constant — 4 platforms: twitter-x(280), linkedin(3000), instagram-caption(2200), instagram-carousel(300)"
|
|
- "Carousel uses slides[] in SocialPostBundle; all other platforms omit slides field (spread operator conditional)"
|
|
|
|
patterns-established:
|
|
- "PLATFORM_DIMENSIONS lookup pattern: look up dimensions at render time, throw with available-keys list if not found"
|
|
- "Instagram carousel detection: platform === 'instagram-carousel' switches system prompt to request slides array"
|
|
- "LLM JSON parse: try direct regex extraction before full JSON.parse — handles both fenced and bare object responses"
|
|
|
|
requirements-completed: [WALL-01, WALL-02, WALL-03, WALL-04, SOCIAL-01, SOCIAL-02, SOCIAL-03]
|
|
|
|
# Metrics
|
|
duration: 5min
|
|
completed: 2026-04-04
|
|
---
|
|
|
|
# Phase 42 Plan 02: Wallpaper Renderer and Social Post Renderer
|
|
|
|
**LLM SVG wallpaper generation rasterized via sharp at 12 platform dimensions, plus platform-aware social post JSON renderer with hashtags and Instagram carousel support**
|
|
|
|
## Performance
|
|
|
|
- **Duration:** ~5 min
|
|
- **Started:** 2026-04-04T22:11:00Z
|
|
- **Completed:** 2026-04-04T22:14:15Z
|
|
- **Tasks:** 2
|
|
- **Files modified:** 2
|
|
|
|
## Accomplishments
|
|
- Replaced wallpaper-renderer.ts stub with full implementation: PLATFORM_DIMENSIONS constant (12 platforms), APP_ICON_SIZES (5 sizes), LLM SVG generation via puterChatComplete with system prompt, sharp rasterization at density: 300
|
|
- App icon/favicon path returns AppIconBundle with 5-size array; all other platforms return WallpaperBundle with single PNG
|
|
- Replaced social-renderer.ts stub with full implementation: PLATFORM_CHAR_LIMITS constant (4 platforms), LLM JSON generation, robust markdown fence stripping, Instagram carousel with slides array
|
|
- TypeScript compiles cleanly with zero errors across both files
|
|
|
|
## Task Commits
|
|
|
|
Each task was committed atomically:
|
|
|
|
1. **Task 1: Implement wallpaper renderer with PLATFORM_DIMENSIONS** - `f0a3666a` (feat)
|
|
2. **Task 2: Implement social post renderer with hashtags and carousel** - `9e39a9ef` (feat)
|
|
|
|
**Plan metadata:** (docs commit — see below)
|
|
|
|
## Files Created/Modified
|
|
- `server/src/services/renderers/wallpaper-renderer.ts` - Full implementation replacing stub: PLATFORM_DIMENSIONS, APP_ICON_SIZES, renderWallpaper with LLM SVG + sharp rasterization
|
|
- `server/src/services/renderers/social-renderer.ts` - Full implementation replacing stub: PLATFORM_CHAR_LIMITS, renderSocialPost with LLM JSON + hashtags/carousel
|
|
|
|
## Decisions Made
|
|
- Removed a dead `raw` variable (unused first LLM call) that was accidentally left in during writing — cleaned before commit as Rule 1 (bug: unnecessary extra LLM call that's discarded)
|
|
- Chose spread operator conditional `...(parsed.slides !== undefined ? { slides: parsed.slides } : {})` for optional slides field — keeps SocialPostBundle type correct without `slides: undefined` in JSON output
|
|
|
|
## Deviations from Plan
|
|
|
|
### Auto-fixed Issues
|
|
|
|
**1. [Rule 1 - Bug] Removed dead LLM call in wallpaper-renderer**
|
|
- **Found during:** Task 1 (review before commit)
|
|
- **Issue:** Initial draft had an unused `const raw = await puterChatComplete(...)` call that was discarded — an unnecessary extra API call
|
|
- **Fix:** Removed the dead `generateWallpaperSvg` helper function entirely; the single `puterChatComplete` call in `renderWallpaper` is sufficient
|
|
- **Files modified:** server/src/services/renderers/wallpaper-renderer.ts
|
|
- **Verification:** tsc --noEmit passes; logic unchanged
|
|
- **Committed in:** f0a3666a (part of Task 1 commit)
|
|
|
|
---
|
|
|
|
**Total deviations:** 1 auto-fixed (1 bug)
|
|
**Impact on plan:** Removed dead code before commit. No scope creep.
|
|
|
|
## Issues Encountered
|
|
None.
|
|
|
|
## User Setup Required
|
|
None - no external service configuration required.
|
|
|
|
## Next Phase Readiness
|
|
- wallpaper-renderer.ts and social-renderer.ts fully implemented; Plans 42-05 (UI panels) and 42-06 (UI wiring) can proceed
|
|
- PLATFORM_DIMENSIONS and PLATFORM_CHAR_LIMITS are exported constants ready for UI import
|
|
- Plans 42-03 (convert renderer) and 42-04 (voice) are independent and can proceed in parallel
|
|
|
|
## Self-Check: PASSED
|
|
- `server/src/services/renderers/wallpaper-renderer.ts` — FOUND
|
|
- `server/src/services/renderers/social-renderer.ts` — FOUND
|
|
- Commit `f0a3666a` — FOUND
|
|
- Commit `9e39a9ef` — FOUND
|
|
|
|
---
|
|
*Phase: 42-wallpapers-social-format-conversion-voice*
|
|
*Completed: 2026-04-04*
|