4c:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4e:T2764,'use client'; /** * @file voice-explorer.tsx * @description Voice Explorer — browse, search, preview, and A/B-compare all 29 Kokoro voices; Kokoro downloads only on the first preview or comparison. */ import { useState } from 'react'; import { useModelLoad, useSynthesizeSpeech, type UseModelLoadReturn } from '@localmode/react'; import { synthesizeSpeech } from '@localmode/core'; import type { TextToSpeechModel } from '@localmode/core'; import { transformers, isModelCached, KOKORO_VOICES, KOKORO_DEFAULT_VOICE, } from '@localmode/transformers'; import { VoiceCard, type VoiceOption } from '@/components/voice-picker'; import { VoiceComparisonPanel } from '@/components/voice-comparison-panel'; import { AudioScrubPlayer } from '@/components/audio-scrub-player'; import { ModelLoadingPanel } from '@/components/model-loading-panel'; import { ErrorAlert } from '@/components/error-alert'; const TTS_MODEL_ID = 'onnx-community/Kokoro-82M-v1.0-ONNX'; const TTS_MODEL_SIZE = '~86MB'; const PREVIEW_TEXT = 'Hello! This is a preview of this voice.'; const VOICE_OPTIONS: VoiceOption[] = KOKORO_VOICES.map((v) => ({ id: v.id, name: v.name, gender: v.gender, languageLabel: v.languageLabel, })); const DEFAULT_COMPARE_TEXT = 'The quick brown fox jumps over the lazy dog.'; export function VoiceExplorerBlock() { const ttsLoad = useModelLoad({ key: `voice-explorer-tts:${TTS_MODEL_ID}`, create: (onProgress) => transformers.textToSpeech(TTS_MODEL_ID, { onProgress: (p) => onProgress(p as Parameters[0]), }), warmup: (model) => synthesizeSpeech({ model, text: 'Ready.', voice: KOKORO_DEFAULT_VOICE }), isCached: () => isModelCached(TTS_MODEL_ID), }); const ttsModel = ttsLoad.model; if (!ttsModel) return

Preparing…

; return ; } interface VoiceExplorerSurfaceProps { ttsLoad: UseModelLoadReturn; ttsModel: TextToSpeechModel; } function VoiceExplorerSurface({ ttsLoad, ttsModel }: VoiceExplorerSurfaceProps) { const previewTts = useSynthesizeSpeech({ model: ttsModel }); const compareTts = useSynthesizeSpeech({ model: ttsModel }); const [search, setSearch] = useState(''); const [selectedVoiceId, setSelectedVoiceId] = useState(); const [pendingPreviewId, setPendingPreviewId] = useState(null); const [preview, setPreview] = useState<{ voiceId: string; audio: Blob } | null>(null); const [dismissedError, setDismissedError] = useState(null); const [voiceA, setVoiceA] = useState('af_heart'); const [voiceB, setVoiceB] = useState('am_michael'); const [compareText, setCompareText] = useState(DEFAULT_COMPARE_TEXT); const [audioA, setAudioA] = useState(null); const [audioB, setAudioB] = useState(null); const [comparing, setComparing] = useState(false); const query = search.trim().toLowerCase(); const filtered = query ? VOICE_OPTIONS.filter( (v) => v.name.toLowerCase().includes(query) || v.id.toLowerCase().includes(query) || v.gender.includes(query), ) : VOICE_OPTIONS; const groups = [...new Set(filtered.map((v) => v.languageLabel))].map((label) => ({ label, voices: filtered.filter((v) => v.languageLabel === label), })); const previewVoice = async (voiceId: string) => { if (preview?.voiceId === voiceId) { setPreview(null); return; } setPendingPreviewId(voiceId); setPreview(null); setDismissedError(null); try { await ttsLoad.load(); const result = await previewTts.execute(PREVIEW_TEXT, { voice: voiceId }); if (result) setPreview({ voiceId, audio: result.audio }); } catch { } finally { setPendingPreviewId(null); } }; const runCompare = async () => { if (comparing || !compareText.trim()) return; setComparing(true); setDismissedError(null); setAudioA(null); setAudioB(null); try { await ttsLoad.load(); const a = await compareTts.execute(compareText, { voice: voiceA }); if (!a) return; setAudioA(a.audio); const b = await compareTts.execute(compareText, { voice: voiceB }); if (!b) return; setAudioB(b.audio); } catch { } finally { setComparing(false); } }; const cancelCompare = () => { compareTts.cancel(); setComparing(false); }; const rawErrorText = previewTts.error?.message ?? compareTts.error?.message ?? ttsLoad.error?.message ?? null; const errorText = rawErrorText && rawErrorText !== dismissedError ? rawErrorText : null; const busy = previewTts.isLoading || comparing; const statusText = busy ? 'synthesizing' : errorText ? 'error' : preview || audioA || audioB ? 'ready' : 'idle'; const statusLabel = statusText === 'synthesizing' ? 'Synthesizing…' : statusText === 'error' ? 'Error' : statusText === 'ready' ? 'Ready' : 'Idle'; return (

{statusLabel}

{errorText && ( { setDismissedError(rawErrorText); previewTts.reset(); compareTts.reset(); }} /> )} {ttsLoad.status === 'loading' && ( )} {}

Voices ({VOICE_OPTIONS.length} Kokoro voices)

setSearch(e.target.value)} placeholder="Search name, id, or gender…" aria-label="Search voices" className="h-8 w-full min-w-0 rounded-md border border-input bg-background px-3 text-sm focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 sm:w-56" />

{groups.length === 0 && (

No voices match “{search}”.

)} {groups.map((group) => (

{group.label} ({group.voices.length})

{group.voices.map((voice) => (

void previewVoice(id)} loading={pendingPreviewId === voice.id} playing={preview?.voiceId === voice.id} />

))}

{preview && (

Previewing {preview.voiceId}: “{PREVIEW_TEXT}”

)}

{}

Compare two voices

A: {voiceA} · {audioA ? 'Ready' : 'Pending'} B: {voiceB} · {audioB ? 'Ready' : 'Pending'} {comparing && ( )}

void runCompare()} loading={comparing} />

); } 4b:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@localmode/core",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40localmode%2Fcore","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@localmode/core"}]]}]}],["$","li","@localmode/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40localmode%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@localmode/react"}]]}]}],["$","li","@localmode/transformers",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40localmode%2Ftransformers","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@localmode/transformers"}]]}]}]]}],["$","$L4c",null,{"namespace":"@localmode","registryDependencies":["https://localmode.ai/r/ui/audio/voice-picker.json","https://localmode.ai/r/ui/audio/voice-comparison-panel.json","https://localmode.ai/r/ui/audio/audio-scrub-player.json","https://localmode.ai/r/ui/local-first/model-loading-panel.json","https://localmode.ai/r/ui/results/error-alert.json"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"src/app/blocks/audio/voice-explorer/voice-explorer.tsx","content":"$4e","type":"registry:component","target":"components/blocks/audio/voice-explorer/voice-explorer.tsx"}],"className":"h-[70svh] min-h-80"}]]}]