Skip to content

fix blog nits #1216

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Nov 8, 2022
Merged

fix blog nits #1216

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
df7e3d8
fix nits
hamelsmu Nov 8, 2022
8504e44
fix conflicts
hamelsmu Nov 8, 2022
3438df6
Update index.qmd
hamelsmu Nov 8, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 25 additions & 8 deletions nbs/blog/posts/2022-11-07-spaces/index.qmd
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ skip_showdoc: true
![Image created with Stable Diffusion from [this space](https://huggingface.co/spaces/stabilityai/stable-diffusion)](blog_cover.jpeg)


[Hugging Face Spaces](https://huggingface.co/spaces/launch) provides an easy ways to deploy a web app with python. [Gradio](https://gradio.app/) is one of my favorite tools for building these web apps. For example, the cover-image for this blog post was generated with a [Gradio App](https://huggingface.co/spaces/stabilityai/stable-diffusion)![^1] Gradio also allows you to prototype your web apps in notebooks, which allow you to iterate fast. Unfortunately, Hugging Face Spaces requires you to package your web application code as a python script named `app.py`.
[Hugging Face Spaces](https://huggingface.co/spaces/launch) provides an easy ways to deploy a web app with python. [Gradio](https://gradio.app/) is one of my favorite tools for building these web apps. For example, the cover-image for this blog post was generated with a [Gradio App](https://huggingface.co/spaces/stabilityai/stable-diffusion)![^1] Gradio also allows you to prototype your web apps in notebooks which allows you to iterate fast. Unfortunately, Hugging Face Spaces requires you to package your web application code as a python script named `app.py`.

However, **thanks to [nbdev](https://nbdev.fast.ai), you can deploy a Gradio app to Spaces from a notebook without having to refactor your code into a script!** When you finish this tutorial, you will have an app that looks like this:

Expand Down Expand Up @@ -41,7 +41,21 @@ After you are done creating the space, clone the repo locally. In this example,

## 2. Create A Notebook

To follow along, create a notebook called `app.ipynb` in the root of your newly cloned repo. Alternatively, a minimal version of this notebook can also be [found here](https://gist.github.com/hamelsmu/35be07d242f3f19063c3a3839127dc67).
Before getting started you will want to install the dependencies for this tutorial:

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

Create a notebook called `app.ipynb` in the root of your newly cloned repo. Alternatively, download [the notebook](https://gist.github.com/hamelsmu/35be07d242f3f19063c3a3839127dc67) and follow along.

:::{.callout-tip}

### Download the notebook and follow along

This blog post is a verbose version of the "notebook" you can use to create a Gradio app. However, it can be useful to see just the code without any of the prose. A [concise version of this notebook is here](https://gist.github.com/hamelsmu/35be07d242f3f19063c3a3839127dc67). I recommend taking a look at this notebook during or after you read this blog post.

:::

## 3. Make an app with Gradio

Expand Down Expand Up @@ -78,12 +92,11 @@ For example, I can check the size of [tglcourse/CelebA-faces-cropped-128](https:
```python
size("tglcourse/CelebA-faces-cropped-128")
```



:::{.cell-output}

'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:
Expand All @@ -95,7 +108,7 @@ iface = gr.Interface(fn=size, inputs=gr.Text(value="tglcourse/CelebA-faces-cropp
iface.launch(height=450, width=500)
```


:::{.cell-output}
Running on local URL: http://127.0.0.1:7861

To create a public link, set `share=True` in `launch()`.
Expand All @@ -106,7 +119,8 @@ iface.launch(height=450, width=500)
```

![](gradio_local.png)


:::

Note how running the `launch()` method in a notebook runs a webserver in the background. Below, I call the `close()` method to close the webserver.

Expand All @@ -116,8 +130,11 @@ Note how running the `launch()` method in a notebook runs a webserver in the bac
iface.close()
```

:::{.cell-output}

Closing server running on port: 7861

:::

## 4. Convert This Notebook Into A Gradio App

Expand Down Expand Up @@ -189,7 +206,7 @@ _Note: you may want to add operating system dependencies in addition to python d

To launch your gradio app, you need to commit the changes to the Hugging Face repo:

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

Expand Down