Update app.py

app.py

@@ -16,11 +16,14 @@ from autogen_agentchat.messages import TextMessage, HandoffMessage, StructuredMe
 from autogen_ext.models.anthropic import AnthropicChatCompletionClient
 from autogen_ext.models.openai import OpenAIChatCompletionClient
 from autogen_ext.models.ollama import OllamaChatCompletionClient
+from autogen_ext.models.azure import AzureAIChatCompletionClient
+from azure.core.credentials import AzureKeyCredential
 import traceback
 import soundfile as sf
 import tempfile
 from pydub import AudioSegment
 from TTS.api import TTS
+import markdown
 
 # Set up logging
 logging.basicConfig(
@@ -34,18 +37,17 @@ logging.basicConfig(
 logger = logging.getLogger(__name__)
 
 # Set up environment
-OUTPUT_DIR = os.path.join(os.getcwd(), "outputs")  # Fallback for local dev
+OUTPUT_DIR = os.path.join(os.getcwd(), "outputs")
 os.makedirs(OUTPUT_DIR, exist_ok=True)
 logger.info(f"Using output directory: {OUTPUT_DIR}")
 os.environ["COQUI_TOS_AGREED"] = "1"
 
-# Initialize TTS model at the top
-
+# Initialize TTS model
 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)
 
-# Define Pydantic model for slide data
+# Define model for slide data
 class Slide(BaseModel):
     title: str
     content: str
@@ -53,7 +55,7 @@ class Slide(BaseModel):
 class SlidesOutput(BaseModel):
     slides: list[Slide]
 
-# Define search_web tool using SerpApi
+# Search eb tool using SerpApi
 def search_web(query: str, serpapi_key: str) -> str:
     try:
         params = {
@@ -88,18 +90,68 @@ def search_web(query: str, serpapi_key: str) -> str:
         logger.error("Unexpected error during search: %s", str(e))
         return None
 
+# Custom function to render Markdown to HTML
+def render_md_to_html(md_content: str) -> str:
+    try:
+        html_content = markdown.markdown(md_content, extensions=['extra', 'fenced_code', 'tables'])
+        return html_content
+    except Exception as e:
+        logger.error("Failed to render Markdown to HTML: %s", str(e))
+        return "<div>Error rendering content</div>"
+
+# Define create_slides tool for generating HTML slides
+def create_slides(slides: list[dict], title: str, output_dir: str = OUTPUT_DIR) -> list[str]:
+    try:
+        html_files = []
+        template_file = os.path.join(os.getcwd(), "slide_template.html")
+        with open(template_file, "r", encoding="utf-8") as f:
+            template_content = f.read()
+        
+        for i, slide in enumerate(slides):
+            slide_number = i + 1
+            md_content = slide['content']
+            html_content = render_md_to_html(md_content)
+            
+            # Replace placeholders in the template
+            slide_html = template_content.replace("<!--SLIDE_NUMBER-->", str(slide_number))
+            slide_html = slide_html.replace("section title", f"Slide {slide_number}, {slide['title']}")
+            slide_html = slide_html.replace("Lecture title", title)
+            slide_html = slide_html.replace("<!--CONTENT-->", html_content)
+            slide_html = slide_html.replace("speaker name", "Prof. AI Feynman")
+            slide_html = slide_html.replace("date", "May 2nd, 2025")
+            
+            html_file = os.path.join(output_dir, f"slide_{slide_number}.html")
+            with open(html_file, "w", encoding="utf-8") as f:
+                f.write(slide_html)
+            logger.info("Generated HTML slide: %s", html_file)
+            html_files.append(html_file)
+        
+        # Save slide content as Markdown files
+        for i, slide in enumerate(slides):
+            slide_number = i + 1
+            md_file = os.path.join(output_dir, f"slide_{slide_number}_content.md")
+            with open(md_file, "w", encoding="utf-8") as f:
+                f.write(slide['content'])
+            logger.info("Saved slide content to Markdown: %s", md_file)
+        
+        return html_files
+    
+    except Exception as e:
+        logger.error("Failed to create HTML slides: %s", str(e))
+        return []
+
 # Define helper function for progress HTML
 def html_with_progress(label, progress):
     return 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;">
-        <div style="width: 70%; background-color: #FFFFFF; border-radius: 80px; overflow: hidden; margin-bottom: 20px;">
+        <div style="width: 70%; background-color: lightgrey; border-radius: 80px; overflow: hidden; margin-bottom: 20px;">
             <div style="width: {progress}%; height: 15px; background-color: #4CAF50; border-radius: 80px;"></div>
         </div>
         <h2 style="font-style: italic; color: #555;">{label}</h2>
     </div>
     """
 
-# Function to get model client based on selected service
+# Get model client based on selected service
 def get_model_client(service, api_key):
     if service == "OpenAI-gpt-4o-2024-08-06":
         return OpenAIChatCompletionClient(model="gpt-4o-2024-08-06", api_key=api_key)
@@ -109,6 +161,19 @@ def get_model_client(service, api_key):
         return OpenAIChatCompletionClient(model="gemini-1.5-flash", api_key=api_key)
     elif service == "Ollama-llama3.2":
         return OllamaChatCompletionClient(model="llama3.2")
+    elif service == "Azure AI Foundry":
+        return AzureAIChatCompletionClient(
+            model="phi-4",
+            endpoint="https://models.inference.ai.azure.com",
+            credential=AzureKeyCredential(os.environ.get("GITHUB_TOKEN", "")),
+            model_info={
+                "json_output": False,
+                "function_calling": False,
+                "vision": False,
+                "family": "unknown",
+                "structured_output": False,
+            }
+        )
     else:
         raise ValueError("Invalid service")
 
@@ -292,61 +357,38 @@ def extract_json_from_message(message):
     logger.warning("Unsupported message type for JSON extraction: %s", type(message))
     return None
 
-# Function to generate Markdown slides
-def generate_markdown_slides(slides, title, speaker="Prof. AI Feynman", date="April 26th, 2025"):
-    try:
-        markdown_slides = []
-        for i, slide in enumerate(slides):
-            slide_number = i + 1
-            content = slide['content']
-            
-            # First slide has no header/footer, others have header and footer
-            if i == 0:
-                slide_md = f"""
-# {slide['title']}
-{content}
-
-**{speaker}**  
-*{date}*
-"""
-            else:
-                slide_md = f"""
-##### Slide {slide_number}, {slide['title']}
-{content}
-
-, {title} {speaker}, {date}
-"""
-            markdown_slides.append(slide_md.strip())
-        
-        logger.info(f"Generated Markdown slides for: {title}: {markdown_slides}")
-        return markdown_slides
-    except Exception as e:
-        logger.error(f"Failed to generate Markdown slides: {str(e)}")
-        logger.error(traceback.format_exc())
-        return None
-
-# Async function to update audio preview
+# Async update audio preview
 async def update_audio_preview(audio_file):
     if audio_file:
         logger.info("Updating audio preview for file: %s", audio_file)
         return audio_file
     return None
 
-# Function to create a zip file of all .txt files
-def create_zip_of_txt_files(txt_file_paths):
+# Create a zip file of .md, .txt, and .mp3 files
+def create_zip_of_files(file_paths):
     zip_path = os.path.join(OUTPUT_DIR, "lecture_files.zip")
     with zipfile.ZipFile(zip_path, 'w', zipfile.ZIP_DEFLATED) as zipf:
-        for file_path in txt_file_paths:
+        for file_path in file_paths:
             if os.path.exists(file_path):
-                zipf.write(file_path, os.path.basename(file_path))
+                _, ext = os.path.splitext(file_path)
+                if ext in ['.md', '.txt', '.mp3']:
+                    zipf.write(file_path, os.path.basename(file_path))
+                    logger.info("Added %s to zip", file_path)
     logger.info("Created zip file: %s", zip_path)
     return zip_path
 
-# Async function to generate lecture materials and audio
+# Access local files
+def get_gradio_file_url(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, speaker_audio, num_slides):
     model_client = get_model_client(api_service, api_key)
     
-    total_slides = num_slides  # Use exactly the number of slides from input
+    # Total slides include user-specified content slides plus Introduction and Closing slides
+    content_slides = num_slides
+    total_slides = content_slides + 2 
     
     research_agent = AssistantAgent(
         name="research_agent",
@@ -360,14 +402,23 @@ async def on_generate(api_service, api_key, serpapi_key, title, lecture_content_
         model_client=model_client,
         handoffs=["script_agent"],
         system_message=f"""
-You are a Slide Agent. Using the research from the conversation history and the specified number of slides ({total_slides}), generate exactly {total_slides} content slides. Output ONLY a JSON array wrapped in ```json ... ``` in a TextMessage, where each slide is an object with 'title' and 'content' keys. Do not include any explanatory text, comments, or other messages. Ensure the JSON is valid and contains exactly {total_slides} slides before proceeding. After outputting the JSON, use the handoff_to_script_agent tool to pass the task to the Script Agent.
-Example output for 2 slides:
+You are a Slide Agent. Using the research from the conversation history and the specified number of content slides ({content_slides}), generate exactly {content_slides} content slides, plus an Introduction slide as the first slide and a Closing slide as the last slide, making a total of {total_slides} slides. 
+
+- The Introduction slide (first slide) should have the title "Introduction to {title}" and content containing only the lecture title, speaker name (Prof. AI Feynman), and date (May 2nd, 2025), centered, in plain text.
+- The Closing slide (last slide) should have the title "Closing" and content containing only "The End\nThank you", centered, in plain text.
+- The remaining {content_slides} slides should be content slides based on the lecture description and audience type, with meaningful titles and content in valid Markdown format.
+
+Output ONLY a JSON array wrapped in ```json ... ``` in a TextMessage, where each slide is an object with 'title' and 'content' keys. After generating the JSON, use the create_slides tool to produce HTML slides, then use the handoff_to_script_agent tool to pass the task to the Script Agent. Do not include any explanatory text or other messages.
+
+Example output for 1 content slide (total 3 slides):
 ```json
 [
-    {{"title": "Slide 1", "content": "Content for slide 1"}},
-    {{"title": "Slide 2", "content": "Content for slide 2"}}
+    {{"title": "Introduction to AI Basics", "content": "AI Basics\nProf. AI Feynman\nMay 2nd, 2025"}},
+    {{"title": "Slide 1: What is AI?", "content": "# What is AI?\n- Definition: Systems that mimic human intelligence\n- Key areas: ML, NLP, Robotics"}},
+    {{"title": "Closing", "content": "The End\nThank you"}}
 ]
 ```""",
+        tools=[create_slides],
         output_content_type=None,
         reflect_on_tool_use=False
     )
@@ -376,13 +427,18 @@ Example output for 2 slides:
         model_client=model_client,
         handoffs=["feynman_agent"],
         system_message=f"""
-You are a Script Agent. Access the JSON array of {total_slides} slides from the conversation history. Generate a narration script (1-2 sentences) for each of the {total_slides} slides, summarizing its content in a clear, academically inclined tone as a professor would deliver it. Avoid using non-verbal fillers such as "um," "you know," or "like." Output ONLY a JSON array wrapped in ```json ... ``` with exactly {total_slides} strings, one script per slide, in the same order. Ensure the JSON is valid and complete. After outputting, use the handoff_to_feynman_agent tool. If scripts cannot be generated, retry once.
-Example for 3 slides:
+You are a Script Agent model after Richard Feynman. Access the JSON array of {total_slides} slides from the conversation history, which includes an Introduction slide, {content_slides} content slides, and a Closing slide. Generate a narration script (1-2 sentences) for each of the {total_slides} slides, summarizing its content in a clear, academically inclined tone, with humour as a professor feynman would deliver it. Avoid using non-verbal fillers such as "um," "you know," or "like." Output ONLY a JSON array wrapped in ```json ... ``` with exactly {total_slides} strings, one script per slide, in the same order. Ensure the JSON is valid and complete. After outputting, use the handoff_to_feynman_agent tool. If scripts cannot be generated, retry once.
+
+- For the Introduction slide, the script should be a welcoming message introducing the lecture.
+- For the Closing slide, the script should be a brief farewell and thank you message.
+- For the content slides, summarize the slide content academically.
+
+Example for 3 slides (1 content slide):
 ```json
 [
-    "Hello everyone, welcome to Agents 101. I am Jaward, your primary instructor for this course.",
-    "Today, we will cover the syllabus for this semester, providing a gentle introduction to AI agents.",
-    "Let us define what an AI agent is: it refers to a system or program capable of autonomously performing tasks on behalf of a user or another system."
+    "Welcome to the lecture on AI Basics. I am Professor AI Feynman, and today we will explore the fundamentals of artificial intelligence.",
+    "Let us begin by defining artificial intelligence: it refers to systems that mimic human intelligence, spanning key areas such as machine learning, natural language processing, and robotics.",
+    "That concludes our lecture on AI Basics. Thank you for your attention, and I hope you found this session insightful."
 ]
 ```""",
         output_content_type=None,
@@ -393,8 +449,8 @@ Example for 3 slides:
         model_client=model_client,
         handoffs=[],
         system_message=f"""
-You are Agent Feynman. Review the slides and scripts from the conversation history to ensure coherence, completeness, and that exactly {total_slides} slides and {total_slides} scripts are received. Output a confirmation message summarizing the number of slides and scripts received. If slides or scripts are missing, invalid, or do not match the expected count ({total_slides}), report the issue clearly. Use 'TERMINATE' to signal completion.
-Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is coherent. TERMINATE'
+You are Agent Feynman. Review the slides and scripts from the conversation history to ensure coherence, completeness, and that exactly {total_slides} slides and {total_slides} scripts are received, including the Introduction and Closing slides. Verify that HTML slide files exist in the outputs directory. Output a confirmation message summarizing the number of slides, scripts, and HTML files status. If slides, scripts, or HTML files are missing, invalid, or do not match the expected count ({total_slides}), report the issue clearly. Use 'TERMINATE' to signal completion.
+Example: 'Received {total_slides} slides, {total_slides} scripts, and HTML files. Lecture is coherent. TERMINATE'
 """)
     
     swarm = Swarm(
@@ -406,7 +462,7 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
     label = "Research: in progress..."
     yield (
         html_with_progress(label, progress),
-        [], None
+        []
     )
     await asyncio.sleep(0.1)
     
@@ -414,13 +470,14 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
     Lecture Title: {title}
     Lecture Content Description: {lecture_content_description}
     Audience: {lecture_type}
-    Number of Slides: {total_slides}
+    Number of Content Slides: {content_slides}
     Please start by researching the topic, or proceed without research if search is unavailable.
     """
-    logger.info("Starting lecture generation for title: %s with %d slides", title, total_slides)
+    logger.info("Starting lecture generation for title: %s with %d content slides (total %d slides)", title, content_slides, total_slides)
     
     slides = None
     scripts = None
+    html_files = []
     error_html = """
     <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;">Failed to generate lecture materials</h2>
@@ -452,7 +509,7 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
                     label = "Slides: generating..."
                     yield (
                         html_with_progress(label, progress),
-                        [], None
+                        []
                     )
                     await asyncio.sleep(0.1)
                 elif source == "slide_agent" and message.target == "script_agent":
@@ -467,7 +524,7 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
                             slide_retry_count += 1
                             logger.info("Retrying slide generation (attempt %d/%d)", slide_retry_count, max_retries)
                             retry_message = TextMessage(
-                                content=f"Please generate exactly {total_slides} slides as per your instructions.",
+                                content=f"Please generate exactly {total_slides} slides (Introduction, {content_slides} content slides, and Closing) as per your instructions.",
                                 source="user",
                                 recipient="slide_agent"
                             )
@@ -477,7 +534,7 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
                     label = "Scripts: generating..."
                     yield (
                         html_with_progress(label, progress),
-                        [], None
+                        []
                     )
                     await asyncio.sleep(0.1)
                 elif source == "script_agent" and message.target == "feynman_agent":
@@ -491,7 +548,7 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
                     label = "Review: in progress..."
                     yield (
                         html_with_progress(label, progress),
-                        [], None
+                        []
                     )
                     await asyncio.sleep(0.1)
             
@@ -501,7 +558,7 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
                 label = "Slides: generating..."
                 yield (
                     html_with_progress(label, progress),
-                    [], None
+                    []
                 )
                 await asyncio.sleep(0.1)
             
@@ -516,25 +573,21 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
                             slide_retry_count += 1
                             logger.info("Retrying slide generation (attempt %d/%d)", slide_retry_count, max_retries)
                             retry_message = TextMessage(
-                                content=f"Please generate exactly {total_slides} slides as per your instructions.",
+                                content=f"Please generate exactly {total_slides} slides (Introduction, {content_slides} content slides, and Closing) as per your instructions.",
                                 source="user",
                                 recipient="slide_agent"
                             )
                             task_result.messages.append(retry_message)
                             continue
-                    for i, slide in enumerate(slides):
-                        content_file = os.path.join(OUTPUT_DIR, f"slide_{i+1}_content.txt")
-                        try:
-                            with open(content_file, "w", encoding="utf-8") as f:
-                                f.write(slide["content"])
-                            logger.info("Saved slide content to %s", content_file)
-                        except Exception as e:
-                            logger.error("Error saving slide content to %s: %s", content_file, str(e))
+                    # Generate HTML slides
+                    html_files = create_slides(slides, title)
+                    if not html_files:
+                        logger.error("Failed to generate HTML slides")
                     progress = 50
                     label = "Scripts: generating..."
                     yield (
                         html_with_progress(label, progress),
-                        [], None
+                        []
                     )
                     await asyncio.sleep(0.1)
                 else:
@@ -543,7 +596,7 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
                         slide_retry_count += 1
                         logger.info("Retrying slide generation (attempt %d/%d)", slide_retry_count, max_retries)
                         retry_message = TextMessage(
-                            content=f"Please generate exactly {total_slides} slides as per your instructions.",
+                            content=f"Please generate exactly {total_slides} slides (Introduction, {content_slides} content slides, and Closing) as per your instructions.",
                             source="user",
                             recipient="slide_agent"
                         )
@@ -568,7 +621,7 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
                     label = "Scripts generated and saved. Reviewing..."
                     yield (
                         html_with_progress(label, progress),
-                        [], None
+                        []
                     )
                     await asyncio.sleep(0.1)
                 else:
@@ -588,20 +641,18 @@ 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 = create_zip_of_txt_files(txt_file_paths)
+                file_paths = [f for f in os.listdir(OUTPUT_DIR) if f.endswith(('.md', '.txt'))]
+                file_paths.sort()
+                file_paths = [os.path.join(OUTPUT_DIR, f) for f in file_paths]
                 yield (
                     html_with_progress(label, progress),
-                    txt_file_paths,
-                    zip_file
+                    file_paths
                 )
                 await asyncio.sleep(0.1)
         
         logger.info("Slides state: %s", "Generated" if slides else "None")
         logger.info("Scripts state: %s", "Generated" if scripts else "None")
+        logger.info("HTML files state: %s", "Generated" if html_files else "None")
         if not slides or not scripts:
             error_message = f"Failed to generate {'slides and scripts' if not slides and not scripts else 'slides' if not slides else 'scripts'}"
             error_message += f". Received {len(slides) if slides else 0} slides and {len(scripts) if scripts else 0} scripts."
@@ -612,7 +663,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,
-                [], None
+                []
             )
             return
         
@@ -625,7 +676,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>
                 """,
-                [], None
+                []
             )
             return
         
@@ -638,7 +689,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>
                 """,
-                [], None
+                []
             )
             return
         
@@ -651,192 +702,21 @@ 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>
                 """,
-                [], None
+                []
             )
             return
         
