Update app.py

app.py

@@ -65,7 +65,7 @@ example_prompts = {
     ]
 }
 
-# CSS style: prevent example Accordion from expanding into the sidebar
+# CSS style: fixed container width and prevent examples from expanding the layout
 css = """
 * {
     box-sizing: border-box;
@@ -83,7 +83,7 @@ body {
     padding: 30px 40px;
     box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
     margin: 40px auto;
-    max-width: 1200px;
+    width: 1200px;
 }
 .sidebar {
     background: rgba(255, 255, 255, 0.98);
@@ -107,15 +107,20 @@ button:hover, .btn:hover {
     transform: scale(1.05);
 }
 .example-accordion {
+    width: 100% !important;
     max-width: 100% !important;
 }
+.example-accordion button {
+    width: auto !important;
+    white-space: normal !important;
+}
 """
 
-with gr.Blocks(css=css, title="Business Agent") as demo:
+with gr.Blocks(css=css, title="Workflow Canvas") as demo:
     gr.Markdown(
         """
         <div style="text-align:center;">
-            <h1>Business Agent</h1>
+            <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>
         </div>
@@ -138,7 +143,12 @@ with gr.Blocks(css=css, title="Business Agent") as demo:
             with gr.Tabs():
                 # First tab: Product Design
                 with gr.Tab("Product Design"):
-                    pd_prompt = gr.Textbox(label="Product Design Prompt", placeholder="Enter a product design concept...", lines=5)
+                    pd_prompt = gr.Textbox(
+                        label="Product Design Prompt",
+                        placeholder="Enter a product design concept...",
+                        lines=5,
+                        value=example_prompts["Product Design"][0]
+                    )
                     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"):
@@ -147,7 +157,12 @@ with gr.Blocks(css=css, title="Business Agent") as demo:
                 
                 # Second tab: Flowchart
                 with gr.Tab("Flowchart"):
-                    flow_prompt = gr.Textbox(label="Flowchart Prompt", placeholder="Enter a flowchart description...", lines=5)
+                    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=False, elem_classes="example-accordion"):
@@ -156,7 +171,12 @@ with gr.Blocks(css=css, title="Business Agent") as demo:
                 
                 # Third tab: Infographic
                 with gr.Tab("Infographic"):
-                    info_prompt = gr.Textbox(label="Infographic Prompt", placeholder="Enter an infographic description...", lines=5)
+                    info_prompt = gr.Textbox(
+                        label="Infographic Prompt",
+                        placeholder="Enter an infographic description...",
+                        lines=5,
+                        value=example_prompts["Infographic"][0]
+                    )
                     info_generate = gr.Button("Generate Infographic")
                     info_image = gr.Image(label="Generated Infographic")
                     with gr.Accordion("Example Prompts", open=False, elem_classes="example-accordion"):
@@ -165,7 +185,12 @@ with gr.Blocks(css=css, title="Business Agent") as demo:
                 
                 # Fourth tab: Mockup
                 with gr.Tab("Mockup"):
-                    mock_prompt = gr.Textbox(label="Mockup Prompt", placeholder="Enter a mockup description...", lines=5)
+                    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"):
@@ -174,7 +199,12 @@ with gr.Blocks(css=css, title="Business Agent") as demo:
                 
                 # Fifth tab: Diagram
                 with gr.Tab("Diagram"):
-                    diag_prompt = gr.Textbox(label="Diagram Prompt", placeholder="Enter a diagram description...", lines=5)
+                    diag_prompt = gr.Textbox(
+                        label="Diagram Prompt",
+                        placeholder="Enter a diagram description...",
+                        lines=5,
+                        value=example_prompts["Diagram"][0]
+                    )
                     diag_generate = gr.Button("Generate Diagram")
                     diag_image = gr.Image(label="Generated Diagram")
                     with gr.Accordion("Example Prompts", open=False, elem_classes="example-accordion"):