Gradio Interface not loading any local images

[akudnaver]

Describe the bug

I had no luck so far adding an image to the gradio interface for my chatbot , with the below method.

Looking for a solution for this problem....any suggestion will help ?

Path to the chatbot image in the Colab project directory chatbot_image_path = "/content/chatbot_image.jpg"

Create a custom CSS string custom_css = """ .input_box textarea { background-color: #f0f0f0; border: 1px solid #ccc; font-size: 16px; } .output_box { background-color: #e6f7ff; border: 1px solid #007bff; padding: 10px; font-size: 16px; color: #007bff; } .gr-button { background-color: #007bff; color: white; border-radius: 5px; } .chatbot-image { display: block; margin-left: auto; margin-right: auto; width: 564px; / Adjust the width as needed / height: 423x; / Maintain aspect ratio / border-radius: 50%; } """

Create Gradio interface iface = gr.Interface( fn=chatbot_interface,

inputs='text',

inputs=gr.Textbox(placeholder="Enter your query and get a response from the AI chatbot."), outputs='text', title="AI Chatbot",

description="Enter your query and get a response from the AI chatbot.",

theme=gr.themes.Monochrome(), css=custom_css, description=f"""

""" )

Have you searched existing issues? 🔎

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

Reproduction

custom_css = """
.input_box textarea {
background-color: #f0f0f0;
border: 1px solid #ccc;
font-size: 16px;
}
.output_box {
background-color: #e6f7ff;
border: 1px solid #007bff;
padding: 10px;
font-size: 16px;
color: #007bff;
}
.gr-button {
background-color: #007bff;
color: white;
border-radius: 5px;
}
.chatbot-image {
display: block;
margin-left: auto;
margin-right: auto;
width: 564px; /* Adjust the width as needed /
height: 423x; / Maintain aspect ratio */
border-radius: 50%;
}
"""

Create Gradio interface
iface = gr.Interface(
fn=chatbot_interface,

# inputs='text',
inputs=gr.Textbox(placeholder="Enter your query and get a response from the AI chatbot."),
outputs='text',
title="AI Chatbot",
# description="Enter your query and get a response from the AI chatbot.",
theme=gr.themes.Monochrome(),
css=custom_css,
description=f"""
<div style="text-align: center;">
    <img src='{chatbot_image_path}' class="chatbot-image">
</div>
"""
)

Screenshot

Logs

No response

System Info

Google Colab

Severity

I can work around it

[freddyaboulton]

Hile @akudnaver - please set the img src to be /file=<chatbot-path> and add the chatbot-path to the allowed_paths argument of launch