Update app.py

app.py

@@ -1,5 +1,6 @@
-# Professor AI Feynman: A Multi-Agent Tool for Learning Anything the Feynman way
-# Jaward Sesay - Microsoft AI Agent Hackathon Submission April 2025
+# Lectūra Research Demo: A Multi-Agent Tool for Self-taught Mastery.
+# Author: Jaward Sesay
+# License: All rights reserved.
 import os
 import json
 import re
@@ -28,6 +29,19 @@ import tempfile
 from pydub import AudioSegment
 from TTS.api import TTS
 import markdown
+import PyPDF2
+import io
+import copy
+
+def get_instructor_name(speaker):
+    instructor_names = {
+        "feynman.mp3": "Professor Richard Feynman",
+        "einstein.mp3": "Professor Albert Einstein",
+        "samantha.mp3": "Professor Samantha",
+        "socrates.mp3": "Professor Socrates",
+        "professor_lectura_male.mp3": "Professor Lectūra"
+    }
+    return instructor_names.get(speaker, "Professor Lectūra")
 
 # Set up logging
 logging.basicConfig(
@@ -42,8 +56,11 @@ logger = logging.getLogger(__name__)
 
 # Set up environment
 OUTPUT_DIR = os.path.join(os.getcwd(), "outputs")
+UPLOAD_DIR = os.path.join(os.getcwd(), "uploads")
 os.makedirs(OUTPUT_DIR, exist_ok=True)
+os.makedirs(UPLOAD_DIR, exist_ok=True)
 logger.info(f"Using output directory: {OUTPUT_DIR}")
+logger.info(f"Using upload directory: {UPLOAD_DIR}")
 os.environ["COQUI_TOS_AGREED"] = "1"
 
 # Initialize TTS model
@@ -104,7 +121,7 @@ def render_md_to_html(md_content: str) -> str:
         return "<div>Error rendering content</div>"
 
 # Slide tool for generating HTML slides used by slide_agent
-def create_slides(slides: list[dict], title: str, output_dir: str = OUTPUT_DIR) -> list[str]:
+def create_slides(slides: list[dict], title: str, instructor_name: str, output_dir: str = OUTPUT_DIR) -> list[str]:
     try:
         html_files = []
         template_file = os.path.join(os.getcwd(), "slide_template.html")
@@ -122,7 +139,7 @@ def create_slides(slides: list[dict], title: str, output_dir: str = OUTPUT_DIR)
             slide_html = slide_html.replace("section title", f"{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("speaker name", instructor_name)
             slide_html = slide_html.replace("date", date)
             
             html_file = os.path.join(output_dir, f"slide_{slide_number}.html")
@@ -205,7 +222,7 @@ def clean_script_text(script):
 async def validate_and_convert_speaker_audio(speaker_audio):
     if not speaker_audio or not os.path.exists(speaker_audio):
         logger.warning("Speaker audio file does not exist: %s. Using default voice.", speaker_audio)
-        default_voice = os.path.join(os.path.dirname(__file__), "feynman.mp3")
+        default_voice = os.path.join(os.path.dirname(__file__), "professor_lectura_male.mp3")
         if os.path.exists(default_voice):
             speaker_audio = default_voice
         else:
@@ -390,6 +407,13 @@ def get_gradio_file_url(local_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):
     model_client = get_model_client(api_service, api_key)
+    
+    # Get the speaker from the speaker_audio path
+    speaker = os.path.basename(speaker_audio) if speaker_audio else "professor_lectura_male.mp3"
+    logger.info(f"Selected speaker file: {speaker}")
+    
+    instructor_name = get_instructor_name(speaker)
+    logger.info(f"Using instructor: {instructor_name}")
 
     if os.path.exists(OUTPUT_DIR):
         try:
@@ -425,7 +449,7 @@ async def on_generate(api_service, api_key, serpapi_key, title, lecture_content_
         system_message=f"""
 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 "{title}" and content containing only the lecture title, speaker name (Prof. AI Feynman), and date {date}, centered, in plain text.
+- The Introduction slide (first slide) should have the title "{title}" and content containing only the lecture title, speaker name ({get_instructor_name(speaker_audio)}), and date {date}, 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, audience type, and lecture style ({lecture_style}), with meaningful titles and content in valid Markdown format. Adapt the content to the lecture style to suit diverse learners:
   - Feynman: Explains complex ideas with simplicity, clarity, and enthusiasm, emulating Richard Feynman's teaching style.
@@ -439,7 +463,7 @@ Output ONLY a JSON array wrapped in ```json ... ``` in a TextMessage, where each
 Example output for 1 content slide (total 3 slides):
 ```json
 [
-    {{"title": "Introduction to AI Basics", "content": "AI Basics\nProf. AI Feynman\nMay 2nd, 2025"}},
+    {{"title": "Introduction to AI Basics", "content": "AI Basics\n{get_instructor_name(speaker_audio)}\n{date}"}},
     {{"title": "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"}}
 ]
@@ -451,22 +475,16 @@ Example output for 1 content slide (total 3 slides):
     script_agent = AssistantAgent(
         name="script_agent",
         model_client=model_client,
-        handoffs=["feynman_agent"],
+        handoffs=["instructor_agent"],
         system_message=f"""
-You are a Script Agent modeled 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 humor as Professor Feynman would deliver it. Ensure the lecture is engaging, covers the fundamental requirements of the topic, and aligns with the lecture style ({lecture_style}) to suit diverse learners:
-  - Feynman: Explains complex ideas with simplicity, clarity, and enthusiasm, emulating Richard Feynman's teaching style.
-  - Socratic: Poses thought-provoking questions to guide learners to insights without requiring direct interaction.
-  - Narrative: Use storytelling or analogies to explain concepts.
-  - Analytical: Focus on data, equations, or logical breakdowns.
-  - Humorous: Infuses wit and light-hearted anecdotes to make content engaging and memorable.
-  - Reflective: Encourages introspection with a calm, contemplative tone to deepen understanding.
+You are a Script Agent. 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. Ensure the lecture is engaging, covers the fundamental requirements of the topic, and aligns with the lecture style ({lecture_style}) to suit diverse learners. The lecture will be delivered by {instructor_name}.
 
-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.
+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_instructor_agent tool. If scripts cannot be generated, retry once.
 
 Example for 3 slides (1 content slide):
 ```json
 [
-    "Welcome to the lecture on AI Basics. I am Professor AI Feynman, and today we will explore the fundamentals of artificial intelligence.",
+    "Welcome to the lecture on AI Basics. I am {instructor_name}, 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."
 ]
@@ -474,17 +492,72 @@ Example for 3 slides (1 content slide):
         output_content_type=None,
         reflect_on_tool_use=False
     )
-    feynman_agent = AssistantAgent(
-        name="feynman_agent",
+
+    def get_instructor_prompt(speaker, lecture_style):
+        base_prompts = {
+            "feynman.mp3": f"You are {instructor_name}, known for your ability to explain complex concepts with remarkable clarity and enthusiasm. Your teaching style is characterized by:",
+            "einstein.mp3": f"You are {instructor_name}, known for your profound insights and ability to connect abstract concepts to the physical world. Your teaching style is characterized by:",
+            "samantha.mp3": f"You are {instructor_name}, known for your engaging and accessible approach to teaching. Your teaching style is characterized by:",
+            "socrates.mp3": f"You are {instructor_name}, known for your method of questioning and guiding students to discover knowledge themselves. Your teaching style is characterized by:",
+            "professor_lectura_male.mp3": f"You are {instructor_name}, known for your clear and authoritative teaching style. Your teaching style is characterized by:"
+        }
+
+        style_characteristics = {
+            "Feynman - Simplifies complex ideas with enthusiasm": """
+- Breaking down complex ideas into simple, understandable parts
+- Using analogies and real-world examples
+- Maintaining enthusiasm and curiosity throughout
+- Encouraging critical thinking and questioning
+- Making abstract concepts tangible and relatable""",
+
+            "Socratic - Guides insights with probing questions": """
+- Using thought-provoking questions to guide understanding
+- Encouraging self-discovery and critical thinking
+- Challenging assumptions and exploring implications
+- Building knowledge through dialogue and inquiry
+- Fostering intellectual curiosity and reflection""",
+
+            "Inspirational - Sparks enthusiasm with visionary ideas": """
+- Connecting concepts to broader implications and possibilities
+- Using motivational language and visionary thinking
+- Inspiring curiosity and wonder about the subject
+- Highlighting the transformative potential of knowledge
+- Encouraging students to think beyond conventional boundaries""",
+
+            "Reflective - Promotes introspection with a calm tone": """
+- Creating a contemplative learning environment
+- Encouraging deep thinking and personal connection
+- Using a calm, measured delivery
+- Promoting self-reflection and understanding
+- Building connections between concepts and personal experience""",
+
+            "Humorous - Uses wit and anecdotes for engaging content": """
+- Incorporating relevant humor and anecdotes
+- Making learning enjoyable and memorable
+- Using wit to highlight key concepts
+- Creating an engaging and relaxed atmosphere
+- Balancing entertainment with educational value"""
+        }
+
+        base_prompt = base_prompts.get(speaker, base_prompts["feynman.mp3"])
+        style_prompt = style_characteristics.get(lecture_style, style_characteristics["Feynman - Simplifies complex ideas with enthusiasm"])
+
+        return f"""{base_prompt}
+{style_prompt}
+
+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 and align with the lecture style ({lecture_style}). 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 and aligns with {lecture_style} style. TERMINATE'
+"""
+
+    instructor_agent = AssistantAgent(
+        name="instructor_agent",
         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, including the Introduction and Closing slides. Verify that HTML slide files exist in the outputs directory and align with the lecture style ({lecture_style}). 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 and aligns with {lecture_style} style. TERMINATE'
-""")
+        system_message=get_instructor_prompt(speaker_audio, lecture_style)
+    )
     
     swarm = Swarm(
-        participants=[research_agent, slide_agent, script_agent, feynman_agent],
+        participants=[research_agent, slide_agent, script_agent, instructor_agent],
         termination_condition=HandoffTermination(target="user") | TextMentionTermination("TERMINATE")
     )
     
@@ -568,7 +641,7 @@ Example: 'Received {total_slides} slides, {total_slides} scripts, and HTML files
                         []
                     )
                     await asyncio.sleep(0.1)
-                elif source == "script_agent" and message.target == "feynman_agent":
+                elif source == "script_agent" and message.target == "instructor_agent":
                     if scripts is None:
                         logger.warning("Script Agent handoff without scripts JSON")
                         extracted_json = extract_json_from_message(message)
@@ -610,8 +683,8 @@ Example: 'Received {total_slides} slides, {total_slides} scripts, and HTML files
                             )
                             task_result.messages.append(retry_message)
                             continue
-                    # Generate HTML slides
-                    html_files = create_slides(slides, title)
+                    # Generate HTML slides with instructor name
+                    html_files = create_slides(slides, title, instructor_name)
                     if not html_files:
                         logger.error("Failed to generate HTML slides")
                     progress = 50
@@ -668,8 +741,8 @@ Example: 'Received {total_slides} slides, {total_slides} scripts, and HTML files
                         task_result.messages.append(retry_message)
                         continue
             
-            elif source == "feynman_agent" and isinstance(message, TextMessage) and "TERMINATE" in message.content:
-                logger.info("Feynman Agent completed lecture review: %s", message.content)
+            elif source == "instructor_agent" and isinstance(message, TextMessage) and "TERMINATE" in message.content:
+                logger.info("Instructor Agent completed lecture review: %s", message.content)
                 progress = 90
                 label = "Lecture materials ready. Generating lecture speech..."
                 file_paths = [f for f in os.listdir(OUTPUT_DIR) if f.endswith(('.md', '.txt'))]
@@ -754,12 +827,13 @@ Example: 'Received {total_slides} slides, {total_slides} scripts, and HTML files
             logger.error("Invalid speaker audio after conversion, skipping TTS")
             yield (
                 f"""
-                <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; min-height: 700px; padding: 20px; text-align: center; border: 1px solid #ddd; border-radius: 8px;">
-                    <h2 style="color: #d9534f;">Invalid speaker audio</h2>
-                    <p style="margin-top: 20px;">Please upload a valid MP3 or WAV audio file and try again.</p>
+                <div style=\"display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; min-height: 700px; padding: 20px; text-align: center; border: 1px solid #ddd; border-radius: 8px;\">
+                    <h2 style=\"color: #d9534f;\">Invalid speaker audio</h2>
+                    <p style=\"margin-top: 20px;\">Please upload a valid MP3 or WAV audio file and try again.</p>
                 </div>
                 """,
-                []
+                [],
+                None
             )
             return
         
@@ -784,7 +858,8 @@ Example: 'Received {total_slides} slides, {total_slides} scripts, and HTML files
                 label = f"Generating lecture speech for slide {i + 1}/{len(scripts)}..."
                 yield (
                     html_with_progress(label, progress),
-                    file_paths
+                    file_paths,
+                    None
                 )
                 await asyncio.sleep(0.1)
                 continue
@@ -811,7 +886,8 @@ Example: 'Received {total_slides} slides, {total_slides} scripts, and HTML files
                     file_paths.append(audio_file)  
                     yield (
                         html_with_progress(label, progress),
-                        file_paths
+                        file_paths,
+                        None
                     )
                     await asyncio.sleep(0.1)
                     break
@@ -825,7 +901,8 @@ Example: 'Received {total_slides} slides, {total_slides} scripts, and HTML files
                         label = f"Generating speech for slide {i + 1}/{len(scripts)}..."
                         yield (
                             html_with_progress(label, progress),
-                            file_paths
+                            file_paths,
+                            None
                         )
                         await asyncio.sleep(0.1)
                         break
@@ -854,18 +931,29 @@ Example: 'Received {total_slides} slides, {total_slides} scripts, and HTML files
                     {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; background-color: lightgrey"><i class="fas fa-step-backward" style="color: #000"></i></button>
-                    <button id="play-btn" style="border-radius: 50%; width: 40px; height: 40px; margin: 0 5px; font-size: 1.2em; cursor: pointer; background-color: lightgrey"><i class="fas fa-play" style="color: #000"></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: lightgrey"><i class="fas fa-step-forward" style="color: #000"></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: lightgrey"><i style="color: #000" class="fas fa-expand"></i></button>
+                    <button id="prev-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-backward" style="color: #fff !important"></i></button>
+                    <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="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>
         </div>
         """
         logger.info("Yielding final lecture materials after audio generation")
+        # --- YIELD LECTURE CONTEXT FOR AGENTS ---
+        lecture_context = {
+            "slides": slides,
+            "scripts": scripts,
+            "title": title,
+            "description": lecture_content_description,
+            "style": lecture_style,
+            "audience": lecture_type
+        }
         yield (
             html_output,
-            file_paths
+            file_paths,
+            lecture_context
         )
         
         logger.info("Lecture generation completed successfully")
@@ -880,13 +968,15 @@ Example: 'Received {total_slides} slides, {total_slides} scripts, and HTML files
                 <p style="margin-top: 20px;">Please try again</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(() => {
@@ -903,11 +993,11 @@ js_code = """
         }, interval);
     }
 
-    // Main initit func
+    // Main initialization function
     function initializeSlides() {
         console.log("Initializing slides...");
 
-        // await lecture-data to load JSON data
+        // Wait for lecture-data to load the JSON data
         waitForElement('#lecture-data', (dataElement) => {
             if (!dataElement.textContent) {
                 console.error("Lecture data element is empty");
@@ -931,7 +1021,8 @@ js_code = """
             const totalSlides = lectureData.htmlFiles.length;
             let audioElements = [];
             let isPlaying = false;
-            let hasNavigated = false; // Track if user has used prev/next buttons
+            let hasNavigated = false;
+            let currentAudioIndex = 0;
 
             // Wait for slide-content element
             waitForElement('#slide-content', (slideContent) => {
@@ -963,15 +1054,38 @@ js_code = """
                                     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(12, 16 * (screenWidth / 1920))); // Scale with screen width (1920px as reference)
-                                        // Adjust inversely with content length
-                                        const adjustedFontSize = Math.max(12, baseFontSize * (1000 / (textLength + 100))); // Minimum 8px, scale down with length
+                                        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}px width`);
+                                        
+                                        console.log(`Adjusted font size to ${adjustedFontSize}px for ${textLength} characters on ${screenWidth}x${screenHeight} screen`);
                                     }
                                 };
                             });
