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

Workflow Canvas

Generate design concepts and workflow diagrams for your business needs using our multi-tab interface.

community: https://discord.gg/openfreeai

""" ) gr.HTML( """ Visitor Badge """ ) 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 )