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"/file=logo.png" and "file=logo.png" without any result.

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