Update app.py

app.py

@@ -6,7 +6,6 @@ import asyncio
 import logging
 import torch
 import zipfile
-import io
 from serpapi import GoogleSearch
 from pydantic import BaseModel
 from autogen_agentchat.agents import AssistantAgent
@@ -22,7 +21,6 @@ import soundfile as sf
 import tempfile
 from pydub import AudioSegment
 from TTS.api import TTS
-import markdown
 
 # Set up logging
 logging.basicConfig(
@@ -333,15 +331,6 @@ def generate_markdown_slides(slides, title, speaker="Prof. AI Feynman", date="Ap
         logger.error(traceback.format_exc())
         return None
 
-# Function to convert Markdown to HTML
-def markdown_to_html(md_text):
-    try:
-        html = markdown.markdown(md_text)
-        return html
-    except Exception as e:
-        logger.error(f"Failed to convert Markdown to HTML: {str(e)}")
-        return "<p>Error rendering slide content</p>"
-
 # Async function to update audio preview
 async def update_audio_preview(audio_file):
     if audio_file:
@@ -350,22 +339,12 @@ async def update_audio_preview(audio_file):
     return None
 
 # Function to create a zip file of all .txt files
-def create_zip_of_txt_files():
-    txt_files = [f for f in os.listdir(OUTPUT_DIR) if f.endswith('.txt')]
-    if not txt_files:
-        return None
-    
-    zip_buffer = io.BytesIO()
-    with zipfile.ZipFile(zip_buffer, 'w', zipfile.ZIP_DEFLATED) as zip_file:
-        for txt_file in txt_files:
-            file_path = os.path.join(OUTPUT_DIR, txt_file)
-            zip_file.write(file_path, txt_file)
-    
-    zip_buffer.seek(0)
+def create_zip_of_txt_files(txt_file_paths):
     zip_path = os.path.join(OUTPUT_DIR, "lecture_files.zip")
-    with open(zip_path, "wb") as f:
-        f.write(zip_buffer.getvalue())
-    
+    with zipfile.ZipFile(zip_path, 'w', zipfile.ZIP_DEFLATED) as zipf:
+        for file_path in txt_file_paths:
+            if os.path.exists(file_path):
+                zipf.write(file_path, os.path.basename(file_path))
     logger.info("Created zip file: %s", zip_path)
     return zip_path
 
@@ -431,10 +410,9 @@ 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, audio_outputs, None
+        [], None
     )
     await asyncio.sleep(0.1)
     
@@ -480,7 +458,7 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
                     label = "Slides: generating..."
                     yield (
                         html_with_progress(label, progress),
-                        [], 0, audio_outputs, None
+                        [], None
                     )
                     await asyncio.sleep(0.1)
                 elif source == "slide_agent" and message.target == "script_agent":
@@ -505,7 +483,7 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
                     label = "Scripts: generating..."
                     yield (
                         html_with_progress(label, progress),
-                        [], 0, audio_outputs, None
+                        [], None
                     )
                     await asyncio.sleep(0.1)
                 elif source == "script_agent" and message.target == "feynman_agent":
@@ -519,7 +497,7 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
                     label = "Review: in progress..."
                     yield (
                         html_with_progress(label, progress),
-                        [], 0, audio_outputs, None
+                        [], None
                     )
                     await asyncio.sleep(0.1)
             
@@ -529,7 +507,7 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
                 label = "Slides: generating..."
                 yield (
                     html_with_progress(label, progress),
-                    [], 0, audio_outputs, None
+                    [], None
                 )
                 await asyncio.sleep(0.1)
             
@@ -562,7 +540,7 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
                     label = "Scripts: generating..."
                     yield (
                         html_with_progress(label, progress),
-                        [], 0, audio_outputs, None
+                        [], None
                     )
                     await asyncio.sleep(0.1)
                 else:
@@ -596,7 +574,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, audio_outputs, None
+                        [], None
                     )
                     await asyncio.sleep(0.1)
                 else:
@@ -620,13 +598,11 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
                 txt_files = [f for f in os.listdir(OUTPUT_DIR) if f.endswith('.txt')]
                 txt_files.sort()  # Sort for consistent display
                 txt_file_paths = [os.path.join(OUTPUT_DIR, f) for f in txt_files]
-                zip_file_path = create_zip_of_txt_files()
+                zip_file = create_zip_of_txt_files(txt_file_paths)
                 yield (
                     html_with_progress(label, progress),
                     txt_file_paths,
-                    0,
-                    audio_outputs,
-                    zip_file_path
+                    zip_file
                 )
                 await asyncio.sleep(0.1)
         
