---

❤️觉得内容不错的话，欢迎点赞收藏加关注😊😊😊，后续会继续输入更多优质内容❤️
👉有问题欢迎大家加关注私戳或者评论（包括但不限于NLP算法相关，linux学习相关，读研读博相关......）👈

---

博主原文链接：https://www.yourmetaverse.cn/nlp/417/

（封面图由文心一格生成）

使用gradio库的Plot模块创建交互式绘图界面

在机器学习和数据可视化领域，展示数据和模型的结果通常需要绘制各种图形。gradio库是一个强大的Python库，提供了创建交互式界面的功能，其中的Plot模块可以用于显示各种类型的图表，包括matplotlib、plotly和bokeh等。本文将介绍gradio库的Plot模块以及其change和clear两个方法的使用。

gradio.Plot模块是gradio库中用于显示图表的组件之一。它支持matplotlib、plotly和bokeh等绘图库，可以接受matplotlib.figure.Figure、plotly.graph_objects._figure.Figure或bokeh绘图的字典形式作为输入，并将其显示在界面上。

使用示例：
下面是一个使用gradio.Plot模块创建交互式绘图界面的示例代码：

import altair as alt
import gradio as gr
import numpy as np
import pandas as pd
from vega_datasets import data


def make_plot(plot_type):
    if plot_type == "scatter_plot":
        cars = data.cars()
        return alt.Chart(cars).mark_point().encode(
            x='Horsepower',
            y='Miles_per_Gallon',
            color='Origin',
        )
    elif plot_type == "heatmap":
        # Compute x^2 + y^2 across a 2D grid
        x, y = np.meshgrid(range(-5, 5), range(-5, 5))
        z = x ** 2 + y ** 2

        # Convert this grid to columnar data expected by Altair
        source = pd.DataFrame({'x': x.ravel(),
                            'y': y.ravel(),
                            'z': z.ravel()})
        return alt.Chart(source).mark_rect().encode(
            x='x:O',
            y='y:O',
            color='z:Q'
        )
    elif plot_type == "us_map":
        states = alt.topo_feature(data.us_10m.url, 'states')
        source = data.income.url

        return alt.Chart(source).mark_geoshape().encode(
            shape='geo:G',
            color='pct:Q',
            tooltip=['name:N', 'pct:Q'],
            facet=alt.Facet('group:N', columns=2),
        ).transform_lookup(
            lookup='id',
            from_=alt.LookupData(data=states, key='id'),
            as_='geo'
        ).properties(
            width=300,
            height=175,
        ).project(
            type='albersUsa'
        )
    elif plot_type == "interactive_barplot":
        source = data.movies.url

        pts = alt.selection(type="single", encodings=['x'])

        rect = alt.Chart(data.movies.url).mark_rect().encode(
            alt.X('IMDB_Rating:Q', bin=True),
            alt.Y('Rotten_Tomatoes_Rating:Q', bin=True),
            alt.Color('count()',
                scale=alt.Scale(scheme='greenblue'),
                legend=alt.Legend(title='Total Records')
            )
        )

        circ = rect.mark_point().encode(
            alt.ColorValue('grey'),
            alt.Size('count()',
                legend=alt.Legend(title='Records in Selection')
            )
        ).transform_filter(
            pts
        )

        bar = alt.Chart(source).mark_bar().encode(
            x='Major_Genre:N',
            y='count()',
            color=alt.condition(pts, alt.ColorValue("steelblue"), alt.ColorValue("grey"))
        ).properties(
            width=550,
            height=200
        ).add_selection(pts)

        plot = alt.vconcat(
            rect + circ,
            bar
        ).resolve_legend(
            color="independent",
            size="independent"
        )
        return plot
    elif plot_type == "radial":
        source = pd.DataFrame({"values": [12, 23, 47, 6, 52, 19]})

        base = alt.Chart(source).encode(
            theta=alt.Theta("values:Q", stack=True),
            radius=alt.Radius("values", scale=alt.Scale(type="sqrt", zero=True, rangeMin=20)),
            color="values:N",
        )

        c1 = base.mark_arc(innerRadius=20, stroke="#fff")

        c2 = base.mark_text(radiusOffset=10).encode(text="values:Q")

        return c1 + c2
    elif plot_type == "multiline":
        source = data.stocks()

        highlight = alt.selection(type='single', on='mouseover',
                                fields=['symbol'], nearest=True)

        base = alt.Chart(source).encode(
            x='date:T',
            y='price:Q',
            color='symbol:N'
        )

        points = base.mark_circle().encode(
            opacity=alt.value(0)
        ).add_selection(
            highlight
        ).properties(
            width=600
        )

        lines = base.mark_line().encode(
            size=alt.condition(~highlight, alt.value(1), alt.value(3))
        )

        return points + lines


