Canvas drawing is cut off when the shape is explicitly set to be a square

[lllyasviel]

• I have searched to see if a similar issue already exists.

Is your feature request related to a problem? Please describe.

Right now if we want to make a 512*512 drawing canvas, the only method is (1) ask users to create a pure white 512*512 image using third-party software like PhotoShop, then (2) ask users to import that blank image into gr.Image(source='upload', tool='sketch'), then (3) use the resulting mask as the user drawing for any applications. (Besides, the initial width of scribble can not be set by code.)

This is over-complicated. We should have an one-line function to make a simple drawing canvas.

Describe the solution you'd like

We may consider something like

gr.Image(source='blank', tool='sketch', size=(512, 512))

[abidlabs]

Hi @lllyasviel this is already possible by doing:

gr.Image(source="canvas", shape=(512, 512))

For example, you can test this with this Blocks demo:

import gradio as gr

with gr.Blocks() as demo:
    i = gr.Image(source="canvas", shape=(512, 512))
    o = gr.Image()
    i.change(lambda x:x, i, o)

demo.launch()

[lllyasviel]

@abidlabs
No. Right now gradio does not support a simple 512*512 drawing canvas.

pip install --upgrade gradio

then

Then the result will be like

As we can see, this has nothing to do with "shape=(512, 512)", the shape parameter does not control the resolution, it controls a "gradio-style dpi". You can even draw in this long rectangular:

When it is processed, the results provide strong evidence that "shape" is related to dpi and cropping, not shape of canvas

If this is an intentional design, it may be worthwhile to reopen this issue to target a more straightforward drawing board.

[abidlabs]

Hi @lllyasviel so to achieve what you want, I think we need to do control both the image resolution (with is controlled via the shape parameter above) and the display size of the Image component, which is controlled via the .style() method of the Image component. I agree that it's a bit confusing, but I think this should achieve what you want:

import gradio as gr

with gr.Blocks() as demo:
    i = gr.Image(source="canvas", shape=(512, 512)).style(width=512, height=512)
    o = gr.Image().style(width=512, height=512)
    i.change(lambda x:x, i, o)

demo.launch()

However, when I tested this, I got the canvas being cut off at the halfway point, preventing me from drawing in the bottom half of the canvas, which is very strange.

I'm going to reopen this issue so that we can fix this. cc @pngwn