Update app.py

app.py

@@ -359,7 +359,9 @@ def generate_all_scenes(prompts_text):
     
 @spaces.GPU(duration=60)
 def add_text_to_scenes(gallery_images, prompts_text):
+    """Add text overlay to scene images"""
     if not isinstance(gallery_images, list):
+        print("Error: gallery_images is not a list")
         return [], []
     
     clear_memory()
@@ -385,22 +387,40 @@ def add_text_to_scenes(gallery_images, prompts_text):
         
         if paragraph and image_data is not None:
             try:
-                # Handle tuple case (image, label) from gallery
-                if isinstance(image_data, tuple):
-                    image_data = image_data[0]
+                print(f"Processing image {i+1}, type: {type(image_data)}")
+                print(f"Image data: {str(image_data)[:100]}...")  # Print first 100 chars
                 
-                # Convert numpy array to PIL Image
-                if isinstance(image_data, np.ndarray):
+                # Handle different types of image data
+                if isinstance(image_data, str):
+                    # If it's a string, try to load it as a numpy array
+                    try:
+                        import ast
+                        # Convert string representation of array to actual array
+                        array_data = ast.literal_eval(image_data)
+                        image = Image.fromarray(np.array(array_data, dtype=np.uint8))
+                    except:
+                        print(f"Failed to convert string to array for image {i+1}")
+                        continue
+                elif isinstance(image_data, tuple):
+                    # Handle gallery tuple format (image, label)
+                    image_data = image_data[0]
+                    if isinstance(image_data, np.ndarray):
+                        image = Image.fromarray(image_data)
+                    else:
+                        print(f"Unexpected tuple data type: {type(image_data)}")
+                        continue
+                elif isinstance(image_data, np.ndarray):
                     image = Image.fromarray(image_data)
-                else:
+                elif isinstance(image_data, Image.Image):
                     image = image_data
+                else:
+                    print(f"Unsupported image data type: {type(image_data)}")
+                    continue
                 
-                print(f"Processing image {i+1}, type: {type(image)}")
+                # Ensure we have a valid RGB image
+                if image.mode != 'RGB':
+                    image = image.convert('RGB')
                 
-                # Ensure we have a PIL Image
-                if not isinstance(image, Image.Image):
-                    raise TypeError(f"Expected PIL Image, got {type(image)}")
-                    
                 overlaid_img = overlay_text_on_image(image, paragraph)
                 if overlaid_img is not None:
                     overlaid_array = np.array(overlaid_img)
@@ -410,8 +430,11 @@ def add_text_to_scenes(gallery_images, prompts_text):
                     overlaid_img.save(output_path)
                     output_files.append(output_path)
                     print(f"Successfully processed image {i+1}")
+                
             except Exception as e:
                 print(f"Error processing image {i+1}: {str(e)}")
+                import traceback
+                print(traceback.format_exc())  # Print full error trace
                 continue
     
     if not overlaid_images:
@@ -581,121 +604,220 @@ def process_generated_prompt(prompt, paragraph):
 
 # Create the interface
 def create_interface():
