robot-folding

Running

App Files Files Community

pepijn223 HF Staff commited on Mar 26

Commit

516e6e9

unverified ·

1 Parent(s): 9a36854

Add action representation diagram explaining relative vs delta vs absolute

Browse files

Adapted from UMI paper (Chi et al., 2024). Shows why relative trajectory
avoids error accumulation and calibration requirements.

Made-with: Cursor

Files changed (2) hide show

app/src/content/chapters/folding/08-ablations.mdx +9 -0
app/src/content/embeds/folding/action-representations.html +155 -0

app/src/content/chapters/folding/08-ablations.mdx CHANGED Viewed

@@ -139,6 +139,15 @@ We hypothesise that the root cause is the difference in **multi-modality** betwe
 #### 2. Relative actions improve performance consistently
 Comparing π0.5 without relative actions (1.2: 20% total SR, 40% L1) to π0.5 with relative actions and quantile normalization (1.3: 35% total SR, 70% L1), and then to the full combination in 1.7 (40% total SR, 80% L1), shows that training with relative actions consistently improves performance. The trend is clear and shows up in every comparison we made.
 The effect size doesn't separate cleanly at 20 rollouts, but the direction is consistent. **Caveat:** π0.5 is likely pretrained with relative actions, so 1.3 and 1.7 fine-tune in a regime consistent with pretraining, while 1.2 fine-tunes against it.

 #### 2. Relative actions improve performance consistently
