Persona voice: cloud voice-clone, varied voice designs, animated class picker

- app.py: DashScope cloud voice-clone for prod — two-call enroll
(qwen-voice-enrollment) → synthesize (qwen3-tts-vc-2026-01-22), then fetch
the returned OSS audio URL. Wired into /qwen-tts when ref_audio is present
(mirrors the local design→clone flow). Verified flow returns 200 + audio
when the account's paid tier is enabled.
- personaPrompts.js: voice field now asks for a DISTINCT, class-fit voice with
wide variety between heroes (was producing near-identical gruff voices).
- personaPanel.js/persona.css: class picker is now a custom dropdown showing
each class's looping idle sprite (front-right row, Web Animations API), wired
to characters.json; mirrors a native <select> (.value, 'change').

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

app.py

@@ -318,6 +318,54 @@ def _dashscope_voice_design(text, instruct):
     return base64.b64decode(b64), None
 
 
+# Voice CLONE on the cloud is a TWO-CALL flow (mirrors the open-weights design→clone):
+#   1. enroll the reference WAV (qwen-voice-enrollment) → a voice_id
+#   2. synthesize new words in that timbre (qwen3-tts-vc-…) → an OSS-signed audio URL
+# Synthesis returns the audio as a URL (not base64), so we fetch the bytes ourselves.
+_DASHSCOPE_VC_MODEL = os.environ.get("DASHSCOPE_VC_MODEL", "qwen3-tts-vc-2026-01-22")
+_DASHSCOPE_GEN_URL = _DASHSCOPE_BASE + "/api/v1/services/aigc/multimodal-generation/generation"
+
+
+def _dashscope_post(url, payload):
+    req = urllib.request.Request(url, data=_json.dumps(payload).encode(), method="POST", headers={
+        "Content-Type": "application/json", "Authorization": f"Bearer {DASHSCOPE_KEY}",
+    })
+    with urllib.request.urlopen(req, timeout=90) as r:
+        return _json.loads(r.read().decode())
+
+
+def _dashscope_voice_clone(text, ref_audio_b64, ref_text):
+    try:
+        enroll = _dashscope_post(_DASHSCOPE_URL, {
+            "model": "qwen-voice-enrollment",
+            "input": {
+                "action": "create",
+                "target_model": _DASHSCOPE_VC_MODEL,
+                "preferred_name": "tinyarmy",
+                "audio": {"data": "data:audio/wav;base64," + ref_audio_b64},
+            },
+        })
+        voice_id = (enroll.get("output") or {}).get("voice")
+        if not voice_id:
+            return None, "no voice_id from enrollment: " + _json.dumps(enroll)[:200]
+        gen = _dashscope_post(_DASHSCOPE_GEN_URL, {
+            "model": _DASHSCOPE_VC_MODEL,
+            "input": {"text": text, "voice": voice_id},
+        })
+    except urllib.error.HTTPError as e:
+        return None, f"dashscope clone {e.code}: {e.read().decode()[:200]}"
+    except Exception as e:  # noqa: BLE001
+        return None, f"dashscope clone error: {e}"
+    url = ((gen.get("output") or {}).get("audio") or {}).get("url")
+    if not url:
+        return None, "no audio url in response: " + _json.dumps(gen)[:200]
+    try:
+        with urllib.request.urlopen(url, timeout=90) as r:
+            return r.read(), None
+    except Exception as e:  # noqa: BLE001
+        return None, f"dashscope clone fetch error: {e}"
+
+
 @fastapi_app.post("/qwen-tts")
 async def qwen_tts(request: Request):
     body = await request.json()
@@ -339,7 +387,10 @@ async def qwen_tts(request: Request):
         return Response(wav, media_type="audio/wav", headers={"Cache-Control": "no-store"})
     if not DASHSCOPE_KEY:
         return Response("DASHSCOPE_API_KEY not set (or run with TINY_TTS_MODE=local)", status_code=503)
-    wav, err = await asyncio.to_thread(_dashscope_voice_design, text, instruct)
+    if ref_audio:  # clone the prior voice's timbre (enroll → synthesize)
+        wav, err = await asyncio.to_thread(_dashscope_voice_clone, text, ref_audio, ref_text)
+    else:
+        wav, err = await asyncio.to_thread(_dashscope_voice_design, text, instruct)
     if err:
         return Response(err, status_code=502)
     return Response(wav, media_type="audio/wav", headers={"Cache-Control": "no-store"})

web/personaPanel.js

