Update app.py

app.py

@@ -32,4 +32,60 @@ with gr.Blocks() as demo:
         live_btn.click(analyze_and_decide, inputs=live_video,
                        outputs=[live_output, live_pred, live_replay])
 
+with gr.Tab("Replay with Hover Analysis"):
+        gr.Markdown("📽️ Hover over zones to see ball behavior insights.")
+        gr.HTML("""
+<div class="video-container" style="position: relative; max-width: 960px; margin: 20px auto;">
+  <video controls autoplay loop style="width: 100%;">
+    <source src="replay_lbw_analysis_f175cd6fa04f4ec8882b647d4763e7d5.mp4" type="video/mp4">
+    Your browser does not support the video tag.
+  </video>
+
+  <!-- Overlays -->
+  <div class="overlay" style="top: 70%; left: 30%; width: 80px; height: 40px;">
+    <div class="tooltip">Pitching: Outside Off</div>
+  </div>
+  <div class="overlay" style="top: 48%; left: 45%; width: 90px; height: 40px;">
+    <div class="tooltip">Impact: In-line</div>
+  </div>
+  <div class="overlay" style="top: 25%; left: 50%; width: 100px; height: 40px;">
+    <div class="tooltip">Wickets: Hitting</div>
+  </div>
+
+  <style>
+    .overlay {
+      position: absolute;
+      border: 2px dashed #ff0;
+      background-color: rgba(255, 255, 0, 0.2);
+      color: #000;
+      font-weight: bold;
+      padding: 4px;
+      border-radius: 6px;
+      pointer-events: all;
+      cursor: help;
+    }
+    .tooltip {
+      visibility: hidden;
+      width: 180px;
+      background-color: black;
+      color: #fff;
+      text-align: center;
+      border-radius: 6px;
+      padding: 5px 8px;
+      position: absolute;
+      z-index: 2;
+      bottom: 125%;
+      left: 50%;
+      margin-left: -90px;
+      opacity: 0;
+      transition: opacity 0.3s;
+    }
+    .overlay:hover .tooltip {
+      visibility: visible;
+      opacity: 1;
+    }
+  </style>
+</div>
+""")
+
 demo.launch()