Create app-backup.py

app-backup.py

@@ -0,0 +1,325 @@
+import gradio as gr
+import numpy as np
+import random
+import torch
+from diffusers import DiffusionPipeline
+import spaces
+
+# Basic settings
+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
+
+@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
+
+# Updated example prompts per tab with richer details:
+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]"""
+    ]
+}
+
+# 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:
+    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>
+        """
+    )
+    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():
+        # 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.Tabs():
+                # Tab 1: 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.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
+                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.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
+                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.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
+                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.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
+                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.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
+                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.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
+    )