App.py

import cv2
import gradio as gr
import numpy as np
from PIL import Image
css = """
.gradio-container {
    background-color: #f5f5f5;
    font-family: 'Arial', sans-serif;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    width: 90vw;
    max-width: 1200px;
    margin: auto;
}
h1 {
    color: #333333;
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 20px;
}
#images-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 20px;
    padding: 15px;
    border: 2px solid #cccccc;
    border-radius: 15px;
    background-color: #ffffff;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
.image-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.image-container label {
    font-weight: bold;
    color: #555555;
}
.image-box {
    width: 220px;
    height: 300px;
    border: 3px dashed #aaaaaa;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f9f9f9;
}
button {
    font-size: 1.2rem;
    padding: 10px 20px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}
#try-on-button {
    background-color: #4CAF50;
    color: white;
}
#try-on-button:hover {
    background-color: #45a049;
}
#clear-button {
    background-color: #FF5722;
    color: white;
}
#clear-button:hover {
    background-color: #e64a19;
}
"""

with gr.Blocks(css=css) as iface:
    gr.Markdown("<h1>Mouse Paw Detection</h1>")

    with gr.Row(elem_id="images-container"):
        with gr.Column(elem_id="user-image-container", elem_classes="image-container"):
            gr.Markdown("**Upload Image**")
            user_image = gr.Image(type="pil", label="Image", elem_id="user-image", elem_classes="image-box")

        with gr.Column(elem_id="output-image-container", elem_classes="image-container"):
            gr.Markdown("**Paw Detection**")
            output = gr.Image(type="pil", label="Result", elem_id="output", elem_classes="image-box")

    with gr.Row():
        with gr.Column():
            try_on_button = gr.Button("Detect", elem_id="try-on-button")
        with gr.Column():
            clear_button = gr.Button("Clear", elem_id="clear-button")

    # Button click events
    try_on_button.click(fn=None, inputs=[user_image], outputs=output)
    clear_button.click(fn=lambda: (None, None, None), inputs=[], outputs=[user_image, output])
iface.launch()