Update app.py

app.py

@@ -36,36 +36,55 @@ def generate_image(prompt, seed, randomize_seed, width, height, steps, guidance_
 def set_prompt(example_text):
     return example_text
 
-# Example prompts per tab (each with "AI Electric Bicycle", "Dog-shaped Toy Robot", "Drone")
+# Example prompts per tab in the specified tree/list format:
 example_prompts = {
     "Product Design": [
-        "A futuristic product design of an AI electric bicycle with modern aesthetics and advanced technology.",
-        "A playful product design for a dog-shaped toy robot, cute and interactive.",
-        "An innovative product design for a drone, sleek and highly functional."
+        """A sleek industrial design concept for a coffee machine: 
+- Curved metallic body with minimal bezel
+- Touchscreen panel for settings
+- Modern matte black finish
+- Hand-drawn concept sketch style"""
     ],
-    "Flowchart": [
-        "A flowchart outlining the design and development process for an AI electric bicycle—from concept to production.",
-        "A flowchart detailing the workflow for designing a dog-shaped toy robot, from brainstorming to testing.",
-        "A flowchart mapping out the design process for a drone, including ideation and final assembly."
+    "Mockup": [
+        """A clean hand-drawn style wireframe for a mobile banking app:
+- Title screen with logo
+- Login screen (username, password, login button)
+- Dashboard with 3 main sections (balance, transactions, quick actions)
+- Bottom navigation bar (home, transfers, profile)"""
     ],
     "Infographic": [
-        "An infographic presenting key statistics and design features of an AI electric bicycle, with modern icons and graphics.",
-        "An infographic showing the design evolution of a dog-shaped toy robot, with sketches and key milestones.",
-        "An infographic summarizing the innovative features of a drone design, with visual data and timelines."
-    ],
-    "Mockup": [
-        "A mockup sketch of an AI electric bicycle interface and dashboard, showcasing futuristic control panels.",
-        "A mockup wireframe for a dog-shaped toy robot's app interface, highlighting playful interactions.",
-        "A mockup of a drone's control system and layout, featuring modern UX elements."
+        """A modern flat-style infographic about global renewable energy usage:
+- Title: "Global Renewable Energy Share"
+- Bar chart showing Solar, Wind, Hydro
+- Pie chart: 40% Solar, 35% Wind, 25% Hydro
+- Minimalist icons: sun, wind turbine, water wave
+- Clean layout with pastel color scheme"""
     ],
     "Diagram": [
-        "A diagram illustrating the structural design and workflow of an AI electric bicycle, with clear stages and connections.",
-        "A diagram outlining the components and design process of a dog-shaped toy robot, with labeled sections.",
-        "A diagram showcasing the technical design and assembly process of a drone, with step-by-step visuals."
+        """A colorful hand-drawn diagram illustrating the water cycle:
+- Evaporation (arrows from ocean)
+- Condensation (clouds forming)
+- Precipitation (rain from clouds)
+- Collection (rivers, lakes)
+- Include simple icons: sun, cloud, raindrops
+- Vibrant educational style"""
+    ],
+    "Flowchart": [
+        """A hand-drawn style flowchart, vibrant colors, minimalistic icons.
+BUSINESS WORKFLOW
+├── START [Green Button ~40px]
+│   ├── COLLECT REQUIREMENTS [Folder Icon]
+│   └── ANALYZE DATA [Chart Icon]
+├── IMPLEMENTATION [Coding Symbol ~50px]
+│   ├── FRONTEND [Browser Icon]
+│   └── BACKEND [Server Icon]
+├── TEST & INTEGRATION [Gear Icon ~45px]
+└── DEPLOY
+    └── END [Checkered Flag ~40px]"""
     ]
 }
 
-# CSS style: fixed container width and prevent examples from expanding the layout
+# CSS style: fixed container width and preventing examples from expanding the layout
 css = """
 * {
     box-sizing: border-box;
@@ -122,7 +141,7 @@ with gr.Blocks(css=css, title="Workflow Canvas") as demo:
         <div style="text-align:center;">
             <h1>Workflow Canvas</h1>
             <p>Generate design concepts and workflow diagrams for your business needs using our multi-tab interface.</p>
-            <p><strong>AI Spaces:</strong> Product Design, Flowchart, Infographic, Mockup, Diagram</p>
+            <p><strong>AI Spaces:</strong> Product Design, Mockup, Infographic, Diagram, Flowchart</p>
         </div>
         """
     )
@@ -138,10 +157,11 @@ with gr.Blocks(css=css, title="Workflow Canvas") as demo:
             steps_slider = gr.Slider(label="Inference Steps", minimum=1, maximum=50, step=1, value=20)
             guidance_slider = gr.Slider(label="Guidance Scale", minimum=0.0, maximum=15.0, step=0.5, value=7.5)
         
-        # Main area: Tabbed interface for different design types (first tab: Product Design)
+        # Main area: Tabbed interface for different design types in specified order:
+        # Order: Product Design, Mockup, Infographic, Diagram, Flowchart
         with gr.Column(scale=8):
             with gr.Tabs():
-                # First tab: Product Design
+                # Tab 1: Product Design
                 with gr.Tab("Product Design"):
                     pd_prompt = gr.Textbox(
                         label="Product Design Prompt",
@@ -151,25 +171,25 @@ with gr.Blocks(css=css, title="Workflow Canvas") as demo:
                     )
                     pd_generate = gr.Button("Generate Product Design")
                     pd_image = gr.Image(label="Generated Product Design")
-                    with gr.Accordion("Example Prompts", open=False, elem_classes="example-accordion"):
+                    with gr.Accordion("Example Prompts", open=True, elem_classes="example-accordion"):
                         for ex in example_prompts["Product Design"]:
                             gr.Button(ex, variant="secondary").click(fn=lambda ex=ex: set_prompt(ex), outputs=pd_prompt)
                 
-                # Second tab: Flowchart
-                with gr.Tab("Flowchart"):
-                    flow_prompt = gr.Textbox(
-                        label="Flowchart Prompt",
-                        placeholder="Enter a flowchart description...",
+                # Tab 2: Mockup
+                with gr.Tab("Mockup"):
+                    mock_prompt = gr.Textbox(
+                        label="Mockup Prompt",
+                        placeholder="Enter a mockup description...",
                         lines=5,
-                        value=example_prompts["Flowchart"][0]
+                        value=example_prompts["Mockup"][0]
                     )
-                    flow_generate = gr.Button("Generate Flowchart")
-                    flow_image = gr.Image(label="Generated Flowchart")
-                    with gr.Accordion("Example Prompts", open=False, elem_classes="example-accordion"):
-                        for ex in example_prompts["Flowchart"]:
-                            gr.Button(ex, variant="secondary").click(fn=lambda ex=ex: set_prompt(ex), outputs=flow_prompt)
+                    mock_generate = gr.Button("Generate Mockup")
+                    mock_image = gr.Image(label="Generated Mockup")
+                    with gr.Accordion("Example Prompts", open=True, elem_classes="example-accordion"):
+                        for ex in example_prompts["Mockup"]:
+                            gr.Button(ex, variant="secondary").click(fn=lambda ex=ex: set_prompt(ex), outputs=mock_prompt)
                 
-                # Third tab: Infographic
+                # Tab 3: Infographic
                 with gr.Tab("Infographic"):
                     info_prompt = gr.Textbox(
                         label="Infographic Prompt",
@@ -179,25 +199,11 @@ with gr.Blocks(css=css, title="Workflow Canvas") as demo:
                     )
                     info_generate = gr.Button("Generate Infographic")
                     info_image = gr.Image(label="Generated Infographic")
-                    with gr.Accordion("Example Prompts", open=False, elem_classes="example-accordion"):
+                    with gr.Accordion("Example Prompts", open=True, elem_classes="example-accordion"):
                         for ex in example_prompts["Infographic"]:
                             gr.Button(ex, variant="secondary").click(fn=lambda ex=ex: set_prompt(ex), outputs=info_prompt)
                 
-                # Fourth tab: Mockup
-                with gr.Tab("Mockup"):
-                    mock_prompt = gr.Textbox(
-                        label="Mockup Prompt",
-                        placeholder="Enter a mockup description...",
-                        lines=5,
-                        value=example_prompts["Mockup"][0]
-                    )
-                    mock_generate = gr.Button("Generate Mockup")
-                    mock_image = gr.Image(label="Generated Mockup")
-                    with gr.Accordion("Example Prompts", open=False, elem_classes="example-accordion"):
-                        for ex in example_prompts["Mockup"]:
-                            gr.Button(ex, variant="secondary").click(fn=lambda ex=ex: set_prompt(ex), outputs=mock_prompt)
-                
-                # Fifth tab: Diagram
+                # Tab 4: Diagram
                 with gr.Tab("Diagram"):
                     diag_prompt = gr.Textbox(
                         label="Diagram Prompt",
@@ -207,9 +213,23 @@ with gr.Blocks(css=css, title="Workflow Canvas") as demo:
                     )
                     diag_generate = gr.Button("Generate Diagram")
                     diag_image = gr.Image(label="Generated Diagram")
-                    with gr.Accordion("Example Prompts", open=False, elem_classes="example-accordion"):
+                    with gr.Accordion("Example Prompts", open=True, elem_classes="example-accordion"):
                         for ex in example_prompts["Diagram"]:
                             gr.Button(ex, variant="secondary").click(fn=lambda ex=ex: set_prompt(ex), outputs=diag_prompt)
+                
+                # Tab 5: Flowchart
+                with gr.Tab("Flowchart"):
+                    flow_prompt = gr.Textbox(
+                        label="Flowchart Prompt",
+                        placeholder="Enter a flowchart description...",
+                        lines=5,
+                        value=example_prompts["Flowchart"][0]
+                    )
+                    flow_generate = gr.Button("Generate Flowchart")
+                    flow_image = gr.Image(label="Generated Flowchart")
+                    with gr.Accordion("Example Prompts", open=True, elem_classes="example-accordion"):
+                        for ex in example_prompts["Flowchart"]:
+                            gr.Button(ex, variant="secondary").click(fn=lambda ex=ex: set_prompt(ex), outputs=flow_prompt)
     
     # Bind events for generation buttons
     pd_generate.click(
@@ -218,10 +238,10 @@ with gr.Blocks(css=css, title="Workflow Canvas") as demo:
         outputs=[pd_image, seed_slider]
     )
     
-    flow_generate.click(
+    mock_generate.click(
         fn=generate_image,
-        inputs=[flow_prompt, seed_slider, randomize_seed, width_slider, height_slider, steps_slider, guidance_slider],
-        outputs=[flow_image, seed_slider]
+        inputs=[mock_prompt, seed_slider, randomize_seed, width_slider, height_slider, steps_slider, guidance_slider],
+        outputs=[mock_image, seed_slider]
     )
     
     info_generate.click(
@@ -230,17 +250,17 @@ with gr.Blocks(css=css, title="Workflow Canvas") as demo:
         outputs=[info_image, seed_slider]
     )
     
-    mock_generate.click(
-        fn=generate_image,
-        inputs=[mock_prompt, seed_slider, randomize_seed, width_slider, height_slider, steps_slider, guidance_slider],
-        outputs=[mock_image, seed_slider]
-    )
-    
     diag_generate.click(
         fn=generate_image,
         inputs=[diag_prompt, seed_slider, randomize_seed, width_slider, height_slider, steps_slider, guidance_slider],
         outputs=[diag_image, seed_slider]
     )
+    
+    flow_generate.click(
+        fn=generate_image,
+        inputs=[flow_prompt, seed_slider, randomize_seed, width_slider, height_slider, steps_slider, guidance_slider],
+        outputs=[flow_image, seed_slider]
+    )
 
 if __name__ == "__main__":
     demo.queue()