从笔记本创建 🤗 Space

nbdev 结合 Hugging Face Spaces 和 Gradio 的演示。

作者

Hamel Husain

发布日期

2022 年 11 月 7 日

Hugging Face Spaces 提供了一种使用 python 部署 Web 应用的简单方法。Gradio 是我构建这些 Web 应用最喜欢的工具之一。例如，本博客文章的封面图像就是使用一个 Gradio 应用生成的！¹ Gradio 还允许您在 notebook 中原型化您的 Web 应用，这让您能够快速迭代。不幸的是，Hugging Face Spaces 要求您将 Web 应用代码打包成一个名为 app.py 的 python 脚本。

然而，**多亏了 nbdev，您可以直接从 notebook 将 Gradio 应用部署到 Spaces，而无需将代码重构为脚本！** 当您完成本教程后，您将拥有一个看起来像这样的应用

A Gradio app that shows the size of a HF Dataset. — 一个 Gradio 应用，显示 HF 数据集的大小。

上述应用允许您使用 Hugging Face 数据集服务器 API 查找任何 Hugging Face 数据集的大小。

在 notebook 中编写您的 spaces 提供了许多好处，例如能够

文档化您的代码（使用 quarto 或 nbdev）
原型化和编写您的代码（使用 nbdev.export.export_nb）
测试您的代码（使用 nbdev_test）

…… 所有这些都在同一个环境中完成！

1. 在 Hugging Face 上创建一个启用 Gradio 的 Space

第一步是创建一个 space 并选择合适的 sdk（在此示例中是 Gradio），按照这些说明进行操作

创建完 space 后，在本地克隆仓库。在本例中，我运行了命令 git clone https://hugging-face.cn/spaces/hamel/hfspace_demo。

2. 创建一个 Notebook

开始之前，您需要安装本教程的依赖项

!pip install git+https://github.com/fastai/nbdev.git gradio fastcore

在您新克隆的仓库根目录中创建一个名为 app.ipynb 的 notebook。或者，下载该 notebook 并跟着操作。

下载 notebook 并跟着操作

这篇博客文章是可用于创建 Gradio 应用的“notebook”的详细版本。然而，只看代码而不看文字有时也很有用。此 notebook 的简洁版本在此处。我建议您在阅读本博客文章期间或之后查看此 notebook。

3. 使用 Gradio 制作一个应用

下面，我将在 notebook 中创建一个 gradio 应用，并向您展示如何将其部署到 Hugging Face Spaces。

首先，让我们导入所需的库，在此示例中是 gradio 和 fastcore

#|export
import gradio as gr
from fastcore.net import urljson, HTTPError

接下来，编写您的 gradio 应用将使用的函数。得益于 nbdev，您可以在同一个地方进行代码原型设计和打包。**特殊注释 #|export 标记了哪些单元格将发送到 python 脚本**（稍后会详细介绍）。请注意，此 notebook 中只有三个单元格带有 #|export 指令。

#|export
def size(repo:str):
    "Returns the size in GB of a HuggingFace Dataset."
    url = f'https://hugging-face.cn/api/datasets/{repo}'
    try: resp = urljson(f'{url}/treesize/main')
    except HTTPError: return f'Did not find repo: {url}'
    gb = resp['size'] / 1e9
    return f'{gb:.2f} GB'

size 将 Hugging Face Dataset 仓库作为输入，并返回数据的总大小（以 GB 为单位）。

例如，我可以像这样检查 tglcourse/CelebA-faces-cropped-128 的大小

size("tglcourse/CelebA-faces-cropped-128")

'5.49 GB'

您可以使用 gradio.interface 构建一个简单的 UI，然后调用该界面的 launch 方法在 notebook 中显示预览。这是测试您的应用是否正常工作的好方法

#|export
iface = gr.Interface(fn=size, inputs=gr.Text(value="tglcourse/CelebA-faces-cropped-128"), outputs="text")
iface.launch(height=450, width=500)

Running on local URL:  http://127.0.0.1:7861

To create a public link, set `share=True` in `launch()`.

注意，在 notebook 中运行 launch() 方法会在后台运行一个 web 服务器。下面，我调用 close() 方法来关闭 web 服务器。

# this is only necessary in a notebook
iface.close()

Closing server running on port: 7861

4. 将此 Notebook 转换为 Gradio 应用

为了将此代码托管在 Hugging Face Spaces 上，您需要将此 notebook 的部分内容导出到一个名为 app.py 的脚本中。提醒一下，这就是您在上面单元格中看到的特殊注释 #|export 的作用！您可以像这样从这个 notebook 中导出代码

from nbdev.export import nb_export
nb_export('app.ipynb', lib_path='.', name='app')

理解生成的内容

注意 app.py 的内容只包含从该 notebook 导出的单元格

!cat app.py

# AUTOGENERATED! DO NOT EDIT! File to edit: app.ipynb.

# %% auto 0
__all__ = ['iface', 'size']

# %% app.ipynb 6
import gradio as gr
from fastcore.net import urljson, HTTPError

# %% app.ipynb 8
def size(repo:str):
    "Returns the size in GB of a HuggingFace Dataset."
    url = f'https://hugging-face.cn/api/datasets/{repo}'
    try: resp = urljson(f'{url}/treesize/main')
    except HTTPError: return f'Did not find repo: {url}'
    gb = resp['size'] / 1e9
    return f'{gb:.2f} GB'

# %% app.ipynb 12
iface = gr.Interface(fn=size, inputs=gr.Text(value="tglcourse/CelebA-faces-cropped-128"), outputs="text")
iface.launch(height=450, width=500)

填写 `requirements.txt`

您必须提供一个 requirements.txt 文件，以便 Gradio 应用知道如何构建您的依赖项。在此示例中，除了 Gradio 之外的唯一依赖项是 fastcore。您无需在 requirements.txt 中将 Gradio 本身指定为依赖项，因此我们的 requirements.txt 文件只有一个依赖项

%%writefile requirements.txt
fastcore

Writing requirements.txt

注意：除了 python 依赖项之外，您可能还需要添加操作系统依赖项。您可以按照此处文档的说明，通过 packages.txt 文件来实现这一点。

5. 启动您的 Gradio 应用

要启动您的 gradio 应用，您需要将更改提交到 Hugging Face 仓库

git add -A; git commit -m "Add application files"; git push

Voilà! 享受您的 Gradio 应用

几分钟后，您将看到您的应用已发布！该应用发布在此处。

自我推销：nbdev

希望您在执行此示例时感受到了一些神奇之处。尽管目标应用要求您编写一个 python 脚本（app.py），但您无需从 notebook 重构您的脚本！我相信即使在创建 python 包时，您也不应该需要重构代码和切换上下文！如果您对此感兴趣，请查看 nbdev

脚注

生成封面图像的提示词是：“一个数据科学家在一座未来城市的电脑旁，夜空中可见木星，ArtStation 热门，高细节，科幻”↩︎