Update app.py

app.py

@@ -33,15 +33,22 @@ logging.basicConfig(
 logger = logging.getLogger(__name__)
 
 # Set up environment
-OUTPUT_DIR = os.path.join(os.getcwd(), "outputs")  # Fallback for local dev
+if os.path.exists("/tmp"):
+    OUTPUT_DIR = "/tmp/outputs"  # Use /tmp for Huggingface Spaces
+else:
+    OUTPUT_DIR = os.path.join(os.getcwd(), "outputs")  # Fallback for local dev
 os.makedirs(OUTPUT_DIR, exist_ok=True)
 logger.info(f"Using output directory: {OUTPUT_DIR}")
 os.environ["COQUI_TOS_AGREED"] = "1"
 
-device = "cuda" if torch.cuda.is_available() else "cpu"
-tts = TTS("tts_models/multilingual/multi-dataset/xtts_v2").to(device)
-logger.info("TTS model initialized on %s", device)
-
+# Initialize TTS model at the top
+try:
+    device = "cuda" if torch.cuda.is_available() else "cpu"
+    tts = TTS("tts_models/multilingual/multi-dataset/xtts_v2").to(device)
+    logger.info("TTS model initialized on %s", device)
+except Exception as e:
+    logger.error("Failed to initialize TTS model: %s", str(e))
+    tts = None
 
 # Define Pydantic model for slide data
 class Slide(BaseModel):
@@ -394,6 +401,8 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
     label = "Research: in progress..."
     yield (
         html_with_progress(label, progress),
+        [],
+        "",
         []
     )
     await asyncio.sleep(0.1)
@@ -440,6 +449,8 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
                     label = "Slides: generating..."
                     yield (
                         html_with_progress(label, progress),
+                        [],
+                        "",
                         []
                     )
                     await asyncio.sleep(0.1)
@@ -465,6 +476,8 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
                     label = "Scripts: generating..."
                     yield (
                         html_with_progress(label, progress),
+                        [],
+                        "",
                         []
                     )
                     await asyncio.sleep(0.1)
@@ -479,6 +492,8 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
                     label = "Review: in progress..."
                     yield (
                         html_with_progress(label, progress),
+                        [],
+                        "",
                         []
                     )
                     await asyncio.sleep(0.1)
@@ -489,6 +504,8 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
                 label = "Slides: generating..."
                 yield (
                     html_with_progress(label, progress),
+                    [],
+                    "",
                     []
                 )
                 await asyncio.sleep(0.1)
@@ -522,6 +539,8 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
                     label = "Scripts: generating..."
                     yield (
                         html_with_progress(label, progress),
+                        [],
+                        "",
                         []
                     )
                     await asyncio.sleep(0.1)
@@ -556,6 +575,8 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
                     label = "Scripts generated and saved. Reviewing..."
                     yield (
                         html_with_progress(label, progress),
+                        [],
+                        "",
                         []
                     )
                     await asyncio.sleep(0.1)
@@ -578,6 +599,8 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
                 label = "Lecture materials ready. Generating audio..."
                 yield (
                     html_with_progress(label, progress),
+                    [],
+                    "",
                     []
                 )
                 await asyncio.sleep(0.1)
@@ -593,12 +616,9 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
                 source = getattr(msg, 'source', getattr(msg, 'sender', None))
                 logger.debug("Message from %s, type: %s, content: %s", source, type(msg), msg.to_text() if hasattr(msg, 'to_text') else str(msg))
             yield (
-                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;">{error_message}</h2>
-                    <p style="margin-top: 20px;">Please try again with a different model or adjust your inputs.</p>
-                </div>
-                """,
+                error_html,
+                [],
+                "",
                 []
             )
             return
@@ -612,6 +632,8 @@ 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>
                 """,
+                [],
+                "",
                 []
             )
             return
@@ -625,6 +647,8 @@ 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>
                 """,
+                [],
+                "",
                 []
             )
             return
@@ -638,6 +662,8 @@ 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>
                 """,
+                [],
+                "",
                 []
             )
             return