+We use **relative trajectory** actions as defined by [UMI](https://arxiv.org/abs/2402.10329): each action in the chunk is an offset from the robot's current state at prediction time, not from the previous action. This avoids error accumulation (unlike true delta) and doesn't require a global coordinate frame (unlike absolute). LeRobot uses absolute actions by default — switching to relative trajectory was one of our key improvements.
+<HtmlEmbed
+  id="action-representations"
+  src="folding/action-representations.html"
+  title="Action Representations"
+  desc="Relative trajectory (blue) references all actions to the current state. Delta (yellow) chains each action to the previous one, accumulating error. Absolute (red) requires a global coordinate frame. Diagram adapted from UMI (Chi et al., 2024)."
+/>
 Comparing π0.5 without relative actions (1.2: 20% total SR, 40% L1) to π0.5 with relative actions and quantile normalization (1.3: 35% total SR, 70% L1), and then to the full combination in 1.7 (40% total SR, 80% L1), shows that training with relative actions consistently improves performance. The trend is clear and shows up in every comparison we made.
 The effect size doesn't separate cleanly at 20 rollouts, but the direction is consistent. **Caveat:** π0.5 is likely pretrained with relative actions, so 1.3 and 1.7 fine-tune in a regime consistent with pretraining, while 1.2 fine-tunes against it.

app/src/content/embeds/folding/action-representations.html ADDED Viewed

	@@ -0,0 +1,155 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+<style>
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  body { background: transparent; font-family: system-ui, sans-serif; color: #e8eaf0; }
+  svg text { font-family: system-ui, sans-serif; }
+</style>
+</head>
+<body>
+<svg id="action-rep" style="overflow:visible"></svg>
+<script>
+function _initActionRep() {
+const svgEl = document.getElementById('action-rep');
+const W = Math.min(svgEl.parentElement.clientWidth || 700, 760);
+const H = 320;
+svgEl.setAttribute('width', W);
+svgEl.setAttribute('height', H);
+const svg = d3.select('#action-rep').attr('width', W).attr('height', H);
+svg.selectAll('*').remove();
+const m = { top: 36, right: 30, bottom: 44, left: 50 };
+const w = W - m.left - m.right;
+const h = H - m.top - m.bottom;
+const g = svg.append('g').attr('transform', `translate(${m.left},${m.top})`);
+const GRID = '#2a2d3a';
+const SUB = '#8b8fa8';
+// Pose trajectory (ground truth)
+const poses = [
+  {t:0, p:0.5}, {t:1, p:1.2}, {t:2, p:1.8}, {t:3, p:2.6},
+  {t:4, p:3.0}, {t:5, p:3.9}, {t:6, p:4.3}, {t:7, p:5.2}, {t:8, p:5.8}
+];
+const x = d3.scaleLinear().domain([0, 8]).range([0, w]);
+const y = d3.scaleLinear().domain([0, 6.5]).range([h, 0]);
+// Grid
+g.append('g').selectAll('line').data(y.ticks(5)).join('line')
+  .attr('x1', 0).attr('x2', w).attr('y1', d => y(d)).attr('y2', d => y(d))
+  .attr('stroke', GRID).attr('stroke-dasharray', '3,3');
+// Inference boundaries
+[0, 4].forEach(t => {
+  g.append('line').attr('x1', x(t)).attr('x2', x(t)).attr('y1', -20).attr('y2', h + 8)
+    .attr('stroke', '#555').attr('stroke-dasharray', '6,3').attr('stroke-width', 1);
+  g.append('text').attr('x', x(t) + 4).attr('y', -8)
+    .attr('fill', SUB).attr('font-size', 9)
+    .text(t === 0 ? 'Inference at t=0' : 'Inference at t=4');
+});
+// Axes
+g.append('g').attr('transform', `translate(0,${h})`).call(d3.axisBottom(x).ticks(8).tickSize(0))
+  .call(gg => { gg.select('.domain').attr('stroke', GRID); gg.selectAll('text').attr('fill', SUB).attr('font-size', 10); });
+g.append('g').call(d3.axisLeft(y).ticks(5).tickSize(0))
+  .call(gg => { gg.select('.domain').attr('stroke', GRID); gg.selectAll('text').attr('fill', SUB).attr('font-size', 10); });
+g.append('text').attr('x', w / 2).attr('y', h + 36).attr('text-anchor', 'middle')
+  .attr('fill', SUB).attr('font-size', 11).text('Time');
+g.append('text').attr('x', -h / 2).attr('y', -36).attr('text-anchor', 'middle')
+  .attr('transform', 'rotate(-90)').attr('fill', SUB).attr('font-size', 11).text('Pose');
+// Colors
+const COL_REL = '#3b82f6';
+const COL_DELTA = '#f59e0b';
+const COL_ABS = '#ef4444';
+// --- ABSOLUTE: red dots at each pose ---
+poses.forEach(d => {
+  g.append('circle').attr('cx', x(d.t)).attr('cy', y(d.p)).attr('r', 5)
+    .attr('fill', COL_ABS).attr('stroke', '#1a1d27').attr('stroke-width', 1.5);
+});
+// --- RELATIVE: arrows from current state to each future action in chunk ---
+// Chunk 1: from state at t=0 to actions 0..3
+const chunk1Origin = poses[0];
+for (let i = 1; i <= 3; i++) {
+  drawArrow(g, x(chunk1Origin.t), y(chunk1Origin.p), x(poses[i].t), y(poses[i].p), COL_REL, 1.5, 0.7);
+}
+// Chunk 2: from state at t=4 to actions 5..7
+const chunk2Origin = poses[4];
+for (let i = 5; i <= 7; i++) {
+  drawArrow(g, x(chunk2Origin.t), y(chunk2Origin.p), x(poses[i].t), y(poses[i].p), COL_REL, 1.5, 0.7);
+}
+// --- DELTA: arrows from each action to the next ---
+for (let i = 0; i < poses.length - 1; i++) {
+  drawArrow(g, x(poses[i].t), y(poses[i].p), x(poses[i + 1].t), y(poses[i + 1].p), COL_DELTA, 1.2, 0.45);
+}
+// Legend
+const legY = -24;
+const items = [
+  { color: COL_REL, label: 'Relative trajectory (used here)', style: 'arrow' },
+  { color: COL_DELTA, label: 'Delta (accumulates error)', style: 'arrow' },
+  { color: COL_ABS, label: 'Absolute (needs calibration)', style: 'dot' },
+];
+let lx = w - 10;
+items.slice().reverse().forEach(item => {
+  const textEl = g.append('text').attr('y', legY + 4).attr('fill', item.color).attr('font-size', 10).attr('font-weight', 500).text(item.label);
+  const tw = textEl.node().getComputedTextLength();
+  textEl.attr('x', lx - tw);
+  if (item.style === 'dot') {
+    g.append('circle').attr('cx', lx - tw - 10).attr('cy', legY + 1).attr('r', 4)
+      .attr('fill', item.color).attr('stroke', '#1a1d27').attr('stroke-width', 1);
+  } else {
+    g.append('line').attr('x1', lx - tw - 20).attr('x2', lx - tw - 6)
+      .attr('y1', legY + 1).attr('y2', legY + 1)
+      .attr('stroke', item.color).attr('stroke-width', 2);
+    g.append('polygon')
+      .attr('points', `${lx - tw - 6},${legY - 2} ${lx - tw - 6},${legY + 4} ${lx - tw - 2},${legY + 1}`)
+      .attr('fill', item.color);
+  }
+  lx = lx - tw - 28;
+});
+function drawArrow(parent, x1, y1, x2, y2, color, width, opacity) {
+  const dx = x2 - x1, dy = y2 - y1;
+  const len = Math.sqrt(dx * dx + dy * dy);
+  const ux = dx / len, uy = dy / len;
+  const headLen = 6;
+  const tipX = x2 - ux * 2, tipY = y2 - uy * 2;
+  const baseX = tipX - ux * headLen, baseY = tipY - uy * headLen;
+  const perpX = -uy * 3, perpY = ux * 3;
+  parent.append('line')
+    .attr('x1', x1).attr('y1', y1).attr('x2', baseX).attr('y2', baseY)
+    .attr('stroke', color).attr('stroke-width', width).attr('opacity', opacity);
+  parent.append('polygon')
+    .attr('points', `${tipX},${tipY} ${baseX + perpX},${baseY + perpY} ${baseX - perpX},${baseY - perpY}`)
+    .attr('fill', color).attr('opacity', opacity);
+}
+}
+function render() {
+  _initActionRep();
+}
+if (typeof d3 !== "undefined") {
+  render();
+} else {
+  var s = document.createElement("script");
+  s.src = "https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js";
+  s.onload = render;
+  document.head.appendChild(s);
+}
+window.addEventListener('resize', render);
+</script>
+</body>
+</html>