The image uploaded in the multimodal chatbot might be too small to be clearly visible.

[yvrjsharma]

Describe the bug

I noticed that the size of the image I uploaded in the multimodal chatbot is quite small. I am not entirely certain if this is an issue or if it was intended to be that way. However, I feel that the image could be more visible and impactful if it was larger.

cc: @abidlabs

Have you searched existing issues? 🔎

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

Reproduction

import gradio as gr
import os
import time

# Chatbot demo with multimodal input (text, markdown, LaTeX, code blocks, image, audio, & video). Plus shows support for streaming text.


def print_like_dislike(x: gr.LikeData):
    print(x.index, x.value, x.liked)

def add_message(history, message):
    for x in message["files"]:
        history.append(((x["path"],), None))
    if message["text"] is not None:
        history.append((message["text"], None))
    return history, gr.MultimodalTextbox(value=None, interactive=False, file_types=["image"])

def bot(history):
    response = "**That's cool!**"
    history[-1][1] = ""
    for character in response:
        history[-1][1] += character
        time.sleep(0.05)
        yield history


with gr.Blocks() as demo:
    chatbot = gr.Chatbot(
        [],
        elem_id="chatbot",
        bubble_full_width=False,
        #avatar_images=(None, (os.path.join(os.path.dirname(__file__), "files/avatar.png"))),
    )

    chat_input = gr.MultimodalTextbox(interactive=True, file_types=["image"], placeholder="Enter message or upload file...", show_label=False)
    chat_msg = chat_input.submit(add_message, [chatbot, chat_input], [chatbot, chat_input], queue=False).then(
        bot, chatbot, chatbot, api_name="bot_response"
    )
    chat_msg.then(lambda: gr.Textbox(interactive=True), None, [chat_input], queue=False)
    chatbot.like(print_like_dislike, None, None)

demo.queue()
if __name__ == "__main__":
    demo.launch()

Screenshot

How it is coming up for us :

https://github.com/gradio-app/gradio/assets/48665385/8038a7c4-c1a9-4864-9e8e-a4766b4f7b4d

How ChatGPT does it atm:

Logs

No response

System Info

Google Colab

Severity

I can work around it

[nxphi47]

@yvrjsharma You can pass in the root gr.Blocks with css=

e.g:

with gr.Blocks(css=".message-wrap.svelte-1lcyrx4>div.svelte-1lcyrx4  img {min-width: 200px}") as demo:

Note: it only works for the root block.

[ZivotJeKrasny]

Maybe a better method would be to render the image as HTML like this:

def add_message(history, message):
    for x in message["files"]:
        history.append(
            (
                f"<img src='/file={x}' style='width: 600px; max-width:none; max-height:none'></img>",
                None,
            )
        )
    if message["text"]:
        history.append((message["text"], None))
    return history, gr.MultimodalTextbox(value=None, interactive=False, file_types=["image"])

[tyc333]

How do u fix this problem? None of these work for me.