@@ -652,127 +678,41 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
                     <p style="margin-top: 20px;">Please try again.</p>
                 </div>
                 """,
+                [],
+                "",
                 []
             )
             return
         
-        audio_files = []
-        audio_urls = []
-        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 (
-                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>
-                """,
-                []
-            )
-            return
-        
-        for i, script in enumerate(scripts):
-            cleaned_script = clean_script_text(script)
-            audio_file = os.path.join(OUTPUT_DIR, f"slide_{i+1}.mp3")
-            script_file = os.path.join(OUTPUT_DIR, f"slide_{i+1}_script.txt")
-            
-            try:
-                with open(script_file, "w", encoding="utf-8") as f:
-                    f.write(cleaned_script or "")
-                logger.info("Saved script to %s: %s", script_file, cleaned_script)
-            except Exception as e:
-                logger.error("Error saving script to %s: %s", script_file, str(e))
-            
-            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.append(None)
-                progress = 90 + ((i + 1) / len(scripts)) * 10
-                label = f"Generated audio for slide {i + 1}/{len(scripts)}..."
-                yield (
-                    html_with_progress(label, progress),
-                    []
-                )
-                await asyncio.sleep(0.1)
-                continue
-            
-            max_audio_retries = 2
-            for attempt in range(max_audio_retries + 1):
-                try:
-                    current_text = cleaned_script
-                    if attempt > 0:
-                        sentences = re.split(r"[.!?]+", cleaned_script)
-                        sentences = [s.strip() for s in sentences if s.strip()][:2]
-                        current_text = ". ".join(sentences) + "."
-                        logger.info("Retry %d for slide %d with simplified text: %s", attempt, i + 1, current_text)
-                    
-                    success = generate_xtts_audio(tts, current_text, validated_speaker_wav, audio_file)
-                    if not success:
-                        raise RuntimeError("TTS generation failed")
-                    
-                    logger.info("Generated audio for slide %d: %s", i + 1, audio_file)
-                    audio_files.append(audio_file)
-                    # Use Gradio's file serving URL
-                    audio_urls.append(f"/gradio_api/file={audio_file}")
-                    progress = 90 + ((i + 1) / len(scripts)) * 10
-                    label = f"Generated audio for slide {i + 1}/{len(scripts)}..."
-                    yield (
-                        html_with_progress(label, progress),
-                        []
-                    )
-                    await asyncio.sleep(0.1)
-                    break
-                except Exception as e:
-                    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.append(None)
-                        progress = 90 + ((i + 1) / len(scripts)) * 10
-                        label = f"Generated audio for slide {i + 1}/{len(scripts)}..."
-                        yield (
-                            html_with_progress(label, progress),
-                            []
-                        )
-                        await asyncio.sleep(0.1)
-                        break
-        
         # 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]
         
-        # Generate audio timeline with playable audio elements
+        # Initialize audio timeline placeholders
+        audio_urls = [None] * len(scripts)
         audio_timeline = ""
-        for i, audio_url in enumerate(audio_urls):
-            if audio_url:
-                audio_timeline += f'<audio id="audio-{i+1}" controls src="{audio_url}" style="display: inline-block; margin: 0 10px; width: 200px;"></audio>'
-            else:
-                audio_timeline += f'<span id="audio-{i+1}" style="display: inline-block; margin: 0 10px;">slide_{i+1}.mp3 (not generated)</span>'
+        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>'
         
-        slides_info = json.dumps({"slides": markdown_slides, "audioFiles": audio_urls})
-        
-        html_output = f"""
-        <script src="https://cdn.jsdelivr.net/npm/[email protected]/marked.min.js"></script>
+        # Display lecture materials immediately
+        slides_json = json.dumps({"slides": markdown_slides, "audioFiles": audio_urls})
+        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 id="slide-content" style="flex: 1; overflow: auto; padding: 20px; text-align: center; background-color: #fff; color: #333;">
-                <!-- Slides will be rendered here -->
-            </div>
             <div style="padding: 20px; text-align: center;">
-                <div style="display: flex; justify-content: center; margin-bottom: 10px;">
+                <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 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};
+            const lectureData = {slides_json};
             let currentSlide = 0;
             const totalSlides = lectureData.slides.length;
             let audioElements = [];
@@ -783,26 +723,15 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
                 audioElements.push(audio);
             }}
 
-            function renderSlide() {{
-                const slideContent = document.getElementById('slide-content');
-                if (lectureData.slides[currentSlide]) {{
-                    const markdownText = lectureData.slides[currentSlide];
-                    const htmlContent = marked.parse(markdownText);
-                    slideContent.innerHTML = htmlContent;
-                    console.log("Rendering slide:", markdownText);
-                    console.log("Rendered HTML:", htmlContent);
-                }} else {{
-                    slideContent.innerHTML = '<h2>No slide content available</h2>';
-                    console.log("No slide content for index:", currentSlide);
-                }}
-            }}
-
-            function updateSlide() {{
-                renderSlide();
-                audioElements.forEach(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));
+                        }}
                     }}
                 }});
             }}
@@ -810,23 +739,25 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
             function prevSlide() {{
                 if (currentSlide > 0) {{
                     currentSlide--;
-                    updateSlide();
+                    updateSlideDisplay();
                 }}
             }}
 
             function nextSlide() {{
                 if (currentSlide < totalSlides - 1) {{
                     currentSlide++;
-                    updateSlide();
+                    updateSlideDisplay();
                 }}
             }}
 
             function playAll() {{
-                let index = 0;
+                let index = currentSlide;
                 function playNext() {{
                     if (index >= totalSlides) return;
+                    currentSlide = index;
+                    updateSlideDisplay();
                     const audio = audioElements[index];
-                    if (audio && audio.play) {{
+                    if (audio && audio.src) {{
                         audio.play().then(() => {{
                             audio.addEventListener('ended', () => {{
                                 index++;
@@ -845,20 +776,226 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
                 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
-            renderSlide();
+            updateSlideDisplay();
         </script>
         """
