Update app.py

app.py

@@ -5,6 +5,8 @@ import gradio as gr
 import asyncio
 import logging
 import torch
+import zipfile
+import io
 from serpapi import GoogleSearch
 from pydantic import BaseModel
 from autogen_agentchat.agents import AssistantAgent
@@ -20,6 +22,7 @@ import soundfile as sf
 import tempfile
 from pydub import AudioSegment
 from TTS.api import TTS
+import markdown
 
 # Set up logging
 logging.basicConfig(
@@ -330,6 +333,15 @@ 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:
@@ -337,6 +349,26 @@ async def update_audio_preview(audio_file):
         return 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)
+    zip_path = os.path.join(OUTPUT_DIR, "lecture_files.zip")
+    with open(zip_path, "wb") as f:
+        f.write(zip_buffer.getvalue())
+    
+    logger.info("Created zip file: %s", zip_path)
+    return zip_path
+
 # Async function to generate lecture materials and audio
 async def on_generate(api_service, api_key, serpapi_key, title, lecture_content_description, lecture_type, speaker_audio, num_slides):
     model_client = get_model_client(api_service, api_key)
@@ -401,9 +433,7 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
     label = "Research: in progress..."
     yield (
         html_with_progress(label, progress),
-        [],
-        "",
-        []
+        [], 0, [], None
     )
     await asyncio.sleep(0.1)
     
@@ -449,9 +479,7 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
                     label = "Slides: generating..."
                     yield (
                         html_with_progress(label, progress),
-                        [],
-                        "",
-                        []
+                        [], 0, [], None
                     )
                     await asyncio.sleep(0.1)
                 elif source == "slide_agent" and message.target == "script_agent":
@@ -476,9 +504,7 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
                     label = "Scripts: generating..."
                     yield (
                         html_with_progress(label, progress),
-                        [],
-                        "",
-                        []
+                        [], 0, [], None
                     )
                     await asyncio.sleep(0.1)
                 elif source == "script_agent" and message.target == "feynman_agent":
@@ -492,9 +518,7 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
                     label = "Review: in progress..."
                     yield (
                         html_with_progress(label, progress),
-                        [],
-                        "",
-                        []
+                        [], 0, [], None
                     )
                     await asyncio.sleep(0.1)
             
@@ -504,9 +528,7 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
                 label = "Slides: generating..."
                 yield (
                     html_with_progress(label, progress),
-                    [],
-                    "",
-                    []
+                    [], 0, [], None
                 )
                 await asyncio.sleep(0.1)
             
@@ -539,9 +561,7 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
                     label = "Scripts: generating..."
                     yield (
                         html_with_progress(label, progress),
-                        [],
-                        "",
-                        []
+                        [], 0, [], None
                     )
                     await asyncio.sleep(0.1)
                 else:
@@ -575,9 +595,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
                     )
                     await asyncio.sleep(0.1)
                 else:
@@ -597,11 +615,17 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
                 logger.info("Feynman Agent completed lecture review: %s", message.content)
                 progress = 90
                 label = "Lecture materials ready. Generating audio..."
+                # Collect .txt files for download
+                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()
                 yield (
                     html_with_progress(label, progress),
-                    [],
-                    "",
-                    []
+                    txt_file_paths,
+                    0,
+                    [None] * total_slides,
+                    zip_file_path
                 )
                 await asyncio.sleep(0.1)
         
@@ -617,9 +641,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
             )
             return
         
@@ -632,9 +654,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
             )
             return
         
@@ -647,9 +667,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
             )
             return
         
@@ -662,9 +680,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
             )
             return
         
@@ -678,60 +694,68 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
                     <p style="margin-top: 20px;">Please try again.</p>
                 </div>
                 """,
-                [],
-                "",
-                []
+                [], 0, [], None
             )
             return
         
-        # Collect .txt files for download
-        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]
+        # Convert Markdown slides to HTML for rendering
+        html_slides = [markdown_to_html(md) for md in markdown_slides]
         
-        # Initialize audio timeline placeholders
-        audio_urls = [None] * len(scripts)
-        audio_timeline = ""
-        for i in range(len(scripts)):
-            audio_timeline += f'<audio id="audio-{i+1}" controls style="display: inline-block; margin: 0 10px; width: 200px;"><source src="" type="audio/mpeg"></audio>'
+        # Initialize audio files list with None
+        audio_files = [None] * len(scripts)
         
-        # Display lecture materials immediately
-        slides_json = json.dumps({"slides": markdown_slides, "audioFiles": audio_urls})
-        html_controls = f"""
+        # Yield the lecture materials immediately after slides and scripts are ready
+        slides_info = json.dumps({"slides": html_slides, "audioFiles": audio_files})
+        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 style="padding: 20px; text-align: center;">
                 <div id="audio-timeline" style="display: flex; justify-content: center; margin-bottom: 10px;">
