import gradio as gr
from PIL import Image

def generate_fn(prompt, image):
    # Stub: echo for now (swap with real gen later)
    if not prompt and image is None:
        raise gr.Error("Add a prompt or an image.")
    msg = f"OK ✅  Prompt length: {len(prompt or '')} | Image: {'yes' if image else 'no'}"
    return msg

CUSTOM_CSS = """
/* Page padding & grid background hint (optional) */
.gradio-container { padding: 24px; }

/* Big rounded prompt box */
#prompt-box textarea {
  border-radius: 28px !important;
  min-height: 180px;
  font-size: 18px;
  line-height: 1.45;
  padding: 18px 22px;
}

/* Rounded square image card */
#add-image .wrap.svelte-1ipelgc, 
#add-image .wrap {  /* compat across versions */
  border-radius: 28px !important;
}
#add-image .input-image, 
#add-image .empty.svelte-1ipelgc {
  border-radius: 28px !important;
  min-width: 240px;
  min-height: 240px;
}

/* Pill generate button (right side) */
#gen-btn button {
  border-radius: 999px !important;
  padding: 12px 24px;
  font-size: 18px;
}
"""

with gr.Blocks(css=CUSTOM_CSS, title="StitchMaster – UI Sketch") as demo:
    # Row 1: Big rounded prompt input
    prompt = gr.Textbox(
        label=None,
        placeholder="Prompt input",
        lines=8,
        elem_id="prompt-box"
    )

    # Row 2: Left = Add Image card | Right = Generate button
    with gr.Row():
        with gr.Column(scale=1, min_width=300):
            img = gr.Image(
                label="Add Image",
                type="pil",
                elem_id="add-image"
            )
        with gr.Column(scale=3, min_width=300):
            # Spacer effect using Markdown (empty height) then right-aligned button
            gr.Markdown(" \n\n ", elem_classes=["spacer"])
            gen = gr.Button("Generate", elem_id="gen-btn")

    out = gr.Markdown("")  # simple status/output for now
    gen.click(fn=generate_fn, inputs=[prompt, img], outputs=out)

if __name__ == "__main__":
    demo.launch()