Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" /> | |
| <meta name="apple-mobile-web-app-capable" content="yes" /> | |
| <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> | |
| <meta name="apple-mobile-web-app-title" content="DE Assistant" /> | |
| <meta name="theme-color" content="#1a1a2e" /> | |
| <link rel="manifest" href="/manifest.json" /> | |
| <title>DE Knowledge Assistant</title> | |
| <style> | |
| *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} | |
| :root{ | |
| --bg:#0d0d1a; --surface:#1a1a2e; --surface2:#16213e; | |
| --accent:#e94560; --accent2:#0f3460; --user-bg:#0f3460; --bot-bg:#1a1a2e; | |
| --text:#e0e0e0; --text-dim:#888; --border:#2a2a4a; | |
| --green:#00c896; --red:#ff4655; | |
| --radius:18px; --safe-top:env(safe-area-inset-top,0px); | |
| --safe-bot:env(safe-area-inset-bottom,0px); | |
| } | |
| html,body{height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--text)} | |
| #app{display:flex;flex-direction:column;height:100dvh;padding-top:var(--safe-top)} | |
| header{display:flex;align-items:center;gap:12px;padding:14px 18px;background:var(--surface);border-bottom:1px solid var(--border);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)} | |
| .logo{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:grid;place-items:center;font-size:18px;flex-shrink:0} | |
| .header-text h1{font-size:15px;font-weight:700} | |
| .header-text p{font-size:11px;color:var(--text-dim)} | |
| #status-dot{width:8px;height:8px;border-radius:50%;background:#555;margin-left:auto;flex-shrink:0;transition:background .3s} | |
| #status-dot.ready{background:var(--green);box-shadow:0 0 6px var(--green)} | |
| #status-dot.loading{background:#f5a623;animation:pulse 1s infinite} | |
| #status-dot.error{background:var(--red);box-shadow:0 0 6px var(--red)} | |
| @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}} | |
| #messages{flex:1;overflow-y:auto;padding:16px 14px;scroll-behavior:smooth} | |
| #messages::-webkit-scrollbar{width:4px} | |
| #messages::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px} | |
| .msg{display:flex;gap:10px;margin-bottom:16px;animation:fadeIn .25s ease} | |
| @keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} | |
| .msg.user{flex-direction:row-reverse} | |
| .avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:14px;flex-shrink:0;align-self:flex-end} | |
| .msg.user .avatar{background:var(--accent)} | |
| .msg.bot .avatar{background:var(--accent2)} | |
| .bubble{max-width:min(75vw,520px);padding:12px 16px;border-radius:var(--radius);line-height:1.6;font-size:14px;word-wrap:break-word} | |
| .msg.user .bubble{background:var(--user-bg);border-bottom-right-radius:4px} | |
| .msg.bot .bubble{background:var(--bot-bg);border:1px solid var(--border);border-bottom-left-radius:4px} | |
| .bubble code{background:rgba(255,255,255,.08);padding:2px 6px;border-radius:4px;font-family:"SF Mono",Menlo,monospace;font-size:12px} | |
| .bubble pre{background:#0a0a1a;border:1px solid var(--border);border-radius:10px;padding:12px;overflow-x:auto;margin:8px 0} | |
| .bubble pre code{background:none;padding:0;font-size:12px} | |
| .bubble strong{color:#fff} | |
| .bubble p{margin-bottom:8px} | |
| .bubble p:last-child{margin-bottom:0} | |
| .bubble ul{padding-left:18px} | |
| .bubble blockquote{border-left:3px solid var(--accent);padding-left:12px;color:var(--text-dim);margin:8px 0} | |
| .typing-dots span{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--text-dim);margin:0 2px;animation:bounce .9s infinite} | |
| .typing-dots span:nth-child(2){animation-delay:.15s} | |
| .typing-dots span:nth-child(3){animation-delay:.3s} | |
| @keyframes bounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-6px)}} | |
| #welcome{text-align:center;padding:40px 20px} | |
| #welcome .icon{font-size:52px;margin-bottom:12px} | |
| #welcome h2{font-size:20px;margin-bottom:8px} | |
| #welcome p{color:var(--text-dim);font-size:13px;max-width:280px;margin:0 auto 20px} | |
| .starters{display:flex;flex-direction:column;gap:8px;max-width:340px;margin:0 auto} | |
| .starter-btn{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:11px 16px;color:var(--text);font-size:13px;cursor:pointer;text-align:left;transition:border-color .2s,background .2s} | |
| .starter-btn:hover{border-color:var(--accent);background:var(--surface2)} | |
| #input-bar{display:flex;align-items:flex-end;gap:8px;padding:10px 14px calc(10px + var(--safe-bot));background:var(--surface);border-top:1px solid var(--border)} | |
| #msg-input{flex:1;background:var(--surface2);border:1px solid var(--border);border-radius:22px;padding:10px 16px;color:var(--text);font-size:15px;resize:none;min-height:44px;max-height:120px;line-height:1.4;outline:none;font-family:inherit;transition:border-color .2s} | |
| #msg-input:focus{border-color:var(--accent)} | |
| #msg-input::placeholder{color:var(--text-dim)} | |
| .icon-btn{width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;display:grid;place-items:center;font-size:18px;flex-shrink:0;transition:transform .15s,background .2s} | |
| .icon-btn:active{transform:scale(.9)} | |
| #send-btn{background:var(--accent)} | |
| #send-btn:disabled{background:#555;cursor:not-allowed} | |
| #voice-btn{background:var(--surface2);border:1px solid var(--border)} | |
| #voice-btn.recording{background:var(--accent);animation:ripple 1.2s ease-out infinite} | |
| @keyframes ripple{0%{box-shadow:0 0 0 0 rgba(233,69,96,.6)}70%{box-shadow:0 0 0 16px rgba(233,69,96,0)}100%{box-shadow:0 0 0 0 rgba(233,69,96,0)}} | |
| #voice-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.88);backdrop-filter:blur(10px);flex-direction:column;align-items:center;justify-content:center;gap:20px;z-index:100} | |
| #voice-overlay.active{display:flex} | |
| #voice-wave{font-size:64px;animation:pulse 1s infinite} | |
| #voice-status{color:#ddd;font-size:16px;max-width:300px;text-align:center;min-height:40px} | |
| #voice-timer{color:var(--text-dim);font-size:13px;font-variant-numeric:tabular-nums} | |
| #voice-stop{background:var(--accent);border:none;color:#fff;border-radius:50px;padding:12px 28px;font-size:15px;cursor:pointer;font-weight:600} | |
| #voice-cancel{background:transparent;border:1px solid var(--border);color:var(--text);border-radius:50px;padding:10px 24px;font-size:14px;cursor:pointer} | |
| #toast{position:fixed;bottom:calc(90px + var(--safe-bot));left:50%;transform:translateX(-50%) translateY(20px);background:#222;border:1px solid var(--border);border-radius:20px;padding:8px 18px;font-size:13px;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;max-width:90vw;text-align:center;z-index:50} | |
| #toast.show{opacity:1;transform:translateX(-50%) translateY(0)} | |
| </style> | |
| </head> | |
| <body> | |
| <div id="app"> | |
| <header> | |
| <div class="logo">🗄️</div> | |
| <div class="header-text"> | |
| <h1>DE Knowledge Assistant</h1> | |
| <p id="header-sub">Connecting…</p> | |
| </div> | |
| <div id="status-dot"></div> | |
| </header> | |
| <div id="messages"> | |
| <div id="welcome"> | |
| <div class="icon">⚡</div> | |
| <h2>Ask me anything about<br>Data Engineering</h2> | |
| <p>Powered by "Data Engineering Design Patterns" + Groq's ultra-fast inference</p> | |
| <div class="starters"> | |
| <button class="starter-btn" onclick="sendStarter(this)">What is the Medallion architecture and when should I use it?</button> | |
| <button class="starter-btn" onclick="sendStarter(this)">Show me a PySpark CDC (Change Data Capture) example</button> | |
| <button class="starter-btn" onclick="sendStarter(this)">Compare Lambda vs Kappa architecture</button> | |
| <button class="starter-btn" onclick="sendStarter(this)">How do I handle late-arriving data in streaming pipelines?</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="input-bar"> | |
| <button id="voice-btn" class="icon-btn" onclick="startVoice()" title="Voice input">🎤</button> | |
| <textarea id="msg-input" rows="1" placeholder="Ask a data engineering question…" | |
| onkeydown="handleKey(event)" oninput="autoResize(this)"></textarea> | |
| <button id="send-btn" class="icon-btn" onclick="sendMessage()" title="Send">➤</button> | |
| </div> | |
| </div> | |
| <div id="voice-overlay"> | |
| <div id="voice-wave">🎙️</div> | |
| <div id="voice-status">Recording…</div> | |
| <div id="voice-timer">0:00</div> | |
| <button id="voice-stop" onclick="stopVoice(true)">✓ Done — Transcribe</button> | |
| <button id="voice-cancel" onclick="stopVoice(false)">✕ Cancel</button> | |
| </div> | |
| <div id="toast"></div> | |
| <script> | |
| // ═══════════════════════════════════════════════════════════════════════════ | |
| // State & globals | |
| // ═══════════════════════════════════════════════════════════════════════════ | |
| const BASE_URL = window.location.origin; | |
| const state = { | |
| history: [], | |
| isLoading: false, | |
| mediaRecorder: null, | |
| audioChunks: [], | |
| recordStart: 0, | |
| timerInterval: null, | |
| synthesis: window.speechSynthesis || null, | |
| voiceInputUsed: false, | |
| }; | |
| // ═══════════════════════════════════════════════════════════════════════════ | |
| // DOM helpers | |
| // ═══════════════════════════════════════════════════════════════════════════ | |
| const $ = id => document.getElementById(id); | |
| const msgInput = $('msg-input'); | |
| const messages = $('messages'); | |
| const sendBtn = $('send-btn'); | |
| const voiceBtn = $('voice-btn'); | |
| const statusDot = $('status-dot'); | |
| const headerSub = $('header-sub'); | |
| // ═══════════════════════════════════════════════════════════════════════════ | |
| // Health check | |
| // ═══════════════════════════════════════════════════════════════════════════ | |
| async function checkHealth() { | |
| try { | |
| const r = await fetch(`${BASE_URL}/api/health`); | |
| const data = await r.json(); | |
| statusDot.className = data.groq_key_set ? 'ready' : 'error'; | |
| headerSub.textContent = data.groq_key_set | |
| ? `${data.vectorstore_docs.toLocaleString()} chunks · Groq` | |
| : '⚠️ GROQ_API_KEY missing — check Space secrets'; | |
| } catch { | |
| statusDot.className = 'loading'; | |
| headerSub.textContent = 'Server starting…'; | |
| setTimeout(checkHealth, 3000); | |
| } | |
| } | |
| checkHealth(); | |
| // ═══════════════════════════════════════════════════════════════════════════ | |
| // Markdown rendering (dependency-free) | |
| // ═══════════════════════════════════════════════════════════════════════════ | |
| function escHtml(s) { | |
| return s.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>'); | |
| } | |
| function renderMarkdown(text) { | |
| return text | |
| .replace(/```(\w*)\n?([\s\S]*?)```/g, (_,lang,code) => | |
| `<pre><code class="lang-${lang}">${escHtml(code.trim())}</code></pre>`) | |
| .replace(/`([^`]+)`/g, (_,c) => `<code>${escHtml(c)}</code>`) | |
| .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>') | |
| .replace(/\*(.+?)\*/g, '<em>$1</em>') | |
| .replace(/^### (.+)$/gm, '<p><strong>$1</strong></p>') | |
| .replace(/^## (.+)$/gm, '<p><strong>$1</strong></p>') | |
| .replace(/^[-•] (.+)$/gm, '<li>$1</li>') | |
| .replace(/(<li>[\s\S]+?<\/li>)/g, '<ul>$1</ul>') | |
| .replace(/^\d+\. (.+)$/gm, '<li>$1</li>') | |
| .replace(/^(💡.+)$/gm, '<blockquote>$1</blockquote>') | |
| .replace(/\n\n+/g, '</p><p>') | |
| .replace(/^(?!<)(.+)/gm, '$1') | |
| .trim(); | |
| } | |
| // ═══════════════════════════════════════════════════════════════════════════ | |
| // Message rendering | |
| // ═══════════════════════════════════════════════════════════════════════════ | |
| function appendMessage(role, content) { | |
| $('welcome')?.remove(); | |
| const wrap = document.createElement('div'); | |
| wrap.className = `msg ${role}`; | |
| wrap.innerHTML = ` | |
| <div class="avatar">${role==='user'?'🧑':'🤖'}</div> | |
| <div class="bubble">${role==='user' ? escHtml(content) : renderMarkdown(content)}</div>`; | |
| messages.appendChild(wrap); | |
| messages.scrollTop = messages.scrollHeight; | |
| return wrap.querySelector('.bubble'); | |
| } | |
| function showTyping() { | |
| $('welcome')?.remove(); | |
| const wrap = document.createElement('div'); | |
| wrap.className = 'msg bot'; | |
| wrap.id = 'typing-indicator'; | |
| wrap.innerHTML = ` | |
| <div class="avatar">🤖</div> | |
| <div class="bubble"><div class="typing-dots"><span></span><span></span><span></span></div></div>`; | |
| messages.appendChild(wrap); | |
| messages.scrollTop = messages.scrollHeight; | |
| } | |
| function removeTyping() { $('typing-indicator')?.remove(); } | |
| // ═══════════════════════════════════════════════════════════════════════════ | |
| // Send flow — tries streaming first, falls back to /api/chat-simple | |
| // ═══════════════════════════════════════════════════════════════════════════ | |
| async function sendMessage(text) { | |
| const msg = (text || msgInput.value).trim(); | |
| if (!msg || state.isLoading) return; | |
| msgInput.value = ''; | |
| autoResize(msgInput); | |
| state.isLoading = true; | |
| sendBtn.disabled = true; | |
| statusDot.className = 'loading'; | |
| appendMessage('user', msg); | |
| showTyping(); | |
| state.synthesis?.cancel(); | |
| try { | |
| const full = await streamWithFallback(msg); | |
| state.history.push({ role:'user', content:msg }); | |
| state.history.push({ role:'assistant', content:full }); | |
| if (state.history.length > 12) state.history = state.history.slice(-12); | |
| if (state.voiceInputUsed && state.synthesis && full) { | |
| speakText(stripMarkdown(full)); | |
| state.voiceInputUsed = false; | |
| } | |
| } catch (err) { | |
| removeTyping(); | |
| appendMessage('bot', `⚠️ **Error:** ${err.message}`); | |
| } finally { | |
| state.isLoading = false; | |
| sendBtn.disabled = false; | |
| statusDot.className = 'ready'; | |
| } | |
| } | |
| async function streamWithFallback(msg) { | |
| // ── Try SSE streaming first ──────────────────────────────────────────── | |
| try { | |
| const res = await fetch(`${BASE_URL}/api/chat`, { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify({ message: msg, history: state.history, stream: true }), | |
| }); | |
| if (!res.ok) throw new Error(`HTTP ${res.status}`); | |
| const reader = res.body.getReader(); | |
| const decoder = new TextDecoder(); | |
| let buffer = '', full = '', bubble = null, firstChunkAt = Date.now(); | |
| // If no real data arrives in 25s, abort and fall back | |
| const watchdog = setTimeout(() => reader.cancel('timeout'), 25000); | |
| while (true) { | |
| const { done, value } = await reader.read(); | |
| if (done) break; | |
| buffer += decoder.decode(value, { stream: true }); | |
| const lines = buffer.split('\n'); | |
| buffer = lines.pop(); | |
| for (const line of lines) { | |
| if (line.startsWith(':')) continue; // comment / heartbeat | |
| if (!line.startsWith('data: ')) continue; | |
| const payload = line.slice(6).trim(); | |
| if (payload === '[DONE]') { clearTimeout(watchdog); return full; } | |
| try { | |
| const { chunk } = JSON.parse(payload); | |
| if (chunk) { | |
| if (!bubble) { removeTyping(); bubble = appendMessage('bot',''); } | |
| full += chunk; | |
| bubble.innerHTML = renderMarkdown(full); | |
| messages.scrollTop = messages.scrollHeight; | |
| } | |
| } catch { /* ignore malformed */ } | |
| } | |
| } | |
| clearTimeout(watchdog); | |
| if (full) return full; | |
| throw new Error('Empty stream'); | |
| } catch (streamErr) { | |
| // ── Fall back to the non-streaming endpoint ──────────────────────── | |
| console.warn('SSE failed, falling back to /api/chat-simple:', streamErr); | |
| toast('Streaming blocked — using fallback', 2000); | |
| const res = await fetch(`${BASE_URL}/api/chat-simple`, { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify({ message: msg, history: state.history, stream: false }), | |
| }); | |
| if (!res.ok) { | |
| const errText = await res.text(); | |
| throw new Error(`Server returned ${res.status}: ${errText}`); | |
| } | |
| const data = await res.json(); | |
| removeTyping(); | |
| appendMessage('bot', data.response); | |
| return data.response; | |
| } | |
| } | |
| function sendStarter(btn) { sendMessage(btn.textContent.trim()); } | |
| // ═══════════════════════════════════════════════════════════════════════════ | |
| // Voice INPUT — MediaRecorder + server-side Groq Whisper | |
| // (No more `webkitSpeechRecognition` → no more "network" errors) | |
| // ═══════════════════════════════════════════════════════════════════════════ | |
| async function startVoice() { | |
| if (state.mediaRecorder) { stopVoice(false); return; } | |
| if (!navigator.mediaDevices?.getUserMedia) { | |
| toast('🎤 This browser does not support audio recording'); | |
| return; | |
| } | |
| let stream; | |
| try { | |
| stream = await navigator.mediaDevices.getUserMedia({ audio: true }); | |
| } catch (err) { | |
| toast(err.name === 'NotAllowedError' | |
| ? '🎤 Microphone permission denied' | |
| : `🎤 Mic error: ${err.name}`); | |
| return; | |
| } | |
| // Pick the best-supported mime type | |
| const mimeCandidates = ['audio/webm;codecs=opus','audio/webm','audio/mp4','audio/ogg']; | |
| const mimeType = mimeCandidates.find(t => MediaRecorder.isTypeSupported(t)) || ''; | |
| state.audioChunks = []; | |
| state.mediaRecorder = new MediaRecorder(stream, mimeType ? { mimeType } : undefined); | |
| state.voiceInputUsed = true; | |
| state.mediaRecorder.ondataavailable = e => { | |
| if (e.data.size > 0) state.audioChunks.push(e.data); | |
| }; | |
| state.mediaRecorder.onstop = async () => { | |
| stream.getTracks().forEach(t => t.stop()); | |
| const submitted = state.mediaRecorder._submit !== false; | |
| const chunks = state.audioChunks; | |
| state.mediaRecorder = null; | |
| state.audioChunks = []; | |
| if (!submitted || !chunks.length) return; | |
| $('voice-status').textContent = 'Transcribing…'; | |
| $('voice-wave').textContent = '⏳'; | |
| const blob = new Blob(chunks, { type: mimeType || 'audio/webm' }); | |
| const ext = (mimeType.includes('mp4') ? 'm4a' | |
| : mimeType.includes('ogg') ? 'ogg' | |
| : 'webm'); | |
| const fd = new FormData(); | |
| fd.append('audio', blob, `recording.${ext}`); | |
| try { | |
| const res = await fetch(`${BASE_URL}/api/transcribe`, { method:'POST', body: fd }); | |
| const data = await res.json(); | |
| closeVoiceOverlay(); | |
| if (!res.ok) throw new Error(data.detail || 'Transcription failed'); | |
| const text = (data.text || '').trim(); | |
| if (!text) { toast('No speech detected'); return; } | |
| msgInput.value = text; | |
| autoResize(msgInput); | |
| sendMessage(text); | |
| } catch (err) { | |
| closeVoiceOverlay(); | |
| toast(`Voice error: ${err.message}`, 5000); | |
| } | |
| }; | |
| // ── Open overlay, start timer ────────────────────────────────────────── | |
| state.recordStart = Date.now(); | |
| $('voice-status').textContent = 'Recording… speak your question'; | |
| $('voice-wave').textContent = '🎙️'; | |
| $('voice-timer').textContent = '0:00'; | |
| $('voice-overlay').classList.add('active'); | |
| voiceBtn.classList.add('recording'); | |
| state.timerInterval = setInterval(() => { | |
| const s = Math.floor((Date.now() - state.recordStart) / 1000); | |
| $('voice-timer').textContent = `${Math.floor(s/60)}:${String(s%60).padStart(2,'0')}`; | |
| if (s >= 60) stopVoice(true); // auto-stop at 60s | |
| }, 200); | |
| state.mediaRecorder.start(); | |
| } | |
| function stopVoice(submit) { | |
| clearInterval(state.timerInterval); | |
| if (!state.mediaRecorder) { closeVoiceOverlay(); return; } | |
| state.mediaRecorder._submit = submit; | |
| try { state.mediaRecorder.stop(); } catch { closeVoiceOverlay(); } | |
| } | |
| function closeVoiceOverlay() { | |
| $('voice-overlay').classList.remove('active'); | |
| voiceBtn.classList.remove('recording'); | |
| clearInterval(state.timerInterval); | |
| } | |
| // ═══════════════════════════════════════════════════════════════════════════ | |
| // Voice OUTPUT — browser SpeechSynthesis (free, no API) | |
| // ═══════════════════════════════════════════════════════════════════════════ | |
| function speakText(text) { | |
| if (!state.synthesis) return; | |
| state.synthesis.cancel(); | |
| const utt = new SpeechSynthesisUtterance(text.slice(0, 800)); | |
| utt.rate = 1.05; | |
| const voices = state.synthesis.getVoices(); | |
| const pref = voices.find(v => v.lang.startsWith('en') && v.localService) | |
| || voices.find(v => v.lang.startsWith('en')) | |
| || voices[0]; | |
| if (pref) utt.voice = pref; | |
| state.synthesis.speak(utt); | |
| } | |
| function stripMarkdown(t) { | |
| return t.replace(/```[\s\S]*?```/g,'code block') | |
| .replace(/`([^`]+)`/g,'$1') | |
| .replace(/\*\*(.+?)\*\*/g,'$1') | |
| .replace(/\*(.+?)\*/g,'$1') | |
| .replace(/^#+\s/gm,'') | |
| .replace(/^[-•]\s/gm,'') | |
| .replace(/💡/g,'Pro tip:'); | |
| } | |
| // ═══════════════════════════════════════════════════════════════════════════ | |
| // UI helpers | |
| // ═══════════════════════════════════════════════════════════════════════════ | |
| function autoResize(el) { | |
| el.style.height = 'auto'; | |
| el.style.height = Math.min(el.scrollHeight, 120) + 'px'; | |
| } | |
| function handleKey(e) { | |
| if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(); } | |
| } | |
| function toast(msg, dur = 3000) { | |
| const t = $('toast'); | |
| t.textContent = msg; | |
| t.classList.add('show'); | |
| setTimeout(() => t.classList.remove('show'), dur); | |
| } | |
| // Load voices async (iOS fix) | |
| if (state.synthesis) { | |
| state.synthesis.onvoiceschanged = () => state.synthesis.getVoices(); | |
| state.synthesis.getVoices(); | |
| } | |
| if ('serviceWorker' in navigator) { | |
| navigator.serviceWorker.register('/sw.js').catch(() => {}); | |
| } | |
| </script> | |
| </body> | |
| </html> |