-                    {audio_timeline}
+                    <!-- Audio components will be rendered here by Gradio -->
                 </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>
+                    <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_json};
+            const lectureData = {slides_info};
             let currentSlide = 0;
             const totalSlides = lectureData.slides.length;
             let audioElements = [];
+            let isPlaying = false;
+
+            // Function to populate audio elements (will be updated by Gradio)
+            function updateAudioElements() {{
+                audioElements = [];
+                for (let i = 0; i < totalSlides; i++) {{
+                    const audio = document.getElementById(`audio-${{i+1}}`);
+                    if (audio) {{
+                        audioElements.push(audio);
+                    }}
+                }}
+            }}
 
-            // 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];
+                }} else {{
+                    slideContent.innerHTML = '<p>No slide content available</p>';
+                }}
             }}
 
-            function updateSlideDisplay() {{
-                window.updateSlideContent(lectureData.slides[currentSlide]);
-                audioElements.forEach((audio, index) => {{
+            function updateSlide() {{
+                renderSlide();
+                audioElements.forEach(audio => {{
                     if (audio && audio.pause) {{
                         audio.pause();
                         audio.currentTime = 0;
-                        if (index === currentSlide && audio.src) {{
-                            audio.play().catch(e => console.error('Audio play failed:', e));
-                        }}
                     }}
                 }});
             }}
@@ -739,25 +763,49 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
             function prevSlide() {{
                 if (currentSlide > 0) {{
                     currentSlide--;
-                    updateSlideDisplay();
+                    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++;
-                    updateSlideDisplay();
+                    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) return;
+                    if (index >= totalSlides || !isPlaying) {{
+                        isPlaying = false;
+                        playBtn.textContent = '⏯';
+                        return;
+                    }}
                     currentSlide = index;
-                    updateSlideDisplay();
+                    updateSlide();
                     const audio = audioElements[index];
-                    if (audio && audio.src) {{
+                    if (audio && audio.play) {{
                         audio.play().then(() => {{
                             audio.addEventListener('ended', () => {{
                                 index++;
@@ -780,7 +828,7 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
                 const container = document.getElementById('lecture-container');
                 if (!document.fullscreenElement) {{
                     container.requestFullscreen().catch(err => {{
-                        console.error(`Error attempting to enable full-screen mode: ${{err.message}}`);
+                        console.error('Error attempting to enable full-screen mode:', err);
                     }});
                 }} else {{
                     document.exitFullscreen();
@@ -793,27 +841,31 @@ 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 first slide
-            updateSlideDisplay();
+            // Initialize
+            updateAudioElements();
         </script>
         """
+        logger.info("Yielding lecture materials before audio generation")
         yield (
-            html_controls,
+            html_output,
             txt_file_paths,
-            markdown_slides[0],
-            []
+            0,
+            audio_files,
+            zip_file_path
         )
         
-        # Audio generation
-        audio_files = []
+        # Now generate audio files progressively
         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")
             yield (
-                html_controls,
-                txt_file_paths,
-                markdown_slides[0],
-                []
+                f"""
+                <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; min-height: 700px; padding: 20px; text-align: center; border: 1px solid #ddd; border-radius: 8px;">
+                    <h2 style="color: #d9534f;">Invalid speaker audio</h2>
+                    <p style="margin-top: 20px;">Please upload a valid MP3 or WAV audio file and try again.</p>
+                </div>
+                """,
+                [], 0, [], None
             )
             return
         
@@ -831,15 +883,15 @@ 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.append(None)
-                audio_urls[i] = None
+                audio_files[i] = None
                 progress = 90 + ((i + 1) / len(scripts)) * 10
                 label = f"Generated audio for slide {i + 1}/{len(scripts)}..."
                 yield (
-                    html_controls,
+                    html_output,
                     txt_file_paths,
-                    markdown_slides[currentSlide if 'currentSlide' in locals() else 0],
-                    []
+                    0,
+                    audio_files,
+                    zip_file_path
                 )
                 await asyncio.sleep(0.1)
                 continue
@@ -859,122 +911,15 @@ 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.append(audio_file)
-                    audio_urls[i] = f"/gradio_api/file={audio_file}"
-                    # Update the audio element's src
-                    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 style="display: inline-block; margin: 0 10px; width: 200px;"><source src="" type="audio/mpeg"></audio>'
-                    html_controls = 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 style="padding: 20px; text-align: center;">
-                            <div id="audio-timeline" 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 = {json.dumps({"slides": markdown_slides, "audioFiles": audio_urls})};
-                        let currentSlide = {currentSlide if 'currentSlide' in locals() else 0};
-                        const totalSlides = lectureData.slides.length;
-                        let audioElements = [];
-
-                        // Populate audio elements
-                        for (let i = 0; i < totalSlides; i++) {{
-                            const audio = document.getElementById(`audio-${{i+1}}`);
-                            audioElements.push(audio);
-                        }}
-
-                        function updateSlideDisplay() {{
-                            window.updateSlideContent(lectureData.slides[currentSlide]);
-                            audioElements.forEach((audio, index) => {{
-                                if (audio && audio.pause) {{
-                                    audio.pause();
-                                    audio.currentTime = 0;
-                                    if (index === currentSlide && audio.src) {{
-                                        audio.play().catch(e => console.error('Audio play failed:', e));
-                                    }}
-                                }}
-                            }});
-                        }}
-
-                        function prevSlide() {{
-                            if (currentSlide > 0) {{
-                                currentSlide--;
-                                updateSlideDisplay();
-                            }}
-                        }}
-
-                        function nextSlide() {{
-                            if (currentSlide < totalSlides - 1) {{
-                                currentSlide++;
-                                updateSlideDisplay();
-                            }}
-                        }}
-
-                        function playAll() {{
-                            let index = currentSlide;
-                            function playNext() {{
-                                if (index >= totalSlides) return;
-                                currentSlide = index;
-                                updateSlideDisplay();
-                                const audio = audioElements[index];
-                                if (audio && audio.src) {{
-                                    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.message}}`);
-                                }});
-                            }} 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
-                        updateSlideDisplay();
-                    </script>
-                    """
+                    audio_files[i] = audio_file
                     progress = 90 + ((i + 1) / len(scripts)) * 10
                     label = f"Generated audio for slide {i + 1}/{len(scripts)}..."
                     yield (
-                        html_controls,
+                        html_output,
                         txt_file_paths,
-                        markdown_slides[currentSlide if 'currentSlide' in locals() else 0],
-                        []
+                        0,
+                        audio_files,
+                        zip_file_path
                     )
                     await asyncio.sleep(0.1)
                     break
@@ -982,15 +927,15 @@ 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.append(None)
-                        audio_urls[i] = None
+                        audio_files[i] = None
                         progress = 90 + ((i + 1) / len(scripts)) * 10
                         label = f"Generated audio for slide {i + 1}/{len(scripts)}..."
                         yield (
-                            html_controls,
+                            html_output,
                             txt_file_paths,
-                            markdown_slides[currentSlide if 'currentSlide' in locals() else 0],
-                            []
+                            0,
+                            audio_files,
+                            zip_file_path
                         )
                         await asyncio.sleep(0.1)
                         break
@@ -1007,9 +952,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
         )
         return
 
@@ -1044,9 +987,11 @@ with gr.Blocks(title="Agent Feynman") as demo:
                 <p style="margin-top: 10px; font-size: 16px;">Please Generate lecture content via the form on the left first before lecture begins</p>
             </div>
             """
-            slide_display = gr.Markdown(label="Lecture Slides", value="Waiting for lecture content...")
-            controls_display = gr.HTML(label="Controls", value=default_slide_html)
+            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)
+            slide_index = gr.State(value=0)
+            zip_output = gr.File(label="Download All Files as ZIP")
     
     speaker_audio.change(
         fn=update_audio_preview,
@@ -1054,26 +999,11 @@ with gr.Blocks(title="Agent Feynman") as demo:
         outputs=speaker_audio
     )
     
-    # JavaScript to update slide content dynamically
-    demo.load(
-        fn=None,
-        inputs=None,
-        outputs=None,
-        js="""
-        () => {
-            window.updateSlideContent = (content) => {
-                document.querySelector('#slide-display textarea').value = content;
-                document.querySelector('#slide-display').dispatchEvent(new Event('input'));
-            };
-        }
-        """
-    )
-    
     generate_btn.click(
         fn=on_generate,
         inputs=[api_service, api_key, serpapi_key, title, lecture_content_description, lecture_type, speaker_audio, num_slides],
-        outputs=[controls_display, file_output, slide_display, gr.State()]
+        outputs=[slide_display, file_output, slide_index, audio_outputs, zip_output]
     )
 
 if __name__ == "__main__":
-    demo.launch(allowed_paths=[OUTPUT_DIR])
+    demo.launch(allowed_paths=[OUTPUT_DIR], max_file_size="5mb")