mxlin043 commited on
Commit
b17c80f
·
verified ·
1 Parent(s): 1606d8a

EmbRACE Viewer

Browse files
Files changed (2) hide show
  1. README.md +9 -4
  2. index.html +574 -17
README.md CHANGED
@@ -1,10 +1,15 @@
1
  ---
2
  title: EmbRACE Viewer
3
- emoji: 🐢
4
- colorFrom: indigo
5
- colorTo: pink
6
  sdk: static
 
7
  pinned: false
 
 
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
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
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>