-        markdown_slides = generate_markdown_slides(slides, title)
-        if not markdown_slides:
-            logger.error("Failed to generate Markdown slides")
-            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;">Failed to generate slides</h2>
-                    <p style="margin-top: 20px;">Please try again.</p>
-                </div>
-                """,
-                [], None
-            )
-            return
-        
-        # Generate initial audio timeline with placeholders
+        # Access the generated HTML files
+        html_file_urls = [get_gradio_file_url(html_file) for html_file in html_files]
         audio_urls = [None] * len(scripts)
         audio_timeline = ""
         for i in range(len(scripts)):
             audio_timeline += f'<audio id="audio-{i+1}" controls src="" style="display: inline-block; margin: 0 10px; width: 200px;"><span>Loading...</span></audio>'
         
-        # Collect .txt files for download (already done above, but ensure it's available)
-        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 = create_zip_of_txt_files(txt_file_paths)
-        
-        # Yield the lecture materials immediately after slides and scripts are ready
-        slides_info = json.dumps({"slides": markdown_slides, "audioFiles": audio_urls})
-        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;"></div>
-            <div style="padding: 20px; text-align: center;">
-                <div 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 = {slides_info};
-            let currentSlide = 0;
-            const totalSlides = lectureData.slides.length;
-            let audioElements = [];
-            let isPlaying = false;
-
-            // 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]) {{
-                    // Since the content is already Markdown-rendered by Gradio, we can set it directly
-                    slideContent.innerHTML = lectureData.slides[currentSlide].replace(/\\n/g, '<br>');
-                    console.log("Rendering slide:", lectureData.slides[currentSlide]);
-                }} else {{
-                    slideContent.innerHTML = '<h2>No slide content available</h2>';
-                    console.log("No slide content for index:", currentSlide);
-                }}
-            }}
-
-            function updateSlide() {{
-                renderSlide();
-                audioElements.forEach(audio => {{
-                    if (audio && audio.pause) {{
-                        audio.pause();
-                        audio.currentTime = 0;
-                    }}
-                }});
-            }}
-
-            function updateAudioSources(audioUrls) {{
-                audioUrls.forEach((url, index) => {{
-                    const audio = audioElements[index];
-                    if (audio && url && audio.src !== url) {{
-                        audio.src = url;
-                        audio.load(); // Force reload the audio element
-                        console.log(`Updated audio-${{index+1}} src to:`, url);
-                    }}
-                }});
-            }}
-
-            function prevSlide() {{
-                if (currentSlide > 0) {{
-                    currentSlide--;
-                    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++;
-                    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 || !isPlaying) {{
-                        isPlaying = false;
-                        playBtn.textContent = '⏯';
-                        return;
-                    }}
-                    currentSlide = index;
-                    updateSlide();
-                    const audio = audioElements[index];
-                    if (audio && audio.play) {{
-                        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);
-                    }});
-                }} 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();
-        </script>
-        """
-        logger.info("Yielding lecture materials before audio generation")
-        yield (
-            html_output,
-            txt_file_paths,
-            zip_file
-        )
+        file_paths = [f for f in os.listdir(OUTPUT_DIR) if f.endswith(('.md', '.txt'))]
+        file_paths.sort()
+        file_paths = [os.path.join(OUTPUT_DIR, f) for f in file_paths]
         