@@ -642,7 +618,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, audio_outputs, None
+                [], None
             )
             return
         
@@ -655,7 +631,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, audio_outputs, None
+                [], None
             )
             return
         
@@ -668,7 +644,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, audio_outputs, None
+                [], None
             )
             return
         
@@ -681,7 +657,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, audio_outputs, None
+                [], None
             )
             return
         
@@ -695,26 +671,30 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
                     <p style="margin-top: 20px;">Please try again.</p>
                 </div>
                 """,
-                [], 0, audio_outputs, None
+                [], None
             )
             return
         
-        # Convert Markdown slides to HTML for rendering
-        html_slides = [markdown_to_html(md) for md in markdown_slides]
+        # Generate initial audio timeline with placeholders
+        audio_urls = [None] * len(scripts)
+        audio_timeline = ""
+        for i in range(len(scripts)):
+            audio_timeline += f'<audio id="audio-{i+1}" controls src="" style="display: inline-block; margin: 0 10px; width: 200px;"><span>Loading...</span></audio>'
         
-        # Initialize audio files list with None
-        audio_files = [None] * len(scripts)
+        # Collect .txt files for download (already done above, but ensure it's available)
+        txt_files = [f for f in os.listdir(OUTPUT_DIR) if f.endswith('.txt')]
+        txt_files.sort()  # Sort for consistent display
+        txt_file_paths = [os.path.join(OUTPUT_DIR, f) for f in txt_files]
+        zip_file = create_zip_of_txt_files(txt_file_paths)
         
         # Yield the lecture materials immediately after slides and scripts are ready
-        slides_info = json.dumps({"slides": html_slides, "audioFiles": audio_files})
+        slides_info = json.dumps({"slides": markdown_slides, "audioFiles": audio_urls})
         html_output = f"""
         <div id="lecture-container" style="height: 700px; border: 1px solid #ddd; border-radius: 8px; display: flex; flex-direction: column; justify-content: space-between;">
-            <div id="slide-content" style="flex: 1; overflow: auto; padding: 20px; text-align: center; background-color: #fff; color: #333;">
-                {html_slides[0] if html_slides else "<p>No slide content available</p>"}
-            </div>
+            <div id="slide-content" style="flex: 1; overflow: auto; padding: 20px; text-align: center; background-color: #fff; color: #333;"></div>
             <div style="padding: 20px; text-align: center;">
-                <div id="audio-timeline" style="display: flex; justify-content: center; margin-bottom: 10px;">
-                    {"".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 style="display: flex; justify-content: center; margin-bottom: 10px;">
+                    {audio_timeline}
                 </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>
@@ -731,28 +711,21 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
             let audioElements = [];
             let isPlaying = false;
 
-            // Function to populate audio elements
-            function updateAudioElements() {{
-                audioElements = [];
-                for (let i = 0; i < totalSlides; i++) {{
-                    // 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);
+            // Populate audio elements
+            for (let i = 0; i < totalSlides; i++) {{
+                const audio = document.getElementById(`audio-${{i+1}}`);
+                audioElements.push(audio);
             }}
 
             function renderSlide() {{
                 const slideContent = document.getElementById('slide-content');
                 if (lectureData.slides[currentSlide]) {{
-                    slideContent.innerHTML = lectureData.slides[currentSlide];
+                    // Since the content is already Markdown-rendered by Gradio, we can set it directly
+                    slideContent.innerHTML = lectureData.slides[currentSlide].replace(/\\n/g, '<br>');
+                    console.log("Rendering slide:", lectureData.slides[currentSlide]);
                 }} else {{
-                    slideContent.innerHTML = '<p>No slide content available</p>';
+                    slideContent.innerHTML = '<h2>No slide content available</h2>';
+                    console.log("No slide content for index:", currentSlide);
                 }}
             }}
 
@@ -766,6 +739,17 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
                 }});
             }}
 
