Update app.py

app.py

@@ -1,4 +1,4 @@
-import os
+Import os
 import re
 import json
 import random
@@ -212,13 +212,6 @@ button.cta:hover {
     animation: cffall linear forwards;
     z-index: 99999; pointer-events: none;
 }
-
-/* Fix Gradio Video styling to seamlessly blend with your glow theme */
-#showcase-video {
-    background: #000000 !important;
-    border: 1px solid rgba(245, 166, 35, 0.3) !important;
-    border-radius: 8px !important;
-}
 """
 
 # ═══════════════════════════════════════════════════════════════
@@ -286,42 +279,40 @@ HERO_HTML = """
 </div>
 """
 
-SHOWCASE_TOP_HTML = """
+SHOWCASE_HTML = """
 <div style="
-    max-width: 850px; margin: 30px auto 0 auto; padding: 20px 20px 5px 20px;
-    background: #0a0a1a; border-top: 1px solid rgba(245, 166, 35, 0.2);
-    border-left: 1px solid rgba(245, 166, 35, 0.2); border-right: 1px solid rgba(245, 166, 35, 0.2);
-    border-top-left-radius: 16px; border-top-right-radius: 16px;
+    max-width: 850px; margin: 30px auto; padding: 20px;
+    background: #0a0a1a; border: 1px solid rgba(245, 166, 35, 0.2);
+    border-radius: 16px; box-shadow: 0 0 30px rgba(245, 166, 35, 0.05);
     font-family: 'Inter', sans-serif;
 ">
     <h3 style="color: #ffc845; text-shadow: 0 0 10px rgba(245, 166, 35, 0.5); margin-top: 0; margin-bottom: 15px;">🎬 Submission Showcase & Verification</h3>
-</div>
-"""
-
-SHOWCASE_SIDE_HTML = """
-<div style="
-    height: 100%; display: flex; flex-direction: column; justify-content: center;
-    font-family: 'Inter', sans-serif; padding: 10px 20px 20px 20px;
-    background: #0a0a1a; border-bottom: 1px solid rgba(245, 166, 35, 0.2);
-    border-left: 1px solid rgba(245, 166, 35, 0.2); border-right: 1px solid rgba(245, 166, 35, 0.2);
-    border-bottom-left-radius: 16px; border-bottom-right-radius: 16px;
-">
-    <p style="color: #c0c0e8; font-size: 0.95rem; line-height: 1.6; margin-top: 0; margin-bottom: 20px;">
-        Watch our local execution pipeline crawl layouts, extract syntax trees, and dynamically evaluate criteria weights completely off-the-grid.
-    </p>
-    <a href="https://x.com/i/status/2066355638200918066" target="_blank" style="
-        display: inline-block; text-align: center; background: rgba(245,166,35,.15); 
-        color: #ffc845; border: 1px solid rgba(245,166,35,.5); border-radius: 8px; 
-        padding: 10px 16px; font-weight: 700; text-decoration: none; transition: all 0.2s;
-        box-shadow: 0 0 12px rgba(245, 166, 35, 0.3);
-    " onmouseover="this.style.background='rgba(245,166,35,.25)'" onmouseout="this.style.background='rgba(245,166,35,.15)'">
-        🐦 View Official X Post
-    </a>
+    <div style="display: flex; gap: 20px; flex-wrap: wrap;">
+        <div style="flex: 1.5; min-width: 300px;">
+            <video controls width="100%" style="border-radius: 8px; border: 1px solid rgba(245, 166, 35, 0.3);">
+                <source src="https://huggingface.co/spaces/build-small-hackathon/Judges-copilot/resolve/main/lv_0_20260615091053.mp4" type="video/mp4">
+                Your browser does not support the video tag.
+            </video>
+        </div>
+        <div style="flex: 1; min-width: 250px; display: flex; flex-direction: column; justify-content: center;">
+            <p style="color: #c0c0e8; font-size: 0.95rem; line-height: 1.6; margin-top: 0;">
+                Watch our local execution pipeline crawl layouts, extract syntax trees, and dynamically evaluate criteria weights completely off-the-grid.
+            </p>
+            <a href="https://x.com/i/status/2066355638200918066" target="_blank" style="
+                display: inline-block; text-align: center; background: rgba(245,166,35,.15); 
+                color: #ffc845; border: 1px solid rgba(245,166,35,.5); border-radius: 8px; 
+                padding: 10px 16px; font-weight: 700; text-decoration: none; transition: all 0.2s;
+                box-shadow: 0 0 12px rgba(245, 166, 35, 0.3);
+            " onmouseover="this.style.background='rgba(245,166,35,.25)'" onmouseout="this.style.background='rgba(245,166,35,.15)'">
+                🐦 View Official X Post
+            </a>
+        </div>
+    </div>
 </div>
 """
 
 QUICKSTART_LABEL_HTML = """
-<div style="font-family:'Inter',sans-serif; padding:30px 0 10px;">
+<div style="font-family:'Inter',sans-serif; padding:10px 0 10px;">
   <p style="
     font-size:.75rem; color:#F5A623; font-weight:800;
     letter-spacing:.15em; text-transform:uppercase; margin-bottom:10px;
@@ -780,21 +771,7 @@ def click_preset_ag(criteria_text):
 with gr.Blocks(theme=gr.themes.Base(), css=CSS, title="Judges Copilot v2") as demo:
 
     gr.HTML(HERO_HTML)
-    
-    # Showcase Section Wrapper Layout
-    gr.HTML(SHOWCASE_TOP_HTML)
-    with gr.Row(style="max-width: 850px; margin: 0 auto; background: #0a0a1a; padding: 0 20px; border-left: 1px solid rgba(245, 166, 35, 0.2); border-right: 1px solid rgba(245, 166, 35, 0.2);"):
-        with gr.Column(scale=3, min_width=300):
-            gr.Video(
-                value="https://huggingface.co/spaces/build-small-hackathon/Judges-copilot/resolve/main/lv_0_20260616025553.mp4",
-                interactive=False,
-                show_label=False,
-                container=False,
-                elem_id="showcase-video"
-            )
-        with gr.Column(scale=2, min_width=250):
-            gr.HTML(SHOWCASE_SIDE_HTML)
-            
+    gr.HTML(SHOWCASE_HTML)  # Embedded Showcase Media Section
     gr.HTML(QUICKSTART_LABEL_HTML)
     
     with gr.Row():