# Demo media

README stills in `shots/readme/` are taken from the current build, not from `shots/` (those are older comparisons).

Capture at 2x, then downscale to 960 px wide: the README image is 960 px, so a 1920 px capture stays sharp on a Retina screen and does not overflow the 980 px document column.

```sh
cargo build --bin anybot
export ANYBOT_DATA_DIR=/tmp/anybot-readme-shot ANYBOT_SHOT_FRAMES=48

# 1) shoot at 2x (1920x1200)
ANYBOT_SHOT_SIZE=1920x1200 ANYBOT_SHOT_VIEW=chat ANYBOT_SHOT_NOPOPUP=1 target/debug/anybot --screenshot /tmp/chat.png
ANYBOT_SHOT_SIZE=1920x1200 target/debug/anybot --screenshot /tmp/ask.png        # the default demo view: the approval card is in it
ANYBOT_SHOT_SIZE=1920x1200 ANYBOT_SHOT_VIEW=routines ANYBOT_SHOT_NOPOPUP=1 target/debug/anybot --screenshot /tmp/routines.png

# 2) downscale to 960 wide
python3 - <<'PY'
from PIL import Image
for n in ('chat', 'ask', 'routines'):
    im = Image.open(f'/tmp/{n}.png')
    im.resize((960, round(im.size[1] * 960 / im.size[0])), Image.LANCZOS).save(f'shots/readme/{n}.png', optimize=True)
PY
```

`ANYBOT_SHOT_NOPOPUP=1` keeps the approval card away (a plain screen). The card shot is the default demo view, which selects the computer helper mid-task, so run that one with no `ANYBOT_SHOT_VIEW` and no `ANYBOT_SHOT_NOPOPUP`.

`shots/readme/phone.png` is the current `mobile/index.html` sign-in page, captured in a 390×844 browser and downscaled to 300 px wide. It is not the old collage in `shots/phone.png`.

```sh
python3 -m http.server 8766 --directory mobile &
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --headless=new --disable-gpu \
  --hide-scrollbars --window-size=390,844 --screenshot=/tmp/phone.png http://127.0.0.1:8766/index.html
kill %1
python3 -c "from PIL import Image; im=Image.open('/tmp/phone.png'); im.resize((300, round(im.size[1]*300/im.size[0])), Image.LANCZOS).save('shots/readme/phone.png', optimize=True)"
```

After any README image change, check the page does not overflow: see [../readme-style.md](../readme-style.md).

The README shows a demo here. To record one:

1. Start AnyBot (desktop) and a bot with a key; run at 1440p, hide notifications.
2. Record a 20–40 s clip of one complete task, e.g. "organise the Downloads folder"
   (chat → plan → tool steps → files moved) and one computer-use task
   (bot opens the browser, fills a form, stops before Send — the approval card
   popping up **is** the product).
3. Export GIF: `ffmpeg -i clip.mov -vf "fps=12,scale=960:-1:flags=lanczos,split[a][b];[a]palettegen[p];[b][p]paletteuse" docs/demo/anybot.gif`
   (keep it under ~8 MB; if bigger, cut to one task).
4. Name it `docs/demo/anybot.gif`. The README comment shows where to un-comment
   the `<img>` line.

Preferred: one GIF (desktop, computer-use with the approval card) + one 30 s
MP4 (`demo.mp4`) of the phone app pairing a new machine.