Upgrading 4.8.0 to 4.9.0 output images are too large

Describe the bug

When I switch from version 4.8.0 to 4.9.0 my output images no longer scale down to fit in the Image control but instead display at an uncomfortably large size.

Edit: with 4.19.0 and interactive=True added to the output images, this is no longer a problem.

Have you searched existing issues? 🔎

• [X] I have searched and found no existing issues

Reproduction

"""I'm just loading a 288x512 pixel animated GIF into an output-only Image control, but it displays in the UI at 716x1273 pixlels
Per Chrome:
Rendered size:	716 × 1273 px
Rendered aspect ratio:	716∶1273
Intrinsic size:	288 × 512 px
Intrinsic aspect ratio:	9∶16
"""
preview_image702 = gr.Image(sources=["upload"], type="filepath",
                        label="Split Frame Preview", height=512, width=720)

Screenshot

No response

Logs

No response

System Info

The same happens also with 4.19.0. I have checked versions and determined the change occurs with version 4.9.0.

Severity

Can work around issue

Hi @jhogsett would you be able to share a link to the image you're trying?

@abidlabs

Hi @jhogsett would you be able to share a link to the image you're trying?

Here is an example one:

This shows how the gif appears in the same codebase, with 4.8.0 at the top and 4.9.0 at the bottom:

Chrome shows these dimensions for them:

Rendered size: 716 × 510 px Rendered aspect ratio: 358∶255 Intrinsic size: 288 × 512 px Intrinsic aspect ratio: 9∶16

Rendered size: 716 × 1273 px Rendered aspect ratio: 716∶1273 Intrinsic size: 288 × 512 px Intrinsic aspect ratio: 9∶16

I've tried a few things to coerce the images to resize like in earlier versions but haven't come up with a way yet. I see the same issue in later versions too including 4.19.0.

Thanks!

Is it only with GIFs or other images as well?

Is it only with GIFs or other images as well?

@abidlabs it happens also with PNG files. I have another Image instance on a different tab that displays PNG images and with the update they are blown up in the same way. It's particularly noticeable with portrait images. It is as if a "fit" isn't happening after the update.

Thanks @jhogsett could you please provide a minimal code example that we can use to reproduce the issue above?

@abidlabs Here is a short script that illustrates the issue:

import os
import signal
import gradio as gr

def main():
    WebUI().start()

class WebUI:
    def __init__(self):
        self.restart = False
        self.prevent_inbrowser = False

    def start(self):
        while True:
            app = self.create_ui()
            app.launch(inbrowser = True,
                        server_name = "0.0.0.0",
                        server_port = 7862,
                        prevent_thread_lock=False, quiet=True)

    def create_ui(self):
        with gr.Blocks(analytics_enabled=False,
                        title="Image Test") as app:
            with gr.Row():
                image1 = gr.Image(label="interactive=False", sources=["upload"], height=512, interactive=False)
                image2 = gr.Image(label="interactive=True", sources=["upload"], height=512, interactive=True)
            text = gr.Textbox(max_lines=1, placeholder="Path to image file")
            button = gr.Button(value="View Image")

            button.click(self.button_click, inputs=text, outputs=[image1, image2])
        return app

    def button_click(self, text):
        return text, text

def sigint_handler(sig, frame):
    os._exit(0)
signal.signal(signal.SIGINT, sigint_handler)

if __name__ == '__main__':
    main()

With 4.9.0 the image isn't fit to the output bounds causing it to be too big and partially cut off:

With 4.8.0 and earlier versions I've tested the output fits to the output bounds: