app.py

import gradio as gr
import numpy as np
import random
import torch
from diffusers import DiffusionPipeline
import spaces

# ---- 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"
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

@spaces.GPU()
def generate_image(prompt, seed, randomize_seed, width, height, steps, guidance_scale):
    if randomize_seed:
        seed = random.randint(0, MAX_SEED)
    generator = torch.Generator(device).manual_seed(seed)
    image = pipe(
        prompt=prompt,
        width=width,
        height=height,
        num_inference_steps=steps,
        generator=generator,
        guidance_scale=guidance_scale
    ).images[0]
    return image, seed

def set_prompt(example_text):
    return example_text

example_prompts = {
    "Product Design": [
        """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"""
    ],
    "Mindmap": [
        """A handrawn colorful mind map diagram, educational style, vibrant colors, clear hierarchy, golden ratio layout.
KNOWLEDGE
├── ACQUISITION [Brain with Lightning ~60px]
│   ├── READING [Open Book with Glow]
│   ├── PRACTICE [Hands-on Tools]
│   └── OBSERVATION [Eye with Magnifier]
├── PROCESSING [Gear Network ~50px]
│   ├── ANALYSIS [Graph Trending Up]
│   └── SYNTHESIS [Puzzle Pieces]
├── RETENTION [Memory Chip ~45px]
│   ├── SHORT-TERM [Quick Flash]
│   └── LONG-TERM [Solid Archive]
└── APPLICATION
    ├── CREATION [Artist Palette]
    └── INNOVATION [Lightbulb Constellation]"""
    ],
    "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": [
        """A sophisticated flat-style infographic for a multinational corporation’s annual report:
- Title: "Global Renewable Energy Trends 2025"
- Subtitle: "Market Share and Growth Analysis"
- Visual Elements:
    - Multi-segmented bar charts comparing Solar, Wind, and Hydro energy production across regions
    - Pie chart displaying overall energy distribution: Solar (45%), Wind (30%), Hydro (25%)
    - Trend lines indicating year-over-year growth
- Icons: Sleek, minimalist representations of a sun, wind turbine, and water droplet
- Layout: Clean, grid-based design with ample white space and pastel accents for a modern corporate look
- Annotations: Brief, impactful data callouts highlighting key performance indicators and future forecasts"""
    ],
    "Diagram": [
        """A detailed hand-drawn diagram illustrating an end-to-end business workflow:
- Title: "Integrated Business Process Diagram"
- Components:
    - Market Analysis: Research phase with data charts and competitor mapping
    - Strategy Development: Ideation stage with brainstorming clouds and key focus areas
    - Product Design: Concept sketches with iterative feedback loops
    - Implementation: Process flow with timeline markers and resource allocation icons
    - Post-Launch Review: Feedback, metrics, and continuous improvement cycles
- Visual Elements:
    - Clear, directional arrows connecting each phase
    - Iconography for each component (e.g., magnifying glass, lightbulb, gear, checklist)
- Style: Vibrant, educational yet professional, balancing detailed annotations with visual simplicity
- Layout: Structured with a clear hierarchy and color-coded sections to differentiate process stages"""
    ],
    "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]"""
    ]
}

with gr.Blocks(css=SAAS_CSS, title="Workflow Canvas") as demo:
    gr.Markdown(
        """
        <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>
        """
    )
    gr.HTML(
        """<a href="https://visitorbadge.io/status?path=https%3A%2F%2Fginigen-Workflow-Canvas.hf.space">
        <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():
        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():
                # -- Product Design --
                with gr.Tab("Product Design"):
                    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)

                # -- Mindmap --
                with gr.Tab("Mindmap"):
                    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)

                # -- Mockup --
                with gr.Tab("Mockup"):
                    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)

                # -- Infographic --
                with gr.Tab("Infographic"):
                    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)

                # -- Diagram --
                with gr.Tab("Diagram"):
                    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)

                # -- Flowchart --
                with gr.Tab("Flowchart"):
                    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],
        outputs=[flow_image, seed_slider]
    )

if __name__ == "__main__":
    demo.queue()
    demo.launch(
        server_name="0.0.0.0",
        server_port=7860,
        share=False,
        show_error=True,
        debug=True
    )