How can I add an image to the Chat?

[gamesbyjames]

I tried to put an image into the Chat as follows, but it didn't work... any ideas or suggestions? Thanks!

import mesop as me
import mesop.labs as mel

def handle_user_input(user_input):
    # Here, we process the user_input and decide to respond with an image
    # For this demonstration, let's assume we always respond with the same image
    return me.image(
        src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg",
        alt="Grapefruit slice",
        style=me.Style(width="100%")
    )

@me.page(
    security_policy=me.SecurityPolicy(
        allowed_iframe_parents=["https://google.github.io"]
    ),
    path="/chat",
    title="Mesop Demo Chat",
)
def page():
    mel.chat(transform, title="Mesop Demo Chat", bot_user="Mesop Bot")

def transform(input: str, history: list[mel.ChatMessage]):
    response = handle_user_input(input)
    # Yield the response back to the chat interface
    yield response

# Start the Mesop server
if __name__ == "__main__":
    me.run()

[gamesbyjames]

I suppose we would need to change the transform function in labs/chat.py to handle images and not just text. So I guess it would be a feature request then.

[gamesbyjames]

A workaround is to return markdown from the handle_user_input() function, something like this, where filename is the url (or name) of the image file:

return '![](' + filename + ')'

or with markup like this:

image = "<img src=" + filename + " alt=\"Alt Text\" width=\"200\" height=\"200\"/>"
return image

[wwwillchen]

I think doing the workaround by returning markdown with image tag is valid. I'd also recommend forking the code in chat.py - we intentionally wrote it all in Python so it's easy to customize for use cases like yours. Feel free to re-open this if you're still hitting issues. Thanks.

[gamesbyjames]

makes sense, thanks