How to resize an image in Gradio?

I'm looking for an approach to resize an image as a header in Gradio generated UI to be smaller.

According to a closed issue on their Github, I followed the following manner:

import gradio as gr

with gr.Blocks() as app:
    gr.Image("logo.png", label="Top Image").style(width=600, height=400)
    app.launch(server_name="0.0.0.0", server_port=7860, debug=True)

But it raises:

AttributeError: 'Markdown' object has no attribute 'style'. Did you mean: 'scale'?

I also tried using the Markdown() or HTML() method rather than Image() however, the issue is with this approach it cannot load an image locally.

Here's the thing I've done so far:

import gradio as gr

def greet(name):
    return f"Hello {name}!"

# Load your local image
image_path = "/file/logo.png"

with gr.Blocks() as demo:
    html_header = f"""
    <div style="text-align: center;">
        <img src="{image_path}" alt="Header Image" width="200" height="100">
    </div>
    """
    gr.HTML(html_header)

    name_input = gr.Textbox(label="Enter your name:")
    submit_button = gr.Button("Submit")
    output = gr.Textbox(label="Greeting:")

    submit_button.click(fn=greet, inputs=name_input, outputs=output)

demo.launch()

I also tried image_path = "/file=logo.png", image_path = "/file/logo.png", image_path = "file=logo.png", and image_path = "./logo.png" routes without any results.

I should add that the logo and the .py file are next to each other.

Solution

Documentation for Image shows that you can use

Image(..., width=..., height=...)

I test it and it works but it can't be smaller than width=160.
And it needs to change also min_width= to smaller value because it has default value 160

If you don't need label and download button then you can uses

Image(..., show_label=False, show_download_button=False)

If you want to put own <img src="..."> then it can make problem because DevTools in Firefox/Chrome shows that it uses path like this

http://0.0.0.0:7860/file=/tmp/user/1000/gradio/f1ca8fcde634bae0360273c73b61af0bac43f7a8/logo.png

Maybe there is random value or maybe it is hash value calculated for this file.

I checked it created file on disk (on Linux)

/tmp/user/1000/gradio/f1ca8fcde634bae0360273c73b61af0bac43f7a8/logo.png

I found that you can use local file if you add it to allowed_path in app.launch()

src="/file=logo.png"
app.launch(..., allowed_paths=["logo.png"])

image_path = "logo.png"
gr.HTML(f"""<img src="/file={image_path}" width="100" height="100">""")
    
app.launch(server_name="0.0.0.0", server_port=7860, debug=True, 
           allowed_paths=[image_path])

You may also use folder (absolute or relative)

src="/file=/some/folder/logo.png"
app.launch(..., allowed_paths=["/some/folder/"])

folder = "/other/folder"

image_path_1 = f"{folder}/logo.png"
gr.HTML(f"""<img src="/file={image_path_1}" width="100" height="100">""")

image_path_2 = f"{folder}/other.png"
gr.HTML(f"""<img src="/file={image_path_2}" width="100" height="100">""")
    
app.launch(server_name="0.0.0.0", server_port=7860, debug=True, 
           allowed_paths=[folder])

It can be relative folder

src="/file=subfolder/images/logo.png"
app.launch(..., allowed_paths=["subfolder/images/"])

or you may create absolute path

absolute_folder = os.path.join(os.path.dirname(os.path.abspath(__file__)), "subfolder", "images")

and this path you have to use in src="/file=..." and add to allowed_paths.

There is also set_static_paths to add folder with static elements - like layout graphics, logo.

gr.set_static_paths(paths=["static/images/"])

image_path = "static/images/logo.png"

gr.HTML(f"""<img src="/file={image_path}" width="100" height="100">""")

and this doesn't need to add to allowed_paths