tamen

Author: wly-Lilie

app/(default)/(project)/TAMEn/model-viewer-frame.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { useCallback, useState } from "react";
+
+import { cn } from "@/lib/utils";
+
+const shellClass =
+  "relative mx-auto w-full max-w-[320px] md:max-w-[480px] lg:max-w-[640px] md:w-[480px] lg:w-[640px] h-[240px] md:h-[360px] lg:h-[480px] overflow-hidden rounded-lg border-2 md:border-4 border-white bg-black transition-colors duration-300 hover:border-[#174BE5]";
+
+export function ModelViewerFrame({
+  iframeSrc,
+  posterSrc,
+  title,
+}: {
+  iframeSrc: string;
+  posterSrc: string;
+  title: string;
+}) {
+  const [iframeLoaded, setIframeLoaded] = useState(false);
+  const [posterFailed, setPosterFailed] = useState(false);
+
+  const handleIframeLoad = useCallback(() => {
+    setIframeLoaded(true);
+  }, []);
+
+  return (
+    <div className={shellClass}>
+      {!iframeLoaded && !posterFailed && (
+        <img
+          src={posterSrc}
+          alt=""
+          decoding="async"
+          onError={() => setPosterFailed(true)}
+          className="pointer-events-none absolute inset-0 z-10 h-full w-full object-cover"
+        />
+      )}
+      {!iframeLoaded && posterFailed && (
+        <div
+          className="pointer-events-none absolute inset-0 z-10 flex items-center justify-center bg-zinc-950 text-[11px] sm:text-xs text-white/55"
+          aria-live="polite"
+        >
+          Loading 3D viewer…
+        </div>
+      )}
+      <iframe
+        src={iframeSrc}
+        title={title}
+        onLoad={handleIframeLoad}
+        className={cn(
+          "absolute inset-0 h-full w-full opacity-0 transition-opacity duration-500",
+          iframeLoaded && "opacity-100",
+        )}
+      />
+    </div>
+  );
+}

app/(default)/(project)/TAMEn/page.tsx

@@ -34,6 +34,7 @@ import {
   GeneralizationUnseenChart,
   RobustnessDisturbanceChart,
 } from "./chart/generalization-unseen";
+import { ModelViewerFrame } from "./model-viewer-frame";
 
 const exo2 = Exo_2({
   subsets: ["latin"],
@@ -65,6 +66,10 @@ const policy_rollouts: { id: string; title: string; color: string }[] = [
   },
 ];
 
+/** Preview shown until the 3D iframe fires `load`. */
+const TAMEN_MODEL_VIEWER_POSTER =
+  "https://ik.imagekit.io/7rgtwup0y/3dmodel.jpg";
+
 const pageNavItems: { text: string; id: string }[] = [
   { text: "Highlights", id: "highlights" },
   { text: "Data Collection Modes", id: "data-collection-modes" },
@@ -565,11 +570,11 @@ export default function Home() {
                       </b>{" "}
                       now!
                     </p>
-                    <iframe
-                      src="https://opendrivelab.github.io/TAMEn/3d_model/tamen_model.html"
+                    <ModelViewerFrame
+                      iframeSrc="https://opendrivelab.github.io/TAMEn/3d_model/tamen_model.html"
+                      posterSrc={TAMEN_MODEL_VIEWER_POSTER}
                       title="TAMEn 3D model viewer"
-                      className="w-full max-w-[320px] md:max-w-[480px] lg:max-w-[640px] md:w-[480px] lg:w-[640px] h-[240px] md:h-[360px] lg:h-[480px] border-2 md:border-4 border-white hover:border-[#174BE5] transition-colors duration-300 rounded-lg mx-auto"
-                    ></iframe>
+                    />
                   </div>
                 </div>
               </div>