Spaces:
Runtime error
Runtime error
| 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 | |
| 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 | |
| ) | |