使用Gradio构建交互式Web应用

这是一个关于如何使用 Gradio 构建 Web 应用程序的开源系列教程。你将从设置 Python 环境开始，学习文本、图像等各类输入组件，自定义界面，设计复杂的交互等。本课程还将涵盖使用 Gradio 和 GDAL 处理遥感数据，用于图像增强、地理坐标转换、坡度分析等任务；学习如何使用 Gradio 和 Foliumap 创建交互式地图，实现动态地理空间数据可视化；如何集成机器学习模型并在 Hugging Face Spaces 上发布 web 应用程序。本教程包括实例、演示和作业。完成本教程后，你将能够高效地构建、部署和共享交互式 Web 应用程序。

课程相关资源链接GITHUB

安装指南

1. 设置虚拟环境

为确保兼容性和隔离依赖项，创建一个名为”gradiotask“或你为这个Gradio教程选择的其他名称的虚拟环境。本教程使用Python 3.10.6构建。我们建议配置3.10或以上版本的Python以获得最佳体验。

创建和激活虚拟环境使用以下命令使用Python 3.10.6创建新环境： bash conda create -n gradiotask python=3.10.6
- 要激活虚拟环境，请使用以下命令：
```
conda activate gradiotask
```
  > 提示： > 记得在安装或运行与本教程相关的任何包之前激活您的虚拟环境（gradiotask）。完成后，你可以运行conda deactivate来停用环境。如果需要，你可以使用命令conda env remove -n gradiotask来移除虚拟环境。

2. Gradio安装

Gradio需要Python 3.8或更高版本。在继续之前，请确保系统上已安装Python。你可以从Python官方网站下载。

我们建议使用Python默认包含的pip安装Gradio。在终端或命令提示符中运行以下命令：

pip install gradio

提示：所有常见操作系统的详细安装说明在此处提供。

3. 安装附加库

为了确保后续的课程能够正常运行并演示，你需要安装以下特定版本的库：

Pillow：版本9.2.0
pandas：版本1.5.0
GDAL：版本3.4.3
numpy：版本1.23.3
geopandas：版本0.11.1
Shapely：版本1.8.4
scikit-learn：版本1.1.2
joblib：版本1.2.0
openai：版本1.16.2
leafmap：版本0.29.1
Gradio：版本4.27.0

提示：要安装这些库，您可以使用pip install命令全部安装，安装GDAL有时可能会因为其大小和依赖项而出现问题。我们建议本地安装GDAL以避免在线安装的潜在问题。这里是适用于Windows和Python 3.10的GDAL 3.4.3安装包。如果您需要其他版本的GDAL，请确保你下载的版本与您的操作系统和Python环境相匹配。

4. DEMO 1-1: 建立你的第一个 Web app

import gradio as gr

def greet(name, intensity): # 定义一个简单的函数，返回一个问候消息
    return "Hello, " + name + "!" * int(intensity)

# 定义Gradio界面，具体如下：
demo = gr.Interface(
    fn=greet,
    inputs=["text", "slider"], # 定义输入为文本和滑动条
    outputs=["text"], # 定义输出为文本
) 

demo.launch() # 在默认的网页浏览器中启动Gradio界面

DEMO 1-2: 显示一个图片

import gradio as gr
from PIL import Image

def to_black(file):
    image = Image.fromarray(file)  # 将numpy数组转换为PIL图像
    # image = Image.open(file)  # 如果输入是文件路径，将其作为PIL图像打开
    # image = file  # 如果输入已经是PIL图像，直接使用它
    img = image.convert("L")  # 转换为灰度图像
    img = img.rotate(180)  # 将图像旋转180度
    return img

demo = gr.Interface(
    fn=to_black,
    inputs=gr.Image(type='numpy'),  # type='pil', 'numpy', 'filepath'
    outputs=gr.Image(type='pil'),
)

demo.launch(share=False)  # 启动Gradio界面，share设置为false

请关注微信公众号【45度科研人】回复“@gradio”获取该教程配套数据，欢迎后台留言！