Upload 4 files

assets/js/all_videos.js

@@ -0,0 +1,90 @@
+// assets/js/all_videos.js
+
+const CSV_PATH = new URL("cleaned_data.csv", window.location.href).href;
+
+const searchInput = document.getElementById("search");
+const tbody = document.querySelector("#segmentsTable tbody");
+
+const rowsCountEl = document.getElementById("rowsCount");
+const videosCountEl = document.getElementById("videosCount");
+
+function parseCSV(text) {
+    const lines = text.trim().split("\n");
+    const header = lines[0].split(",").map(s => s.trim());
+    const rows = [];
+    for (let i = 1; i < lines.length; i++) {
+        const cols = lines[i].split(",");
+        const obj = {};
+        for (let j = 0; j < header.length; j++) obj[header[j]] = (cols[j] ?? "").trim();
+        rows.push(obj);
+    }
+    return rows;
+}
+
+function absVideoUrl(videoPath) {
+    try { return new URL(videoPath, window.location.href).href; }
+    catch { return videoPath; }
+}
+
+function render(rows) {
+    tbody.innerHTML = "";
+
+    const q = (searchInput.value || "").toLowerCase().trim();
+    const uniqueVideos = new Set();
+
+    let shown = 0;
+
+    for (const r of rows) {
+        const filename = r.filename || "";
+        const label = r.label || "";
+        const start = r.start || "";
+        const end = r.end || "";
+        const video_path = r.video_path || `videos/${filename}`;
+
+        const hay = `${filename} ${label}`.toLowerCase();
+        if (q && !hay.includes(q)) continue;
+
+        shown++;
+        uniqueVideos.add(filename);
+
+        const tr = document.createElement("tr");
+        const video_url = absVideoUrl(video_path);
+
+        tr.innerHTML = `
+      <td>${filename}</td>
+      <td><a href="category.html?cat=${encodeURIComponent(label)}" style="color: var(--accent); text-decoration: none;">${label}</a></td>
+      <td>${start}-${end}</td>
+      <td class="video-cell">
+        <video preload="metadata" controls>
+          <source src="${video_url}" type="video/mp4" />
+          Video not found
+        </video>
+      </td>
+    `;
+
+        const videoEl = tr.querySelector("video");
+        attachLabeledLoop(videoEl, {
+            label,
+            startFrame: start,
+            endFrame: end,
+            fps: DEFAULT_FPS
+        });
+
+        tbody.appendChild(tr);
+    }
+
+    rowsCountEl.textContent = `${shown} segments`;
+    videosCountEl.textContent = `${uniqueVideos.size} videos`;
+}
+
+fetch(CSV_PATH)
+    .then(r => r.text())
+    .then(text => {
+        const rows = parseCSV(text);
+        render(rows);
+        searchInput.addEventListener("input", () => render(rows));
+    })
+    .catch(err => {
+        console.error(err);
+        tbody.innerHTML = `<tr><td colspan="4">Could not load cleaned_data.csv</td></tr>`;
+    });

assets/js/category.js

