How to display text and plotly chart with gradio in the same output box

Question

I have a code which is a chatgpt agent answering questions about our database (text to SQL basically). The code works perfectly on its own. However I need to demo it to my management so I need to have some kind of front end to it.

As front end programming it is not my area, I thought I will go with something easy. I thought gradio will do the job, so it is my first gradio app. It works nicely however I run into a problem. The chatbot I created is able to display the text replies however the user can ask for visualization of the results. When asked to visualize the chatbot agent uses plotly.

My problem is that the output text box I am using with gradio cannot display the visualization, only the text. So my question is that, does gradio have an output item which can display text and visualization as well?

Here is my gradio code:

demo=gr.Interface(fn=generate_reply, inputs='text', outputs='text')
demo.launch()

Answer 1

This is the closest I could find, it's only available in the chatbot object. If you are doing a lot of customization, it might not work, but it's worth a look:

https://www.gradio.app/docs/gradio/chatbot