Skip to content

docs: round the corners of the webui screenshots and float them - #582

Merged
LivXue merged 1 commit into
mainfrom
docs/webui_screenshot_polish
Sep 21, 2026
Merged

LivXue merged 1 commit into
mainfrom
docs/webui_screenshot_polish

Conversation

@LivXue

@LivXue LivXue commented Sep 21, 2026

Copy link
Copy Markdown
Member

Summary

The four Launch WebUI figures were flat rectangles butted against the page.
They now carry a 24px corner radius and a soft drop shadow, so each reads as a
window floating on the page rather than a slab of pixels pasted into it.

  • The capture is untouched. The same 1440x900 content sits inside a 1588x1048
    frame; the extra 74px on each side is the room the blur needs, and nothing in
    the interface was re-shot.
  • The canvas is RGBA. Both the rounded corners and the shadow are transparent,
    so GitHub composites them correctly on the light theme and on the dark one.
    On the dark theme a black shadow against #0d1117 is nearly invisible by
    construction, and only the rounding reads; a tinted shadow would fix that and
    would look dirty in the light theme, so the shadow stays neutral.
  • width stays at 90 percent. Because the padding is inside the image, the
    interface itself now renders about nine percent smaller than before. That is
    the space the shadow needs to read as depth, so it is kept rather than
    compensated for.
  • Both language pairs are replaced: English in README.md, Chinese in
    README.zh-CN.md.

The corner mask is drawn at 4x and resampled down, because PIL's
rounded_rectangle is aliased at 1x and leaves a visible stair-step on a
1440px edge.

Shadow parameters, for anyone reproducing them: radius 24, Gaussian blur 34,
offset 16 down, 30 percent black.

Assets are hosted as a comment on issue #505 rather than committed, per the
repository asset rule.

Type

  • Fix
  • Feature
  • Docs
  • CI / tooling
  • Refactor
  • Other

Verification

.venv/bin/python -m pytest tests/test_scope_canon.py tests/test_docs_site.py \
    tests/test_docker_runtime.py -q -p no:randomly
    -> 27 passed

make check-large-files        -> exit 0
make check-source-language    -> exit 0
make check-commits            -> exit 0

The gates were run over a committed range, not an empty diff.

Each uploaded asset was fetched back with a GET and compared by sha256 against
the local render; all four are byte identical. A HEAD request is not a valid
check here, because user-attachments URLs answer 403 to HEAD and 200 to GET.

Both README sections were rendered through the GitHub markdown API, which
confirms each file now references its own language's new asset and that the alt
text survived. The rounding and the shadow were inspected at 1:1 on a white and
on a #0d1117 backdrop before upload, to confirm the corner is clean and the
edge carries no light fringe on the dark theme.

The diff is four URLs, each appearing twice as the link target and the image
source. Alt text, captions, width and layout are unchanged, and no stale asset
id survives in either file.

  • Relevant tests pass locally
  • Relevant lint / type checks pass locally
  • User-facing docs or screenshots are updated when needed

Risk

Presentation only. Both READMEs render the same four captures with rounded
corners, a shadow, and slightly smaller interface content. No code, no build
output, no behaviour change.

Rollback is a revert of the single commit; the previous assets are still live
on issue #505, so the old figures would come back intact.

Backward compatibility is not applicable: no interface, config key or stored
value changes.

  • Security impact considered
  • Backward compatibility considered
  • Rollback path is clear for risky changes

Related Issues

#505

The four Launch WebUI captures now carry a 24px corner radius and a soft
drop shadow, on a transparent canvas so they composite correctly on both
the light and the dark README theme.

The capture itself is untouched: the same 1440x900 content sits inside a
1588x1048 frame, the extra 74px on each side being the padding the blur
needs. Width stays at 90 percent, so the interface renders about nine
percent smaller than before, which is the room the shadow reads in.

Both language pairs are replaced, English in README.md and Chinese in
README.zh-CN.md, and the assets stay hosted on issue 505.

Co-authored-by: Claude (claude-opus-5[1m]) <noreply@anthropic.com>

@gloryfromca gloryfromca left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No blockers; this can merge as far as I am concerned.

Reviewed the full github/main...ca80936 diff and the surrounding README markup/history. All four replacement URLs resolve to the intended 1588x1048 RGBA assets; each original 1440x900 capture is pixel-identical wherever the rounded mask remains fully opaque, and the language-specific screenshots, links, alt text, captions, and 90% sizing remain correctly paired.

I covered the applicable AGENTS.md rules (Markdown language exemption, external asset policy, branch/commit conventions), the complete diff, surrounding docs and history, live asset behavior, backward compatibility, test integrity, and architecture applicability. There are no runtime callers or architecture boundaries affected, and no tests were changed or weakened.

Verification:

  • uv run pytest tests/test_scope_canon.py tests/test_docs_site.py tests/test_docker_runtime.py -q -p no:randomly - 27 passed
  • Direct Makefile-equivalent commitlint, commit-message, large-file, and source-language commands - passed (make itself is unavailable in this environment)

@LivXue
LivXue merged commit 87c7033 into main Sep 21, 2026
21 checks passed
@LivXue
LivXue deleted the docs/webui_screenshot_polish branch September 21, 2026 05:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants