CheerpX + Alpine x86_64 + opencode

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+rootfs.ext2 filter=lfs diff=lfs merge=lfs -text

index.html

@@ -1,19 +1,51 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<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>
+// 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>
+<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>

rootfs.ext2

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3f7eb81ae52e5b19cc21c569ccae3d43491075494a350fe48fb78972d58893b7
+size 662700032

sw.js

@@ -0,0 +1,96 @@
+async function handleFetch(request) {
+	// Perform the original fetch request and store the result in order to modify the response.
+	try {
+		var r = await fetch(request);
+	}
+	catch (e) {
+		console.error(e)
+	}
+	if (r.status === 0) {
+		return r;
+	}
+	// We add headers to the original response its headers, in order to enable cross-origin-isolation. And make it independent of the server config.
+	const newHeaders = new Headers(r.headers);
+	// COEP & COOP for cross-origin-isolation.
+	newHeaders.set("Cross-Origin-Embedder-Policy", "require-corp");
+	newHeaders.set("Cross-Origin-Opener-Policy", "same-origin");
+	newHeaders.set("Cross-Origin-Resource-Policy", "cross-origin");
+	/**
+	 * This workaround is necessary due to a limitation of CheerpOS, which relies on the response URL being set to the resolved URL.
+	 * When constructing a new response object, the URL is not set by the Response() constructor and the serviceworker respondwith() method will set the url to event.request.url in case of an empty string.
+	 * To address this, we set the location URL to the resolved response URL and set the status code to 301 in the new Response object.
+	 * This causes the request to bounce back to the serviceworker from Cheerpos, with the event.request.url now set to the resolved URL, which allows the respondWith method to properly set the response URL in our new response.
+	 * https://developer.mozilla.org/en-US/docs/Web/API/FetchEvent/respondWith.
+	*/
+	if (r.redirected === true)
+		newHeaders.set("location", r.url);
+	// In case of a redirection, we set the status to 301, and body to null, in order to not transfer too much data needlessly
+	const moddedResponse = new Response(r.redirected === true ? null : r.body, {
+		headers: newHeaders,
+		status: r.redirected === true ? 301 : r.status,
+		statusText: r.statusText,
+	});
+	return moddedResponse;
+}
+
+function serviceWorkerInit() {
+	// Init the service worker.
+	self.addEventListener("install", () => self.skipWaiting());
+	self.addEventListener("activate", e => e.waitUntil(self.clients.claim()));
+	// Listen for fetch requests and call handleFetch function.
+	self.addEventListener("fetch", function (e) {
+		try {
+			e.respondWith(handleFetch(e.request));
+		} catch (err) {
+			console.log("Serviceworker NetworkError:" + err);
+		}
+	});
+}
+
+async function doRegister() {
+	try {
+		const registration = await navigator.serviceWorker.register(window.document.currentScript.src);
+		console.log("Service Worker registered", registration.scope);
+		// EventListener to make sure that the page gets reloaded when a new serviceworker gets installed.
+		// f.e on first access.
+		registration.addEventListener("updatefound", () => {
+			console.log("Reloading the page to transfer control to the Service Worker.");
+			try {
+				window.location.reload();
+			} catch (err) {
+				console.log("Service Worker failed reloading the page. ERROR:" + err);
+			};
+		});
+		// When the registration is active, but it's not controlling the page, we reload the page to have it take control.
+		// This f.e occurs when you hard-reload (shift + refresh). https://www.w3.org/TR/service-workers/#navigator-service-worker-controller
+		if (registration.active && !navigator.serviceWorker.controller) {
+			console.log("Reloading the page to transfer control to the Service Worker.");
+			try {
+				window.location.reload();
+			} catch (err) {
+				console.log("Service Worker failed reloading the page. ERROR:" + err);
+			};
+		}
+	}
+	catch {
+		console.error("Service Worker failed to register:", e)
+	}
+}
+
+async function serviceWorkerRegister() {
+	if (window.crossOriginIsolated) return;
+	if (!window.isSecureContext) {
+		console.log("Service Worker not registered, a secure context is required.");
+		return;
+	}
+	// Register the service worker and reload the page to transfer control to the serviceworker.
+	if ("serviceWorker" in navigator)
+		await doRegister();
+	else
+		console.log("Service worker is not supported in this browser");
+}
+
+if (typeof window === 'undefined') // If the script is running in a Service Worker context
+	serviceWorkerInit()
+else // If the script is running in the browser context
+	serviceWorkerRegister();