-    with gr.Blocks() as demo:
-        gr.Markdown("# Tech Tales: Story Creation")
+    # Define CSS for custom styling
+    css = """
+        /* Global styles */
+        .gradio-container {
+            background-color: #EBF8FF !important;
+        }
         
-        with gr.Row():
-            generate_btn = gr.Button("1. Generate Random Landscape")
-        with gr.Row():
-            image_output = gr.Image(label="Generated Image", type="pil", interactive=False)
-            
-        with gr.Row():
-            analyze_btn = gr.Button("2. Get Brief Description")
-        with gr.Row():
-            analysis_output = gr.Textbox(label="Image Description", lines=3)
-        
-        with gr.Row():
-            story_btn = gr.Button("3. Create Children's Story")
-        with gr.Row():
-            story_output = gr.Textbox(label="Generated Story", lines=10)
-        
-        with gr.Row():
-            prompts_btn = gr.Button("4. Generate Scene Prompts")
-        with gr.Row():   
-            prompts_output = gr.Textbox(label="Generated Scene Prompts", lines=20)
-        
-        with gr.Row():
-            generate_scenes_btn = gr.Button("5. Generate Story Scenes", variant="primary")
-            
-        with gr.Row():
-            scene_progress = gr.Textbox(
-                label="Generation Progress",
-                lines=6,
-                interactive=False
-            )
-            
-        with gr.Row():
-            gallery = gr.Gallery(
-                label="Story Scenes",
-                show_label=True,
-                columns=2,
-                height="auto",
-                interactive=False
-            )
-            
-        with gr.Row():
-            scene_prompts_display = gr.Textbox(
-                label="Scene Descriptions",
-                lines=8,
-                interactive=False
-            )
+        /* Custom button styling */
+        .custom-button {
+            background-color: #3B82F6 !important;
+            color: white !important;
+            border: none !important;
+            border-radius: 8px !important;
+            padding: 10px 20px !important;
+            margin: 10px 0 !important;
+            min-width: 200px !important;
+        }
         
-        with gr.Row():
-            add_text_btn = gr.Button("6. Add Text to Scenes", variant="primary")
+        .custom-button:hover {
+            background-color: #2563EB !important;
+        }
         
-        with gr.Row():
-            final_gallery = gr.Gallery(
-                label="Story Book Pages",
-                show_label=True,
-                columns=2,
-                height="auto",
-                interactive=False
-            )
-            
-        with gr.Row():
-            download_btn = gr.File(
-                label="Download Story Book",
-                file_count="multiple",
-                interactive=False
-            )
-            
-        with gr.Row():
-            tts_btn = gr.Button("7. Read Story Aloud")
-            audio_output = gr.Audio(label="Story Audio")
-
-        # Event handlers
-        generate_btn.click(
-            fn=generate_image,
-            outputs=image_output
-        )
+        /* Section styling */
+        .section-content {
+            background-color: white !important;
+            border-radius: 12px !important;
+            padding: 20px !important;
+            margin: 10px 0 !important;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
+        }
         
-        analyze_btn.click(
-            fn=analyze_image,
-            inputs=[image_output],
-            outputs=analysis_output
-        )
+        /* AI Lesson box styling */
+        .ai-lesson {
+            background-color: #FEE2E2 !important;
+            border-radius: 8px !important;
+            padding: 15px !important;
+            margin: 10px 0 !important;
+            border: 1px solid #FCA5A5 !important;
+        }
+    """
+    
+    with gr.Blocks(css=css) as demo:
+        gr.Markdown("""
+        # 🎨 Tech Tales: AI Children's Story Creator
         
-        story_btn.click(
-            fn=generate_story,
-            inputs=[analysis_output],
-            outputs=story_output
-        )
+        Welcome to this educational AI story creation tool! This app demonstrates how multiple AI models 
+        work together to create an illustrated children's story. Each step includes a brief AI lesson 
+        to help you understand the technology being used.
         
-        prompts_btn.click(
-            fn=generate_image_prompts,
-            inputs=[story_output],
-            outputs=prompts_output
-        )
+        Let's create something magical! ✨
+        """)
         
+        # Step 1: Generate Landscape
+        with gr.Row(elem_classes="section-content"):
+            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():
+                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():
+                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():
+                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():
+                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)
+                scene_prompts_display = gr.Textbox(label="Scene Details", lines=8, interactive=False)
+        
+        # Step 6: Add Text
+        with gr.Row(elem_classes="section-content"):
+            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():
+                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")
+
+        # Event handlers
+        generate_btn.click(fn=generate_image, outputs=image_output)
+        analyze_btn.click(fn=analyze_image, inputs=[image_output], outputs=analysis_output)
+        story_btn.click(fn=generate_story, inputs=[analysis_output], outputs=story_output)
+        prompts_btn.click(fn=generate_image_prompts, inputs=[story_output], outputs=prompts_output)
         generate_scenes_btn.click(
             fn=generate_all_scenes,
             inputs=[prompts_output],
             outputs=[gallery, scene_prompts_display, scene_progress]
         )
-        
         add_text_btn.click(
             fn=add_text_to_scenes,
             inputs=[gallery, prompts_output],
             outputs=[final_gallery, download_btn]
         )
-        
-        tts_btn.click(
-            fn=generate_combined_audio_from_story,
-            inputs=[story_output],
-            outputs=audio_output
-        )
+        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()