Enhance ball rings with neon glow effect (additive blending)

app.py

@@ -8,7 +8,6 @@ import math
 import statistics
 from pathlib import Path
 import json
-from functools import partial
 
 import plotly.graph_objects as go
 BASE64_VIDEO_PATH = Path("Kickit-Video-2025-07-09-13-47-18-389.b64")
@@ -3097,60 +3096,6 @@ CUSTOM_CSS = """
     width: fit-content;
     padding: 0.25rem 0.55rem;
 }
-.kt-info-btn button {
-    border-radius: 9999px;
-    width: 32px;
-    height: 32px;
-    padding: 0;
-    min-width: 32px;
-    background: #475569;
-    border: 1px solid #1f2937;
-    color: #fff;
-    font-weight: 700;
-    font-size: 0.85rem;
-}
-.kt-info-btn button:hover {
-    background: #334155;
-}
-.kt-info-close-trigger {
-    display: none !important;
-}
-.kt-info-overlay {
-    position: fixed;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.65);
-    display: none;
-    align-items: center;
-    justify-content: center;
-    z-index: 9999;
-    padding: 1.5rem;
-}
-.kt-info-overlay.active {
-    display: flex;
-}
-.kt-info-card {
-    background: #111827;
-    border: 1px solid #374151;
-    border-radius: 0.65rem;
-    max-width: 520px;
-    width: 100%;
-    padding: 1.2rem 1.4rem;
-    color: #f3f4f6;
-    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45);
-    position: relative;
-    font-size: 0.95rem;
-    line-height: 1.5;
-}
-.kt-info-close {
-    position: absolute;
-    top: 0.6rem;
-    right: 0.6rem;
-    border: none;
-    background: transparent;
-    color: #f87171;
-    font-size: 1.3rem;
-    cursor: pointer;
-}
 """
 
 BUTTON_TOOLTIPS = {
@@ -3192,41 +3137,12 @@ BUTTON_TOOLTIPS = {
     ),
 }
 
