Add Build Small recommended preset

web/imagen.js

@@ -1,7 +1,7 @@
 // Image facade — mirrors tts.js. Picks the active portrait engine (local Z-Image on your
 // 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, engineKleinZeroGpu as klein, engineCloud as flux, engineCloudDev as fluxdev, isLocalhost } from '/web/imagenServer.js'
+import { engineLocal as zimagelocal, engineKleinZeroGpu as klein, engineCloud as flux, engineCloudDev as fluxdev } from '/web/imagenServer.js'
 import { engine as bonsai } from '/web/imagenBonsai.js'
 
 const ENGINES = [zimagelocal, klein, bonsai, flux, fluxdev]
@@ -12,7 +12,7 @@ let activeId = (() => {
   let saved = ''
   try { saved = localStorage.getItem(KEY) || '' } catch { /* ignore */ }
   const e = ENGINES.find((x) => x.id === saved)
-  return e && e.available() ? saved : (isLocalhost() ? 'zimage-local' : 'klein-zerogpu')
+  return e && e.available() ? saved : 'klein-zerogpu'
 })()
 
 const eng = () => ENGINES.find((e) => e.id === activeId) || ENGINES.find((e) => e.available()) || ENGINES[0]

web/qualityBar.js

@@ -1,7 +1,7 @@
 // "Recommended settings" — a High/Medium/Low/Custom preset picker (sets the LLM model +
 // voice provider together) plus an expandable "Your device" readout for debugging and
 // benchmarking. Mounted at the TOP of the Settings page, above Local AI Model.
-import { PRESETS, applyPreset, getActivePreset, onPresetChange } from '/web/qualityPreset.js'
+import { PRESETS, applyPreset, getActivePreset, onPresetChange, detectPreset } from '/web/qualityPreset.js'
 import { gatherDeviceInfo, recommendPreset } from '/web/deviceInfo.js'
 
 const presetLabel = (id) => (PRESETS.find((p) => p.id === id) || {}).label || id
