gradio-app / gradio

Build and share delightful machine learning apps, all in Python. 🌟 Star to support our work!
http://www.gradio.app
Apache License 2.0
32.57k stars 2.45k forks source link

Canvas_size doesn't work after uploading image #8667

Open GrunyD opened 3 months ago

GrunyD commented 3 months ago

Describe the bug

We are working on a simple annotation tool, using your image editor. We specify canvas_size = (612, 612) and at first everything is okay. image However after uploading an image, the canvas shrinks down if the image is too small. The canvas size doesn't matter anymore. We are able to kind of fix it with custom css, but it is messy and uncomfortable to have another redundant file just for this. (The right panel components are invisible at first and when picture is uploaded, they appear) image I spent quite a lot of time trying to figure this out, I couldn't find a better solution.

Have you searched existing issues? 🔎

Reproduction

import gradio as gr

...

def create_interface(self, img = None, force_light_mode:bool = True, **kwargs):
        kwargs["img"] = self.img
        with gr.Blocks(theme = QimTheme(force_light_mode=force_light_mode), title = self.title) as gradio_interface:
            gr.Markdown(F"# {self.title}")
            self.define_interface(**kwargs)
        return gradio_interface

def define_interface(self, **kwargs):
        img = kwargs["img"]
        brush = gr.Brush(
                colors=[
                    "rgb(255,50,100)",
                    "rgb(50,250,100)",
                    "rgb(50,100,255)",
                ],
                color_mode="fixed",
                default_size=10,
            )
        with gr.Row():
            with gr.Column(scale=6):
                img_editor = gr.ImageEditor(
                    value=(
                        {
                            "background": img,
                            "layers": [Image.new("RGBA", img.shape, (0, 0, 0, 0))],
                            "composite": None,
                        }
                        if img is not None
                        else None
                    ),
                    type="numpy",
                    image_mode="RGB",
                    brush=brush,
                    sources="upload",
                    interactive=True,
                    show_download_button=True,
                    container=False,
                    transforms=["crop"],
                    layers=False,
                    canvas_size= (612, 612),
                )

            with gr.Column(scale=1, min_width=256):

                with gr.Row():
                    overlay_img = gr.Image(
                        show_download_button=False, show_label=False, visible=False,
                    )
                with gr.Row():
                    masks_download = gr.File(
                        label="Download masks", visible=False,
                    )

Screenshot

No response

Logs

No response

System Info

Gradio Environment Information:
------------------------------
Operating System: Linux
gradio version: 4.37.1
gradio_client version: 1.0.2

------------------------------------------------
gradio dependencies in your environment:

aiofiles: 23.2.1
altair: 5.3.0
fastapi: 0.111.0
ffmpy: 0.3.2
gradio-client==1.0.2 is not installed.
httpx: 0.27.0
huggingface-hub: 0.23.4
importlib-resources: 6.4.0
jinja2: 3.1.4
markupsafe: 2.1.5
matplotlib: 3.9.0
numpy: 1.26.4
orjson: 3.10.5
packaging: 24.1
pandas: 2.2.2
pillow: 10.3.0
pydantic: 2.7.4
pydub: 0.25.1
python-multipart: 0.0.9
pyyaml: 6.0.1
ruff: 0.5.0
semantic-version: 2.10.0
tomlkit==0.12.0 is not installed.
typer: 0.12.3
typing-extensions: 4.12.2
urllib3: 2.2.2
uvicorn: 0.30.1
authlib; extra == 'oauth' is not installed.
itsdangerous; extra == 'oauth' is not installed.

gradio_client dependencies in your environment:

fsspec: 2024.6.1
httpx: 0.27.0
huggingface-hub: 0.23.4
packaging: 24.1
typing-extensions: 4.12.2
websockets: 11.0.3

Severity

I can work around it

pngwn commented 2 months ago

This is actually by design, the canvas size kwarg only affects the initial canvas size but I understand this has some limitations.

It sounds like height / width might be a better fit for your usecase? I think in this case we don't 'zoom' the image although there is an issue for zooming which i hjope to get to at some point.

Is the end goal here 'zoom to fit container' behaviour?