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
29.49k stars 2.19k forks source link

Unequal Icon Heights for Different Sized Images in Gradio Input and Image Source Overflowing Container Boundaries #8203

Open Vincentqyw opened 2 weeks ago

Vincentqyw commented 2 weeks ago

Describe the bug

I'm attempting to control the height of images in gr.Image to display images of different heights at the same height by setting height=300. However, when I input two images of different sizes into Gradio, the icons for the image sources are not displayed with equal heights. As shown in the attached screenshot, the icon for the image source on the right exceeds the boundaries of its container. I would appreciate any suggestions or solutions to address this issue. Thank you.

Have you searched existing issues? 🔎

Reproduction

import gradio as gr

with gr.Blocks() as app:
    with gr.Row(equal_height=False):
        with gr.Row():
            input_image0 = gr.Image(
                label="Image 0",
                type="numpy",
                image_mode="RGB",
                height=300,
                interactive=True,
            )
            input_image1 = gr.Image(
                label="Image 1",
                type="numpy",
                image_mode="RGB",
                height=300,
                interactive=True,
            )
        with gr.Column():
            output_keypoints = gr.Image(label="Keypoints", type="numpy")
app.queue().launch(
    server_name="0.0.0.0",
    server_port=6329,
    share=False,
)        

Then you upload two images with different heights.

Screenshot

image

Logs

No response

System Info

Gradio Environment Information:
------------------------------
Operating System: Linux
gradio version: 4.28.3
gradio_client version: 0.16.0

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

aiofiles: 23.2.1
altair: 5.3.0
fastapi: 0.110.1
ffmpy: 0.3.2
gradio-client==0.16.0 is not installed.
httpx: 0.27.0
huggingface-hub: 0.22.2
importlib-resources: 6.4.0
jinja2: 3.1.2
markupsafe: 2.1.5
matplotlib: 3.7.1
numpy: 1.23.5
orjson: 3.10.0
packaging: 24.0
pandas: 2.0.3
pillow: 10.3.0
pydantic: 2.7.0
pydub: 0.25.1
python-multipart: 0.0.9
pyyaml: 6.0
ruff: 0.3.7
semantic-version: 2.10.0
tomlkit==0.12.0 is not installed.
typer: 0.12.3
typing-extensions: 4.11.0
urllib3: 2.2.1
uvicorn: 0.29.0
authlib; extra == 'oauth' is not installed.
itsdangerous; extra == 'oauth' is not installed.

gradio_client dependencies in your environment:

fsspec: 2024.3.1
httpx: 0.27.0
huggingface-hub: 0.22.2
packaging: 24.0
typing-extensions: 4.11.0
websockets: 11.0.3

Severity

I can work around it