@@ -19,7 +19,7 @@ function el(tag, props = {}, kids = []) {
 
 export function mountQualityBar(host) {
   // Preset buttons (+ a derived "Custom" that only highlights, never applies).
-  const OPTS = [...PRESETS, { id: 'custom', label: 'Custom', sub: 'Your own model + voice' }]
+  const OPTS = [...PRESETS, { id: 'custom', label: 'Custom', sub: 'Your own model + voice + portrait' }]
   const btns = {}
   const row = el('div', { class: 'tac-preset-row' }, OPTS.map((p) => {
     const b = el('button', { class: 'tac-preset-btn', type: 'button', 'data-id': p.id },

web/qualityPreset.js

@@ -1,40 +1,40 @@
-// Quality presets — a game-graphics-style High/Medium/Low/Custom picker that sets BOTH
-// the in-browser LLM model and the voice provider at once. Picking a preset applies it;
-// changing the model or voice by hand drops the picker to "Custom" (even if the new combo
-// happens to equal another preset — like a game's graphics dropdown). The choice is
-// persisted (and the model/voice themselves are persisted by runtime.js / tts.js), so it
-// survives a refresh.
-import { setModel, currentModelId, listModels, onModelChange } from '/web/runtime.js'
+// Recommended settings presets. Each preset can set the text engine/model, voice
+// provider, and portrait model together. Manual changes move the picker to Custom.
+import { setEngine, getEngineId, setModel, currentModelId, listModels, onModelChange } from '/web/runtime.js'
 import { setTtsEngine, getTtsEngineId, onTtsEngineChange } from '/web/tts.js'
+import { setImageEngine, getImageEngineId, onImageEngineChange } from '/web/imagen.js'
 
-// model = preferred exact id; family = prefix fallback if the active engine lacks it
-// (e.g. Transformers.js has no Qwen3 — then High can't be honored and reads as Custom).
 export const PRESETS = [
-  { id: 'high',   label: 'High',   model: 'qwen3-0.6b',   family: 'qwen3',   voice: 'kokoro',    sub: 'Qwen3 · Kokoro 82M' },
-  { id: 'medium', label: 'Medium', model: 'qwen2.5-0.5b', family: 'qwen2.5', voice: 'kitten',    sub: 'Qwen2.5 · Kitten TTS' },
-  { id: 'low',    label: 'Low',    model: 'qwen2.5-0.5b', family: 'qwen2.5', voice: 'webspeech', sub: 'Qwen2.5 · Web Speech' },
+  { id: 'build-small', label: 'BUILD SMALL', engine: 'server', model: 'tiny-aya-global-zerogpu', family: 'tiny-aya', voice: 'voxcpm', image: 'klein-zerogpu', sub: 'Tiny Aya - VoxCPM2 - FLUX.2 klein' },
+  { id: 'high', label: 'High', engine: 'webllm', model: 'qwen3-0.6b', family: 'qwen3', voice: 'kokoro', image: '', sub: 'Qwen3 - Kokoro 82M' },
+  { id: 'medium', label: 'Medium', engine: 'transformers', model: 'qwen2.5-0.5b', family: 'qwen2.5', voice: 'kitten', image: '', sub: 'Qwen2.5 - Kitten TTS' },
+  { id: 'low', label: 'Low', engine: 'transformers', model: 'qwen2.5-0.5b', family: 'qwen2.5', voice: 'webspeech', image: '', sub: 'Qwen2.5 - Web Speech' },
 ]
 const KEY = 'tinyarmy.qualityPreset'
 const VALID = new Set([...PRESETS.map((p) => p.id), 'custom'])
 
 const byId = (id) => PRESETS.find((p) => p.id === id)
-// Resolve a preset's model to an id that exists in the ACTIVE engine's catalog.
+
 function resolveModel(p) {
   const ms = listModels()
   const m = ms.find((x) => x.id === p.model) || ms.find((x) => x.id.startsWith(p.family))
   return m ? m.id : ''
 }
 
-// Which preset does the current (model, voice) match? 'custom' if none.
 export function detectPreset() {
-  const mid = currentModelId(), v = getTtsEngineId()
-  const p = PRESETS.find((x) => (mid === x.model || mid.startsWith(x.family)) && v === x.voice)
+  const eid = getEngineId()
+  const mid = currentModelId()
+  const voice = getTtsEngineId()
+  const image = getImageEngineId()
+  const p = PRESETS.find((x) =>
+    (!x.engine || eid === x.engine) &&
+    (mid === x.model || mid.startsWith(x.family)) &&
+    voice === x.voice &&
+    (!x.image || image === x.image))
   return p ? p.id : 'custom'
 }
 
 let _applying = false
-// The active preset id. Load the saved one, but only trust a saved preset id if the
-// persisted model+voice still match it; honor a saved 'custom' as-is.
 let _current = (() => {
   let saved = ''
   try { saved = localStorage.getItem(KEY) || '' } catch { /* ignore */ }
@@ -55,16 +55,19 @@ export function applyPreset(id) {
   const p = byId(id)
   if (!p) return
   _applying = true
+  if (p.engine) setEngine(p.engine)
   const mid = resolveModel(p)
-  if (mid) setModel(mid)   // fires onModelChange (ignored while _applying)
-  setTtsEngine(p.voice)    // fires onTtsEngineChange (ignored while _applying)
+  if (mid) setModel(mid)
+  setTtsEngine(p.voice)
+  if (p.image) setImageEngine(p.image)
   _applying = false
   commit(id)
 }
 
 const _listeners = new Set()
 export function onPresetChange(fn) { _listeners.add(fn); return () => _listeners.delete(fn) }
-// A model/voice change NOT caused by applyPreset = a manual edit → Custom.
+
 const _onManual = () => { if (!_applying) commit('custom') }
 onModelChange(_onManual)
 onTtsEngineChange(_onManual)
+onImageEngineChange(_onManual)

web/runtime.js

@@ -18,7 +18,7 @@ const loadStr = (k) => { try { return localStorage.getItem(k) || '' } catch { re
 let activeId = (() => {
   const saved = loadStr(ENGINE_KEY)
   const e = ENGINES.find((x) => x.id === saved)
-  return e && e.available() ? saved : (webllm.available() ? 'webllm' : 'wllama')
+  return e && e.available() ? saved : 'server'
 })()
 const modelSel = loadJSON(MODELS_KEY, {}) // engineId -> chosen model id (remembered per engine)
 

web/tts.js

@@ -3,7 +3,7 @@
 // reader that speaks sentence-by-sentence so a war diary can narrate itself while the
 // LLM is still writing. Panels + the TTS bar import only from here.
 import { engine as kokoro } from '/web/ttsKokoro.js'
-import { engine as qwen3, engineLocal as qwen3local, isLocalhost } from '/web/ttsQwen3.js'
+import { engine as qwen3, engineLocal as qwen3local } from '/web/ttsQwen3.js'
 import { engine as voxcpm } from '/web/ttsVoxcpm.js'
 import { engine as kitten } from '/web/ttsKitten.js'
 import { engine as webspeech } from '/web/ttsWebSpeech.js'
@@ -19,7 +19,7 @@ let activeId = (() => {
   let saved = ''
   try { saved = localStorage.getItem(TTS_ENGINE_KEY) || '' } catch { /* ignore */ }
   const e = ENGINES.find((x) => x.id === saved)
-  return e && e.available() ? saved : (isLocalhost() ? 'qwen3local' : 'kokoro')
+  return e && e.available() ? saved : 'voxcpm'
 })()
 
 // Qwen3-TTS designs a voice from a free-form description (the persona's `voice`).