Spaces:
Running
Running
EmbRACE Viewer
Browse files- README.md +9 -4
- index.html +574 -17
README.md
CHANGED
|
@@ -1,10 +1,15 @@
|
|
| 1 |
---
|
| 2 |
title: EmbRACE Viewer
|
| 3 |
-
emoji:
|
| 4 |
-
colorFrom:
|
| 5 |
-
colorTo:
|
| 6 |
sdk: static
|
|
|
|
| 7 |
pinned: false
|
|
|
|
|
|
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
|
|
|
|
| 1 |
---
|
| 2 |
title: EmbRACE Viewer
|
| 3 |
+
emoji: 🧭
|
| 4 |
+
colorFrom: red
|
| 5 |
+
colorTo: indigo
|
| 6 |
sdk: static
|
| 7 |
+
app_file: index.html
|
| 8 |
pinned: false
|
| 9 |
+
license: apache-2.0
|
| 10 |
+
datasets:
|
| 11 |
+
- mxlin043/EmbRACE
|
| 12 |
+
short_description: Browse every task of the EmbRACE dataset and benchmark
|
| 13 |
---
|
| 14 |
|
| 15 |
+
Browse the 4,107 tasks of [EmbRACE](https://huggingface.co/datasets/mxlin043/EmbRACE) step by step. The page reads the frames and records straight from the dataset repo.
|
index.html
CHANGED
|
@@ -1,19 +1,576 @@
|
|
| 1 |
<!doctype html>
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 19 |
</html>
|
|
|
|
| 1 |
<!doctype html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="utf-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width,initial-scale=1">
|
| 6 |
+
<meta name="embrace-data" content="https://huggingface.co/datasets/mxlin043/EmbRACE/resolve/main/">
|
| 7 |
+
<title>EmbRACE Viewer</title>
|
| 8 |
+
<!--
|
| 9 |
+
Read-only viewer for the released EmbRACE data, the project page's EmbRACE Viewer
|
| 10 |
+
extended from its examples to every task. It reads the dataset repo's own files over
|
| 11 |
+
HTTP, so the same page runs beside a local export (tools/release/export_hf_dataset.py)
|
| 12 |
+
and as a static Space in front of the Hugging Face dataset repo.
|
| 13 |
+
|
| 14 |
+
index/web/tasks.json every task, loaded once
|
| 15 |
+
<split>/trajectory/<Env>/<Task>/infos.json the record of a task, loaded when it is opened
|
| 16 |
+
<split>/trajectory/<Env>/<Task>/NNN.jpg its frames (split: dataset or benchmark)
|
| 17 |
+
benchmark/success_region/<Env>/<Task>/... the two region images of a benchmark task
|
| 18 |
+
|
| 19 |
+
The data location comes from ?data=<url>, else from the embrace-data meta tag above.
|
| 20 |
+
?split=dataset|benchmark &env=<Env> &type=0-5 &q=<text> &task=<Env>/<Task> &step=<n>
|
| 21 |
+
restore a view, and the address bar follows the view, so a copied link reopens it.
|
| 22 |
+
?theme=dark switches to the dark palette; light, matching the page, is the default.
|
| 23 |
+
-->
|
| 24 |
+
<style>
|
| 25 |
+
:root, [data-theme="light"] {
|
| 26 |
+
--bg:#f5f5f7; --panel:#ffffff; --panel2:#fafafa; --head:#ffffff; --line:#e6e6e6; --line2:#eeeeee;
|
| 27 |
+
--text:#222222; --text2:#333333; --muted:#6b6b6b; --faint:#a8a8a8;
|
| 28 |
+
--accent:#FF3B30; --accent-soft:rgba(255,59,48,.07); --accent-line:rgba(255,59,48,.45);
|
| 29 |
+
--hover:#f7f7f8; --img-bg:#f4f4f4; --card:#fcfcfc; --card-line:#ececec;
|
| 30 |
+
--t0:#FF3B30; --t1:#FF9F0A; --t2:#e0b000; --t3:#32D74B; --t4:#40C8E0; --t5:#5E5CE6;
|
| 31 |
+
--move:#388E3C; --turn:#7C4DFF; --look:#c05ad8; --interact:#E64A19; --finish:#e0a800; --midway:#d49b00; --idle:#999999;
|
| 32 |
+
}
|
| 33 |
+
[data-theme="dark"] {
|
| 34 |
+
--bg:#0b0d12; --panel:#12151c; --panel2:#171b24; --head:#0e1117; --line:#252a35; --line2:#20242e;
|
| 35 |
+
--text:#eceef2; --text2:#d6d9df; --muted:#8a90a0; --faint:#5a6070;
|
| 36 |
+
--accent:#FF453A; --accent-soft:rgba(255,69,58,.12); --accent-line:rgba(255,69,58,.5);
|
| 37 |
+
--hover:#1a1f29; --img-bg:#07090d; --card:#161a22; --card-line:#262b36;
|
| 38 |
+
--t0:#FF453A; --t1:#FF9F0A; --t2:#FFD60A; --t3:#32D74B; --t4:#40C8E0; --t5:#7d7bff;
|
| 39 |
+
--move:#4caf50; --turn:#8f6bff; --look:#ea80fc; --interact:#ff6a3d; --finish:#fbc02d; --midway:#ffe57f; --idle:#969696;
|
| 40 |
+
}
|
| 41 |
+
* { box-sizing:border-box; }
|
| 42 |
+
html,body { margin:0; height:100%; overflow:hidden; background:var(--bg); color:var(--text);
|
| 43 |
+
font-family:"Google Sans","Noto Sans","Segoe UI",Helvetica,Arial,sans-serif; }
|
| 44 |
+
button,input,select { font:inherit; }
|
| 45 |
+
.app { height:100vh; display:grid; grid-template-rows:58px 1fr; }
|
| 46 |
+
header { display:flex; align-items:center; gap:14px; padding:0 20px; border-bottom:1px solid var(--line); background:var(--head); }
|
| 47 |
+
.brand { font-weight:700; font-size:20px; letter-spacing:.2px; color:var(--text); display:flex; align-items:baseline; gap:6px; }
|
| 48 |
+
/* Letter colours match the page title. */
|
| 49 |
+
.wordmark span { font-weight:800; }
|
| 50 |
+
.header-stats { margin-left:auto; display:flex; gap:8px; }
|
| 51 |
+
.pill { padding:5px 11px; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:12px; background:var(--panel); }
|
| 52 |
+
.workspace { min-height:0; display:grid; grid-template-columns:430px 340px minmax(520px,1fr); }
|
| 53 |
+
.column { min-height:0; border-right:1px solid var(--line); background:var(--panel); display:flex; flex-direction:column; }
|
| 54 |
+
.column:last-child { border-right:0; background:var(--bg); }
|
| 55 |
+
.column-head { padding:12px 14px; border-bottom:1px solid var(--line); }
|
| 56 |
+
/* Scrolling panes keep the scrollbar's width reserved whether or not they overflow, so content
|
| 57 |
+
stays put when a longer task or a success-region card brings the scrollbar in. */
|
| 58 |
+
.scroll { min-height:0; overflow:auto; scrollbar-gutter:stable; }
|
| 59 |
+
.controls { display:grid; gap:9px; }
|
| 60 |
+
/* Dataset / Benchmark: the one choice everything else depends on, so it gets the full width. */
|
| 61 |
+
.set-switch { display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:9px; overflow:hidden; background:var(--panel2); }
|
| 62 |
+
.set-btn { border:0; background:transparent; color:var(--muted); padding:8px 0; cursor:pointer; font-size:13px; font-weight:700; }
|
| 63 |
+
.set-btn + .set-btn { border-left:1px solid var(--line); }
|
| 64 |
+
.set-btn:hover { color:var(--text); }
|
| 65 |
+
.set-btn .cnt { font-weight:600; opacity:.75; margin-left:4px; }
|
| 66 |
+
.set-btn.active { background:var(--accent); color:#fff; }
|
| 67 |
+
.search-row { display:grid; grid-template-columns:1fr 168px; gap:6px; }
|
| 68 |
+
#search, #envSelect { width:100%; padding:7px 10px; border:1px solid var(--line); border-radius:7px; background:var(--panel2); color:var(--text); font-size:12px; outline:none; }
|
| 69 |
+
#envSelect { padding:6px 8px; cursor:pointer; }
|
| 70 |
+
#search:focus, #envSelect:focus { border-color:var(--accent-line); }
|
| 71 |
+
#search::placeholder { color:var(--faint); }
|
| 72 |
+
.filter-row { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
|
| 73 |
+
.filter { border:1px solid var(--line); background:var(--panel2); color:var(--muted); border-radius:5px; padding:2px 9px; cursor:pointer; font-size:11px; transition:all .15s; }
|
| 74 |
+
.filter:hover { border-color:var(--accent-line); color:var(--text); }
|
| 75 |
+
.filter.active { color:var(--accent); border-color:var(--accent-line); background:var(--accent-soft); font-weight:700; }
|
| 76 |
+
.task-table-head,.task { display:grid; grid-template-columns:36px minmax(0,1fr) 28px 118px; align-items:center; gap:6px; }
|
| 77 |
+
.task-table-head { padding:6px 12px; background:var(--panel2); border-bottom:1px solid var(--line); color:var(--muted); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
|
| 78 |
+
/* The list holds every task of a split, so only the rows in view are drawn. */
|
| 79 |
+
.rows { position:relative; }
|
| 80 |
+
.task { position:absolute; left:0; right:0; height:32px; text-align:left; border:0; border-bottom:1px solid var(--line2); background:transparent; color:var(--text); padding:0 12px; cursor:pointer; font-size:12px; }
|
| 81 |
+
.task:hover { background:var(--hover); }
|
| 82 |
+
.task.active { background:var(--accent-soft); box-shadow:inset 3px 0 0 var(--accent); }
|
| 83 |
+
.task-index { color:var(--faint); font-size:11px; }
|
| 84 |
+
.task-instr { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
|
| 85 |
+
.task-map { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:11px; }
|
| 86 |
+
.type-badge { display:inline-block; text-align:center; border-radius:4px; padding:1px 0; font-size:10px; font-weight:800; color:#fff; }
|
| 87 |
+
.type-0 { background:var(--t0); } .type-1 { background:var(--t1); } .type-2 { background:var(--t2); }
|
| 88 |
+
.type-3 { background:var(--t3); } .type-4 { background:var(--t4); } .type-5 { background:var(--t5); }
|
| 89 |
+
.foot { flex:0 0 auto; padding:8px 12px; border-top:1px solid var(--line); background:var(--panel2); color:var(--muted); font-size:11px; }
|
| 90 |
+
.summary { display:grid; gap:10px; }
|
| 91 |
+
.task-id-card { border:1px solid var(--card-line); border-radius:9px; padding:8px 10px; background:var(--card); }
|
| 92 |
+
.task-id-head { display:flex; align-items:center; justify-content:space-between; }
|
| 93 |
+
.label { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.6px; font-weight:700; }
|
| 94 |
+
.copy-btn { border:1px solid var(--line); background:var(--panel); color:var(--muted); border-radius:5px; padding:1px 8px; font-size:11px; cursor:pointer; }
|
| 95 |
+
.copy-btn:hover { color:var(--accent); border-color:var(--accent-line); }
|
| 96 |
+
.task-id-value { display:block; margin-top:4px; font-size:12px; word-break:break-all; color:var(--text); }
|
| 97 |
+
.facts { display:grid; grid-template-columns:auto 1fr; gap:4px 12px; font-size:12.5px; }
|
| 98 |
+
.facts .k { color:var(--muted); }
|
| 99 |
+
.facts code { color:var(--faint); font-size:11px; margin-left:4px; }
|
| 100 |
+
/* The instruction reads like the page's Data Example: a small red label and the sentence. */
|
| 101 |
+
.instruction { font-size:14.5px; line-height:1.45; font-weight:600; color:var(--text); padding:10px 12px;
|
| 102 |
+
border:1px solid var(--card-line); border-radius:9px; background:var(--card); }
|
| 103 |
+
.instruction .lab { display:block; color:var(--accent); font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.6px; margin-bottom:3px; }
|
| 104 |
+
.action { width:100%; display:grid; grid-template-columns:34px 1fr; align-items:center; gap:8px; text-align:left; border:0; border-bottom:1px solid var(--line2); background:transparent; color:var(--text); padding:8px 14px; cursor:pointer; }
|
| 105 |
+
.action:hover { background:var(--hover); }
|
| 106 |
+
.action.active { background:var(--accent-soft); box-shadow:inset 3px 0 0 var(--accent); }
|
| 107 |
+
.action-index { color:var(--faint); font-size:11px; font-family:ui-monospace,monospace; }
|
| 108 |
+
.action-name { font-weight:700; font-size:13px; }
|
| 109 |
+
.detail { height:100%; overflow:auto; scrollbar-gutter:stable; padding:16px 20px 24px; }
|
| 110 |
+
.detail-head { display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
|
| 111 |
+
.step { display:inline-flex; align-items:baseline; gap:4px; }
|
| 112 |
+
.step-now { font-size:22px; font-weight:800; color:var(--accent); line-height:1; }
|
| 113 |
+
.step-sep { font-size:15px; color:var(--faint); }
|
| 114 |
+
.step-all { font-size:15px; font-weight:700; color:var(--muted); }
|
| 115 |
+
.step-word { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); margin-left:3px; }
|
| 116 |
+
/* The same pill the page draws for the current action. */
|
| 117 |
+
.act-pill { display:inline-block; padding:4px 13px; border-radius:999px; color:#fff; font-size:13px; font-weight:800; letter-spacing:.02em; white-space:nowrap; }
|
| 118 |
+
.ref-tag { color:var(--muted); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
|
| 119 |
+
.step-nav { margin-left:auto; display:inline-flex; border-radius:9px; overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,.08); }
|
| 120 |
+
.nav-btn { border:0; background:var(--accent); color:#fff; padding:6px 14px; cursor:pointer; font-size:12.5px; font-weight:700; }
|
| 121 |
+
.nav-btn + .nav-btn { border-left:1px solid rgba(255,255,255,.35); }
|
| 122 |
+
.nav-btn:hover:not(:disabled) { filter:brightness(.92); }
|
| 123 |
+
.nav-btn:disabled { background:#dcdcdc; color:#fff; cursor:default; }
|
| 124 |
+
[data-theme="dark"] .nav-btn:disabled { background:#343a46; color:#8a90a0; }
|
| 125 |
+
.images { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
|
| 126 |
+
.image-card { position:relative; border-radius:10px; overflow:hidden; background:var(--img-bg); aspect-ratio:4/3; }
|
| 127 |
+
.image-card img { width:100%; height:100%; object-fit:contain; display:block; }
|
| 128 |
+
.image-label { position:absolute; top:8px; left:8px; background:rgba(0,0,0,.6); color:#fff; font-size:11px; font-weight:700; padding:3px 8px; border-radius:5px; }
|
| 129 |
+
/* The rationale card follows the page's Data Example side panel: a light card, dark text,
|
| 130 |
+
and the label in the page's accent, rather than a black block of its own. */
|
| 131 |
+
.rationale { margin-top:16px; border:1px solid var(--card-line); border-radius:10px; background:var(--card); padding:14px 18px; }
|
| 132 |
+
.rationale .rl { display:block; color:var(--accent); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.6px; margin-bottom:6px; }
|
| 133 |
+
.rationale .rt { font-size:15.5px; line-height:1.62; color:var(--text2); }
|
| 134 |
+
/* Success region: the two canonical images a benchmark task is judged against, in the
|
| 135 |
+
place the rationale card takes in the dataset view. */
|
| 136 |
+
.region { margin-top:16px; border:1px solid var(--card-line); border-radius:10px; background:var(--card); padding:14px 18px 16px; }
|
| 137 |
+
.region .rl { display:block; color:var(--accent); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.6px; margin-bottom:2px; }
|
| 138 |
+
.region .rn { color:var(--muted); font-size:12.5px; line-height:1.5; margin-bottom:10px; }
|
| 139 |
+
.region-stage { margin-top:10px; }
|
| 140 |
+
.region-stage + .region-stage { margin-top:14px; }
|
| 141 |
+
.stage-tag { display:inline-block; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:var(--text2); margin-bottom:6px; }
|
| 142 |
+
.region-pair { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
|
| 143 |
+
.region-img { position:relative; border-radius:9px; overflow:hidden; aspect-ratio:4/3; background:#ffffff; border:1px solid var(--card-line); cursor:zoom-in; padding:0; width:100%; }
|
| 144 |
+
.region-img img { width:100%; height:100%; object-fit:contain; display:block; }
|
| 145 |
+
.region-fig { margin:0; }
|
| 146 |
+
.region-fig figcaption { margin-top:5px; color:var(--muted); font-size:11.5px; font-weight:600; text-align:center; }
|
| 147 |
+
.zoom { position:fixed; inset:0; background:rgba(10,12,16,.82); display:none; align-items:center; justify-content:center; z-index:50; cursor:zoom-out; padding:24px; }
|
| 148 |
+
.zoom.open { display:flex; }
|
| 149 |
+
.zoom img { max-width:100%; max-height:100%; border-radius:8px; background:#fff; box-shadow:0 10px 40px rgba(0,0,0,.4); }
|
| 150 |
+
.empty { padding:24px; color:var(--muted); font-size:13px; text-align:center; }
|
| 151 |
+
.keys { color:var(--faint); font-size:11px; margin-top:12px; }
|
| 152 |
+
@media (max-width:1200px) {
|
| 153 |
+
html,body { overflow:auto; height:auto; }
|
| 154 |
+
.app { height:auto; }
|
| 155 |
+
.workspace { grid-template-columns:1fr; }
|
| 156 |
+
.column { border-right:0; border-bottom:1px solid var(--line); }
|
| 157 |
+
.scroll { max-height:340px; }
|
| 158 |
+
#taskList { height:340px; }
|
| 159 |
+
}
|
| 160 |
+
</style>
|
| 161 |
+
</head>
|
| 162 |
+
<body>
|
| 163 |
+
<div class="app">
|
| 164 |
+
<header>
|
| 165 |
+
<div class="brand">
|
| 166 |
+
<span class="wordmark"><span style="color:#FF3B30">E</span><span style="color:#FF9F0A">m</span><span style="color:#FFD60A">b</span><span style="color:#32D74B">R</span><span style="color:#40C8E0">A</span><span style="color:#5E5CE6">C</span><span style="color:#FF2D9B">E</span></span>
|
| 167 |
+
<span>Viewer</span>
|
| 168 |
+
</div>
|
| 169 |
+
<div class="header-stats"><span class="pill" id="taskCount">Loading…</span></div>
|
| 170 |
+
</header>
|
| 171 |
+
<main class="workspace">
|
| 172 |
+
<section class="column">
|
| 173 |
+
<div class="column-head">
|
| 174 |
+
<div class="controls">
|
| 175 |
+
<div class="set-switch" role="tablist">
|
| 176 |
+
<button class="set-btn" data-split="dataset" type="button" role="tab">Dataset</button>
|
| 177 |
+
<button class="set-btn" data-split="benchmark" type="button" role="tab">Benchmark</button>
|
| 178 |
+
</div>
|
| 179 |
+
<div class="search-row">
|
| 180 |
+
<input id="search" placeholder="Search instruction, task or environment…" aria-label="Search tasks">
|
| 181 |
+
<select id="envSelect" aria-label="Environment"></select>
|
| 182 |
+
</div>
|
| 183 |
+
<div class="filter-row" id="typeFilter"></div>
|
| 184 |
+
</div>
|
| 185 |
+
</div>
|
| 186 |
+
<div class="task-table-head"><span>#</span><span>Instruction</span><span>Type</span><span>Environment</span></div>
|
| 187 |
+
<div class="scroll" id="taskList" style="flex:1"><div class="rows" id="rows"><div class="empty">Loading…</div></div></div>
|
| 188 |
+
<div class="foot" id="foot"></div>
|
| 189 |
+
</section>
|
| 190 |
+
<section class="column">
|
| 191 |
+
<div class="column-head"><div id="taskSummary"><div class="empty">Select a task.</div></div></div>
|
| 192 |
+
<div class="scroll" id="actionList" style="flex:1"></div>
|
| 193 |
+
</section>
|
| 194 |
+
<section class="column">
|
| 195 |
+
<div class="detail" id="detail"><div class="empty">Select a task to walk through its steps.</div></div>
|
| 196 |
+
</section>
|
| 197 |
+
</main>
|
| 198 |
+
</div>
|
| 199 |
+
|
| 200 |
+
<div class="zoom" id="zoom" role="dialog" aria-label="Enlarged image"><img id="zoomImg" alt=""></div>
|
| 201 |
+
|
| 202 |
+
<script>
|
| 203 |
+
(function () {
|
| 204 |
+
"use strict";
|
| 205 |
+
|
| 206 |
+
const params = new URLSearchParams(window.location.search);
|
| 207 |
+
document.documentElement.dataset.theme = params.get("theme") === "dark" ? "dark" : "light";
|
| 208 |
+
let DATA = params.get("data") || document.querySelector('meta[name="embrace-data"]').content;
|
| 209 |
+
if (!DATA.endsWith("/")) DATA += "/";
|
| 210 |
+
|
| 211 |
+
const TYPE_NAMES = ["Basic", "Exploration", "Dynamic Spatial-Semantic", "Multi-stage",
|
| 212 |
+
"Open Door", "Pick & Drop"];
|
| 213 |
+
const SPLITS = {
|
| 214 |
+
dataset: "Training demonstrations, each step with the rationale for its action.",
|
| 215 |
+
benchmark: "Held-out test tasks, each with its reference human demonstration and the success region it is judged against."
|
| 216 |
+
};
|
| 217 |
+
// The action families of the qualitative videos, so the two agree.
|
| 218 |
+
const ACTION_FAMILY = {
|
| 219 |
+
MoveForward: "move", MoveBackward: "move",
|
| 220 |
+
TurnLeft: "turn", TurnRight: "turn",
|
| 221 |
+
LookUp: "look", LookDown: "look",
|
| 222 |
+
OpenDoor: "interact", Pick: "interact", Drop: "interact",
|
| 223 |
+
Finish: "finish", MidwayTarget: "midway", Idle: "idle"
|
| 224 |
+
};
|
| 225 |
+
const actionColor = name => `var(--${ACTION_FAMILY[name] || "idle"})`;
|
| 226 |
+
const esc = value => { const d = document.createElement("div"); d.textContent = value ?? ""; return d.innerHTML; };
|
| 227 |
+
const fmt = n => n.toLocaleString("en-US");
|
| 228 |
+
const frame = i => String(i).padStart(3, "0") + ".jpg";
|
| 229 |
+
const $ = id => document.getElementById(id);
|
| 230 |
+
const ROW_H = 32;
|
| 231 |
+
|
| 232 |
+
const state = { envs: [], pd: {}, all: [], split: "dataset", env: "all", type: "all",
|
| 233 |
+
filtered: [], task: null, record: null, step: 0 };
|
| 234 |
+
const records = new Map();
|
| 235 |
+
|
| 236 |
+
const trajUrl = (t, file) => `${DATA}${t.split}/trajectory/${t.env.id}/${t.stem}/${file}`;
|
| 237 |
+
const areaUrl = (t, file) => `${DATA}${t.split}/success_region/${t.env.id}/${t.stem}/${file}`;
|
| 238 |
+
|
| 239 |
+
async function loadIndex() {
|
| 240 |
+
const url = DATA + "index/web/tasks.json";
|
| 241 |
+
const res = await fetch(url);
|
| 242 |
+
if (!res.ok) throw new Error(`Could not read ${url} (${res.status})`);
|
| 243 |
+
const idx = await res.json();
|
| 244 |
+
const c = Object.fromEntries(idx.columns.map((name, i) => [name, i]));
|
| 245 |
+
state.envs = idx.environments;
|
| 246 |
+
state.pd = idx.pd_objects;
|
| 247 |
+
state.all = idx.tasks.map(r => {
|
| 248 |
+
const env = state.envs[r[c.env]];
|
| 249 |
+
return {
|
| 250 |
+
env, split: env.split, stem: r[c.task], type: r[c.type], steps: r[c.steps],
|
| 251 |
+
instruction: r[c.instruction], pd: r[c.pd_id], regions: r[c.regions],
|
| 252 |
+
haystack: `${r[c.instruction]} ${r[c.task]} ${env.id} ${env.name}`.toLowerCase()
|
| 253 |
+
};
|
| 254 |
+
});
|
| 255 |
+
}
|
| 256 |
+
|
| 257 |
+
function inSplit() { return state.all.filter(t => t.split === state.split); }
|
| 258 |
+
|
| 259 |
+
function switchSplit(split, keep) {
|
| 260 |
+
state.split = split;
|
| 261 |
+
const tasks = inSplit();
|
| 262 |
+
const env = keep && keep.env, type = keep && keep.type;
|
| 263 |
+
state.env = env && tasks.some(t => t.env.id === env) ? env : "all";
|
| 264 |
+
state.type = type !== undefined && tasks.some(t => t.type === type) ? type : "all";
|
| 265 |
+
document.querySelectorAll(".set-btn").forEach(b =>
|
| 266 |
+
b.classList.toggle("active", b.dataset.split === split));
|
| 267 |
+
const envCount = new Set(tasks.map(t => t.env.id)).size;
|
| 268 |
+
const steps = tasks.reduce((s, t) => s + t.steps, 0);
|
| 269 |
+
$("foot").textContent = `${fmt(tasks.length)} tasks · ${envCount} environments · ${fmt(steps)} steps`;
|
| 270 |
+
applyFilters();
|
| 271 |
+
const wanted = keep && keep.task;
|
| 272 |
+
const first = (wanted && tasks.find(t => `${t.env.id}/${t.stem}` === wanted || t.stem === wanted))
|
| 273 |
+
|| state.filtered[0];
|
| 274 |
+
if (first) selectTask(first, keep && keep.step ? keep.step : 0);
|
| 275 |
+
}
|
| 276 |
+
|
| 277 |
+
const searchWords = () => {
|
| 278 |
+
const q = $("search").value.trim().toLowerCase();
|
| 279 |
+
return q ? q.split(/\s+/) : [];
|
| 280 |
+
};
|
| 281 |
+
const hit = (t, words) => words.every(w => t.haystack.includes(w));
|
| 282 |
+
|
| 283 |
+
// Every number beside a filter option counts tasks: the tasks the list would show with that
|
| 284 |
+
// option chosen and the other filters kept, so a number always matches what the list shows.
|
| 285 |
+
// Options that would show nothing are left out, except the one already chosen, which stays
|
| 286 |
+
// with its 0 so an empty list explains itself.
|
| 287 |
+
function refreshFacets(words) {
|
| 288 |
+
const tasks = inSplit(), envCounts = {}, typeCounts = {};
|
| 289 |
+
let envAll = 0, typeAll = 0;
|
| 290 |
+
tasks.forEach(t => {
|
| 291 |
+
if (!hit(t, words)) return;
|
| 292 |
+
if (state.type === "all" || t.type === state.type) {
|
| 293 |
+
envCounts[t.env.id] = (envCounts[t.env.id] || 0) + 1; envAll++;
|
| 294 |
+
}
|
| 295 |
+
if (state.env === "all" || t.env.id === state.env) {
|
| 296 |
+
typeCounts[t.type] = (typeCounts[t.type] || 0) + 1; typeAll++;
|
| 297 |
+
}
|
| 298 |
+
});
|
| 299 |
+
const envs = [...new Set(tasks.map(t => t.env))].sort((a, b) => a.name.localeCompare(b.name));
|
| 300 |
+
const select = $("envSelect");
|
| 301 |
+
select.innerHTML = `<option value="all">All environments (${fmt(envAll)})</option>` +
|
| 302 |
+
envs.map(e => {
|
| 303 |
+
const n = envCounts[e.id] || 0;
|
| 304 |
+
return n || e.id === state.env
|
| 305 |
+
? `<option value="${esc(e.id)}">${esc(e.name)} (${fmt(n)})</option>` : "";
|
| 306 |
+
}).join("");
|
| 307 |
+
select.value = state.env;
|
| 308 |
+
$("typeFilter").innerHTML =
|
| 309 |
+
`<button class="filter" data-value="all" type="button" title="${fmt(typeAll)} tasks">All</button>` +
|
| 310 |
+
TYPE_NAMES.map((name, i) => {
|
| 311 |
+
const n = typeCounts[i] || 0;
|
| 312 |
+
return n || state.type === i
|
| 313 |
+
? `<button class="filter" data-value="${i}" type="button" title="${esc(name)} · ${fmt(n)} tasks">T${i}</button>` : "";
|
| 314 |
+
}).join("");
|
| 315 |
+
$("typeFilter").querySelectorAll(".filter").forEach(b =>
|
| 316 |
+
b.classList.toggle("active", b.dataset.value === String(state.type)));
|
| 317 |
+
}
|
| 318 |
+
|
| 319 |
+
function applyFilters() {
|
| 320 |
+
const words = searchWords();
|
| 321 |
+
refreshFacets(words);
|
| 322 |
+
const tasks = inSplit();
|
| 323 |
+
state.filtered = tasks.filter(t =>
|
| 324 |
+
(state.env === "all" || t.env.id === state.env) &&
|
| 325 |
+
(state.type === "all" || t.type === state.type) && hit(t, words));
|
| 326 |
+
$("taskCount").textContent = `${fmt(state.filtered.length)}/${fmt(tasks.length)} tasks`;
|
| 327 |
+
$("taskList").scrollTop = 0;
|
| 328 |
+
renderTasks();
|
| 329 |
+
syncUrl();
|
| 330 |
+
}
|
| 331 |
+
|
| 332 |
+
function renderTasks() {
|
| 333 |
+
const rows = $("rows");
|
| 334 |
+
if (!state.filtered.length) {
|
| 335 |
+
rows.style.height = "";
|
| 336 |
+
rows.innerHTML = '<div class="empty">No matching tasks.</div>';
|
| 337 |
+
return;
|
| 338 |
+
}
|
| 339 |
+
rows.style.height = `${state.filtered.length * ROW_H}px`;
|
| 340 |
+
drawRows();
|
| 341 |
+
}
|
| 342 |
+
|
| 343 |
+
function drawRows() {
|
| 344 |
+
if (!state.filtered.length) return;
|
| 345 |
+
const list = $("taskList");
|
| 346 |
+
const start = Math.max(0, Math.floor(list.scrollTop / ROW_H) - 10);
|
| 347 |
+
const end = Math.min(state.filtered.length, Math.ceil((list.scrollTop + list.clientHeight) / ROW_H) + 10);
|
| 348 |
+
let html = "";
|
| 349 |
+
for (let i = start; i < end; i++) {
|
| 350 |
+
const t = state.filtered[i];
|
| 351 |
+
html += `<button class="task${state.task === t ? " active" : ""}" data-i="${i}" type="button" style="top:${i * ROW_H}px" title="${esc(t.instruction)}">
|
| 352 |
+
<span class="task-index">${i + 1}</span>
|
| 353 |
+
<span class="task-instr">${esc(t.instruction)}</span>
|
| 354 |
+
<span class="type-badge type-${t.type}" title="${esc(TYPE_NAMES[t.type])}">T${t.type}</span>
|
| 355 |
+
<span class="task-map" title="${esc(t.env.name)}">${esc(t.env.name)}</span>
|
| 356 |
+
</button>`;
|
| 357 |
+
}
|
| 358 |
+
$("rows").innerHTML = html;
|
| 359 |
+
}
|
| 360 |
+
|
| 361 |
+
function revealTask() {
|
| 362 |
+
const i = state.filtered.indexOf(state.task);
|
| 363 |
+
if (i < 0) return;
|
| 364 |
+
const list = $("taskList");
|
| 365 |
+
const top = i * ROW_H;
|
| 366 |
+
if (top < list.scrollTop || top + ROW_H > list.scrollTop + list.clientHeight)
|
| 367 |
+
list.scrollTop = Math.max(0, top - list.clientHeight / 2);
|
| 368 |
+
drawRows();
|
| 369 |
+
}
|
| 370 |
+
|
| 371 |
+
async function selectTask(task, step) {
|
| 372 |
+
state.task = task; state.record = null; state.step = step || 0;
|
| 373 |
+
drawRows(); renderSummary();
|
| 374 |
+
$("actionList").innerHTML = '<div class="empty">Loading…</div>';
|
| 375 |
+
$("detail").innerHTML = '<div class="empty">Loading…</div>';
|
| 376 |
+
const key = `${task.env.id}/${task.stem}`;
|
| 377 |
+
let record = records.get(key);
|
| 378 |
+
if (!record) {
|
| 379 |
+
try {
|
| 380 |
+
const res = await fetch(trajUrl(task, "infos.json"));
|
| 381 |
+
if (!res.ok) throw new Error(`${res.status}`);
|
| 382 |
+
record = await res.json();
|
| 383 |
+
records.set(key, record);
|
| 384 |
+
} catch (err) {
|
| 385 |
+
if (state.task === task)
|
| 386 |
+
$("detail").innerHTML = `<div class="empty">Could not load this task (${esc(err.message)}).</div>`;
|
| 387 |
+
return;
|
| 388 |
+
}
|
| 389 |
+
}
|
| 390 |
+
if (state.task !== task) return; // another task was opened meanwhile
|
| 391 |
+
state.record = record;
|
| 392 |
+
state.step = Math.min(state.step, record.Action.length - 1);
|
| 393 |
+
for (let i = 0; i <= record.Action.length; i++) new Image().src = trajUrl(task, frame(i));
|
| 394 |
+
renderActions(); renderDetail(); syncUrl();
|
| 395 |
+
}
|
| 396 |
+
|
| 397 |
+
function renderSummary() {
|
| 398 |
+
const t = state.task;
|
| 399 |
+
const object = t.pd !== null && t.pd !== undefined
|
| 400 |
+
? `<span class="k">Object</span><span>${esc(state.pd[String(t.pd)] || t.pd)}</span>` : "";
|
| 401 |
+
$("taskSummary").innerHTML = `
|
| 402 |
+
<div class="summary">
|
| 403 |
+
<div class="task-id-card">
|
| 404 |
+
<div class="task-id-head"><span class="label">Task ID</span><button class="copy-btn" id="copyId" type="button">Copy</button></div>
|
| 405 |
+
<code class="task-id-value">${esc(t.stem)}</code>
|
| 406 |
+
</div>
|
| 407 |
+
<div class="facts">
|
| 408 |
+
<span class="k">Type</span><span>T${t.type} · ${esc(TYPE_NAMES[t.type])}</span>
|
| 409 |
+
<span class="k">Environment</span><span>${esc(t.env.name)}<code>${esc(t.env.id)}</code></span>
|
| 410 |
+
<span class="k">Setting</span><span>${esc(t.env.setting)}</span>
|
| 411 |
+
<span class="k">Steps</span><span>${t.steps}</span>
|
| 412 |
+
${object}
|
| 413 |
+
</div>
|
| 414 |
+
<div class="instruction"><span class="lab">Instruction</span>${esc(t.instruction)}</div>
|
| 415 |
+
</div>`;
|
| 416 |
+
$("copyId").addEventListener("click", async (e) => {
|
| 417 |
+
const text = t.stem, btn = e.currentTarget;
|
| 418 |
+
try {
|
| 419 |
+
if (navigator.clipboard && window.isSecureContext) await navigator.clipboard.writeText(text);
|
| 420 |
+
else {
|
| 421 |
+
const a = document.createElement("textarea");
|
| 422 |
+
a.value = text; a.style.position = "fixed"; a.style.opacity = "0";
|
| 423 |
+
document.body.appendChild(a); a.select(); document.execCommand("copy"); a.remove();
|
| 424 |
+
}
|
| 425 |
+
btn.textContent = "Copied"; setTimeout(() => { btn.textContent = "Copy"; }, 1000);
|
| 426 |
+
} catch (err) { btn.textContent = "Select ID"; }
|
| 427 |
+
});
|
| 428 |
+
}
|
| 429 |
+
|
| 430 |
+
function renderActions() {
|
| 431 |
+
const list = $("actionList");
|
| 432 |
+
list.innerHTML = state.record.Action.map((a, i) => `
|
| 433 |
+
<button class="action${i === state.step ? " active" : ""}" data-i="${i}" type="button">
|
| 434 |
+
<span class="action-index">${String(i + 1).padStart(2, "0")}</span>
|
| 435 |
+
<span class="action-name" style="color:${actionColor(a)}">${esc(a)}</span>
|
| 436 |
+
</button>`).join("");
|
| 437 |
+
const active = list.querySelector(".action.active");
|
| 438 |
+
if (active) active.scrollIntoView({ block: "nearest" });
|
| 439 |
+
}
|
| 440 |
+
|
| 441 |
+
function selectStep(i) {
|
| 442 |
+
if (!state.record || i < 0 || i >= state.record.Action.length) return;
|
| 443 |
+
state.step = i; renderActions(); renderDetail(); syncUrl();
|
| 444 |
+
}
|
| 445 |
+
|
| 446 |
+
function renderDetail() {
|
| 447 |
+
const t = state.task, r = state.record, i = state.step, n = r.Action.length;
|
| 448 |
+
const action = r.Action[i];
|
| 449 |
+
const rationale = r.Rationale
|
| 450 |
+
? `<div class="rationale"><span class="rl">Rationale</span><div class="rt">${esc(r.Rationale[i])}</div></div>`
|
| 451 |
+
: "";
|
| 452 |
+
const tag = t.split === "benchmark" ? `<span class="ref-tag">Reference demonstration</span>` : "";
|
| 453 |
+
const region = t.regions && t.regions.length ? regionHtml(t) : "";
|
| 454 |
+
$("detail").innerHTML = `
|
| 455 |
+
<div class="detail-head">
|
| 456 |
+
<span class="step"><span class="step-now">${i + 1}</span><span class="step-sep">/</span><span class="step-all">${n}</span><span class="step-word">steps</span></span>
|
| 457 |
+
<span class="act-pill" style="background:${actionColor(action)}">${esc(action)}</span>
|
| 458 |
+
${tag}
|
| 459 |
+
<div class="step-nav">
|
| 460 |
+
<button class="nav-btn" id="prev" type="button" ${i === 0 ? "disabled" : ""}>← Previous</button>
|
| 461 |
+
<button class="nav-btn" id="next" type="button" ${i === n - 1 ? "disabled" : ""}>Next →</button>
|
| 462 |
+
</div>
|
| 463 |
+
</div>
|
| 464 |
+
<div class="images">
|
| 465 |
+
<div class="image-card"><span class="image-label">Before Action</span><img src="${esc(trajUrl(t, frame(i)))}" alt="Ego view before the action"></div>
|
| 466 |
+
<div class="image-card"><span class="image-label">After Action</span><img src="${esc(trajUrl(t, frame(i + 1)))}" alt="Ego view after the action"></div>
|
| 467 |
+
</div>
|
| 468 |
+
${rationale}
|
| 469 |
+
${region}
|
| 470 |
+
<div class="keys">← → or ↑ ↓ to move between steps · click a success-region image to enlarge it</div>`;
|
| 471 |
+
$("prev").addEventListener("click", () => selectStep(i - 1));
|
| 472 |
+
$("next").addEventListener("click", () => selectStep(i + 1));
|
| 473 |
+
document.querySelectorAll(".region-img").forEach(b => b.addEventListener("click", () => {
|
| 474 |
+
$("zoomImg").src = b.dataset.src;
|
| 475 |
+
$("zoom").classList.add("open");
|
| 476 |
+
}));
|
| 477 |
+
}
|
| 478 |
+
|
| 479 |
+
function regionHtml(t) {
|
| 480 |
+
const figure = (file, alt, caption) => `
|
| 481 |
+
<figure class="region-fig">
|
| 482 |
+
<button class="region-img" type="button" data-src="${esc(areaUrl(t, file))}">
|
| 483 |
+
<img src="${esc(areaUrl(t, file))}" alt="${alt}">
|
| 484 |
+
</button>
|
| 485 |
+
<figcaption>${caption}</figcaption>
|
| 486 |
+
</figure>`;
|
| 487 |
+
const multi = t.regions.length > 1;
|
| 488 |
+
const stages = t.regions.map(([stage, xy, ue]) => `
|
| 489 |
+
<div class="region-stage">
|
| 490 |
+
${multi ? `<span class="stage-tag">${stage === "midway" ? "Midway target" : "Final target"}</span>` : ""}
|
| 491 |
+
<div class="region-pair">
|
| 492 |
+
${figure(xy, "Top-down plot of the success region", "Top-down plot")}
|
| 493 |
+
${figure(ue, "Success region drawn over the scene", "Scene overlay")}
|
| 494 |
+
</div>
|
| 495 |
+
</div>`).join("");
|
| 496 |
+
return `<div class="region"><span class="rl">Success region</span>
|
| 497 |
+
<div class="rn">The orange box is the target's footprint, and the outlined area around it is the success region.</div>
|
| 498 |
+
${stages}</div>`;
|
| 499 |
+
}
|
| 500 |
+
|
| 501 |
+
// The address bar follows the view, so a copied link reopens it.
|
| 502 |
+
function syncUrl() {
|
| 503 |
+
const p = new URLSearchParams();
|
| 504 |
+
["data", "theme"].forEach(k => { if (params.get(k)) p.set(k, params.get(k)); });
|
| 505 |
+
p.set("split", state.split);
|
| 506 |
+
if (state.env !== "all") p.set("env", state.env);
|
| 507 |
+
if (state.type !== "all") p.set("type", state.type);
|
| 508 |
+
const q = $("search").value.trim();
|
| 509 |
+
if (q) p.set("q", q);
|
| 510 |
+
if (state.task) p.set("task", `${state.task.env.id}/${state.task.stem}`);
|
| 511 |
+
if (state.task && state.step > 0) p.set("step", state.step + 1);
|
| 512 |
+
history.replaceState(null, "", `${location.pathname}?${p.toString()}`);
|
| 513 |
+
}
|
| 514 |
+
|
| 515 |
+
const zoom = $("zoom");
|
| 516 |
+
zoom.addEventListener("click", () => zoom.classList.remove("open"));
|
| 517 |
+
|
| 518 |
+
document.addEventListener("keydown", e => {
|
| 519 |
+
if (e.key === "Escape" && zoom.classList.contains("open")) { zoom.classList.remove("open"); return; }
|
| 520 |
+
if (zoom.classList.contains("open")) return;
|
| 521 |
+
if (!state.record || e.target.matches("input,textarea,select")) return;
|
| 522 |
+
if (["ArrowDown", "ArrowRight", "j"].includes(e.key)) { e.preventDefault(); selectStep(state.step + 1); }
|
| 523 |
+
if (["ArrowUp", "ArrowLeft", "k"].includes(e.key)) { e.preventDefault(); selectStep(state.step - 1); }
|
| 524 |
+
});
|
| 525 |
+
|
| 526 |
+
$("rows").addEventListener("click", e => {
|
| 527 |
+
const b = e.target.closest(".task");
|
| 528 |
+
if (b) selectTask(state.filtered[Number(b.dataset.i)], 0);
|
| 529 |
+
});
|
| 530 |
+
$("actionList").addEventListener("click", e => {
|
| 531 |
+
const b = e.target.closest(".action");
|
| 532 |
+
if (b) selectStep(Number(b.dataset.i));
|
| 533 |
+
});
|
| 534 |
+
$("taskList").addEventListener("scroll", () => requestAnimationFrame(drawRows));
|
| 535 |
+
window.addEventListener("resize", () => requestAnimationFrame(drawRows));
|
| 536 |
+
$("search").addEventListener("input", applyFilters);
|
| 537 |
+
$("envSelect").addEventListener("change", e => {
|
| 538 |
+
state.env = e.target.value;
|
| 539 |
+
applyFilters();
|
| 540 |
+
});
|
| 541 |
+
$("typeFilter").addEventListener("click", e => {
|
| 542 |
+
const b = e.target.closest(".filter");
|
| 543 |
+
if (!b) return;
|
| 544 |
+
state.type = b.dataset.value === "all" ? "all" : Number(b.dataset.value);
|
| 545 |
+
applyFilters();
|
| 546 |
+
});
|
| 547 |
+
|
| 548 |
+
loadIndex().then(() => {
|
| 549 |
+
const counts = { dataset: 0, benchmark: 0 };
|
| 550 |
+
state.all.forEach(t => { counts[t.split]++; });
|
| 551 |
+
// What each split holds is told on hover, so switching never moves the controls below.
|
| 552 |
+
document.querySelectorAll(".set-btn").forEach(b => {
|
| 553 |
+
b.innerHTML += `<span class="cnt">${fmt(counts[b.dataset.split])}</span>`;
|
| 554 |
+
b.title = SPLITS[b.dataset.split];
|
| 555 |
+
b.addEventListener("click", () => { if (b.dataset.split !== state.split) switchSplit(b.dataset.split); });
|
| 556 |
+
});
|
| 557 |
+
if (params.get("q")) $("search").value = params.get("q");
|
| 558 |
+
const wanted = params.get("task");
|
| 559 |
+
const fromTask = wanted && state.all.find(t => `${t.env.id}/${t.stem}` === wanted || t.stem === wanted);
|
| 560 |
+
const split = fromTask ? fromTask.split : (params.get("split") === "benchmark" ? "benchmark" : "dataset");
|
| 561 |
+
const type = params.get("type");
|
| 562 |
+
switchSplit(split, {
|
| 563 |
+
env: params.get("env"),
|
| 564 |
+
type: type !== null && /^[0-5]$/.test(type) ? Number(type) : undefined,
|
| 565 |
+
task: wanted,
|
| 566 |
+
step: Math.max(0, parseInt(params.get("step") || "1", 10) - 1)
|
| 567 |
+
});
|
| 568 |
+
revealTask();
|
| 569 |
+
}).catch(err => {
|
| 570 |
+
$("rows").innerHTML = `<div class="empty">${esc(err.message)}</div>`;
|
| 571 |
+
$("taskCount").textContent = "No data";
|
| 572 |
+
});
|
| 573 |
+
})();
|
| 574 |
+
</script>
|
| 575 |
+
</body>
|
| 576 |
</html>
|