daniel.w
/
AnyBot
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
AnyBot/docs/demo
History
王性驊 81449be33d 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 14:14:27 +08:00
..
README.md Readmes: the shape top-starred projects use, and no more overflow 2026-11-10 14:14:27 +08:00

README.md

Demo media

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.

cargo build --bin anybot
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.

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)"

After any README image change, check the page does not overflow: see ../readme-style.md.

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.