improve the dialog

main.js

@@ -43,6 +43,9 @@ const audioPreview = document.getElementById('audioPreview');
 const clearCacheBtn = document.getElementById('clearCacheBtn');
 const cacheInfoEl = document.getElementById('cacheInfo');
 const dropOverlay = document.getElementById('dropOverlay');
+const spinner = document.getElementById('spinner');
+const spinnerText = document.getElementById('spinnerText');
+const spinnerStats = document.getElementById('spinnerStats');
 
 // State
 let audioModel = null;
@@ -131,6 +134,23 @@ function updateProgress(percent, text) {
   progressText.textContent = text || `${percent}%`;
 }
 
+function showSpinner(text, stats = '') {
+  spinner.classList.add('active');
+  spinnerText.textContent = text;
+  spinnerStats.textContent = stats;
+}
+
+function updateSpinner(text, stats = '') {
+  if (text) spinnerText.textContent = text;
+  spinnerStats.textContent = stats;
+}
+
+function hideSpinner() {
+  spinner.classList.remove('active');
+  spinnerText.textContent = '';
+  spinnerStats.textContent = '';
+}
+
 function addMessage(role, content, isStreaming = false, audio = null) {
   const msgEl = document.createElement('div');
   msgEl.className = `message ${role}${isStreaming ? ' generating' : ''}`;
@@ -375,6 +395,7 @@ async function generate(userMessage) {
   let generatedText = '';
   const startTime = performance.now();
   let tokenCount = 0;
+  let audioFrameCount = 0;
 
   try {
     const currentMode = audioModeSelect?.value || 'interleaved';
@@ -387,10 +408,13 @@ async function generate(userMessage) {
       tokenCount++;
       textEl.textContent = generatedText;
       chatContainer.scrollTop = chatContainer.scrollHeight;
+      const elapsed = ((performance.now() - startTime) / 1000).toFixed(1);
+      updateSpinner(null, `${tokenCount} tokens · ${elapsed}s`);
       return false;
     };
 
     if (currentMode === 'asr' && audioToSend) {
+      showSpinner('Transcribing audio...');
       generatedText = await audioModel.transcribe(
         audioToSend.audioData,
         audioToSend.sampleRate,
@@ -399,28 +423,34 @@ async function generate(userMessage) {
       pendingAudio = null;
 
     } else if (currentMode === 'tts') {
+      showSpinner('Generating speech...');
       const result = await audioModel.generateSpeech(userMessage, {
         onToken: onTokenCallback,
         onAudioFrame: (frame, count) => {
-          if (count % 10 === 0) {
-            textEl.textContent = `Generating audio... (${count} frames)`;
-          }
+          audioFrameCount = count;
+          const elapsed = ((performance.now() - startTime) / 1000).toFixed(1);
+          updateSpinner('Generating audio...', `${count} frames · ${elapsed}s`);
         },
       });
 
       if (result.audioCodes && result.audioCodes.length > 0) {
-        textEl.textContent = 'Decoding audio...';
+        updateSpinner('Decoding audio...', `${result.audioCodes.length} frames`);
         const waveform = await audioModel.decodeAudioCodes(result.audioCodes);
 
         if (waveform.length > 0) {
+          generatedText = result.textOutput || `Generated ${result.audioCodes.length} audio frames (${(waveform.length / 24000).toFixed(2)}s)`;
+
+          // Create separate audio message block
+          const audioMsgEl = document.createElement('div');
+          audioMsgEl.className = 'message assistant';
           const wavBlob = createWavBlob(waveform, 24000);
           const audioUrl = URL.createObjectURL(wavBlob);
           const audioEl = document.createElement('audio');
           audioEl.src = audioUrl;
           audioEl.controls = true;
-          msgEl.appendChild(audioEl);
-
-          generatedText = result.textOutput || `[Generated ${result.audioCodes.length} audio frames (${(waveform.length / 24000).toFixed(2)}s)]`;
+          audioMsgEl.appendChild(audioEl);
+          chatContainer.appendChild(audioMsgEl);
+          chatContainer.scrollTop = chatContainer.scrollHeight;
         } else {
           generatedText = '[Audio decoding failed - no waveform generated]';
         }
@@ -429,6 +459,7 @@ async function generate(userMessage) {
       }
 
     } else if (currentMode === 'interleaved' && audioToSend) {
+      showSpinner('Processing audio...');
       const result = await audioModel.generateInterleaved(
         audioToSend.audioData,
         audioToSend.sampleRate,
@@ -439,11 +470,13 @@ async function generate(userMessage) {
             tokenCount = text.length;
             textEl.textContent = text;
             chatContainer.scrollTop = chatContainer.scrollHeight;
+            const elapsed = ((performance.now() - startTime) / 1000).toFixed(1);
+            updateSpinner('Generating text...', `${tokenCount} chars · ${elapsed}s`);
           },
           onAudioFrame: (frame, count) => {
-            if (count % 20 === 0) {
-              setStatus(`Generating audio... (${count} frames)`);
-            }
+            audioFrameCount = count;
+            const elapsed = ((performance.now() - startTime) / 1000).toFixed(1);
+            updateSpinner('Generating audio...', `${count} frames · ${elapsed}s`);
           },
         }
       );
@@ -453,24 +486,30 @@ async function generate(userMessage) {
       textEl.textContent = generatedText;
 
       if (result.audioCodes && result.audioCodes.length > 0) {
-        setStatus('Decoding audio...');
+        updateSpinner('Decoding audio...', `${result.audioCodes.length} frames`);
         const waveform = await audioModel.decodeAudioCodes(result.audioCodes);
 
         if (waveform.length > 0) {
+          if (!generatedText) {
+            generatedText = `Generated ${result.audioCodes.length} audio frames`;
+          }
+
+          // Create separate audio message block
+          const audioMsgEl = document.createElement('div');
+          audioMsgEl.className = 'message assistant';
           const wavBlob = createWavBlob(waveform, 24000);
           const audioUrl = URL.createObjectURL(wavBlob);
           const audioEl = document.createElement('audio');
           audioEl.src = audioUrl;
           audioEl.controls = true;
-          msgEl.appendChild(audioEl);
-
-          if (!generatedText) {
-            generatedText = `[Generated ${result.audioCodes.length} audio frames]`;
-          }
+          audioMsgEl.appendChild(audioEl);
+          chatContainer.appendChild(audioMsgEl);
+          chatContainer.scrollTop = chatContainer.scrollHeight;
         }
       }
 
     } else {
+      showSpinner('Generating response...');
       generatedText = await audioModel.generate(messages, {
         maxNewTokens: 256,
         onToken: onTokenCallback,
@@ -500,6 +539,7 @@ async function generate(userMessage) {
     messages.pop();
     setStatus(`Error: ${error.message}`, 'error');
   } finally {
+    hideSpinner();
     isGenerating = false;
     setReady(true);
     userInput.focus();