fixed slide rendering bug

app.py

@@ -984,12 +984,13 @@ 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');
-  }
-});
+    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(() => {
@@ -1006,12 +1007,36 @@ window.addEventListener('load', function () {
         }, interval);
     }
 
+    // Function to check if a file exists
+    async function checkFileExists(url) {
+        try {
+            const response = await fetch(url, { method: 'HEAD' });
+            return response.ok;
+        } catch (error) {
+            console.error(`Error checking file existence for ${url}:`, error);
+            return false;
+        }
+    }
+
+    // Function to retry loading a file
+    async function retryLoadFile(url, maxRetries = 3, delay = 1000) {
+        for (let i = 0; i < maxRetries; i++) {
+            const exists = await checkFileExists(url);
+            if (exists) {
+                return true;
+            }
+            console.log(`Retry ${i + 1}/${maxRetries} for ${url}`);
+            await new Promise(resolve => setTimeout(resolve, delay));
+        }
+        return false;
+    }
+
     // Main initialization function
     function initializeSlides() {
         console.log("Initializing slides...");
 
         // Wait for lecture-data to load the JSON data
-        waitForElement('#lecture-data', (dataElement) => {
+        waitForElement('#lecture-data', async (dataElement) => {
             if (!dataElement.textContent) {
                 console.error("Lecture data element is empty");
                 return;
@@ -1038,7 +1063,7 @@ window.addEventListener('load', function () {
             let currentAudioIndex = 0;
 
             // Wait for slide-content element
-            waitForElement('#slide-content', (slideContent) => {
+            waitForElement('#slide-content', async (slideContent) => {
                 console.log("Slide content element found");
 
                 // Initialize audio elements
@@ -1052,56 +1077,63 @@ window.addEventListener('load', function () {
                     }
                 }
 
-                function renderSlide() {
+                async function renderSlide() {
                     console.log("Rendering slide:", currentSlide + 1);
                     if (currentSlide >= 0 && currentSlide < totalSlides && lectureData.htmlFiles[currentSlide]) {
                         const iframe = document.getElementById('slide-iframe');
                         if (iframe) {
-                            iframe.src = lectureData.htmlFiles[currentSlide];
-                            console.log("Set iframe src to:", lectureData.htmlFiles[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;
-                                        
-                                        // 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`;
+                            const htmlUrl = lectureData.htmlFiles[currentSlide];
+                            const exists = await retryLoadFile(htmlUrl);
+                            if (exists) {
+                                iframe.src = htmlUrl;
+                                console.log("Set iframe src to:", htmlUrl);
+                                // 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;
+                                            
+                                            // 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 for ${textLength} characters on ${screenWidth}x${screenHeight} screen`);
                                         }
-                                        
-                                        console.log(`Adjusted font size to ${adjustedFontSize}px for ${textLength} characters on ${screenWidth}x${screenHeight} screen`);
-                                    }
-                                };
-                            });
+                                    };
+                                });
+                            } else {
+                                console.error(`HTML file not found after retries: ${htmlUrl}`);
+                                iframe.src = "about:blank";
+                            }
                         } else {
                             console.error("Iframe not found");
                         }
@@ -1114,9 +1146,9 @@ window.addEventListener('load', function () {
                     }
                 }
 
-                function updateSlide(callback) {
+                async function updateSlide(callback) {
                     console.log("Updating slide to index:", currentSlide);
-                    renderSlide();
+                    await renderSlide();
                     // Pause and reset all audio elements
                     audioElements.forEach(audio => {
                         if (audio && audio.pause) {
@@ -1132,18 +1164,28 @@ window.addEventListener('load', function () {
                     }, 100);
                 }
 
-                function updateAudioSources(audioUrls) {
+                async function updateAudioSources(audioUrls) {
                     console.log("Updating audio sources:", 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);
+                    for (let i = 0; i < audioUrls.length; i++) {
+                        const url = audioUrls[i];
+                        const audio = audioElements[i];
+                        if (audio && url) {
+                            const exists = await retryLoadFile(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>";
+                            }
                         } else if (!audio) {
-                            console.error(`Audio element at index ${index} not found`);
+                            console.error(`Audio element at index ${i} not found`);
                         }
-                    });
+                    }
                 }
 
                 function prevSlide() {