Android App Store Screenshots Feature #

Overview #

Add capability to generate screenshots for the Android (Google Play) app store listing from the prompt.mjs piece using the Oven capture service.

Requirements from Google Play #

Phone Screenshots (Required: 2-8) #

• Format: PNG or JPEG
• Max size: 8 MB each
• Aspect ratio: 16:9 or 9:16
• Dimensions: Each side between 320px and 3,840px
• For promotion eligibility: At least 4 screenshots, with at least 3 in 16:9 or 9:16 and at least 1080px

7-inch Tablet Screenshots (Required: 2-8) #

• Format: PNG or JPEG
• Max size: 8 MB each
• Aspect ratio: 16:9 or 9:16
• Dimensions: Each side between 320px and 3,840px

10-inch Tablet Screenshots (Required: 2-8) #

• Format: PNG or JPEG
• Max size: 8 MB each
• Aspect ratio: 16:9 or 9:16
• Dimensions: Each side between 1,080px and 7,680px

Proposed Target Resolutions #

Phone (Portrait 9:16) #

• 1080x1920 - Standard phone (1080p portrait, meets promotion minimum)

Phone (Landscape 16:9) #

• 1920x1080 - Standard phone landscape (1080p)

7-inch Tablet (Portrait 9:16) #

• 1200x1920 - 7" tablet portrait

7-inch Tablet (Landscape 16:9) #

• 1920x1200 - 7" tablet landscape

10-inch Tablet (Portrait 9:16) #

• 1600x2560 - 10" tablet portrait (WQXGA)

10-inch Tablet (Landscape 16:9) #

• 2560x1600 - 10" tablet landscape (WQXGA)

Implementation Plan #

1. New Oven Endpoint: /app-screenshots/:piece #

Add a dedicated endpoint that generates all required screenshots for app store submission.

// GET /app-screenshots/:piece
// Returns: HTML page with all screenshots + download links
// Also: /app-screenshots/:piece/:preset/:format
//   preset: phone-portrait, phone-landscape, tablet7-portrait, tablet7-landscape, tablet10-portrait, tablet10-landscape
//   format: png (default), jpeg

2. Screenshot Presets Configuration #

const APP_SCREENSHOT_PRESETS = {
  // Phone screenshots (9:16 portrait, meets 1080px promotion requirement)
  'phone-portrait': { width: 1080, height: 1920, density: 1 },
  'phone-landscape': { width: 1920, height: 1080, density: 1 },
  
  // 7-inch tablet (9:16 portrait)
  'tablet7-portrait': { width: 1200, height: 1920, density: 1 },
  'tablet7-landscape': { width: 1920, height: 1200, density: 1 },
  
  // 10-inch tablet (9:16 portrait, higher res for larger screen)
  'tablet10-portrait': { width: 1600, height: 2560, density: 1 },
  'tablet10-landscape': { width: 2560, height: 1600, density: 1 },
};

3. Dashboard Page: /app-screenshots #

A dedicated HTML page at /app-screenshots that:

• Shows all generated screenshots in a grid
• Provides download buttons for each screenshot
• Shows zip download for all screenshots
• Displays Google Play compliance status (checkmarks for valid dimensions)
• Allows piece selection (defaults to prompt)
• Allows regeneration with force refresh

4. Modifications to server.mjs #

Add new routes:

// Dashboard page
app.get('/app-screenshots', (req, res) => {
  // Serve HTML dashboard
});

// Individual screenshot endpoint
app.get('/app-screenshots/:preset/:piece.png', async (req, res) => {
  // Generate/cache screenshot with specified preset
});

// Bulk download endpoint
app.get('/app-screenshots/download/:piece', async (req, res) => {
  // Return zip file with all screenshots
});

// JSON status/listing
app.get('/api/app-screenshots/:piece', async (req, res) => {
  // Return JSON with all screenshot URLs and status
});

5. Modifications to grabber.mjs #

