/* ============================================================================ Vocal · Voice Studio — studio.vocal.ch Console dédiée à la création, l'enregistrement, la génération et le clonage de voix synthétiques pour les lignes téléphoniques et les bots vocaux Vocal. Backend partagé : api.vocal.ch (worker ch-vocal-api). ============================================================================ */ const { useState, useEffect, useRef, useCallback, useMemo, createContext, useContext, Fragment } = React; const CONFIG = { API_URL: 'https://api.vocal.ch', MY_URL: 'https://my.vocal.ch', BOTS_URL: 'https://bots.vocal.ch', DEV_URL: 'https://developers.vocal.ch', }; // ==================== CROSS-SUBDOMAIN SSO ==================== // Si on arrive depuis my.vocal.ch ou bots.vocal.ch avec un token, on l'adopte. (() => { try { const params = new URLSearchParams(window.location.search); const tok = params.get('impersonate_token') || params.get('token'); if (tok) { localStorage.setItem('vocal_my_token', tok); const userB64 = params.get('impersonate_user') || params.get('user'); if (userB64) { try { const u = JSON.parse(decodeURIComponent(escape(atob(userB64)))); localStorage.setItem('vocal_my_user', JSON.stringify(u)); } catch (e) {} } sessionStorage.setItem('vocal_my_impersonating', '1'); const clean = window.location.pathname + window.location.hash; window.history.replaceState(null, '', clean); } } catch (e) {} })(); // ==================== CONSTANTS ==================== const LANGS = [ { id: 'fr', label: 'Français' }, { id: 'de', label: 'Deutsch' }, { id: 'en', label: 'English' }, { id: 'it', label: 'Italiano' }, ]; const DEFAULT_OPENAI_VOICES = [ { id: 'alloy', label: 'Alloy', gender: 'neutral', tone: 'neutre & polyvalent' }, { id: 'echo', label: 'Echo', gender: 'male', tone: 'masculin chaleureux' }, { id: 'fable', label: 'Fable', gender: 'neutral', tone: 'narratif' }, { id: 'onyx', label: 'Onyx', gender: 'male', tone: 'masculin grave' }, { id: 'nova', label: 'Nova', gender: 'female', tone: 'féminin énergique' }, { id: 'shimmer', label: 'Shimmer', gender: 'female', tone: 'féminin doux' }, ]; const PRESETS = [ { id: 'accueil', iconKey: 'Hand', label: 'Accueil', text: "Bonjour et bienvenue chez {ENTREPRISE}. Pour rejoindre les ventes, dites « ventes ». Pour le support, dites « support ». Pour parler à un conseiller, dites « conseiller »." }, { id: 'vacances', iconKey: 'Sun', label: 'Vacances', text: "Notre bureau est fermé du {DATE_DEBUT} au {DATE_FIN}. Laissez votre nom, numéro et message après le bip, nous vous rappellerons dès notre retour." }, { id: 'horaires', iconKey: 'Clock', label: 'Hors horaires', text: "Bonjour, nos bureaux sont actuellement fermés. Nos horaires sont du lundi au vendredi de 8h à 18h. Vous pouvez laisser un message ou rappeler ultérieurement." }, { id: 'transfert', iconKey: 'ChevronRight', label: 'Transfert', text: "Merci de patienter, nous vous mettons en relation avec un conseiller." }, { id: 'voicemail', iconKey: 'Mail', label: 'Voicemail', text: "Vous êtes bien sur le répondeur de {ENTREPRISE}. Laissez votre message après le bip et nous vous rappellerons dans les meilleurs délais." }, { id: 'attente', iconKey: 'Clock', label: 'Attente', text: "Tous nos conseillers sont actuellement occupés. Votre appel est important, merci de patienter quelques instants." }, { id: 'remerciement', iconKey: 'Heart', label: 'Merci', text: "Merci pour votre appel. À très bientôt chez {ENTREPRISE}." }, { id: 'evenement', iconKey: 'Confetti', label: 'Événement', text: "Pour notre soirée portes ouvertes du {DATE}, n'hésitez pas à venir nous rendre visite, nous vous accueillerons avec plaisir." }, ]; // Démo marketplace voix premium (en attendant /my/voice-marketplace). const MARKETPLACE_VOICES = [ { id: 'mkt_so', name: 'Sophie · Romande', creator: 'Studio Léman', desc: 'Voix féminine douce, accent romand, médical/beauté.', tags: ['fr', 'féminin', 'doux'], gender: 'female', price_chf: 19, samples: 2400 }, { id: 'mkt_ma', name: 'Markus · Bern', creator: 'Voiceworks GmbH', desc: 'Voix masculine grave, Schwizerdütsch berniñois.', tags: ['de', 'masculin', 'grave'], gender: 'male', price_chf: 24, samples: 1700 }, { id: 'mkt_lu', name: 'Luca · Ticino', creator: 'Studio Tre', desc: 'Voix masculine chaleureuse, italien tessinois.', tags: ['it', 'masculin', 'chaud'], gender: 'male', price_chf: 22, samples: 980 }, { id: 'mkt_em', name: 'Emma · Geneva', creator: 'Lac Voice', desc: 'Voix féminine premium, accent genevois pro.', tags: ['fr', 'féminin', 'premium'], gender: 'female', price_chf: 29, samples: 3200 }, { id: 'mkt_ha', name: 'Hans · Zürich', creator: 'Voiceworks GmbH', desc: 'Voix masculine corporate, Schwizerdütsch zurichois.', tags: ['de', 'masculin', 'corporate'], gender: 'male', price_chf: 26, samples: 2110 }, { id: 'mkt_le', name: 'Léa · Vaud', creator: 'Vocal Originals', desc: 'Voix féminine jeune dynamique, e-commerce romand.', tags: ['fr', 'féminin', 'jeune'], gender: 'female', price_chf: 21, samples: 1450 }, { id: 'mkt_an', name: 'Antonio · Ticino', creator: 'Studio Tre', desc: 'Voix masculine narrative, italien standard.', tags: ['it', 'masculin', 'narratif'], gender: 'male', price_chf: 23, samples: 720 }, { id: 'mkt_ka', name: 'Karin · Basel', creator: 'Voiceworks GmbH', desc: 'Voix féminine pro, Hochdeutsch CH.', tags: ['de', 'féminin', 'pro'], gender: 'female', price_chf: 27, samples: 1890 }, ]; // Scripts de référence pour le recorder studio (entraînement clone). const RECORDER_SCRIPTS = { fr: [ "Bonjour, vous êtes bien chez Vocal. Comment puis-je vous aider aujourd'hui ?", "Notre cabinet est ouvert du lundi au vendredi, de huit heures à dix-huit heures.", "Pour prendre rendez-vous, je vous propose le mardi quinze octobre à quatorze heures trente.", "Pouvez-vous me donner votre nom, votre numéro de téléphone et la raison de votre appel s'il vous plaît ?", "Merci beaucoup pour votre appel. Je vous souhaite une excellente journée.", "Un, deux, trois, quatre, cinq, six, sept, huit, neuf, dix.", "Le sept janvier deux mille vingt-six à quinze heures quarante-cinq précises.", "L'adresse est : avenue de Mont-Blanc, vingt-quatre, à Genève, mille deux cent un.", ], de: [ "Guten Tag, hier ist Vocal. Wie kann ich Ihnen heute helfen?", "Unser Büro ist von Montag bis Freitag, von acht bis achtzehn Uhr geöffnet.", "Ich schlage Ihnen einen Termin am Dienstag, dem fünfzehnten Oktober um vierzehn Uhr dreißig vor.", "Eins, zwei, drei, vier, fünf, sechs, sieben, acht, neun, zehn.", "Vielen Dank für Ihren Anruf. Ich wünsche Ihnen einen schönen Tag.", ], en: [ "Hello, you've reached Vocal. How may I help you today?", "Our office is open Monday to Friday, from eight a.m. to six p.m.", "I'd like to suggest Tuesday October fifteenth at two thirty p.m. for your appointment.", "One, two, three, four, five, six, seven, eight, nine, ten.", "Thank you very much for your call. Have a great day.", ], it: [ "Buongiorno, qui Vocal. Come posso aiutarla oggi?", "Il nostro ufficio è aperto dal lunedì al venerdì, dalle otto alle diciotto.", "Le propongo un appuntamento martedì quindici ottobre alle quattordici e trenta.", "Uno, due, tre, quattro, cinque, sei, sette, otto, nove, dieci.", "Grazie mille per la sua chiamata. Le auguro una buona giornata.", ], }; // Démo dictionnaire de prononciation (en attendant l'endpoint persistant). const DEFAULT_PRONUNCIATIONS = [ { term: 'Vocal', repl: 'vauKal', lang: 'fr', note: 'Marque' }, { term: 'Swisscom', repl: 'swisskom', lang: 'fr', note: 'Opérateur' }, { term: 'CHF', repl: 'francs suisses', lang: 'fr', note: 'Devise' }, { term: 'iOS', repl: 'aïoss', lang: 'fr', note: 'Plateforme' }, { term: 'API', repl: 'a-pi-i', lang: 'fr', note: 'Sigle technique' }, ]; // ==================== FORMATTERS ==================== function fmtDate(d) { if (!d) return '-'; return new Date(d).toLocaleDateString('fr-CH', { day: '2-digit', month: '2-digit', year: 'numeric' }); } function fmtDateTime(d) { if (!d) return '-'; const x = new Date(d); return `${String(x.getDate()).padStart(2,'0')}/${String(x.getMonth()+1).padStart(2,'0')}/${x.getFullYear()} ${String(x.getHours()).padStart(2,'0')}:${String(x.getMinutes()).padStart(2,'0')}`; } function fmtCurrency(amount, currency = 'CHF') { if (amount === null || amount === undefined || Number.isNaN(amount)) return '-'; return `${Number(amount).toFixed(2)} ${currency}`; } function fmtBytes(b) { if (!b) return '-'; if (b < 1024) return `${b} B`; if (b < 1024 * 1024) return `${(b/1024).toFixed(1)} KB`; return `${(b/1024/1024).toFixed(2)} MB`; } function fmtMs(ms) { const s = Math.floor(ms / 1000); const mm = Math.floor(s / 60); const ss = s % 60; return `${String(mm).padStart(2, '0')}:${String(ss).padStart(2, '0')}`; } function fmtRelative(d) { if (!d) return '-'; const diff = (Date.now() - new Date(d).getTime()) / 1000; if (diff < 60) return 'à l\'instant'; if (diff < 3600) return `il y a ${Math.floor(diff / 60)} min`; if (diff < 86400) return `il y a ${Math.floor(diff / 3600)} h`; if (diff < 604800) return `il y a ${Math.floor(diff / 86400)} j`; return fmtDate(d); } // ==================== ICONS ==================== const Icon = (path, viewBox = '0 0 24 24') => ({ className = 'w-5 h-5' }) => ( {path} ); const Icons = { Mic: Icon(<>), MicOff: Icon(<>), Sparkles: Icon(), Settings: Icon(<>), Library: Icon(), Beaker: Icon(), Store: Icon(), Book: Icon(), Plug: Icon(), Coin: Icon(<>), Play: Icon(<>), Stop: Icon(), Pause: Icon(), Refresh: Icon(), Plus: Icon(), Trash: Icon(), Copy: Icon(<>), Download: Icon(), Upload: Icon(), Search: Icon(), Menu: Icon(), LogOut: Icon(), Check: Icon(), X: Icon(), External: Icon(), Wave: Icon(), Lightning: Icon(), Robot: Icon(), Phone: Icon(), ChevronLeft: Icon(), ChevronRight: Icon(), Heart: Icon(), Star: Icon(), Eye: Icon(<>), Headset: Icon(), Bolt: Icon(), Edit: Icon(), Cart: Icon(), Hand: Icon(), Sun: Icon(<>), Clock: Icon(), Mail: Icon(<>), Confetti: Icon(), Sliders: Icon(), Users: Icon(), }; // ==================== API ==================== const api = { token: null, async req(path, options = {}) { const headers = { 'Content-Type': 'application/json', ...options.headers }; if (this.token) headers['Authorization'] = `Bearer ${this.token}`; try { const resp = await fetch(`${CONFIG.API_URL}${path}`, { ...options, headers }); const data = await resp.json().catch(() => ({})); if (!resp.ok && !data.error) data.error = `HTTP ${resp.status}`; data._status = resp.status; return data; } catch (e) { return { error: 'Erreur réseau', _status: 0 }; } }, get(path) { return this.req(path); }, post(path, body) { return this.req(path, { method: 'POST', body: JSON.stringify(body || {}) }); }, put(path, body) { return this.req(path, { method: 'PUT', body: JSON.stringify(body || {}) }); }, del(path) { return this.req(path, { method: 'DELETE' }); }, // Upload binaire (recorder → R2). Endpoint à brancher : POST /my/voice-clones/upload-sample async uploadBlob(path, blob, filename) { const headers = {}; if (this.token) headers['Authorization'] = `Bearer ${this.token}`; const fd = new FormData(); fd.append('file', blob, filename || 'recording.webm'); try { const resp = await fetch(`${CONFIG.API_URL}${path}`, { method: 'POST', headers, body: fd }); const data = await resp.json().catch(() => ({})); if (!resp.ok && !data.error) data.error = `HTTP ${resp.status}`; return data; } catch (e) { return { error: 'Erreur réseau' }; } }, }; // ==================== NOTIFICATIONS ==================== const useNotifications = () => { const show = useCallback((message, type = 'info') => { const el = document.createElement('div'); el.style.cssText = 'position:fixed;bottom:1.5rem;right:1.5rem;z-index:9999;padding:0.85rem 1.2rem;border-radius:12px;font-size:0.85rem;font-weight:600;color:#fff;box-shadow:0 12px 32px rgba(15,23,42,0.18);max-width:360px;font-family:Plus Jakarta Sans,sans-serif;animation:fadeIn 0.2s ease;'; const colors = { success: '#16a34a', error: '#dc2626', info: '#6366f1', warning: '#ea580c' }; el.style.background = colors[type] || colors.info; el.textContent = message; document.body.appendChild(el); setTimeout(() => { el.style.opacity = '0'; el.style.transform = 'translateY(8px)'; el.style.transition = 'all 0.25s'; setTimeout(() => el.remove(), 280); }, 3500); }, []); return useMemo(() => ({ success: (m) => show(m, 'success'), error: (m) => show(m, 'error'), info: (m) => show(m, 'info'), warning: (m) => show(m, 'warning'), }), [show]); }; // ==================== ROUTING ==================== const VIEWS = ['composer', 'library', 'recorder', 'voices', 'abtest', 'marketplace', 'pronunciation', 'wiring', 'costs', 'settings']; function parseHash() { const h = (window.location.hash || '').replace('#', ''); return { view: VIEWS.includes(h) ? h : 'composer' }; } // ==================== CONTEXT ==================== const AppContext = createContext(); const useApp = () => useContext(AppContext); const AppProvider = ({ children }) => { const [user, setUser] = useState(() => { const saved = localStorage.getItem('vocal_my_user'); const token = localStorage.getItem('vocal_my_token'); if (saved && token) { api.token = token; try { return { ...JSON.parse(saved), token }; } catch { return null; } } return null; }); const [route, setRoute] = useState(parseHash); const [sidebarOpen, setSidebarOpen] = useState(false); const notify = useNotifications(); useEffect(() => { const onHash = () => setRoute(parseHash()); window.addEventListener('hashchange', onHash); return () => window.removeEventListener('hashchange', onHash); }, []); const navigate = useCallback((view) => { setRoute({ view }); setSidebarOpen(false); try { window.history.pushState(null, '', `#${view}`); } catch (e) {} }, []); const login = useCallback((userData, token) => { api.token = token; setUser({ ...userData, token }); localStorage.setItem('vocal_my_user', JSON.stringify(userData)); localStorage.setItem('vocal_my_token', token); notify.success('Connexion réussie'); }, [notify]); const logout = useCallback(() => { api.post('/auth/logout').catch(() => {}); api.token = null; setUser(null); localStorage.removeItem('vocal_my_user'); localStorage.removeItem('vocal_my_token'); notify.info('Déconnexion réussie'); }, [notify]); const value = useMemo(() => ({ user, setUser, route, navigate, login, logout, sidebarOpen, setSidebarOpen, notify, }), [user, route, navigate, login, logout, sidebarOpen, notify]); return {children}; }; // ==================== LOGIN ==================== const LoginScreen = () => { const { login } = useApp(); const [email, setEmail] = useState(''); const [code, setCode] = useState(''); const [step, setStep] = useState('email'); const [loading, setLoading] = useState(false); const [error, setError] = useState(''); useEffect(() => { const params = new URLSearchParams(window.location.search); const magicEmail = params.get('email'); const magicCode = params.get('code'); if (magicEmail && magicCode) { window.history.replaceState({}, '', window.location.pathname); setLoading(true); fetch(`${CONFIG.API_URL}/auth/verify-code`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email: magicEmail, code: magicCode }), }).then(r => r.json()).then(data => { if (data.success && data.token) login(data.user || { email: magicEmail }, data.token); else { setEmail(magicEmail); setStep('code'); setError(data.error || 'Lien expiré'); } }).catch(() => { setEmail(magicEmail); setStep('code'); setError('Erreur réseau'); }) .finally(() => setLoading(false)); } }, []); const handleSendCode = async (e) => { e.preventDefault(); if (!email) return; setLoading(true); setError(''); try { const r = await fetch(`${CONFIG.API_URL}/auth/request-code`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email }), }).then(r => r.json()); if (r.success) setStep('code'); else setError(r.error || 'Erreur'); } catch (e) { setError('Erreur réseau'); } finally { setLoading(false); } }; const handleVerify = async (e) => { e.preventDefault(); if (!code) return; setLoading(true); setError(''); try { const r = await fetch(`${CONFIG.API_URL}/auth/verify-code`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email, code }), }).then(r => r.json()); if (r.success && r.token) login(r.user || { email }, r.token); else setError(r.error || 'Code invalide'); } catch (e) { setError('Erreur réseau'); } finally { setLoading(false); } }; return (
Vocal Voice Studio