-        # Now generate audio files progressively
         audio_files = []
         validated_speaker_wav = await validate_and_convert_speaker_audio(speaker_audio)
         if not validated_speaker_wav:
@@ -848,7 +728,7 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
                     <p style="margin-top: 20px;">Please upload a valid MP3 or WAV audio file and try again.</p>
                 </div>
                 """,
-                [], None
+                []
             )
             return
         
@@ -869,11 +749,10 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
                 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)}..."
+                label = f"Generating audio for slide {i + 1}/{len(scripts)}..."
                 yield (
-                    html_output,
-                    txt_file_paths,
-                    zip_file
+                    html_with_progress(label, progress),
+                    file_paths
                 )
                 await asyncio.sleep(0.1)
                 continue
@@ -894,171 +773,13 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
                     
                     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}"
+                    audio_urls[i] = get_gradio_file_url(audio_file)
                     progress = 90 + ((i + 1) / len(scripts)) * 10
-                    label = f"Generated audio for slide {i + 1}/{len(scripts)}..."
-                    
-                    # Update audio timeline with the new audio URL
-                    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 src="" style="display: inline-block; margin: 0 10px; width: 200px;"><span>Loading...</span></audio>'
-                    
-                    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;"></div>
-                        <div style="padding: 20px; text-align: center;">
-                            <div 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 = {slides_info};
-                        let currentSlide = 0;
-                        const totalSlides = lectureData.slides.length;
-                        let audioElements = [];
-                        let isPlaying = false;
-
-                        // Populate audio elements
-                        for (let i = 0; i < totalSlides; i++) {{
-                            const audio = document.getElementById(`audio-${{i+1}}`);
-                            audioElements.push(audio);
-                        }}
-
-                        // Update audio sources dynamically
-                        lectureData.audioFiles = {json.dumps(audio_urls)};
-                        updateAudioSources(lectureData.audioFiles);
-
-                        function renderSlide() {{
-                            const slideContent = document.getElementById('slide-content');
-                            if (lectureData.slides[currentSlide]) {{
-                                slideContent.innerHTML = lectureData.slides[currentSlide].replace(/\\n/g, '<br>');
-                                console.log("Rendering slide:", lectureData.slides[currentSlide]);
-                            }} else {{
-                                slideContent.innerHTML = '<h2>No slide content available</h2>';
-                                console.log("No slide content for index:", currentSlide);
-                            }}
-                        }}
-
-                        function updateSlide() {{
-                            renderSlide();
-                            audioElements.forEach(audio => {{
-                                if (audio && audio.pause) {{
-                                    audio.pause();
-                                    audio.currentTime = 0;
-                                }}
-                            }});
-                        }}
-
-                        function updateAudioSources(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);
-                                }}
-                            }});
-                        }}
-
-                        function prevSlide() {{
-                            if (currentSlide > 0) {{
-                                currentSlide--;
-                                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++;
-                                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 || !isPlaying) {{
-                                    isPlaying = false;
-                                    playBtn.textContent = '⏯';
-                                    return;
-                                }}
-                                currentSlide = index;
-                                updateSlide();
-                                const audio = audioElements[index];
-                                if (audio && audio.play) {{
-                                    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);
-                                }});
-                            }} 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();
-                    </script>
-                    """
+                    label = f"Generating audio for slide {i + 1}/{len(scripts)}..."
+                    file_paths.append(audio_file)  
                     yield (
-                        html_output,
-                        txt_file_paths,
-                        zip_file
+                        html_with_progress(label, progress),
+                        file_paths
                     )
                     await asyncio.sleep(0.1)
                     break
