readability improvement

app.py

@@ -141,6 +141,103 @@ def build_citation_html() -> str:
     """
 
 
+def build_autoplay_js() -> str:
+    return """
+    (() => {
+        const tryPlay = (video) => {
+            if (!video) return;
+            if (video.readyState === 0) return;
+            const playPromise = video.play();
+            if (playPromise && typeof playPromise.catch === "function") {
+                playPromise.catch(() => {});
+            }
+        };
+
+        const primeVideo = (video) => {
+            if (!video) return;
+            video.muted = true;
+            video.defaultMuted = true;
+            video.autoplay = true;
+            video.loop = true;
+            video.playsInline = true;
+            video.setAttribute("muted", "");
+            video.setAttribute("autoplay", "");
+            video.setAttribute("loop", "");
+            video.setAttribute("playsinline", "");
+            video.setAttribute("webkit-playsinline", "");
+
+            if (video.dataset.mmAutoplayBound !== "1") {
+                video.dataset.mmAutoplayBound = "1";
+                const replay = () => tryPlay(video);
+                video.addEventListener("loadedmetadata", replay);
+                video.addEventListener("loadeddata", replay);
+                video.addEventListener("canplay", replay);
+                video.addEventListener("emptied", () => {
+                    requestAnimationFrame(replay);
+                });
+            }
+
+            tryPlay(video);
+        };
+
+        const scan = (root = document) => {
+            if (root instanceof HTMLVideoElement) {
+                primeVideo(root);
+                return;
+            }
+            root.querySelectorAll?.(".gradio-container video").forEach(primeVideo);
+        };
+
+        const boot = () => {
+            scan();
+
+            const observer = new MutationObserver((mutations) => {
+                for (const mutation of mutations) {
+                    if (
+                        mutation.type === "attributes" &&
+                        mutation.target instanceof HTMLVideoElement
+                    ) {
+                        primeVideo(mutation.target);
+                        continue;
+                    }
+                    mutation.addedNodes.forEach((node) => {
+                        if (!(node instanceof HTMLElement)) return;
+                        if (node.tagName === "VIDEO") {
+                            primeVideo(node);
+                        } else {
+                            scan(node);
+                        }
+                    });
+                }
+            });
+
+            observer.observe(document.body, {
+                childList: true,
+                subtree: true,
+                attributes: true,
+                attributeFilter: ["src"],
+            });
+
+            document.addEventListener("visibilitychange", () => {
+                if (!document.hidden) {
+                    scan();
+                }
+            });
+
+            window.addEventListener("pageshow", () => {
+                scan();
+            });
+        };
+
+        if (document.readyState === "loading") {
+            document.addEventListener("DOMContentLoaded", boot, { once: true });
+        } else {
+            boot();
+        }
+    })();
+    """
+
+
 def build_motion_summary_html(motion_label: str) -> str:
     if not motion_label:
         motion_label = DEFAULT_MOTION
@@ -199,7 +296,7 @@ def build_model_card_head(model_key: str) -> str:
     """
 
 
-with gr.Blocks(title="MuscleMimic Research Space", css=CUSTOM_CSS) as app:
+with gr.Blocks(title="MuscleMimic Research Space") as app:
     gr.HTML(build_hero_html())
     gr.HTML(build_explorer_intro_html())
 
@@ -211,7 +308,6 @@ with gr.Blocks(title="MuscleMimic Research Space", css=CUSTOM_CSS) as app:
             info="Filter the KIT / KINESIS set by locomotion subtype.",
             elem_classes="mm-select",
             scale=1,
