Gradio Agents & MCP 黑客马拉松
获奖者Gradio Agents & MCP 黑客马拉松
获奖者本指南解释了如何使用 Gradio 的 gradio.Plot
组件在地图上绘制地理数据。Gradio 的 Plot
组件支持 Matplotlib、Bokeh 和 Plotly。本指南将使用 Plotly。Plotly 允许开发者轻松地使用其地理数据创建各种地图。点击此处查看一些示例。
我们将使用纽约市 Airbnb 数据集,该数据集托管在 Kaggle 上(此处)。为了方便使用和下载,我已将其作为数据集上传到 Hugging Face Hub(此处)。使用这些数据,我们将在地图输出上绘制 Airbnb 位置,并允许根据价格和位置进行筛选。以下是我们即将构建的演示。⚡️
让我们从 Hugging Face Hub 加载 Airbnb 纽约市数据开始。
from datasets import load_dataset
dataset = load_dataset("gradio/NYC-Airbnb-Open-Data", split="train")
df = dataset.to_pandas()
def filter_map(min_price, max_price, boroughs):
new_df = df[(df['neighbourhood_group'].isin(boroughs)) &
(df['price'] > min_price) & (df['price'] < max_price)]
names = new_df["name"].tolist()
prices = new_df["price"].tolist()
text_list = [(names[i], prices[i]) for i in range(0, len(names))]
在上面的代码中,我们首先将 CSV 数据加载到 pandas 数据框中。接下来,我们定义一个函数,它将作为 Gradio 应用的预测函数。此函数将接受最小价格和最大价格范围,以及用于过滤结果地图的行政区列表。我们可以使用传入的值(min_price
、max_price
和 boroughs
列表)来过滤数据框并创建 new_df
。然后,我们将创建 Airbnb 名称和价格的 text_list
,用作地图上的标签。
Plotly 使地图操作变得简单。让我们看看下面如何创建地图图形。
import plotly.graph_objects as go
fig = go.Figure(go.Scattermapbox(
customdata=text_list,
lat=new_df['latitude'].tolist(),
lon=new_df['longitude'].tolist(),
mode='markers',
marker=go.scattermapbox.Marker(
size=6
),
hoverinfo="text",
hovertemplate='<b>Name</b>: %{customdata[0]}<br><b>Price</b>: $%{customdata[1]}'
))
fig.update_layout(
mapbox_style="open-street-map",
hovermode='closest',
mapbox=dict(
bearing=0,
center=go.layout.mapbox.Center(
lat=40.67,
lon=-73.90
),
pitch=0,
zoom=9
),
)
在上面,我们通过传入纬度和经度列表,在 Mapbox 上创建了一个散点图以绘制标记。我们还传入了包含名称和价格的自定义数据,以便在鼠标悬停在每个标记上时显示额外信息。接下来,我们使用 update_layout
来指定其他地图设置,例如缩放和居中。
有关使用 Mapbox 和 Plotly 绘制散点图的更多信息,请参阅此处。
我们将使用两个 gr.Number
组件和一个 gr.CheckboxGroup
,让用户能够指定价格范围和行政区位置。然后,我们将使用 gr.Plot
组件作为我们之前创建的 Plotly + Mapbox 地图的输出。
with gr.Blocks() as demo:
with gr.Column():
with gr.Row():
min_price = gr.Number(value=250, label="Minimum Price")
max_price = gr.Number(value=1000, label="Maximum Price")
boroughs = gr.CheckboxGroup(choices=["Queens", "Brooklyn", "Manhattan", "Bronx", "Staten Island"], value=["Queens", "Brooklyn"], label="Select Boroughs:")
btn = gr.Button(value="Update Filter")
map = gr.Plot()
demo.load(filter_map, [min_price, max_price, boroughs], map)
btn.click(filter_map, [min_price, max_price, boroughs], map)
我们使用 gr.Column
和 gr.Row
对这些组件进行布局,并会添加事件触发器,以便在演示首次加载以及点击“更新筛选”按钮时,触发地图使用新筛选条件进行更新。
这是完整的演示代码
import gradio as gr
import plotly.graph_objects as go
from datasets import load_dataset
dataset = load_dataset("gradio/NYC-Airbnb-Open-Data", split="train")
df = dataset.to_pandas()
def filter_map(min_price, max_price, boroughs):
filtered_df = df[(df['neighbourhood_group'].isin(boroughs)) &
(df['price'] > min_price) & (df['price'] < max_price)]
names = filtered_df["name"].tolist()
prices = filtered_df["price"].tolist()
text_list = [(names[i], prices[i]) for i in range(0, len(names))]
fig = go.Figure(go.Scattermapbox(
customdata=text_list,
lat=filtered_df['latitude'].tolist(),
lon=filtered_df['longitude'].tolist(),
mode='markers',
marker=go.scattermapbox.Marker(
size=6
),
hoverinfo="text",
hovertemplate='<b>Name</b>: %{customdata[0]}<br><b>Price</b>: $%{customdata[1]}'
))
fig.update_layout(
mapbox_style="open-street-map",
hovermode='closest',
mapbox=dict(
bearing=0,
center=go.layout.mapbox.Center(
lat=40.67,
lon=-73.90
),
pitch=0,
zoom=9
),
)
return fig
with gr.Blocks() as demo:
with gr.Column():
with gr.Row():
min_price = gr.Number(value=250, label="Minimum Price")
max_price = gr.Number(value=1000, label="Maximum Price")
boroughs = gr.CheckboxGroup(choices=["Queens", "Brooklyn", "Manhattan", "Bronx", "Staten Island"], value=["Queens", "Brooklyn"], label="Select Boroughs:")
btn = gr.Button(value="Update Filter")
map = gr.Plot()
demo.load(filter_map, [min_price, max_price, boroughs], map)
btn.click(filter_map, [min_price, max_price, boroughs], map)
demo.launch()
如果您运行上面的代码,您的应用将在本地运行。您甚至可以通过将 share=True
参数传递给 launch
来获取一个临时可共享链接。
但如果您想要一个永久的部署解决方案呢?让我们将 Gradio 应用部署到免费的 HuggingFace Spaces 平台。
如果您以前没有使用过 Spaces,请按照此处的先前指南进行操作。
大功告成!构建地图演示所需的所有代码都在这里了。