with gr.Blocks() as demo:
    button = gr.Radio(label="Plot type",
                      choices=['scatter_plot', 'heatmap', 'us_map',
                               'interactive_barplot', "radial", "multiline"], value='scatter_plot')
    plot = gr.Plot(label="Plot")
    button.change(make_plot, inputs=button, outputs=[plot])
    demo.load(make_plot, inputs=[button], outputs=[plot])


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

在上面的示例中，我们定义了一个名为make_plot的函数，根据plot_type参数的不同，生成不同类型的图表。然后，通过gr.Interface创建了一个界面，其中输入使用了Radio组件，用于选择图表类型，输出使用了Plot组件，用于显示生成的图表。最后通过demo.launch()启动了界面。

change方法：
gradio.Plot组件的change方法用于监听组件值的变化，并在变化时执行相应的函数。该方法常用于将组件与其他组件或函数进行关联。在上面的示例中，我们使用了button.change(make_plot, inputs=button, outputs=[plot])语句，将make_plot函数与button组件和plot组件进行了关联。当button组件的值发生变化时，会触发make_plot函数，并更新plot组件的显示内容。

clear方法：
gradio.Plot组件的clear方法用于监听组件的清除操作，当用户点击组件的清除按钮时触发相应的函数。在上面的示例中，我们未使用clear方法，但可以通过定义相应的函数来实现组件清除时的操作。

总结

本文介绍了gradio库的Plot模块及其change和clear两个方法的使用。通过gradio库，我们可以方便地创建交互式绘图界面，并与其他组件或函数进行关联，实现更灵活的数据可视化和模型展示。通过合理利用gradio库的各种功能，我们可以提升数据科学和机器学习任务的可视化效果和用户交互性。

参数详解

下面是关于Plot模块的参数、change方法参数和clear方法参数的整理表格：

参数	数据类型	默认值	描述
value	Callable | None | pd.DataFrame	None	默认显示的绘图对象，可以是matplotlib、plotly、altair或bokeh的图形对象，或者是一个可调用函数。如果是可调用函数，在应用加载时会调用该函数来设置组件的初始值。
label	str | None	None	在界面中显示的组件名称。
every	float | None	None	如果value是一个可调用函数，在客户端连接打开的情况下，每隔一定时间（以秒为单位）运行该函数。否则没有影响。需要启用队列。可以通过该组件的.load_event属性访问事件（例如取消事件）。
show_label	bool	True	如果为True，将显示标签。
container	bool	True	如果为True，将在容器中放置组件，提供额外的边框填充。
scale	int | None	None	相对于相邻组件的宽度比例。例如，如果组件A的scale=2，组件B的scale=1，那么A的宽度将是B的两倍。应为整数。
min_width	int	160	最小像素宽度，如果屏幕空间不足以满足此值，则换行。如果某个比例值导致此组件比min_width更窄，则首先将尊重min_width参数。
visible	bool	True	如果为False，将隐藏组件。
elem_id	str | None	None	可选的字符串，用作该组件在HTML DOM中的id。可用于针对CSS样式进行定位。
elem_classes	list[str] | str | None	None	可选的字符串列表，用作该组件在HTML DOM中的类。可用于针对CSS样式进行定位。

change方法参数