-            min_width=280,
         )
         motion_dd = gr.Dropdown(
             choices=get_motions_by_category("All"),
@@ -220,7 +316,6 @@ with gr.Blocks(title="MuscleMimic Research Space", css=CUSTOM_CSS) as app:
             info="Choose a KIT kinesis locomotion trajectory for checkpoint comparison.",
             elem_classes="mm-select",
             scale=1,
-            min_width=280,
         )
 
     _card_class_suffix = {
@@ -243,7 +338,7 @@ with gr.Blocks(title="MuscleMimic Research Space", css=CUSTOM_CSS) as app:
                 card_classes = ["mm-compare-card"]
                 if suffix:
                     card_classes.append(suffix)
-                with gr.Column(elem_classes=card_classes):
+                with gr.Column(elem_classes=card_classes, min_width=0):
                     gr.HTML(build_model_card_head(model_key))
                     vids.append(
                         gr.Video(
@@ -259,7 +354,7 @@ with gr.Blocks(title="MuscleMimic Research Space", css=CUSTOM_CSS) as app:
     gr.HTML(build_highlights_html())
     with gr.Row(elem_classes="mm-video-grid", equal_height=False):
         for item in HIGHLIGHT_VIDEOS:
-            with gr.Column(elem_classes="mm-video-card", scale=1, min_width=320):
+            with gr.Column(elem_classes="mm-video-card", scale=1, min_width=0):
                 gr.Video(
                     value=str(BASE_DIR / "videos" / "blog" / item["file"]),
                     autoplay=True,
@@ -284,4 +379,8 @@ with gr.Blocks(title="MuscleMimic Research Space", css=CUSTOM_CSS) as app:
     )
 
 if __name__ == "__main__":
-    app.launch(allowed_paths=STATIC_DIRS)
+    app.launch(
+        allowed_paths=STATIC_DIRS,
+        css=CUSTOM_CSS,
+        js=build_autoplay_js(),
+    )

style.css

@@ -38,6 +38,7 @@ html,
 body {
     margin: 0;
     background: var(--mm-bg) !important;
+    width: 100%;
 }
 
 body {
@@ -49,6 +50,7 @@ body {
     max-width: 1180px !important;
     margin: 0 auto !important;
     padding: 24px 24px 56px !important;
+    box-sizing: border-box;
     background: transparent !important;
     color: var(--mm-ink) !important;
     font-family: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif !important;
@@ -74,6 +76,22 @@ body {
     color: inherit;
 }
 
+.gradio-container *,
+.gradio-container *::before,
+.gradio-container *::after {
+    box-sizing: border-box;
+}
+
+.gradio-container > *,
+.gradio-container .gr-block,
+.gradio-container .gr-group,
+.gradio-container .gr-form,
+.gradio-container .gr-column,
+.gradio-container .gr-row {
+    min-width: 0;
+    max-width: 100%;
+}
+
 .mm-overline {
     margin: 0 0 0.45rem;
     color: var(--mm-muted);
@@ -92,12 +110,14 @@ body {
     border-radius: 16px;
     background: var(--mm-surface);
     box-shadow: var(--mm-shadow);
+    min-width: 0;
 }
 
 .mm-brand {
     display: flex;
     align-items: center;
     gap: 0.75rem;
+    min-width: 0;
 }
 
 .mm-brand img {
@@ -116,6 +136,7 @@ body {
     font-weight: 700;
     letter-spacing: 0.06em;
     text-transform: uppercase;
+    overflow-wrap: anywhere;
 }
 
 .mm-hero h1 {
@@ -125,6 +146,7 @@ body {
     font-size: clamp(2rem, 4vw, 3rem);
     font-weight: 800;
     line-height: 1.05;
+    overflow-wrap: anywhere;
 }
 
 .mm-hero-lede {
@@ -133,15 +155,18 @@ body {
     color: var(--mm-ink-soft);
     font-size: 1rem;
     line-height: 1.72;
+    overflow-wrap: anywhere;
 }
 
 .mm-nav {
     display: flex;
     flex-wrap: wrap;
     gap: 0.75rem;
+    min-width: 0;
 }
 
 .mm-nav a {
+    display: block;
     padding: 0.5rem 0.8rem;
     border: 1px solid var(--mm-line);
     border-radius: 999px;
@@ -150,6 +175,8 @@ body {
     font-size: 0.88rem;
     font-weight: 700;
     text-decoration: none;
+    white-space: normal;
+    overflow-wrap: anywhere;
     transition: border-color 0.18s ease, color 0.18s ease;
 }
 
@@ -166,6 +193,7 @@ body {
 .mm-section-head {
     max-width: 780px;
     margin-bottom: 1rem;
+    min-width: 0;
 }
 
 .mm-section-head h2 {
@@ -174,6 +202,7 @@ body {
     font-size: clamp(1.6rem, 3vw, 2.25rem);
     font-weight: 800;
     line-height: 1.12;
+    overflow-wrap: anywhere;
 }
 
 .mm-section-head p {
@@ -181,17 +210,22 @@ body {
     color: var(--mm-ink-soft);
     font-size: 1rem;
     line-height: 1.75;
+    overflow-wrap: anywhere;
 }
 
 .mm-video-grid {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+    display: flex;
+    flex-wrap: wrap;
     gap: 1rem;
+    min-width: 0;
 }
 
 .mm-video-card,
 .mm-compare-card,
 .mm-link-card {
+    flex: 1 1 280px;
+    min-width: 0;
+    max-width: 100%;
     overflow: hidden;
     border: 1px solid var(--mm-line);
     border-radius: 14px;
@@ -247,6 +281,7 @@ body {
     overflow: visible !important;
     position: relative;
     z-index: 20;
+    min-width: 0;
 }
 
 .mm-controls-shell > div,
@@ -307,6 +342,7 @@ body {
     border-radius: 14px;
     background: var(--mm-surface);
     box-shadow: var(--mm-shadow);
+    min-width: 0;
 }
 
 .mm-panel-head {
@@ -315,6 +351,7 @@ body {
     align-items: flex-start;
     gap: 1rem;
     margin-bottom: 1rem;
+    min-width: 0;
 }
 
 .mm-panel-head h3 {
@@ -323,12 +360,14 @@ body {
     font-size: 1.35rem;
     font-weight: 700;
     line-height: 1.15;
+    overflow-wrap: anywhere;
 }
 
 .mm-panel-head p {
     margin: 0;
     color: var(--mm-ink-soft);
     line-height: 1.7;
+    overflow-wrap: anywhere;
 }
 
 .mm-panel-head strong {
@@ -339,6 +378,7 @@ body {
     display: flex;
     flex-wrap: wrap;
     gap: 0.5rem;
+    min-width: 0;
 }
 
 .mm-chip {
@@ -351,12 +391,16 @@ body {
     color: var(--mm-ink-soft);
     font-size: 0.84rem;
     font-weight: 700;
+    max-width: 100%;
+    white-space: normal;
+    overflow-wrap: anywhere;
 }
 
 .mm-compare-grid {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+    display: flex;
+    flex-wrap: wrap;
     gap: 1rem;
+    min-width: 0;
 }
 
 .mm-compare-card {
@@ -401,8 +445,10 @@ body {
     font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
     font-size: 0.85rem;
     line-height: 1.6;
-    overflow-x: auto;
-    white-space: pre;
+    max-width: 100%;
+    white-space: pre-wrap;
+    word-break: break-word;
+    overflow-wrap: anywhere;
 }
 
 .mm-bibtex code {
@@ -426,13 +472,15 @@ body {
 }
 
 .mm-link-strip {
-    display: grid;
-    grid-template-columns: repeat(4, minmax(0, 1fr));
+    display: flex;
+    flex-wrap: wrap;
     gap: 1rem;
     margin-top: 0.75rem;
+    min-width: 0;
 }
 
 .mm-link-card {
+    flex: 1 1 200px;
     display: flex;
     flex-direction: column;
     gap: 0.32rem;
@@ -451,25 +499,19 @@ body {
     color: var(--mm-ink);
     font-size: 1rem;
     font-weight: 700;
+    overflow-wrap: anywhere;
 }
 
 .mm-link-note {
     color: var(--mm-muted);
     font-size: 0.9rem;
     line-height: 1.5;
-}
-
-@media (max-width: 1100px) {
-    .mm-video-grid,
-    .mm-compare-grid,
-    .mm-link-strip {
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
+    overflow-wrap: anywhere;
 }
 
 @media (max-width: 820px) {
     .gradio-container {
-        padding: 18px 16px 48px !important;
+        padding: 14px 12px 40px !important;
     }
 
     .mm-hero,
@@ -483,13 +525,21 @@ body {
         font-size: clamp(2rem, 9vw, 2.7rem);
     }
 
+    .mm-brand {
+        align-items: flex-start;
+    }
+
+    .mm-brand span {
+        font-size: 0.8rem;
+        line-height: 1.4;
+    }
+
     .mm-panel-head {
         flex-direction: column;
     }
 
-    .mm-video-grid,
-    .mm-compare-grid,
-    .mm-link-strip {
-        grid-template-columns: 1fr;
+    .mm-bibtex {
+        font-size: 0.75rem;
+        padding: 0.75rem 0.9rem;
     }
 }