Update app.py

app.py

@@ -5,16 +5,156 @@ import torch
 from diffusers import DiffusionPipeline
 import spaces
 
-# Basic settings
+# ---- THEME DESIGN TOKENS ----
+SAAS_CSS = """
+:root {
+    --color-bg: #f7f7fb;
+    --color-bg-gradient: linear-gradient(135deg, #667eea, #764ba2);
+    --color-sidebar: #23242a;
+    --color-card: #222328;
+    --color-primary-gradient: linear-gradient(90deg, #ff8a00, #e52e71, #ff6a6a);
+    --color-accent: #fd5caa;
+    --color-btn-hover: #ff8a8a;
+    --color-border: #ececec;
+    --radius-xl: 1.5rem;
+    --radius-2xl: 2.5rem;
+    --shadow-soft: 0 6px 24px rgba(80,90,150,0.12);
+    --font-main: 'IBM Plex Sans', 'Inter', Arial, sans-serif;
+    --font-mono: 'Roboto Mono', monospace;
+}
+body {
+    background: var(--color-bg-gradient);
+    font-family: var(--font-main);
+    color: #222;
+}
+.gradio-container {
+    background: rgba(255,255,255,0.97);
+    border-radius: var(--radius-xl);
+    padding: 32px 0 40px 0;
+    box-shadow: 0 8px 30px rgba(0,0,0,0.18);
+    margin: 40px auto;
+    max-width: 1360px;
+}
+.sidebar {
+    background: var(--color-sidebar);
+    color: #fff;
+    border-radius: var(--radius-xl);
+    padding: 2rem 1.5rem;
+    box-shadow: var(--shadow-soft);
+    margin: 0 24px 0 0;
+}
+.sidebar label, .sidebar .gr-markdown {
+    color: #fff;
+    font-size: 1.12rem;
+    font-weight: 500;
+}
+.sidebar .gr-slider, .sidebar .gr-checkbox {
+    margin-bottom: 1.2rem;
+}
+.gr-tabs {
+    padding: 0;
+}
+.gr-tab {
+    margin-right: 0.5rem;
+}
+.gr-tab .gr-button {
+    background: none;
+    border-radius: var(--radius-2xl);
+    color: var(--color-accent);
+    font-weight: 600;
+    padding: 0.8rem 2.5rem;
+    transition: background 0.15s, color 0.15s;
+}
+.gr-tab.gr-active .gr-button {
+    background: var(--color-primary-gradient);
+    color: #fff;
+    box-shadow: var(--shadow-soft);
+}
+.card {
+    background: var(--color-card);
+    border-radius: var(--radius-xl);
+    box-shadow: var(--shadow-soft);
+    padding: 1rem 1.5rem 1.5rem 1.5rem;
+    margin: 0.75rem 0 1.5rem 0;
+}
+.card label {
+    color: #fff !important;
+}
+.button-primary, button, .btn {
+    background: var(--color-primary-gradient);
+    border: none;
+    color: #fff !important;
+    padding: 1.2rem 2.8rem;
+    text-transform: uppercase;
+    font-weight: bold;
+    letter-spacing: 0.08em;
+    border-radius: var(--radius-2xl);
+    font-size: 1.08rem;
+    cursor: pointer;
+    box-shadow: var(--shadow-soft);
+    transition: transform 0.15s, box-shadow 0.15s, filter 0.13s;
+}
+.button-primary:hover, button:hover, .btn:hover {
+    filter: brightness(1.09);
+    transform: translateY(-2px);
+    box-shadow: 0 8px 24px rgba(255,106,106,0.13);
+}
+.gr-image, .image-preview {
+    border-radius: var(--radius-xl);
+    background: #fff;
+    border: 1px solid var(--color-border);
+    box-shadow: var(--shadow-soft);
+    padding: 1rem;
+}
+.image-toolbar {
+    display: flex;
+    gap: 0.6rem;
+    position: absolute;
+    right: 1.5rem;
+    top: 1.2rem;
+    z-index: 10;
+}
+.image-toolbar button {
+    background: var(--color-card);
+    border-radius: 50%;
+    padding: 0.55rem 0.7rem;
+    color: var(--color-accent);
+    border: none;
+    box-shadow: 0 1px 4px rgba(80,90,150,0.11);
+    transition: background 0.11s, color 0.11s;
+}
+.image-toolbar button:hover {
+    background: var(--color-primary-gradient);
+    color: #fff;
+}
+.example-accordion {
+    width: 100% !important;
+    max-width: 100% !important;
+    background: #27293a !important;
+    color: #fff !important;
+    border-radius: 1.1rem;
+    box-shadow: var(--shadow-soft);
+    padding: 0.1rem 0.8rem 1rem 0.8rem;
+}
+.example-accordion button {
+    width: 100% !important;
+    white-space: normal !important;
+    background: #2d2e3e;
+    border: none;
+    color: #fd5caa;
+    font-size: 1.01rem;
+    border-radius: 0.75rem;
+    margin: 0.25rem 0;
+}
+"""
+
+# --- MAIN APP LOGIC ---
 dtype = torch.bfloat16
 device = "cuda" if torch.cuda.is_available() else "cpu"