@@ -0,0 +1,139 @@
+// assets/js/category.js
+
+const CSV_PATH = new URL("cleaned_data.csv", window.location.href).href;
+
+const params = new URLSearchParams(window.location.search);
+const cat = (params.get("cat") || "").trim();
+
+const titleEl = document.getElementById("catTitle");
+const defEl = document.getElementById("catDef");
+const repMetaEl = document.getElementById("repMeta");
+const repGrid = document.getElementById("repGrid");
+const repEmpty = document.getElementById("repEmpty");
+
+const instCountEl = document.getElementById("instCount");
+const instVideoCountEl = document.getElementById("instVideoCount");
+
+const tbody = document.querySelector("#catTable tbody");
+
+function parseCSV(text) {
+    const lines = text.trim().split("\n");
+    const header = lines[0].split(",").map(s => s.trim());
+    const rows = [];
+    for (let i = 1; i < lines.length; i++) {
+        const cols = lines[i].split(",");
+        const obj = {};
+        for (let j = 0; j < header.length; j++) obj[header[j]] = (cols[j] ?? "").trim();
+        rows.push(obj);
+    }
+    return rows;
+}
+
+function absVideoUrl(videoPath) {
+    try { return new URL(videoPath, window.location.href).href; }
+    catch { return videoPath; }
+}
+
+function renderRep(instance, failureInfo) {
+    repGrid.innerHTML = "";
+
+    if (!instance) {
+        repEmpty.hidden = false;
+        repMetaEl.textContent = "";
+        return;
+    }
+    repEmpty.hidden = true;
+
+    const filename = instance.filename;
+    const label = instance.label;
+    const start = instance.start;
+    const end = instance.end;
+    const video_url = absVideoUrl(instance.video_path || `videos/${filename}`);
+
+    repMetaEl.textContent = `Example: ${filename} (frames ${start}-${end})`;
+
+    const wrap = document.createElement("div");
+    wrap.className = "video-item";
+    wrap.innerHTML = `
+    <video preload="metadata" controls>
+      <source src="${video_url}" type="video/mp4" />
+      Video not found
+    </video>
+    <div class="video-label">${failureInfo?.name || label || ""}</div>
+  `;
+
+    const videoEl = wrap.querySelector("video");
+    attachLabeledLoop(videoEl, { label, startFrame: start, endFrame: end, fps: DEFAULT_FPS });
+
+    repGrid.appendChild(wrap);
+}
+
+function renderTable(instances) {
+    tbody.innerHTML = "";
+    const uniqueVideos = new Set();
+
+    for (const r of instances) {
+        uniqueVideos.add(r.filename);
+
+        const tr = document.createElement("tr");
+        const video_url = absVideoUrl(r.video_path || `videos/${r.filename}`);
+
+        tr.innerHTML = `
+      <td>${r.filename}</td>
+      <td>${r.start}-${r.end}</td>
+      <td class="video-cell">
+        <video preload="metadata" controls>
+          <source src="${video_url}" type="video/mp4" />
+          Video not found
+        </video>
+      </td>
+    `;
+
+        const videoEl = tr.querySelector("video");
+        attachLabeledLoop(videoEl, { label: r.label, startFrame: r.start, endFrame: r.end, fps: DEFAULT_FPS });
+
+        tbody.appendChild(tr);
+    }
+
+    instCountEl.textContent = `${instances.length} segments`;
+    instVideoCountEl.textContent = `${uniqueVideos.size} videos`;
+}
+
+function setHeader(failureInfo) {
+    if (!cat) {
+        titleEl.textContent = "No category specified";
+        defEl.textContent = "Return to Home and select a category.";
+        return;
+    }
+
+    titleEl.textContent = failureInfo?.name || cat;
+    defEl.textContent = failureInfo?.definition || "";
+    document.title = `${cat} — Failure Category`;
+}
+
+const failureInfo = window.FAILURE_MAP?.[cat] || window.FAILURES?.find(f => f.name === cat);
+setHeader(failureInfo);
+
+fetch(CSV_PATH)
+    .then(r => r.text())
+    .then(text => {
+        const rows = parseCSV(text);
+
+        const instances = rows
+            .filter(r => String(r.label || "").trim() === cat)
+            .filter(r => r.filename && r.start !== "" && r.end !== "");
+
+        instances.sort((a, b) => {
+            if (a.filename !== b.filename) return a.filename.localeCompare(b.filename);
+            return Number(a.start) - Number(b.start);
+        });
+
+        renderRep(instances[0], failureInfo);
+        renderTable(instances);
+    })
+    .catch(err => {
+        console.error(err);
+        repEmpty.hidden = false;
+        repEmpty.textContent = "Could not load cleaned_data.csv.";
+        tbody.innerHTML = `<tr><td colspan="3">Could not load cleaned_data.csv</td></tr>`;
+    });

assets/js/failures.js