@@ -1069,15 +790,52 @@ Example: 'Received {total_slides} slides and {total_slides} scripts. Lecture is
                         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)}..."
+                        label = f"Generating audio for slide {i + 1}/{len(scripts)}..."
                         yield (
-                            html_output,
-                            txt_file_paths,
-                            zip_file
+                            html_with_progress(label, progress),
+                            file_paths
                         )
                         await asyncio.sleep(0.1)
                         break
         
+        # Create zip file with all materials except .html files
+        zip_file = create_zip_of_files(file_paths)
+        file_paths.append(zip_file)
+        
+        # Slide hack: Render the lecture container with iframe containing HTML slides
+        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 src="" style="display: inline-block; margin: 0 10px; width: 200px;"><span>Audio unavailable</span></audio>'
+        
+        slides_info = json.dumps({"htmlFiles": html_file_urls, "audioFiles": audio_urls})
+        html_output = f"""
+        <div id="lecture-data" style="display: none;">{slides_info}</div>
+        <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;">
+                <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;">
+                    {audio_timeline}
+                </div>
+                <div style="display: center; 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;"><i class="fas fa-step-backward"></i></button>
+                    <button id="play-btn" style="border-radius: 50%; width: 40px; height: 40px; margin: 0 5px; font-size: 1.2em; cursor: pointer;"><i class="fas fa-play"></i></button>
+                    <button id="next-btn" style="border-radius: 50%; width: 40px; height: 40px; margin: 0 5px; font-size: 1.2em; cursor: pointer;"><i class="fas fa-step-forward"></i></button>
+                    <button id="fullscreen-btn" style="border-radius: 50%; width: 40px; height: 40px; margin: 0 5px; font-size: 1.2em; cursor: pointer;"><i class="fas fa-expand"></i></button>
+                </div>
+            </div>
+        </div>
+        """
+        logger.info("Yielding final lecture materials after audio generation")
+        yield (
+            html_output,
+            file_paths
+        )
+        
         logger.info("Lecture generation completed successfully")
     
     except Exception as e:
