Portraits step 4: in-browser Janus-Pro-1B (WebGPU) portrait engine

Adds web/imagenJanus.js — Janus-Pro-1B (DeepSeek, MIT) via Transformers.js +
WebGPU, the SAME runtime our LLM/Kokoro engines use. Runs on the device (no
cloud); generate_images → RawImage.toBlob() → PNG. WebGPU-required, fp16 weights
where shader-f16 is available else fp32, prepare-inputs on WASM.

Wired into the imagen.js engine list and the Settings Portrait picker (selectable
alongside Z-Image-local + cloud FLUX). The persona panel now shows one-time
download progress for in-browser engines before painting.

Verified: appears + enabled in the picker. On-device generation needs a real
WebGPU browser (not the SwiftShader headless one).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

web/imagen.js

@@ -2,8 +2,9 @@
 // GPU, or cloud FLUX; in-browser SD-Turbo / Janus get added here later) and exposes one
 // generatePortrait(). The persona panel + the Settings image bar import only from here.
 import { engineLocal as zimagelocal, engineCloud as flux, engineCloudDev as fluxdev, isLocalhost } from '/web/imagenServer.js'
+import { engine as janus } from '/web/imagenJanus.js'
 
-const ENGINES = [zimagelocal, flux, fluxdev]
+const ENGINES = [zimagelocal, janus, flux, fluxdev]
 // Default: local Z-Image on localhost (your GPU), cloud FLUX in prod. Persisted across
 // refreshes; a saved choice wins if it's still available.
 const KEY = 'tinyarmy.imageEngine'

web/imagenJanus.js

@@ -0,0 +1,54 @@
+// In-browser image engine: Janus-Pro-1B (DeepSeek, MIT) via Transformers.js + WebGPU —
+// the SAME runtime our LLM transformers engine + Kokoro already use. Runs on the device,
+// no cloud. WebGPU-required (a small WASM stage prepares inputs). generate() → PNG Blob.
+const MODEL_ID = 'onnx-community/Janus-Pro-1B-ONNX'
+
+let _lib = null, _proc = null, _model = null, _loadP = null
+async function lib() { if (!_lib) _lib = await import('https://cdn.jsdelivr.net/npm/@huggingface/transformers@3'); return _lib }
+
+// shader-f16 lets us use the smaller/faster fp16 weights; else fall back to fp32.
+async function fp16Supported() {
+  try { const a = navigator.gpu && await navigator.gpu.requestAdapter(); return !!(a && a.features && a.features.has('shader-f16')) } catch { return false }
+}
+
+async function ensure(onProgress) {
+  if (_proc && _model) return
+  if (_loadP) return _loadP
+  _loadP = (async () => {
+    const { AutoProcessor, MultiModalityCausalLM } = await lib()
+    const prog = (p) => { if (onProgress && p.status === 'progress' && p.total) onProgress(p.loaded / p.total) }
+    const proc = await AutoProcessor.from_pretrained(MODEL_ID, { progress_callback: prog })
+    const fp16 = await fp16Supported()
+    // Per-component placement: the input-embed prep runs on WASM, the rest on WebGPU.
+    const dtype = fp16
+      ? { prepare_inputs_embeds: 'q4', language_model: 'q4f16', lm_head: 'fp16', gen_head: 'fp16', gen_img_embeds: 'fp16', image_decode: 'fp32' }
+      : { prepare_inputs_embeds: 'fp32', language_model: 'q4', lm_head: 'fp32', gen_head: 'fp32', gen_img_embeds: 'fp32', image_decode: 'fp32' }
+    const device = { prepare_inputs_embeds: 'wasm', language_model: 'webgpu', lm_head: 'webgpu', gen_head: 'webgpu', gen_img_embeds: 'webgpu', image_decode: 'webgpu' }
+    const model = await MultiModalityCausalLM.from_pretrained(MODEL_ID, { dtype, device, progress_callback: prog })
+    _proc = proc; _model = model
+  })().catch((e) => { _loadP = null; throw e })
+  return _loadP
+}
+
+async function generate(prompt) {
+  await ensure()
+  const conversation = [{ role: '<|User|>', content: prompt }]
+  const inputs = await _proc(conversation, { chat_template: 'text_to_image' })
+  const n = _proc.num_image_tokens
+  const outputs = await _model.generate_images({ ...inputs, min_new_tokens: n, max_new_tokens: n, do_sample: true })
+  return outputs[0].toBlob() // RawImage → PNG Blob
+}
+
+export const engine = {
+  id: 'janus',
+  label: 'Janus-Pro-1B · in-browser (WebGPU)',
+  // WebGPU-only; mirror the WebLLM check (gpu object present). ensure() fails gracefully
+  // and the picker disables it where there's genuinely no WebGPU.
+  available: () => { try { return !!navigator.gpu } catch { return false } },
+  note: 'needs WebGPU',
+  needsDownload: true,
+  networked: false,
+  ensure,
+  generate: (prompt, _opts = {}) => generate(prompt), // Janus is prompt-only (no seed/size)
+  backendLabel: () => '⚡ WebGPU · Janus-Pro',
+}

web/personaPanel.js

@@ -12,7 +12,7 @@ import {
   activeEngineIsDesign, activeEngineIsNative, activeVoices, activeDefaultVoice, onTtsEngineChange,
 } from '/web/tts.js'
 import { listPersonas, savePersona, removePersona, onRosterChange, putAudio, getAudio, putPortrait, getPortrait } from '/web/personaStore.js'
-import { generatePortrait, imageBackendLabel } from '/web/imagen.js'
+import { generatePortrait, imageBackendLabel, imageNeedsDownload, ensureImage } from '/web/imagen.js'
 
 const CLASSES = ['Warrior', 'Ranger', 'Monk', 'Assassin', 'Mage', 'Paladin', 'Cleric', 'Knight']
 const MAX_TOKENS = 200 // persona JSON + a voice line + a quote
@@ -328,8 +328,13 @@ export function mountPersonaPanel(host) {
     const appearance = appearanceFor(lastPersona)
     portraitBusy = true; portraitBtn.classList.add('busy'); portraitBtn.disabled = true
     const prev = status.textContent
-    status.textContent = `painting with ${imageBackendLabel()}…`
     try {
+      // In-browser engines (Janus) download the model on first use — show progress.
+      if (imageNeedsDownload()) {
+        status.textContent = 'loading portrait model…'
+        await ensureImage((f) => { status.textContent = `downloading portrait model… ${Math.round(f * 100)}% (one-time)` })
+      }
+      status.textContent = `painting with ${imageBackendLabel()}…`
       const blob = await generatePortrait(`${appearance}. ${PORTRAIT_STYLE}`, { seed: 42 })
       await putPortrait(savedId, blob)
       lastPersona.appearance = appearance; lastPersona.portraitUsed = appearance