参数	数据类型	默认值	描述
fn	Callable | None	required	包装成界面的函数，通常是一个机器学习模型的预测函数。函数的每个参数对应一个输入组件，函数应返回一个值或值的元组，元组中的每个元素对应一个输出组件。
inputs	Component | list[Component] | set[Component] | None	None	要用作输入的gradio.components的列表。如果函数不接受任何输入，这应该是一个空列表。
outputs	Component | list[Component] | None	None	要用作输出的gradio.components的列表。如果函数不返回任何输出，这应该是一个空列表。
api_name	str | None	None	定义此参数将在api文档中公开端点。
status_tracker	None	None
scroll_to_output	bool	False	如果为True，将在完成后滚动到输出组件。
show_progress	Literal[‘full’] | Literal[‘minimal’] | Literal[‘hidden’]	“full”	如果为True，在等待过程中显示进度动画。
queue	bool | None	None	如果为True，将请求放入队列中（如果启用了队列）。如果为False，即使启用了队列，也不会将此事件放入队列中。如果为None，将使用gradio app的队列设置。
batch	bool	False	如果为True，则函数应处理一批输入，这意味着它应接受每个参数的输入值列表。列表的长度应相等（最多为max_batch_size）。然后，该函数 必须 返回一个元组列表（即使只有一个输出组件），其中元组中的每个列表对应一个输出组件。
max_batch_size	int	4	如果从队列中调用此方法，最多可以批处理的输入数量（仅在batch=True时有效）。
preprocess	bool	True	如果为False，在运行’fn’之前不运行组件数据的预处理（例如，如果使用Image组件调用该方法，保留它作为base64字符串）。
postprocess	bool	True	如果为False，将在将’fn’的输出返回到浏览器之前不运行组件数据的后处理。
cancels	dict[str, Any] | list[dict[str, Any]] | None	None	在触发此侦听器时，取消其他事件的列表。例如，设置cancels=[click_event]将取消click_event，其中click_event是另一个组件的.click方法的返回值。尚未运行的函数（或正在迭代的生成器）将被取消，但正在运行的函数将被允许完成。
every	float | None	None	在客户端连接打开的情况下，每隔一定时间（以秒为单位）运行此事件。需要以秒为单位解释。需要启用队列。

clear方法参数

参数	数据类型	默认值	描述
fn	Callable | None	required	包装成界面的函数，通常是一个机器学习模型的预测函数。函数的每个参数对应一个输入组件，函数应返回一个值或值的元组，元组中的每个元素对应一个输出组件。
inputs	Component | list[Component] | set[Component] | None	None	要用作输入的gradio.components的列表。如果函数不接受任何输入，这应该是一个空列表。
outputs	Component | list[Component] | None	None	要用作输出的gradio.components的列表。如果函数不返回任何输出，这应该是一个空列表。
api_name	str | None	None	定义此参数将在api文档中公开端点。
status_tracker	None	None
scroll_to_output	bool	False	如果为True，将在完成后滚动到输出组件。
show_progress	Literal[‘full’] | Literal[‘minimal’] | Literal[‘hidden’]	“full”	如果为True，在等待过程中显示进度动画。
queue	bool | None	None	如果为True，将请求放入队列中（如果启用了队列）。如果为False，即使启用了队列，也不会将此事件放入队列中。如果为None，将使用gradio app的队列设置。
batch	bool	False	如果为True，则函数应处理一批输入，这意味着它应接受每个参数的输入值列表。列表的长度应相等（最多为max_batch_size）。然后，该函数 必须 返回一个元组列表（即使只有一个输出组件），其中元组中的每个列表对应一个输出组件。
max_batch_size	int	4	如果从队列中调用此方法，最多可以批处理的输入数量（仅在batch=True时有效）。
preprocess	bool	True	如果为False，在运行’fn’之前不运行组件数据的预处理（例如，如果使用Image组件调用该方法，保留它作为base64字符串）。
postprocess	bool	True	如果为False，将在将’fn’的输出返回到浏览器之前不运行组件数据的后处理。
cancels	dict[str, Any] | list[dict[str, Any]] | None	None	在触发此侦听器时，取消其他事件的列表。例如，设置cancels=[click_event]将取消click_event，其中click_event是另一个组件的.click方法的返回值。尚未运行的函数（或正在迭代的生成器）将被取消，但正在运行的函数将被允许完成。
every	float | None	None	在客户端连接打开的情况下，每隔一定时间（以秒为单位）运行此事件。需要以秒为单位解释。需要启用队列。

---

❤️觉得内容不错的话，欢迎点赞收藏加关注😊😊😊，后续会继续输入更多优质内容❤️
👉有问题欢迎大家加关注私戳或者评论（包括但不限于NLP算法相关，linux学习相关，读研读博相关......）👈

---