[groq] Research: NotebookLM — create audio overview of SOUL.md as podcast (#293) (#377)

app.js

@@ -2799,6 +2799,37 @@ document.getElementById('podcast-toggle').addEventListener('click', () => {
   }
 });
 
+document.getElementById('soul-toggle').addEventListener('click', () => {
+  const btn = document.getElementById('soul-toggle');
+  if (btn.textContent === '📜') {
+    loadSoulMd().then(lines => {
+      let index = 0;
+      
+      const speakLine = () => {
+        if (index >= lines.length) return;
+        
+        const line = lines[index++];
+        const utterance = new SpeechSynthesisUtterance(line);
+        utterance.lang = 'en-US';
+        utterance.rate = 0.85;
+        utterance.pitch = 1.0;
+        
+        utterance.onend = () => {
+          setTimeout(speakLine, 1200); // 1.2s pause between lines
+        };
+        
+        speechSynthesis.speak(utterance);
+      };
+      
+      btn.textContent = '⏹';
+      speakLine();
+    });
+  } else {
+    speechSynthesis.cancel();
+    btn.textContent = '📜';
+  }
+});
+
 // === DEBUG MODE ===
 let debugMode = false;
 

index.html

@@ -39,6 +39,9 @@
     <button id="podcast-toggle" class="chat-toggle-btn" aria-label="Start podcast of SOUL.md" title="Play SOUL.md as audio" style="margin-left: 8px; background-color: var(--color-accent); color: var(--color-bg); padding: 4px 8px; border-radius: 4px; font-size: 12px; cursor: pointer;">
       🎧
     </button>
+    <button id="soul-toggle" class="chat-toggle-btn" aria-label="Read SOUL.md aloud" title="Read SOUL.md as dramatic audio" style="margin-left: 8px; background-color: var(--color-secondary); color: var(--color-text); padding: 4px 8px; border-radius: 4px; font-size: 12px; cursor: pointer;">
+      📜
+    </button>
     <div id="podcast-error" style="display: none; position: fixed; bottom: 10px; left: 50%; transform: translateX(-50%); background: rgba(255, 0, 0, 0.8); color: white; padding: 6px 12px; border-radius: 4px; font-size: 12px;"></div>
     <button id="timelapse-btn" class="chat-toggle-btn" aria-label="Start time-lapse replay" title="Time-lapse: replay today&#39;s activity in 30s [L]">
       ⏩

style.css

@@ -72,12 +72,18 @@ canvas {
 
 #podcast-toggle.active {
   background-color: #0066cc;
+  color: var(--color-bg);
 }
 
 #podcast-toggle:hover {
   background-color: var(--color-primary);
 }
 
+#soul-toggle {
+  background-color: var(--color-secondary);
+  color: var(--color-text);
+}
+
 #audio-toggle.muted {
   background-color: var(--color-text-muted);
 }