@@ -1090,16 +848,379 @@ 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>
             """,
-            [], None
+            []
         )
         return
 
+# custom js for lecture container features
+js_code = """
+() => {
+    // Function to wait for an element to appear in the DOM
+    function waitForElement(selector, callback, maxAttempts = 50, interval = 100) {
+        let attempts = 0;
+        const intervalId = setInterval(() => {
+            const element = document.querySelector(selector);
+            if (element) {
+                clearInterval(intervalId);
+                console.log(`Element ${selector} found after ${attempts} attempts`);
+                callback(element);
+            } else if (attempts >= maxAttempts) {
+                clearInterval(intervalId);
+                console.error(`Element ${selector} not found after ${maxAttempts} attempts`);
+            }
+            attempts++;
+        }, interval);
+    }
+
+    // Main initialization function
+    function initializeSlides() {
+        console.log("Initializing slides...");
+
+        // Wait for lecture-data to load the JSON data
+        waitForElement('#lecture-data', (dataElement) => {
+            if (!dataElement.textContent) {
+                console.error("Lecture data element is empty");
+                return;
+            }
+            let lectureData;
+            try {
+                lectureData = JSON.parse(dataElement.textContent);
+                console.log("Lecture data parsed successfully:", lectureData);
+            } catch (e) {
+                console.error("Failed to parse lecture data:", e);
+                return;
+            }
+
+            if (!lectureData.htmlFiles || lectureData.htmlFiles.length === 0) {
+                console.error("No HTML files found in lecture data");
+                return;
+            }
+
+            let currentSlide = 0;
+            const totalSlides = lectureData.htmlFiles.length;
+            let audioElements = [];
+            let isPlaying = false;
+            let hasNavigated = false; // Track if user has used prev/next buttons
+
+            // Wait for slide-content element
+            waitForElement('#slide-content', (slideContent) => {
+                console.log("Slide content element found");
+
+                // Initialize 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`);
+                    }
+                }
+
+                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;
+                                        // Base font size: 12px max on large screens, scale down to 8px on small screens
+                                        let baseFontSize = Math.min(12, Math.max(8, 12 * (screenWidth / 1920))); // Scale with screen width (1920px as reference)
+                                        // Adjust inversely with content length
+                                        const adjustedFontSize = Math.max(8, baseFontSize * (1000 / (textLength + 100))); // Minimum 8px, scale down with length
+                                        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}px width`);
+                                    }
+                                };
+                            });
+                        } else {
+                            console.error("Iframe not found");
+                        }
+                    } else {
+                        const iframe = document.getElementById('slide-iframe');
+                        if (iframe) {
+                            iframe.src = "about:blank";
+                            console.log("No valid slide content for index:", currentSlide);
+                        }
+                    }
+                }
+
+                function updateSlide(callback) {
+                    console.log("Updating slide to index:", currentSlide);
+                    renderSlide();
+                    // Pause and reset all audio elements
+                    audioElements.forEach(audio => {
+                        if (audio && audio.pause) {
+                            audio.pause();
+                            audio.currentTime = 0;
+                            audio.style.border = 'none'; // Reset border
+                            console.log("Paused and reset audio:", audio.id);
+                        }
+                    });
+                    // Wait briefly to ensure pause completes before proceeding
+                    setTimeout(() => {
+                        if (callback) callback();
+                    }, 100);
+                }
+
+                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);
+                        } else if (!audio) {
+                            console.error(`Audio element at index ${index} not found`);
+                        }
+                    });
+                }
+
+                function prevSlide() {
+                    console.log("Previous button clicked, current slide:", currentSlide);
+                    hasNavigated = true; // User has navigated
+                    if (currentSlide > 0) {
+                        currentSlide--;
+                        updateSlide(() => {
+                            const audio = audioElements[currentSlide];
+                            if (audio && audio.play && isPlaying) {
+                                audio.style.border = '50px solid #50f150';
+                                audio.style.borderRadius = '50px';
+                                audio.play().catch(e => console.error('Audio play failed:', e));
+                            }
+                        });
+                    } else {
+                        console.log("Already at first slide");
+                    }
+                }
+
+                function nextSlide() {
+                    console.log("Next button clicked, current slide:", currentSlide);
+                    hasNavigated = true; // User has navigated
+                    if (currentSlide < totalSlides - 1) {
+                        currentSlide++;
+                        updateSlide(() => {
+                            const audio = audioElements[currentSlide];
+                            if (audio && audio.play && isPlaying) {
+                                audio.style.border = '2px solid lightgreen';
+                                audio.play().catch(e => console.error('Audio play failed:', e));
+                            }
+                        });
+                    } else {
+                        console.log("Already at last slide");
+                    }
+                }
+
+                function playAll() {
+                    console.log("Play button clicked, isPlaying:", isPlaying);
+                    const playBtn = document.getElementById('play-btn');
+                    if (!playBtn) {
+                        console.error("Play button not found");
+                        return;
+                    }
+                    const playIcon = playBtn.querySelector('i');
+                    if (playIcon.className.includes('fa-pause')) {
+                        // Pause playback
+                        isPlaying = false;
+                        audioElements.forEach(audio => {
+                            if (audio && audio.pause) {
+                                audio.pause();
+                                audio.currentTime = 0;
+                                audio.style.border = 'none';
+                                console.log("Paused audio:", audio.id);
+                            }
+                        });
+                        playIcon.className = 'fas fa-play';
+                        return;
+                    }
+                    // Start playback
+                    currentSlide = 0;
+                    let index = 0;
+                    isPlaying = true;
+                    playIcon.className = 'fas fa-pause';
+                    updateSlide(() => {
+                        function playNext() {
+                            if (index >= 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;
+                            }
+                            currentSlide = index;
+                            updateSlide(() => {
+                                const audio = audioElements[index];
+                                if (audio && audio.play) {
+                                    // Highlight the current audio element
+                                    audioElements.forEach(a => a.style.border = 'none');
+                                    audio.style.border = '2px solid lightgreen';
+                                    console.log(`Attempting to play audio for slide ${index + 1}`);
+                                    audio.play().then(() => {
+                                        console.log(`Playing audio for slide ${index + 1}`);
+                                        // Remove any existing ended listeners to prevent duplicates
+                                        audio.onended = null;
+                                        audio.addEventListener('ended', () => {
+                                            console.log(`Audio ended for slide ${index + 1}`);
+                                            index++;
+                                            playNext();
+                                        }, { once: true });
+                                        // Fallback: Check if audio is stuck (e.g., duration not advancing)
+                                        const checkDuration = setInterval(() => {
+                                            if (!isPlaying) {
+                                                clearInterval(checkDuration);
+                                                return;
+                                            }
+                                            if (audio.duration && audio.currentTime >= audio.duration - 0.1) {
+                                                console.log(`Fallback: Audio for slide ${index + 1} considered ended`);
+                                                clearInterval(checkDuration);
+                                                audio.onended = null; // Prevent duplicate triggers
+                                                index++;
+                                                playNext();
+                                            }
+                                        }, 1000);
+                                    }).catch(e => {
+                                        console.error(`Audio play failed for slide ${index + 1}:`, e);
+                                        // Retry playing the same slide after a short delay
+                                        setTimeout(() => {
+                                            audio.play().then(() => {
+                                                console.log(`Retry succeeded for slide ${index + 1}`);
+                                                audio.onended = null;
+                                                audio.addEventListener('ended', () => {
+                                                    console.log(`Audio ended for slide ${index + 1}`);
+                                                    index++;
+                                                    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 ${index + 1} considered ended`);
+                                                        clearInterval(checkDuration);
+                                                        audio.onended = null;
+                                                        index++;
+                                                        playNext();
+                                                    }
+                                                }, 1000);
+                                            }).catch(e => {
+                                                console.error(`Retry failed for slide ${index + 1}:`, e);
+                                                index++; // Move to next slide if retry fails
+                                                playNext();
+                                            });
+                                        }, 500);
+                                    });
+                                } else {
+                                    index++;
+                                    playNext();
+                                }
+                            });
+                        }
+                        playNext();
+                    });
+                }
+
+                function toggleFullScreen() {
+                    console.log("Fullscreen button clicked");
+                    const container = document.getElementById('lecture-container');
+                    if (!container) {
+                        console.error("Lecture container not found");
+                        return;
+                    }
+                    if (!document.fullscreenElement) {
+                        container.requestFullscreen().catch(err => {
+                            console.error('Error enabling full-screen:', err);
+                        });
+                    } else {
+                        document.exitFullscreen();
+                        console.log("Exited fullscreen");
+                    }
+                }
+
+                // Attach event listeners
+                waitForElement('#prev-btn', (prevBtn) => {
+                    prevBtn.addEventListener('click', prevSlide);
+                    console.log("Attached event listener to prev-btn");
+                });
+
+                waitForElement('#play-btn', (playBtn) => {
+                    playBtn.addEventListener('click', playAll);
+                    console.log("Attached event listener to play-btn");
+                });
+
+                waitForElement('#next-btn', (nextBtn) => {
+                    nextBtn.addEventListener('click', nextSlide);
+                    console.log("Attached event listener to next-btn");
+                });
+
+                waitForElement('#fullscreen-btn', (fullscreenBtn) => {
+                    fullscreenBtn.addEventListener('click', toggleFullScreen);
+                    console.log("Attached event listener to fullscreen-btn");
+                });
+
+                // Initialize audio sources and render first slide
+                updateAudioSources(lectureData.audioFiles);
+                renderSlide();
+                console.log("Initial slide rendered, starting at slide:", currentSlide + 1);
+            });
+        });
+    }
+
+    // Observe DOM changes to detect when lecture container is added
+    const observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+            if (mutation.addedNodes.length) {
+                const lectureContainer = document.getElementById('lecture-container');
+                if (lectureContainer) {
+                    console.log("Lecture container detected in DOM");
+                    observer.disconnect(); // Stop observing once found
+                    initializeSlides();
+                }
+            }
+        });
+    });
+
+    // Start observing the document body for changes
+    observer.observe(document.body, { childList: true, subtree: true });
+    console.log("Started observing DOM for lecture container");
+}
+"""
+
 # Gradio interface
-with gr.Blocks(title="Agent Feynman") as demo:
-    gr.Markdown("# <center>Learn Anything With Professor AI Feynman</center>")
+with gr.Blocks(
+    title="Agent Feynman",
+    css="""
+    #lecture-container {font-family: 'Times New Roman', Times, serif;}
+    #slide-content {font-size: 48px; line-height: 1.2;}
+    #form-group {box-shadow: 0 0 2rem rgba(0, 0, 0, .14) !important; border-radius: 30px; font-weight: 900; color: #000; background-color: white;}
+    #download {box-shadow: 0 0 2rem rgba(0, 0, 0, .14) !important; border-radius: 30px;}
+    #slide-display {box-shadow: 0 0 2rem rgba(0, 0, 0, .14) !important; border-radius: 30px; background-color: white;}
+    button {transition: background-color 0.3s;}
+    button:hover {background-color: #e0e0e0;}
+    """,
+    js=js_code,
+    head='<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">'
+) as demo:
+    gr.Markdown("""
+                # <center>Professor AI Feynman: A Multi-Agent Tool for Learning Anything the Feynman way.</center>
+                ## <center>(Jaward Sesay - Microsoft AI Agent Hackathon Submission)</center>""")
     with gr.Row():
         with gr.Column(scale=1):
-            with gr.Group():
+            with gr.Group(elem_id="form-group"):
                 title = gr.Textbox(label="Lecture Title", placeholder="e.g. Introduction to AI")
                 lecture_content_description = gr.Textbox(label="Lecture Content Description", placeholder="e.g. Focus on recent advancements")
                 lecture_type = gr.Dropdown(["Conference", "University", "High school"], label="Audience", value="University")
@@ -1108,26 +1229,26 @@ with gr.Blocks(title="Agent Feynman") as demo:
                         "OpenAI-gpt-4o-2024-08-06",
                         "Anthropic-claude-3-sonnet-20240229",
                         "Google-gemini-1.5-flash",
-                        "Ollama-llama3.2"
+                        "Ollama-llama3.2",
+                        "Azure AI Foundry"
                     ],
                     label="Model",
                     value="Google-gemini-1.5-flash"
                 )
