app.py

# filepath: /Users/dgcnz/development/playground/gradio_image_annotator/demo/app_dynamic_inputs.py
import gradio as gr
from gradio_patch_selection import PatchSelector


# Default values for image size and patch size
DEFAULT_IMG_SIZE = 224
DEFAULT_PATCH_SIZE = 16

example_annotation = {
    "image": "https://gradio-builds.s3.amazonaws.com/demo-files/base.png",
    "patch_index": 42,  # Example patch index
    "img_size": DEFAULT_IMG_SIZE,
    "patch_size": DEFAULT_PATCH_SIZE
}

examples = [
    {
        "image": "https://raw.githubusercontent.com/gradio-app/gradio/main/guides/assets/logo.png",
        "patch_index": 10,  # Example patch index
        "img_size": DEFAULT_IMG_SIZE,
        "patch_size": DEFAULT_PATCH_SIZE
    },
    {
        "image": "https://gradio-builds.s3.amazonaws.com/demo-files/base.png",
        "patch_index": 42,  # Example patch index
        "img_size": DEFAULT_IMG_SIZE,
        "patch_size": DEFAULT_PATCH_SIZE
    },
]


def get_patch_index(annotations):
    """Get the selected patch index from annotations"""
    if annotations and annotations.get("patch_index") is not None:
        return f"Selected Patch Index: {annotations['patch_index']}"
    return "No patch selected"


def update_params(img_size, patch_size, current_annotation):
    """Update patch_size and img_size based on user inputs"""
    if not current_annotation:
        current_annotation = {"image": None, "patch_index": None}
    
    # Ensure values are integers and within reasonable bounds
    img_size = max(32, min(1024, int(img_size)))
    patch_size = max(1, min(128, int(patch_size)))
    
    # Preserve the existing image and patch_index if they exist
    current_annotation["img_size"] = img_size
    current_annotation["patch_size"] = patch_size
    
    # Return updated annotation and parameter info string
    param_info = f"Image Size: {img_size}x{img_size}\nPatch Size: {patch_size}x{patch_size}"
    
    # Calculate grid dimensions
    grid_width = img_size // patch_size
    grid_height = img_size // patch_size 
    grid_info = f"Grid Dimensions: {grid_width}x{grid_height} ({grid_width * grid_height} patches)"
    
    return current_annotation, param_info, grid_info


with gr.Blocks() as demo:
    with gr.Tab("Dynamic Patch Selector", id="tab_dynamic_patch_selector"):
        gr.Markdown("# Dynamic Patch Selector Demo")
        gr.Markdown("This demo shows how to dynamically update the patch size and image size using number inputs.")
        
        with gr.Row():
            with gr.Column(scale=1):
                img_size_input = gr.Number(
                    value=DEFAULT_IMG_SIZE,
                    label="Image Size",
                    minimum=32,
                    maximum=1024,
                    step=16,
                    precision=0
                )
                patch_size_input = gr.Number(
                    value=DEFAULT_PATCH_SIZE,
                    label="Patch Size",
                    minimum=1,
                    maximum=128,
                    step=1,
                    precision=0
                )
                param_info = gr.Textbox(
                    value=f"Image Size: {DEFAULT_IMG_SIZE}x{DEFAULT_IMG_SIZE}\nPatch Size: {DEFAULT_PATCH_SIZE}x{DEFAULT_PATCH_SIZE}",
                    label="Parameters",
                    interactive=False
                )
                grid_info = gr.Textbox(
                    value=f"Grid Dimensions: {DEFAULT_IMG_SIZE//DEFAULT_PATCH_SIZE}x{DEFAULT_IMG_SIZE//DEFAULT_PATCH_SIZE} ({(DEFAULT_IMG_SIZE//DEFAULT_PATCH_SIZE)**2} patches)",
                    label="Grid Information",
                    interactive=False
                )
        
        with gr.Row():
            with gr.Column(scale=2):
                annotator = PatchSelector(
                    example_annotation,
                    img_size=DEFAULT_IMG_SIZE,  # Default image size
                    patch_size=DEFAULT_PATCH_SIZE,  # Default patch size
                    show_grid=True,
                    grid_color="rgba(200, 200, 200, 0.5)"
                )
            
            with gr.Column(scale=1):
                output = gr.Textbox(label="Selected Patch", value="No patch selected")
                gr.Markdown("### How it works")
                gr.Markdown("1. Adjust the image size and patch size using the number inputs")
                gr.Markdown("2. The grid will update automatically based on your inputs")
                gr.Markdown("3. Click on any patch to select it and get its index")
        
        # Handle the parameter change events
        img_size_input.change(
            update_params,
            inputs=[img_size_input, patch_size_input, annotator],
            outputs=[annotator, param_info, grid_info]
        )
        
        patch_size_input.change(
            update_params,
            inputs=[img_size_input, patch_size_input, annotator],
            outputs=[annotator, param_info, grid_info]
        )
        
        # Handle the patch selection event
        annotator.patch_select(get_patch_index, annotator, output)
        
        gr.Examples(examples, annotator)

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