README.md

metadata

title: UI Button Generator MCP
emoji: 🐠
colorFrom: yellow
colorTo: blue
sdk: gradio
sdk_version: 5.39.0
app_file: app.py
pinned: false
license: apache-2.0
short_description: Button Create MCP call Z-Image-Turbo zero-gpu
tags:
  - building-mcp-track-creative

MCP 1st birthday

details

Social Media Post

I shared my project on X: View Post on X

Demo Video

The demo video is attached to the X post above. You can watch it directly here: Watch Demo Video on X

🚀 Quick Start

1. Open the App: Launch the Gradio application
2. Fill in Settings: Configure your button design preferences
3. Generate: Click the "Generate Buttons" button
4. Download: Save your generated button images

📝 Basic Settings

Button Text

• Enter the text you want to display on your buttons
• You can enter multiple texts separated by commas (e.g., "Start, OK, Cancel")
• Supports up to 4 different button texts

Detail Prompt

• Describe the design style you want (e.g., "Neon cyberpunk", "Minimal elegant", "Wood texture")
• This controls the overall aesthetic and visual elements
• Examples:
  • "Neon glowing cyberpunk, blue/purple gradient"
  • "Luxury gold texture, minimal elegant, serif"
  • "Wood texture, steel rim, fantasy game style"

🎨 Style & Layout

Shape Options

• Box: Sharp rectangular corners
• Rounded: Soft rounded corners (default)
• Oval: Elliptical shape
• Free: Organic freeform shape

Layout Options

• Horizontal 3: 3 buttons arranged in horizontal rows (top, middle, bottom)
• Vertical 2: 2 tall buttons arranged side by side (left, right)
• Box 2x2: 4 buttons in a 2x2 grid (left-top, right-top, left-bottom, right-bottom)

Background Options

• Natural: Natural background with subtle textures and ambient lighting
• White: Plain white background
• Black: Plain black background

⚙️ Advanced Settings

Seed

• Controls the randomness of the generation
• Range: 0 to 2,147,483,647
• Use the same seed value to reproduce identical results

Randomize Seed

• Toggle to enable/disable random seed generation
• When enabled, each generation uses a different random seed

Aspect Ratio

• 1:1: Square format (1024x1024) - Recommended
• 16:9: Wide format (1280x720)
• 9:16: Portrait format (720x1280)

Guidance Scale

• Controls how closely the AI follows your prompt
• Default: 1.0 (recommended)
• Range: 1.0 to 5.0

Steps

• Number of inference steps for image generation
• Default: 8 (recommended)
• Range: 4 to 28
• Higher values may improve quality but increase generation time

🎯 Quick Presets

Use the example presets to get started quickly:

1. Cyberpunk Start Button

• Text: "Start, Option, Exit"
• Style: Neon glowing cyberpunk, blue/purple gradient
• Shape: Box
• Layout: Horizontal 3
• Background: Black

2. Luxury Buy Button

• Text: "Buy"
• Style: Luxury gold texture, minimal elegant, serif
• Shape: Rounded
• Layout: Vertical 2
• Background: White

3. Fantasy RPG Buttons

• Text: "RPG, R, P, G"
• Style: Wood texture, steel rim, fantasy game style
• Shape: Free
• Layout: Box 2x2
• Background: Natural

💡 Tips for Best Results

1. Be Specific: The more detailed your prompt, the better the results
2. Use References: Mention styles like "minimal", "cyberpunk", "vintage", etc.
3. Experiment: Try different combinations of settings
4. Save Seeds: Note down seeds for designs you like to reproduce them later
5. Background Matters: Choose background that complements your design

🔧 Technical Details

• Model: Z-Image-Turbo (Zero-GPU)
• Resolution: Up to 1024x1024 pixels
• Format: WebP output
• Platform: Gradio web interface

🌐 MCP Integration

This app supports MCP (Model Context Protocol) for enhanced functionality:

• Zero-GPU inference on Hugging Face Spaces
• Header authorization for API access
• Shareable links for collaboration

📸 Downloading Results

1. Generated images appear in the output panel
2. Right-click on the image to save
3. Images are automatically saved in WebP format
4. You can convert to other formats using image editors if needed

🤔 Troubleshooting

Generation Failed

• Check your internet connection
• Try reducing the number of inference steps
• Verify your HF_TOKEN if using private models

Poor Quality Results

• Increase the number of inference steps (up to 28)
• Make your prompt more specific
• Try different aspect ratios

Slow Generation

• Use fewer inference steps (4-12)
• Use 1:1 aspect ratio for faster processing
• Close other browser tabs to free up resources

🎨 Design Inspiration

Try these popular styles:

• Minimal: Clean, simple, flat design
• Neon: Cyberpunk with glowing effects
• Vintage: Retro 80s/90s aesthetics
• Luxury: Gold, black, premium materials
• Fantasy: Medieval, wood, magical themes
• Sci-Fi: Futuristic, metallic, high-tech

Enjoy creating your button designs! 🎨✨