aesthetic.computer
Monorepo for Aesthetic.Computer
aesthetic.computer
1# Grab Worker - Development Setup
2
3## Overview
4
5The grab worker handles screenshot generation for aesthetic.computer. This guide covers local development and testing.
6
7---
8
9## Local Development
10
11### Option 1: Wrangler Dev (Recommended)
12
13Run the worker locally with Cloudflare's dev environment:
14
15```fish
16cd /workspaces/aesthetic-computer/grab
17npm run dev
18```
19
20This starts a local server at `http://127.0.0.1:8787`
21
22**Test locally:**
23```fish
24curl -I "http://127.0.0.1:8787/icon/128x128/prompt.png"
25```
26
27### Option 2: Remote Testing
28
29Use the deployed worker during development:
30
31```fish
32# Production worker
33curl -I "https://grab.aesthetic.computer/icon/128x128/prompt.png"
34
35# Or workers.dev URL
36curl -I "https://aesthetic-grab.aesthetic-computer.workers.dev/icon/128x128/prompt.png"
37```
38
39---
40
41## Integration with Netlify Dev
42
43When running `netlify dev` (typically on `http://localhost:8888`), the redirects in `netlify.toml` will proxy requests to the grab worker:
44
451. **Local aesthetic.computer** makes request to `/icon/128x128/prompt.png`
462. **Netlify redirect** proxies to `https://grab.aesthetic.computer/icon/128x128/prompt.png`
473. **Grab worker** generates and returns screenshot
48
49### Testing the Full Stack
50
51```fish
52# Start netlify dev
53cd /workspaces/aesthetic-computer
54netlify dev
55
56# In another terminal, test icon generation
57curl -I "http://localhost:8888/icon/128x128/prompt.png"
58
59# Should see redirect to grab.aesthetic.computer
60```
61
62---
63
64## Dev Stack Integration
65
66### Adding to Emacs Web Panels
67
68To run the grab worker in your dev stack alongside other services:
69
701. **Create an Emacs pane** for the grab worker:
71 ```fish
72 # In your dev startup script or manually
73 cd /workspaces/aesthetic-computer/grab && npm run dev
74 ```
75
762. **Monitor logs** with wrangler tail:
77 ```fish
78 cd /workspaces/aesthetic-computer/grab
79 npx wrangler tail
80 ```
81
823. **Check worker status:**
83 ```fish
84 cd /workspaces/aesthetic-computer/grab
85 npx wrangler dev --test-scheduled
86 ```
87
88### Environment Variables for Development
89
90The worker automatically detects localhost URLs and adjusts timeouts:
91
92- Production timeout: 30 seconds
93- Development: Can increase if needed by updating `wrangler.toml`
94
95---
96
97## Debugging
98
99### View Real-time Logs
100
101```fish
102cd /workspaces/aesthetic-computer/grab
103npx wrangler tail
104
105# In another terminal, trigger a screenshot
106curl "https://grab.aesthetic.computer/icon/256x256/prompt.png" > /dev/null
107```
108
109### Common Issues
110
111**1. Empty Screenshots**
112- Ensure `@cloudflare/puppeteer` is latest version (not 0.0.1)
113- Check browser binding is active in wrangler.toml
114
115**2. Timeout Errors**
116- Increase `SCREENSHOT_TIMEOUT_MS` in wrangler.toml
117- Check if aesthetic.computer piece loads properly
118
119**3. 404 on Custom Domain**
120- Custom domain may not be set up yet
121- Use `aesthetic-grab.aesthetic-computer.workers.dev` URL instead
122
123**4. Canvas Not Found**
124- Piece may not have rendered yet
125- Increase `RENDER_DELAY_MS` in wrangler.toml
126- Check if piece uses `window.preloaded` flag
127
128---
129
130## Local vs Production URLs
131
132### Production (After Custom Domain Setup)
133```
134https://grab.aesthetic.computer/icon/128x128/prompt.png
135https://grab.aesthetic.computer/preview/1200x630/prompt.png
136```
137
138### Workers.dev (Always Available)
139```
140https://aesthetic-grab.aesthetic-computer.workers.dev/icon/128x128/prompt.png
141https://aesthetic-grab.aesthetic-computer.workers.dev/preview/1200x630/prompt.png
142```
143
144### Local Development
145```
146http://127.0.0.1:8787/icon/128x128/prompt.png
147http://127.0.0.1:8787/preview/1200x630/prompt.png
148```
149
150---
151
152## Testing Query Parameters
153
154The worker constructs URLs with query parameters to tell the aesthetic.computer client which resolution to render:
155
156```fish
157# Icon request becomes:
158# https://aesthetic.computer/prompt?icon=128x128
159
160# Preview request becomes:
161# https://aesthetic.computer/prompt?preview=1200x630
162
163# Test this by checking logs:
164npx wrangler tail
165```
166
167You should see log messages like:
168```
169Taking screenshot: 128x128 of https://aesthetic.computer/prompt?icon=128x128
170Canvas element found
171Screenshot generated successfully
172```
173
174---
175
176## Hot Reloading
177
178Wrangler dev supports hot reloading:
179
1801. Make changes to `src/index.ts`
1812. Save the file
1823. Wrangler automatically rebuilds and restarts
1834. Test with curl immediately
184
185---
186
187## Performance Monitoring
188
189### Check Screenshot Generation Time
190
191```fish
192curl -w "\nTime: %{time_total}s\n" -o /dev/null -s \
193 "https://grab.aesthetic.computer/icon/128x128/prompt.png"
194```
195
196Typical times:
197- **First request** (cold start): ~8-12 seconds
198- **Cached requests**: < 1 second
199- **Browser reuse**: ~3-5 seconds
200
201### Monitor Durable Object State
202
203Check if browser sessions are being reused:
204
205```fish
206npx wrangler tail --format json | jq '.logs[] | select(.message | contains("Browser DO"))'
207```
208
209You should see:
210- `Browser DO: setting alarm` - Browser staying alive
211- `Browser DO: alarm triggered` - Browser cleanup after 60s
212
213---
214
215## Next Steps
216
217- [ ] Set up custom domain `grab.aesthetic.computer` via Cloudflare Dashboard
218- [ ] Add grab worker startup to main dev scripts
219- [ ] Configure Emacs web panel for grab worker logs
220- [ ] Test integration with various pieces (wipe, line, etc.)
221- [ ] Monitor error rates in production