-                api_key = gr.Textbox(label="Model Provider API Key", type="password", placeholder="Not required for Ollama")
-                serpapi_key = gr.Textbox(label="SerpApi Key", type="password", placeholder="Enter your SerpApi key (optional)")
-                num_slides = gr.Slider(1, 20, step=1, label="Number of Slides", value=3)
-                speaker_audio = gr.Audio(label="Speaker sample audio (MP3 or WAV)", type="filepath", elem_id="speaker-audio")
+                api_key = gr.Textbox(label="Model Provider API Key", type="password", placeholder="Not required for Ollama or Azure AI Foundry (use GITHUB_TOKEN env var)")
+                serpapi_key = gr.Textbox(label="SerpApi Key (For Research Agent)", type="password", placeholder="Enter your SerpApi key (optional)")
+                num_slides = gr.Slider(1, 20, step=1, label="Number of Content Slides", value=3)
+                speaker_audio = gr.Audio(label="Speaker sample speech (MP3 or WAV)", type="filepath", elem_id="speaker-audio")
                 generate_btn = gr.Button("Generate Lecture")
         with gr.Column(scale=2):
             default_slide_html = """
-            <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="font-style: italic; color: #555;">Waiting for lecture content...</h2>
+            <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: 30px; box-shadow: 0 0 2rem rgba(0, 0, 0, .14) !important;">
+                <h2 style="font-style: italic; color: #000;">Waiting for lecture content...</h2>
                 <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)
-            file_output = gr.File(label="Download Generated Files")
-            zip_output = gr.File(label="Download All Files as ZIP")
+            slide_display = gr.HTML(label="Lecture Slides", value=default_slide_html, elem_id="slide-display")
+            file_output = gr.File(label="Download Lecture Materials", elem_id="download")
     
     speaker_audio.change(
         fn=update_audio_preview,
@@ -1138,7 +1259,7 @@ with gr.Blocks(title="Agent Feynman") as demo:
     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, zip_output]
+        outputs=[slide_display, file_output]
     )
 
 if __name__ == "__main__":