fixed slide rendering, added reload for slide

app.py

@@ -1,6 +1,6 @@
 # Lectūra Research Demo: A Multi-Agent Tool for Self-taught Mastery.
 # Author: Jaward Sesay
-# © Lectūra Labs. All rights reserved. 
+# © 2025 Lectūra Labs. All rights reserved. 
 import os
 import json
 import re
@@ -934,7 +934,7 @@ Example: 'Received {total_slides} slides, {total_slides} scripts, and HTML files
                 <iframe id="slide-iframe" style="width: 100%; height: 100%; border: none;"></iframe>
             </div>
             <div style="padding: 20px; text-align: center;">
-                <div style="display: flex; justify-content: center; margin-bottom: 10px;">
+                <div class="audio-timeline" style="display: flex; justify-content: center; margin-bottom: 10px;">
                     {audio_timeline}
                 </div>
                 <div style="display: center; justify-content: center; margin-bottom: 10px;">
@@ -942,6 +942,7 @@ Example: 'Received {total_slides} slides, {total_slides} scripts, and HTML files
                     <button id="play-btn" style="border-radius: 50%; width: 40px; height: 40px; margin: 0 5px; font-size: 1.2em; cursor: pointer; background-color: black"><i class="fas fa-play" style="color: #fff !important"></i></button>
                     <button id="next-btn" style="border-radius: 50%; width: 40px; height: 40px; margin: 0 5px; font-size: 1.2em; cursor: pointer; background-color: black"><i class="fas fa-step-forward" style="color: #fff !important"></i></button>
                     <button id="fullscreen-btn" style="border-radius: 50%; width: 40px; height: 40px; margin: 0 5px; font-size: 1.2em; cursor: pointer; background-color: black"><i style="color: #fff !important" class="fas fa-expand"></i></button>
+                    <button id="reload-btn" style="border-radius: 50%; width: 40px; height: 40px; margin: 0 5px; font-size: 1.2em; cursor: pointer; background-color: black"><i style="color: #fff !important" class="fas fa-sync-alt"></i></button>
                     <button id="clear-btn" style="border-radius: 50%; width: 40px; height: 40px; margin: 0 5px; font-size: 1.2em; cursor: pointer; background-color: black"><i style="color: #fff !important" class="fas fa-paint-brush"></i></button>
                 </div>
             </div>
@@ -1016,6 +1017,18 @@ js_code = """
                     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) {
@@ -1409,6 +1422,16 @@ js_code = """
                     console.log("Attached event listener to fullscreen-btn");
                 });
 
+                waitForElement('#reload-btn', (reloadBtn) => {
+                    reloadBtn.addEventListener('click', () => {
+                        console.log("Reload button clicked");
+                        currentSlide = 0;
+                        updateAudioSources(lectureData.audioFiles);
+                        renderSlide();
+                    });
+                    console.log("Attached event listener to reload-btn");
+                });
+
                 // Initialize audio sources and render first slide
                 updateAudioSources(lectureData.audioFiles);
                 renderSlide();