• Update captureFrame() to support larger viewport sizes (up to 2560x1600 for 10" tablet)
• Add new helper for generating screenshots at specific app store presets
• Ensure proper caching with preset-specific cache keys

6. Piece-Specific Considerations for prompt.mjs #

The prompt.mjs piece is the main entry point of the app. For screenshots:

• May want to show it in different states (empty prompt, with text, after command)
• Consider adding URL params to control prompt state for varied screenshots
• Example: /prompt?screenshot-state=welcome or /prompt?screenshot-state=typing

7. Caching Strategy #

Cache key format:

app-screenshots/{piece}-{preset}-{gitVersion}.png

• Cache TTL: 7 days (longer since app store submissions are infrequent)
• Force regeneration available via ?force=true query param

File Changes Required #

1. /oven/server.mjs

   • Add /app-screenshots dashboard route
   • Add /app-screenshots/:preset/:piece.png capture route
   • Add /api/app-screenshots/:piece JSON status route
   • Add /app-screenshots/download/:piece bulk download route

2. /oven/grabber.mjs

   • Ensure viewport can handle 2560x1600 (may need to increase max limits)
   • Add APP_SCREENSHOT_PRESETS constant export

Dashboard UI Mockup #

┌─────────────────────────────────────────────────────────────┐
│ 📱 App Store Screenshots                                    │
│ Piece: [prompt     ▼]  [🔄 Regenerate All]  [📦 Download ZIP]│
├─────────────────────────────────────────────────────────────┤
│                                                              │
│  PHONE SCREENSHOTS                                           │
│  ┌──────────┐ ┌──────────────────┐                          │
│  │          │ │                  │                          │
│  │ Portrait │ │    Landscape     │                          │
│  │ 1080x1920│ │    1920x1080     │                          │
│  │   ✅     │ │       ✅         │                          │
│  └──────────┘ └──────────────────┘                          │
│   [Download]   [Download]                                    │
│                                                              │
│  7-INCH TABLET SCREENSHOTS                                   │
│  ┌──────────┐ ┌──────────────────┐                          │
│  │          │ │                  │                          │
│  │ Portrait │ │    Landscape     │                          │
│  │ 1200x1920│ │    1920x1200     │                          │
│  │   ✅     │ │       ✅         │                          │
│  └──────────┘ └──────────────────┘                          │
│   [Download]   [Download]                                    │
│                                                              │
│  10-INCH TABLET SCREENSHOTS                                  │
│  ┌──────────┐ ┌──────────────────┐                          │
│  │          │ │                  │                          │
│  │ Portrait │ │    Landscape     │                          │
│  │ 1600x2560│ │    2560x1600     │                          │
│  │   ✅     │ │       ✅         │                          │
│  └──────────┘ └──────────────────┘                          │
│   [Download]   [Download]                                    │
│                                                              │
└─────────────────────────────────────────────────────────────┘

Implementation Steps #

1. Add APP_SCREENSHOT_PRESETS constant to grabber.mjs
2. Update viewport limits in puppeteer config if needed
3. Add /app-screenshots dashboard HTML route to server.mjs
4. Add /app-screenshots/:preset/:piece.png capture route
5. Add /api/app-screenshots/:piece JSON API route
6. Add bulk ZIP download functionality
7. Test with prompt piece at all resolutions
8. Deploy to oven.aesthetic.computer
9. Generate screenshots and verify Google Play compliance

URLs After Implementation #

• Dashboard: https://oven.aesthetic.computer/app-screenshots
• Individual Screenshots: https://oven.aesthetic.computer/app-screenshots/phone-portrait/prompt.png
• JSON API: https://oven.aesthetic.computer/api/app-screenshots/prompt
• Bulk Download: https://oven.aesthetic.computer/app-screenshots/download/prompt

Notes #

• The existing /grab/:format/:width/:height/:piece endpoint can handle these sizes, but the dedicated /app-screenshots endpoint provides:

  • Preset configurations matching Google Play requirements
  • Dashboard for easy preview and download
  • Compliance verification
  • Bulk download capability

• Consider capturing multiple pieces beyond just prompt for app variety:

  • painting or nopaint - drawing mode
  • tone or song - music creation
  • wand - generative art
  • $roz or other KidLisp pieces - code examples