init

.gitignore

@@ -0,0 +1 @@
+.env

README.md

@@ -1,14 +1,16 @@
 ---
-title: UIButtonGeneratorMCP
+title: UI Button Generator MCP
 emoji: 🐠
 colorFrom: yellow
 colorTo: blue
 sdk: gradio
-sdk_version: 6.0.1
+sdk_version: 5.39.0
 app_file: app.py
 pinned: false
 license: apache-2.0
-short_description: AI UI Button Generator MCP
+short_description: Button Create MCP call qwen-image zero-gpu 
+tags:
+  - mcp-in-action-track-creative
 ---
 
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app.py

@@ -0,0 +1,468 @@
+import gradio as gr
+import numpy as np
+import random
+import os
+from PIL import Image
+import requests
+import json
+from dotenv import load_dotenv
+
+# Load environment variables
+load_dotenv()
+
+# MCP Server configuration
+MCP_SERVER_URL = "https://multimodalart-qwen-image-fast.hf.space/gradio_api/mcp/"
+HF_TOKEN = os.getenv("HF_TOKEN")
+
+# --- UI Constants and Helpers ---
+MAX_SEED = np.iinfo(np.int32).max
+
+
+def create_prompt(params):
+    """
+    MCP サーバーに送信するためのプロンプト文字列を生成する
+
+    Args:
+        params (dict): プロンプト生成に使用するパラメータ辞書
+            - label (str): ボタンテキスト
+            - detail (str): デザイン詳細
+            - shape (str): ボタン形状
+            - layout (str): レイアウト配置
+            - background (str): 背景設定
+
+    Returns:
+        str: 画像生成用の完全なプロンプト文字列
+    """
+    label = params.get("label", "Button")
+    detail = params.get("detail", "")
+    shape = params.get("shape", "rounded")
+    layout = params.get("layout", "horizontal_3")
+    background = params.get("background", "natural")
+
+    layout_config = {
+        "horizontal_3": {"count": 3, "desc": "3 horizontal rows"},
+        "vertical_2": {
+            "count": 2,
+            "desc": " 2 vertical tall buttons arranged side by side, vertical rectangular shape, 2 columns layout, slender buttons, portrait orientation",
+        },
+        "box_2x2": {"count": 4, "desc": "2x2 grid arrangement"},
+    }
+    shape_descriptions = {
+        "box": "box shape",
+        "rounded": "rounded corners",
+        "oval": "oval shape",
+        "free": "organic freeform shape",
+    }
+
+    config = layout_config.get(layout, layout_config["horizontal_3"])
+    count = config["count"]
+    layout_desc = config["desc"]
+    shape_desc = shape_descriptions.get(shape, "rounded corners")
+
+    if label and label.strip():
+        base_prompt = f'Create {count} {detail} button design variations with "{label}" text in a 1024x1024 image.\n'
+    else:
+        base_prompt = f"Create {count} {detail} button design variations with no text label in a 1024x1024 image.\n"
+    base_prompt += f"Arranged in {layout_desc}.\n"
+    base_prompt += f"{shape_desc.capitalize()}.\n"
+    if detail:
+        base_prompt += f"{detail.capitalize()} aesthetic: detailed visual elements and color palette.\n"
+    base_prompt += "Each button is a different design variation exploring the theme.\n"
+    if background == "natural":
+        base_prompt += "Natural background with subtle textures and ambient lighting.\n"
+    elif background == "white":
+        base_prompt += "plain white only background.\n"
+    elif background == "black":
+        base_prompt += "plain black only background.\n"
+    else:
+        base_prompt += "Clean background with proper lighting.\n"
+    base_prompt += "Ultra HD, 4K, cinematic composition"
+    return base_prompt
+
+
+def call_mcp_server_http(
+    prompt,
+    seed,
+    randomize_seed,
+    aspect_ratio,
+    guidance_scale,
+    num_inference_steps,
+    prompt_enhance=False,
+):
+    """
+    MCP (Model Context Protocol) サーバーに HTTP リクエストを送信して画像生成を行う
+
+    Args:
+        prompt (str): 画像生成のためのプロンプトテキスト
+        seed (int): 乱数シード値
+        randomize_seed (bool): シードをランダム化するかどうか
+        aspect_ratio (str): 画像のアスペクト比（例: "1:1", "16:9", "4:3"）
+        guidance_scale (float): ガイダンススケール（1.0-5.0）
+        num_inference_steps (int): 推論ステップ数（4-28）
+        prompt_enhance (bool, optional): プロンプトエンハンスを使用するかどうか. Defaults to False.
+
+    Returns:
+        tuple: (image, seed, error) - 画像オブジェクト、使用されたシード、エラーメッセージ
+    """
+    import base64
+    import io
+
+    print(f"Calling MCP Endpoint: {MCP_SERVER_URL}")
+    try:
+        payload = {
+            "jsonrpc": "2.0",
+            "method": "tools/call",
+            "params": {
+                "name": "Qwen_Image_Fast_infer",
+                "arguments": {
+                    "prompt": prompt,
+                    "seed": seed,
+                    "randomize_seed": randomize_seed,
+                    "aspect_ratio": aspect_ratio,
+                    "guidance_scale": guidance_scale,
+                    "num_inference_steps": num_inference_steps,
+                    "prompt_enhance": prompt_enhance,
+                },
+            },
+            "id": 1,
+        }
+        headers = {
+            "Content-Type": "application/json",
+            "Accept": "application/json, text/event-stream",
+            "User-Agent": "mcp-client-python/1.0",
+        }
+        if HF_TOKEN:
+            headers["Authorization"] = f"Bearer {HF_TOKEN}"
+
+        response = requests.post(
+            MCP_SERVER_URL, headers=headers, data=json.dumps(payload), timeout=120
+        )
+
+        if response.status_code == 200:
+            try:
+                result_json = response.json()
+            except json.JSONDecodeError:
+                lines = response.text.strip().split("\n")
+                last_line = lines[-1]
+                if last_line.startswith("data: "):
+                    result_json = json.loads(last_line[6:])
+                else:
+                    result_json = json.loads(last_line)
+
+            if "error" in result_json:
+                return None, seed, str(result_json["error"])
+
+            if "result" in result_json:
+                content_list = result_json["result"].get("content", [])
+                for item in content_list:
+                    if item.get("type") == "image" and item.get("data"):
+                        image_bytes = base64.b64decode(item.get("data"))
+                        return Image.open(io.BytesIO(image_bytes)), seed, None
+            else:
+                return None, seed, "Unexpected JSON structure"
+        else:
+            return None, seed, f"Server Error: {response.status_code}"
+    except Exception as e:
+        return None, seed, str(e)
+    return Image.new("RGB", (1024, 1024), color="gray"), seed, "Unknown error"
+
+
+# --- Main Inference Logic ---
+# Define outside Blocks or define within Blocks to pass to Examples
+def run_inference_engine(
+    label,
+    detail,
+    shape,
+    layout,
+    background,
+    seed,
+    randomize_seed,
+    aspect_ratio,
+    guidance_scale,
+    num_inference_steps,
+):
+    """
+    MCP サーバーを使用して UI ボタン画像を生成するメイン推論エンジン
+
+    Args:
+        label (str): ボタンに表示するテキスト
+        detail (str): デザインの詳細プロンプト
+        shape (str): ボタンの形状（"box", "rounded", "oval", "free"）
+        layout (str): レイアウト配置（"horizontal_3", "vertical_2", "box_2x2"）
+        background (str): 背景設定（"natural", "white", "black"）
+        seed (int): 乱数シード値
+        randomize_seed (bool): シードをランダム化するかどうか
+        aspect_ratio (str): 画像のアスペクト比 (1:1を使うこと)
+        guidance_scale (float): ガイダンススケール(常に1を使うこと)
+        num_inference_steps (int): 推論ステップ数 (常に8を使うこと)
+
+    Yields:
+        tuple: (image, seed, status_message) - 生成された画像、使用されたシード、ステータスメッセージ
+    """
+    yield None, seed, "Generating..."
+    prompt_params = {
+        "label": label,
+        "detail": detail,
+        "shape": shape,
+        "layout": layout,
+        "background": background,
+    }
+    prompt = create_prompt(prompt_params)
+
+    if randomize_seed:
+        seed = random.randint(0, MAX_SEED)
+
+    image, generated_seed, error = call_mcp_server_http(
+        prompt, seed, randomize_seed, aspect_ratio, guidance_scale, num_inference_steps
+    )
+
+    if image is None:
+        gr.Warning(f"Error: {error}")
+        yield None, generated_seed, f"Error: {error}"
+    else:
+        yield image, generated_seed, "Done!"
+
+
+# --- UI Customization ---
+css = """
+body { font-family: 'Helvetica Neue', Arial, sans-serif; }
+#col-container { max-width: 1200px; margin: 0 auto; padding: 20px; }
+h1 { text-align: center; font-weight: 800; color: #333; margin-bottom: 0.5em; }
+.subtitle { text-align: center; color: #666; margin-bottom: 2em; }
+
+.generate-btn { 
+    background: linear-gradient(90deg, #6366f1 0%, #a855f7 100%) !important; 
+    border: none !important; 
+    color: white !important; 
+    font-weight: bold !important;
+    font-size: 1.2em !important;
+    padding: 20px !important;
+    border-radius: 12px !important;
+    transition: all 0.3s ease;
+    height: 100% !important;
+    min-height: 100px;
+}
+.generate-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(99, 102, 241, 0.4);
+}
+
+.examples-container table { 
+    font-size: 0.85em !important; 
+    margin-bottom: 0 !important;
+}
+.examples-container td { 
+    padding: 4px 8px !important; 
+    white-space: nowrap; 
+    overflow: hidden; 
+    text-overflow: ellipsis; 
+    max-width: 150px;
+}
+.examples-container label {
+    font-weight: bold;
+    color: #555;
+    margin-bottom: 5px;
+    display: block;
+}
+
+#result-image { 
+    border-radius: 12px; 
+    box-shadow: 0 10px 30px rgba(0,0,0,0.1); 
+    border: 1px solid #eee;
+}
+.input-group {
+    background: #f9fafb;
+    padding: 15px;
+    border-radius: 10px;
+    border: 1px solid #e5e7eb;
+    margin-bottom: 15px;
+}
+"""
+
+theme = gr.themes.Soft(primary_hue="indigo", secondary_hue="slate", radius_size="md")
+
+# Examples data
+example_data = [
+    [
+        "Play",
+        "Neon glowing cyberpunk, blue/purple gradient",
+        "box",
+        "horizontal_3",
+        "black",
+        "examples/play.webp",
+    ],
+    [
+        "Buy",
+        "Luxury gold texture, minimal elegant, serif",
+        "rounded",
+        "vertical_2",
+        "white",
+        "examples/buy.webp",
+    ],
+    [
+        "RPG",
+        "Wood texture, steel rim, fantasy game style",
+        "free",
+        "box_2x2",
+        "natural",
+        "examples/rpg.webp",
+    ],
+    [
+        "Submit",
+        "Modern flat design, blue gradient, clean minimal style",
+        "rounded",
+        "horizontal_3",
+        "white",
+        None,
+    ],
+]
+
+with gr.Blocks(css=css, theme=theme, title="UI Button Generator") as demo:
+    gr.Markdown("# 🎨 AI UI Button Generator")
+    gr.Markdown(
+        "<div class='subtitle'>UI button material and design concept generation tool using Qwen Image Fast</div>"
+    )
+
+    with gr.Column(elem_id="col-container"):
+        # --- 1. Definition Phase (render=False) ---
+        # Create components referenced by Examples first.
+        # With render=False, they are not yet displayed on screen.
+
+        # Input section
+        label = gr.Textbox(
+            label="Button Text",
+            placeholder="Start, OK...",
+            value="Start",
+            info="Text inside the button",
+            render=False,
+        )
+        detail = gr.Textbox(
+            label="Detail Prompt",
+            placeholder="Design details...",
+            value="Pirate theme, wood texture, gold aesthetic",
+            lines=4,
+            info="Design details",
+            render=False,
+        )
+        shape = gr.Dropdown(
+            label="Shape",
+            choices=["box", "rounded", "oval", "free"],
+            value="rounded",
+            info="Shape",
+            render=False,
+        )
+        layout = gr.Radio(
+            label="Layout",
+            choices=["horizontal_3", "vertical_2", "box_2x2"],
+            value="horizontal_3",
+            info="Layout arrangement",
+            render=False,
+        )
+        background = gr.Dropdown(
+            label="Background",
+            choices=["natural", "white", "black"],
+            value="natural",
+            info="Background",
+            render=False,
+        )
+
+        # Advanced Settings section
+        seed = gr.Slider(
+            label="Seed", minimum=0, maximum=MAX_SEED, step=1, value=42, render=False
+        )
+        randomize_seed = gr.Checkbox(label="Randomize seed", value=True, render=False)
+        aspect_ratio = gr.Radio(
+            label="Aspect Ratio",
+            choices=["1:1", "16:9", "4:3"],
+            value="1:1",
+            render=False,
+        )
+        guidance_scale = gr.Slider(
+            label="Guidance Scale", minimum=1.0, maximum=5.0, value=1.0, render=False
+        )
+        num_inference_steps = gr.Slider(
+            label="Steps", minimum=4, maximum=28, value=8, render=False
+        )
+
+        # Output section
+        result = gr.Image(
+            label="Output Image",
+            show_label=False,
+            type="pil",
+            elem_id="result-image",
+            height=600,
+            render=False,
+        )
+        status_msg = gr.Markdown(render=False)
+
+        # --- 2. Layout Construction Phase (.render()) ---
+
+        with gr.Row(equal_height=False):
+            # 左カラム
+            with gr.Column(scale=1, min_width=400):
+                with gr.Group(elem_classes="input-group"):
+                    gr.Markdown("### 📝 Basic Settings")
+                    label.render()
+                    detail.render()
+
+                with gr.Group(elem_classes="input-group"):
+                    gr.Markdown("### 🎨 Style & Layout")
+                    with gr.Row():
+                        shape.render()
+                        background.render()
+                    layout.render()
+                run_button = gr.Button(
+                    "✨ Generate\nButtons",
+                    variant="primary",
+                    elem_classes="generate-btn",
+                    scale=1,
+                )
+
+                with gr.Accordion("⚙️ Advanced Settings", open=False):
+                    seed.render()
+                    randomize_seed.render()
+                    aspect_ratio.render()
+                    with gr.Row():
+                        guidance_scale.render()
+                        num_inference_steps.render()
+
+            # 右カラム
+            with gr.Column(scale=1):
+                gr.Markdown("### 🖼️ Generated Button")
+                result.render()
+                status_msg.render()
+                # ボタンとExamplesの行
+                # gr.Markdown("**Quick Presets (Click to try)**")
+                # Initialize here with fn, inputs, outputs
+                gr.Examples(
+                    examples=example_data,
+                    fn=run_inference_engine,
+                    inputs=[label, detail, shape, layout, background, result],
+                    outputs=[result, seed, status_msg],
+                    examples_per_page=3,
+                    run_on_click=False,
+                    cache_examples=False,
+                )
+
+    # --- 3. Event Binding ---
+    # Examples already has fn, so only define the main button click event
+
+    run_button.click(
+        fn=run_inference_engine,
+        inputs=[
+            label,
+            detail,
+            shape,
+            layout,
+            background,
+            seed,
+            randomize_seed,
+            aspect_ratio,
+            guidance_scale,
+            num_inference_steps,
+        ],
+        outputs=[result, seed, status_msg],
+    )
+
+if __name__ == "__main__":
+    demo.launch(mcp_server=True)