Update app.py

app.py

@@ -602,7 +602,6 @@ def process_generated_prompt(prompt, paragraph):
     
     return prompt
 
-# Create the interface
 def create_interface():
     # Define CSS for custom styling
     css = """
@@ -658,101 +657,101 @@ def create_interface():
         
         # Step 1: Generate Landscape
         with gr.Row(elem_classes="section-content"):
+            with gr.Column(elem_classes="ai-lesson"):
+                gr.Markdown("""
+                ### Step 1: Setting the Scene with AI 🖼️
+                
+                🤖 **AI Lesson: Text-to-Image Generation**
+                We're using Stable Diffusion, a powerful AI model that turns text into images.
+                How it works:
+                - Starts with random noise and gradually refines it into an image
+                - Uses millions of image-text pairs from its training
+                - Combines understanding of both language and visual elements
+                - Takes about 50 steps to create each image
+                
+                Real-world applications: Book illustrations, concept art, product visualization
+                """)
             with gr.Column():
-                with gr.Box(elem_classes="ai-lesson"):
-                    gr.Markdown("""
-                    ### Step 1: Setting the Scene with AI 🖼️
-                    
-                    🤖 **AI Lesson: Text-to-Image Generation**
-                    We're using Stable Diffusion, a powerful AI model that turns text into images.
-                    How it works:
-                    - Starts with random noise and gradually refines it into an image
-                    - Uses millions of image-text pairs from its training
-                    - Combines understanding of both language and visual elements
-                    - Takes about 50 steps to create each image
-                    
-                    Real-world applications: Book illustrations, concept art, product visualization
-                    """)
                 generate_btn = gr.Button("1. Generate Random Landscape", elem_classes="custom-button")
                 image_output = gr.Image(label="Your AI-Generated Landscape", type="pil", interactive=False)
         
         # Step 2: Analyze Scene
         with gr.Row(elem_classes="section-content"):
+            with gr.Column(elem_classes="ai-lesson"):
+                gr.Markdown("""
+                ### Step 2: Teaching AI to See 👁️
+                
+                🤖 **AI Lesson: Vision-Language Models (VLM)**
+                Our VLM acts like an AI art critic, understanding and describing images.
+                How it works:
+                - Processes images through neural networks
+                - Identifies objects, scenes, colors, and relationships
+                - Translates visual features into natural language
+                - Uses attention mechanisms to focus on important details
+                
+                Real-world applications: Image search, accessibility tools, medical imaging
+                """)
             with gr.Column():
-                with gr.Box(elem_classes="ai-lesson"):
-                    gr.Markdown("""
-                    ### Step 2: Teaching AI to See 👁️
-                    
-                    🤖 **AI Lesson: Vision-Language Models (VLM)**
-                    Our VLM acts like an AI art critic, understanding and describing images.
-                    How it works:
-                    - Processes images through neural networks
-                    - Identifies objects, scenes, colors, and relationships
-                    - Translates visual features into natural language
-                    - Uses attention mechanisms to focus on important details
-                    
-                    Real-world applications: Image search, accessibility tools, medical imaging
-                    """)
                 analyze_btn = gr.Button("2. Get Brief Description", elem_classes="custom-button")
                 analysis_output = gr.Textbox(label="What the AI Sees", lines=3)
         
         # Step 3: Create Story
         with gr.Row(elem_classes="section-content"):
+            with gr.Column(elem_classes="ai-lesson"):
+                gr.Markdown("""
+                ### Step 3: Crafting the Narrative 📖
+                
+                🤖 **AI Lesson: Large Language Models**
+                Meet our AI storyteller! It uses a Large Language Model (LLM) to write creative stories.
+                How it works:
+                - Processes the scene description as context
+                - Uses pattern recognition from millions of stories
+                - Maintains narrative consistency and character development
+                - Adapts its writing style for children
+                
+                Real-world applications: Content creation, creative writing, education
+                """)
             with gr.Column():
-                with gr.Box(elem_classes="ai-lesson"):
-                    gr.Markdown("""
-                    ### Step 3: Crafting the Narrative 📖
-                    
-                    🤖 **AI Lesson: Large Language Models**
-                    Meet our AI storyteller! It uses a Large Language Model (LLM) to write creative stories.
-                    How it works:
-                    - Processes the scene description as context
-                    - Uses pattern recognition from millions of stories
-                    - Maintains narrative consistency and character development
-                    - Adapts its writing style for children
-                    
-                    Real-world applications: Content creation, creative writing, education
-                    """)
                 story_btn = gr.Button("3. Create Children's Story", elem_classes="custom-button")
                 story_output = gr.Textbox(label="Your AI-Generated Story", lines=10)
         
         # Step 4: Generate Prompts
         with gr.Row(elem_classes="section-content"):
+            with gr.Column(elem_classes="ai-lesson"):
+                gr.Markdown("""
+                ### Step 4: Planning the Illustrations 🎯
+                
+                🤖 **AI Lesson: Natural Language Processing**
+                The AI breaks down the story into key scenes and creates optimal image prompts.
+                How it works:
+                - Analyzes story structure and pacing
+                - Identifies key narrative moments
+                - Generates specialized prompts for each scene
+                - Ensures visual consistency across illustrations
+                
+                Real-world applications: Content planning, storyboarding, scene composition
+                """)
             with gr.Column():
-                with gr.Box(elem_classes="ai-lesson"):
-                    gr.Markdown("""
-                    ### Step 4: Planning the Illustrations 🎯
-                    
-                    🤖 **AI Lesson: Natural Language Processing**
-                    The AI breaks down the story into key scenes and creates optimal image prompts.
-                    How it works:
-                    - Analyzes story structure and pacing
-                    - Identifies key narrative moments
-                    - Generates specialized prompts for each scene
-                    - Ensures visual consistency across illustrations
-                    
-                    Real-world applications: Content planning, storyboarding, scene composition
-                    """)
                 prompts_btn = gr.Button("4. Generate Scene Prompts", elem_classes="custom-button")
                 prompts_output = gr.Textbox(label="Scene Descriptions", lines=20)
         
         # Step 5: Generate Scenes
         with gr.Row(elem_classes="section-content"):
+            with gr.Column(elem_classes="ai-lesson"):
+                gr.Markdown("""
+                ### Step 5: Bringing Scenes to Life 🎨
+                
+                🤖 **AI Lesson: Specialized Image Generation**
+                Using a fine-tuned model to create consistent character illustrations.
+                How it works:
+                - Uses LoRA (Low-Rank Adaptation) for specialized training
+                - Maintains consistent character appearance
+                - Processes multiple scenes in parallel
+                - Balances creativity with prompt adherence
+                
+                Real-world applications: Character design, animation, book illustration
+                """)
             with gr.Column():
-                with gr.Box(elem_classes="ai-lesson"):
-                    gr.Markdown("""
-                    ### Step 5: Bringing Scenes to Life 🎨
-                    
-                    🤖 **AI Lesson: Specialized Image Generation**
-                    Using a fine-tuned model to create consistent character illustrations.
-                    How it works:
-                    - Uses LoRA (Low-Rank Adaptation) for specialized training
-                    - Maintains consistent character appearance
-                    - Processes multiple scenes in parallel
-                    - Balances creativity with prompt adherence
-                    
-                    Real-world applications: Character design, animation, book illustration
-                    """)
                 generate_scenes_btn = gr.Button("5. Generate Story Scenes", elem_classes="custom-button")
                 scene_progress = gr.Textbox(label="Generation Progress", lines=6, interactive=False)
                 gallery = gr.Gallery(label="Story Scenes", columns=2, height="auto", interactive=False)
@@ -760,42 +759,42 @@ def create_interface():
         
         # Step 6: Add Text
         with gr.Row(elem_classes="section-content"):
+            with gr.Column(elem_classes="ai-lesson"):
+                gr.Markdown("""
+                ### Step 6: Creating Book Pages 📚
+                
+                🤖 **AI Lesson: Computer Vision & Layout**
+                Combining images and text requires sophisticated layout algorithms.
+                How it works:
+                - Analyzes image composition for text placement
+                - Adjusts font size and style for readability
+                - Creates visual hierarchy between elements
+                - Ensures consistent formatting across pages
+                
+                Real-world applications: Desktop publishing, web design, digital books
+                """)
             with gr.Column():
-                with gr.Box(elem_classes="ai-lesson"):
-                    gr.Markdown("""
-                    ### Step 6: Creating Book Pages 📚
-                    
-                    🤖 **AI Lesson: Computer Vision & Layout**
-                    Combining images and text requires sophisticated layout algorithms.
-                    How it works:
-                    - Analyzes image composition for text placement
-                    - Adjusts font size and style for readability
-                    - Creates visual hierarchy between elements
-                    - Ensures consistent formatting across pages
-                    
-                    Real-world applications: Desktop publishing, web design, digital books
-                    """)
                 add_text_btn = gr.Button("6. Add Text to Scenes", elem_classes="custom-button")
                 final_gallery = gr.Gallery(label="Final Book Pages", columns=2, height="auto", interactive=False)
                 download_btn = gr.File(label="Download Your Story Book", file_count="multiple", interactive=False)
         
         # Step 7: Audio Generation
         with gr.Row(elem_classes="section-content"):
+            with gr.Column(elem_classes="ai-lesson"):
+                gr.Markdown("""
+                ### Step 7: Adding Narration 🎧
+                
+                🤖 **AI Lesson: Text-to-Speech Synthesis**
+                Converting our story into natural-sounding speech.
+                How it works:
+                - Uses neural networks for voice synthesis
+                - Adds appropriate emotion and emphasis
+                - Controls pacing and pronunciation
+                - Maintains consistent voice throughout
+                
+                Real-world applications: Audiobooks, accessibility tools, virtual assistants
+                """)
             with gr.Column():
-                with gr.Box(elem_classes="ai-lesson"):
-                    gr.Markdown("""
-                    ### Step 7: Adding Narration 🎧
-                    
-                    🤖 **AI Lesson: Text-to-Speech Synthesis**
-                    Converting our story into natural-sounding speech.
-                    How it works:
-                    - Uses neural networks for voice synthesis
-                    - Adds appropriate emotion and emphasis
-                    - Controls pacing and pronunciation
-                    - Maintains consistent voice throughout
-                    
-                    Real-world applications: Audiobooks, accessibility tools, virtual assistants
-                    """)
                 tts_btn = gr.Button("7. Read Story Aloud", elem_classes="custom-button")
                 audio_output = gr.Audio(label="Story Narration")
 
@@ -817,7 +816,6 @@ def create_interface():
         tts_btn.click(fn=generate_combined_audio_from_story, inputs=[story_output], outputs=audio_output)
 
     return demo
-
 if __name__ == "__main__":
     demo = create_interface()
     demo.launch()