deploy: labeling server

labeling/static/app.js

@@ -26,11 +26,19 @@ function initThemeToggle() {
   });
 }
 
+class HttpError extends Error {
+  constructor(status, body) {
+    super(`${status}: ${body}`);
+    this.status = status;
+    this.body = body;
+  }
+}
+
 async function fetchJSON(path, init) {
   const resp = await fetch(path, init);
   if (!resp.ok) {
     const body = await resp.text();
-    throw new Error(`${resp.status}: ${body}`);
+    throw new HttpError(resp.status, body);
   }
   return resp.json();
 }
@@ -45,15 +53,7 @@ function nextSessionCap() {
   return rounds === 0 ? FIRST_SESSION_CAP : REPEAT_SESSION_CAP;
 }
 
-async function ensureToken() {
-  const urlToken = new URL(window.location.href).searchParams.get("token");
-  if (urlToken) {
-    localStorage.setItem(TOKEN_STORAGE_KEY, urlToken);
-    return urlToken;
-  }
-  const stored = localStorage.getItem(TOKEN_STORAGE_KEY);
-  if (stored) return stored;
-  const cap = nextSessionCap();
+async function registerFresh(cap) {
   const resp = await fetch(`/api/register?cap=${cap}`, { method: "POST" });
   if (!resp.ok) {
     throw new Error(
@@ -65,6 +65,17 @@ async function ensureToken() {
   return token;
 }
 
+async function ensureToken() {
+  const urlToken = new URL(window.location.href).searchParams.get("token");
+  if (urlToken) {
+    localStorage.setItem(TOKEN_STORAGE_KEY, urlToken);
+    return urlToken;
+  }
+  const stored = localStorage.getItem(TOKEN_STORAGE_KEY);
+  if (stored) return stored;
+  return registerFresh(nextSessionCap());
+}
+
 function renderProfileCard(idx, profile) {
   const ul = document.createElement("ul");
   ul.className = "profile";
@@ -162,22 +173,26 @@ async function submitLabel(token) {
   const chosen = document.querySelector("input[name=choice]:checked");
   if (!chosen || !currentItem) return;
   const elapsed = (performance.now() - shownAt) / 1000;
-  try {
-    await fetchJSON("/api/label", {
-      method: "POST",
-      headers: { "content-type": "application/json" },
-      body: JSON.stringify({
-        token,
-        item_id: currentItem.item_id,
-        chosen_index: Number(chosen.value),
-        seconds: elapsed,
-        confidence: null,
-      }),
-    });
-    await loadNext(token);
-  } catch (e) {
-    err.textContent = `Submit failed: ${e.message}`;
-  }
+  await fetchJSON("/api/label", {
+    method: "POST",
+    headers: { "content-type": "application/json" },
+    body: JSON.stringify({
+      token,
+      item_id: currentItem.item_id,
+      chosen_index: Number(chosen.value),
+      seconds: elapsed,
+      confidence: null,
+    }),
+  });
+  await loadNext(token);
+}
+
+async function recoverFromInvalidToken() {
+  // Server doesn't know this token (DB was reset, Space rebuild lost state,
+  // etc.). Wipe client state and start a fresh session.
+  localStorage.removeItem(TOKEN_STORAGE_KEY);
+  localStorage.removeItem(ROUNDS_KEY);
+  return registerFresh(FIRST_SESSION_CAP);
 }
 
 async function main() {
@@ -189,11 +204,31 @@ async function main() {
     document.getElementById("error").textContent = e.message;
     return;
   }
-  document.getElementById("submit").addEventListener("click", () => submitLabel(token));
+  document.getElementById("submit").addEventListener("click", async () => {
+    try {
+      await submitLabel(token);
+    } catch (e) {
+      if (e instanceof HttpError && e.status === 401) {
+        token = await recoverFromInvalidToken();
+        await loadNext(token);
+      } else {
+        document.getElementById("error").textContent = `Submit failed: ${e.message}`;
+      }
+    }
+  });
   try {
     await loadNext(token);
   } catch (e) {
-    document.getElementById("error").textContent = `Load failed: ${e.message}`;
+    if (e instanceof HttpError && e.status === 401) {
+      try {
+        token = await recoverFromInvalidToken();
+        await loadNext(token);
+      } catch (e2) {
+        document.getElementById("error").textContent = `Load failed: ${e2.message}`;
+      }
+    } else {
+      document.getElementById("error").textContent = `Load failed: ${e.message}`;
+    }
   }
 }
 

labeling/static/index.html

@@ -41,6 +41,6 @@
       <span id="error"></span>
     </footer>
   </main>
-  <script src="/app.js?v=9"></script>
+  <script src="/app.js?v=10"></script>
 </body>
 </html>