Chat: save before the AI writes, detect a page killed mid-answer, no 1 GB model on phones

chat/chat.js

@@ -28,6 +28,11 @@ function newChat() {
 const AI_CONSENT = 'devseis.aiConsent';
 // Set when the AI wrote unreadable text on this device (a faulty graphics chip or driver); holds the model version, so a new one is tried again.
 const AI_FAULT = 'devseis.aiFault';
+const AI_FAULT_REASON = 'devseis.aiFaultReason';
+// Set while the AI loads or writes. Still set when the page starts again = the browser killed the page (out of memory:
+// iOS reloads a tab that uses too much), so the AI is turned off on this device instead of crashing every question.
+const AI_RUNNING = 'devseis.aiRunning';
+function aiRunning(on) { try { if (on) localStorage.setItem(AI_RUNNING, faultKey()); else localStorage.removeItem(AI_RUNNING); } catch { /* ignore */ } }
 const FIRST_WORDS_LIMIT = 60000, ANSWER_LIMIT = 180000;
 let webllmPromise = null;
 const loadWebllm = () => (webllmPromise ||= import(WEBLLM_URL));
@@ -43,9 +48,11 @@ function chatModel() {
 }
 // A broken-AI flag is kept per model build, so a new build gets a fresh try.
 function faultKey() { const c = state.config?.chat || {}; return [c.version || 'base', c.quant].filter(Boolean).join('-'); }
-async function needs16Bit() {
-  if (chatModel().quant !== 'q0f16') return false;
-  try { const a = await navigator.gpu.requestAdapter(); return !a || !a.features.has('shader-f16'); } catch { return true; }
+// Why the AI cannot run here ('' = it can): the unrounded build is too big for a phone tab and needs 16-bit graphics.
+async function aiUnsuitable() {
+  if (chatModel().quant !== 'q0f16') return '';
+  if (state.device && state.device.desktop === false) return 'too large for phones until the smaller version is ready';
+  try { const a = await navigator.gpu.requestAdapter(); return !a || !a.features.has('shader-f16') ? 'this graphics chip has no 16-bit support' : ''; } catch { return 'no graphics adapter'; }
 }
 
 async function modelChoice() {
@@ -231,8 +238,9 @@ async function ask(question) {
     if (state.engine) {
       // Typing dots until the AI's first words arrive; the knowledge-base answer is only the fallback if the AI fails.
       reply.writing = true; reply.note = '✨ Writing answer…';
-      render();
-      await aiAnswer(chat, reply, messages, passages);
+      render(); saveChats();
+      aiRunning(true);
+      try { await aiAnswer(chat, reply, messages, passages); } finally { aiRunning(false); }
     } else {
       reply.content = quickAnswer(passages);
       reply.cited = true; reply.quick = true;
@@ -301,11 +309,11 @@ function fallback(reply, passages, note) {
 }
 
 // The AI wrote junk: free the graphics chip (a broken driver can hang the whole computer) and stay on the knowledge base here.
-function turnOffBrokenAi() {
+function turnOffBrokenAi(reason = 'it wrote unreadable text on this device') {
   const engine = state.engine;
   state.engine = null; state.enginePromise = null; state.loading = false; state.kbOnly = true; state.aiFault = true;
-  state.modelLabel = 'Turned off: it wrote unreadable text on this device'; $('modelName').textContent = 'Knowledge base only';
-  try { localStorage.setItem(AI_FAULT, faultKey()); } catch { /* ignore */ }
+  state.modelLabel = `Turned off: ${reason}`; $('modelName').textContent = 'Knowledge base only';
+  try { localStorage.setItem(AI_FAULT, faultKey()); localStorage.setItem(AI_FAULT_REASON, reason); } catch { /* ignore */ }
   if (engine && engine.unload) engine.unload().catch(() => {});
   aiChip();
 }
@@ -315,7 +323,8 @@ async function rewriteWithAi(index) {
   if (!reply || !state.engine || state.busy) return;
   state.busy = true; updateSend();
   const messages = chatMessages(reply.question, reply.passages, auditBrief(chat.audit), reply.history || [], chat.audit ? null : deviceBrief(activeDevice()));
-  try { await aiAnswer(chat, reply, messages, reply.passages); } catch (error) { reply.note = `The AI could not answer: ${error.message}`; }
+  saveChats(); aiRunning(true);
+  try { await aiAnswer(chat, reply, messages, reply.passages); } catch (error) { reply.note = `The AI could not answer: ${error.message}`; } finally { aiRunning(false); }
   state.busy = false; saveChats(); updateSend(); render();
 }
 
@@ -453,7 +462,7 @@ function renderDevicePanel() {
   const d = activeDevice();
   const row = (label, value, hint = '') => value ? `<div class="drow"><dt>${label}</dt><dd>${esc(value)}${hint ? `<small>${esc(hint)}</small>` : ''}</dd></div>` : '';
   const unlock = real.platform_authenticator === true ? 'Available (fingerprint, face or PIN)' : real.platform_authenticator === false ? 'None found by the browser' : '';
-  const ai = state.aiFault ? 'Turned off: it wrote unreadable text on this device\'s graphics chip' : state.engine ? `Ready · ${state.modelLabel}` : state.loading ? `Downloading · ${Math.round((state.progress || 0) * 100)}%`
+  const ai = state.aiFault ? state.modelLabel : state.engine ? `Ready · ${state.modelLabel}` : state.loading ? `Downloading · ${Math.round((state.progress || 0) * 100)}%`
     : 'gpu' in navigator && state.engine !== false ? 'Supported (WebGPU)' : 'Not supported here: answers come from the knowledge base';
   let html;
   if (audit) {
@@ -545,6 +554,9 @@ $('themeToggle').addEventListener('click', () => {
 async function init() {
   try { const t = localStorage.getItem('devseis.theme'); if (t) document.documentElement.dataset.theme = t; } catch { /* ignore */ }
   state.chats = loadChats();
+  // An answer still being written when the page was saved: the page was killed mid-answer. Show the knowledge-base one.
+  for (const c of state.chats) for (const m of c.messages) if (m.role === 'assistant' && (m.pending || m.writing))
+    fallback(m, m.passages || [], 'The page reloaded while the AI was writing this (the device likely ran out of memory), so this answer comes from the knowledge base.');
   state.current = state.chats[0] || null;
   const [kb, device, config] = await Promise.all([
     getJson('library/knowledge.json'),
@@ -567,8 +579,14 @@ async function init() {
   if ('gpu' in navigator) {
     let consent = null; try { consent = localStorage.getItem(AI_CONSENT); } catch { /* ignore */ }
     let fault = null; try { fault = localStorage.getItem(AI_FAULT); } catch { /* ignore */ }
-    if (fault && fault === faultKey()) { state.kbOnly = true; state.aiFault = true; state.modelLabel = 'Turned off: it wrote unreadable text on this device'; $('modelName').textContent = 'Knowledge base only'; aiChip(); }
-    else needs16Bit().then(no => no ? (() => { state.engine = false; state.modelLabel = 'Not available: this graphics chip has no 16-bit support'; $('modelName').textContent = 'Knowledge base only'; aiChip(); render(); updateSend(); })() : modelCached().then(cached => {
+    let crashed = null; try { crashed = localStorage.getItem(AI_RUNNING); } catch { /* ignore */ }
+    if (crashed) {
+      aiRunning(false);
+      if (crashed === faultKey()) { turnOffBrokenAi('the page reloaded while the AI was running (this device ran out of memory)'); fault = faultKey(); }
+    }
+    let reason = 'it wrote unreadable text on this device'; try { reason = localStorage.getItem(AI_FAULT_REASON) || reason; } catch { /* ignore */ }
+    if (fault && fault === faultKey()) { state.kbOnly = true; state.aiFault = true; state.modelLabel = `Turned off: ${reason}`; $('modelName').textContent = 'Knowledge base only'; aiChip(); }
+    else aiUnsuitable().then(no => no ? (() => { state.engine = false; state.modelLabel = `Not available: ${no}`; $('modelName').textContent = 'Knowledge base only'; aiChip(); render(); updateSend(); })() : modelCached().then(cached => {
       if (cached || consent === 'yes') { state.cachedStart = cached; getEngine(); }
       else if (consent === 'later') { state.kbOnly = true; aiChip(); }
       else {