@@ -0,0 +1,90 @@
+// assets/js/failures.js
+
+window.FAILURES = [
+    // Added so your playback rules work when browsing these labels
+    {
+        name: "Time",
+        family: "Meta",
+        definition: "Timing annotation; clip plays from the beginning of the video until the end frame.",
+        onset: "Video start",
+        offset: "Annotated end frame"
+    },
+    {
+        name: "Success",
+        family: "Meta",
+        definition: "Successful trial (clip shows full video).",
+        onset: "Video start",
+        offset: "Video end"
+    },
+    {
+        name: "Failure",
+        family: "Meta",
+        definition: "Failed trial (clip shows full video).",
+        onset: "Video start",
+        offset: "Video end"
+    },
+
+    // Existing failures
+    {
+        name: "Safety Conflict",
+        family: "Safety",
+        definition: "Physical contact between participant and robot.",
+        onset: "Start of contact.",
+        offset: "End of contact."
+    },
+    {
+        name: "Safety Avoidance",
+        family: "Safety",
+        definition: "Participant avoids physical contact with robot.",
+        onset: "First frame when human backs their hand when robot is near.",
+        offset: "End of video (per playback rule)."
+    },
+    {
+        name: "Passive Wait",
+        family: "Efficiency",
+        definition:
+            "Task deviates from optimal performance OR the human waits until the robot is finished with its task before starting their task.",
+        onset: "Start frame of waiting/sub-optimal performance.",
+        offset: "End frame when the human proceeds."
+    },
+    {
+        name: "Redundant Retrieval",
+        family: "Safety/Efficiency",
+        definition: "Duplicate action by both agents for the same item.",
+        onset: "Second agent initiates duplicate action.",
+        offset: "End of video (per playback rule)."
+    },
+    {
+        name: "Task Model Uncertainty",
+        family: "Cognition",
+        definition:
+            "Human does not know or forget what to do next due to less task knowledge (exclude deferring because they expect the robot to do it).",
+        onset: "First uncertainty cue.",
+        offset: "End of video (per playback rule)."
+    },
+    {
+        name: "Capability Miscalibration",
+        family: "Cognition",
+        definition:
+            "Human waited because they expected the robot to do it (not because they were unsure what to do).",
+        onset: "Start frame of waiting due to expectation.",
+        offset: "End frame when the human proceeds."
+    },
+    {
+        name: "Missed Grab",
+        family: "Manipulation",
+        definition: "Robot or human missed the bottle and has to go back and retrieve it.",
+        onset: "10 frames before annotated start (per playback rule).",
+        offset: "50 frames after annotated end (clamped to end of video)."
+    },
+    {
+        name: "Slippage",
+        family: "Manipulation",
+        definition: "Bottle slips from grasp when moving.",
+        onset: "10 frames before annotated start (per playback rule).",
+        offset: "50 frames after annotated end (clamped to end of video)."
+    }
+];
+
+window.FAILURE_MAP = Object.fromEntries(window.FAILURES.map(f => [f.name, f]));
+

assets/js/video_segment.js

