【Gradio】表格数据科学与图表-连接到数据库

简介

本指南解释了如何使用 Gradio 将您的应用程序连接到数据库。我们将连接到托管在 AWS 上的 PostgreSQL 数据库，但 gradio 对您连接到的数据库类型及其托管位置完全不可知。因此，只要您能够编写 Python 代码来连接到您的数据，您就可以使用 gradio 在 Web UI 中显示它 💪

概览

我们将分析芝加哥的共享单车数据。数据托管在这里的 kaggle 上。我们的目标是创建一个仪表板，使我们的业务利益相关者能够回答以下问题：

电动自行车比普通自行车更受欢迎吗？
前五大最受欢迎的出发自行车站是哪些？

芝加哥自行车共享仪表板

本演示从托管在 AWS 上的 postgresql 数据库中提取 2022 年 3 月的芝加哥自行车共享数据。本演示使用 psycopg2，但任何 postgresql 客户端库（如 SQLAlchemy）都与 gradio 兼容。

连接凭证由定义在 Space 中的环境变量作为秘密处理。

如果数据库中添加了数据，每当网页重新加载时，本演示中的图表就会更新。

本演示可作为您的数据库连接应用的起点！

第一步 - 创建您的数据库

我们将在亚马逊的 RDS 服务上托管的 PostgreSQL 上存储我们的数据。如果您还没有 AWS 账户，请创建一个，并在免费层上创建一个 PostgreSQL 数据库。

重要提示：如果您计划在 HuggingFace Spaces 上托管此演示，请确保数据库位于 8080 端口。Spaces 将阻止所有出站连接，除非它们是向端口 80、443 或 8080 发出的，如此处所述。RDS 不允许您在端口 80 或 443 上创建 PostgreSQL 实例。

创建数据库后，从 Kaggle 下载数据集并将其上传到您的数据库。为了这个演示，我们只会上传 2022 年 3 月的数据。

第 2.a 步 - 编写您的 ETL 代码

我们将查询我们的数据库，按自行车类型（电动，标准或停靠）分别统计骑行总数。我们还将查询每个站点出发的骑行总数，并取前 5 名。

然后，我们将使用 matplotlib 将我们的查询结果进行可视化。

我们将使用 pandas 的 read_sql 方法连接到数据库。这需要安装 psycopg2 库。

为了连接到我们的数据库，我们将把数据库用户名、密码和主机指定为环境变量。这将通过避免在我们的应用程序文件中以明文存储敏感信息，使我们的应用更加安全。

