818e551e6b
The phone shot stood alone as a 300px column, so it read as cut off at one side. The desktop approval card and the phone sign-in are now one composite (docs/demo/composite.py), and every README still is dark and 2x-captured, so the page reads as one product. The document table lists user-facing documents; the README style notes stay in docs/ for whoever edits the README. |
||
|---|---|---|
| .. | ||
| README.md | ||
| composite.py | ||
README.md
Demo media
README 用的圖（shots/readme/）一律從目前這版程式重拍，不要用 shots/（那是舊的對比圖）。
統一用深色（ANYBOT_SHOT_DARK=1）、照 2x 拍、再壓到 960px 寬：README 的圖就是 960px，這樣在 Retina 上清楚，也不會撐破文件欄（約 980px）。
拍桌面
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 那張拼圖。
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 中間用一張合成圖（左：桌面允許卡片，右：手機登入），手機才不會被单独摆在中间、被挤到一边。合成是程式做的，重拍後重跑一次：
python3 docs/demo/composite.py # shots/readme/{ask,phone}.png → computer-phone.png
改大小就編輯 docs/demo/composite.py 最上面的 W / pad / gap / phone_w。
動圖（還沒有）
README 上最好有一段會動的。要录：
- 打開桌面 App、金鑰設好，螢幕 1440p，關掉通知。
- 录 20–40 秒一件事從頭到尾，例如「整理下載資料夾」（聊天 → 計畫 → 工具步驟 → 檔案真的被搬動），加一段操作電腦（開瀏覽器、填表、在送出前停下——允許卡片跳出來那一刻就是產品）。
- 輸出 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 內，太大就只留一件事） - 檔名
docs/demo/anybot.gif，README 註解裡有要放的位置。
偏好：一支 GIF（桌面 + 電腦操作 + 允許卡片）加一支 30 秒 MP4（demo.mp4，手機配對新電腦）。
改完圖，照 ../readme-style.md 最後面那段檢查有沒有跑版。