One page scroll bar and American English

README.md

@@ -74,7 +74,7 @@ The page is also an API and an MCP server (`https://sharpmeow-lasagna-fields.hf.
 `list_scans`, `list_models`, `example_points`, `plan_field` and `make_field`. See the page's **Agents and API** tab.
 A field uses the caller's ZeroGPU time.
 
-## Credit and licences
+## Credit and licenses
 
 Made by Chase Hendrick. Code: Apache 2.0 (see `LICENSE` and `NOTICE`). Model and code it runs: villa's lasagna authors,
 MIT. Scans: Vesuvius Challenge open data, CC BY-NC 4.0; the fields, made from them, are CC BY-NC 4.0 too. Source and

app.py

@@ -316,7 +316,7 @@ def make_field(volume: str, z: float, y: float, x: float, size: float = 256, mod
         size: the box side in voxels of the level the model reads, 256 or 512.
         model: a model id from list_models; 'lasagna' is villa's own predict3d.
 
-    Returns a picture (middle slices along z, y and x: CT, cos, grad_mag, normals as colour), the receipt (the
+    Returns a picture (middle slices along z, y and x: CT, cos, grad_mag, normals as color), the receipt (the
     box, the model and its pinned commit and checkpoint, timings, and the agreement with the open data's own field
     with a shifted control), and a zip with villa's output folder, field.npz and receipt.json. Uses the caller's
     ZeroGPU time. Model output: geometry, not a reading.
@@ -324,7 +324,7 @@ def make_field(volume: str, z: float, y: float, x: float, size: float = 256, mod
     p = L.plan(volume, z, y, x, int(size), model=model)
     with one_run(request):
         r = run_field(p, progress)
-    c = p["centre_level0_zyx"]
+    c = p["center_level0_zyx"]
     pic = L.compose(r["pictures"], f"{p['sample']} · {p['size_zyx'][0]}-voxel box at z {c[0]}, y {c[1]}, x {c[2]}")
     return pic, r["receipt"], r["zip"]
 
@@ -361,7 +361,7 @@ says which way the sheet faces at each point. villa's lasagna surface fit and th
 
 ![The CT of one box of PHerc0139 next to villa's lasagna field, stepping through the box](/gradio_api/file=media/howto-slices.gif)
 
-*PHerc0139 (not on any prize list), one box about 2.5 mm a side: the CT, cos and the normal as colour, stepping
+*PHerc0139 (not on any prize list), one box about 2.5 mm a side: the CT, cos and the normal as color, stepping
 through z. Model output: geometry, not a reading of any text.*
 
 <h3 id="first">1. Make your first field (one minute)</h3>
@@ -378,7 +378,7 @@ through z. Model output: geometry, not a reading of any text.*
 ![A result: three rows of slices, each row CT, cos, grad_mag and normal](/gradio_api/file=media/example-result.png)
 
 - **Rows** are the middle slice of your box along z, y and x. **Columns** are the CT, cos, grad_mag and the
-  normal as colour (red for x, green for y, blue for z).
+  normal as color (red for x, green for y, blue for z).
 - **cos** should run along the papyrus in the CT, one bright and one dark band per layer. Where layers touch or
   the CT is unclear, the bands bend or merge: that is where surface tracing is hard too.
 - **The check** compares your field with the published one for the same box, and with a **control**: the same
@@ -404,7 +404,7 @@ through z. Model output: geometry, not a reading of any text.*
 
 Boxes are whole 256-voxel blocks of the scan, because villa writes the field in 64-voxel chunks of its quarter
 grid and puts its tiles on one lattice over the whole scan: that is why a box's field is the whole-scan field
-there. The box is the block nearest your point, so your point is inside it but not always at its centre.
+there. The box is the block nearest your point, so your point is inside it but not always at its center.
 
 <h3 id="download">4. Use the download</h3>
 
@@ -444,7 +444,7 @@ python scripts/bootstrap_venv.py --venv .venv
 ```
 
 Measured on an NVIDIA L4 (25 Oct 2026): about 2 million voxels a second end to end, so about ten minutes per
-cubic centimetre at 9.4 um. It fits in 5.6 GB of GPU memory at its default tile, 2.3 GB at `--tile-size 128`.
+cubic centimeter at 9.4 um. It fits in 5.6 GB of GPU memory at its default tile, 2.3 GB at `--tile-size 128`.
 
 <h3 id="wrong">When something goes wrong</h3>
 
@@ -492,8 +492,9 @@ CSS = """
   background:repeating-linear-gradient(180deg,#c2462b 0 4px,#e07a3f 4px 7px,#f3e2bf 7px 10px,#4f7a3a 10px 11px,#f3e2bf 11px 12px); }
 .lf-head h1 { white-space:nowrap; font-family: Fraunces, Georgia, serif; font-weight:650; font-size:30px; margin:0; letter-spacing:-.01em; }
 .lf-head span { color: var(--body-text-color-subdued); font-size:15px; }
-.lf-guide iframe { width:100%; height:calc(100vh - 150px); min-height:640px; border:0; border-radius:12px;
-  background:#f7f2ea; }
+/* no fixed height: onescroll.html fits the guide's frame to the guide, so the page scrolls and the frame does not;
+   min-height only holds the place until it has */
+.lf-guide iframe { width:100%; min-height:640px; border:0; border-radius:12px; background:#f7f2ea; }
 .lf-note p { font-size:13px; color: var(--body-text-color-subdued); margin:0; }
 .lf-est p { font-size:13.5px; color: var(--body-text-color-subdued); }
 .lf-point { flex-wrap: nowrap !important; }
@@ -502,6 +503,9 @@ CSS = """
 .lf-howto img { border-radius:10px; border:1px solid var(--border-color-primary); max-width:min(100%, 760px); display:block; margin:8px 0; }
 #lf-dl .empty { min-height: 64px !important; height: 64px !important; }
 #lf-dl .empty .icon { height: 28px; }
+/* one page scroll bar: the download's file row and the receipt grow with what they hold, so the page scrolls */
+#lf-dl .file-preview-holder { max-height:none !important; overflow:visible !important; }
+#lf-receipt { max-height:none !important; overflow:visible !important; }
 .lf-howto { max-width: 1000px; margin: 0 auto !important; }
 .lf-howto h3 { scroll-margin-top: 16px; margin-top: 1.6em !important; }
 .lf-howto em { color: var(--body-text-color-subdued); font-size: 13.5px; }
@@ -510,7 +514,6 @@ CSS = """
 @media (max-width: 640px) {
   .lf-head h1 { font-size:24px; }
   .lf-head span { display:none; }
-  .lf-guide iframe { height:calc(100vh - 120px); min-height:520px; }
   #lf-tabs .tab-container button { padding:6px 6px !important; font-size:12.5px !important; }
 }
 """
@@ -524,6 +527,9 @@ ten whole scans to download, and any box made on demand. Model output, not a rea
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,650&display=swap" rel="stylesheet">
 """
+# one page scroll bar: fits the guide's frame to its content (written by python -m kit spaceconnect render)
+ONESCROLL = HERE / "onescroll.html"
+HEAD += ONESCROLL.read_text() if ONESCROLL.is_file() else ""
 
 
 def theme():
@@ -548,7 +554,8 @@ def guide_html():
     import html
     page = GUIDE.read_text()
     # its pictures (assets/..., built in its script) point at Gradio's file route; a <base> cannot do it, because a
-    # base of /gradio_api/file= resolves assets/x to /gradio_api/assets/x. Anchors scroll inside the frame
+    # base of /gradio_api/file= resolves assets/x to /gradio_api/assets/x. Anchors scroll to their section (the frame
+    # is as tall as the guide, so the page scrolls, not the frame)
     page = page.replace("'assets/", "'/gradio_api/file=assets/").replace('"assets/', '"/gradio_api/file=assets/')
     fix = ('<style>.wrap{max-width:1480px!important}</style>'
            '<script>document.addEventListener("click",function(e){var a=e.target.closest&&e.target.closest("a");'
@@ -644,7 +651,7 @@ def build_demo():
                         dl = gr.File(label="Download: villa output folder, field.npz, receipt.json", height=88,
                                      elem_id="lf-dl")
                         with gr.Accordion("Receipt", open=False):
-                            receipt = gr.JSON()
+                            receipt = gr.JSON(max_height=None, elem_id="lf-receipt")
                         with gr.Accordion("About the model", open=False):
                             gr.Markdown(ABOUT_MODEL.format(commit=L.VILLA["commit"][:12],
                                                            sha=L.WEIGHTS["sha256"][:16] + "…"))

guide/index.html

@@ -79,12 +79,12 @@ dl.facts{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-
 dl.facts dt{color:var(--ink3)}dl.facts dd{margin:0;word-break:break-word}
 .links{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
 .codebox{position:relative;margin-top:10px}
-pre{max-height:340px;background:var(--code);color:var(--codeink);border-radius:10px;padding:14px 16px;overflow:auto;margin:0;line-height:1.55}
+pre{background:var(--code);color:var(--codeink);border-radius:10px;padding:14px 16px;overflow-x:auto;overflow-y:hidden;margin:0;line-height:1.55}
 pre .c{color:#9a8f7e}
 .codebox pre{padding-top:34px}
 .copy{position:absolute;top:8px;right:8px;border:1px solid #ffffff22;background:#ffffff14;color:#efe6d6;border-radius:7px;padding:3px 9px;font-size:12px;cursor:pointer}
 .copy:hover{background:#ffffff26}
-.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-top:18px}
+.tabs{display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid var(--line);margin-top:18px}
 .tabs button{border:0;background:none;padding:8px 12px;color:var(--ink2);cursor:pointer;font:inherit;font-size:14px;border-bottom:2px solid transparent;margin-bottom:-1px}
 .tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent);font-weight:600}
 .detail>*,.region>*,.panel,.codebox,.cards3>*{min-width:0}
@@ -430,7 +430,7 @@ let drag=false;$('map').onpointerdown=e=>{drag=true;mapAt(e)};addEventListener('
 
 /* copy */
 document.addEventListener('click',e=>{const b=e.target.closest('.copy');if(!b)return;
- const t=$(b.dataset.copy).textContent;const done=()=>{$('toast').classList.add('on');setTimeout(()=>$('toast').classList.remove('on'),1200)};
+ const t=$(b.dataset.copy).textContent;const done=()=>{b.textContent='Copied';$('toast').classList.add('on');setTimeout(()=>{b.textContent='Copy';$('toast').classList.remove('on')},1200)};
  if(navigator.clipboard&&navigator.clipboard.writeText)navigator.clipboard.writeText(t).then(done,()=>fallback(t,done));else fallback(t,done)});
 function fallback(t,done){const a=document.createElement('textarea');a.value=t;document.body.appendChild(a);a.select();try{document.execCommand('copy');done()}catch(e){}a.remove()}
 

lasfield.py

@@ -252,19 +252,19 @@ def plan(vid, z, y, x, size=DEFAULT_SIZE, level=None, model="lasagna"):
     meta = zarray(v, level)
     shape = [int(s) for s in meta["shape"]]
     f = 2 ** level
-    centre = [int(round(float(c))) for c in (z, y, x)]
-    for c, n in zip(centre, base["shape"]):
+    center = [int(round(float(c))) for c in (z, y, x)]
+    for c, n in zip(center, base["shape"]):
         if not 0 <= c < n:
-            raise FieldError(f"the point {centre} is outside the scan (level-0 shape {base['shape']})")
+            raise FieldError(f"the point {center} is outside the scan (level-0 shape {base['shape']})")
     origin = [max(0, min((c // f - size // 2 + ALIGN // 2) // ALIGN * ALIGN, (n - 1) // ALIGN * ALIGN))
-              for c, n in zip(centre, shape)]
+              for c, n in zip(center, shape)]
     box_size = [min(size, n - o) for o, n in zip(origin, shape)]
     read = [[max(0, o - MARGIN), min(n, o + s + MARGIN)] for o, s, n in zip(origin, box_size, shape)]
     ch = meta["chunks"]
     nchunks = math.prod((b - 1) // c - a // c + 1 for (a, b), c in zip(read, ch))
     out = {"volume": v["volume"], "sample": v["sample"], "long_id": v["long_id"], "voxel_um": v["voxel_um"],
             "url": v["url"], "level": level, "level_shape_zyx": shape, "base_shape_zyx": base["shape"],
-            "centre_level0_zyx": centre, "origin_zyx": origin, "size_zyx": box_size,
+            "center_level0_zyx": center, "origin_zyx": origin, "size_zyx": box_size,
             "origin_level0_zyx": [o * f for o in origin], "size_level0_zyx": [s * f for s in box_size],
             "read_zyx": read, "chunks": nchunks, "chunk_bytes": math.prod(ch) * np.dtype(meta["dtype"]).itemsize,
             "model": model}
@@ -669,7 +669,7 @@ def _resize(img, shape):
 
 
 def picture(ct, arrays, boxes, axis=0):
-    """One middle slice through the box along `axis` (0 z, 1 y, 2 x): CT, cos, grad_mag and the normal as colour
+    """One middle slice through the box along `axis` (0 z, 1 y, 2 x): CT, cos, grad_mag and the normal as color
     (|x| red, |y| green, |z| blue), side by side at the CT's grid. Returns an RGB uint8 array."""
     def mid(a):
         return np.take(a, a.shape[axis] // 2, axis=axis)
@@ -691,7 +691,7 @@ def picture(ct, arrays, boxes, axis=0):
 
 
 PANELS = ("CT", "cos", "grad_mag", "normal")
-LEGEND = "normal as colour: x red, y green, z blue · villa lasagna, model output"
+LEGEND = "normal as color: x red, y green, z blue · villa lasagna, model output"
 
 
 def compose(pictures, title="", note=LEGEND):
@@ -799,7 +799,7 @@ def finish(p, prep, ran, work, out_root):
                "claim": "Model output: a lasagna field is geometry fitted by a model, not a reading of any text."}
     out_root = Path(out_root)
     out_root.mkdir(parents=True, exist_ok=True)
-    stem = f"{p['sample']}-{p['volume']}-z{p['centre_level0_zyx'][0]}-y{p['centre_level0_zyx'][1]}-x{p['centre_level0_zyx'][2]}-s{p['size_zyx'][0]}"
+    stem = f"{p['sample']}-{p['volume']}-z{p['center_level0_zyx'][0]}-y{p['center_level0_zyx'][1]}-x{p['center_level0_zyx'][2]}-s{p['size_zyx'][0]}"
     zpath = package(Path(ran["manifest"]).parent, p, arrays, receipt, out_root / f"{stem}.zip")
     return {"receipt": receipt, "zip": str(zpath), "pictures": pictures, "arrays": arrays}
 

onescroll.html

@@ -0,0 +1,62 @@
+<!-- space-onescroll:start -->
+<!-- one page scroll bar: written by python -m kit spaceconnect render; do not edit -->
+<style>iframe[srcdoc]{display:block;max-height:none!important}</style>
+<script>
+(function () {
+  if (window.__oneScroll) return;
+  window.__oneScroll = true;
+  var CSS = 'html,body{height:auto!important;min-height:0!important}html{overflow:hidden!important}';
+  function size(f) {
+    var d, st = f.__os;
+    try { d = f.contentDocument; } catch (e) { return; }
+    if (!d || !d.body || st.off) return;
+    var de = d.documentElement, r = Math.ceil(de.getBoundingClientRect().height), over = de.scrollHeight;
+    var ch = f.clientHeight, t = r;
+    if (over > ch + 1) t = Math.max(r, over);
+    else if (r >= st.r) t = Math.max(r, ch);
+    st.r = r;
+    if (Math.abs(t - ch) < 2) return;
+    var now = Date.now();
+    st.n = now - st.t0 < 4000 ? st.n + 1 : 1;
+    if (st.n === 1) st.t0 = now;
+    if (st.n > 40) { st.off = true; f.removeAttribute('scrolling'); var g = d.getElementById('space-onescroll'); if (g) g.remove(); return; }
+    f.style.setProperty('height', t + 'px', 'important');
+  }
+  function attach(f) {
+    var d, st = f.__os;
+    try { d = f.contentDocument; } catch (e) { return; }
+    if (!d || !d.documentElement || st.doc === d) return;
+    st.doc = d; st.r = Infinity; st.n = 0; st.off = false;
+    if (!d.getElementById('space-onescroll')) {
+      var s = d.createElement('style'); s.id = 'space-onescroll'; s.textContent = CSS;
+      (d.head || d.documentElement).appendChild(s);
+    }
+    f.setAttribute('scrolling', 'no');
+    f.style.setProperty('min-height', '0', 'important');
+    f.style.setProperty('max-height', 'none', 'important');
+    var w = d.defaultView, go = function () { size(f); };
+    if (w && w.ResizeObserver) { var ro = new w.ResizeObserver(go); ro.observe(d.documentElement); if (d.body) ro.observe(d.body); }
+    d.addEventListener('load', go, true);
+    go();
+  }
+  function bind(f) {
+    if (f.__os || f.getAttribute('data-scroll') === 'inner') return;
+    try { if (!f.contentDocument) return; } catch (e) { return; }
+    f.__os = {t0: 0, n: 0, r: 0};
+    f.addEventListener('load', function () { attach(f); });
+    if (f.contentDocument.readyState !== 'loading') attach(f);
+    else f.contentDocument.addEventListener('DOMContentLoaded', function () { attach(f); });
+  }
+  function scan() { var fs = document.getElementsByTagName('iframe'); for (var i = 0; i < fs.length; i++) bind(fs[i]); }
+  function start() {
+    scan();
+    new MutationObserver(scan).observe(document.documentElement, {childList: true, subtree: true});
+    window.addEventListener('resize', function () {
+      var fs = document.getElementsByTagName('iframe');
+      for (var i = 0; i < fs.length; i++) if (fs[i].__os) size(fs[i]);
+    });
+  }
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', start); else start();
+})();
+</script>
+<!-- space-onescroll:end -->