如何在同一输出框中显示文本并使用渐变绘制图表

Question

我有一个代码，它是一个 chatgpt 代理，回答有关我们数据库的问题（基本上是文本到 SQL）。该代码本身可以完美运行。但是我需要向我的管理层演示它，所以我需要某种前端。

作为前端编程，这不是我的领域，我想我会选择一些简单的东西。我认为 gradio 可以完成这项工作，所以这是我的第一个 gradio 应用程序。 它工作得很好，但我遇到了问题。我创建的聊天机器人能够显示文本回复，但用户可以要求显示结果的可视化。当被要求可视化聊天机器人代理时，会使用plotly。

我的问题是我与 gradio 一起使用的输出文本框无法显示可视化效果，只能显示文本。 所以我的问题是，gradio是否有一个可以显示文本和可视化的输出项？

这是我的渐变代码：

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

Answer 1

要在同一个渐变输出框中显示文本和绘图，请按照以下步骤操作：

1. 导入渐变和绘图：

   import gradio as gr
   import plotly.express as px
   

2. 创建绘图：

   chart_data = px.data.iris()
   fig = px.scatter(chart_data, x='sepal_width', y='sepal_length', color='species')
   

3. 合并文本和图表：

   output_text = "This is a Plotly Chart:"
   output_chart = gr.Image(fig.to_image(format="png"))
   

4. 定义渐变界面：

   iface = gr.Interface(fn=lambda: (output_text, output_chart), live=True)
   

5. 启动Gradio界面：

   iface.launch()
   

   此代码设置了一个 Gradio 界面，其中文本和绘图显示在同一输出框中，以实现无缝的用户体验。