Update app.py

app.py

@@ -431,9 +431,10 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
     
     progress = 0
     label = "Research: in progress..."
+    audio_outputs = [None] * total_slides  # Initialize for total_slides
     yield (
         html_with_progress(label, progress),
-        [], 0, [], None
+        [], 0, audio_outputs, None
     )
     await asyncio.sleep(0.1)
     
@@ -479,7 +480,7 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
                     label = "Slides: generating..."
                     yield (
                         html_with_progress(label, progress),
-                        [], 0, [], None
+                        [], 0, audio_outputs, None
                     )
                     await asyncio.sleep(0.1)
                 elif source == "slide_agent" and message.target == "script_agent":
@@ -504,7 +505,7 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
                     label = "Scripts: generating..."
                     yield (
                         html_with_progress(label, progress),
-                        [], 0, [], None
+                        [], 0, audio_outputs, None
                     )
                     await asyncio.sleep(0.1)
                 elif source == "script_agent" and message.target == "feynman_agent":
@@ -518,7 +519,7 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
                     label = "Review: in progress..."
                     yield (
                         html_with_progress(label, progress),
-                        [], 0, [], None
+                        [], 0, audio_outputs, None
                     )
                     await asyncio.sleep(0.1)
             
@@ -528,7 +529,7 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
                 label = "Slides: generating..."
                 yield (
                     html_with_progress(label, progress),
-                    [], 0, [], None
+                    [], 0, audio_outputs, None
                 )
                 await asyncio.sleep(0.1)
             
@@ -561,7 +562,7 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
                     label = "Scripts: generating..."
                     yield (
                         html_with_progress(label, progress),
-                        [], 0, [], None
+                        [], 0, audio_outputs, None
                     )
                     await asyncio.sleep(0.1)
                 else:
@@ -595,7 +596,7 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
                     label = "Scripts generated and saved. Reviewing..."
                     yield (
                         html_with_progress(label, progress),
-                        [], 0, [], None
+                        [], 0, audio_outputs, None
                     )
                     await asyncio.sleep(0.1)
                 else:
@@ -624,7 +625,7 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
                     html_with_progress(label, progress),
                     txt_file_paths,
                     0,
-                    [None] * total_slides,
+                    audio_outputs,
                     zip_file_path
                 )
                 await asyncio.sleep(0.1)
@@ -641,7 +642,7 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
                 logger.debug("Message from %s, type: %s, content: %s", source, type(msg), msg.to_text() if hasattr(msg, 'to_text') else str(msg))
             yield (
                 error_html,
-                [], 0, [], None
+                [], 0, audio_outputs, None
             )
             return
         
@@ -654,7 +655,7 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
                     <p style="margin-top: 20px;">Expected {total_slides} slides, but generated {len(slides)}. Please try again.</p>
                 </div>
                 """,
-                [], 0, [], None
+                [], 0, audio_outputs, None
             )
             return
         
@@ -667,7 +668,7 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
                     <p style="margin-top: 20px;">Scripts must be a list of strings. Please try again.</p>
                 </div>
                 """,
-                [], 0, [], None
+                [], 0, audio_outputs, None
             )
             return
         
@@ -680,7 +681,7 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
                     <p style="margin-top: 20px;">Generated {len(slides)} slides but {len(scripts)} scripts. Please try again.</p>
                 </div>
                 """,
-                [], 0, [], None
+                [], 0, audio_outputs, None
             )
             return
         
@@ -694,7 +695,7 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
                     <p style="margin-top: 20px;">Please try again.</p>
                 </div>
                 """,
-                [], 0, [], None
+                [], 0, audio_outputs, None
             )
             return
         
@@ -713,7 +714,7 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
             </div>
             <div style="padding: 20px; text-align: center;">
                 <div id="audio-timeline" style="display: flex; justify-content: center; margin-bottom: 10px;">
-                    <!-- Audio components will be rendered here by Gradio -->
+                    {"".join([f'<div id="audio-container-{i+1}" style="display: inline-block; margin: 0 10px; width: 200px;"></div>' for i in range(total_slides)])}
                 </div>
                 <div style="display: flex; justify-content: center; margin-bottom: 10px;">
                     <button id="prev-btn" style="border-radius: 50%; width: 40px; height: 40px; margin: 0 5px; font-size: 1.2em; cursor: pointer;">⏮</button>
@@ -730,15 +731,20 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
             let audioElements = [];
             let isPlaying = false;
 
-            // Function to populate audio elements (will be updated by Gradio)
+            // Function to populate audio elements
             function updateAudioElements() {{
                 audioElements = [];
                 for (let i = 0; i < totalSlides; i++) {{
-                    const audio = document.getElementById(`audio-${{i+1}}`);
-                    if (audio) {{
-                        audioElements.push(audio);
+                    // Gradio assigns IDs like "audio-<component_id>-<index>"
+                    const container = document.getElementById(`audio-container-${{i+1}}`);
+                    if (container) {{
+                        const audio = container.querySelector('audio');
+                        if (audio) {{
+                            audioElements.push(audio);
+                        }}
                     }}
                 }}
+                console.log("Updated audio elements:", audioElements);
             }}
 
             function renderSlide() {{
@@ -841,8 +847,8 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
             document.getElementById('next-btn').addEventListener('click', nextSlide);
             document.getElementById('fullscreen-btn').addEventListener('click', toggleFullScreen);
 
-            // Initialize
-            updateAudioElements();
+            // Initialize audio elements after DOM updates
+            setTimeout(updateAudioElements, 1000);  // Delay to ensure Gradio renders the audio components
         </script>
         """
         logger.info("Yielding lecture materials before audio generation")
@@ -865,7 +871,7 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
                     <p style="margin-top: 20px;">Please upload a valid MP3 or WAV audio file and try again.</p>
                 </div>
                 """,
-                [], 0, [], None
+                [], 0, audio_files, None
             )
             return
         
@@ -952,7 +958,7 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
                 <p style="margin-top: 20px;">Please try again or adjust your inputs.</p>
             </div>
             """,
-            [], 0, [], None
+            [], 0, audio_outputs, None
         )
         return
 
@@ -989,7 +995,8 @@ with gr.Blocks(title="Agent Feynman") as demo:
             """
             slide_display = gr.HTML(label="Lecture Slides", value=default_slide_html)
             file_output = gr.File(label="Download Generated Files")
-            audio_outputs = gr.Audio(label="Slide Audio", visible=False)
+            # Create a list of audio components for each slide
+            audio_outputs = [gr.Audio(label=f"Slide {i+1} Audio", visible=True) for i in range(20)]  # Max 20 slides
             slide_index = gr.State(value=0)
             zip_output = gr.File(label="Download All Files as ZIP")
     
@@ -1002,7 +1009,7 @@ with gr.Blocks(title="Agent Feynman") as demo:
     generate_btn.click(
         fn=on_generate,
         inputs=[api_service, api_key, serpapi_key, title, lecture_content_description, lecture_type, speaker_audio, num_slides],
-        outputs=[slide_display, file_output, slide_index, audio_outputs, zip_output]
+        outputs=[slide_display, file_output, slide_index] + audio_outputs[:20] + [zip_output]
     )
 
 if __name__ == "__main__":