daniel.w
/
AnyBot
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
AnyBot/docs/demo/README.md

3.2 KiB
Raw Blame History

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 上最好有一段會動的。要录：

  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 最後面那段檢查有沒有跑版。