visualized agents progress on tasks

app.py

@@ -1,5 +1,5 @@
 # Lectūra Research Demo: A Multi-Agent Tool for Self-taught Mastery.
-# Author: Jaward Sesay
+# Author: Jaward Sesay | Github: https://github.com/Jaykef
 # © Lectūra Labs 2025. All rights reserved. 
 import os
 import json
@@ -172,31 +172,35 @@ def create_slides(slides: list[dict], title: str, instructor_name: str, output_d
 
 # Track stage outputs
 stage_outputs = {}
+stage_status = {}
 
-def add_stage_output(stage_name, output):
+def add_stage_output(stage_name, output, status="Task In Progress"):
     if stage_name not in stage_outputs:
         stage_outputs[stage_name] = []
     stage_outputs[stage_name].append(output)
+    stage_status[stage_name] = status
 
 # Dynamic progress bar with accordion
 def html_with_progress(label, progress):
     accordion_html = ""
     if stage_outputs:
         accordion_html = """
-        <div style="width: 70%; margin-top: 20px; border: 1px solid #ddd; border-radius: 25px; overflow: hidden;">
+        <div style="width: 70%; margin-top: 20px; border: 1px solid #ddd; border-radius: 20px; overflow: hidden;">
         """
         for stage_name, outputs in stage_outputs.items():
+            status_color = "#2196F3" if stage_status.get(stage_name) == "Task In Progress" else "#4CAF50"
             accordion_html += f"""
             <div style="border-bottom: 1px solid #ddd;">
-                <div style="padding: 10px; background-color: #f8f9fa; cursor: pointer;" onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'">
-                    <h4 style="margin: 0; color: #555;">{stage_name}</h4>
+                <div style="padding: 10px; background-color: #f8f9fa; cursor: pointer; display: flex; justify-content: space-between; align-items: center;" onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'">
+                    <h4 style="margin: 0; color: #555 !important;">{stage_name} Agent</h4>
+                    <span style="color: {status_color}; font-weight: bold;">{stage_status.get(stage_name, 'Task In Progress')}</span>
                 </div>
-                <div style="padding: 10px; display: none; background-color: white;">
+                <div style="padding: 10px; display: none; background-color: white; text-align: left;">
             """
             for output in outputs:
                 accordion_html += f"""
-                    <div style="margin-bottom: 10px; padding: 10px; background-color: #f8f9fa; border-radius: 4px;">
-                        <pre style="margin: 0; white-space: pre-wrap; word-wrap: break-word;">{output}</pre>
+                    <div style="margin-bottom: 10px; padding: 10px; background-color: #fff; border-radius: 4px;">
+                        <pre style="margin: 0; white-space: pre-wrap; word-wrap: break-word; color: #555 !important;">{output}</pre>
                     </div>
                 """
             accordion_html += """
@@ -454,8 +458,9 @@ async def on_generate(api_service, api_key, serpapi_key, title, lecture_content_
     print(f"Received serpapi_key: '{serpapi_key}' (type: {type(serpapi_key)}, length: {len(serpapi_key) if serpapi_key else 0})")
     
     # Reset stage outputs at the start of generation
-    global stage_outputs
+    global stage_outputs, stage_status
     stage_outputs = {}
+    stage_status = {}
     
     # Define constants
     max_audio_retries = 5
@@ -619,9 +624,12 @@ Example: 'Received {total_slides} slides, {total_slides} scripts, and HTML files
     progress = 0
     label = "Researching lecture topic..."
     if not serpapi_key:
-        add_stage_output("Research", "No API key for research was provided, proceeding with slide generation.")
+        add_stage_output("Research", "No API key for research was provided, proceeding with slide generation.", "No serpapi key provided for research, handing off to Slide Agent")
+        add_stage_output("Slides", "Starting slide generation...", "Task In Progress")
+        label = "Generating Slides..."
+        progress = 25
     else:
-        add_stage_output("Research", "Starting research phase...")
+        add_stage_output("Research", "Starting research phase...", "Task In Progress")
     yield (
         html_with_progress(label, progress),
         []
@@ -669,9 +677,10 @@ Example: 'Received {total_slides} slides, {total_slides} scripts, and HTML files
                 logger.info("Handoff from %s to %s", source, message.target)
                 if source == "research_agent" and message.target == "slide_agent":
                     progress = 25
-                    label = "Slides: generating..."
+                    label = "Generating Slides..."
                     if hasattr(message, 'content'):
-                        add_stage_output("Research", message.content)
+                        add_stage_output("Research", message.content, "Task Completed")
+                    # Remove duplicate Slides stage output
                     yield (
                         html_with_progress(label, progress),
                         []
@@ -684,7 +693,7 @@ Example: 'Received {total_slides} slides, {total_slides} scripts, and HTML files
                         if extracted_json:
                             slides = extracted_json
                             logger.info("Extracted slides JSON from HandoffMessage context: %s", slides)
-                            add_stage_output("Slides", json.dumps(slides, indent=2))
+                            add_stage_output("Slides", json.dumps(slides, indent=2), "Task Completed")
                     if slides is None or len(slides) != total_slides:
                         if slide_retry_count < max_retries:
                             slide_retry_count += 1
@@ -698,6 +707,7 @@ Example: 'Received {total_slides} slides, {total_slides} scripts, and HTML files
                             continue
                     progress = 50
                     label = "Scripts: generating..."
+                    # Remove duplicate Scripts stage output
                     yield (
                         html_with_progress(label, progress),
                         []
@@ -710,9 +720,10 @@ Example: 'Received {total_slides} slides, {total_slides} scripts, and HTML files
                         if extracted_json:
                             scripts = extracted_json
                             logger.info("Extracted scripts JSON from HandoffMessage context: %s", scripts)
-                            add_stage_output("Scripts", json.dumps(scripts, indent=2))
+                            add_stage_output("Scripts", json.dumps(scripts, indent=2), "Task Completed")
                     progress = 75
                     label = "Review: in progress..."
+                    # Remove duplicate Review stage output
                     yield (
                         html_with_progress(label, progress),
                         []
@@ -725,7 +736,7 @@ Example: 'Received {total_slides} slides, {total_slides} scripts, and HTML files
                 if extracted_json:
                     slides = extracted_json
                     logger.info("Slide Agent generated %d slides: %s", len(slides), slides)
-                    add_stage_output("Slides", json.dumps(slides, indent=2))
+                    add_stage_output("Slides", json.dumps(slides, indent=2), "Task In Progress")
                     if len(slides) != total_slides:
                         if slide_retry_count < max_retries:
                             slide_retry_count += 1
@@ -741,9 +752,9 @@ Example: 'Received {total_slides} slides, {total_slides} scripts, and HTML files
                     html_files = create_slides(slides, title, instructor_name)
                     if not html_files:
                         logger.error("Failed to generate HTML slides")
-                        add_stage_output("Slides", "Failed to generate HTML slides")
+                        add_stage_output("Slides", "Failed to generate HTML slides", "Task Failed")
                     else:
-                        add_stage_output("Slides", f"Successfully generated {len(html_files)} HTML slides")
+                        add_stage_output("Slides", f"Successfully generated {len(html_files)} HTML slides", "Task Completed")
                     progress = 50
                     label = "Scripts: generating..."
                     yield (
@@ -770,7 +781,7 @@ Example: 'Received {total_slides} slides, {total_slides} scripts, and HTML files
                 if extracted_json:
                     scripts = extracted_json
                     logger.info("Script Agent generated scripts for %d slides: %s", len(scripts), scripts)
-                    add_stage_output("Scripts", json.dumps(scripts, indent=2))
+                    add_stage_output("Scripts", json.dumps(scripts, indent=2), "Task In Progress")
                     for i, script in enumerate(scripts):
                         script_file = os.path.join(OUTPUT_DIR, f"slide_{i+1}_script.txt")
                         try:
@@ -781,6 +792,7 @@ Example: 'Received {total_slides} slides, {total_slides} scripts, and HTML files
                         except Exception as e:
                             logger.error("Error saving script to %s: %s", script_file, str(e))
                             add_stage_output("Scripts", f"Failed to save script for slide {i+1}: {str(e)}")
+                    add_stage_output("Scripts", "All scripts generated and saved", "Task Completed")
                     progress = 75
                     label = "Script complete. Reviewing lecture materials..."
                     yield (
@@ -805,7 +817,8 @@ Example: 'Received {total_slides} slides, {total_slides} scripts, and HTML files
                 logger.info("Instructor Agent completed lecture review: %s", message.content)
                 progress = 90
                 label = "Lecture materials ready. Generating lecture speech..."
-                add_stage_output("Review", message.content)
+                add_stage_output("Review", message.content, "Task Completed")
+                add_stage_output("Speech", "Starting speech generation...", "Task In Progress")
                 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]
@@ -937,7 +950,7 @@ Example: 'Received {total_slides} slides, {total_slides} scripts, and HTML files
                         audio_urls[i] = None
                         progress = 90 + ((i + 1) / len(scripts)) * 10
                         label = f"Generating lecture speech for slide {i + 1}/{len(scripts)}..."
-                        add_stage_output("Speech", f"Failed to generate audio for slide {i + 1}: {str(e)}")
+                        add_stage_output("Speech", f"Failed to generate speech for slide {i + 1}: {str(e)}")
                         yield (
                             html_with_progress(label, progress),
                             file_paths,
@@ -1626,7 +1639,7 @@ with gr.Blocks(
             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")
+                lecture_type = gr.Dropdown(["Personalized", "Conference", "University", "High school"], label="Audience", value="Personalized")
                 lecture_style = gr.Dropdown(
                     ["Feynman - Simplifies complex ideas with enthusiasm", "Socratic - Guides insights with probing questions", "Inspirational - Sparks enthusiasm with visionary ideas", "Reflective - Promotes introspection with a calm tone", "Humorous - Uses wit and anecdotes for engaging content"],
                     label="Lecture Style",