-
-# Load model (FLUX.1-schnell)
 pipe = DiffusionPipeline.from_pretrained(
     "black-forest-labs/FLUX.1-schnell",
     torch_dtype=dtype
 ).to(device)
-
 MAX_SEED = np.iinfo(np.int32).max
 MAX_IMAGE_SIZE = 2048
 
@@ -36,7 +176,6 @@ def generate_image(prompt, seed, randomize_seed, width, height, steps, guidance_
 def set_prompt(example_text):
     return example_text
 
-# Updated example prompts per tab with richer details:
 example_prompts = {
     "Product Design": [
         """A sleek industrial design concept for a coffee machine: 
@@ -111,64 +250,13 @@ BUSINESS WORKFLOW
     ]
 }
 
-# CSS style: fixed container width and preventing examples from expanding the layout
-css = """
-* {
-    box-sizing: border-box;
-}
-body {
-    background: linear-gradient(135deg, #667eea, #764ba2);
-    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-    color: #333;
-    margin: 0;
-    padding: 0;
-}
-.gradio-container {
-    background: rgba(255, 255, 255, 0.95);
-    border-radius: 15px;
-    padding: 30px 40px;
-    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
-    margin: 40px auto;
-    width: 1200px;
-}
-.sidebar {
-    background: rgba(255, 255, 255, 0.98);
-    border-radius: 10px;
-    padding: 20px;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
-}
-button, .btn {
-    background: linear-gradient(90deg, #ff8a00, #e52e71);
-    border: none;
-    color: #fff;
-    padding: 12px 24px;
-    text-transform: uppercase;
-    font-weight: bold;
-    letter-spacing: 1px;
-    border-radius: 5px;
-    cursor: pointer;
-    transition: transform 0.2s ease-in-out;
-}
-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="Workflow Canvas") as demo:
+with gr.Blocks(css=SAAS_CSS, title="Workflow Canvas") as demo:
     gr.Markdown(
         """
-        <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>community:</strong> <a href="https://discord.gg/openfreeai" target="_blank">https://discord.gg/openfreeai</a></p>
+        <div style="text-align:center; margin-bottom: -28px;">
+            <h1 style="background: linear-gradient(90deg,#ff8a00,#e52e71,#764ba2); -webkit-background-clip: text; color:transparent; display:inline-block; font-size:2.65rem; letter-spacing:0.04em; font-weight:700; margin:0 0 10px 0;">Workflow Canvas</h1>
+            <p style="font-size:1.19rem; font-weight:400;">Generate design concepts and workflow diagrams for your business needs using our multi-tab interface.</p>
+            <p><strong>community:</strong> <a href="https://discord.gg/openfreeai" target="_blank" style="color:#e52e71">https://discord.gg/openfreeai</a></p>
         </div>
         """
     )
@@ -177,137 +265,136 @@ with gr.Blocks(css=css, title="Workflow Canvas") as demo:
         <img src="https://api.visitorbadge.io/api/visitors?path=https%3A%2F%2Fginigen-Workflow-Canvas.hf.space&countColor=%23263759" alt="Visitor Badge"/>
         </a>"""
     )
-            
+
     with gr.Row():
-        # Left sidebar: Common generation parameters
-        with gr.Sidebar(label="Parameters", open=True):
-            gr.Markdown("### Generation Parameters")
-            seed_slider = gr.Slider(label="Seed", minimum=0, maximum=MAX_SEED, step=1, value=42)
-            randomize_seed = gr.Checkbox(label="Randomize Seed", value=True)
-            width_slider = gr.Slider(label="Width", minimum=256, maximum=MAX_IMAGE_SIZE, step=32, value=1024)
-            height_slider = gr.Slider(label="Height", minimum=256, maximum=MAX_IMAGE_SIZE, step=32, value=1024)
-            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 with updated tab order:
-        # 1: Product Design, 2: Mindmap, 3: Mockup, 4: Infographic, 5: Diagram, 6: Flowchart
-        with gr.Column(scale=8):
+        with gr.Column(scale=2, min_width=340):
+            with gr.Group(elem_classes="sidebar"):
+                gr.Markdown("### Generation Parameters")
+                seed_slider = gr.Slider(label="Seed", minimum=0, maximum=MAX_SEED, step=1, value=42)
+                randomize_seed = gr.Checkbox(label="Randomize Seed", value=True)
+                width_slider = gr.Slider(label="Width", minimum=256, maximum=MAX_IMAGE_SIZE, step=32, value=1024)
+                height_slider = gr.Slider(label="Height", minimum=256, maximum=MAX_IMAGE_SIZE, step=32, value=1024)
+                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)
+
+        with gr.Column(scale=7):
             with gr.Tabs():
-                # Tab 1: Product Design
+                # -- Product Design --
                 with gr.Tab("Product Design"):
-                    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", value="w1.webp")
+                    with gr.Group(elem_classes="card"):
+                        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", elem_classes="button-primary")
+                        pd_image = gr.Image(label="Generated Product Design", elem_classes="image-preview")
                     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)
-                
-                # Tab 2: Mindmap
+
+                # -- Mindmap --
                 with gr.Tab("Mindmap"):
-                    mindmap_prompt = gr.Textbox(
-                        label="Mindmap Prompt",
-                        placeholder="Enter a mind map description...",
-                        lines=5,
-                        value=example_prompts["Mindmap"][0]
-                    )
-                    mindmap_generate = gr.Button("Generate Mindmap")
-                    mindmap_image = gr.Image(label="Generated Mindmap", value="w6.webp")
+                    with gr.Group(elem_classes="card"):
+                        mindmap_prompt = gr.Textbox(
+                            label="Mindmap Prompt",
+                            placeholder="Enter a mind map description...",
+                            lines=5,
+                            value=example_prompts["Mindmap"][0]
+                        )
+                        mindmap_generate = gr.Button("Generate Mindmap", elem_classes="button-primary")
+                        mindmap_image = gr.Image(label="Generated Mindmap", elem_classes="image-preview")
                     with gr.Accordion("Example Prompts", open=True, elem_classes="example-accordion"):
                         for ex in example_prompts["Mindmap"]:
                             gr.Button(ex, variant="secondary").click(fn=lambda ex=ex: set_prompt(ex), outputs=mindmap_prompt)
-                
-                # Tab 3: Mockup
+
+                # -- 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", value="w2.webp")
+                    with gr.Group(elem_classes="card"):
+                        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", elem_classes="button-primary")
+                        mock_image = gr.Image(label="Generated Mockup", elem_classes="image-preview")
                     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)
-                
-                # Tab 4: Infographic
+
+                # -- Infographic --
                 with gr.Tab("Infographic"):
-                    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", value="w3.webp")
+                    with gr.Group(elem_classes="card"):
+                        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", elem_classes="button-primary")
+                        info_image = gr.Image(label="Generated Infographic", elem_classes="image-preview")
                     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)
-                
-                # Tab 5: Diagram
+
+                # -- Diagram --
                 with gr.Tab("Diagram"):
-                    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", value="w4.webp")
+                    with gr.Group(elem_classes="card"):
+                        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", elem_classes="button-primary")
+                        diag_image = gr.Image(label="Generated Diagram", elem_classes="image-preview")
                     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 6: Flowchart
+
+                # -- 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", value="w5.webp")
+                    with gr.Group(elem_classes="card"):
+                        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", elem_classes="button-primary")
+                        flow_image = gr.Image(label="Generated Flowchart", elem_classes="image-preview")
                     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(
         fn=generate_image,
         inputs=[pd_prompt, seed_slider, randomize_seed, width_slider, height_slider, steps_slider, guidance_slider],
         outputs=[pd_image, seed_slider]
     )
-    
     mindmap_generate.click(
         fn=generate_image,
         inputs=[mindmap_prompt, seed_slider, randomize_seed, width_slider, height_slider, steps_slider, guidance_slider],
         outputs=[mindmap_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]
     )
-    
     info_generate.click(
         fn=generate_image,
         inputs=[info_prompt, seed_slider, randomize_seed, width_slider, height_slider, steps_slider, guidance_slider],
         outputs=[info_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],