feat: upgrade replay.mp4 to 1:1 square (720x720) close-up viewport for HF video preview widget

record_replay_mp4.py

@@ -1,12 +1,12 @@
 # -*- coding: utf-8 -*-
 """
-HWIHWA LAB // Ultra-High-Definition Canvas-Focused `replay.mp4` Generator
-Directly captures the simulation stage canvas (.canvas-viewport-area) with:
-1) 100% Focused Stage: No unnecessary control buttons or settings clutter
-2) Huge, clear Cart & Pole catching dynamics
-3) Crisp Mouse Shock Impulse Laser & Shock Banner
-4) Real-time Phase Portrait Attractor Convergence Radar
-5) High-bitrate H.264 (CRF 16) for razor-sharp visual clarity
+HWIHWA LAB // Ultra-High-Definition 1:1 Square (720x720) Replay Video Generator
+Optimized specifically for Hugging Face Model Hub's Video Preview Sidebar Widget.
+- 1:1 Square Aspect Ratio (720x720)
+- Huge, bold Cart & Pole dynamics centered in the viewport
+- Big shock impulse laser & particle physics
+- Clean HUD overlay (Active force, score, shock banner)
+- Ultra-sharp H.264 (CRF 17, 25 FPS)
 """
 
 import time
@@ -17,65 +17,89 @@ from PIL import Image
 import imageio
 from playwright.sync_api import sync_playwright
 
-def generate_crisp_canvas_replay():
+def generate_square_canvas_replay():
     current_dir = Path(__file__).resolve().parent
     html_url = f"file:///{current_dir.as_posix()}/index.html"
     output_mp4 = current_dir / "replay.mp4"
 
     raw_frames = []
 
-    print("🚀 Launching Headless Chromium to record ULTRA-CRISP Canvas Focus...")
+    print("🚀 Launching Headless Chromium to record 1:1 SQUARE (720x720) CartPole Dynamics...")
     with sync_playwright() as p:
         browser = p.chromium.launch(headless=True)
-        # Higher resolution 1440x900 viewport for retina-grade crisp canvas rendering
-        context = browser.new_context(viewport={"width": 1440, "height": 900}, device_scale_factor=1)
+        # 720x720 Square Viewport with device_scale_factor=1
+        context = browser.new_context(viewport={"width": 720, "height": 720}, device_scale_factor=1)
         page = context.new_page()
 
         page.goto(html_url)
-        page.wait_for_timeout(1000)  # Wait for weights, physics & chart initialization
+        page.wait_for_timeout(1000)  # Wait for weights & chart initialization
+
+        # Maximize Stage to 100% of 720x720 viewport
+        page.evaluate("""() => {
+            const header = document.querySelector('.header-bar');
+            if (header) header.style.display = 'none';
+            const bento = document.querySelector('.bento-deck-golden');
+            if (bento) bento.style.display = 'none';
+            const labMain = document.querySelector('.lab-main');
+            if (labMain) {
+                labMain.style.padding = '0';
+                labMain.style.height = '100vh';
+            }
+            const stageSec = document.querySelector('.stage-section');
+            if (stageSec) stageSec.style.height = '100vh';
+            const area = document.querySelector('.canvas-viewport-area');
+            if (area) {
+                area.style.height = '100vh';
+                area.style.borderRadius = '0';
+                area.style.border = 'none';
+            }
+            window.dispatchEvent(new Event('resize'));
+        }""")
+        page.wait_for_timeout(300)
 
-        # Focus directly on the canvas viewport area (Stage only!)
         stage = page.locator(".canvas-viewport-area")
         box = stage.bounding_box()
         if not box:
-            print("[!] Could not find .canvas-viewport-area, falling back to #simCanvas")
             stage = page.locator("#simCanvas")
             box = stage.bounding_box()
 
-        cx = box["x"] + box["width"] / 2
-        cy = box["y"] + box["height"] / 2
-
+        cx = 360
+        cy = 360
         print(f"  🎯 Stage Bounding Box: Width={box['width']}, Height={box['height']}")
 
-        total_frames = 100  # ~4 seconds @ 25 FPS
+        total_frames = 110  # ~4.4 seconds @ 25 FPS
         for i in range(total_frames):
-            # Trigger realistic mouse drag disturbance impulse at frame 22-28
-            if i == 20:
-                page.mouse.move(cx - 30, cy + 30)
+            # Apply dynamic mouse disturbance impulse
+            if i == 25:
+                page.mouse.move(cx - 20, cy + 50)
+                page.mouse.down()
+            elif i == 30:
+                page.mouse.move(cx + 140, cy - 40)
+            elif i == 35:
+                page.mouse.up()
+
+            # Optional second gentle tap at frame 70
+            if i == 70:
+                page.mouse.move(cx + 20, cy + 40)
                 page.mouse.down()
-            elif i == 24:
-                page.mouse.move(cx + 180, cy - 45)
-            elif i == 28:
+            elif i == 74:
+                page.mouse.move(cx - 80, cy - 30)
+            elif i == 78:
                 page.mouse.up()
 
-            # Capture direct stage element screenshot for 100% canvas focus
             screenshot_bytes = stage.screenshot(type="png")
             img = Image.open(io.BytesIO(screenshot_bytes))
 
-            # Ensure even dimensions for H.264 macroblock compatibility (e.g., 1200x520)
-            target_w = (img.width // 2) * 2
-            target_h = (img.height // 2) * 2
-            if img.width != target_w or img.height != target_h:
-                img = img.resize((target_w, target_h), Image.Resampling.LANCZOS)
+            # Resize precisely to 720x720 if slight pixel sub-pixel rounding occurs
+            if img.width != 720 or img.height != 720:
+                img = img.resize((720, 720), Image.Resampling.LANCZOS)
 
             raw_frames.append(np.array(img.convert("RGB")))
-            time.sleep(0.038)
+            time.sleep(0.035)
 
         browser.close()
 
-    print(f"🎬 Encoding {len(raw_frames)} ultra-crisp frames to H.264 replay.mp4 (High Quality CRF)...")
-    
-    # High-bitrate encoding with ffmpeg parameters
+    print(f"🎬 Encoding {len(raw_frames)} square frames (720x720) to H.264 replay.mp4...")
     writer = imageio.get_writer(
         str(output_mp4),
         fps=25,
@@ -88,8 +112,8 @@ def generate_crisp_canvas_replay():
     writer.close()
 
     size_kb = round(output_mp4.stat().st_size / 1024, 1)
-    print(f"[✓] SUCCESS: Ultra-Crisp Canvas Replay ready at: {output_mp4} ({size_kb} KB)")
+    print(f"[✓] SUCCESS: 1:1 Square (720x720) Replay saved to: {output_mp4} ({size_kb} KB)")
     return output_mp4
 
 if __name__ == "__main__":
-    generate_crisp_canvas_replay()
+    generate_square_canvas_replay()

replay.mp4

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:e134174f3b67ec14f619b2aa5388f3400543c4b3ac8bdcf0697a8ced77079861
-size 84384
+oid sha256:603cd6ef2258e042f78086778645ecdd7def3fa72edf660e9c7d2e3025fd25dc
+size 89969