Skip to content

Embed README example video#6508

Merged
Alek99 merged 4 commits into
mainfrom
codex/readme-video-example
May 14, 2026
Merged

Embed README example video#6508
Alek99 merged 4 commits into
mainfrom
codex/readme-video-example

Conversation

@Alek99
Copy link
Copy Markdown
Member

@Alek99 Alek99 commented May 14, 2026

Summary

  • Replace the long README image generation example walkthrough with a centered video player.
  • Add a short generic explanation of building an image generation app with Reflex.
  • Use the uploaded GitHub attachment video URL so README preview renders the video.
  • Add a static poster image fallback so PyPI-style renderers still show a visual preview when <video> is stripped.
  • Remove the committed MP4 asset from the branch.

Validation

  • Ran git diff --check.
  • Verified GitHub Markdown rendering through gh api markdown; the attachment URL produces a native <video> element.
  • Verified PyPI-style rendering with readme_renderer.markdown; the sanitized output preserves the linked poster <img> fallback.

@codspeed-hq
Copy link
Copy Markdown

codspeed-hq Bot commented May 14, 2026

Merging this PR will not alter performance

✅ 24 untouched benchmarks
⏩ 2 skipped benchmarks1


Comparing codex/readme-video-example (f0cc48d) with main (c3c720f)2

Open in CodSpeed

Footnotes

  1. 2 benchmarks were skipped, so the baseline results were used instead. If they were deleted from the codebase, click here and archive them to remove them from the performance reports.

  2. No successful run was found on main (39c74cb) during the generation of this report, so c3c720f was used instead as the comparison base. There might be some changes unrelated to this pull request in this report.

@Alek99 Alek99 changed the title [codex] Embed README example video Embed README example video May 14, 2026
@Alek99 Alek99 marked this pull request as ready for review May 14, 2026 18:53
@Alek99 Alek99 requested a review from a team as a code owner May 14, 2026 18:53
@greptile-apps
Copy link
Copy Markdown
Contributor

greptile-apps Bot commented May 14, 2026

Greptile Summary

This PR replaces the extended DALL-E walkthrough section in README.md — which included a GIF, full Python source code, and a section-by-section breakdown — with a single prose sentence and an HTML <video> embed pointing to a GitHub user-attachment URL.

  • The <video> element uses the correct GitHub CDN format (github.com/user-attachments/assets/…) with controls and muted attributes, and provides a text-link fallback inside the tag for non-supporting environments.
  • The prior <img> tag used raw.githubusercontent.com which renders universally; the replacement <video> tag is sanitized by PyPI's HTML allowlist, so visitors from PyPI will only see the fallback link text rather than any visual content.
  • All detailed educational content (complete source code, UI/State/Event Handler/Routing explanations) is removed; this is an intentional scope change described in the PR.

Confidence Score: 4/5

Safe to merge on GitHub where the video renders natively; the only degradation is on PyPI where the <video> tag is stripped and only the fallback text link is shown.

The change is confined to README documentation with no code impact. The video embed works as intended on GitHub, and a text fallback exists. The main trade-off is that the PyPI project page — previously showing the animated GIF — will now show only a plain hyperlink.

README.md — specifically how the <video> block renders on PyPI and other non-GitHub Markdown hosts.

Important Files Changed

Filename Overview
README.md Replaces the detailed DALL-E code walkthrough (GIF + full Python source + section-by-section breakdown) with a one-liner and an HTML <video> embed; the <video> tag is stripped by non-GitHub Markdown renderers such as PyPI, leaving only the fallback text link.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[User views README] --> B{Renderer}
    B -->|GitHub.com| C[Native video player rendered with controls + muted]
    B -->|PyPI / other registries| D[video tag stripped by sanitizer]
    D --> E[Fallback anchor text shown: Watch the Reflex image generation example video.]
    B -->|Raw Markdown tools e.g. pandoc VS Code| F[HTML block passed through - behavior depends on tool]
Loading

Reviews (1): Last reviewed commit: "Make README video description generic" | Re-trigger Greptile

Comment thread README.md Outdated
Comment on lines +108 to +112
Build an image generation app in Python with Reflex: define the UI, manage state in a class, and call an image model from an event handler.

<div align="center">
<img src="https://raw.githubusercontent.com/reflex-dev/reflex/main/docs/images/dalle.gif" alt="A frontend wrapper for DALL·E, shown in the process of generating an image." width="550" />
<video src="https://github.com/user-attachments/assets/aaff28ad-8b3c-43bf-967e-439ee34c8a87" width="900" controls muted>
<a href="https://github.com/user-attachments/assets/aaff28ad-8b3c-43bf-967e-439ee34c8a87">Watch the Reflex image generation example video.</a>
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

P2 <video> tag stripped on non-GitHub renderers

The original <img src="https://raw.githubusercontent.com/..."> renders everywhere (GitHub, PyPI, npm registry, offline Markdown tools). The new <video> tag is sanitized out by PyPI's HTML allowlist, so visitors arriving from the PyPI project page will only see the fallback anchor text Watch the Reflex image generation example video. — no visual. Consider keeping a static poster image (e.g. a thumbnail from the GIF) as a visible fallback, or verifying whether PyPI display matters for this repo.

Comment thread README.md

<div align="center">
<img src="https://raw.githubusercontent.com/reflex-dev/reflex/main/docs/images/dalle.gif" alt="A frontend wrapper for DALL·E, shown in the process of generating an image." width="550" />
<video src="https://github.com/user-attachments/assets/aaff28ad-8b3c-43bf-967e-439ee34c8a87" width="900" controls muted poster="https://raw.githubusercontent.com/reflex-dev/reflex/main/docs/images/reflex-image-generation-app.png">
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.

vidoes don't seem to be supported on pypi, if you would like, you can do a GIF/APNG instead

@Alek99 Alek99 merged commit d6618b2 into main May 14, 2026
69 of 70 checks passed
@Alek99 Alek99 deleted the codex/readme-video-example branch May 14, 2026 20:32
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