@@ -995,7 +1109,7 @@ js_code = """
                         if (audio && audio.pause) {
                             audio.pause();
                             audio.currentTime = 0;
-                            audio.style.border = 'none'; // Reset border
+                            audio.style.border = 'none';
                             console.log("Paused and reset audio:", audio.id);
                         }
                     });
@@ -1021,7 +1135,7 @@ js_code = """
 
                 function prevSlide() {
                     console.log("Previous button clicked, current slide:", currentSlide);
-                    hasNavigated = true; // User has navigated
+                    hasNavigated = true;
                     if (currentSlide > 0) {
                         currentSlide--;
                         updateSlide(() => {
@@ -1039,7 +1153,7 @@ js_code = """
 
                 function nextSlide() {
                     console.log("Next button clicked, current slide:", currentSlide);
-                    hasNavigated = true; // User has navigated
+                    hasNavigated = true;
                     if (currentSlide < totalSlides - 1) {
                         currentSlide++;
                         updateSlide(() => {
@@ -1063,13 +1177,13 @@ js_code = """
                         return;
                     }
                     const playIcon = playBtn.querySelector('i');
-                    if (playIcon.className.includes('fa-pause')) {
+                    
+                    if (isPlaying) {
                         // 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);
                             }
@@ -1077,14 +1191,16 @@ js_code = """
                         playIcon.className = 'fas fa-play';
                         return;
                     }
+
                     // Start playback
-                    currentSlide = 0;
-                    let index = 0;
                     isPlaying = true;
                     playIcon.className = 'fas fa-pause';
+                    currentSlide = 0;
+                    currentAudioIndex = 0;
+                    
                     updateSlide(() => {
                         function playNext() {
-                            if (index >= totalSlides || !isPlaying) {
+                            if (currentAudioIndex >= totalSlides || !isPlaying) {
                                 isPlaying = false;
                                 playIcon.className = 'fas fa-play';
                                 audioElements.forEach(audio => {
@@ -1093,72 +1209,64 @@ js_code = """
                                 console.log("Finished playing all slides or paused");
                                 return;
                             }
-                            currentSlide = index;
+
+                            currentSlide = currentAudioIndex;
                             updateSlide(() => {
-                                const audio = audioElements[index];
+                                const audio = audioElements[currentAudioIndex];
                                 if (audio && audio.play) {
-                                    // Highlight the current audio element
                                     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 ${index + 1}`);
+                                    console.log(`Attempting to play audio for slide ${currentAudioIndex + 1}`);
+                                    
                                     audio.play().then(() => {
-                                        console.log(`Playing audio for slide ${index + 1}`);
-                                        // Remove any existing ended listeners to prevent duplicates
+                                        console.log(`Playing audio for slide ${currentAudioIndex + 1}`);
                                         audio.onended = null;
                                         audio.addEventListener('ended', () => {
-                                            console.log(`Audio ended for slide ${index + 1}`);
-                                            index++;
-                                            playNext();
+                                            if (isPlaying) {
+                                                console.log(`Audio ended for slide ${currentAudioIndex + 1}`);
+                                                currentAudioIndex++;
+                                                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`);
+                                                console.log(`Fallback: Audio for slide ${currentAudioIndex + 1} considered ended`);
                                                 clearInterval(checkDuration);
-                                                audio.onended = null; // Prevent duplicate triggers
-                                                index++;
+                                                audio.onended = null;
+                                                currentAudioIndex++;
                                                 playNext();
                                             }
                                         }, 1000);
                                     }).catch(e => {
-                                        console.error(`Audio play failed for slide ${index + 1}:`, e);
-                                        // Retry playing the same slide after a short delay
+                                        console.error(`Audio play failed for slide ${currentAudioIndex + 1}:`, e);
                                         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++;
+                                            if (isPlaying) {
+                                                audio.play().then(() => {
+                                                    console.log(`Retry succeeded for slide ${currentAudioIndex + 1}`);
+                                                    audio.onended = null;
+                                                    audio.addEventListener('ended', () => {
+                                                        if (isPlaying) {
+                                                            console.log(`Audio ended for slide ${currentAudioIndex + 1}`);
+                                                            currentAudioIndex++;
+                                                            playNext();
+                                                        }
+                                                    }, { once: true });
+                                                }).catch(e => {
+                                                    console.error(`Retry failed for slide ${currentAudioIndex + 1}:`, e);
+                                                    currentAudioIndex++;
                                                     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++;
+                                    currentAudioIndex++;
                                     playNext();
                                 }
                             });
@@ -1220,7 +1328,7 @@ js_code = """
                 const lectureContainer = document.getElementById('lecture-container');
                 if (lectureContainer) {
                     console.log("Lecture container detected in DOM");
-                    observer.disconnect(); // Stop observing once found
+                    observer.disconnect();
                     initializeSlides();
                 }
             }
@@ -1231,27 +1339,183 @@ js_code = """
 }
 """
 
+def process_uploaded_file(file):
+    """Process uploaded file and extract text content."""
+    try:
+        # Determine if file is a NamedString (Gradio string-like object) or file-like object
+        file_name = os.path.basename(file.name if hasattr(file, 'name') else str(file))
+        file_path = os.path.join(UPLOAD_DIR, file_name)
+        
+        # Get file extension
+        _, ext = os.path.splitext(file_path)
+        ext = ext.lower()
+        
+        # Handle PDF files differently
+        if ext == '.pdf':
+            # For PDF files, write the raw bytes
+            if hasattr(file, 'read'):
+                with open(file_path, 'wb') as f:
+                    f.write(file.read())
+            else:
+                # If it's a file path, copy the file
+                shutil.copy2(str(file), file_path)
+            
+            # Process PDF file
+            pdf_reader = PyPDF2.PdfReader(file_path)
+            text = ""
+            for page in pdf_reader.pages:
+                text += page.extract_text() + "\n"
+            logger.info("Extracted text from PDF: %s", file_path)
+            return text
+        
+        # Handle text files
+        elif ext in ('.txt', '.md'):
+            # Read content and save to UPLOAD_DIR
+            if hasattr(file, 'read'):  # File-like object
+                content = file.read()
+                if isinstance(content, bytes):
+                    content = content.decode('utf-8', errors='replace')
+                with open(file_path, 'w', encoding='utf-8') as f:
+                    f.write(content)
+            else:  # NamedString or string-like
+                # If it's a file path, read the file
+                if os.path.exists(str(file)):
+                    with open(str(file), 'r', encoding='utf-8') as f:
+                        content = f.read()
+                else:
+                    content = str(file)
+                with open(file_path, 'w', encoding='utf-8') as f:
+                    f.write(content)
+            
+            # Clean and return content
+            cleaned_content = clean_script_text(content)
+            logger.info("Cleaned content for %s: %s", file_path, cleaned_content[:100] + "..." if len(cleaned_content) > 100 else cleaned_content)
+            return cleaned_content
+        else:
+            raise ValueError(f"Unsupported file format: {ext}")
+    except Exception as e:
+        logger.error(f"Error processing file {file_path}: {str(e)}")
+        raise
+
+async def study_mode_process(file, api_service, api_key):
+    """Process uploaded file in study mode."""
+    max_retries = 1
+    for attempt in range(max_retries + 1):
+        try:
+            # Extract text from file
+            content = process_uploaded_file(file)
+            logger.info("Successfully extracted content from file: %s", file)
+            
+            # Create study agent
+            logger.info("Initializing model client for service: %s", api_service)
+            model_client = get_model_client(api_service, api_key)
+            logger.info("Model client initialized successfully")
+            
+            study_agent = AssistantAgent(
+                name="study_agent",
+                model_client=model_client,
+                system_message="""You are a Study Agent that analyzes lecture materials and generates appropriate inputs for the lecture generation system.
+                Analyze the provided content and generate:
+                1. A concise title (max 10 words)
+                2. A brief content description (max 20 words)
+                
+                Output the results in JSON format:
+                {
+                    "title": "string",
+                    "content_description": "string"
+                }"""
+            )
+            
+            # Process content with study agent
+            logger.info("Running study agent with content length: %d", len(content))
+            task_result = await Console(study_agent.run_stream(task=content))
+            logger.info("Study agent execution completed")
+            
+            for message in task_result.messages:
+                extracted_json = extract_json_from_message(message)
+                if extracted_json and isinstance(extracted_json, dict):
+                    if "title" in extracted_json and "content_description" in extracted_json:
+                        logger.info("Valid JSON output: %s", extracted_json)
+                        return extracted_json
+                    else:
+                        logger.warning("Incomplete JSON output: %s", extracted_json)
+            
+            raise ValueError("No valid JSON output with title and content_description from study agent")
+        
+        except Exception as e:
+            logger.error("Attempt %d/%d failed: %s\n%s", attempt + 1, max_retries + 1, str(e), traceback.format_exc())
+            if attempt == max_retries:
+                raise Exception(f"Failed to process file after {max_retries + 1} attempts: {str(e)}")
+            logger.info("Retrying study mode processing...")
+            await asyncio.sleep(1)  # Brief delay before retry
+            
 # Gradio interface
 with gr.Blocks(
-    title="Agent Feynman",
+    title="Lectūra AI",
     css="""
-    h1 {text-align: center; color: white !important;}
+    h1 {text-align: center; color: #fff !important;}
+    .gradio-container-5-29-0 .prose :last-child {color: #fff !important; }
     #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; color: #000; background-color: white;}
     #download {box-shadow: 0 0 2rem rgba(0, 0, 0, .14) !important; border-radius: 30px;}
+    #uploaded-file {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;}
-    .gradio-container { background: linear-gradient(135deg, #2a2a2a, #6a6a6a); box-shadow: 0 0 2rem rgba(255, 255, 255, 0.14);padding-top: 30px;}
-    .gradio-container-5-29-0 .prose :last-child {color: #fff !important; }
+    .gradio-container { background: #fff !important; box-shadow: 0 0 2rem rgba(255, 255, 255, 0.14);padding-top: 30px;}
     button {transition: background-color 0.3s;}
     button:hover {background-color: #e0e0e0;}
+    .upload-area {border: 2px dashed #ccc; border-radius: 20px; padding: 40px; text-align: center; cursor: pointer; height: 100%; min-height: 700px; display: flex; flex-direction: column; justify-content: center; align-items: center;}
+    .upload-area:hover {border-color: #16cd16;}
+    .upload-area.dragover {border-color: #16cd16; background-color: rgba(22, 205, 22, 0.1);}
+    .wrap.svelte-1kzox3m {justify-content: center;}
+    #mode-tabs {border-radius: 30px !important;}
+    #component-2 {border-radius: 30px; box-shadow: rgba(0, 0, 0, 0.14) 0px 0px 2rem !important; width: 290px;}
+    #component-0 {align-items: center;justify-content: center;}
+    #component-26 {box-shadow: rgba(0, 0, 0, 0.14) 0px 0px 2rem !important; border-radius: 30px; height: 970px !important; overflow: auto !important;}
+    #right-column {padding: 10px !important; height: 100% !important; display: flex !important; flex-direction: column !important; gap: 20px !important;}
+    #notes-section {box-shadow: 0 0 2rem rgba(0, 0, 0, .14) !important; border-radius: 30px; background-color: white; padding: 20px; flex: 0 0 auto; display: flex; flex-direction: column; overflow: hidden;}
+    #chat-section {box-shadow: 0 0 2rem rgba(0, 0, 0, .14) !important; border-radius: 30px; background-color: white; padding: 20px; flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 760px;}
+    .note-button {width: 100%; border-radius: 15px; margin-bottom: 10px; padding: 10px; background-color: #f0f0f0; border: none; cursor: pointer; color: #000 !important}
+    .note-button:hover {background-color: #e0e0e0;}
+    .notes-list {flex: 1; overflow-y: auto; margin-top: 0px; min-height: 0;}
+    .chat-input-container {display: flex; gap: 10px; margin-top: auto; padding-top: 20px;}
+    .chat-input {flex-grow: 1; border-radius: 20px; padding: 10px 20px; border: 1px solid #ddd;background-color: rgb(240, 240, 240)}
+    .send-button {border-radius: 20px; padding: 10px 25px; background-color: #16cd16; color: white; border: none; cursor: pointer;}
+    .send-button:hover {background-color: #14b814;}
+    .back-button {border-radius: 50%; width: 40px; height: 40px; background-color: #f0f0f0; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;}
+    .back-button:hover {background-color: #e0e0e0;}
+    .note-editor {display: none; width: 100%; height: 100%; min-height: 0;}
+    .note-editor.active {display: flex; flex-direction: column;}
+    .notes-view {display: flex; flex-direction: column; height: 100%; min-height: 0;}
+    .notes-view.hidden {display: none;}
+    .chat-messages {flex: 1; overflow-y: auto; margin-bottom: 20px; min-height: 0;}
+    #study-guide-btn {margin-bottom: 0px !important}
+    #component-26 {padding: 20px}
+    .gradio-container-5-29-0 .prose :last-child {color: black !important;}
+    #add-note-btn, #study-guide-btn, #quiz-btn, #send-btn{border-radius: 30px !important;}
+    #chatbot {border-radius: 20px !important;}
+    #chat-input-row {align-items: center !important;}
     """,
     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>Lectūra: Your AI Genie for Self-taught Mastery.</center>""")
+    
+    # Add mode tabs
     with gr.Row():
+        with gr.Column(scale=1):
+            with gr.Group(elem_id="mode-tabs"):
+                mode_tabs = gr.Radio(
+                    choices=["Learn Mode", "Study Mode"],
+                    value="Learn Mode",
+                    label="Mode",
+                    elem_id="mode-tabs",
+                    show_label=False
+                )
+    
+    with gr.Row():
+        # Left column (existing form)
         with gr.Column(scale=1):
             with gr.Group(elem_id="form-group"):
                 title = gr.Textbox(label="Lecture Title", placeholder="e.g. Introduction to AI")
@@ -1276,17 +1540,451 @@ with gr.Blocks(
                 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 Lecture Slides (will add intro and closing slides)", value=3)
-                speaker_audio = gr.Audio(value="feynman.mp3", label="Speaker sample speech (MP3 or WAV)", type="filepath", elem_id="speaker-audio")
+                speaker_select = gr.Dropdown(
+                    choices=["feynman.mp3", "einstein.mp3", "samantha.mp3", "socrates.mp3", "professor_lectura_male.mp3"],
+                    value="professor_lectura_male.mp3",
+                    label="Select Instructor",
+                    elem_id="speaker-select"
+                )
+                speaker_audio = gr.Audio(value="professor_lectura_male.mp3", label="Speaker sample speech (MP3 or WAV)", type="filepath", elem_id="speaker-audio")
                 generate_btn = gr.Button("Generate Lecture")
+        
+        # Middle column (existing slide display)
         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: 30px; box-shadow: 0 0 2rem rgba(0, 0, 0, .14) !important;">
                 <h2 style="font-style: italic; color: #000 !important;">Waiting for lecture content...</h2>
-                <p style="margin-top: 10px; font-size: 16px;color: #000">Please Generate lecture content via the form on the left first before lecture begins</p>
+                <p style="margin-top: 10px; font-size: 16px;color: #000 !important">Please Generate lecture content via the form on the left first before lecture begins</p>
+            </div>
+            """
+            
+            # Study mode upload area
+            study_mode_html = """
+            <div class="upload-area" id="upload-area">
+                <h2 style="margin-top: 20px; color: #000;">Please upload lecture material by clicking the upload button below</h2>
+                <p style="color: #666;">(only supports .pdf, .txt and .md)</p>
             </div>
             """
             slide_display = gr.HTML(label="Lecture Slides", value=default_slide_html, elem_id="slide-display")
+            uploaded_file = gr.File(label="Upload Lecture Material", visible=False, elem_id="uploaded-file")
             file_output = gr.File(label="Download Lecture Materials", elem_id="download")
+        
+        # --- RIGHT COLUMN SPLIT: NOTES (TOP) AND CHAT (BOTTOM) ---
+        with gr.Column(scale=1, elem_id="right-column"):  # Add elem_id for CSS targeting
+            # State for notes and lecture context
+            notes_state = gr.State([])  # List of notes: [{"title": ..., "content": ...}]
+            lecture_context_state = gr.State({})  # Dict with latest lecture slides/scripts
+            chat_history_state = gr.State([])  # List of {user, assistant}
+
+            with gr.Row():
+                with gr.Column(scale=1, elem_id="notes-section"):  # NOTES SECTION (TOP)
+                    with gr.Row():
+                        add_note_btn = gr.Button("+ Add note", elem_id="add-note-btn")
+                        study_guide_btn = gr.Button("Study Guide", elem_id="study-guide-btn")
+                        quiz_btn = gr.Button("Quiz Yourself", elem_id="quiz-btn")
+                    note_response = gr.Textbox(label="Note Draft", visible=False)
+                    study_guide_response = gr.Textbox(label="Study Guide", visible=False)
+                    quiz_response = gr.Textbox(label="Quiz", visible=False)
+                    notes_list = gr.Dataframe(headers=["Title"], interactive=False, label="Your Notes", elem_id="notes-list")
+                    with gr.Column(visible=False) as note_editor:
+                        note_title = gr.Textbox(label="Note Title", elem_id="note-title")
+                        note_content = gr.Textbox(label="Note Content", lines=10, elem_id="note-content")
+                        with gr.Row():
+                            save_note_btn = gr.Button("Save Note", elem_id="save-note-btn")
+                            back_btn = gr.Button("Back", elem_id="back-btn")
+
+                with gr.Column(scale=1, elem_id="chat-section"):  # CHAT SECTION (BOTTOM)
+                    with gr.Column():
+                        chatbot = gr.Chatbot(label="Chat", elem_id="chatbot", height=220, show_copy_button=True, type="messages")
+                    with gr.Row(elem_id="chat-input-row"):
+                        chat_input = gr.Textbox(show_label=False, placeholder="Type your message...", lines=1, elem_id="chat-input", scale=9)
+                        send_btn = gr.Button("Send", elem_id="send-btn", scale=1)
+
+        # --- UI LOGIC FOR SHOWING/HIDING RESPONSE COMPONENTS ---
+        def show_only(component):
+            # Helper to show only the given response component
+            return (
+                gr.update(visible=(component == "note")),
+                gr.update(visible=(component == "study")),
+                gr.update(visible=(component == "quiz")),
+            )
+
+        # Add Note button: generate note draft and show editor/response
+        async def add_note_fn(notes, lecture_context, api_service, api_key, title_val, desc_val, style_val, audience_val):
+            context = get_fallback_lecture_context(lecture_context, title_val, desc_val, style_val, audience_val)
+            note = await run_note_agent(api_service, api_key, context, "", "")
+            note_text = (note.get("title", "") + "\n" + note.get("content", "")).strip()
+            return (
+                gr.update(visible=True, value=note_text),
+                gr.update(visible=False, value=""),
+                gr.update(visible=False, value=""),
+                note.get("title", ""),
+                note.get("content", "")
+            )
+        add_note_btn.click(
+            fn=add_note_fn,
+            inputs=[notes_state, lecture_context_state, api_service, api_key, title, lecture_content_description, lecture_style, lecture_type],
+            outputs=[note_response, study_guide_response, quiz_response, note_title, note_content]
+        )
+
+        # Study Guide button: generate study guide and show response
+        async def study_guide_btn_fn(notes, lecture_context, api_service, api_key, title_val, desc_val, style_val, audience_val):
+            context = get_fallback_lecture_context(lecture_context, title_val, desc_val, style_val, audience_val)
+            guide = await run_study_agent(api_service, api_key, context)
+            return (
+                gr.update(visible=False, value=""),
+                gr.update(visible=True, value=guide),
+                gr.update(visible=False, value="")
+            )
+        study_guide_btn.click(
+            fn=study_guide_btn_fn,
+            inputs=[notes_state, lecture_context_state, api_service, api_key, title, lecture_content_description, lecture_style, lecture_type],
+            outputs=[note_response, study_guide_response, quiz_response]
+        )
+
+        # Quiz button: generate quiz and show response
+        async def quiz_btn_fn(notes, lecture_context, api_service, api_key, title_val, desc_val, style_val, audience_val):
+            context = get_fallback_lecture_context(lecture_context, title_val, desc_val, style_val, audience_val)
+            quiz = await run_quiz_agent(api_service, api_key, context)
+            return (
+                gr.update(visible=False, value=""),
+                gr.update(visible=False, value=""),
+                gr.update(visible=True, value=quiz)
+            )
+        quiz_btn.click(
+            fn=quiz_btn_fn,
+            inputs=[notes_state, lecture_context_state, api_service, api_key, title, lecture_content_description, lecture_style, lecture_type],
+            outputs=[note_response, study_guide_response, quiz_response]
+        )
+
+        # Back button: hide note editor and all responses
+        back_btn.click(
+            fn=lambda: (
+                gr.update(visible=False, value=""),
+                gr.update(visible=False, value=""),
+                gr.update(visible=False, value="")
+            ),
+            inputs=[],
+            outputs=[note_response, study_guide_response, quiz_response]
+        )
+
+        # Save Note button: add note to state and update list, hide responses
+        async def save_note(note_title_val, note_content_val, notes, lecture_context, api_service, api_key, note_type=None):
+            note = await run_note_agent(api_service, api_key, get_fallback_lecture_context(lecture_context, note_title_val, note_content_val, "", ""), note_title_val, note_content_val)
+            # Prefix title with note type if provided
+            if note_type:
+                note["title"] = note_type_prefix(note_type, note.get("title", ""))
+            new_notes = copy.deepcopy(notes)
+            new_notes.append(note)
+            # Save note content to a .txt file
+            note_file = os.path.join(OUTPUT_DIR, f"{note['title']}.txt")
+            with open(note_file, "w", encoding="utf-8") as f:
+                f.write(note['content'])
+            return (
+                update_notes_list(new_notes),
+                new_notes,
+                gr.update(visible=False, value=""),
+                gr.update(visible=False, value=""),
+                gr.update(visible=False, value="")
+            )
+        save_note_btn.click(
+            fn=save_note,
+            inputs=[note_title, note_content, notes_state, lecture_context_state, api_service, api_key],
+            outputs=[notes_list, notes_state, note_response, study_guide_response, quiz_response]
+        )
+
+        # --- CHAT AGENT LOGIC ---
+        async def chat_fn(user_message, chat_history, lecture_context, api_service, api_key, title_val, desc_val):
+            if not user_message.strip():
+                return chat_history, "", chat_history, gr.update(), gr.update()
+            form_update, response = await run_chat_agent(api_service, api_key, lecture_context, chat_history, user_message)
+            new_history = chat_history.copy()
+            # Append user message
+            if user_message:
+                new_history.append({"role": "user", "content": user_message})
+            # Append assistant response
+            if response:
+                new_history.append({"role": "assistant", "content": response})
+            title_update = gr.update()
+            desc_update = gr.update()
+            if form_update:
+                title = form_update.get("title")
+                desc = form_update.get("content_description")
+                msg = ""
+                if title:
+                    msg += f"\nLecture Title: {title}"
+                    title_update = gr.update(value=title)
+                if desc:
+                    msg += f"\nLecture Content Description: {desc}"
+                    desc_update = gr.update(value=desc)
+                new_history.append({"role": "assistant", "content": msg.strip()})
+                return new_history, "", new_history, title_update, desc_update
+            return new_history, "", new_history, title_update, desc_update
+        send_btn.click(
+            fn=chat_fn,
+            inputs=[chat_input, chat_history_state, lecture_context_state, api_service, api_key, title, lecture_content_description],
+            outputs=[chatbot, chat_input, chat_history_state, title, lecture_content_description]
+        )
+
+    js_code = js_code + """
+    // Add file upload handling
+    function initializeFileUpload() {
+        const uploadArea = document.getElementById('upload-area');
+        if (!uploadArea) return;
+
+        // Create hidden file input
+        const fileInput = document.createElement('input');
+        fileInput.type = 'file';
+        fileInput.accept = '.pdf,.txt,.md';
+        fileInput.style.display = 'none';
+        uploadArea.appendChild(fileInput);
+
+        // Handle click on the entire upload area
+        uploadArea.addEventListener('click', (e) => {
+            if (e.target !== fileInput) {
+                fileInput.click();
+            }
+        });
+        
+        fileInput.addEventListener('change', (e) => {
+            const file = e.target.files[0];
+            if (file) {
+                const dataTransfer = new DataTransfer();
+                dataTransfer.items.add(file);
+                const gradioFileInput = document.querySelector('input[type="file"]');
+                if (gradioFileInput) {
+                    gradioFileInput.files = dataTransfer.files;
+                    const event = new Event('change', { bubbles: true });
+                    gradioFileInput.dispatchEvent(event);
+                }
+            }
+        });
+
+        // Handle drag and drop
+        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+            uploadArea.addEventListener(eventName, preventDefaults, false);
+        });
+
+        function preventDefaults(e) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+
+        ['dragenter', 'dragover'].forEach(eventName => {
+            uploadArea.addEventListener(eventName, highlight, false);
+        });
+
+        ['dragleave', 'drop'].forEach(eventName => {
+            uploadArea.addEventListener(eventName, unhighlight, false);
+        });
+
+        function highlight(e) {
+            uploadArea.classList.add('dragover');
+        }
+
+        function unhighlight(e) {
+            uploadArea.classList.remove('dragover');
+        }
+
+        uploadArea.addEventListener('drop', handleDrop, false);
+
+        function handleDrop(e) {
+            const dt = e.dataTransfer;
+            const file = dt.files[0];
+            if (file) {
+                const dataTransfer = new DataTransfer();
+                dataTransfer.items.add(file);
+                const gradioFileInput = document.querySelector('input[type="file"]');
+                if (gradioFileInput) {
+                    gradioFileInput.files = dataTransfer.files;
+                    const event = new Event('change', { bubbles: true });
+                    gradioFileInput.dispatchEvent(event);
+                }
+            }
+        }
+    }
+
+    // Initialize clear button functionality
+    function initializeClearButton() {
+        const clearButton = document.getElementById('clear-btn');
+        if (clearButton) {
+            clearButton.addEventListener('click', () => {
+                const modeTabs = document.querySelector('.mode-tabs input[type="radio"]:checked');
+                const isStudyMode = modeTabs && modeTabs.value === 'Study Mode';
+                
+                // Reset all audio elements
+                const audioElements = document.querySelectorAll('audio');
+                audioElements.forEach(audio => {
+                    audio.pause();
+                    audio.currentTime = 0;
+                    audio.style.border = 'none';
+                });
+                
+                // Reset play button
+                const playBtn = document.getElementById('play-btn');
+                if (playBtn) {
+                    const playIcon = playBtn.querySelector('i');
+                    if (playIcon) {
+                        playIcon.className = 'fas fa-play';
+                    }
+                }
+                
+                const slideContent = document.getElementById('slide-content');
+                if (slideContent) {
+                    if (isStudyMode) {
+                        slideContent.innerHTML = `
+                            <div class="upload-area" id="upload-area">
+                                <h2 style="margin-top: 20px; color: #000;">Please upload lecture material by clicking the upload button below</h2>
+                                <p style="color: #666;">(only supports .pdf, .txt and .md)</p>
+                            </div>
+                        `;
+                        initializeFileUpload();
+                    } else {
+                        slideContent.innerHTML = `
+                            <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 !important;">Waiting for lecture content...</h2>
+                                <p style="margin-top: 10px; font-size: 16px;color: #000">Please Generate lecture content via the form on the left first before lecture begins</p>
+                            </div>
+                        `;
+                    }
+                }
+            });
+        }
+    }
+
+    // Initialize speaker selection
+    function initializeSpeakerSelect() {
+        const speakerSelect = document.getElementById('speaker-select');
+        const speakerAudio = document.querySelector('#speaker-audio input[type="file"]');
+        
+        if (speakerSelect && speakerAudio) {
+            speakerSelect.addEventListener('change', (e) => {
+                const selectedSpeaker = e.target.value;
+                // Create a new File object from the selected speaker
+                fetch(selectedSpeaker)
+                    .then(response => response.blob())
+                    .then(blob => {
+                        const file = new File([blob], selectedSpeaker, { type: 'audio/mpeg' });
+                        const dataTransfer = new DataTransfer();
+                        dataTransfer.items.add(file);
+                        speakerAudio.files = dataTransfer.files;
+                        const event = new Event('change', { bubbles: true });
+                        speakerAudio.dispatchEvent(event);
+                    });
+            });
+        }
+    }
+
+    // Initialize file upload when study mode is active
+    function checkAndInitializeUpload() {
+        const uploadArea = document.getElementById('upload-area');
+        if (uploadArea) {
+            console.log('Initializing file upload...');
+            initializeFileUpload();
+        }
+        initializeClearButton();
+        initializeSpeakerSelect();
+    }
+
+    // Check immediately and also set up an observer
+    checkAndInitializeUpload();
+    
+    const modeObserver = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+            if (mutation.addedNodes.length) {
+                checkAndInitializeUpload();
+            }
+        });
+    });
+    modeObserver.observe(document.body, { childList: true, subtree: true });
+    """
+    
+    # Handle mode switching
+    def switch_mode(mode):
+        if mode == "Learn Mode":
+            return default_slide_html, gr.update(visible=True), gr.update(visible=False)
+        else:
+            return study_mode_html, gr.update(visible=True), gr.update(visible=True)
+    
+    mode_tabs.change(
+        fn=switch_mode,
+        inputs=[mode_tabs],
+        outputs=[slide_display, generate_btn, uploaded_file]
+    )
+    
+    # Handle file upload in study mode
+    async def handle_file_upload(file, api_service, api_key):
+        """Handle file upload in study mode and validate API key."""
+        if not file:
+            yield default_slide_html, None, None
+            return
+        
+        # Validate API key or GITHUB_TOKEN for Azure AI Foundry
+        if not api_key and api_service != "Azure AI Foundry":
+            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;">Please input api key first</h2>
+                <p style="margin-top: 20px;">An API key is required to process uploaded files in Study mode. Please provide a valid API key and try again.</p>
+            </div>
+            """
+            logger.warning("API key is empty, terminating file upload")
+            yield error_html, None, None
+            return
+        elif api_service == "Azure AI Foundry" and not os.environ.get("GITHUB_TOKEN"):
+            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;">GITHUB_TOKEN not set</h2>
+                <p style="margin-top: 20px;">Azure AI Foundry requires a GITHUB_TOKEN environment variable. Please set it and try again.</p>
+            </div>
+            """
+            logger.warning("GITHUB_TOKEN is missing for Azure AI Foundry, terminating file upload")
+            yield error_html, None, None
+            return
+        
+        try:
+            # Show uploading progress
+            yield html_with_progress("Uploading Lecture Material...", 25), None, None
+            await asyncio.sleep(0.1)
+            
+            # Show processing progress
+            yield html_with_progress("Processing file...", 50), None, None
+            await asyncio.sleep(0.1)
+            
+            # Process file and generate inputs
+            yield html_with_progress("Generating inputs", 75), None, None
+            await asyncio.sleep(0.1)
+            
+            result = await study_mode_process(file, api_service, api_key)
+            
+            # Show success message with updated inputs
+            success_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: 30px; box-shadow: 0 0 2rem rgba(0, 0, 0, .14) !important;">
+                <h2 style="font-style: italic; color: #000 !important;">Study material processed, you can now generate lecture</h2>
+                <p style="margin-top: 10px; font-size: 16px;color: #000">The form has been updated with the extracted information. Click Generate Lecture to proceed.</p>
+            </div>
+            """
+            
+            # Update only title and description
+            yield (
+                success_html,
+                result["title"],
+                result["content_description"]
+            )
+        except Exception as e:
+            error_html = f"""
+            <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; min-height: 700px; padding: 20px; text-align: center; border: 1px solid #ddd; border-radius: 8px;">
+                <h2 style="color: #d9534f;">Error processing file</h2>
+                <p style="margin-top: 20px;">{str(e)}</p>
+            </div>
+            """
+            logger.error(f"Error processing file: {str(e)}")
+            yield error_html, None, None
+
+    uploaded_file.change(
+        fn=handle_file_upload,
+        inputs=[uploaded_file, api_service, api_key],
+        outputs=[slide_display, title, lecture_content_description]
+    )
     
     speaker_audio.change(
         fn=update_audio_preview,
@@ -1300,5 +1998,246 @@ with gr.Blocks(
         outputs=[slide_display, file_output]
     )
 
+    # Handle speaker selection
+    def update_speaker_audio(speaker):
+        logger.info(f"Speaker selection changed to: {speaker}")
+        return speaker
+
+    speaker_select.change(
+        fn=update_speaker_audio,
+        inputs=[speaker_select],
+        outputs=[speaker_audio]
+    )
+
+    js_code = js_code + """
+    // Add note editor functionality
+    function initializeNoteEditor() {
+        const addNoteBtn = document.getElementById('add-note-btn');
+        const backBtn = document.getElementById('back-btn');
+        const notesView = document.getElementById('notes-view');
+        const noteEditor = document.getElementById('note-editor');
+        
+        if (addNoteBtn && backBtn && notesView && noteEditor) {
+            addNoteBtn.addEventListener('click', () => {
+                notesView.style.display = 'none';
+                noteEditor.style.display = 'block';
+            });
+            
+            backBtn.addEventListener('click', () => {
+                noteEditor.style.display = 'none';
+                notesView.style.display = 'block';
+            });
+        }
+    }
+
+    // Initialize all components
+    function initializeComponents() {
+        initializeFileUpload();
+        initializeClearButton();
+        initializeSpeakerSelect();
+        initializeNoteEditor();
+    }
+
+    // Check immediately and also set up an observer
+    initializeComponents();
+    
+    const observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+            if (mutation.addedNodes.length) {
+                initializeComponents();
+            }
+        });
+    });
+    observer.observe(document.body, { childList: true, subtree: true });
+    """
+
+    # --- AGENT LOGIC FOR NOTES, STUDY GUIDE, QUIZ, AND CHAT ---
+
+    async def run_note_agent(api_service, api_key, lecture_context, note_title, note_content):
+        model_client = get_model_client(api_service, api_key)
+        system_message = (
+            "You are a Note Agent. Given the current lecture slides and scripts, help the user draft a note. "
+            "If a title or content is provided, improve or complete the note. If not, suggest a new note based on the lecture. "
+            "Always use the lecture context. Output a JSON object: {\"title\": ..., \"content\": ...}."
+        )
+        note_agent = AssistantAgent(
+            name="note_agent",
+            model_client=model_client,
+            system_message=system_message
+        )
+        context_str = json.dumps(lecture_context)
+        user_input = f"Lecture Context: {context_str}\nNote Title: {note_title}\nNote Content: {note_content}"
+        result = await Console(note_agent.run_stream(task=user_input))
+        # Return only the agent's reply
+        for msg in reversed(result.messages):
+            if getattr(msg, 'source', None) == 'note_agent' and hasattr(msg, 'content') and isinstance(msg.content, str):
+                try:
+                    extracted = extract_json_from_message(msg)
+                    if extracted and isinstance(extracted, dict):
+                        return extracted
+                except Exception:
+                    continue
+        # fallback: any non-user message with content
+        for msg in reversed(result.messages):
+            if hasattr(msg, 'content') and isinstance(msg.content, str):
+                try:
+                    extracted = extract_json_from_message(msg)
+                    if extracted and isinstance(extracted, dict):
+                        return extracted
+                except Exception:
+                    continue
+        return {"title": note_title, "content": note_content}
+
+    async def run_study_agent(api_service, api_key, lecture_context):
+        model_client = get_model_client(api_service, api_key)
+        system_message = (
+            "You are a Study Guide Agent. Given the current lecture slides and scripts, generate a concise study guide (max 200 words) summarizing the key points and actionable steps for the student. Output plain text only."
+        )
+        study_agent = AssistantAgent(
+            name="study_agent",
+            model_client=model_client,
+            system_message=system_message
+        )
+        context_str = json.dumps(lecture_context)
+        user_input = f"Lecture Context: {context_str}"
+        result = await Console(study_agent.run_stream(task=user_input))
+        # Return only the agent's reply
+        for msg in reversed(result.messages):
+            if getattr(msg, 'source', None) == 'study_agent' and hasattr(msg, 'content') and isinstance(msg.content, str):
+                return msg.content.strip()
+        for msg in reversed(result.messages):
+            if hasattr(msg, 'content') and isinstance(msg.content, str):
+                return msg.content.strip()
+        return "No study guide generated."
+
+    async def run_quiz_agent(api_service, api_key, lecture_context):
+        model_client = get_model_client(api_service, api_key)
+        system_message = (
+            "You are a Quiz Agent. Given the current lecture slides and scripts, generate a short quiz (3-5 questions) to test understanding. Output plain text only."
+        )
+        quiz_agent = AssistantAgent(
+            name="quiz_agent",
+            model_client=model_client,
+            system_message=system_message
+        )
+        context_str = json.dumps(lecture_context)
+        user_input = f"Lecture Context: {context_str}"
+        result = await Console(quiz_agent.run_stream(task=user_input))
+        # Return only the agent's reply
+        for msg in reversed(result.messages):
+            if getattr(msg, 'source', None) == 'quiz_agent' and hasattr(msg, 'content') and isinstance(msg.content, str):
+                return msg.content.strip()
+        for msg in reversed(result.messages):
+            if hasattr(msg, 'content') and isinstance(msg.content, str):
+                return msg.content.strip()
+        return "No quiz generated."
+
+    async def run_chat_agent(api_service, api_key, lecture_context, chat_history, user_message):
+        model_client = get_model_client(api_service, api_key)
+        system_message = (
+            "You are a helpful Chat Agent. Answer questions about the lecture, and if the user asks for a lecture title or content description, suggest appropriate values. "
+            "If you want to update the form, output a JSON object: {\"title\": ..., \"content_description\": ...}. Otherwise, just reply as normal."
+        )
+        chat_agent = AssistantAgent(
+            name="chat_agent",
+            model_client=model_client,
+            system_message=system_message
+        )
+        context_str = json.dumps(lecture_context)
+        chat_str = "\n".join([f"User: {m['content']}" if m['role']=='user' else f"Assistant: {m['content']}" for m in chat_history])
+        user_input = f"Lecture Context: {context_str}\nChat History: {chat_str}\nUser: {user_message}"
+        result = await Console(chat_agent.run_stream(task=user_input))
+        # Return only the chat_agent's reply
+        for msg in reversed(result.messages):
+            if getattr(msg, 'source', None) == 'chat_agent' and hasattr(msg, 'content') and isinstance(msg.content, str):
+                extracted = extract_json_from_message(msg)
+                if extracted and isinstance(extracted, dict):
+                    return extracted, None
+                return None, msg.content.strip()
+        for msg in reversed(result.messages):
+            if hasattr(msg, 'content') and isinstance(msg.content, str):
+                extracted = extract_json_from_message(msg)
+                if extracted and isinstance(extracted, dict):
+                    return extracted, None
+                return None, msg.content.strip()
+        return None, "No response."
+
+    # --- UI WIRING FOR NOTES, STUDY GUIDE, QUIZ, AND CHAT ---
+
+    def update_notes_list(notes):
+        """Convert notes list to DataFrame format for Gradio Dataframe (titles only)."""
+        return [[n["title"]] for n in notes]
+
+    def show_note_editor_with_content(title, content):
+        return (
+            gr.update(visible=True),  # note_editor
+            gr.update(visible=False), # notes_list
+            gr.update(visible=False), # study_guide_output
+            gr.update(visible=False), # quiz_output
+            gr.update(value=title),   # note_title
+            gr.update(value=content)  # note_content
+        )
+
+    def hide_note_editor():
+        return gr.update(visible=False), gr.update(visible=True), gr.update(visible=False), gr.update(visible=False)
+
+    def show_study_guide(guide):
+        return gr.update(visible=False), gr.update(visible=True), gr.update(value=guide, visible=True), gr.update(visible=False)
+
+    def show_quiz(quiz):
+        return gr.update(visible=False), gr.update(visible=True), gr.update(visible=False), gr.update(value=quiz, visible=True)
+
+    # Helper to get fallback lecture context from form fields
+
+    def get_fallback_lecture_context(lecture_context, title_val, desc_val, style_val, audience_val):
+        # If slides/scripts missing, use form fields
+        if lecture_context and (lecture_context.get("slides") or lecture_context.get("scripts")):
+            return lecture_context
+        return {
+            "slides": [],
+            "scripts": [],
+            "title": title_val or "Untitled Lecture",
+            "description": desc_val or "No description provided.",
+            "style": style_val or "Feynman - Simplifies complex ideas with enthusiasm",
+            "audience": audience_val or "University"
+        }
+
+    # Show note content when a note title is clicked
+
+    def show_note_content(evt: dict, notes):
+        # evt['index'] gives the row index
+        idx = evt.get('index', 0)
+        if 0 <= idx < len(notes):
+            note = notes[idx]
+            note_file = os.path.join(OUTPUT_DIR, f"{note['title']}.txt")
+            if os.path.exists(note_file):
+                with open(note_file, "r", encoding="utf-8") as f:
+                    note_text = f.read()
+                return gr.update(visible=True, value=note_text)
+        return gr.update(visible=False, value="")
+    notes_list.select(
+        fn=show_note_content,
+        inputs=[notes_state],
+        outputs=note_response
+    )
+
+    # Make right column scrollable (wrap in a scrollable gr.Column if needed)
+    # (Assume CSS already allows #right-column to scroll)
+
+    # --- NOTES LOGIC ---
+    def note_type_prefix(note_type, title):
+        if note_type and not title.startswith(note_type):
+            return f"{note_type} - {title}"
+        return title
+
+    custom_css = """
+    #right-column {height: 100% !important; display: flex !important; flex-direction: column !important; gap: 20px !important;}
+    #notes-section, #chat-section {flex: 1 1 0; min-height: 0; max-height: 50vh; overflow-y: auto;}
+    #chat-section {display: flex; flex-direction: column; position: relative;}
+    #chatbot {flex: 1 1 auto; min-height: 0; max-height: calc(50vh - 60px); overflow-y: auto;}
+    #chat-input-row {position: sticky; bottom: 0; background: white; z-index: 2; padding-top: 8px;}
+    """
+    demo.css += custom_css
+
 if __name__ == "__main__":
     demo.launch(allowed_paths=[OUTPUT_DIR])