Update app.py

app.py

@@ -32,9 +32,7 @@ import markdown
 import PyPDF2
 import io
 import copy
-from pathlib import Path
 
-gr.set_static_paths(paths=[Path.cwd().absolute()/"outputs"])
 def get_instructor_name(speaker):
     instructor_names = {
         "feynman.mp3": "Professor Richard Feynman",
@@ -408,8 +406,8 @@ def create_zip_of_files(file_paths):
 
 # Access local files
 def get_gradio_file_url(local_path):
-    return f"/gradio_api/file={local_path}"
-
+    relative_path = os.path.relpath(local_path, os.getcwd())
+    return f"/gradio_api/file={relative_path}"
 
 # Async generate lecture materials and audio
 async def on_generate(api_service, api_key, serpapi_key, title, lecture_content_description, lecture_type, lecture_style, speaker_audio, num_slides):
@@ -987,13 +985,6 @@ Example: 'Received {total_slides} slides, {total_slides} scripts, and HTML files
 js_code = """
 () => {
     // Function to wait for an element to appear in the DOM
-    window.addEventListener('load', function () {
-        gradioURL = window.location.href
-        if (!gradioURL.endsWith('?__theme=light')) {
-            window.location.replace(gradioURL + '?__theme=light');
-        }
-    });
-
     function waitForElement(selector, callback, maxAttempts = 50, interval = 100) {
         let attempts = 0;
         const intervalId = setInterval(() => {
@@ -1010,119 +1001,16 @@ js_code = """
         }, interval);
     }
 
