---
title: Foo
emoji: 🐢
colorFrom: indigo
colorTo: yellow
sdk: gradio
sdk_version: 3.9
app_file: app.py
pinned: false
license: mit
---

<!-- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference --># Hugging Face Spaces From A Notebook

> A demo of using nbdev with Hugging Face Spaces & Gradio

## 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):

![image.png](attachment:1c1bca70-f280-4b30-aa73-247dee97bfdc.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
```

Next, write the functions your gradio app will use.  Because of [nbdev](https://nbdev.fast.ai/blog/posts/2022-07-28-nbdev2/), you can prototype and package your code all in one place.  **The special comment `#|export` marks which cells will be sent to a python script** (more on this later). Note that there are only three cells in this notebook with the `#|export` directive.


```
#|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()`.



<div><iframe src="http://127.0.0.1:7860/" width="500" height="500" allow="autoplay; camera; microphone; clipboard-read; clipboard-write;" frameborder="0" allowfullscreen></iframe></div>





    (<gradio.routes.App>, '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`.  As a reminder, this 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')
```

<div>
<link rel="stylesheet" href="https://gradio.s3-us-west-2.amazonaws.com/2.6.5/static/bundle.css">
<div id="target"></div>
<script src="https://gradio.s3-us-west-2.amazonaws.com/2.6.5/static/bundle.js"></script>
<script>
launchGradioFromSpaces("abidlabs/question-answering", "#target")
</script>
</div>

### Understanding what is generated

Notice how the contents of app.py only contains the exported cells from this notebook:


```
%pycat 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 7
    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'
    
    # %% app.ipynb 11
    iface = gr.Interface(fn=size, inputs=gr.Text(value="tglcourse/CelebA-faces-cropped-128"), outputs="text")
    iface.launch(width=500)



### 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 dependency other than Gradio is `fastcore`.  You don't need to specify Gradio itself as a dependency 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 to 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!  This app is published at https://huggingface.co/spaces/hamel/hfspace_demo.

# Shameless Plug: [nbdev](https://nbdev.fast.ai/blog/posts/2022-07-28-nbdev2/)

Hopefully you felt something magical while doing this example.  Even though the target application required you to write a python script (`app.py`), you didn't have to refactor your script from a notebook!  We believe that you shouldn't have to refactor your code and switch contexts even when creating python packages!  If this intrigues you, check out [nbdev](https://nbdev.fast.ai/blog/posts/2022-07-28-nbdev2/)


```

```