@@ -0,0 +1,168 @@
+// assets/js/video_segment.js
+const DEFAULT_FPS = 30;
+
+/**
+ * Playback rules by label (case-insensitive):
+ *
+ * time                      : video start -> endFrame
+ * success                   : entire video
+ * failure                   : entire video
+ * safety conflict           : startFrame -> endFrame
+ * safety avoidance          : startFrame -> end of video
+ * passive wait              : startFrame -> endFrame
+ * redundant retrieval       : startFrame -> end of video
+ * task model uncertainty    : startFrame -> end of video
+ * capability miscalibration : startFrame -> endFrame
+ * missed grab               : (startFrame-10) -> (endFrame+50 or end of video)
+ * slippage                  : (startFrame-10) -> (endFrame+50 or end of video)
+ *
+ * Manual control requirements:
+ *  1) If user pauses, DO NOT auto-resume.
+ *  2) If user seeks/scrubs anywhere, allow it. When playback reaches the window end,
+ *     it loops back to the window start (and continues only if user is playing).
+ */
+
+function normalizeLabel(label) {
+    return String(label || "").trim().toLowerCase();
+}
+
+function computeWindowFrames(label, startFrame, endFrame) {
+    const lab = normalizeLabel(label);
+
+    let s = Number(startFrame);
+    let e = Number(endFrame);
+
+    if (!Number.isFinite(s)) s = 0;
+    if (!Number.isFinite(e)) e = 0;
+    if (s > e) [s, e] = [e, s];
+
+    let start = s;
+    let end = e;
+    let endIsVideo = false;
+
+    const isTime = lab === "time";
+    const isSuccess = lab === "success";
+    const isFailure = lab === "failure";
+
+    const isSafetyConflict = lab === "safety conflict";
+    const isSafetyAvoidance = lab === "safety avoidance";
+    const isPassiveWait = lab === "passive wait";
+    const isRedundantRetrieval = lab === "redundant retrieval";
+    const isTMU = lab === "task model uncertainty";
+    const isCapMis = lab === "capability miscalibration";
+    const isMissedGrab = lab === "missed grab";
+    const isSlippage = lab === "slippage";
+
+    if (isTime) {
+        start = 0;
+        end = e;
+        endIsVideo = false;
+    } else if (isSuccess || isFailure) {
+        start = 0;
+        endIsVideo = true;
+    } else if (isSafetyConflict || isPassiveWait || isCapMis) {
+        start = s;
+        end = e;
+        endIsVideo = false;
+    } else if (isSafetyAvoidance || isRedundantRetrieval || isTMU) {
+        start = s;
+        endIsVideo = true;
+    } else if (isMissedGrab || isSlippage) {
+        start = Math.max(0, s - 10);
+        end = e + 50; // will clamp to duration
+        endIsVideo = false;
+    } else {
+        // Unknown label: just use annotated segment
+        start = s;
+        end = e;
+        endIsVideo = false;
+    }
+
+    start = Math.max(0, Math.floor(start));
+    if (!endIsVideo) end = Math.max(start, Math.floor(end));
+
+    return { startFrameAdj: start, endFrameAdj: end, endIsVideo };
+}
+
+/**
+ * Attaches labeled looping to a <video>, while preserving manual user control.
+ *
+ * - Autoplays (muted) so the page is lively.
+ * - If user pauses, we do NOT force play().
+ * - If user seeks anywhere, we allow it.
+ * - When playback crosses the computed end time, we jump back to the start time.
+ *   If the video was playing, we keep playing. If paused, it stays paused.
+ */
+function attachLabeledLoop(videoEl, { label, startFrame, endFrame, fps = DEFAULT_FPS }) {
+    const { startFrameAdj, endFrameAdj, endIsVideo } = computeWindowFrames(label, startFrame, endFrame);
+
+    const startSec = Math.max(0, startFrameAdj / fps);
+    let endSec = Math.max(startSec, endFrameAdj / fps);
+
+    // Autoplay compatibility: muted + playsInline
+    videoEl.muted = true;
+    videoEl.playsInline = true;
+
+    // Track whether a pause was user-initiated (so we never override it)
+    let userPaused = false;
+
+    function safePlay() {
+        const p = videoEl.play();
+        if (p && typeof p.catch === "function") p.catch(() => { });
+    }
+
+    function jumpToStart(keepPaused) {
+        try {
+            videoEl.currentTime = startSec;
+        } catch (_) { }
+        if (!keepPaused) safePlay();
+    }
+
+    // Setup final endSec based on duration once known
+    videoEl.addEventListener("loadedmetadata", () => {
+        const dur = Number.isFinite(videoEl.duration) ? videoEl.duration : null;
+
+        if (dur != null) {
+            if (endIsVideo) {
+                endSec = dur;
+            } else if (endSec > dur) {
+                endSec = dur;
+            }
+        }
+
+        // Start at window start and autoplay (muted)
+        userPaused = false;
+        jumpToStart(false);
+    });
+
+    // If user pauses, respect it
+    videoEl.addEventListener("pause", () => {
+        // If it paused because it reached the natural end (rare), userPaused still ok
+        userPaused = true;
+    });
+
+    // If user hits play, allow it (resume normal looping)
+    videoEl.addEventListener("play", () => {
+        userPaused = false;
+    });
+
+    // Core loop logic: when reaching endSec, loop back to startSec
+    videoEl.addEventListener("timeupdate", () => {
+        // epsilon to prevent jitter
+        if (endSec <= startSec + 0.01) return;
+
+        if (videoEl.currentTime >= endSec - 0.02) {
+            // Loop back, but DO NOT resume if user paused
+            const keepPaused = videoEl.paused || userPaused;
+            jumpToStart(keepPaused);
+        }
+    });
+
+    // IMPORTANT CHANGE: allow free seeking/scrubbing.
+    // No snapping during seek; we only enforce the window when time reaches endSec.
+}
+
+window.DEFAULT_FPS = DEFAULT_FPS;
+window.attachLabeledLoop = attachLabeledLoop;
+window.computeWindowFrames = computeWindowFrames;
+