Merge branch 'master' of github.com:OpenPerceptionX/OpenPerceptionX.github.io

Author: wly-Lilie

public/EgoHumanoid-V2/.nojekyll

@@ -0,0 +1,287 @@
+"use strict";
+
+const tasks = {
+  laptop: {
+    name: "Laptop closing", score: "53.33", ego: true,
+  },
+  fridge: {
+    name: "Refrigerator opening", score: "38.33", ego: true,
+  },
+  curtain: {
+    name: "Curtain pulling", score: "53.33", ego: false,
+  },
+  drawer: {
+    name: "Drawer closing", score: "61.67", ego: false,
+  },
+};
+
+const state = { demo: "laptop", ik: "laptop", view: "external" };
+const $ = (selector) => document.querySelector(selector);
+const $$ = (selector) => [...document.querySelectorAll(selector)];
+const announce = (message) => { $("#announcement").textContent = message; };
+const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
+const heroVideos = $$("video[data-hero]");
+let previewsPaused = reducedMotion.matches || Boolean(navigator.connection?.saveData);
+
+function nearViewport(video) {
+  const rect = video.getBoundingClientRect();
+  return rect.bottom > -240 && rect.top < innerHeight + 240;
+}
+
+function loadVideo(video) {
+  if (!video.getAttribute("src")) {
+    video.src = video.dataset.src;
+    video.preload = "metadata";
+    video.load();
+  }
+}
+
+function clearFeedback(video) {
+  const frame = video.closest(".video-frame");
+  frame?.querySelector(".media-error")?.remove();
+  frame?.querySelector(".media-status")?.remove();
+}
+
+function setClip(video, id, label) {
+  video.pause();
+  clearFeedback(video);
+  video.removeAttribute("src");
+  video.poster = `assets/images/${id}.jpg`;
+  video.dataset.src = `assets/videos/${id}.mp4`;
+  video.setAttribute("aria-label", label);
+  video.load();
+  if (nearViewport(video)) loadVideo(video);
+}
+
+function selectTab(group, task, focus = false) {
+  state[group] = task;
+  const tablist = $(`[data-tabs="${group}"]`);
+  tablist.querySelectorAll("[role=tab]").forEach((tab) => {
+    const selected = tab.dataset.task === task;
+    tab.setAttribute("aria-selected", String(selected));
+    tab.tabIndex = selected ? 0 : -1;
+    if (selected && focus) tab.focus({ preventScroll: true });
+  });
+  $(`#${group}-panel`).setAttribute("aria-labelledby", `${group}-tab-${task}`);
+  if (group === "ik") renderIK();
+  announce(`${tasks[task].name} selected.`);
+}
+
+function renderIK() {
+  const foot = state.ik === "drawer";
+  $("#ik-desc-a").textContent = foot ? "Leg IK; SONIC on remaining joints." : "Arm and waist IK; SONIC legs.";
+  $("#ik-desc-b").textContent = foot ? "Leg IK + SONIC balance feedback." : "Endpoint IK + SONIC balance feedback.";
+  $("#ik-desc-c").textContent = foot ? "IK controls the right leg; SONIC elsewhere." : "Arm IK; SONIC waist and legs.";
+  ["a", "b", "c"].forEach((variant) => setClip($(`#ik-video-${variant}`), `ik-${variant}-${state.ik}`, `Online IK variant ${variant.toUpperCase()}: ${tasks[state.ik].name}`));
+}
+
+$$('[role="tablist"]').forEach((tablist) => {
+  tablist.addEventListener("click", (event) => {
+    const button = event.target.closest("[role=tab]");
+    if (button) selectTab(tablist.dataset.tabs, button.dataset.task);
+  });
+  tablist.addEventListener("keydown", (event) => {
+    if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) return;
+    event.preventDefault();
+    const buttons = [...tablist.querySelectorAll("[role=tab]")];
+    let index = buttons.indexOf(document.activeElement);
+    if (index < 0) return;
+    if (event.key === "Home") index = 0;
+    else if (event.key === "End") index = buttons.length - 1;
+    else index = (index + (event.key === "ArrowRight" ? 1 : -1) + buttons.length) % buttons.length;
+    selectTab(tablist.dataset.tabs, buttons[index].dataset.task, true);
+  });
+});
+
+function bindGroupPlayback(button, videos, playLabel, pauseLabel) {
+  function updateLabel() {
+    const playing = videos.some((video) => !video.paused && !video.ended);
+    button.replaceChildren(Object.assign(document.createElement("span"), { textContent: playing ? "Ⅱ" : "▶" }), document.createTextNode(` ${playing ? pauseLabel : playLabel}`));
+    button.firstElementChild.setAttribute("aria-hidden", "true");
+    button.setAttribute("aria-pressed", String(playing));
+  }
+  videos.forEach((video) => ["play", "pause", "ended", "emptied"].forEach((event) => video.addEventListener(event, updateLabel)));
+  button.addEventListener("click", async () => {
+    if (videos.some((video) => !video.paused && !video.ended)) {
+      videos.forEach((video) => video.pause());
+    } else {
+      heroVideos.forEach((video) => video.pause());
+      const results = await Promise.allSettled(videos.map((video) => {
+        loadVideo(video);
+        if (video.ended) video.currentTime = 0;
+        return video.play();
+      }));
+      if (results.some((result) => result.status === "rejected")) announce("One or more clips could not start. Use the video controls to retry.");
+    }
+    updateLabel();
+  });
+}
+
+bindGroupPlayback($("#play-ik"), ["a", "b", "c"].map((variant) => $(`#ik-video-${variant}`)), "Play all three", "Pause all three");
+
+const videoLoader = new IntersectionObserver((entries) => {
+  entries.forEach(({ target, isIntersecting }) => {
+    if (isIntersecting) loadVideo(target);
+  });
+}, { rootMargin: "200px 0px" });
+
+$$('.video-frame video').forEach((video) => {
+  videoLoader.observe(video);
+  let waitingTimer;
+  video.addEventListener("waiting", () => {
+    clearTimeout(waitingTimer);
+    waitingTimer = setTimeout(() => {
+      const frame = video.closest(".video-frame");
+      if (video.paused || video.error || frame.querySelector(".media-status")) return;
+      const status = Object.assign(document.createElement("span"), { className: "media-status", textContent: "Loading video…" });
+      status.setAttribute("role", "status");
+      frame.append(status);
+    }, 800);
+  });
+  ["playing", "canplay", "emptied", "pause"].forEach((event) => video.addEventListener(event, () => {
+    clearTimeout(waitingTimer);
+    video.closest(".video-frame").querySelector(".media-status")?.remove();
+  }));
+  video.addEventListener("error", () => {
+    if (!video.getAttribute("src") || !video.error || video.error.code === 1) return;
+    clearFeedback(video);
+    const error = Object.assign(document.createElement("div"), { className: "media-error" });
+    const message = Object.assign(document.createElement("p"), { textContent: "This video could not load." });
+    const retry = Object.assign(document.createElement("button"), { textContent: "Retry video", type: "button" });
+    retry.addEventListener("click", () => { clearFeedback(video); video.load(); video.play().catch(() => {}); });
+    const link = Object.assign(document.createElement("a"), { href: video.dataset.src, textContent: "Open MP4", target: "_blank", rel: "noopener" });
+    error.append(message, retry, link);
+    video.closest(".video-frame").append(error);
+  });
+});
+
+function updatePreviewButton() {
+  const button = $("#preview-toggle");
+  button.setAttribute("aria-pressed", String(previewsPaused));
+  button.querySelector(".play-icon").textContent = previewsPaused ? "▶" : "Ⅱ";
+  button.lastElementChild.textContent = previewsPaused ? "Play previews" : "Pause previews";
+}
+
+function playPreview(video) {
+  if (previewsPaused || document.hidden || !nearViewport(video)) return;
+  loadVideo(video);
+  video.play().catch(() => {
+    previewsPaused = true;
+    heroVideos.forEach((preview) => preview.pause());
+    updatePreviewButton();
+  });
+}
+
+const previewObserver = new IntersectionObserver((entries) => {
+  entries.forEach(({ target, isIntersecting }) => {
+    if (isIntersecting) playPreview(target);
+    else target.pause();
+  });
+}, { threshold: .15 });
+heroVideos.forEach((video) => previewObserver.observe(video));
+updatePreviewButton();
+$("#preview-toggle").addEventListener("click", () => {
+  previewsPaused = !previewsPaused;
+  heroVideos.forEach((video) => previewsPaused ? video.pause() : playPreview(video));
+  updatePreviewButton();
+});
+reducedMotion.addEventListener("change", (event) => {
+  if (event.matches) {
+    previewsPaused = true;
+    heroVideos.forEach((video) => video.pause());
+    updatePreviewButton();
+  }
+});
+document.addEventListener("visibilitychange", () => {
+  if (document.hidden) $$("video").forEach((video) => video.pause());
+  else heroVideos.forEach(playPreview);
+});
+
+const navToggle = $(".nav-toggle");
+function closeNavigation() {
+  navToggle.setAttribute("aria-expanded", "false");
+  $("#section-links").classList.remove("is-open");
+}
+navToggle.addEventListener("click", () => {
+  const open = navToggle.getAttribute("aria-expanded") !== "true";
+  navToggle.setAttribute("aria-expanded", String(open));
+  $("#section-links").classList.toggle("is-open", open);
+});
+$(".section-nav").addEventListener("keydown", (event) => {
+  if (event.key === "Escape") { closeNavigation(); navToggle.focus(); }
+});
+$$('.section-links a').forEach((link) => link.addEventListener("click", closeNavigation));
+document.addEventListener("click", (event) => {
+  if (!event.target.closest(".section-nav")) closeNavigation();
+});
+window.matchMedia("(min-width: 75rem)").addEventListener("change", closeNavigation);
+
+const sections = $$('main > section[id]');
+const sectionLinks = $$(".section-links a");
+let scrollUpdatePending = false;
+function updateScrollPosition() {
+  const total = document.documentElement.scrollHeight - innerHeight;
+  const progress = total > 0 ? Math.min(1, Math.max(0, scrollY / total)) : 0;
+  $(".reading-progress").style.transform = `scaleX(${progress})`;
+  $(".masthead").classList.toggle("is-scrolled", scrollY > 40);
+  $(".section-nav").classList.toggle("on-hero", $("#introduction").getBoundingClientRect().bottom > innerHeight * .5);
+  let current = sections[0].id;
+  sections.forEach((section) => {
+    if (section.getBoundingClientRect().top <= innerHeight * .33) current = section.id;
+  });
+  if (progress > .99) current = sections.at(-1).id;
+  current = ({ results: "scaling", "online-ik": "scaling", "data-collection": "visual-alignment" })[current] || current;
+  sectionLinks.forEach((link) => {
+    if (link.hash === `#${current}`) link.setAttribute("aria-current", "location");
+    else link.removeAttribute("aria-current");
+  });
+  scrollUpdatePending = false;
+}
+function scheduleScrollUpdate() {
+  if (scrollUpdatePending) return;
+  scrollUpdatePending = true;
+  requestAnimationFrame(updateScrollPosition);
+}
+window.addEventListener("scroll", scheduleScrollUpdate, { passive: true });
+window.addEventListener("resize", scheduleScrollUpdate, { passive: true });
+$$('details').forEach((details) => details.addEventListener("toggle", scheduleScrollUpdate));
+updateScrollPosition();
+
+// The source image stays directly accessible when JavaScript is unavailable.
+const figureDialog = $(".figure-dialog");
+let figureOpener = null;
+$$('[data-figure]').forEach((link) => {
+  link.addEventListener("click", (event) => {
+    if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+    event.preventDefault();
+    figureOpener = link;
+    const source = link.querySelector("img");
+    $("#figure-dialog-image").src = link.href;
+    $("#figure-fullsize").href = link.href;
+    $("#figure-dialog-image").alt = source.alt;
+    $("#figure-dialog-caption").textContent = link.closest("figure").querySelector("h3")?.textContent || "EgoHumanoid-V2 · Research figure";
+    figureDialog.showModal();
+  });
+});
+$("#close-figure").addEventListener("click", () => figureDialog.close());
+figureDialog.addEventListener("click", (event) => {
+  if (event.target !== figureDialog) return;
+  const rect = figureDialog.getBoundingClientRect();
+  if (event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom) figureDialog.close();
+});
+figureDialog.addEventListener("close", () => figureOpener?.focus({ preventScroll: true }));
+
+// Keep a real frame visible until the first decoded video frame is ready.
+$$('video').forEach(video => {
+  const thumb = video.parentElement.querySelector('.video-thumbnail');
+  const pending = () => {
+    if (thumb) thumb.src = video.poster;
+    video.classList.add('poster-pending');
+    video.parentElement.classList.remove('video-ready');
+  };
+  const ready = () => { if (video.readyState >= 2) {video.classList.remove('poster-pending');video.parentElement.classList.add('video-ready');} };
+  ['loadstart','emptied','error'].forEach(event => video.addEventListener(event,pending));
+  ['loadeddata','canplay','playing','seeked'].forEach(event => video.addEventListener(event,ready));
+  new MutationObserver(pending).observe(video,{attributes:true,attributeFilter:['poster']});
+  ready();
+});