65 lines
3.2 KiB
Markdown
65 lines
3.2 KiB
Markdown
# 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) 最後面那段檢查有沒有跑版。
|