#导入os，pandas以及matplotlib.pyplot这三个库
import os
import pandas as pd
import matplotlib.pyplot as plt#获取环境变量"DB_USER"、"DB_PASSWORD"和"DB_HOST"的值，分别赋值给变量DB_USER，DB_PASSWORD和DB_HOST
#如果对应的环境变量不存在，这些值将为None
DB_USER = os.getenv("DB_USER")
DB_PASSWORD = os.getenv("DB_PASSWORD")
DB_HOST = os.getenv("DB_HOST")#定义数据库端口号
PORT = 8080#定义数据库名称
DB_NAME = "bikeshare"#根据上述参数构建连接字符串
connection_string = f"postgresql://{DB_USER}:{DB_PASSWORD}@{DB_HOST}?port={PORT}&dbname={DB_NAME}"#定义函数get_count_ride_type，该函数用于获取不同类型的自行车的行程数，并将结果制作成柱状图
def get_count_ride_type():# 使用SQL语句从数据库中提取数据，并将结果转化为pandas dataframedf = pd.read_sql("""-- 计算 ride_id 的数量（代表行程数量），并命名为 n，选择 rideable_typeSELECT COUNT(ride_id) as n, rideable_type-- 从名为 rides 的表中选择数据FROM rides-- 根据 rideable_type 进行分组GROUP BY rideable_type-- 根据 n（行程数量）进行降序排序ORDER BY n DESC""",#连接数据库con=connection_string)#创建一张新的图表fig_m, ax = plt.subplots()#创建柱状图ax.bar(x=df['rideable_type'], height=df['n'])ax.set_title("Number of rides by bycycle type")ax.set_ylabel("Number of Rides")ax.set_xlabel("Bicycle Type")return fig_m# 定义函数get_most_popular_stations，该函数用于获取最受欢迎的5个自行车站点，并将结果制作成柱状图
def get_most_popular_stations():# 使用SQL语句从数据库中提取数据，并将结果转化为pandas dataframedf = pd.read_sql("""-- 选择 ride_id 的计数（表示行程数量）并命名为 n，以及起始站点名称的最大值（由于已经按照 start_station_id 分组，所以同一组内的 start_station_name 应该相同，使用 MAX 函数可以获取到当前组内的站点名称）并命名为 stationSELECT COUNT(ride_id) as n, MAX(start_station_name) as station-- 从名为 RIDES 的表中选择数据FROM RIDES-- 只选择起始站点名称不为 NULL 的数据WHERE start_station_name is NOT NULL-- 根据起始站点编号 start_station_id 分组GROUP BY start_station_id-- 按照 n（行程数量）从大到小排序ORDER BY n DESC-- 仅返回前5条记录LIMIT 5""",#连接数据库con=connection_string)#创建一张新的图表fig_m, ax = plt.subplots()#创建柱状图# 使用matplotlib的bar方法绘制柱状图，df['station']为X轴，df['n']为Y轴ax.bar(x=df['station'], height=df['n'])# 设置图表标题为"Most popular stations"ax.set_title("Most popular stations")# 设置Y轴标签为"Number of Rides"ax.set_ylabel("Number of Rides")# 设置X轴标签为"Station Name"ax.set_xlabel("Station Name")# 设置X轴刻度标签的显示方式，使用df['station']的值作为标签，设置标签旋转角度为45度，靠右对齐，用锚点方式进行旋转ax.set_xticklabels(df['station'], rotation=45, ha="right", rotation_mode="anchor") # 设置X轴的刻度标签字体大小为8ax.tick_params(axis="x", labelsize=8) # 调整子图参数，使子图适应图例，使之填满图像区域fig_m.tight_layout()return fig_m

如果您要在本地运行我们的脚本，您可以像这样将您的凭证作为环境变量传入

DB_USER='username' DB_PASSWORD='password' DB_HOST='host' python app.py

第 2.c 步 - 编写您的 gradio 应用程序

我们将使用 gr.Row() 并排显示两个独立的 gr.Plot 组件来展示或 matplotlib 图表。因为我们已经用 demo.load() 事件触发器包装了获取数据的函数，所以我们的演示将在每次网页加载时动态地从数据库中获取最新数据。🪄

# 导入 gradio 库并简化为 gr
import gradio as gr# 利用 gr.Blocks() 创建一个上下文环境，命名为 demo
with gr.Blocks() as demo:# 在 demo 中创建一个行布局（Row）with gr.Row():# 在创建的行布局中添加两个绘图空间，命名为 bike_type 和 stationbike_type = gr.Plot()station = gr.Plot()# 加载 get_count_ride_type 函数，并设置其输出到 bike_type 绘图空间demo.load(get_count_ride_type, inputs=None, outputs=bike_type)# 加载 get_most_popular_stations 函数，并设置其输出到 station 绘图空间demo.load(get_most_popular_stations, inputs=None, outputs=station)# 启动并呈现用户界面
demo.launch()

第 3 步 - 部署

如果您运行上面的代码，您的应用将开始在本地运行。通过传递 share=True 参数给 launch ，您甚至可以获得一个临时的可分享链接。

但是如果你想要一个永久的部署解决方案呢？让我们将我们的 Gradio 应用部署到免费的 HuggingFace Spaces 平台上。

如果你之前没有使用过 Spaces，请按照这里的前一个指南https://www.gradio.app/guides/using-hugging-face-integrations操作。你将需要添加 DB_USER 、 DB_PASSWORD 和 DB_HOST 变量作为“Repo Secrets”。你可以在“设置”标签中完成此操作。