Center an output `gr.Image` when the width and height and are set

[apolinario]

Is your feature request related to a problem? Please describe.
Sometimes I may want to output images with a particular width or width/height combination. If not, the image can get way too big, even bigger than the actual image resolution. Currently I have to do it via CSS css="#output_image{width: 256px}" as in here

Describe the solution you'd like
gr.Image(shape=[256,256]) when the component is used as an output could be used to determine the output width and height (alternatively a new parameter could be used)

[apolinario]

And example when no CSS is used. The output should be a 256x256 image but this happens:

[abidlabs]

Hi @apolinario, thanks for creating the issue! Just to clarify, is this the same issue as in #1561 or are you getting at something else?

[apolinario]

I did see that issue, but to me it seemed like that issue was still related to the image as an input field - while I'm getting at it as an output field - but maybe the problem is the same all across

@osanseviero has also mentioned the possibility that the output image inherits the input image (or the real output dimensions) internally - which I think would make sense as well

[abidlabs]

We do have a way to do this with the Python API using the .style() method on the output image. Something like this:

import gradio as gr

gr.Interface(
    lambda x:x,
    inputs=gr.Image(),
    outputs=gr.Image(shape=[256,256], elem_id="output_image").style(width=256, height=256),
    title="ddpm-celebahq-256 diffusion - 🧨 diffusers library",
    description="This Spaces contains an unconditional diffusion process for the <a href=\"https://huggingface.co/google/ddpm-celebahq-256\">ddpm-celebahq-256</a> face generator model by <a href=\"https://huggingface.co/google\">Google</a> using the <a href=\"https://github.com/huggingface/diffusers\">diffusers library</a>. You can try the diffusion process not only with the default <code>ddpm</code> scheduler but also with <code>ddim</code> and <code>pndm</code>, showcasing the modularity of the library. <a href=\"https://github.com/huggingface/diffusers/tree/main/src/diffusers/schedulers\">Learn more about schedulers here.</a>",
).launch()

But the output image alignment is to the left, which looks weird:

Would be better if it was centered. Let me rename this issue to reflect that

[abidlabs]

This is still an issue even though style has been deprecated. Here's an example that shows the issue:

import gradio as gr

gr.Interface(
    lambda x:x,
    inputs=gr.Image(),
    outputs=gr.Image(shape=[256,256], width=256, height=256, elem_id="output_image"),
    title="ddpm-celebahq-256 diffusion - 🧨 diffusers library",
    description="This Spaces contains an unconditional diffusion process for the <a href=\"https://huggingface.co/google/ddpm-celebahq-256\">ddpm-celebahq-256</a> face generator model by <a href=\"https://huggingface.co/google\">Google</a> using the <a href=\"https://github.com/huggingface/diffusers\">diffusers library</a>. You can try the diffusion process not only with the default <code>ddpm</code> scheduler but also with <code>ddim</code> and <code>pndm</code>, showcasing the modularity of the library. <a href=\"https://github.com/huggingface/diffusers/tree/main/src/diffusers/schedulers\">Learn more about schedulers here.</a>",
).launch()

[moebius2033]

I've found a quick solution, for anyone with the same issue. Following the elem_id attribute, make sure you add a style element that links to that ID.

gr.HTML("""<div id='output_image' style='display:block; margin-left: auto; margin-right: auto></div>""")
result = gr.Image(label="output", show_label=True, witdh=768, height=768, elem_id="output_image")

The CSS necessary in the div are all necessary in order to align the image properly. I hope this helps!

[aliabid94]

looking into this. reference to internal discussion: https://huggingface.slack.com/archives/C03JMRM52C9/p1707179711883409?thread_ts=1707100387.003039&cid=C03JMRM52C9