adding Progress bar on chapter creation

app.py

@@ -8,6 +8,7 @@ from dotenv import load_dotenv
 from pathlib import Path
 from ui.styles import main_css
 from ui.components import (
+    create_chapter_loading_placeholder,
     create_header,
     create_instructions_accordion,
     create_story_tab_header,
@@ -108,18 +109,71 @@ def create_app():
                 chapters_state = gr.State(value=None)
 
                 # Chapter processing loading animation
-                create_chapter_loading_container()
+                chapter_loading_container = create_chapter_loading_container()
+
+                # Function to show the chapter loading container when processing starts
+                def show_chapter_progress_container():
+                    return gr.update(visible=True)
+
+                # Connect process_chapters_button to show the loading container
+                process_chapters_button.click(
+                    show_chapter_progress_container,
+                    inputs=[],
+                    outputs=[chapter_loading_container],
+                )
 
                 @gr.render(inputs=[chapters_state])
                 def render_chapters(chapters_data):
                     if chapters_data is None:
                         return create_empty_chapters_placeholder()
 
-                    # Check if chapters_data is a string indicating an error
+                    # Check if chapters_data is a string indicating an error or dict with error key
                     if isinstance(chapters_data, str) and chapters_data.startswith(
                         "Error:"
                     ):
                         return create_chapter_error_display(chapters_data)
+                    elif isinstance(chapters_data, dict) and "error" in chapters_data:
+                        return create_chapter_error_display(chapters_data["error"])
+
+                    # Check if we're still processing
+                    if isinstance(chapters_data, dict) and chapters_data.get(
+                        "processing", False
+                    ):
+                        # If chapters exist but we're still processing, show them with loading indicators
+                        chapters = chapters_data.get("chapters", [])
+                        if chapters:
+                            # Display story title with magical styling
+                            create_story_title_display(
+                                chapters_data.get("title", "Story Chapters")
+                            )
+
+                            # Chapter navigation
+                            create_chapter_navigation()
+
+                            # Display each chapter with appropriate loading indicators
+                            for i, chapter in enumerate(chapters, 1):
+                                status = chapter.get(
+                                    "status", "Creating your magical illustration..."
+                                )
+
+                                (
+                                    read_aloud_btn,
+                                    read_aloud_audio,
+                                    chapter_content_state,
+                                    audio_statuss,
+                                ) = create_chapter_accordion(index=i, chapter=chapter)
+
+                                # Add audio generation functionality
+                                read_aloud_btn.click(
+                                    generate_audio_with_status,
+                                    inputs=[chapter_content_state],
+                                    outputs=[read_aloud_audio, audio_statuss],
+                                )
+
+                            return gr.update()
+                        else:
+                            # If no chapters yet, show a processing message
+                            return create_chapter_loading_placeholder()
 
                     # Display story title with magical styling
                     create_story_title_display(
@@ -192,6 +246,7 @@ def create_app():
             story_title=story_title,
             story_text=story_text,
             chapters_state=chapters_state,
+            chapter_loading_container=chapter_loading_container,
         )
 
     return demo

controllers/app_controller.py

@@ -1,6 +1,6 @@
 import logging
 import json
-from typing import Optional, List, Any, Union, Tuple
+from typing import Optional, List, Any, Union, Tuple, Dict
 from services.story_generator import generate_story
 from services.pdf_text_extractor import extract_text_from_pdf
 from services.streaming_chapter_processor import process_story_into_chapters_streaming
@@ -135,6 +135,20 @@ def process_chapters(
                 current_data = {"title": story_title, "chapters": chapters}
 
                 # Count completed images
+                total_chapters = len(chapters)
+                completed_images = sum(
+                    1 for chapter in chapters if chapter.get("image_b64", "")
+                )
+
+                # Update progress
+                if total_chapters > 0:
+                    # First 50% is chapter creation, second 50% is image generation
+                    chapter_progress = 0.5  # Chapters are already created at this point
+                    image_progress = 0.5 * (completed_images / total_chapters)
+                    progress(
+                        (chapter_progress + image_progress),
+                        f"Generated {completed_images}/{total_chapters} chapter images",
+                    )
 
             except Exception as e:
                 logger.error(f"Error in update callback: {e}")
@@ -142,12 +156,12 @@ def process_chapters(
             return current_data
 
         # Start the streaming process
+        progress(0.05, "Splitting story into chapters...")
         process_story_into_chapters_streaming(
             story_content, story_title, update_callback=update_callback
         )
 
         # Return the final data structure
-
         return current_data
 
     except Exception as e:
@@ -156,18 +170,82 @@ def process_chapters(
 
 
 # Add chapter processing functionality
-def handle_chapter_processing(story_content, story_title):
+def handle_chapter_processing(story_content, story_title, progress=gr.Progress()):
     """Handle chapter processing and update state"""
     if not story_content or story_content.startswith("Error:"):
-        return "Error: Please generate a valid story first."
-    gr.update(interactive=False)
+        return {"error": "Please generate a valid story first."}
     gr.Info(
         message="Processing story into chapters... <br> Go to the Chapters tab to see updates.",
         title="Processing",
     )
+
     # Process chapters and return the data structure
-    result = process_chapters(story_content, story_title)
-    return result
+    logger.info("Starting chapter processing...")
+    progress(0.01, "Starting chapter processing...")
+
+    try:
+        # Store for the current chapters data
+        current_data = {"title": story_title, "chapters": [], "processing": True}
+
+        # Callback function to update the UI with each new chapter image
+        def update_callback(chapters_json):
+            nonlocal current_data
+            try:
+                chapters_data = json.loads(chapters_json)
+
+                # Handle progress updates
+                if "progress" in chapters_data:
+                    prog_data = chapters_data["progress"]
+                    prog_value = prog_data.get("completed", 0) / prog_data.get(
+                        "total", 1
+                    )
+                    prog_message = prog_data.get("message", "Processing chapters...")
+                    progress(prog_value, prog_message)
+
+                # Handle error cases
+                if "error" in chapters_data:
+                    current_data = {
+                        "title": story_title,
+                        "error": chapters_data["error"],
+                    }
+                    return current_data
+
+                # Update chapters if present
+                if "chapters" in chapters_data:
+                    chapters = chapters_data.get("chapters", [])
+                    current_data = {
+                        "title": story_title,
+                        "chapters": chapters,
+                        "processing": True,
+                    }
+
+                    # Check if processing is complete
+                    if (
+                        "progress" in chapters_data
+                        and chapters_data["progress"].get("stage") == "complete"
+                    ):
+                        current_data["processing"] = False
+
+            except Exception as e:
+                logger.error(f"Error in update callback: {e}")
+                current_data = {
+                    "title": story_title,
+                    "error": f"Error in update: {str(e)}",
+                }
+
+            return current_data
+
+        # Start the streaming process
+        process_story_into_chapters_streaming(
+            story_content, story_title, update_callback=update_callback
+        )
+
+        # Return the final data structure
+        return current_data
+
+    except Exception as e:
+        logger.error(f"Failed to process chapters: {e}", exc_info=True)
+        return {"title": story_title, "error": f"Error processing chapters: {str(e)}"}
 
 
 def generate_audio_with_status(text):

services/streaming_chapter_processor.py

@@ -87,6 +87,18 @@ class StreamingChapterProcessor:
             str: JSON string with updated chapters as images are generated
         """
 
+        # First yield a progress update indicating we're starting
+        yield json.dumps(
+            {
+                "progress": {
+                    "stage": "starting",
+                    "message": "Starting chapter processing...",
+                    "completed": 0,
+                    "total": 1,
+                }
+            }
+        )
+
         # Create prompt for splitting the text
         prompt = f"""Split the following story into logical chapters (3-5 chapters). And do not include any additional text or explanations. Include all the chapter content.
 For each chapter:
@@ -111,6 +123,18 @@ Here's the story to split:
 {story_text}
 """
         try:
+            # Update progress - sending API request
+            yield json.dumps(
+                {
+                    "progress": {
+                        "stage": "analyzing",
+                        "message": "Analyzing story and creating chapters...",
+                        "completed": 0.1,
+                        "total": 1,
+                    }
+                }
+            )
+
             result = self.mistral_api.send_request(prompt)
             logger.info("Getting chapter splitting request from Mistral API")
 
@@ -118,13 +142,36 @@ Here's the story to split:
                 content = result["choices"][0]["message"]["content"]
                 chapters_data = self._extract_chapters_from_api_response(content)
 
-                # First yield the chapters without images
-                # Add empty image_b64 fields to chapters
+                # Update progress - chapters created
+                yield json.dumps(
+                    {
+                        "progress": {
+                            "stage": "chapters_created",
+                            "message": "Chapters created! Preparing for image generation...",
+                            "completed": 0.3,
+                            "total": 1,
+                        }
+                    }
+                )
+
+                # Add empty image_b64 fields and progress status to chapters
                 for chapter in chapters_data:
                     chapter["image_b64"] = ""
+                    chapter["status"] = "Waiting for image generation..."
 
                 # First yield the chapters without images
-                yield json.dumps({"chapters": chapters_data}, indent=2)
+                yield json.dumps(
+                    {
+                        "chapters": chapters_data,
+                        "progress": {
+                            "stage": "chapters_created",
+                            "message": "Chapters created! Starting image generation...",
+                            "completed": 0.4,
+                            "total": 1,
+                        },
+                    },
+                    indent=2,
+                )
 
                 # Start image generation in parallel
                 with concurrent.futures.ThreadPoolExecutor() as executor:
@@ -136,6 +183,7 @@ Here's the story to split:
                 # Keep track of which chapters have been updated
                 updated_chapters = list(chapters_data)
                 chapters_remaining = len(chapters_data)
+                completed_images = 0
 
                 # Yield updates as images are generated
                 while chapters_remaining > 0:
@@ -143,13 +191,45 @@ Here's the story to split:
                         # Wait for up to 1 second for a new image
                         index, updated_chapter = self.chapter_queue.get(timeout=1)
                         updated_chapters[index] = updated_chapter
+                        updated_chapters[index]["status"] = "Image generated!"
                         chapters_remaining -= 1
+                        completed_images += 1
 
-                        # Yield the updated chapters list
-                        yield json.dumps({"chapters": updated_chapters}, indent=2)
+                        # Calculate progress percentage (40% for chapters creation + 60% for image generation)
+                        progress_value = 0.4 + (
+                            0.6 * completed_images / len(chapters_data)
+                        )
+
+                        # Yield the updated chapters list with progress information
+                        yield json.dumps(
+                            {
+                                "chapters": updated_chapters,
+                                "progress": {
+                                    "stage": "generating_images",
+                                    "message": f"Generating chapter images: {completed_images}/{len(chapters_data)} complete",
+                                    "completed": progress_value,
+                                    "total": 1,
+                                },
+                            },
+                            indent=2,
+                        )
                     except queue.Empty:
                         # No new images yet, continue waiting
                         continue
+
+                # Final progress update
+                yield json.dumps(
+                    {
+                        "chapters": updated_chapters,
+                        "progress": {
+                            "stage": "complete",
+                            "message": "All chapters and images are ready!",
+                            "completed": 1.0,
+                            "total": 1,
+                        },
+                    },
+                    indent=2,
+                )
             else:
                 logger.error("Invalid response format from Mistral API")
                 yield json.dumps({"error": "Invalid response format from Mistral API"})

ui/components.py

@@ -250,10 +250,10 @@ def create_story_output_container():
 
 def create_chapter_loading_container():
     """Create the loading animation container for chapters"""
-    with gr.Row(visible=False) as container:
+    with gr.Row(visible=False, elem_id="chapter-loading-container") as container:
         gr.HTML("""
-            <div class="loading-animation">
-                🎨 <span style="color: #ff9057;">Creating illustrated chapters...</span> 🎨
+            <div id="progress-info"">
+                <span id="progress-stage">...</span>
             </div>
         """)
     return container
@@ -262,16 +262,36 @@ def create_chapter_loading_container():
 def create_empty_chapters_placeholder():
     """Create the placeholder for when no chapters are available"""
     return gr.HTML("""
-        <div class="image-header-wrapper">
+        <div class="image-header-wrapper empty-placeholder" id="empty-chapters-placeholder">
             <img src="/gradio_api/file=assets/images/empty_bk.png" style="width: 150px; margin-bottom: 20px;" alt="Empty Book">
             <h1 class="sub-header" style="margin-left: 16px; padding-bottom: 36px;">
                Your Illustrated Story Awaits!
             </h1>
         </div>
-            <p class="text" style="font-size: 1.2em; text-align: center;">First, create your story and then click the "Create Illustrated Chapters!" button to see your story come to life with pictures!</p>
+            <p class="text empty-placeholder" style="font-size: 1.2em; text-align: center;">First, create your story and then click the "Create Illustrated Chapters!" button to see your story come to life with pictures!</p>
     """)
 
 
+def create_chapter_loading_placeholder():
+    return gr.HTML("""
+                                <div style="text-align: center; padding: 30px; background-color: #f0f7ff; border-radius: 15px;">
+                                    <div class="loading-animation" style="font-size: 36px;">✨📚✨</div>
+                                    <h3 style="color: #5d9df5; margin-top: 20px;">Creating Your Magical Story Chapters...</h3>
+                                    <p style="color: #666; margin-top: 10px;">Our wizard is crafting beautiful chapters and illustrations for your story...</p>
+                                    <div class="small-loader" style="text-align: center; padding: 10px;">
+                                    <div class="spinner" style="display: inline-block; width: 20px; height: 20px; 
+                                        border: 3px solid rgba(0, 0, 0, 0.1); border-radius: 50%; 
+                                        border-top-color: #3498db; animation: spin 1s linear infinite;"></div>
+                                    <style>
+                                        @keyframes spin {
+                                            to { transform: rotate(360deg); }
+                                        }
+                                    </style>
+                                </div>
+                                </div>
+            """)
+
+
 def create_chapter_error_display(error_message):
     """Create an error display for chapter generation issues"""
     return gr.HTML(f"""
@@ -344,7 +364,7 @@ def create_chapter_accordion(index, chapter):
                         gr.HTML("""
                             <div style="text-align: center; padding: 30px; background-color: #f0f7ff; border-radius: 15px;">
                                 <div class="loading-animation" style="font-size: 30px;">🖌️</div>
-                                <p style="color: #5d9df5; font-weight: bold; margin-top: 15px;">Creating your magical illustration...</p>
+                                <p style="color: #5d9df5; font-weight: bold; margin-top: 15px;">{status}</p>
                             </div>
                         """)
 

ui/events.py

@@ -2,6 +2,7 @@
 Event handlers for the Magic Story Creator
 """
 
+import gradio as gr
 from controllers.app_controller import (
     process_story_generation,
     clear_fields,
@@ -25,6 +26,7 @@ def setup_event_handlers(
     story_title,
     story_text,
     chapters_state,
+    chapter_loading_container=None,
 ):
     """Set up all the event handlers for the application"""
 
@@ -52,11 +54,33 @@ def setup_event_handlers(
         outputs=[subject, story_title, story_text, process_chapters_button],
     )
 
-    # Chapter processing event handler
+    # Function to show loading container and hide placeholder when processing starts
+    def start_chapter_processing(story_text, story_title):
+        # Return initial data structure with processing flag
+        return {"title": story_title, "processing": True, "chapters": []}
+
+    # If we have a loading container reference, show it when processing starts
+    if chapter_loading_container:
+        process_chapters_button.click(
+            lambda: gr.update(visible=True),
+            inputs=[],
+            outputs=[chapter_loading_container],
+        )
+
+    # Show the loading indicator before processing starts and hide placeholder
+    process_chapters_button.click(
+        start_chapter_processing,
+        inputs=[story_text, story_title],
+        outputs=[chapters_state],
+        js="function() { document.querySelectorAll('.empty-placeholder').forEach(el => el.style.display = 'none');window.scrollTo({ top: 0, behavior: 'smooth' }); return []; }",
+    )
+
+    # Chapter processing event handler - happens after loading container is shown
     process_chapters_button.click(
         handle_chapter_processing,
         inputs=[story_text, story_title],
         outputs=[chapters_state],
+        show_progress=True,  # Show progress bar
     )
 
     return generate_button, clear_button, process_chapters_button