# Demo media

README 用的圖（`shots/readme/`）一律從**目前這版程式**重拍，不要用 `shots/`（那是舊的對比圖）。

統一用深色（`ANYBOT_SHOT_DARK=1`）、照 2x 拍、再壓到 960px 寬：README 的圖就是 960px，這樣在 Retina 上清楚，也不會撐破文件欄（約 980px）。

## 拍桌面

```sh
cargo build --bin anybot
export ANYBOT_DATA_DIR=/tmp/anybot-readme-shot ANYBOT_SHOT_FRAMES=48 \
       ANYBOT_SHOT_SIZE=1920x1200 ANYBOT_SHOT_DARK=1

ANYBOT_SHOT_VIEW=chat ANYBOT_SHOT_NOPOPUP=1 target/debug/anybot --screenshot /tmp/chat.png
target/debug/anybot --screenshot /tmp/ask.png          # 預設示範資料：裡面就有允許卡片
ANYBOT_SHOT_VIEW=routines ANYBOT_SHOT_NOPOPUP=1 target/debug/anybot --screenshot /tmp/routines.png

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` 把允許卡片壓掉（拍乾淨的畫面）。要卡片就**不要**加 `ANYBOT_SHOT_VIEW`，預設的示範資料會選到正在等允許的那個 Bot。

## 拍手機

`shots/readme/phone.png` 是目前的 `mobile/index.html`，390×844 的瀏覽器截圖，壓到 300px 寬。不是舊的 `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)"
```

手機頁面預設跟著系統深淺色；README 的圖是深色，拍之前在那支手機（或 Chrome 的模擬偏好）設成深色。

## 電腦 + 手機那張合成圖

README 中間用一張合成圖（左：桌面允許卡片，右：手機登入），手機才不會被单独摆在中间、被挤到一边。合成是程式做的，重拍後重跑一次：

```sh
python3 docs/demo/composite.py     # shots/readme/{ask,phone}.png → computer-phone.png
```

改大小就編輯 `docs/demo/composite.py` 最上面的 `W / pad / gap / phone_w`。

## 動圖（還沒有）

README 上最好有一段會動的。要录：

1. 打開桌面 App、金鑰設好，螢幕 1440p，關掉通知。
2. 录 20–40 秒一件事從頭到尾，例如「整理下載資料夾」（聊天 → 計畫 → 工具步驟 → 檔案真的被搬動），加一段操作電腦（開瀏覽器、填表、在送出前停下——**允許卡片跳出來那一刻就是產品**）。
3. 輸出 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`
   （控制在 8 MB 內，太大就只留一件事）
4. 檔名 `docs/demo/anybot.gif`，README 註解裡有要放的位置。

偏好：一支 GIF（桌面 + 電腦操作 + 允許卡片）加一支 30 秒 MP4（`demo.mp4`，手機配對新電腦）。

改完圖，照 [../readme-style.md](../readme-style.md) 最後面那段檢查有沒有跑版。