Add application files

README.md

@@ -14,20 +14,38 @@ license: mit
 
 > A demo of using nbdev with Hugging Face Spaces & Gradio
 
-[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.  Gradio allows you to prototype your web apps in notebooks, which allow you to iterate really fast.  However, Hugging Face Spaces requires you to package your web application code as a python script named `app.py`.  **In the below tutorial, we show you how you can use `nbdev` to auto-generate this app directly from a notebook, so you don't have to waste time refactoring code!**
+![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.  Gradio allows you to prototype your web apps in notebooks which allow you to iterate fast.  However, 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:
+
+[![<a href="https://huggingface.co/spaces/hamel/hfspace_demo">A Gradio app</a> that shows the size of a HF Dataset.](final_app.png)](https://huggingface.co/spaces/hamel/hfspace_demo)
+
+_The above app allows you to lookup the size, in GB of any [Hugging Face Dataset](https://huggingface.co/docs/datasets/index), using the [Hugging Face Datasets Server API](https://huggingface.co/docs/datasets-server/index)._
+
+
+Authoring your spaces in notebooks offers a number of benefits such as the ability to:
+
+- Document your code (with `quarto` or `nbdev`)
+- Prototype and author your code (with `nbdev.export.export_nb`)
+- Test your code (with `nbdev_test`)
+
+... All from the same environment!
 
 ## 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):
+The first step is to create a space and select the appropriate sdk (which is Gradio in this example), according to [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`.
+After you are done creating the space, clone the repo locally.  In this example, I ran the command `git clone https://huggingface.co/spaces/hamel/hfspace_demo`.
 
 
 ## 2. Create A Notebook
 
-To follow along, create a notebook called `app.ipynb` in the root of your newly cloned repo.  You can write code as described below in your notebook. Alternatively, a minimal version of this notebook can also be [found here](https://gist.github.com/hamelsmu/35be07d242f3f19063c3a3839127dc67).
+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).
 
 ## 3. Make an app with Gradio
 
@@ -56,9 +74,9 @@ def size(repo:str):
     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.
+`size` takes 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:
+For example, I can check the size of [tglcourse/CelebA-faces-cropped-128](https://huggingface.co/datasets/tglcourse/CelebA-faces-cropped-128) like so:
 
 
 ```
@@ -108,9 +126,10 @@ iface.close()
     Closing server running on port: 7861
 
 
+
 ## 4. Convert 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:
+In order to host this code on Hugging Face 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:
 
 
 ```
@@ -158,10 +177,12 @@ You must supply a requirements.txt file so the Gradio app knows how to build you
 
 
 ```
-!cat requirements.txt
+%%writefile requirements.txt
+fastcore
 ```
 
-    fastcore
+    Writing requirements.txt
+
 
 _Note: you may want to add operating system dependencies in addition to python dependencies.  You can do this via a `packages.txt` file as [documented here](https://huggingface.co/docs/hub/spaces-dependencies#adding-your-own-dependencies)._
 
@@ -175,17 +196,7 @@ git add -A; git commit -m "Add application files"; git push
 
 # 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, , which is also embedded below:
-
-
-<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("hamel/hfspace_demo", "#target")
-</script>
-</div>
+After a couple of minutes, you will see your app published!  This app is published [here](https://huggingface.co/spaces/hamel/hfspace_demo).
 
 # Shameless Plug: [nbdev](https://nbdev.fast.ai/blog/posts/2022-07-28-nbdev2/)
 

app.ipynb

@@ -9,7 +9,25 @@
     "\n",
     "> A demo of using nbdev with Hugging Face Spaces & Gradio\n",
     "\n",
-    "[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.  Gradio allows you to prototype your web apps in notebooks, which allow you to iterate really fast.  However, Hugging Face Spaces requires you to package your web application code as a python script named `app.py`.  **In the below tutorial, we show you how you can use `nbdev` to auto-generate this app directly from a notebook, so you don't have to waste time refactoring code!**"
+    "![Image created with Stable Diffusion from [this space](https://huggingface.co/spaces/stabilityai/stable-diffusion)](blog_cover.jpeg)\n",
+    "\n",
+    "[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.  Gradio allows you to prototype your web apps in notebooks which allow you to iterate fast.  However, Hugging Face Spaces requires you to package your web application code as a python script named `app.py`.  \n",
+    "\n",
+    "\n",
+    "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:\n",
+    "\n",
+    "[![<a href=\"https://huggingface.co/spaces/hamel/hfspace_demo\">A Gradio app</a> that shows the size of a HF Dataset.](final_app.png)](https://huggingface.co/spaces/hamel/hfspace_demo)\n",
+    "\n",
+    "_The above app allows you to lookup the size, in GB of any [Hugging Face Dataset](https://huggingface.co/docs/datasets/index), using the [Hugging Face Datasets Server API](https://huggingface.co/docs/datasets-server/index)._\n",
+    "\n",
+    "\n",
+    "Authoring your spaces in notebooks offers a number of benefits such as the ability to:\n",
+    "\n",
+    "- Document your code (with `quarto` or `nbdev`)\n",
+    "- Prototype and author your code (with `nbdev.export.export_nb`)\n",
+    "- Test your code (with `nbdev_test`)\n",
+    "\n",
+    "... All from the same environment!"
    ]
   },
   {
@@ -19,7 +37,7 @@
    "source": [
     "## 1. Create a Gradio-enabled Space on Hugging Face\n",
     "\n",
-    "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):"
+    "The first step is to create a space and select the appropriate sdk (which is Gradio in this example), according to [these instructions](https://huggingface.co/docs/hub/spaces-overview#creating-a-new-space):"
    ]
   },
   {
@@ -40,12 +58,12 @@
    "id": "c25e8e7a-52d9-4305-a107-ba03e3d6a5f3",
    "metadata": {},
    "source": [
-    "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`.\n",
+    "After you are done creating the space, clone the repo locally.  In this example, I ran the command `git clone https://huggingface.co/spaces/hamel/hfspace_demo`.\n",
     "\n",
     "\n",
     "## 2. Create A Notebook\n",
     "\n",
-    "To follow along, create a notebook called `app.ipynb` in the root of your newly cloned repo.  You can write code as described below in your notebook. Alternatively, a minimal version of this notebook can also be [found here](https://gist.github.com/hamelsmu/35be07d242f3f19063c3a3839127dc67)."
+    "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)."
    ]
   },
   {
@@ -108,9 +126,9 @@
    "id": "9ff9f84d-7744-46ad-80ed-2cf1fa6d0643",
    "metadata": {},
    "source": [
-    "`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.\n",
+    "`size` takes as an input a [Hugging Face Dataset](https://huggingface.co/docs/datasets/index) repo and returns the total size in GB of the data.\n",
     "\n",
-    "For example, we can check the size of [tglcourse/CelebA-faces-cropped-128](https://huggingface.co/datasets/tglcourse/CelebA-faces-cropped-128) like so:"
+    "For example, I can check the size of [tglcourse/CelebA-faces-cropped-128](https://huggingface.co/datasets/tglcourse/CelebA-faces-cropped-128) like so:"
    ]
   },
   {
@@ -215,18 +233,13 @@
   },
   {
    "cell_type": "markdown",
-   "id": "249b2cd7-3123-45bf-945f-882b8a964cf5",
+   "id": "7c1c7adc-4c3f-41dc-8cfa-1c3b241f529f",
    "metadata": {},
    "source": [
-    "## 4. Convert This Notebook Into A Gradio App"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "id": "5c18ca6e-8de8-49e1-b95a-304070bbc171",
-   "metadata": {},
-   "source": [
-    "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:"
+    "\n",
+    "## 4. Convert This Notebook Into A Gradio App\n",
+    "\n",
+    "In order to host this code on Hugging Face 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:"
    ]
   },
   {
@@ -316,12 +329,13 @@
      "name": "stdout",
      "output_type": "stream",
      "text": [
-      "fastcore"
+      "Writing requirements.txt\n"
      ]
     }
    ],
    "source": [
-    "!cat requirements.txt"
+    "%%writefile requirements.txt\n",
+    "fastcore"
    ]
   },
   {
@@ -353,17 +367,7 @@
    "id": "9b20ff94-6842-4078-9ec1-be740944e721",
    "metadata": {},
    "source": [
-    "After a couple of minutes, you will see your app published!  This app is published at https://huggingface.co/spaces/hamel/hfspace_demo, , which is also embedded below:\n",
-    "\n",
-    "\n",
-    "<div>\n",
-    "<link rel=\"stylesheet\" href=\"https://gradio.s3-us-west-2.amazonaws.com/2.6.5/static/bundle.css\">\n",
-    "<div id=\"target\"></div>\n",
-    "<script src=\"https://gradio.s3-us-west-2.amazonaws.com/2.6.5/static/bundle.js\"></script>\n",
-    "<script>\n",
-    "launchGradioFromSpaces(\"hamel/hfspace_demo\", \"#target\")\n",
-    "</script>\n",
-    "</div>"
+    "After a couple of minutes, you will see your app published!  This app is published [here](https://huggingface.co/spaces/hamel/hfspace_demo)."
    ]
   },
   {

app.md

@@ -2,20 +2,38 @@
 
 > A demo of using nbdev with Hugging Face Spaces & Gradio
 
-[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.  Gradio allows you to prototype your web apps in notebooks, which allow you to iterate really fast.  However, Hugging Face Spaces requires you to package your web application code as a python script named `app.py`.  **In the below tutorial, we show you how you can use `nbdev` to auto-generate this app directly from a notebook, so you don't have to waste time refactoring code!**
+![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.  Gradio allows you to prototype your web apps in notebooks which allow you to iterate fast.  However, 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:
+
+[![<a href="https://huggingface.co/spaces/hamel/hfspace_demo">A Gradio app</a> that shows the size of a HF Dataset.](final_app.png)](https://huggingface.co/spaces/hamel/hfspace_demo)
+
+_The above app allows you to lookup the size, in GB of any [Hugging Face Dataset](https://huggingface.co/docs/datasets/index), using the [Hugging Face Datasets Server API](https://huggingface.co/docs/datasets-server/index)._
+
+
+Authoring your spaces in notebooks offers a number of benefits such as the ability to:
+
+- Document your code (with `quarto` or `nbdev`)
+- Prototype and author your code (with `nbdev.export.export_nb`)
+- Test your code (with `nbdev_test`)
+
+... All from the same environment!
 
 ## 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):
+The first step is to create a space and select the appropriate sdk (which is Gradio in this example), according to [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`.
+After you are done creating the space, clone the repo locally.  In this example, I ran the command `git clone https://huggingface.co/spaces/hamel/hfspace_demo`.
 
 
 ## 2. Create A Notebook
 
-To follow along, create a notebook called `app.ipynb` in the root of your newly cloned repo.  You can write code as described below in your notebook. Alternatively, a minimal version of this notebook can also be [found here](https://gist.github.com/hamelsmu/35be07d242f3f19063c3a3839127dc67).
+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).
 
 ## 3. Make an app with Gradio
 
@@ -44,9 +62,9 @@ def size(repo:str):
     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.
+`size` takes 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:
+For example, I can check the size of [tglcourse/CelebA-faces-cropped-128](https://huggingface.co/datasets/tglcourse/CelebA-faces-cropped-128) like so:
 
 
 ```
@@ -96,9 +114,10 @@ iface.close()
     Closing server running on port: 7861
 
 
+
 ## 4. Convert 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:
+In order to host this code on Hugging Face 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:
 
 
 ```
@@ -146,10 +165,12 @@ You must supply a requirements.txt file so the Gradio app knows how to build you
 
 
 ```
-!cat requirements.txt
+%%writefile requirements.txt
+fastcore
 ```
 
-    fastcore
+    Writing requirements.txt
+
 
 _Note: you may want to add operating system dependencies in addition to python dependencies.  You can do this via a `packages.txt` file as [documented here](https://huggingface.co/docs/hub/spaces-dependencies#adding-your-own-dependencies)._
 
@@ -163,17 +184,7 @@ git add -A; git commit -m "Add application files"; git push
 
 # 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, , which is also embedded below:
-
-
-<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("hamel/hfspace_demo", "#target")
-</script>
-</div>
+After a couple of minutes, you will see your app published!  This app is published [here](https://huggingface.co/spaces/hamel/hfspace_demo).
 
 # Shameless Plug: [nbdev](https://nbdev.fast.ai/blog/posts/2022-07-28-nbdev2/)
 

requirements.txt

@@ -1 +1 @@
-fastcore
+fastcore