@@ -13,6 +13,22 @@ import { listPersonas, savePersona, removePersona, onRosterChange, putAudio, get
 const CLASSES = ['Warrior', 'Ranger', 'Monk', 'Assassin', 'Mage', 'Paladin', 'Cleric', 'Knight']
 const MAX_TOKENS = 200 // persona JSON + a voice line + a quote
 
+// Each class shows the idle pose of a fitting sprite (character slug → see
+// characters.json). The sheet's front-right row is animated as a tiny looping
+// icon beside the class name in the dropdown.
+const CLASS_SLUG = {
+  Warrior: 'true-heroes-iii-fighter',
+  Ranger: 'true-heroes-iii-ranger',
+  Monk: 'true-heroes-ii-bard',
+  Assassin: 'true-heroes-iv-ninja-assassin',
+  Mage: 'true-heroes-iii-wizard',
+  Paladin: 'true-heroes-ii-paladin',
+  Cleric: 'true-heroes-ii-cleric',
+  Knight: 'rts-humans-knight',
+}
+const ICON_PX = 26
+const spriteUrl = (u) => (u || '').replace('/assets/', '/sprites/') // sheets serve at /sprites
+
 function el(tag, props = {}, kids = []) {
   const n = document.createElement(tag)
   for (const [k, v] of Object.entries(props)) {
@@ -24,8 +40,94 @@ function el(tag, props = {}, kids = []) {
   return n
 }
 
+// Idle sheets are 4 rows (facings) × N frame columns; cell = height/4. Show one
+// front-right cell (row 0) scaled to ICON_PX and step across the columns to loop
+// the idle animation — no canvas, just a sized background + the Web Animations API.
+function animateIdleIcon(box, idleUrl) {
+  box.getAnimations?.().forEach((a) => a.cancel())
+  box.style.backgroundImage = ''
+  const img = new Image()
+  img.onload = () => {
+    const cell = (img.naturalHeight / 4) || img.naturalHeight
+    const cols = Math.max(1, Math.round(img.naturalWidth / cell))
+    const rows = Math.max(1, Math.round(img.naturalHeight / cell))
+    box.style.backgroundImage = `url("${idleUrl}")`
+    box.style.backgroundSize = `${cols * ICON_PX}px ${rows * ICON_PX}px`
+    box.style.backgroundPosition = '0 0'
+    box.animate(
+      [{ backgroundPosition: '0 0' }, { backgroundPosition: `-${cols * ICON_PX}px 0` }],
+      { duration: cols * 110, iterations: Infinity, easing: `steps(${cols})` },
+    )
+  }
+  img.src = idleUrl
+}
+
+// A class picker that mirrors a native <select> API (.value get/set, 'change'
+// event) but renders an animated idle icon beside each class. Icons attach once
+// characters.json resolves (root.setIcons), so the menu is usable immediately.
+function makeClassDropdown(classes) {
+  const triggerIco = el('span', { class: 'persona-class-ico' })
+  const triggerLabel = el('span', { class: 'persona-classdrop-label' })
+  const trigger = el('button', { class: 'persona-input persona-classdrop-trigger', type: 'button' },
+    [triggerIco, triggerLabel, el('span', { class: 'persona-classdrop-chev' }, '▾')])
+  const menu = el('div', { class: 'persona-classdrop-menu' })
+  const root = el('div', { class: 'persona-classdrop' }, [trigger, menu])
+
+  let value = classes[0]
+  let icons = {}            // class → idle sheet URL (filled by setIcons)
+  const optIco = {}         // class → menu icon span
+
+  const items = classes.map((c) => {
+    const ico = el('span', { class: 'persona-class-ico' }); optIco[c] = ico
+    const it = el('button', { class: 'persona-classdrop-opt', type: 'button' }, [ico, el('span', {}, c)])
+    it.addEventListener('click', () => { set(c); close() })
+    return it
+  })
+  menu.append(...items)
+
+  function set(c) {
+    if (!classes.includes(c)) return
+    const changed = c !== value
+    value = c
+    triggerLabel.textContent = c
+    items.forEach((it, i) => it.classList.toggle('sel', classes[i] === c))
+    if (icons[c]) animateIdleIcon(triggerIco, icons[c])
+    if (changed) root.dispatchEvent(new Event('change'))
+  }
+  const close = () => root.classList.remove('open')
+  trigger.addEventListener('click', (e) => { e.stopPropagation(); root.classList.toggle('open') })
+  document.addEventListener('click', (e) => { if (!root.contains(e.target)) close() })
+  document.addEventListener('keydown', (e) => { if (e.key === 'Escape') close() })
+
+  root.setIcons = (map) => {
+    icons = map
+    for (const c of classes) if (map[c]) animateIdleIcon(optIco[c], map[c])
+    if (map[value]) animateIdleIcon(triggerIco, map[value])
+  }
+  Object.defineProperty(root, 'value', { get: () => value, set: (v) => set(v) })
+  triggerLabel.textContent = value
+  items.forEach((it, i) => it.classList.toggle('sel', classes[i] === value))
+  return root
+}
+
+// Resolve each class's idle sheet via characters.json and light up the dropdown.
+async function loadClassIcons(dropdown) {
+  try {
+    const d = await fetch('/sprites/characters.json').then((r) => r.json())
+    const bySlug = {}
+    for (const p of d.packs || []) for (const c of p.characters || []) bySlug[c.slug] = c
+    const map = {}
+    for (const [cls, slug] of Object.entries(CLASS_SLUG)) {
+      const idle = bySlug[slug]?.idle
+      if (idle) map[cls] = spriteUrl(idle)
+    }
+    dropdown.setIcons(map)
+  } catch { /* no icons — the dropdown still works with labels only */ }
+}
+
 export function mountPersonaPanel(host) {
-  const sel = el('select', { class: 'persona-input' }, CLASSES.map((c) => el('option', { value: c }, c)))
+  const sel = makeClassDropdown(CLASSES)
+  loadClassIcons(sel)
   const seed = el('input', { class: 'persona-input', type: 'text', placeholder: 'a word, a vibe… (optional)' })
   const stats = el('div', { class: 'persona-stats' })
   const status = el('div', { class: 'persona-status' }, 'Runs on your device — no cloud.')

web/personaPrompts.js

@@ -10,9 +10,11 @@ export const PERSONA_SYSTEM =
   '  "specialty": a 1-3 word combat specialty,\n' +
   '  "personality": a 1-3 word personality tag,\n' +
   '  "vibe": a 1-3 word vibe,\n' +
-  '  "voice": one sentence describing how they SOUND for a text-to-speech voice — gender, ' +
-  'age, pitch, accent, texture, pace and emotion (e.g. "a gravelly, battle-worn male ' +
-  'baritone, slow and weary, with a faint highland accent"),\n' +
+  '  "voice": one sentence describing how THIS hero sounds for a text-to-speech voice — ' +
+  'pick a gender, age, pitch, accent, texture, pace and emotion that FIT their class and ' +
+  'personality, and make it DISTINCT from a generic gruff soldier. Vary it widely between ' +
+  'heroes — e.g. a bright quick-tongued young woman, a wheezing ancient sage, a velvet-smooth ' +
+  'rogue, a booming jolly giant, a cold precise duelist, a sing-song forest spirit,\n' +
   '  "quote": one short punchy line they say aloud — a battle-cry or wry remark, ' +
   'first person, under 15 words.\n' +
   'Output strictly valid JSON. No preamble, no code fences, no commentary.'

web/shell/persona.css

@@ -30,6 +30,35 @@
   background: var(--p-card) !important; border: 1.5px solid var(--p-ink) !important;
   border-radius: 0 !important; padding: 7px 9px !important; width: 100%;
 }
+/* ── Class picker — a custom dropdown with an animated idle-pose icon per class.
+   Mirrors a native <select> (.persona-input chrome) but each row shows the
+   character's looping idle sprite beside the name. ──────────────────────────── */
+.persona-classdrop { position: relative; }
+.persona-classdrop-trigger {
+  display: flex !important; align-items: center; gap: 8px; cursor: pointer; text-align: left;
+}
+.persona-classdrop-label { flex: 1; min-width: 0; }
+.persona-classdrop-chev { color: var(--p-muted); font-size: 11px; transition: transform .12s; }
+.persona-classdrop.open .persona-classdrop-chev { transform: rotate(180deg); }
+.persona-class-ico {
+  width: 26px; height: 26px; flex-shrink: 0; display: inline-block;
+  background-repeat: no-repeat; background-position: 0 0; image-rendering: pixelated;
+}
+.persona-classdrop-menu {
+  display: none; position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 30;
+  background: var(--p-card); border: 1.5px solid var(--p-ink);
+  box-shadow: 3px 3px 0 var(--p-transmit); max-height: 300px; overflow-y: auto;
+}
+.persona-classdrop.open .persona-classdrop-menu { display: block; }
+.persona-classdrop-opt {
+  display: flex; align-items: center; gap: 8px; width: 100%; cursor: pointer; text-align: left;
+  font-family: var(--p-sans); font-size: 14px; color: var(--p-ink);
+  background: transparent; border: 0; border-bottom: 1px solid var(--p-paper-2); padding: 5px 9px;
+}
+.persona-classdrop-opt:last-child { border-bottom: 0; }
+.persona-classdrop-opt:hover { background: var(--p-paper-2); }
+.persona-classdrop-opt.sel { background: var(--p-ink); color: var(--p-paper); }
+
 .persona-go {
   margin-top: 10px; font-family: var(--p-mono) !important; font-size: 12px !important;
   font-weight: 700 !important; letter-spacing: .04em; text-transform: uppercase;