/* global React, ReactDOM */ const { useState, useEffect, useRef, useMemo } = React; /* ---------- Icons ---------- */ const Icon = { back: () => , copy: () => , history: () => , share: () => , search: () => , sparkle: () => , filter: () => , image: () => , play: () => , pause: () => , replay: () => , expandDown: () => , collapseUp: () => , mic: () => , stop: () => , check: () => , chevron: () => , plus: () => , wand: () => , upload: () => , expand: () => , mic: () => , download: () => , }; /* ---------- Data ---------- */ const AVATARS = [ { id: 'a01', name: 'Mira', role: 'F · 28 · EN-US', tone: 'oklch(0.62 0.07 30)' }, { id: 'a02', name: 'Soraya', role: 'F · 31 · EN-UK', tone: 'oklch(0.4 0.06 280)' }, { id: 'a03', name: 'Idris', role: 'M · 47 · EN-IN', tone: 'oklch(0.45 0.05 160)' }, { id: 'a04', name: 'Naomi', role: 'F · 39 · EN-US', tone: 'oklch(0.35 0.04 30)' }, { id: 'a05', name: 'Yuki', role: 'F · 26 · JA-JP', tone: 'oklch(0.58 0.04 90)' }, { id: 'a06', name: 'Calder', role: 'M · 34 · EN-AU', tone: 'oklch(0.5 0.07 220)' }, { id: 'a07', name: 'Elin', role: 'F · 29 · SV-SE', tone: 'oklch(0.65 0.08 60)' }, { id: 'a08', name: 'Mateo', role: 'M · 33 · ES-MX', tone: 'oklch(0.5 0.08 130)' }, { id: 'a09', name: 'Ines', role: 'F · 52 · PT-BR', tone: 'oklch(0.45 0.06 350)' }, ]; const VOICES = [ { id: 'v01', name: 'Mira — Default', tag: 'EN-US', desc: 'Warm · Conversational', dur: '0:24', barCount: 32 }, { id: 'v02', name: 'Studio Narrator', tag: 'EN-US', desc: 'Cinematic · Low', dur: '0:31', barCount: 32 }, { id: 'v03', name: 'Clear Brief', tag: 'EN-UK', desc: 'Crisp · Neutral', dur: '0:18', barCount: 32 }, { id: 'v04', name: 'Documentary', tag: 'EN-IN', desc: 'Calm · Measured', dur: '0:27', barCount: 32 }, { id: 'v05', name: 'Mira — Whispered', tag: 'EN-US', desc: 'Soft · Intimate', dur: '0:22', barCount: 32 }, { id: 'v06', name: 'Live Anchor', tag: 'EN-AU', desc: 'Bright · Direct', dur: '0:29', barCount: 32 }, ]; const PRESETS = [ { title: 'Product launch', desc: 'Today we are introducing something we have been working on…' }, { title: 'Welcome message', desc: 'Hi — and thanks for stopping by. Here is what to expect…' }, { title: 'Quarterly update', desc: 'A few quick numbers from the last 90 days, and what comes next.' }, { title: 'Course intro', desc: 'In this lesson we will cover three ideas. The first one is…' }, ]; const SAMPLE_SCRIPT = `Hi, I'm Mira — your avatar. Type a script, pick a face, and I'll deliver it.`; /* ---------- App ---------- */ function App() { const [tweaks, setTweak] = useTweaks(/*EDITMODE-BEGIN*/{ "accent": "#c0664a", "model": "BosonAvatar-01", "showCaption": true }/*EDITMODE-END*/); // Upload (custom avatar photo + voice clip) is the "VIP" feature. The // standalone all-in-one UI (served from avatar_server at /) is unlocked; // the same bundle baked into the boson homepage (served at /workspace/*) // is locked. Single source file — runtime path detect, no per-copy diff. const UPLOAD_LOCKED = typeof window !== 'undefined' && window.location.pathname.startsWith('/workspace'); const [tab, setTab] = useState('avatar'); const [avatarId, setAvatarId] = useState('a01'); const [voiceId, setVoiceId] = useState('v01'); // Stacks of uploaded files — each upload appends a new entry instead of // replacing the previous one. Selection is via avatarId/voiceId = // `upload:`. New (the button) clears selection but keeps these lists. const [customAvatars, setCustomAvatars] = useState([]); // [{id, file}] const [customVoices, setCustomVoices] = useState([]); // [{id, file}] const addCustomAvatar = (file) => { const id = `u${Date.now().toString(36)}${Math.floor(Math.random()*1e4)}`; setCustomAvatars(prev => [...prev, { id, file }]); setAvatarId(`upload:${id}`); }; const removeCustomAvatar = (id) => { setCustomAvatars(prev => prev.filter(u => u.id !== id)); if (avatarId === `upload:${id}`) setAvatarId('a01'); }; const addCustomVoice = async (file) => { const id = `u${Date.now().toString(36)}${Math.floor(Math.random()*1e4)}`; // Insert with transcript pending; UI shows "transcribing…" until Gemini // returns the text. Higgs TTS clones the voice noticeably better with // the reference transcript than without it. setCustomVoices(prev => [...prev, { id, file, transcript: '', transcribing: true }]); setVoiceId(`upload:${id}`); try { const fd = new FormData(); fd.append('audio', file, file.name); const r = await fetch('/api/transcribe', { method: 'POST', body: fd }); if (!r.ok) throw new Error(`transcribe ${r.status}`); const { transcript } = await r.json(); setCustomVoices(prev => prev.map(u => u.id === id ? { ...u, transcript: transcript || '', transcribing: false } : u )); } catch (err) { console.warn('[transcribe failed]', err); setCustomVoices(prev => prev.map(u => u.id === id ? { ...u, transcribing: false } : u )); } }; const removeCustomVoice = (id) => { setCustomVoices(prev => prev.filter(u => u.id !== id)); if (voiceId === `upload:${id}`) setVoiceId('v01'); }; const [playingVoice, setPlayingVoice] = useState(null); const [script, setScript] = useState(SAMPLE_SCRIPT); const [language, setLanguage] = useState('English (US)'); const [isPlaying, setIsPlaying] = useState(false); const [progress, setProgress] = useState(0); // 0..1 const [generating, setGenerating] = useState(false); const [renderedTake, setRenderedTake] = useState(0); const [videoUrl, setVideoUrl] = useState(null); // final video (direct src) const [hlsUrl, setHlsUrl] = useState(null); // live m3u8 stream const [audioUrl, setAudioUrl] = useState(null); const [audioSec, setAudioSec] = useState(0); // real TTS audio length once known const [audioPreviewReady, setAudioPreviewReady] = useState(false); // streaming TTS chunk arrived const audioCtxRef = useRef(null); // shared AudioContext (user-gesture initialised) const audioCursorRef = useRef(0); // next playback start time in AudioContext clock const audioPcmQueueRef = useRef([]); // [{floats: Float32Array, sample_rate}] — buffered chunks not yet scheduled // Decode a base64-PCM-int16 chunk into a Float32Array in [-1, 1]. // Pure function so it can run before AudioContext exists (we buffer the // decoded floats and schedule them once the user taps preview). const decodePcmChunk = (b64) => { const raw = atob(b64); const bytes = new Uint8Array(raw.length); for (let i = 0; i < raw.length; i++) bytes[i] = raw.charCodeAt(i); const i16 = new Int16Array(bytes.buffer, bytes.byteOffset, bytes.byteLength >> 1); const f32 = new Float32Array(i16.length); for (let i = 0; i < i16.length; i++) f32[i] = i16[i] / 32768; return f32; }; // Schedule one Float32 chunk on the AudioContext, starting at the // current write cursor. Idempotent w.r.t. AudioContext creation. const scheduleAudioChunk = (floats, sampleRate) => { const ctx = audioCtxRef.current; if (!ctx) return; const buf = ctx.createBuffer(1, floats.length, sampleRate); buf.copyToChannel(floats, 0); const src = ctx.createBufferSource(); src.buffer = buf; src.connect(ctx.destination); const startAt = Math.max(audioCursorRef.current, ctx.currentTime); src.start(startAt); audioCursorRef.current = startAt + buf.duration; }; const startAudioPreview = () => { if (audioCtxRef.current) return; const Ctx = window.AudioContext || window.webkitAudioContext; if (!Ctx) return; const ctx = new Ctx(); audioCtxRef.current = ctx; audioCursorRef.current = ctx.currentTime + 0.05; // Drain anything we buffered before the user pressed preview. for (const { floats, sample_rate } of audioPcmQueueRef.current) { scheduleAudioChunk(floats, sample_rate); } audioPcmQueueRef.current = []; }; const [previewExpanded, setPreviewExpanded] = useState(false); // mobile fullscreen toggle const [renderPct, setRenderPct] = useState(0); const [statusMsg, setStatusMsg] = useState(''); const [genError, setGenError] = useState(null); const [finalVideoUrl, setFinalVideoUrl] = useState(null); const [generatedSecs, setGeneratedSecs] = useState(0); // cumulative rendered seconds const pollRef = useRef(null); const pollIdx = useRef(0); const runIdRef = useRef(null); const finalUrlRef = useRef(null); const hlsUrlRef = useRef(null); // ref mirror so processEvent closure sees current value const avatar = AVATARS.find(a => a.id === avatarId); const voice = VOICES.find(v => v.id === voiceId); // Fake playback sim — drives the bar ONLY when there is no media element // attached at all (the "Ready" demo state). When HLS or a final video is // playing, the bar is driven by the video element's onTimeUpdate so it // freezes correctly when the player buffers. Including hlsUrl in the early // return prevents this fake timer from racing the real one during stalls. useEffect(() => { if (!isPlaying || videoUrl || hlsUrl) return; const id = setInterval(() => { setProgress(p => { const next = p + 0.0035; if (next >= 1) { setIsPlaying(false); return 0; } return next; }); }, 60); return () => clearInterval(id); }, [isPlaying, videoUrl, hlsUrl]); useEffect(() => { const onKey = e => { if (e.code === 'Space' && e.target.tagName !== 'TEXTAREA' && e.target.tagName !== 'INPUT') { e.preventDefault(); setIsPlaying(p => !p); } }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, []); const setHlsUrlBoth = (url) => { hlsUrlRef.current = url; setHlsUrl(url); }; const processEvent = (ev) => { if (ev.type === 'status') { setStatusMsg(ev.message || ''); if (ev.pct != null) setRenderPct(ev.pct); } else if (ev.type === 'audio_chunk') { // Phase 1: surface TTFA in the status the moment the first chunk lands. if (ev.index === 0 && ev.t_arrived_s != null) { setStatusMsg(`🔊 Voice generating · TTFA ${ev.t_arrived_s.toFixed(1)}s`); setAudioPreviewReady(true); } // Phase 1.5: decode the PCM payload + either schedule it for // playback (if the user already tapped preview) or buffer it until // they do. WebAudio playback can't start without a user gesture, so // we hold the decoded floats until startAudioPreview() runs. if (ev.pcm_b64) { const floats = decodePcmChunk(ev.pcm_b64); const sr = ev.sample_rate || 24000; if (audioCtxRef.current) { scheduleAudioChunk(floats, sr); } else { audioPcmQueueRef.current.push({ floats, sample_rate: sr }); } } } else if (ev.type === 'audio_ready') { setAudioUrl(ev.audio_url); // Only trust positive durations — guard against a 0/missing field // overwriting a later, more accurate value. if (ev.duration && ev.duration > 0) setAudioSec(ev.duration); if (ev.pct != null) setRenderPct(ev.pct); } else if (ev.type === 'hls_ready') { setHlsUrlBoth(ev.hls_url); setStatusMsg('⏳ Generating video…'); if (ev.generated_secs != null) setGeneratedSecs(ev.generated_secs); if (ev.pct != null) setRenderPct(ev.pct); } else if (ev.type === 'hls_chunk') { if (ev.generated_secs != null) setGeneratedSecs(ev.generated_secs); if (ev.pct != null) setRenderPct(ev.pct); } else if (ev.type === 'chunk') { // ffmpeg fallback: ignore for playback, just track progress if (ev.pct != null) setRenderPct(ev.pct); setStatusMsg('⏳ Generating video…'); } else if (ev.type === 'done') { // video_url may be null when HLS has audio baked in (sentence-chunked mode) finalUrlRef.current = ev.video_url || null; setFinalVideoUrl(ev.video_url || null); setRenderPct(100); setGenerating(false); setRenderedTake(t => t + 1); // Snap audioSec to the actually-served duration so the buffer bar reaches // 100% (video may be slightly shorter than TTS audio when ffmpeg -t // truncates the tail chunk). setGeneratedSecs(prev => { setAudioSec(s => prev > 0 ? prev : s); return prev; }); if (!hlsUrlRef.current) { if (ev.video_url) { setVideoUrl(ev.video_url); setProgress(0); setIsPlaying(true); } } // HLS active: stream naturally plays to ENDLIST; onEnded handles loop } else if (ev.type === 'error') { setGenError(ev.message || 'Generation failed'); setGenerating(false); } }; // Called by RightPanel video onEnded. const handleVideoEnded = () => { // Stop on the last frame; the play button has already flipped to // Replay (via setEnded(true) in the video element's onEnded). Clicking // it seeks to 0 and restarts. // // Previously we auto-switched from the HLS stream to the merged MP4 // (`finalUrlRef.current`) at end-of-stream and called play() again, // which made the first user-initiated play look like "it played twice". // The merged MP4 is still available via the Export download link. }; const stopPolling = () => { if (pollRef.current) { clearInterval(pollRef.current); pollRef.current = null; } }; const startPolling = (run_id) => { stopPolling(); pollIdx.current = 0; const tick = async () => { try { const r = await fetch(`/api/generate/${run_id}/poll?since=${pollIdx.current}`); if (!r.ok) { stopPolling(); setGenError(`Poll error ${r.status}`); setGenerating(false); return; } const { events, done, next } = await r.json(); pollIdx.current = next; events.forEach(processEvent); if (done) stopPolling(); } catch (err) { // network hiccup — keep polling } }; tick(); // fire immediately pollRef.current = setInterval(tick, 800); }; // Authoritative audio duration: load the TTS WAV in a hidden Audio element // and use its real file duration. Catches cases where the backend event // carried a wrong/missing duration. useEffect(() => { if (!audioUrl) return; const a = new Audio(); a.preload = 'metadata'; const onMeta = () => { if (Number.isFinite(a.duration) && a.duration > 0) setAudioSec(a.duration); }; a.addEventListener('loadedmetadata', onMeta); a.src = audioUrl; return () => { a.removeEventListener('loadedmetadata', onMeta); a.src = ''; }; }, [audioUrl]); const handleGenerate = async () => { if (generating) return; stopPolling(); finalUrlRef.current = null; hlsUrlRef.current = null; setGenerating(true); setHlsUrl(null); setVideoUrl(null); setGeneratedSecs(0); setFinalVideoUrl(null); setAudioUrl(null); setAudioSec(0); setRenderPct(0); setStatusMsg('Starting…'); setGenError(null); // Reset the streaming-TTS audio preview state — drop any leftover // buffered PCM and stop the current AudioContext so the next run // starts with a clean playback timeline. setAudioPreviewReady(false); audioPcmQueueRef.current = []; if (audioCtxRef.current) { try { audioCtxRef.current.close(); } catch {} audioCtxRef.current = null; } audioCursorRef.current = 0; setProgress(0); setIsPlaying(false); try { const fd = new FormData(); fd.append('script', script); // 'upload:' selects a file from the customAvatars/customVoices list. // The avatar_id form field stays a valid preset id for backend resolve. const isUploadAvatar = avatarId.startsWith('upload:'); const isUploadVoice = voiceId.startsWith('upload:'); fd.append('avatar_id', isUploadAvatar ? 'a01' : avatarId); fd.append('voice_id', isUploadVoice ? 'v01' : voiceId); if (isUploadAvatar) { const u = customAvatars.find(x => `upload:${x.id}` === avatarId); if (u) fd.append('ref_image', u.file, u.file.name); } if (isUploadVoice) { const u = customVoices.find(x => `upload:${x.id}` === voiceId); if (u) { fd.append('ref_audio', u.file, u.file.name); if (u.transcript) fd.append('ref_transcript', u.transcript); } } // Locked / boson-fork tier renders at half resolution to keep TTFV low. if (UPLOAD_LOCKED) fd.append('low_res', 'true'); const res = await fetch('/api/generate', { method: 'POST', body: fd }); if (!res.ok) throw new Error(`HTTP ${res.status}`); const { run_id } = await res.json(); runIdRef.current = run_id; startPolling(run_id); } catch (err) { setGenError(err.message); setGenerating(false); } }; const handleStop = async () => { stopPolling(); setGenerating(false); const rid = runIdRef.current; if (rid) { runIdRef.current = null; try { await fetch(`/api/generate/${rid}/stop`, { method: 'POST' }); } catch {} } }; const handleNew = async () => { await handleStop(); finalUrlRef.current = null; setHlsUrlBoth(null); setVideoUrl(null); setFinalVideoUrl(null); setAudioUrl(null); setRenderPct(0); setStatusMsg(''); setGenError(null); setProgress(0); setIsPlaying(false); setRenderedTake(0); setGeneratedSecs(0); // Reset user selections to defaults, but KEEP customAvatar / customVoice // around so the uploaded files stay in their tabs as selectable cards. setAvatarId('a01'); setVoiceId('v01'); setScript(SAMPLE_SCRIPT); }; // sync accent color from tweaks useEffect(() => { document.documentElement.style.setProperty('--accent', tweaks.accent); }, [tweaks.accent]); const previewLine = useMemo(() => { // pull a short snippet from script for caption const s = (script || '').split(/[.\n]/).map(x => x.trim()).filter(Boolean); return s[Math.min(1, s.length - 1)] || s[0] || ''; }, [script]); return (
`upload:${u.id}` === avatarId)?.file || null) : null} previewExpanded={previewExpanded} setPreviewExpanded={setPreviewExpanded} showModelChip={UPLOAD_LOCKED} audioPreviewReady={audioPreviewReady} audioPreviewActive={!!audioCtxRef.current} startAudioPreview={startAudioPreview} onStop={handleStop} onVideoEnded={handleVideoEnded} />
); } /* ---------- Top bar ---------- */ function TopBar({ videoUrl, generating }) { return (
{videoUrl ? Publish : }
); } function Spinner({ size = 12 }) { const r = size * 0.375; return ; } /* ---------- Left panel ---------- */ function LeftPanel(props) { const { tab, setTab, model, renderedTake, setRenderedTake } = props; const [historyOpen, setHistoryOpen] = useState(false); const popRef = useRef(null); useEffect(() => { if (!historyOpen) return; const onDown = e => { if (popRef.current && !popRef.current.contains(e.target)) setHistoryOpen(false); }; window.addEventListener('mousedown', onDown); return () => window.removeEventListener('mousedown', onDown); }, [historyOpen]); return (
{historyOpen && (
Takes 3 RENDERS
{[1,2,3].map(i => ( ))}
)}
{tab === 'script' && } {tab === 'avatar' && } {tab === 'voice' && } {tab === 'conversation' && }
{/* Model picker shown only on the boson-locked build; all-in-one VIP UI hides it (the user already knows what model they're on). */} {props.uploadLocked ? (
Model
) : (
/* keep grid column placeholder */ )}
); } /* ---------- Avatar tab ---------- */ /* One uploaded-image card. Memoised blob URL keyed on file identity so we don't churn URL.createObjectURL on every parent re-render. */ function UploadedAvatarCard({ id, file, selected, onSelect, onRemove }) { const url = useMemo(() => URL.createObjectURL(file), [file]); useEffect(() => () => URL.revokeObjectURL(url), [url]); return ( ); } function AvatarTab({ avatarId, setAvatarId, customAvatars, addCustomAvatar, removeCustomAvatar, uploadLocked }) { const [query, setQuery] = useState(''); const list = AVATARS.filter(a => !query || a.name.toLowerCase().includes(query.toLowerCase())); return (

Choose an avatar

{list.length} presets {customAvatars.length > 0 && ` · ${customAvatars.length} uploaded`} {!uploadLocked && customAvatars.length === 0 && ' · or upload your own'}
setQuery(e.target.value)} />
{/* Upload card — hidden entirely on the boson-locked build. On the full build it's ALWAYS rendered so the user can keep uploading additional images; each new upload appends to the stack. */} {!uploadLocked && ( )} {/* Uploaded image cards — one per file, persist across "New" clicks. */} {customAvatars.map(u => ( setAvatarId(`upload:${u.id}`)} onRemove={() => removeCustomAvatar(u.id)} /> ))} {list.map(a => ( ))}
); } /* ---------- Voice tab ---------- */ /* Combined card: left half = file Upload, right half = mic Record. Both branches end at addCustomVoice → Gemini transcribe → entry appears in the voice stack. Browser MediaRecorder uses audio/webm (Chrome / Firefox / Android) or audio/mp4 (Safari); the backend converts to WAV before passing to TTS (browser MediaRecorder can't produce WAV directly). */ function UploadOrRecordCard({ addCustomVoice }) { return (
); } /* Mic recorder — right half of the combined card. State lives here so record/stop doesn't re-render the Upload side. */ function RecorderHalf({ addCustomVoice }) { const [recording, setRecording] = useState(false); const [elapsed, setElapsed] = useState(0); const [err, setErr] = useState(null); const recRef = useRef(null); const chunksRef = useRef([]); const startTsRef = useRef(0); const timerRef = useRef(null); const pickMime = () => { if (typeof MediaRecorder === 'undefined') return ''; for (const m of ['audio/webm;codecs=opus', 'audio/webm', 'audio/mp4', 'audio/ogg']) { try { if (MediaRecorder.isTypeSupported(m)) return m; } catch {} } return ''; // browser picks default }; const start = async () => { setErr(null); try { const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); const mime = pickMime(); const opts = mime ? { mimeType: mime } : undefined; const rec = new MediaRecorder(stream, opts); chunksRef.current = []; rec.ondataavailable = e => { if (e.data && e.data.size) chunksRef.current.push(e.data); }; rec.onstop = () => { const blob = new Blob(chunksRef.current, { type: rec.mimeType || mime || 'audio/webm' }); const ext = (blob.type.includes('mp4') ? 'm4a' : blob.type.includes('ogg') ? 'ogg' : 'webm'); const file = new File([blob], `recording-${Date.now()}.${ext}`, { type: blob.type }); stream.getTracks().forEach(t => t.stop()); addCustomVoice(file); }; rec.start(); recRef.current = rec; startTsRef.current = Date.now(); setElapsed(0); setRecording(true); timerRef.current = setInterval(() => { setElapsed(Math.floor((Date.now() - startTsRef.current) / 1000)); }, 250); } catch (e) { setErr(e.message || 'mic permission denied'); } }; const stop = () => { if (timerRef.current) { clearInterval(timerRef.current); timerRef.current = null; } setRecording(false); if (recRef.current && recRef.current.state !== 'inactive') { try { recRef.current.stop(); } catch {} } recRef.current = null; }; // Cleanup on unmount useEffect(() => () => { if (timerRef.current) clearInterval(timerRef.current); if (recRef.current && recRef.current.state !== 'inactive') { try { recRef.current.stop(); } catch {} } }, []); const mm = String(Math.floor(elapsed / 60)).padStart(2, '0'); const ss = String(elapsed % 60).padStart(2, '0'); return (
{recording ? : }
{recording ? `Recording… ${mm}:${ss}` : 'Record'}
{recording ? 'Tap to stop' : (err ? `Error: ${err}` : 'Use your mic')}
); } function VoiceTab({ voiceId, setVoiceId, customVoices, addCustomVoice, removeCustomVoice, playingVoice, setPlayingVoice, uploadLocked }) { return (

Choose a voice

6 presets{customVoices.length > 0 && ` · ${customVoices.length} uploaded`}
{/* Upload card — hidden on boson-locked, always visible otherwise. Each new upload appends a new card to the stack below. */} {/* Combined Upload + Record card. Two columns share a single voice- card surface; hidden entirely on the boson-locked build. Both actions push the resulting File through addCustomVoice → Gemini transcribe → appears as a new entry in the stack below. */} {!uploadLocked && ( )} {/* Uploaded clip cards — one per file, persist across "New". */} {customVoices.map(u => { const isSelected = voiceId === `upload:${u.id}`; return (
setVoiceId(`upload:${u.id}`)} title={u.file.name} style={{cursor:'pointer'}} >
{u.file.name}
{(u.file.size/1024).toFixed(0)} KB · {u.transcribing ? transcribing… : u.transcript ? "{u.transcript}" : no transcript} ·
); })} {VOICES.map(v => { const playing = playingVoice === v.id; return (
setVoiceId(v.id)} >
{v.name}
{v.tag} {v.desc} · {v.dur}
); })}
); } function Waveform({ count = 24, seed = 'x' }) { // deterministic pseudo-random based on seed const heights = useMemo(() => { let s = 0; for (const c of seed) s = (s * 31 + c.charCodeAt(0)) >>> 0; return Array.from({length: count}, (_, i) => { s = (s * 1103515245 + 12345) >>> 0; const r = (s % 1000) / 1000; // shape a peak in the middle const env = 0.5 + 0.5 * Math.sin((i / count) * Math.PI); return Math.max(3, r * 18 * env + 3); }); }, [count, seed]); return (
{heights.map((h, i) => ) }
); } function SliderRow({ label, value }) { const [v, setV] = useState(value); return (
{label} setV(+e.target.value)} style={{ width:'100%', accentColor:'var(--ink)' }}/> {v}
); } /* ---------- Conversation tab (coming soon) ---------- */ function ConversationTab() { return (
Coming soon

Two-way conversation

Have the avatar respond in real time — connect a knowledge base, set a persona, and let viewers talk back. Currently in private beta.

Hey — can you walk me through pricing?
Sure. We have three tiers…
); } /* ---------- Script tab ---------- */ function ScriptTab({ script, setScript, language, setLanguage }) { const SCRIPT_CHAR_LIMIT = 500; const chars = (script || '').length; const words = (script || '').trim().split(/\s+/).filter(Boolean).length; const seconds = Math.max(0, Math.round(words / 2.7)); return (

Write the script

{words}w · ~{seconds}s