Improve UI/UX for slow HuggingFace CPU tier

- Add visual status text colors (success=green, error=red, warning=yellow, info=blue)
- Restore download button visual feedback with success/error states and icons
- Add progress bar for long-running operations (transcription, summarization)
- Add performance notice in header about expected wait times (2-5 minutes)
- Show progress during transcription stages (diarization, utterance processing)
- Show progress during summary generation (title generation, content streaming)
- Better user expectations management for constrained CPU environment

frontend/app.js

@@ -54,6 +54,9 @@ const elements = {
   podcastSearch: document.getElementById('podcast-search'),
   podcastResults: document.getElementById('podcast-results'),
   episodeResults: document.getElementById('episode-results'),
+  progressContainer: document.getElementById('progress-container'),
+  progressFill: document.getElementById('progress-fill'),
+  progressText: document.getElementById('progress-text'),
 };
 
 const TRANSCRIPT_FORMATS = [
@@ -89,6 +92,22 @@ function setStatus(message, tone = 'info') {
   elements.statusText.dataset.tone = tone;
 }
 
+function showProgress(visible = true) {
+  if (visible) {
+    elements.progressContainer.classList.remove('hidden');
+  } else {
+    elements.progressContainer.classList.add('hidden');
+    elements.progressFill.style.width = '0%';
+  }
+}
+
+function updateProgress(percent, text = null) {
+  elements.progressFill.style.width = `${Math.min(100, Math.max(0, percent))}%`;
+  if (text) {
+    elements.progressText.textContent = text;
+  }
+}
+
 function formatTime(seconds) {
   const mins = Math.floor(seconds / 60);
   const secs = Math.floor(seconds % 60).toString().padStart(2, '0');
@@ -226,6 +245,8 @@ async function handleTranscription() {
   resetTranscriptionState();
   state.transcribing = true;
   setStatus('Starting transcription...', 'info');
+  showProgress(true);
+  updateProgress(0, 'Initializing...');
 
   const formData = new FormData();
   if (state.uploadedFile) {
@@ -266,9 +287,11 @@ async function handleTranscription() {
     }
 
     setStatus('Transcription complete', 'success');
+    showProgress(false);
   } catch (err) {
     console.error(err);
     setStatus(err.message, 'error');
+    showProgress(false);
   } finally {
     state.transcribing = false;
   }
@@ -289,12 +312,16 @@ function handleTranscriptionEvent(event) {
     case 'progress':
       if (event.stage === 'diarization') {
         setStatus(`Performing speaker diarization... (${event.progress}%)`, 'info');
+        updateProgress(event.progress, `Diarizing speakers... ${event.progress}%`);
+      } else {
+        updateProgress(event.progress || 0, `Transcribing... ${event.progress || 0}%`);
       }
       break;
     case 'utterance':
       state.utterances.push(event.utterance);
       const progress = event.progress || 0;
       setStatus(`Transcribing audio... (${state.utterances.length} utterances, ${progress}%)`, 'info');
+      updateProgress(progress, `Processing utterances... ${progress}%`);
       renderTranscript();
       break;
     case 'complete':
@@ -562,6 +589,8 @@ async function handleSummaryGeneration() {
   if (state.summarizing || !state.utterances.length) return;
   state.summarizing = true;
   setStatus('Generating summary...', 'info');
+  showProgress(true);
+  updateProgress(0, 'Initializing summary generation...');
   elements.summaryOutput.textContent = '';
   elements.titleOutput.textContent = '';
   state.title = '';
@@ -598,16 +627,20 @@ async function handleSummaryGeneration() {
         if (event.type === 'title' && event.content) {
           state.title = event.content;
           elements.titleOutput.textContent = event.content;
+          updateProgress(50, 'Generated title, creating summary...');
         } else if (event.type === 'partial' && event.content) {
           elements.summaryOutput.innerHTML = renderMarkdown(event.content);
+          updateProgress(75, 'Generating summary...');
         }
       }
     }
 
     setStatus('Summary ready', 'success');
+    showProgress(false);
   } catch (err) {
     console.error(err);
     setStatus(err.message, 'error');
+    showProgress(false);
   } finally {
     state.summarizing = false;
   }
@@ -843,13 +876,29 @@ async function downloadEpisode(audioUrl, title, triggerButton = null) {
     state.uploadedFile = null;
     elements.audioPlayer.src = data.audioUrl;
     setStatus('Episode ready', 'success');
+    if (triggerButton) {
+      triggerButton.textContent = '✓ Ready';
+      triggerButton.classList.add('success');
+      setTimeout(() => {
+        triggerButton.classList.remove('success');
+        triggerButton.textContent = originalLabel || 'Download';
+      }, 3000);
+    }
   } catch (err) {
     console.error(err);
     setStatus(err.message, 'error');
+    if (triggerButton) {
+      triggerButton.textContent = '❌ Retry';
+      triggerButton.classList.add('error');
+      setTimeout(() => {
+        triggerButton.classList.remove('error');
+        triggerButton.textContent = originalLabel || 'Download';
+      }, 3000);
+    }
   } finally {
     if (triggerButton) {
+      triggerButton.disabled = false;
       triggerButton.classList.remove('loading');
-      triggerButton.textContent = originalLabel || 'Download';
     }
   }
 }

frontend/index.html

@@ -11,6 +11,9 @@
     <header class="app-header">
       <h1>VoxSum Studio</h1>
       <p class="tagline">Transform Audio into Insightful Summaries</p>
+      <div class="performance-notice">
+        <small>⚡ Running on limited CPU - operations may take 2-5 minutes for large files</small>
+      </div>
     </header>
     <div class="app-shell">
       <aside class="sidebar">
@@ -128,6 +131,13 @@
             <span id="status-text" class="status-text">Ready</span>
           </div>
 
+          <div id="progress-container" class="progress-container hidden">
+            <div class="progress-bar">
+              <div id="progress-fill" class="progress-fill"></div>
+            </div>
+            <span id="progress-text" class="progress-text">Processing...</span>
+          </div>
+
           <section class="panel">
             <h2>Audio Player</h2>
             <audio id="audio-player" controls preload="auto"></audio>

frontend/styles.css

@@ -28,6 +28,15 @@ body {
   color: #94a3b8;
 }
 
+.performance-notice {
+  margin-top: 0.5rem;
+}
+
+.performance-notice small {
+  color: #fbbf24;
+  font-style: italic;
+}
+
 .app-shell {
   display: grid;
   grid-template-columns: 320px 1fr;
@@ -317,6 +326,52 @@ button:hover {
 .status-text {
   color: #eab308;
   font-size: 0.9rem;
+  transition: color 0.3s ease;
+}
+
+.status-text[data-tone="success"] {
+  color: #22c55e;
+}
+
+.status-text[data-tone="error"] {
+  color: #ef4444;
+}
+
+.status-text[data-tone="warning"] {
+  color: #f59e0b;
+}
+
+.status-text[data-tone="info"] {
+  color: #3b82f6;
+}
+
+.progress-container {
+  margin-top: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.progress-bar {
+  width: 100%;
+  height: 8px;
+  background: rgba(148, 163, 184, 0.2);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #38bdf8 0%, #818cf8 100%);
+  width: 0%;
+  transition: width 0.3s ease;
+  border-radius: 4px;
+}
+
+.progress-text {
+  font-size: 0.85rem;
+  color: #94a3b8;
+  text-align: center;
 }
 
 #transcript-container {