-
-BUTTON_TITLES = {
-    "btn-reset-session": "Reset Session",
-    "btn-mark-kick": "Manual · Mark Kick",
-    "btn-mark-impact": "Manual · Mark Impact",
-    "btn-detect-ball": "YOLO13 · Detect Ball",
-    "btn-track-ball-yolo": "YOLO13 · Track Ball",
-    "btn-detect-player": "YOLO13 · Detect Player",
-    "btn-track-ball-sam": "SAM2 · Track Ball",
-    "btn-track-player-sam": "SAM2 · Track Player",
-}
-
-
-def _build_info_overlay_html(title: str, body: str) -> str:
-    safe_title = title or "Workflow detail"
-    safe_body = body.replace("\n", "<br/>")
-    return f"""
-<div class="kt-info-overlay active" onclick="document.getElementById('kt-info-overlay-close').click();">
-  <div class="kt-info-card" onclick="event.stopPropagation();">
-    <button class="kt-info-close" onclick="document.getElementById('kt-info-overlay-close').click(); return false;">&times;</button>
-    <h3 style="margin-top:0;">{safe_title}</h3>
-    <p>{safe_body}</p>
-  </div>
-</div>
-"""
-
-
-def _open_info(topic: str) -> Any:
-    text = BUTTON_TOOLTIPS.get(topic, "More details coming soon.")
-    title = BUTTON_TITLES.get(topic, "Workflow detail")
-    return gr.update(value=_build_info_overlay_html(title, text), visible=True)
-
-
-def _close_info() -> Any:
-    return gr.update(value="", visible=False)
+def _section_info_markdown(section_label: str, entries: list[tuple[str, str]]) -> str:
+    chunks = [f"### {section_label}"]
+    for label, key in entries:
+        desc = BUTTON_TOOLTIPS.get(key, "")
+        chunks.append(f"**{label}**\n{desc}")
+    return "\n\n".join(chunks)
 
 with gr.Blocks(
     title="SAM2 Video (Transformers) - Interactive Segmentation",
@@ -3282,7 +3198,15 @@ with gr.Blocks(
             load_status = gr.Markdown(visible=True)
             with gr.Row():
                 reset_btn = gr.Button("Reset Session", variant="secondary", elem_id="btn-reset-session")
-                reset_info_btn = gr.Button("ℹ️", elem_classes=["kt-info-btn"], scale=0)
+            with gr.Accordion("Session reset · details", open=False):
+                gr.Markdown(
+                    _section_info_markdown(
+                        "Reset workflow",
+                        [
+                            ("Reset Session", "btn-reset-session"),
+                        ],
+                    )
+                )
         with gr.Column(scale=1):
             gr.Markdown("**Preview**")
             preview = gr.Image(
@@ -3306,31 +3230,47 @@ with gr.Blocks(
                         gr.Markdown("Manual", elem_classes=["model-label"])
                         with gr.Row(elem_classes=["model-actions"]):
                             mark_kick_btn = gr.Button("⚽ Mark Kick", variant="primary", elem_id="btn-mark-kick")
-                            mark_kick_info_btn = gr.Button("ℹ️", elem_classes=["kt-info-btn"], scale=0)
                             mark_impact_btn = gr.Button("🚩 Mark Impact", variant="primary", elem_id="btn-mark-impact")
-                            mark_impact_info_btn = gr.Button("ℹ️", elem_classes=["kt-info-btn"], scale=0)
                         with gr.Row(elem_classes=["model-status"]):
                             manual_kick_btn = gr.Button("⚽: N/A", interactive=False)
                             manual_impact_btn = gr.Button("🚩: N/A", interactive=False)
+                    with gr.Accordion("Manual controls · details", open=False):
+                        gr.Markdown(
+                            _section_info_markdown(
+                                "Manual controls",
+                                [
+                                    ("⚽ Mark Kick", "btn-mark-kick"),
+                                    ("🚩 Mark Impact", "btn-mark-impact"),
+                                ],
+                            )
+                        )
                 with gr.Column(elem_classes=["model-section"]):
                     with gr.Row(elem_classes=["model-row"]):
                         gr.Markdown("YOLO13", elem_classes=["model-label"])
                         with gr.Row(elem_classes=["model-actions"]):
                             detect_ball_btn = gr.Button("Detect Ball", variant="stop", elem_id="btn-detect-ball")
-                            detect_ball_info_btn = gr.Button("ℹ️", elem_classes=["kt-info-btn"], scale=0)
                             track_ball_yolo_btn = gr.Button("Track Ball", variant="stop", elem_id="btn-track-ball-yolo")
-                            track_ball_yolo_info_btn = gr.Button("ℹ️", elem_classes=["kt-info-btn"], scale=0)
                             detect_player_btn = gr.Button(
                                 "Detect Player",
                                 variant="stop",
                                 interactive=False,
                                 elem_id="btn-detect-player",
                             )
-                            detect_player_info_btn = gr.Button("ℹ️", elem_classes=["kt-info-btn"], scale=0)
                         with gr.Row(elem_classes=["model-status"]):
                             yolo_kick_btn = gr.Button("⚽: N/A", interactive=False)
                             yolo_impact_btn = gr.Button("🚩: N/A", interactive=False)
                     yolo_plot = gr.Plot(label="YOLO kick diagnostics", show_label=True)
+                    with gr.Accordion("YOLO13 workflow · details", open=False):
+                        gr.Markdown(
+                            _section_info_markdown(
+                                "YOLO13 workflow",
+                                [
+                                    ("Detect Ball", "btn-detect-ball"),
+                                    ("Track Ball", "btn-track-ball-yolo"),
+                                    ("Detect Player", "btn-detect-player"),
+                                ],
+                            )
+                        )
                 with gr.Column(elem_classes=["model-section"]):
                     with gr.Row(elem_classes=["model-row"]):
                         gr.Markdown("SAM2", elem_classes=["model-label"])
@@ -3338,24 +3278,26 @@ with gr.Blocks(
                             propagate_btn = gr.Button(
                                 "Track Ball", variant="stop", interactive=False, elem_id="btn-track-ball-sam"
                             )
-                            propagate_info_btn = gr.Button("ℹ️", elem_classes=["kt-info-btn"], scale=0)
                             propagate_player_btn = gr.Button(
                                 "Track Player",
                                 variant="stop",
                                 interactive=False,
                                 elem_id="btn-track-player-sam",
                             )
-                            propagate_player_info_btn = gr.Button("ℹ️", elem_classes=["kt-info-btn"], scale=0)
                         with gr.Row(elem_classes=["model-status"]):
                             sam_kick_btn = gr.Button("⚽: N/A", interactive=False)
                             sam_impact_btn = gr.Button("🚩: N/A", interactive=False)
                     kick_plot = gr.Plot(label="Kick & impact diagnostics", show_label=True)
-                info_overlay = gr.HTML(value="", visible=False, elem_id="kt-info-overlay-root")
-                info_close_btn = gr.Button(
-                    "Close info overlay",
-                    elem_classes=["kt-info-close-trigger"],
-                    elem_id="kt-info-overlay-close",
-                )
+                    with gr.Accordion("SAM2 tracking · details", open=False):
+                        gr.Markdown(
+                            _section_info_markdown(
+                                "SAM2 tracking",
+                                [
+                                    ("Track Ball", "btn-track-ball-sam"),
+                                    ("Track Player", "btn-track-player-sam"),
+                                ],
+                            )
+                        )
             with gr.Row():
                 min_impact_speed_slider = gr.Slider(
                     label="Min impact speed (km/h)",
@@ -3426,20 +3368,6 @@ with gr.Blocks(
         show_progress=True,
     )
 
-    # Info overlay wiring
-    def _bind_info(button, topic):
-        button.click(partial(_open_info, topic), outputs=[info_overlay], queue=False)
-
-    _bind_info(reset_info_btn, "btn-reset-session")
-    _bind_info(mark_kick_info_btn, "btn-mark-kick")
-    _bind_info(mark_impact_info_btn, "btn-mark-impact")
-    _bind_info(detect_ball_info_btn, "btn-detect-ball")
-    _bind_info(track_ball_yolo_info_btn, "btn-track-ball-yolo")
-    _bind_info(detect_player_info_btn, "btn-detect-player")
-    _bind_info(propagate_info_btn, "btn-track-ball-sam")
-    _bind_info(propagate_player_info_btn, "btn-track-player-sam")
-    info_close_btn.click(_close_info, outputs=[info_overlay], queue=False)
-
     example_video_path = ensure_example_video()
     examples_list = [
         [None, example_video_path],