import gradio as gr
from rembg import remove
from PIL import Image

def bg_remove(input_img):
    if input_img is None:
        return None
    img = Image.open(input_img)
    out = remove(img)
    return out

canva_css = """
<style>

body, .gradio-container {
    background: linear-gradient(135deg, #6EE7B7, #3B82F6, #9333EA);
    background-size: 300% 300%;
    animation: gradientFlow 12s ease infinite;
}

@keyframes gradientFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.card {
    backdrop-filter: blur(25px);
    background: rgba(255,255,255,0.25);
    border-radius: 22px;
    padding: 25px;
    box-shadow: 0 10px 35px rgba(0,0,0,0.2);
}

button {
    background: linear-gradient(90deg, #FF8A05, #FF4D00);
    border-radius: 14px !important;
    color: white !important;
    font-size: 18px !important;
    font-weight: bold;
    transition: 0.3s;
}

button:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(255,76,0,0.4);
}

h1 {
    color: white !important;
    text-shadow: 0 4px 12px rgba(0,0,0,0.4);
    font-weight: 800;
}

</style>
"""

with gr.Blocks() as demo:
    gr.HTML(canva_css)  

    gr.HTML("<h1>✨ Canva Style Background Remover Pro</h1>")
    gr.HTML("<p style='color:white;font-size:20px;'>Upload an image and get a clean transparent background instantly!</p>")

    with gr.Row():
        with gr.Column(elem_id="upload-card"):
            inp = gr.Image(label="Upload Image", type="filepath")
        with gr.Column(elem_id="output-card"):
            out = gr.Image(label="Output")

    btn = gr.Button("Remove Background")
    btn.click(bg_remove, inp, out)

demo.launch()