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

53 lines
2.8 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
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
README stills in `shots/readme/` are taken from the current build, not from `shots/` (those are older comparisons).
Capture at 2x, then downscale to 960 px wide: the README image is 960 px, so a 1920 px capture stays sharp on a Retina screen and does not overflow the 980 px document column.
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
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
export ANYBOT_DATA_DIR=/tmp/anybot-readme-shot ANYBOT_SHOT_FRAMES=48
# 1) shoot at 2x (1920x1200)
ANYBOT_SHOT_SIZE=1920x1200 ANYBOT_SHOT_VIEW=chat ANYBOT_SHOT_NOPOPUP=1 target/debug/anybot --screenshot /tmp/chat.png
ANYBOT_SHOT_SIZE=1920x1200 target/debug/anybot --screenshot /tmp/ask.png # the default demo view: the approval card is in it
ANYBOT_SHOT_SIZE=1920x1200 ANYBOT_SHOT_VIEW=routines ANYBOT_SHOT_NOPOPUP=1 target/debug/anybot --screenshot /tmp/routines.png
# 2) downscale to 960 wide
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` keeps the approval card away (a plain screen). The card shot is the default demo view, which selects the computer helper mid-task, so run that one with no `ANYBOT_SHOT_VIEW` and no `ANYBOT_SHOT_NOPOPUP`.
`shots/readme/phone.png` is the current `mobile/index.html` sign-in page, captured in a 390×844 browser and downscaled to 300 px wide. It is not the old collage in `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)"
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
```
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
After any README image change, check the page does not overflow: see [../readme-style.md](../readme-style.md).
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
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
The README shows a demo here. To record one:
1. Start AnyBot (desktop) and a bot with a key; run at 1440p, hide notifications.
2. Record a 20–40 s clip of one complete task, e.g. "organise the Downloads folder"
(chat → plan → tool steps → files moved) and one computer-use task
(bot opens the browser, fills a form, stops before Send — the approval card
popping up **is** the product).
3. Export 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`
(keep it under ~8 MB; if bigger, cut to one task).
4. Name it `docs/demo/anybot.gif`. The README comment shows where to un-comment
the `<img>` line.
Preferred: one GIF (desktop, computer-use with the approval card) + one 30 s
MP4 (`demo.mp4`) of the phone app pairing a new machine.