allow the canvas size to be set on the ImageEditor

[pngwn]

Description

Please include a concise summary, in clear English, of the changes in this pull request. If it closes an issue, please mention it here.

Closes: #(issue)

🎯 PRs Should Target Issues

Before your create a PR, please check to see if there is an existing issue for this change. If not, please create an issue before you create this PR, unless the fix is very small.

Not adhering to this guideline will result in the PR being closed.

Tests

1. PRs will only be merged if tests pass on CI. To run the tests locally, please set up your Gradio environment locally and run the tests: bash scripts/run_all_tests.sh

2. You may need to run the linters: bash scripts/format_backend.sh and bash scripts/format_frontend.sh

[gradio-pr-bot]

🪼 branch checks and previews

•	Name	Status	URL
	Spaces	ready!	Spaces preview
	Website	ready!	Website preview
	Storybook	ready!	Storybook preview
🦄	Changes	detected!	Details

---

Install Gradio from this PR

pip install https://gradio-builds.s3.amazonaws.com/866f2f72139d9bbb5b6d01617671fb04b985385f/gradio-4.28.3-py3-none-any.whl

Install Gradio Python Client from this PR

pip install "gradio-client @ git+https://github.com/gradio-app/gradio@866f2f72139d9bbb5b6d01617671fb04b985385f#subdirectory=client/python"

[gradio-pr-bot]

🦄 change detected

This Pull Request includes changes to the following packages.

Package	Version
@gradio/imageeditor	minor
gradio	minor

• Maintainers can select this checkbox to manually select packages to update.

With the following changelog entry.

allow the canvas size to be set on the ImageEditor

Maintainers or the PR author can modify the PR title to modify this entry.

Something isn't right?

• Maintainers can change the version label to modify the version bump.
• If the bot has failed to detect any changes, or if this pull request needs to update multiple packages to different versions or requires a more comprehensive changelog entry, maintainers can update the changelog file directly.

[pngwn]

Just laying out some scenarios that I need to test:

• canvas_size but no sources. canvas_size always applies.
• canvas_size but no crop size (+ sources). canvas_size should apply at load. Adding a new source may alter that. reset should use the canvas_size again.
• canvas_size with crop_size. This doesn't make any sense if they are different. crop_size is really a ratio-based constraint / maximum so they don't directly conflict but they should be equivalent. canvas_size=[512, 512] and crop_size="1:1:" or crop_size="[100, 100]" is fine (it will get resized to 100 x 100 but the UI will be larger). crop_size will take precedence if values are incompatible.

[abidlabs]

canvas_size but no crop size (+ sources). canvas_size should apply at load. Adding a new source may alter that. reset should use the canvas_size again.

Just to confirm, source here refers to the background image, right? So the idea here is that if you set a background image, its dimensions will set the canvas size?

[abidlabs]

Just laying out some scenarios that I need to test:

Yes these are the only scenarios I can think of as well @pngwn

[abidlabs]

Noticed that the docstrings for height and width are incorrect:

height: The height of the displayed images, specified in pixels if a number is passed, or in CSS units if a string is passed.
width: The width of the displayed images, specified in pixels if a number is passed, or in CSS units if a string is passed.

This is not the behavior, at least when interactive=True. These arguments do not affect the size of the images, but rather of the container of the component as a whole (which is consistent with other components).

e.g. width=500

e.g. width=1000

This means we shoudn't worry about these arguments conflicting with canvas_size (unless they are too small), but we should fix the docstrings

[pngwn]

I'll fix the docstrings as well. That has actually been a source of confusion so it will be good to clean them up.

[pngwn]

Just to confirm, source here refers to the background image, right? So the idea here is that if you set a background image, its dimensions will set the canvas size?

Yes that is correct. The crop is what acts as an actual constraint, canvas_size is just a default / clear value really.

[pngwn]

Tested all and works fine. I have also added the ability to set sources=None because sources=[] was annoying.

Some demo's below if anyone wants to test:

Scenario 1
canvas_size but sources=None

import gradio as gr


def predict(im):
    return im["composite"]

def get_image_size(im):
    return f"{im['background'].shape[0]} x {im['background'].shape[1]}"


with gr.Blocks() as demo:
    with gr.Group():
        with gr.Row():
            im = gr.ImageEditor(
                canvas_size=(1000, 1000),
                sources=None,
            )
            im_preview = gr.Image()
        txt = gr.Textbox(label="image size")
        im.change(predict, outputs=im_preview, inputs=im, show_progress="hidden")
        im.change(get_image_size, inputs=im, outputs=txt)


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

Scenario 2

canvas_size with sources available (default)

import gradio as gr


def predict(im):
    return im["composite"]

def get_image_size(im):
    return f"{im['background'].shape[0]} x {im['background'].shape[1]}"


with gr.Blocks() as demo:
    with gr.Group():
        with gr.Row():
            im = gr.ImageEditor(
                canvas_size=(1000, 1000),
            )
            im_preview = gr.Image()
        txt = gr.Textbox(label="image size")
        im.change(predict, outputs=im_preview, inputs=im, show_progress="hidden")
        im.change(get_image_size, inputs=im, outputs=txt)


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

Scenario 3

canvas_size and crop_size.

import gradio as gr


def predict(im):
    return im["composite"]

def get_image_size(im):
    return f"{im['background'].shape[0]} x {im['background'].shape[1]}"


with gr.Blocks() as demo:
    with gr.Group():
        with gr.Row():
            im = gr.ImageEditor(
                canvas_size=(1000, 1000),
                crop_size=(200, 200),
            )
            im_preview = gr.Image()
        txt = gr.Textbox(label="image size")
        im.change(predict, outputs=im_preview, inputs=im, show_progress="hidden")
        im.change(get_image_size, inputs=im, outputs=txt)


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

[pngwn]

Also fixed the docstrings. Automated tests are challenging for the image editor, so I'll look into that elsewhere. Existing visual tests for the image editor are always causing flake, so I don't want to add to that right now.

[pngwn]

@abidlabs @freddyaboulton should be fine now, silly thing.

[abidlabs]

I tried different setups and works beautifully! Just left one nit on the python type hint, thanks @pngwn