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

65 lines
3.2 KiB
Markdown
Raw Normal View History

English entry point: README.en.md, docs/en/*, demo recording guide (P2) - README.en.md: full English front door (install table, quick start, deployment, security-in-one-paragraph, license) + a positioning table against OpenClaw / OpenHands / Khoj / UI-TARS - docs/en/{architecture,install,multi-device,protocol}.md: faithful English summaries of the Chinese docs, each linking to the canonical version - docs/demo/README.md: how to record the GIF/MP4 the README reserves space for - language switch line at the top of the Chinese README
2026-11-09 09:56:16 +00:00
# Demo media
One computer-and-phone still, and the README stops advertising its style guide 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.
2026-11-10 06:21:06 +00:00
README 用的圖（`shots/readme/`）一律從**目前這版程式**重拍，不要用 `shots/`（那是舊的對比圖）。
Readmes: the shape top-starred projects use, and no more overflow Studied OpenClaw, ollama, Dify, AnythingLLM, Meetily, LobeHub, n8n: logo, one-line pitch, language bar, badges, hero shot, install in the first third as fenced blocks, quick start, architecture, a two-column document table, short closing sections. Both READMEs now follow that. What was breaking the page: a three-column install table holding a 90-character URL (URLs cannot wrap, so the table pushed the page sideways) and a 1414px PowerShell line inside a code block. Install moved to code fences, the long line is wrapped, the Windows hands snippet is one statement per line, and screenshots are re-taken at 2x and downscaled to 960 px so they fit the ~980 px document column and stay sharp on Retina. docs/readme-style.md records the rules and how to check the render locally (marked + headless Chrome, measure scrollWidth and pre.scrollWidth).
2026-11-10 06:14:27 +00:00
One computer-and-phone still, and the README stops advertising its style guide 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.
2026-11-10 06:21:06 +00:00
統一用深色（`ANYBOT_SHOT_DARK=1`）、照 2x 拍、再壓到 960px 寬：README 的圖就是 960px，這樣在 Retina 上清楚，也不會撐破文件欄（約 980px）。
## 拍桌面
Readmes: lead with the picture, and take the pictures fresh Both languages now open with what AnyBot does, in plain words, before the install table and the flow diagram. The four stills are re-taken from this build (shots/readme/) and tracked, since the READMEs point at them; the old shots/ stayed ignored.
2026-11-10 06:07:02 +00:00
```sh
cargo build --bin anybot
One computer-and-phone still, and the README stops advertising its style guide 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.
2026-11-10 06:21:06 +00:00
export ANYBOT_DATA_DIR=/tmp/anybot-readme-shot ANYBOT_SHOT_FRAMES=48 \
ANYBOT_SHOT_SIZE=1920x1200 ANYBOT_SHOT_DARK=1
Readmes: the shape top-starred projects use, and no more overflow Studied OpenClaw, ollama, Dify, AnythingLLM, Meetily, LobeHub, n8n: logo, one-line pitch, language bar, badges, hero shot, install in the first third as fenced blocks, quick start, architecture, a two-column document table, short closing sections. Both READMEs now follow that. What was breaking the page: a three-column install table holding a 90-character URL (URLs cannot wrap, so the table pushed the page sideways) and a 1414px PowerShell line inside a code block. Install moved to code fences, the long line is wrapped, the Windows hands snippet is one statement per line, and screenshots are re-taken at 2x and downscaled to 960 px so they fit the ~980 px document column and stay sharp on Retina. docs/readme-style.md records the rules and how to check the render locally (marked + headless Chrome, measure scrollWidth and pre.scrollWidth).
2026-11-10 06:14:27 +00:00
One computer-and-phone still, and the README stops advertising its style guide 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.
2026-11-10 06:21:06 +00:00
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
Readmes: the shape top-starred projects use, and no more overflow Studied OpenClaw, ollama, Dify, AnythingLLM, Meetily, LobeHub, n8n: logo, one-line pitch, language bar, badges, hero shot, install in the first third as fenced blocks, quick start, architecture, a two-column document table, short closing sections. Both READMEs now follow that. What was breaking the page: a three-column install table holding a 90-character URL (URLs cannot wrap, so the table pushed the page sideways) and a 1414px PowerShell line inside a code block. Install moved to code fences, the long line is wrapped, the Windows hands snippet is one statement per line, and screenshots are re-taken at 2x and downscaled to 960 px so they fit the ~980 px document column and stay sharp on Retina. docs/readme-style.md records the rules and how to check the render locally (marked + headless Chrome, measure scrollWidth and pre.scrollWidth).
2026-11-10 06:14:27 +00:00
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
```
One computer-and-phone still, and the README stops advertising its style guide 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.
2026-11-10 06:21:06 +00:00
`ANYBOT_SHOT_NOPOPUP=1` 把允許卡片壓掉（拍乾淨的畫面）。要卡片就**不要**加 `ANYBOT_SHOT_VIEW`，預設的示範資料會選到正在等允許的那個 Bot。
## 拍手機
Readmes: the shape top-starred projects use, and no more overflow Studied OpenClaw, ollama, Dify, AnythingLLM, Meetily, LobeHub, n8n: logo, one-line pitch, language bar, badges, hero shot, install in the first third as fenced blocks, quick start, architecture, a two-column document table, short closing sections. Both READMEs now follow that. What was breaking the page: a three-column install table holding a 90-character URL (URLs cannot wrap, so the table pushed the page sideways) and a 1414px PowerShell line inside a code block. Install moved to code fences, the long line is wrapped, the Windows hands snippet is one statement per line, and screenshots are re-taken at 2x and downscaled to 960 px so they fit the ~980 px document column and stay sharp on Retina. docs/readme-style.md records the rules and how to check the render locally (marked + headless Chrome, measure scrollWidth and pre.scrollWidth).
2026-11-10 06:14:27 +00:00
One computer-and-phone still, and the README stops advertising its style guide 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.
2026-11-10 06:21:06 +00:00
`shots/readme/phone.png` 是目前的 `mobile/index.html`，390×844 的瀏覽器截圖，壓到 300px 寬。不是舊的 `shots/phone.png` 那張拼圖。
Readmes: the shape top-starred projects use, and no more overflow Studied OpenClaw, ollama, Dify, AnythingLLM, Meetily, LobeHub, n8n: logo, one-line pitch, language bar, badges, hero shot, install in the first third as fenced blocks, quick start, architecture, a two-column document table, short closing sections. Both READMEs now follow that. What was breaking the page: a three-column install table holding a 90-character URL (URLs cannot wrap, so the table pushed the page sideways) and a 1414px PowerShell line inside a code block. Install moved to code fences, the long line is wrapped, the Windows hands snippet is one statement per line, and screenshots are re-taken at 2x and downscaled to 960 px so they fit the ~980 px document column and stay sharp on Retina. docs/readme-style.md records the rules and how to check the render locally (marked + headless Chrome, measure scrollWidth and pre.scrollWidth).
2026-11-10 06:14:27 +00:00
```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)"
Readmes: lead with the picture, and take the pictures fresh Both languages now open with what AnyBot does, in plain words, before the install table and the flow diagram. The four stills are re-taken from this build (shots/readme/) and tracked, since the READMEs point at them; the old shots/ stayed ignored.
2026-11-10 06:07:02 +00:00
```
One computer-and-phone still, and the README stops advertising its style guide 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.
2026-11-10 06:21:06 +00:00
手機頁面預設跟著系統深淺色；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 上最好有一段會動的。要录：
Readmes: lead with the picture, and take the pictures fresh Both languages now open with what AnyBot does, in plain words, before the install table and the flow diagram. The four stills are re-taken from this build (shots/readme/) and tracked, since the READMEs point at them; the old shots/ stayed ignored.
2026-11-10 06:07:02 +00:00
One computer-and-phone still, and the README stops advertising its style guide 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.
2026-11-10 06:21:06 +00:00
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 註解裡有要放的位置。
English entry point: README.en.md, docs/en/*, demo recording guide (P2) - README.en.md: full English front door (install table, quick start, deployment, security-in-one-paragraph, license) + a positioning table against OpenClaw / OpenHands / Khoj / UI-TARS - docs/en/{architecture,install,multi-device,protocol}.md: faithful English summaries of the Chinese docs, each linking to the canonical version - docs/demo/README.md: how to record the GIF/MP4 the README reserves space for - language switch line at the top of the Chinese README
2026-11-09 09:56:16 +00:00
One computer-and-phone still, and the README stops advertising its style guide 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.
2026-11-10 06:21:06 +00:00
偏好：一支 GIF（桌面 + 電腦操作 + 允許卡片）加一支 30 秒 MP4（`demo.mp4`，手機配對新電腦）。
English entry point: README.en.md, docs/en/*, demo recording guide (P2) - README.en.md: full English front door (install table, quick start, deployment, security-in-one-paragraph, license) + a positioning table against OpenClaw / OpenHands / Khoj / UI-TARS - docs/en/{architecture,install,multi-device,protocol}.md: faithful English summaries of the Chinese docs, each linking to the canonical version - docs/demo/README.md: how to record the GIF/MP4 the README reserves space for - language switch line at the top of the Chinese README
2026-11-09 09:56:16 +00:00
One computer-and-phone still, and the README stops advertising its style guide 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.
2026-11-10 06:21:06 +00:00
改完圖，照 [../readme-style.md](../readme-style.md) 最後面那段檢查有沒有跑版。