restore original CheerpX VM index.html and README (revert accidental overwrite)

README.md

@@ -1,15 +1,10 @@
 ---
-title: opencode_web
-emoji: 🌍
-colorFrom: green
-colorTo: gray
+title: Opencode Web
+emoji: 🏢
+colorFrom: pink
+colorTo: indigo
 sdk: static
 pinned: false
 ---
 
-# opencode_web
-
-Minimal pure HTML+JS demo: a simulated NetBSD boot log plus an xearth-style
-rotating globe (tinyx-wscons + xearth concept).
-
-This is a simulation, not a real NetBSD VM.
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html

@@ -1,70 +1,51 @@
 <!doctype html>
-<html lang="zh-Hant">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width,initial-scale=1">
-<title>opencode_web - NetBSD demo (simulated)</title>
-<style>
-  html,body{margin:0;height:100%;background:#000;color:#ccc;font:14px/1.4 monospace}
-  #term{white-space:pre;padding:12px;height:40%;overflow:hidden;box-sizing:border-box}
-  #wrap{display:flex;justify-content:center;align-items:center;height:60%}
-  canvas{background:#000;border:1px solid #333}
-  .tag{color:#666;padding:0 12px 6px}
-</style>
-</head>
-<body>
-<div id="term"></div>
-<div id="wrap"><canvas id="c" width="480" height="360"></canvas></div>
-<div class="tag">simulated: pure HTML+JS, NOT a real NetBSD VM. xearth-style globe (tinyx-wscons demo)</div>
+<html><head><meta charset="utf-8"><title>opencode web</title>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/css/xterm.css">
+<style>html,body{margin:0;height:100%;background:#000}#console{height:100%}</style>
+</head><body><div id="console"></div>
 <script>
-(function () {
-  // ---- fake NetBSD boot log (typed out) ----
-  const lines = [
-    "NetBSD 10.0 (GENERIC) #0: (simulated)",
-    "total memory = 64 MB",
-    "cpu0 at mainbus0: i386-like (simulated)",
-    "wscons0: attached tinyx-wscons",
-    "xearth: starting globe renderer",
-    "login: demo   (type nothing, enjoy the globe)",
-    ""
-  ];
-  const term = document.getElementById("term");
-  let li = 0, ci = 0, buf = "";
-  function type() {
-    if (li >= lines.length) return;
-    const line = lines[li];
-    buf += line[ci++] || "";
-    if (ci > line.length) { buf += "\n"; li++; ci = 0; }
-    term.textContent = buf + (li < lines.length ? "_" : "");
-    setTimeout(type, li < lines.length && ci === 0 ? 300 : 25);
-  }
-  type();
-
-  // ---- xearth-style rotating dotted globe ----
-  const cv = document.getElementById("c"), g = cv.getContext("2d");
-  const W = cv.width, H = cv.height, R = 150, cx = W / 2, cy = H / 2;
-  const pts = [];
-  for (let i = 0; i < 1400; i++) {            // Fibonacci sphere points
-    const y = 1 - (2 * i) / 1399, r = Math.sqrt(1 - y * y), t = i * Math.PI * (3 - Math.sqrt(5));
-    pts.push([Math.cos(t) * r, y, Math.sin(t) * r]);
-  }
-  let rot = 0;
-  function frame() {
-    g.fillStyle = "#000"; g.fillRect(0, 0, W, H);
-    const c = Math.cos(rot), s = Math.sin(rot);
-    for (const [x, y, z] of pts) {
-      const X = x * c + z * s, Z = -x * s + z * c;   // rotate around Y axis
-      if (Z < 0) continue;                            // front side only
-      const px = cx + X * R, py = cy - y * R;
-      const shade = 0.35 + 0.65 * Z;
-      g.fillStyle = `rgba(80,${Math.round(200 * shade)},120,${shade})`;
-      g.fillRect(px, py, 2, 2);
-    }
-    rot += 0.01;
-    requestAnimationFrame(frame);
-  }
-  frame();
-})();
+// Cross-origin isolation (needed by CheerpX) via service worker, since static hosting cannot set headers.
+if ("serviceWorker" in navigator && !crossOriginIsolated) {
+  navigator.serviceWorker.register("sw.js").then(reg => {
+    if (reg.active && navigator.serviceWorker.controller) return;
+    navigator.serviceWorker.addEventListener("controllerchange", () => location.reload());
+    if (reg.active) location.reload();
+  });
+}
 </script>
-</body>
-</html>
+<script src="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/lib/xterm.js"></script>
+<script type="module">
+const CX_URL = "https://cxrtnc.leaningtech.com/1.4.0/cx.esm.js";
+const term = new Terminal({ cursorBlink: true, convertEol: true, fontFamily: "monospace" });
+term.open(document.getElementById("console"));
+term.focus();
+term.write("opencode web: loading CheerpX + Alpine...\r\n");
+try {
+  if (!crossOriginIsolated) throw new Error("page is not cross-origin isolated yet (service worker reload pending)");
+  const CheerpX = await import(CX_URL);
+  const blockDevice = await CheerpX.HttpBytesDevice.create("rootfs.ext2");
+  const cache = await CheerpX.IDBDevice.create("opencode-web-v1");
+  const overlay = await CheerpX.OverlayDevice.create(blockDevice, cache);
+  const webDevice = await CheerpX.WebDevice.create("");
+  const dataDevice = await CheerpX.DataDevice.create();
+  const cx = await CheerpX.Linux.create({ mounts: [
+    { type: "ext2", dev: overlay, path: "/" },
+    { type: "dir", dev: webDevice, path: "/web" },
+    { type: "dir", dev: dataDevice, path: "/data" },
+    { type: "devs", path: "/dev" },
+    { type: "devpts", path: "/dev/pts" },
+    { type: "proc", path: "/proc" },
+    { type: "sys", path: "/sys" },
+  ] });
+  const readFn = cx.setCustomConsole((buf, vt) => { if (vt === 1) term.write(new Uint8Array(buf)); }, term.cols, term.rows);
+  term.onData(s => { for (let i = 0; i < s.length; i++) readFn(s.charCodeAt(i)); });
+  await cx.run("/bin/sh", ["-c", "opencode; exec /bin/sh -l"], {
+    env: ["HOME=/root", "TERM=xterm-256color", "PATH=/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin", "LANG=C.UTF-8"],
+    cwd: "/root", uid: 0, gid: 0,
+  });
+} catch (e) {
+  term.write("\r\nERROR: " + e + "\r\n");
+  console.error(e);
+}
+</script>
+</body></html>