Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> | |
| <title>Workbench · Arm Playground</title> | |
| <meta name="description" content="Drive the SO-101 robot arm in a 3D bench, record your driving as a LeRobot-style episode, replay it blind, and teach a small policy from your own demonstrations. Seven missions, a companion to the Hugging Face Robotics Course."> | |
| <meta property="og:title" content="Workbench: drive the SO-101, record it, replay it, teach it"> | |
| <meta property="og:description" content="A playable 3D bench for the Hugging Face Robotics Course: teleoperate the real arm's kinematics, record a demonstration, watch a blind replay miss, and train a toy policy on your own data."> | |
| <meta property="og:image" content="https://bakulbadwal.github.io/arm-playground/docs/workbench.png"> | |
| <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='14' fill='%2315171b'/%3E%3Cpath d='M14 50 L30 34 L50 16' stroke='%23f2b705' stroke-width='7' stroke-linecap='round' fill='none'/%3E%3Ccircle cx='14' cy='50' r='5' fill='%23fff'/%3E%3Ccircle cx='30' cy='34' r='5' fill='%23fff'/%3E%3C/svg%3E"> | |
| <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap"> | |
| <style> | |
| /* One lit workshop scene edge to edge; instrument-style panels pinned to its corners. A single daylight look by design. */ | |
| :root { | |
| color-scheme: light; | |
| --ink: #1d2730; --ink-soft: #51606c; --panel: rgba(250, 249, 244, 0.94); --panel-2: rgba(240, 238, 230, 0.9); --line: rgba(29, 39, 48, 0.16); | |
| --arm: #f2b705; --mat: #3d7c76; --bin: #2f6fdb; --cube: #d4472f; --ok: #23804f; --bad: #b93a26; --sky: #cfd9e2; --accent: #2f6fdb; | |
| --label: "Barlow Semi Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif; | |
| --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; | |
| } | |
| *, *::before, *::after { box-sizing: border-box; } | |
| [hidden] { display: none ; } | |
| html, body { height: 100%; margin: 0; } | |
| body { background: var(--sky); color: var(--ink); font-family: var(--label); font-size: 15px; overflow: hidden; -webkit-font-smoothing: antialiased; } | |
| a { color: var(--accent); } | |
| #stage { position: relative; width: 100%; height: 100%; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; } | |
| #gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; } | |
| #gl:active { cursor: grabbing; } | |
| .panel { position: absolute; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; box-shadow: 0 6px 22px rgba(29, 39, 48, 0.14); } | |
| .eyebrow { font-size: 11.5px; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-soft); } | |
| .eyebrow a { color: inherit; text-decoration: none; } .eyebrow a:hover { text-decoration: underline; } | |
| #head { top: 16px; left: 16px; width: min(440px, calc(100% - 32px)); max-height: calc(100% - 210px); overflow-y: auto; display: grid; gap: 6px; } | |
| #note2 { display: none; font-size: 11.5px; color: var(--ink-soft); line-height: 1.35; border-top: 1px solid var(--line); padding-top: 5px; } | |
| #head h1 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: 0.01em; line-height: 1.05; display: flex; align-items: center; justify-content: space-between; gap: 10px; } | |
| #head h1 small { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; } | |
| .dots { display: flex; gap: 5px; } | |
| .dots button { width: 22px; height: 6px; padding: 0; border-radius: 3px; background: rgba(29, 39, 48, 0.18); border: 0; } | |
| .dots button.done { background: var(--ok); } .dots button.cur { background: var(--ink); } | |
| #mTitle { font-size: 19px; font-weight: 700; line-height: 1.15; } | |
| #mGoal { font-size: 15px; line-height: 1.4; } | |
| #score { font-family: var(--mono); font-size: 12.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; } | |
| .ask { background: var(--panel-2); border: 1px dashed var(--line); border-radius: 6px; padding: 8px 10px; display: grid; gap: 6px; } | |
| .ask .q { font-weight: 600; } | |
| .ask .opts { display: grid; gap: 5px; } | |
| .ask .opts button { text-align: left; font-weight: 500; } | |
| .ask .opts button.right { border-color: var(--ok); background: #e6f3ea; } .ask .opts button.wrong { border-color: var(--bad); background: #f7e4e0; } | |
| .ask input[type=number] { font: 500 14px var(--mono); width: 96px; padding: 5px 8px; border-radius: 4px; border: 1px solid rgba(29, 39, 48, 0.3); } | |
| .fb { font-size: 14px; line-height: 1.4; } .fb.good { color: var(--ok); } .fb.no { color: var(--bad); } .fb .why { color: var(--ink); display: block; margin-top: 3px; } | |
| .btns { display: flex; flex-wrap: wrap; gap: 6px; } | |
| button { font: 600 14px var(--label); letter-spacing: 0.02em; color: var(--ink); background: #fff; border: 1px solid rgba(29, 39, 48, 0.3); border-radius: 4px; padding: 6px 10px; cursor: pointer; } | |
| button:hover { border-color: var(--ink); } | |
| button:focus-visible { outline: 2px solid var(--bin); outline-offset: 2px; } | |
| button.primary { background: var(--ink); color: #fff; border-color: var(--ink); } | |
| button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); } | |
| button.rec[aria-pressed="true"] { background: var(--bad); border-color: var(--bad); } | |
| button:disabled { opacity: 0.45; cursor: default; } | |
| #data { top: 16px; right: 16px; width: 280px; display: grid; gap: 6px; } | |
| #data table { border-collapse: collapse; width: 100%; font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; } | |
| #data th { text-align: right; font: 600 11px var(--label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); padding: 0 0 2px; } | |
| #data th:first-child, #data td:first-child { text-align: left; } | |
| #data td { padding: 1.5px 0; text-align: right; } | |
| #episode { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); border-top: 1px solid var(--line); padding-top: 6px; line-height: 1.5; } | |
| #episode b { color: var(--ink); font-weight: 500; } | |
| #toast { left: 50%; bottom: 22px; transform: translateX(-50%); font-size: 17px; font-weight: 600; padding: 9px 16px; max-width: calc(100% - 32px); text-align: center; } | |
| #toast[data-kind="ok"] { background: var(--ok); color: #fff; border-color: transparent; } | |
| #toast[data-kind="bad"] { background: var(--bad); color: #fff; border-color: transparent; } | |
| #toast[data-kind="rec"] { background: var(--ink); color: #fff; border-color: transparent; } | |
| #keys { left: 16px; bottom: 16px; font-size: 13.5px; display: grid; gap: 4px; max-width: 320px; } | |
| kbd { font: 500 11.5px var(--mono); background: #fff; border: 1px solid rgba(29, 39, 48, 0.3); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; } | |
| #note { font-size: 12px; color: var(--ink-soft); line-height: 1.35; border-top: 1px solid var(--line); padding-top: 5px; margin-top: 2px; } | |
| #inset { position: absolute; border: 2px solid #fff; border-radius: 4px; box-shadow: 0 6px 22px rgba(29, 39, 48, 0.3); pointer-events: none; } | |
| #inset span { position: absolute; left: 0; top: 0; font: 600 11px var(--label); letter-spacing: 0.08em; text-transform: uppercase; background: #fff; color: var(--ink); padding: 2px 6px; border-bottom-right-radius: 4px; } | |
| #touch { position: absolute; inset: 0; pointer-events: none; } | |
| #stick { position: absolute; left: 20px; bottom: 26px; width: 118px; height: 118px; border-radius: 50%; background: rgba(250, 249, 244, 0.72); border: 1px solid var(--line); pointer-events: auto; touch-action: none; } | |
| #knob { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: var(--ink); opacity: 0.85; } | |
| #tbtns { position: absolute; left: 152px; bottom: 26px; display: grid; grid-template-columns: 56px 56px; gap: 6px; pointer-events: auto; } | |
| #tbtns button { height: 56px; padding: 0; font-size: 14px; touch-action: none; } | |
| #tbtns #tgrip { grid-column: span 2; background: var(--arm); border-color: transparent; } | |
| #joints { position: absolute; left: 16px; bottom: 16px; display: grid; gap: 4px; pointer-events: auto; } | |
| #joints .jrow { display: grid; grid-template-columns: 42px 110px 42px 56px; gap: 6px; align-items: center; font-size: 13px; } | |
| #joints .jrow button { height: 34px; padding: 0; font-size: 16px; touch-action: none; } | |
| #joints .jrow output { font-family: var(--mono); font-size: 12px; text-align: right; } | |
| #joints .jname { display: flex; align-items: center; gap: 6px; } | |
| .sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; border: 1px solid var(--line); } | |
| #teach { display: grid; gap: 6px; border-top: 1px solid var(--line); padding-top: 6px; } | |
| #teachLog { font-family: var(--mono); font-size: 12px; line-height: 1.5; color: var(--ink-soft); } | |
| #teachLog b { color: var(--ink); font-weight: 500; } | |
| #fail { inset: 16px; display: grid; place-content: center; text-align: center; font-size: 17px; gap: 8px; max-width: 520px; margin: auto; } | |
| #start { position: absolute; inset: 0; display: grid; place-content: center; background: rgba(29, 39, 48, 0.28); cursor: pointer; } | |
| #start div { background: var(--panel); border-radius: 8px; padding: 16px 22px; font-size: 18px; font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,0.25); text-align: center; max-width: 360px; line-height: 1.35; } | |
| #start div small { display: block; font-weight: 500; font-size: 14px; color: var(--ink-soft); margin-top: 6px; } | |
| @media (max-width: 760px), (pointer: coarse) { | |
| #keys { display: none; } | |
| #data { top: auto; right: 16px; left: 16px; width: auto; bottom: 160px; padding: 6px 10px; } | |
| #data table, #data .eyebrow { display: none; } | |
| #episode { border-top: 0; padding-top: 0; } | |
| #head { padding: 8px 10px; gap: 5px; max-height: 46%; } | |
| #head h1 { font-size: 20px; } #mTitle { font-size: 17px; } #mGoal { font-size: 14px; } | |
| #toast { bottom: auto; top: 50%; font-size: 15px; } | |
| button { padding: 6px 8px; font-size: 13.5px; } | |
| #joints { bottom: 200px; left: 16px; right: auto; } | |
| #joints .jrow { grid-template-columns: 38px 52px 38px 0; font-size: 11px; } #joints .jrow output { display: none; } | |
| #note2 { display: block; } | |
| } | |
| @media (min-width: 761px) and (pointer: fine) { #touch { display: none; } } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="stage"> | |
| <canvas id="gl" aria-label="A 3D workbench with an SO-101 robot arm, a red cube and a blue bin. Drag to look around."></canvas> | |
| <div class="panel" id="head"> | |
| <div class="eyebrow"><a href="index.html#r3&step=6" title="Back to the five tabs">← Arm Playground</a> · Workbench · <span id="mUnit"></span></div> | |
| <h1>Workbench <small id="mCount"></small></h1> | |
| <div class="dots" id="mDots"></div> | |
| <div id="mTitle"></div> | |
| <div id="mGoal"></div> | |
| <div id="score"></div> | |
| <div id="mAsk"></div> | |
| <div class="btns" id="mBtns"></div> | |
| <div id="teach" hidden> | |
| <div class="btns"> | |
| <button id="bDemo" class="rec" aria-pressed="false" title="Drive the task yourself while it records (R)">● Record a demo</button> | |
| <button id="bShow" title="Let the built-in demonstrator do one and record it">Show me a demo</button> | |
| <button id="bTrain" disabled title="Train the small policy on the demos recorded so far">Train</button> | |
| <button id="bRun" disabled title="Put the cube on a spot the policy has never seen and let it drive (P)">Run the policy</button> | |
| </div> | |
| <div id="teachLog">no demonstrations yet</div> | |
| </div> | |
| <div id="note2">The arm's joints, lengths and limits are the SO‑101 URDF's (same code as tab 5); its shapes are simplified. Grasping and falling are toys: no contact physics. Mission 7's policy is a small network that is handed the cube's position.</div> | |
| <div class="btns"> | |
| <button id="bPrev">← Back</button> | |
| <button id="bNext" class="primary">Next mission →</button> | |
| <button id="bView" aria-pressed="false" title="See through the camera on the gripper (V)">Wrist view</button> | |
| <button id="bReset" title="A fresh cube for this mission">Reset cube</button> | |
| </div> | |
| </div> | |
| <div class="panel" id="data"> | |
| <div class="eyebrow">One frame of a LeRobot episode</div> | |
| <table> | |
| <thead><tr><th>joint</th><th>state</th><th>action</th></tr></thead> | |
| <tbody id="rows"></tbody> | |
| </table> | |
| <div id="episode">no episode recorded yet</div> | |
| </div> | |
| <div class="panel" id="keys"> | |
| <div id="keysDrive"><kbd>W</kbd> <kbd>A</kbd> <kbd>S</kbd> <kbd>D</kbd> move the hand · <kbd>E</kbd> up · <kbd>Q</kbd> down · <kbd>Space</kbd> grip (the jaws take a cube they close around)</div> | |
| <div id="keysJoint" hidden><kbd>1</kbd>–<kbd>5</kbd> turn a joint · hold <kbd>Shift</kbd> to turn it the other way · <kbd>Space</kbd> grip</div> | |
| <div><kbd>V</kbd> wrist view · <kbd>R</kbd> record · <kbd>P</kbd> replay / run · <kbd>N</kbd> next mission</div> | |
| <div>Click the scene once so the keys reach it. Drag it to look around; scroll to zoom. The mat's bold lines are 100 mm apart.</div> | |
| <div id="note">The arm's joints, lengths and limits are the SO‑101 URDF's, the same code as tab 5. Its shapes are simplified. Grasping and falling are toys: no contact physics. The gripper camera is this bench's own; the real SO‑101 dataset used two fixed cameras. The policy in mission 7 is a small network that is handed the cube's position.</div> | |
| </div> | |
| <div id="inset"><span id="insetLabel">wrist camera · what a policy sees</span></div> | |
| <div class="panel" id="toast" hidden></div> | |
| <div id="touch"> | |
| <div id="stick" aria-label="Move the hand"><div id="knob"></div></div> | |
| <div id="tbtns"> | |
| <button id="tup" aria-label="Hand up">▲ up</button><button id="tdown" aria-label="Hand down">▼ down</button> | |
| <button id="tgrip" aria-label="Close or open the gripper">GRIP</button> | |
| </div> | |
| </div> | |
| <div class="panel" id="joints" hidden></div> | |
| <div id="start" hidden><div>Click to start driving<small>W A S D move the hand · E up · Q down · Space grips</small></div></div> | |
| <div class="panel" id="fail" hidden><b>This page needs WebGL, and this browser didn't start it.</b><span>The rest of Arm Playground works without it: <a href="index.html#r3&step=1">tab 5 shows the same arm in 3D</a> on a plain canvas.</span></div> | |
| </div> | |
| <script src="docs/vendor/three.min.js"></script> | |
| <script src="arm3d.js"></script> | |
| <script src="workbench.js"></script> | |
| </body> | |
| </html> | |