+            function updateAudioSources(audioUrls) {{
+                audioUrls.forEach((url, index) => {{
+                    const audio = audioElements[index];
+                    if (audio && url && audio.src !== url) {{
+                        audio.src = url;
+                        audio.load(); // Force reload the audio element
+                        console.log(`Updated audio-${{index+1}} src to:`, url);
+                    }}
+                }});
+            }}
+
             function prevSlide() {{
                 if (currentSlide > 0) {{
                     currentSlide--;
@@ -847,20 +831,19 @@ 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 audio elements after DOM updates
-            setTimeout(updateAudioElements, 1000);  // Delay to ensure Gradio renders the audio components
+            // Initialize first slide
+            renderSlide();
         </script>
         """
         logger.info("Yielding lecture materials before audio generation")
         yield (
             html_output,
             txt_file_paths,
-            0,
-            audio_files,
-            zip_file_path
+            zip_file
         )
         
         # Now generate audio files progressively
+        audio_files = []
         validated_speaker_wav = await validate_and_convert_speaker_audio(speaker_audio)
         if not validated_speaker_wav:
             logger.error("Invalid speaker audio after conversion, skipping TTS")
@@ -871,7 +854,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, audio_files, None
+                [], None
             )
             return
         
@@ -889,15 +872,14 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
             
             if not cleaned_script:
                 logger.error("Skipping audio for slide %d due to empty or invalid script", i + 1)
-                audio_files[i] = None
+                audio_files.append(None)
+                audio_urls[i] = None
                 progress = 90 + ((i + 1) / len(scripts)) * 10
                 label = f"Generated audio for slide {i + 1}/{len(scripts)}..."
                 yield (
                     html_output,
                     txt_file_paths,
-                    0,
-                    audio_files,
-                    zip_file_path
+                    zip_file
                 )
                 await asyncio.sleep(0.1)
                 continue
@@ -917,15 +899,172 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
                         raise RuntimeError("TTS generation failed")
                     
                     logger.info("Generated audio for slide %d: %s", i + 1, audio_file)
-                    audio_files[i] = audio_file
+                    audio_files.append(audio_file)
+                    audio_urls[i] = f"/gradio_api/file={audio_file}"
                     progress = 90 + ((i + 1) / len(scripts)) * 10
                     label = f"Generated audio for slide {i + 1}/{len(scripts)}..."
+                    
+                    // Update audio timeline with the new audio URL
+                    audio_timeline = ""
+                    for j, url in enumerate(audio_urls):
+                        if url:
+                            audio_timeline += f'<audio id="audio-{j+1}" controls src="{url}" style="display: inline-block; margin: 0 10px; width: 200px;"></audio>'
+                        else:
+                            audio_timeline += f'<audio id="audio-{j+1}" controls src="" style="display: inline-block; margin: 0 10px; width: 200px;"><span>Loading...</span></audio>'
+                    
+                    html_output = f"""
+                    <div id="lecture-container" style="height: 700px; border: 1px solid #ddd; border-radius: 8px; display: flex; flex-direction: column; justify-content: space-between;">
+                        <div id="slide-content" style="flex: 1; overflow: auto; padding: 20px; text-align: center; background-color: #fff; color: #333;"></div>
+                        <div style="padding: 20px; text-align: center;">
+                            <div style="display: flex; justify-content: center; margin-bottom: 10px;">
+                                {audio_timeline}
+                            </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>
+                                <button id="play-btn" style="border-radius: 50%; width: 40px; height: 40px; margin: 0 5px; font-size: 1.2em; cursor: pointer;">⏯</button>
+                                <button id="next-btn" style="border-radius: 50%; width: 40px; height: 40px; margin: 0 5px; font-size: 1.2em; cursor: pointer;">⏭</button>
+                                <button id="fullscreen-btn" style="border-radius: 50%; width: 40px; height: 40px; margin: 0 5px; font-size: 1.2em; cursor: pointer;">☐</button>
+                            </div>
+                        </div>
+                    </div>
+                    <script>
+                        const lectureData = {slides_info};
+                        let currentSlide = 0;
+                        const totalSlides = lectureData.slides.length;
+                        let audioElements = [];
+                        let isPlaying = false;
+
+                        // Populate audio elements
+                        for (let i = 0; i < totalSlides; i++) {{
+                            const audio = document.getElementById(`audio-${{i+1}}`);
+                            audioElements.push(audio);
+                        }}
+
+                        // Update audio sources dynamically
+                        lectureData.audioFiles = {json.dumps(audio_urls)};
+                        updateAudioSources(lectureData.audioFiles);
+
+                        function renderSlide() {{
+                            const slideContent = document.getElementById('slide-content');
+                            if (lectureData.slides[currentSlide]) {{
+                                slideContent.innerHTML = lectureData.slides[currentSlide].replace(/\\n/g, '<br>');
+                                console.log("Rendering slide:", lectureData.slides[currentSlide]);
+                            }} else {{
+                                slideContent.innerHTML = '<h2>No slide content available</h2>';
+                                console.log("No slide content for index:", currentSlide);
+                            }}
+                        }}
+
+                        function updateSlide() {{
+                            renderSlide();
+                            audioElements.forEach(audio => {{
+                                if (audio && audio.pause) {{
+                                    audio.pause();
+                                    audio.currentTime = 0;
+                                }}
+                            }});
+                        }}
+
+                        function updateAudioSources(audioUrls) {{
+                            audioUrls.forEach((url, index) => {{
+                                const audio = audioElements[index];
+                                if (audio && url && audio.src !== url) {{
+                                    audio.src = url;
+                                    audio.load();
+                                    console.log(`Updated audio-${{index+1}} src to:`, url);
+                                }}
+                            }});
+                        }}
+
+                        function prevSlide() {{
+                            if (currentSlide > 0) {{
+                                currentSlide--;
+                                updateSlide();
+                                const audio = audioElements[currentSlide];
+                                if (audio && audio.play && isPlaying) {{
+                                    audio.play().catch(e => console.error('Audio play failed:', e));
+                                }}
+                            }}
+                        }}
+
+                        function nextSlide() {{
+                            if (currentSlide < totalSlides - 1) {{
+                                currentSlide++;
+                                updateSlide();
+                                const audio = audioElements[currentSlide];
+                                if (audio && audio.play && isPlaying) {{
+                                    audio.play().catch(e => console.error('Audio play failed:', e));
+                                }}
+                            }}
+                        }}
+
+                        function playAll() {{
+                            isPlaying = !isPlaying;
+                            const playBtn = document.getElementById('play-btn');
+                            playBtn.textContent = isPlaying ? '⏸' : '⏯';
+                            if (!isPlaying) {{
+                                audioElements.forEach(audio => {{
+                                    if (audio && audio.pause) {{
+                                        audio.pause();
+                                        audio.currentTime = 0;
+                                    }}
+                                }});
+                                return;
+                            }}
+                            let index = currentSlide;
+                            function playNext() {{
+                                if (index >= totalSlides || !isPlaying) {{
+                                    isPlaying = false;
+                                    playBtn.textContent = '⏯';
+                                    return;
+                                }}
+                                currentSlide = index;
+                                updateSlide();
+                                const audio = audioElements[index];
+                                if (audio && audio.play) {{
+                                    audio.play().then(() => {{
+                                        audio.addEventListener('ended', () => {{
+                                            index++;
+                                            playNext();
+                                        }}, {{ once: true }});
+                                    }}).catch(e => {{
+                                        console.error('Audio play failed:', e);
+                                        index++;
+                                        playNext();
+                                    }});
+                                }} else {{
+                                    index++;
+                                    playNext();
+                                }}
+                            }}
+                            playNext();
+                        }}
+
+                        function toggleFullScreen() {{
+                            const container = document.getElementById('lecture-container');
+                            if (!document.fullscreenElement) {{
+                                container.requestFullscreen().catch(err => {{
+                                    console.error('Error attempting to enable full-screen mode:', err);
+                                }});
+                            }} else {{
+                                document.exitFullscreen();
+                            }}
+                        }}
+
+                        // Attach event listeners
+                        document.getElementById('prev-btn').addEventListener('click', prevSlide);
+                        document.getElementById('play-btn').addEventListener('click', playAll);
+                        document.getElementById('next-btn').addEventListener('click', nextSlide);
+                        document.getElementById('fullscreen-btn').addEventListener('click', toggleFullScreen);
+
+                        // Initialize first slide
+                        renderSlide();
+                    </script>
+                    """
                     yield (
                         html_output,
                         txt_file_paths,
-                        0,
-                        audio_files,
-                        zip_file_path
+                        zip_file
                     )
                     await asyncio.sleep(0.1)
                     break
@@ -933,15 +1072,14 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
                     logger.error("Error generating audio for slide %d (attempt %d): %s\n%s", i + 1, attempt, str(e), traceback.format_exc())
                     if attempt == max_audio_retries:
                         logger.error("Max retries reached for slide %d, skipping", i + 1)
-                        audio_files[i] = None
+                        audio_files.append(None)
+                        audio_urls[i] = None
                         progress = 90 + ((i + 1) / len(scripts)) * 10
                         label = f"Generated audio for slide {i + 1}/{len(scripts)}..."
                         yield (
                             html_output,
                             txt_file_paths,
-                            0,
-                            audio_files,
-                            zip_file_path
+                            zip_file
                         )
                         await asyncio.sleep(0.1)
                         break
@@ -958,7 +1096,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, audio_outputs, None
+            [], None
         )
         return
 
@@ -995,9 +1133,6 @@ 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")
-            # 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")
     
     speaker_audio.change(
@@ -1009,7 +1144,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[:20] + [zip_output]
+        outputs=[slide_display, file_output, zip_output]
     )
 
 if __name__ == "__main__":