-        logger.info("Lecture generation completed successfully")
         yield (
-            html_output,
-            txt_file_paths
+            html_controls,
+            txt_file_paths,
+            markdown_slides[0],
+            []
         )
+        
+        # Audio generation
+        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")
+            yield (
+                html_controls,
+                txt_file_paths,
+                markdown_slides[0],
+                []
+            )
+            return
+        
+        for i, script in enumerate(scripts):
+            cleaned_script = clean_script_text(script)
+            audio_file = os.path.join(OUTPUT_DIR, f"slide_{i+1}.mp3")
+            script_file = os.path.join(OUTPUT_DIR, f"slide_{i+1}_script.txt")
+            
+            try:
+                with open(script_file, "w", encoding="utf-8") as f:
+                    f.write(cleaned_script or "")
+                logger.info("Saved script to %s: %s", script_file, cleaned_script)
+            except Exception as e:
+                logger.error("Error saving script to %s: %s", script_file, str(e))
+            
+            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
+                progress = 90 + ((i + 1) / len(scripts)) * 10
+                label = f"Generated audio for slide {i + 1}/{len(scripts)}..."
+                yield (
+                    html_controls,
+                    txt_file_paths,
+                    markdown_slides[currentSlide if 'currentSlide' in locals() else 0],
+                    []
+                )
+                await asyncio.sleep(0.1)
+                continue
+            
+            max_audio_retries = 2
+            for attempt in range(max_audio_retries + 1):
+                try:
+                    current_text = cleaned_script
+                    if attempt > 0:
+                        sentences = re.split(r"[.!?]+", cleaned_script)
+                        sentences = [s.strip() for s in sentences if s.strip()][:2]
+                        current_text = ". ".join(sentences) + "."
+                        logger.info("Retry %d for slide %d with simplified text: %s", attempt, i + 1, current_text)
+                    
+                    success = generate_xtts_audio(tts, current_text, validated_speaker_wav, audio_file)
+                    if not success:
+                        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>
+                    """
+                    progress = 90 + ((i + 1) / len(scripts)) * 10
+                    label = f"Generated audio for slide {i + 1}/{len(scripts)}..."
+                    yield (
+                        html_controls,
+                        txt_file_paths,
+                        markdown_slides[currentSlide if 'currentSlide' in locals() else 0],
+                        []
+                    )
+                    await asyncio.sleep(0.1)
+                    break
+                except Exception as e:
+                    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
+                        progress = 90 + ((i + 1) / len(scripts)) * 10
+                        label = f"Generated audio for slide {i + 1}/{len(scripts)}..."
+                        yield (
+                            html_controls,
+                            txt_file_paths,
+                            markdown_slides[currentSlide if 'currentSlide' in locals() else 0],
+                            []
+                        )
+                        await asyncio.sleep(0.1)
+                        break
+        
+        logger.info("Lecture generation completed successfully")
     
     except Exception as e:
         logger.error("Error during lecture generation: %s\n%s", str(e), traceback.format_exc())
@@ -870,6 +1007,8 @@ 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>
             """,
+            [],
+            "",
             []
         )
         return
@@ -905,7 +1044,8 @@ 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.HTML(label="Lecture Slides", value=default_slide_html)
+            slide_display = gr.Markdown(label="Lecture Slides", value="Waiting for lecture content...")
+            controls_display = gr.HTML(label="Controls", value=default_slide_html)
             file_output = gr.File(label="Download Generated Files")
     
     speaker_audio.change(
@@ -914,11 +1054,26 @@ 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=[slide_display, file_output]
+        outputs=[controls_display, file_output, slide_display, gr.State()]
     )
 
 if __name__ == "__main__":
-    demo.launch(allowed_paths=[OUTPUT_DIR], max_file_size="5mb")
+    demo.launch(allowed_paths=[OUTPUT_DIR])