-    // Function to check if a file exists with retries
-    async function checkFileExists(url, maxRetries = 5, delay = 1000) {
-        for (let i = 0; i < maxRetries; i++) {
-            try {
-                const response = await fetch(url, { method: 'HEAD' });
-                if (response.ok) {
-                    console.log(`File exists: ${url}`);
-                    return true;
-                }
-                // Fallback: Some servers disallow HEAD, try GET request
-                if (response.status === 405 || response.status === 403) {
-                    try {
-                        const getResp = await fetch(url, { method: 'GET' });
-                        if (getResp.ok) {
-                            console.log(`File exists (GET fallback): ${url}`);
-                            return true;
-                        }
-                    } catch (err) {
-                        console.error(`GET fallback failed for ${url}:`, err);
-                    }
-                }
-                console.log(`File not found (attempt ${i + 1}/${maxRetries}): ${url}`);
-                await new Promise(resolve => setTimeout(resolve, delay));
-            } catch (error) {
-                console.error(`Error checking file (attempt ${i + 1}/${maxRetries}):`, error);
-                await new Promise(resolve => setTimeout(resolve, delay));
-            }
-        }
-        return false;
-    }
-
-    // Function to validate and initialize audio elements
-    async function initializeAudioElements(audioUrls) {
-        console.log("Initializing audio elements with URLs:", audioUrls);
-        const audioElements = [];
-        
-        for (let i = 0; i < audioUrls.length; i++) {
-            const url = audioUrls[i];
-            const audioId = `audio-${i+1}`;
-            let audio = document.getElementById(audioId);
-            
-            if (!audio) {
-                console.log(`Creating new audio element: ${audioId}`);
-                audio = document.createElement('audio');
-                audio.id = audioId;
-                audio.controls = true;
-                audio.style.display = 'inline-block';
-                audio.style.margin = '0 10px';
-                audio.style.width = '200px';
-                
-                // Find the audio container and append the new element
-                const audioContainer = document.querySelector('.audio-timeline');
-                if (audioContainer) {
-                    audioContainer.appendChild(audio);
-                }
-            }
-            
-            if (url) {
-                const exists = await checkFileExists(url);
-                if (exists) {
-                    audio.src = url;
-                    audio.load();
-                    console.log(`Audio source set for ${audioId}: ${url}`);
-                } else {
-                    console.error(`Audio file not found: ${url}`);
-                    audio.innerHTML = "<span>Audio unavailable</span>";
-                }
-            } else {
-                console.log(`No URL provided for ${audioId}`);
-                audio.innerHTML = "<span>No audio</span>";
-            }
-            
-            audioElements.push(audio);
-        }
-        
-        return audioElements;
-    }
-
-    // Function to render slide with retries
-    async function renderSlideWithRetry(iframe, url, maxRetries = 5) {
-        console.log(`Attempting to render slide: ${url}`);
-        
-        for (let i = 0; i < maxRetries; i++) {
-            try {
-                const exists = await checkFileExists(url);
-                if (exists) {
-                    iframe.src = url;
-                    console.log(`Slide rendered successfully: ${url}`);
-                    return true;
-                }
-                console.log(`Slide not found (attempt ${i + 1}/${maxRetries}): ${url}`);
-                await new Promise(resolve => setTimeout(resolve, 1000));
-            } catch (error) {
-                console.error(`Error rendering slide (attempt ${i + 1}/${maxRetries}):`, error);
-                await new Promise(resolve => setTimeout(resolve, 1000));
-            }
-        }
-        
-        console.error(`Failed to render slide after ${maxRetries} attempts: ${url}`);
-        return false;
-    }
-
     // Main initialization function
     function initializeSlides() {
         console.log("Initializing slides...");
 
         // Wait for lecture-data to load the JSON data
-        waitForElement('#lecture-data', async (dataElement) => {
+        waitForElement('#lecture-data', (dataElement) => {
             if (!dataElement.textContent) {
                 console.error("Lecture data element is empty");
                 return;
             }
-            
             let lectureData;
             try {
                 lectureData = JSON.parse(dataElement.textContent);
@@ -1143,68 +1031,96 @@ js_code = """
             let isPlaying = false;
             let hasNavigated = false;
             let currentAudioIndex = 0;
+            let lastRenderedSlide = -1;
+            let isReloading = false;
 
             // Wait for slide-content element
-            waitForElement('#slide-content', async (slideContent) => {
+            waitForElement('#slide-content', (slideContent) => {
                 console.log("Slide content element found");
 
                 // Initialize audio elements
-                audioElements = await initializeAudioElements(lectureData.audioFiles);
-                console.log(`Initialized ${audioElements.length} audio elements`);
+                for (let i = 0; i < totalSlides; i++) {
+                    const audio = document.getElementById(`audio-${i+1}`);
+                    if (audio) {
+                        audioElements.push(audio);
+                        console.log(`Found audio element audio-${i+1}:`, audio);
+                    } else {
+                        console.error(`Audio element audio-${i+1} not found`);
+                    }
+                }
 
-                async function renderSlide() {
+                function renderSlide() {
                     console.log("Rendering slide:", currentSlide + 1);
-                    const iframe = document.getElementById('slide-iframe');
-                    if (!iframe) {
-                        console.error("Iframe not found");
+                    if (currentSlide === lastRenderedSlide && !isReloading) {
+                        console.log("Slide already rendered, skipping");
                         return;
                     }
-
+                    
                     if (currentSlide >= 0 && currentSlide < totalSlides && lectureData.htmlFiles[currentSlide]) {
-                        const htmlUrl = lectureData.htmlFiles[currentSlide];
-                        const success = await renderSlideWithRetry(iframe, htmlUrl);
-                        
-                        if (success) {
-                            // Adjust font size based on content
-                            iframe.onload = () => {
-                                try {
+                        const iframe = document.getElementById('slide-iframe');
+                        if (iframe) {
+                            iframe.src = lectureData.htmlFiles[currentSlide];
+                            console.log("Set iframe src to:", lectureData.htmlFiles[currentSlide]);
+                            lastRenderedSlide = currentSlide;
+                            
+                            // Adjust font size based on content length and screen size
+                            waitForElement('iframe', (iframe) => {
+                                iframe.onload = () => {
                                     const doc = iframe.contentDocument || iframe.contentWindow.document;
                                     const body = doc.body;
                                     if (body) {
                                         const textLength = body.textContent.length;
                                         const screenWidth = window.innerWidth;
+                                        const screenHeight = window.innerHeight;
                                         
-                                        let baseFontSize = screenWidth >= 1920 ? 20 : screenWidth >= 1366 ? 18 : 16;
-                                        let adjustedFontSize = textLength > 1000 ? baseFontSize * 0.8 : 
-                                                                 textLength > 500 ? baseFontSize * 0.9 : 
-                                                                 baseFontSize;
+                                        // Base font size calculation
+                                        let baseFontSize;
+                                        if (screenWidth >= 1920) {
+                                            baseFontSize = 20;  // Large screens
+                                        } else if (screenWidth >= 1366) {
+                                            baseFontSize = 18;  // Medium screens
+                                        } else {
+                                            baseFontSize = 16;  // Small screens
+                                        }
+                                        
+                                        // Adjust based on content length
+                                        let adjustedFontSize;
+                                        if (textLength > 1000) {
+                                            adjustedFontSize = baseFontSize * 0.8;  // Reduce for long content
+                                        } else if (textLength > 500) {
+                                            adjustedFontSize = baseFontSize * 0.9;  // Slightly reduce for medium content
+                                        } else {
+                                            adjustedFontSize = baseFontSize;  // Keep base size for short content
+                                        }
                                         
+                                        // Ensure minimum and maximum sizes
                                         adjustedFontSize = Math.max(14, Math.min(24, adjustedFontSize));
                                         
+                                        // Apply to all elements
                                         const elements = body.getElementsByTagName('*');
                                         for (let elem of elements) {
                                             elem.style.fontSize = `${adjustedFontSize}px`;
                                         }
                                         
-                                        console.log(`Adjusted font size to ${adjustedFontSize}px`);
+                                        console.log(`Adjusted font size to ${adjustedFontSize}px for ${textLength} characters on ${screenWidth}x${screenHeight} screen`);
                                     }
-                                } catch (error) {
-                                    console.error("Error adjusting font size:", error);
-                                }
-                            };
+                                };
+                            });
                         } else {
-                            iframe.src = "about:blank";
-                            console.error("Failed to render slide");
+                            console.error("Iframe not found");
                         }
                     } else {
-                        iframe.src = "about:blank";
-                        console.log("No valid slide content for index:", currentSlide);
+                        const iframe = document.getElementById('slide-iframe');
+                        if (iframe) {
+                            iframe.src = "about:blank";
+                            console.log("No valid slide content for index:", currentSlide);
+                        }
                     }
                 }
 
-                async function updateSlide(callback) {
+                function updateSlide(callback) {
                     console.log("Updating slide to index:", currentSlide);
-                    await renderSlide();
+                    renderSlide();
                     // Pause and reset all audio elements
                     audioElements.forEach(audio => {
                         if (audio && audio.pause) {
@@ -1220,28 +1136,18 @@ js_code = """
                     }, 100);
                 }
 
-                async function updateAudioSources(audioUrls) {
+                function updateAudioSources(audioUrls) {
                     console.log("Updating audio sources:", audioUrls);
-                    for (let i = 0; i < audioUrls.length; i++) {
-                        const url = audioUrls[i];
-                        const audio = audioElements[i];
-                        if (audio && url) {
-                            const exists = await checkFileExists(url);
-                            if (exists) {
-                                if (audio.src !== url) {
-                                    audio.src = url;
-                                    audio.load();
-                                    console.log(`Updated audio-${i+1} src to:`, url);
-                                }
-                            } else {
-                                console.error(`Audio file not found after retries: ${url}`);
-                                audio.src = "";
-                                audio.innerHTML = "<span>Audio unavailable</span>";
-                            }
+                    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);
                         } else if (!audio) {
-                            console.error(`Audio element at index ${i} not found`);
+                            console.error(`Audio element at index ${index} not found`);
                         }
-                    }
+                    });
                 }
 
                 function prevSlide() {
@@ -1306,100 +1212,103 @@ js_code = """
                     // Start playback
                     isPlaying = true;
                     playIcon.className = 'fas fa-pause';
+                    currentSlide = 0;
+                    currentAudioIndex = 0;
                     
-                    // Only update slide if we're not already on the correct slide
-                    if (currentSlide !== currentAudioIndex) {
-                        currentSlide = currentAudioIndex;
-                        updateSlide(() => {
-                            playCurrentAudio();
-                        });
-                    } else {
-                        playCurrentAudio();
-                    }
+                    updateSlide(() => {
+                        function playNext() {
+                            if (currentAudioIndex >= totalSlides || !isPlaying) {
+                                isPlaying = false;
+                                playIcon.className = 'fas fa-play';
+                                audioElements.forEach(audio => {
+                                    if (audio) audio.style.border = 'none';
+                                });
+                                console.log("Finished playing all slides or paused");
+                                return;
+                            }
 
-                    function playCurrentAudio() {
-                        if (!isPlaying) return;
-                        
-                        const audio = audioElements[currentAudioIndex];
-                        if (audio && audio.play) {
-                            audioElements.forEach(a => a.style.border = 'none');
-                            audio.style.border = '5px solid #16cd16';
-                            audio.style.borderRadius = '30px';
-                            console.log(`Attempting to play audio for slide ${currentAudioIndex + 1}`);
-                            
-                            audio.play().then(() => {
-                                console.log(`Playing audio for slide ${currentAudioIndex + 1}`);
-                                audio.onended = null;
-                                audio.addEventListener('ended', () => {
-                                    if (isPlaying) {
-                                        console.log(`Audio ended for slide ${currentAudioIndex + 1}`);
-                                        currentAudioIndex++;
-                                        if (currentAudioIndex >= totalSlides) {
-                                            isPlaying = false;
-                                            playIcon.className = 'fas fa-play';
-                                            audioElements.forEach(a => a.style.border = 'none');
-                                            return;
-                                        }
-                                        currentSlide = currentAudioIndex;
-                                        updateSlide(() => {
-                                            playCurrentAudio();
-                                        });
-                                    }
-                                }, { once: true });
-                            }).catch(e => {
-                                console.error(`Audio play failed for slide ${currentAudioIndex + 1}:`, e);
-                                setTimeout(() => {
-                                    if (isPlaying) {
+                            currentSlide = currentAudioIndex;
+                            updateSlide(() => {
+                                const audio = audioElements[currentAudioIndex];
+                                if (audio && audio.play) {
+                                    audioElements.forEach(a => a.style.border = 'none');
+                                    audio.style.border = '5px solid #16cd16';
+                                    audio.style.borderRadius = '30px';
+                                    console.log(`Attempting to play audio for slide ${currentAudioIndex + 1}`);
+                                    
+                                    const playAudio = () => {
                                         audio.play().then(() => {
-                                            console.log(`Retry succeeded for slide ${currentAudioIndex + 1}`);
+                                            console.log(`Playing audio for slide ${currentAudioIndex + 1}`);
                                             audio.onended = null;
                                             audio.addEventListener('ended', () => {
                                                 if (isPlaying) {
                                                     console.log(`Audio ended for slide ${currentAudioIndex + 1}`);
                                                     currentAudioIndex++;
-                                                    if (currentAudioIndex >= totalSlides) {
-                                                        isPlaying = false;
-                                                        playIcon.className = 'fas fa-play';
-                                                        audioElements.forEach(a => a.style.border = 'none');
-                                                        return;
-                                                    }
-                                                    currentSlide = currentAudioIndex;
-                                                    updateSlide(() => {
-                                                        playCurrentAudio();
-                                                    });
+                                                    playNext();
                                                 }
                                             }, { once: true });
+                                            
+                                            const checkDuration = setInterval(() => {
+                                                if (!isPlaying) {
+                                                    clearInterval(checkDuration);
+                                                    return;
+                                                }
+                                                if (audio.duration && audio.currentTime >= audio.duration - 0.1) {
+                                                    console.log(`Fallback: Audio for slide ${currentAudioIndex + 1} considered ended`);
+                                                    clearInterval(checkDuration);
+                                                    audio.onended = null;
+                                                    currentAudioIndex++;
+                                                    playNext();
+                                                }
+                                            }, 1000);
                                         }).catch(e => {
-                                            console.error(`Retry failed for slide ${currentAudioIndex + 1}:`, e);
-                                            currentAudioIndex++;
-                                            if (currentAudioIndex >= totalSlides) {
-                                                isPlaying = false;
-                                                playIcon.className = 'fas fa-play';
-                                                audioElements.forEach(a => a.style.border = 'none');
-                                                return;
+                                            console.error(`Audio play failed for slide ${currentAudioIndex + 1}:`, e);
+                                            if (isPlaying) {
+                                                setTimeout(playAudio, 500);
                                             }
-                                            currentSlide = currentAudioIndex;
-                                            updateSlide(() => {
-                                                playCurrentAudio();
-                                            });
                                         });
-                                    }
-                                }, 500);
-                            });
-                        } else {
-                            currentAudioIndex++;
-                            if (currentAudioIndex >= totalSlides) {
-                                isPlaying = false;
-                                playIcon.className = 'fas fa-play';
-                                audioElements.forEach(a => a.style.border = 'none');
-                                return;
-                            }
-                            currentSlide = currentAudioIndex;
-                            updateSlide(() => {
-                                playCurrentAudio();
+                                    };
+                                    
+                                    playAudio();
+                                } else {
+                                    currentAudioIndex++;
+                                    playNext();
+                                }
                             });
                         }
+                        playNext();
+                    });
+                }
+
+                function reloadSlides() {
+                    console.log("Reloading slides");
+                    isReloading = true;
+                    lastRenderedSlide = -1;
+                    currentSlide = 0;
+                    currentAudioIndex = 0;
+                    isPlaying = false;
+                    
+                    // Reset play button
+                    const playBtn = document.getElementById('play-btn');
+                    if (playBtn) {
+                        const playIcon = playBtn.querySelector('i');
+                        if (playIcon) {
+                            playIcon.className = 'fas fa-play';
+                        }
                     }
+                    
+                    // Reset audio elements
+                    audioElements.forEach(audio => {
+                        if (audio) {
+                            audio.pause();
+                            audio.currentTime = 0;
+                            audio.style.border = 'none';
+                        }
+                    });
+                    
+                    updateSlide(() => {
+                        isReloading = false;
+                    });
                 }
 
                 function toggleFullScreen() {
@@ -1441,35 +1350,7 @@ js_code = """
                 });
 
                 waitForElement('#reload-btn', (reloadBtn) => {
-                    reloadBtn.addEventListener('click', () => {
-                        // Reset state
-                        currentSlide = 0;
-                        currentAudioIndex = 0;
-                        isPlaying = false;
-                        
-                        // Reset play button
-                        const playBtn = document.getElementById('play-btn');
-                        if (playBtn) {
-                            const playIcon = playBtn.querySelector('i');
-                            if (playIcon) {
-                                playIcon.className = 'fas fa-play';
-                            }
-                        }
-                        
-                        // Reset audio elements
-                        audioElements.forEach(audio => {
-                            if (audio) {
-                                audio.pause();
-                                audio.currentTime = 0;
-                                audio.style.border = 'none';
-                            }
-                        });
-                        
-                        // Force reload first slide
-                        updateSlide(() => {
-                            console.log("Reloaded first slide");
-                        });
-                    });
+                    reloadBtn.addEventListener('click', reloadSlides);
                     console.log("Attached event listener to reload-btn");
                 });
 
@@ -2341,13 +2222,9 @@ with gr.Blocks(
             "audience": audience_val or "University"
         }
 
-    def show_note_content(evt: dict, notes=None):
-        # Handle case when only event is provided
-        if notes is None:
-            return gr.update(value="Click any button above to generate content...")
-            
-        # evt['index'] gives the row index
-        idx = evt.get('index', 0)
+    def show_note_content(evt: dict, notes):
+        # Handle both event dict and direct index
+        idx = evt.get('index', 0) if isinstance(evt, dict) else evt
         if 0 <= idx < len(notes):
             note = notes[idx]
             note_file = os.path.join(OUTPUT_DIR, f"{note['title']}.txt")