# Hugging Face Spaces From A Notebook
> A demo of using nbdev with Hugging Face Spaces
## 1. Create a Gradio-enabled Space on Hugging Face
The first step is to create a space and select the appropriate sdk (which is Gradio in this example), per [these instructions](https://huggingface.co/docs/hub/spaces-overview#creating-a-new-space):
![](./create_space.png)
After you are done creating the space, **clone the repo per the instructions provided in the app.** In this example, I ran the command `git clone https://huggingface.co/spaces/hamel/hfspace_demo`.
## 2. Make an app with Gradio
Below, we will create a [gradio](https://gradio.app/) app in a notebook and show you how to deploy it to [Hugging Face Spaces](https://huggingface.co/docs/hub/spaces).
First, lets specify the libraries we need, which in this case are `gradio` and `fastcore`:
```
#|export
import gradio as gr
from fastcore.net import urljson, HTTPError
```
```
#|export
def size(repo:str):
"Returns the size in GB of a HuggingFace Dataset."
url = f'https://huggingface.co/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` take as an input a [Hugging Face Dataset](https://huggingface.co/docs/datasets/index) repo and returns the total size in GB of the data.
For example, we can check the size of [tglcourse/CelebA-faces-cropped-128](https://huggingface.co/datasets/tglcourse/CelebA-faces-cropped-128) like so:
```
size("tglcourse/CelebA-faces-cropped-128")
```
'5.49 GB'
You can construct a simple UI with the `gradio.interface` and then call the `launch` method of that interface to display a preview in a notebook. This is a great way to test your app to see if it works
```
#|export
iface = gr.Interface(fn=size, inputs=gr.Text(value="tglcourse/CelebA-faces-cropped-128"), outputs="text")
iface.launch(width=500)
```
Running on local URL: http://127.0.0.1:7860
To create a public link, set `share=True` in `launch()`.
(, 'http://127.0.0.1:7860/', None)
Note how running the `launch()` method in a notebook runs a webserver in the background. Below, we call the `close()` method to close the webserver.
```
# this is only necessary in a notebook
iface.close()
```
Closing server running on port: 7860
## 3. Converting This Notebook Into A Gradio App
In order to host this code on Hugging Faces spaces, you will export parts of this notebook to a script named `app.py`. That is what the special `#|export` comment that you have seen in cells above do! You can export code from this notebook like so:
```
from nbdev.export import nb_export
nb_export('app.ipynb', lib_path='.', name='app')
```
### Understanding what is generated
Notice how the contents of app.py only contains the exported cells from this notebook:
```
%pycat app.py
```
[0;31m# AUTOGENERATED! DO NOT EDIT! File to edit: app.ipynb.[0m[0;34m[0m
[0;34m[0m[0;34m[0m
[0;34m[0m[0;31m# %% auto 0[0m[0;34m[0m
[0;34m[0m[0m__all__[0m [0;34m=[0m [0;34m[[0m[0;34m'iface'[0m[0;34m,[0m [0;34m'size'[0m[0;34m][0m[0;34m[0m
[0;34m[0m[0;34m[0m
[0;34m[0m[0;31m# %% app.ipynb 7[0m[0;34m[0m
[0;34m[0m[0;32mdef[0m [0msize[0m[0;34m([0m[0mrepo[0m[0;34m:[0m[0mstr[0m[0;34m)[0m[0;34m:[0m[0;34m[0m
[0;34m[0m [0;34m"Returns the size in GB of a HuggingFace Dataset."[0m[0;34m[0m
[0;34m[0m [0murl[0m [0;34m=[0m [0;34mf'https://huggingface.co/api/datasets/{repo}'[0m[0;34m[0m
[0;34m[0m [0;32mtry[0m[0;34m:[0m [0mresp[0m [0;34m=[0m [0murljson[0m[0;34m([0m[0;34mf'{url}/treesize/main'[0m[0;34m)[0m[0;34m[0m
[0;34m[0m [0;32mexcept[0m [0mHTTPError[0m[0;34m:[0m [0;32mreturn[0m [0;34mf'Did not find repo: {url}'[0m[0;34m[0m
[0;34m[0m [0mgb[0m [0;34m=[0m [0mresp[0m[0;34m[[0m[0;34m'size'[0m[0;34m][0m [0;34m/[0m [0;36m1e9[0m[0;34m[0m
[0;34m[0m [0;32mreturn[0m [0;34mf'{gb:.2f} GB'[0m[0;34m[0m
[0;34m[0m[0;34m[0m
[0;34m[0m[0;31m# %% app.ipynb 11[0m[0;34m[0m
[0;34m[0m[0miface[0m [0;34m=[0m [0mgr[0m[0;34m.[0m[0mInterface[0m[0;34m([0m[0mfn[0m[0;34m=[0m[0msize[0m[0;34m,[0m [0minputs[0m[0;34m=[0m[0mgr[0m[0;34m.[0m[0mText[0m[0;34m([0m[0mvalue[0m[0;34m=[0m[0;34m"tglcourse/CelebA-faces-cropped-128"[0m[0;34m)[0m[0;34m,[0m [0moutputs[0m[0;34m=[0m[0;34m"text"[0m[0;34m)[0m[0;34m[0m
[0;34m[0m[0miface[0m[0;34m.[0m[0mlaunch[0m[0;34m([0m[0mwidth[0m[0;34m=[0m[0;36m500[0m[0;34m)[0m[0;34m[0m[0;34m[0m[0m
### Fill out `requirements.txt`
You must supply a requirements.txt file so the gradio app knows how to build your dependencies. In this example, the only depdency other than gradio is `fastcore`. You don't need to specify gradio itself as a depdendency in `requirements.txt` so our `requirements.txt` file has only one dependency:
```
!cat requirements.txt
```
fastcore
## 4. Launch Your Gradio App
To launch your gradio app, you need to commit the changes in the Hugging Face repo:
```
git add -A; git commit -m "Add application files"; git push
```
## 5. VoilĂ ! Enjoy your Gradio App
After a couple of minutes, you will see your app published!
```
```