Add a Capture button directly under the player

A second 'Capture current frame' button sits right under the video player (step 1),
in addition to the one in the frames section (step 4); both share the same handler.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

app.py

@@ -399,6 +399,9 @@ def build_ui() -> gr.Blocks:
             file_types=[".mp4", ".mov", ".mkv", ".webm", ".avi", ".m4v", ".mpg", ".mpeg"],
         )
         player = gr.HTML()
+        capture_btn_top = gr.Button(
+            "📸 Capture current frame", variant="primary",
+        )
 
         # 2 · Transcribe  →  3 · Generate guide
         gr.Markdown("### 2 · Transcribe → 3 · Generate guide")
@@ -455,12 +458,15 @@ def build_ui() -> gr.Blocks:
         hf_token.submit(on_token_set, [hf_token], [status])
         upload.change(on_upload, [upload, session_state], [player, video_state, status])
 
-        capture_btn.click(
-            on_capture,
-            inputs=[session_state, frames_state, cap_url, cap_time],
-            outputs=[gallery, frames_state, status],
-            js=CAPTURE_JS,
-        )
+        # Both capture buttons (under the player, and in the frames section) behave
+        # identically — grab the player's current frame into the pool.
+        for _btn in (capture_btn_top, capture_btn):
+            _btn.click(
+                on_capture,
+                inputs=[session_state, frames_state, cap_url, cap_time],
+                outputs=[gallery, frames_state, status],
+                js=CAPTURE_JS,
+            )
         auto_btn.click(
             on_auto,
             [session_state, frames_state, video_state, transcript_state, draft_state, hf_token],