{step === 'email' ? 'Créez vos voix synthétiques' : 'Vérifiez votre email'}

{step === 'email' ? 'Recevez un code de connexion sécurisé à usage unique. Aucun mot de passe à gérer.' : `Un code à 6 chiffres a été envoyé à ${email}.`}

{error &&
{error}
} {step === 'email' ? (
setEmail(e.target.value)} placeholder="vous@entreprise.ch" required autoFocus />
Vous avez déjà un compte sur my.vocal.ch ? Utilisez la même adresse.
) : (
setCode(e.target.value.replace(/\D/g, ''))} placeholder="123456" required autoFocus style={{ letterSpacing: '0.6em', textAlign: 'center', fontSize: '1.25rem', fontWeight: 700 }} />
)}
); }; // ==================== SHARED COMPONENTS ==================== const PageHeader = ({ title, subtitle, actions }) => { const { setSidebarOpen } = useApp(); return (

{title}

{subtitle &&

{subtitle}

}
{actions &&
{actions}
}
); }; const SoonBanner = ({ endpoint, children }) => (
Aperçu produit. {children || 'Cette section affiche l\'UX cible. '} {endpoint && <>Pour activer le mode live, branchez l'endpoint {endpoint} côté ch-vocal-api.}
); const EmptyState = ({ icon: I = Icons.Sparkles, title, desc, action }) => (

{title}

{desc &&

{desc}

} {action}
); const Spinner = ({ size = 24 }) => ( ); const VoiceAvatar = ({ name, gender }) => { const initials = (name || '?').split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase(); const cls = gender === 'female' ? 'female' : gender === 'male' ? 'male' : 'neutral'; return
{initials}
; }; const copyToClipboard = (text, notify) => { if (navigator.clipboard) { navigator.clipboard.writeText(text).then( () => notify?.success?.('Copié dans le presse-papier'), () => notify?.error?.('Impossible de copier') ); } else { notify?.error?.('Presse-papier non disponible'); } }; // ==================== SIDEBAR ==================== const NAV = [ { id: 'composer', label: 'Composer (TTS)', icon: Icons.Sparkles, section: 'create' }, { id: 'recorder', label: 'Recorder studio', icon: Icons.Mic, section: 'create' }, { id: 'library', label: 'Bibliothèque audio', icon: Icons.Library, section: 'create' }, { id: 'voices', label: 'Mes voix (clones)', icon: Icons.Heart, section: 'voices' }, { id: 'marketplace', label: 'Marketplace voix', icon: Icons.Store, section: 'voices' }, { id: 'abtest', label: 'A/B compare', icon: Icons.Beaker, section: 'voices' }, { id: 'pronunciation', label: 'Prononciation', icon: Icons.Book, section: 'fine' }, { id: 'wiring', label: 'Branchements', icon: Icons.Plug, section: 'fine' }, { id: 'costs', label: 'Coûts & quotas', icon: Icons.Coin, section: 'fine' }, { id: 'settings', label: 'Réglages', icon: Icons.Settings, section: 'compte' }, ]; const NAV_SECTIONS = { create: 'CRÉATION', voices: 'VOIX', fine: 'AFFINAGE', compte: 'COMPTE', }; const Sidebar = () => { const { user, route, navigate, logout, sidebarOpen, setSidebarOpen } = useApp(); const grouped = Object.entries(NAV_SECTIONS).map(([key, label]) => ({ label, items: NAV.filter(i => i.section === key), })); return ( <> {sidebarOpen &&
setSidebarOpen(false)} />} ); }; /* ============================================================================ VIEW : COMPOSER (TTS hero workflow) ============================================================================ */ const ComposerView = () => { const { notify } = useApp(); const [text, setText] = useState(''); const [label, setLabel] = useState(''); const [provider, setProvider] = useState('openai'); const [model, setModel] = useState('tts-1'); const [voice, setVoice] = useState('alloy'); const [voiceCloneId, setVoiceCloneId] = useState(''); const [language, setLanguage] = useState('fr'); const [format, setFormat] = useState('mp3'); const [speed, setSpeed] = useState(1.0); const [voicesData, setVoicesData] = useState({ openai: { voices: [], models: [] }, elevenlabs: { available: false }, custom: [] }); const [generating, setGenerating] = useState(false); const [lastGenerated, setLastGenerated] = useState(null); useEffect(() => { api.get('/my/tts/voices').then(r => { if (r && !r.error) setVoicesData(r); }); }, []); const charCount = text.length; const charClass = charCount > 3800 ? 'danger' : charCount > 3000 ? 'warn' : ''; const generate = async () => { const txt = text.trim(); if (!txt) return notify.error('Texte requis'); if (txt.length > 4000) return notify.error('Texte trop long (max 4000 caractères)'); setGenerating(true); try { const payload = { text: txt, label: label.trim() || txt.slice(0, 60), provider, model, language, format, speed: parseFloat(speed) || 1.0, }; if (voiceCloneId) payload.voice_clone_id = parseInt(voiceCloneId); else payload.voice = voice; const r = await api.post('/my/tts', payload); if (r?.error) return notify.error(r.error + (r.detail ? ` — ${r.detail}` : '')); notify.success('Audio généré'); setLastGenerated(r); } catch (e) { notify.error('Erreur : ' + e.message); } finally { setGenerating(false); } }; const openaiVoices = (voicesData.openai?.voices || []).length ? voicesData.openai.voices : DEFAULT_OPENAI_VOICES.map(v => v.id); const openaiModels = (voicesData.openai?.models || []).length ? voicesData.openai.models : ['tts-1', 'tts-1-hd']; return ( <>