Add application files

MANIFEST.in

@@ -1,5 +0,0 @@
-include settings.ini
-include LICENSE
-include CONTRIBUTING.md
-include README.md
-recursive-exclude * __pycache__

README.md

@@ -1,27 +1,188 @@
-nbdev-spaces-demo
-================
+---
+title: Foo
+emoji: 🐢
+colorFrom: indigo
+colorTo: yellow
+sdk: gradio
+sdk_version: 3.9
+app_file: app.py
+pinned: false
+license: mit
+---
 
-<!-- WARNING: THIS FILE WAS AUTOGENERATED! DO NOT EDIT! -->
+<!-- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference --># Hugging Face Spaces From A Notebook
 
-This is a toy python library that lets you obtain the size of any
-Hugging Face dataset. For example, we can check the size of
-[tglcourse/CelebA-faces-cropped-128](https://huggingface.co/datasets/tglcourse/CelebA-faces-cropped-128)
-like so:
+> A demo of using nbdev with Hugging Face Spaces
 
-``` python
-from nbdev_spaces_demo import hfsize 
-hfsize("tglcourse/CelebA-faces-cropped-128")
+## 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 app
+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'
 
-We deploy this function using Gradio and Hugging Face spaces.
 
-## Using nbdev with Gradio
 
-Gradio and Hugging Face spaces is one of the easiest way to create and
-host apps. Gradio also allows you to prototype these apps in notebooks,
-which is excellent!
+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
 
-We show you step-by-step instructions on how to deploy a Hugging Face
-gradio app from a notebook in this example.
+
+## 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')
+```
+
+<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 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 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!  
+
+
+```
+# this is only for hamel, you can ignore this.
+!jupyter nbconvert --to markdown app.ipynb 
+!cat yaml.md app.md > README.md 
+```
+
+    [NbConvertApp] Converting notebook app.ipynb to markdown
+    [NbConvertApp] Writing 6113 bytes to app.md
+
+
+
+```
+
+```

app.ipynb

@@ -5,21 +5,9 @@
    "id": "8c68f03e-620c-46a9-a7ec-a6cde27043cd",
    "metadata": {},
    "source": [
-    "# Hugging Face Spaces\n",
+    "# Hugging Face Spaces From A Notebook\n",
     "\n",
-    "> A demo of using nbdev with Hugging Face Spaces\n",
-    "\n",
-    "Hugging Face spaces require that your python script is named `app.py`, so your first cell should be this, which will make sure code is exported to a file named `app.py`:"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "id": "c3463e8e-454a-48b8-ae21-8308703d2275",
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "#|default_exp app"
+    "> A demo of using nbdev with Hugging Face Spaces"
    ]
   },
   {
@@ -27,7 +15,7 @@
    "id": "96483373-4ae1-49b2-85ed-ceee8456df19",
    "metadata": {},
    "source": [
-    "# Create a Gradio-enabled Space on Hugging Face\n",
+    "## 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):"
    ]
@@ -45,7 +33,7 @@
    "id": "c25e8e7a-52d9-4305-a107-ba03e3d6a5f3",
    "metadata": {},
    "source": [
-    "After you are done creating the space, **clone the repo to the root of your nbdev project.**  In this example, I ran the command `git clone https://huggingface.co/spaces/hamel/hfspace_demo` from the root of this repository."
+    "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`."
    ]
   },
   {
@@ -53,7 +41,7 @@
    "id": "ff26114c-329b-4a97-98b5-c652554b0114",
    "metadata": {},
    "source": [
-    "## Make an app with Gradio"
+    "## 2. Make an app with Gradio"
    ]
   },
   {
@@ -61,9 +49,9 @@
    "id": "14a884fc-36e2-43ec-8e42-ca2903aaa4de",
    "metadata": {},
    "source": [
-    "Below, we will create a [gradio](https://gradio.app/) in a notebook and show you how to deploy it to [Hugging Face Spaces](https://huggingface.co/docs/hub/spaces).\n",
+    "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).\n",
     "\n",
-    "First, lets specify the libraries we need, which in this case are gradio, and the nbdev project which in this case is `nbdev_spaces_demo`:"
+    "First, lets specify the libraries we need, which in this case are `gradio` and `fastcore`:"
    ]
   },
   {
@@ -73,9 +61,26 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "#|export\n",
+    "#|export app\n",
     "import gradio as gr\n",
-    "from nbdev_spaces_demo import hfsize "
+    "from fastcore.net import urljson, HTTPError"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "38a4389f-ef53-4626-a6f5-a859354f854b",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "#|export\n",
+    "def size(repo:str):\n",
+    "    \"Returns the size in GB of a HuggingFace Dataset.\"\n",
+    "    url = f'https://huggingface.co/api/datasets/{repo}'\n",
+    "    try: resp = urljson(f'{url}/treesize/main')\n",
+    "    except HTTPError: return f'Did not find repo: {url}'\n",
+    "    gb = resp['size'] / 1e9\n",
+    "    return f'{gb:.2f} GB'"
    ]
   },
   {
@@ -83,7 +88,9 @@
    "id": "9ff9f84d-7744-46ad-80ed-2cf1fa6d0643",
    "metadata": {},
    "source": [
-    "As a reminder, `hfsize` can be used to check the size of a Hugging Face Dataset. 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` 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",
+    "\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:"
    ]
   },
   {
@@ -104,7 +111,7 @@
     }
    ],
    "source": [
-    "hfsize(\"tglcourse/CelebA-faces-cropped-128\")"
+    "size(\"tglcourse/CelebA-faces-cropped-128\")"
    ]
   },
   {
@@ -155,7 +162,7 @@
    ],
    "source": [
     "#|export\n",
-    "iface = gr.Interface(fn=hfsize, inputs=gr.Text(value=\"tglcourse/CelebA-faces-cropped-128\"), outputs=\"text\")\n",
+    "iface = gr.Interface(fn=size, inputs=gr.Text(value=\"tglcourse/CelebA-faces-cropped-128\"), outputs=\"text\")\n",
     "iface.launch(width=500)"
    ]
   },
@@ -191,7 +198,7 @@
    "id": "249b2cd7-3123-45bf-945f-882b8a964cf5",
    "metadata": {},
    "source": [
-    "## Converting This Notebook Into A Gradio App"
+    "## 3. Converting This Notebook Into A Gradio App"
    ]
   },
   {
@@ -199,18 +206,7 @@
    "id": "5c18ca6e-8de8-49e1-b95a-304070bbc171",
    "metadata": {},
    "source": [
-    "In order to host this code on Hugging Faces spaces, we need to do the following:\n",
-    "\n",
-    "1. Export parts of this notebook to a script named `app.py`\n",
-    "2. Create a `requirements.txt` file specifying all the dependencies of the gradio app which is inferred from `settings.ini`"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "id": "1971847f-8d70-429b-8dd2-292d3e329266",
-   "metadata": {},
-   "source": [
-    "We can achieve this with the below code, note how we are exporting the code to the `hfspace_demo/` directory, which is the repo we cloned in the first step."
+    "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:"
    ]
   },
   {
@@ -221,30 +217,7 @@
    "outputs": [],
    "source": [
     "from nbdev.export import nb_export\n",
-    "from nbdev.release import write_requirements\n",
-    "\n",
-    "app_dir = 'hfspace_demo/'\n",
-    "nb_export('app.ipynb', app_dir)\n",
-    "write_requirements(app_dir)"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "id": "662a58d6-a907-4a7f-962e-35859687a1e4",
-   "metadata": {},
-   "source": [
-    "We can vendor in our python library generated with nbdev (named `nbdev_spaces_demo`) into the directory as well like so:"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "id": "128b042e-7a8a-4485-94af-46e7efee8557",
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "from nbdev.config import get_config\n",
-    "!cp -r {str(get_config().lib_path)} {app_dir}"
+    "nb_export('app.ipynb', lib_path='.', name='app')"
    ]
   },
   {
@@ -270,32 +243,6 @@
     "### Understanding what is generated"
    ]
   },
-  {
-   "cell_type": "markdown",
-   "id": "f0b783f0-cd5a-4092-b19c-8d05a978ce3c",
-   "metadata": {},
-   "source": [
-    "The contents of the hfspace_demo/ folder will contain these assets:"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "id": "a8d6b05f-1d17-4000-b82a-7fd4eb3092c5",
-   "metadata": {},
-   "outputs": [
-    {
-     "name": "stdout",
-     "output_type": "stream",
-     "text": [
-      "README.md         app.py            \u001b[1m\u001b[36mnbdev_spaces_demo\u001b[m\u001b[m requirements.txt\n"
-     ]
-    }
-   ],
-   "source": [
-    "!ls hfspace_demo/"
-   ]
-  },
   {
    "cell_type": "markdown",
    "id": "9ea562e7-b67a-45df-b822-2f4528a307c2",
@@ -313,17 +260,22 @@
     {
      "data": {
       "text/plain": [
-       "\u001b[0;31m# AUTOGENERATED! DO NOT EDIT! File to edit: ../app.ipynb.\u001b[0m\u001b[0;34m\u001b[0m\n",
+       "\u001b[0;31m# AUTOGENERATED! DO NOT EDIT! File to edit: app.ipynb.\u001b[0m\u001b[0;34m\u001b[0m\n",
        "\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\n",
        "\u001b[0;34m\u001b[0m\u001b[0;31m# %% auto 0\u001b[0m\u001b[0;34m\u001b[0m\n",
-       "\u001b[0;34m\u001b[0m\u001b[0m__all__\u001b[0m \u001b[0;34m=\u001b[0m \u001b[0;34m[\u001b[0m\u001b[0;34m'iface'\u001b[0m\u001b[0;34m]\u001b[0m\u001b[0;34m\u001b[0m\n",
+       "\u001b[0;34m\u001b[0m\u001b[0m__all__\u001b[0m \u001b[0;34m=\u001b[0m \u001b[0;34m[\u001b[0m\u001b[0;34m'iface'\u001b[0m\u001b[0;34m,\u001b[0m \u001b[0;34m'size'\u001b[0m\u001b[0;34m]\u001b[0m\u001b[0;34m\u001b[0m\n",
        "\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\n",
-       "\u001b[0;34m\u001b[0m\u001b[0;31m# %% ../app.ipynb 7\u001b[0m\u001b[0;34m\u001b[0m\n",
-       "\u001b[0;34m\u001b[0m\u001b[0;32mimport\u001b[0m \u001b[0mgradio\u001b[0m \u001b[0;32mas\u001b[0m \u001b[0mgr\u001b[0m\u001b[0;34m\u001b[0m\n",
-       "\u001b[0;34m\u001b[0m\u001b[0;32mfrom\u001b[0m \u001b[0mnbdev_spaces_demo\u001b[0m \u001b[0;32mimport\u001b[0m \u001b[0mhfsize\u001b[0m \u001b[0;34m\u001b[0m\n",
+       "\u001b[0;34m\u001b[0m\u001b[0;31m# %% app.ipynb 7\u001b[0m\u001b[0;34m\u001b[0m\n",
+       "\u001b[0;34m\u001b[0m\u001b[0;32mdef\u001b[0m \u001b[0msize\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mrepo\u001b[0m\u001b[0;34m:\u001b[0m\u001b[0mstr\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m:\u001b[0m\u001b[0;34m\u001b[0m\n",
+       "\u001b[0;34m\u001b[0m    \u001b[0;34m\"Returns the size in GB of a HuggingFace Dataset.\"\u001b[0m\u001b[0;34m\u001b[0m\n",
+       "\u001b[0;34m\u001b[0m    \u001b[0murl\u001b[0m \u001b[0;34m=\u001b[0m \u001b[0;34mf'https://huggingface.co/api/datasets/{repo}'\u001b[0m\u001b[0;34m\u001b[0m\n",
+       "\u001b[0;34m\u001b[0m    \u001b[0;32mtry\u001b[0m\u001b[0;34m:\u001b[0m \u001b[0mresp\u001b[0m \u001b[0;34m=\u001b[0m \u001b[0murljson\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0;34mf'{url}/treesize/main'\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m\u001b[0m\n",
+       "\u001b[0;34m\u001b[0m    \u001b[0;32mexcept\u001b[0m \u001b[0mHTTPError\u001b[0m\u001b[0;34m:\u001b[0m \u001b[0;32mreturn\u001b[0m \u001b[0;34mf'Did not find repo: {url}'\u001b[0m\u001b[0;34m\u001b[0m\n",
+       "\u001b[0;34m\u001b[0m    \u001b[0mgb\u001b[0m \u001b[0;34m=\u001b[0m \u001b[0mresp\u001b[0m\u001b[0;34m[\u001b[0m\u001b[0;34m'size'\u001b[0m\u001b[0;34m]\u001b[0m \u001b[0;34m/\u001b[0m \u001b[0;36m1e9\u001b[0m\u001b[0;34m\u001b[0m\n",
+       "\u001b[0;34m\u001b[0m    \u001b[0;32mreturn\u001b[0m \u001b[0;34mf'{gb:.2f} GB'\u001b[0m\u001b[0;34m\u001b[0m\n",
        "\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\n",
-       "\u001b[0;34m\u001b[0m\u001b[0;31m# %% ../app.ipynb 11\u001b[0m\u001b[0;34m\u001b[0m\n",
-       "\u001b[0;34m\u001b[0m\u001b[0miface\u001b[0m \u001b[0;34m=\u001b[0m \u001b[0mgr\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0mInterface\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mfn\u001b[0m\u001b[0;34m=\u001b[0m\u001b[0mhfsize\u001b[0m\u001b[0;34m,\u001b[0m \u001b[0minputs\u001b[0m\u001b[0;34m=\u001b[0m\u001b[0mgr\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0mText\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mvalue\u001b[0m\u001b[0;34m=\u001b[0m\u001b[0;34m\"tglcourse/CelebA-faces-cropped-128\"\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m,\u001b[0m \u001b[0moutputs\u001b[0m\u001b[0;34m=\u001b[0m\u001b[0;34m\"text\"\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m\u001b[0m\n",
+       "\u001b[0;34m\u001b[0m\u001b[0;31m# %% app.ipynb 11\u001b[0m\u001b[0;34m\u001b[0m\n",
+       "\u001b[0;34m\u001b[0m\u001b[0miface\u001b[0m \u001b[0;34m=\u001b[0m \u001b[0mgr\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0mInterface\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mfn\u001b[0m\u001b[0;34m=\u001b[0m\u001b[0msize\u001b[0m\u001b[0;34m,\u001b[0m \u001b[0minputs\u001b[0m\u001b[0;34m=\u001b[0m\u001b[0mgr\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0mText\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mvalue\u001b[0m\u001b[0;34m=\u001b[0m\u001b[0;34m\"tglcourse/CelebA-faces-cropped-128\"\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m,\u001b[0m \u001b[0moutputs\u001b[0m\u001b[0;34m=\u001b[0m\u001b[0;34m\"text\"\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m\u001b[0m\n",
        "\u001b[0;34m\u001b[0m\u001b[0miface\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0mlaunch\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mwidth\u001b[0m\u001b[0;34m=\u001b[0m\u001b[0;36m500\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n"
       ]
      },
@@ -332,33 +284,35 @@
     }
    ],
    "source": [
-    "%pycat hfspace_demo/app.py"
+    "%pycat app.py"
    ]
   },
   {
    "cell_type": "markdown",
-   "id": "aadb4817-0671-4d05-9abc-d16776e2bec7",
+   "id": "a081bb0f-5cad-4b99-962b-4dd49cee61a2",
    "metadata": {},
    "source": [
-    "Similarly, the contents of requirements.txt contain all dependencies listed in `settings.ini` from the `requirments` and `pip_requirements` fields (which in this case is just `fastcore`:"
+    "### Fill out `requirements.txt`\n",
+    "\n",
+    "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:"
    ]
   },
   {
    "cell_type": "code",
    "execution_count": null,
-   "id": "831333c4-5e67-46fd-bd73-81a61cbcbd86",
+   "id": "0b611d9c-d262-4124-9e9e-4fe754ac4378",
    "metadata": {},
    "outputs": [
     {
      "name": "stdout",
      "output_type": "stream",
      "text": [
-      "fastcore\n"
+      "fastcore"
      ]
     }
    ],
    "source": [
-    "!cat hfspace_demo/requirements.txt"
+    "!cat requirements.txt"
    ]
   },
   {
@@ -366,15 +320,9 @@
    "id": "f15d9c78-1f55-449e-8058-9af1832367a0",
    "metadata": {},
    "source": [
-    "## Launching Your Gradio App\n",
-    "\n",
-    "To launch your gradio app, you need to commit the changes in the Hugging Face repo.  \n",
-    "\n",
-    "First, change directories to your huggingface repo (in this case its a directory called `hfspace_demo/`:\n",
+    "## 4. Launch Your Gradio App\n",
     "\n",
-    "`cd hfspace_demo`\n",
-    "\n",
-    "Then commit all changes\n",
+    "To launch your gradio app, you need to commit the changes in the Hugging Face repo:\n",
     "\n",
     "```\n",
     "git add -A; git commit -m \"Add application files\"; git push\n",
@@ -386,7 +334,7 @@
    "id": "fa661f93-73b4-465a-9c22-cc38197505cb",
    "metadata": {},
    "source": [
-    "## Voilà!  Enjoy your Gradio App"
+    "## 5. Voilà!  Enjoy your Gradio App"
    ]
   },
   {
@@ -396,6 +344,35 @@
    "source": [
     "After a couple of minutes, you will see your app published!  "
    ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "9a4f7c06-406a-4a7d-be6b-6cb606c35d8d",
+   "metadata": {},
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "[NbConvertApp] Converting notebook app.ipynb to markdown\n",
+      "[NbConvertApp] Writing 6113 bytes to app.md\n"
+     ]
+    }
+   ],
+   "source": [
+    "# this is only for hamel, you can ignore this.\n",
+    "!jupyter nbconvert --to markdown app.ipynb \n",
+    "!cat yaml.md app.md > README.md "
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "958174fe-537e-4635-90b8-22ac11eae396",
+   "metadata": {},
+   "outputs": [],
+   "source": []
   }
  ],
  "metadata": {

app.md

@@ -0,0 +1,176 @@
+# 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 app
+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()`.
+
+
+
+<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`.  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')
+```
+
+<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 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 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!  
+
+
+```
+# this is only for hamel, you can ignore this.
+!jupyter nbconvert --to markdown app.ipynb 
+!cat yaml.md app.md > README.md 
+```
+
+    [NbConvertApp] Converting notebook app.ipynb to markdown
+    [NbConvertApp] Writing 6113 bytes to app.md
+
+
+
+```
+
+```

nbdev_spaces_demo/size.py → app.py

@@ -1,15 +1,17 @@
-# AUTOGENERATED! DO NOT EDIT! File to edit: ../nbs/size.ipynb.
+# AUTOGENERATED! DO NOT EDIT! File to edit: app.ipynb.
 
 # %% auto 0
-__all__ = ['hfsize']
+__all__ = ['iface', 'size']
 
-# %% ../nbs/size.ipynb 2
-from fastcore.net import urljson, HTTPError
-
-def hfsize(repo:str):
+# %% 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)

hfspace_demo

@@ -1 +0,0 @@
-Subproject commit 4b24ff04a9705aaaf5a62a209ab654394e665b20

nbdev_spaces_demo/__init__.py

@@ -1,3 +0,0 @@
-__version__ = "0.0.1"
-
-from .size import hfsize

nbdev_spaces_demo/_modidx.py

@@ -1,8 +0,0 @@
-# Autogenerated by nbdev
-
-d = { 'settings': { 'branch': 'master',
-                'doc_baseurl': '/nbdev-spaces-demo',
-                'doc_host': 'https://fastai.github.io',
-                'git_url': 'https://github.com/fastai/nbdev-spaces-demo',
-                'lib_path': 'nbdev_spaces_demo'},
-  'syms': {'nbdev_spaces_demo.size': {'nbdev_spaces_demo.size.hfsize': ('size.html#hfsize', 'nbdev_spaces_demo/size.py')}}}

nbs/_quarto.yml

@@ -1,20 +0,0 @@
-project:
-  type: website
-
-format:
-  html:
-    theme: cosmo
-    css: styles.css
-    toc: true
-
-website:
-  twitter-card: true
-  open-graph: true
-  repo-actions: [issue]
-  navbar:
-    background: primary
-    search: true
-  sidebar:
-    style: floating
-
-metadata-files: [nbdev.yml, sidebar.yml]

nbs/index.ipynb

@@ -1,75 +0,0 @@
-{
- "cells": [
-  {
-   "cell_type": "markdown",
-   "metadata": {},
-   "source": [
-    "# nbdev-spaces-demo\n",
-    "\n",
-    "> A demo of how to create a Hugging Face Space with gradio within a nbdev project."
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "metadata": {},
-   "source": [
-    "This is a toy python library that lets you obtain the size of any Hugging Face dataset.  For example, we can check the size of [tglcourse/CelebA-faces-cropped-128](https://huggingface.co/datasets/tglcourse/CelebA-faces-cropped-128) like so:"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "text/plain": [
-       "'5.49 GB'"
-      ]
-     },
-     "execution_count": null,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
-   "source": [
-    "from nbdev_spaces_demo import hfsize \n",
-    "hfsize(\"tglcourse/CelebA-faces-cropped-128\")"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "metadata": {},
-   "source": [
-    "We deploy this function using Gradio and Hugging Face spaces."
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "metadata": {},
-   "source": [
-    "## Using nbdev with Gradio\n",
-    "\n",
-    "Gradio and Hugging Face spaces is one of the easiest way to create and host apps. Gradio also allows you to prototype these apps in notebooks, which is excellent!  \n",
-    "\n",
-    "We show you step-by-step instructions on how to deploy a Hugging Face gradio app from a notebook in this example."
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": []
-  }
- ],
- "metadata": {
-  "kernelspec": {
-   "display_name": "Python 3 (ipykernel)",
-   "language": "python",
-   "name": "python3"
-  }
- },
- "nbformat": 4,
- "nbformat_minor": 4
-}

nbs/nbdev.yml

@@ -1,9 +0,0 @@
-project:
-  output-dir: _docs
-
-website:
-  title: "nbdev-spaces-demo"
-  site-url: "https://fastai.github.io/nbdev-spaces-demo"
-  description: "A demo of how to create a Hugging Face Space with gradio within a nbdev project."
-  repo-branch: master
-  repo-url: "https://github.com/fastai/nbdev-spaces-demo"

nbs/size.ipynb

@@ -1,94 +0,0 @@
-{
- "cells": [
-  {
-   "cell_type": "markdown",
-   "metadata": {},
-   "source": [
-    "# size\n",
-    "> Determine the size of a Hugging Face Dataset"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "#| default_exp size"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "#|export\n",
-    "from fastcore.net import urljson, HTTPError\n",
-    "\n",
-    "def hfsize(repo:str):\n",
-    "    \"Returns the size in GB of a HuggingFace Dataset.\"\n",
-    "    url = f'https://huggingface.co/api/datasets/{repo}'\n",
-    "    try: resp = urljson(f'{url}/treesize/main')\n",
-    "    except HTTPError: return f'Did not find repo: {url}'\n",
-    "    gb = resp['size'] / 1e9\n",
-    "    return f'{gb:.2f} GB'"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "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",
-    "\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:"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "text/plain": [
-       "'5.49 GB'"
-      ]
-     },
-     "execution_count": null,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
-   "source": [
-    "hfsize(\"tglcourse/CelebA-faces-cropped-128\")"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "#| hide\n",
-    "import nbdev; nbdev.nbdev_export()"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": []
-  }
- ],
- "metadata": {
-  "kernelspec": {
-   "display_name": "Python 3 (ipykernel)",
-   "language": "python",
-   "name": "python3"
-  }
- },
- "nbformat": 4,
- "nbformat_minor": 4
-}

nbs/styles.css

@@ -1,37 +0,0 @@
-.cell {
-  margin-bottom: 1rem;
-}
-
-.cell > .sourceCode {
-  margin-bottom: 0;
-}
-
-.cell-output > pre {
-  margin-bottom: 0;
-}
-
-.cell-output > pre, .cell-output > .sourceCode > pre, .cell-output-stdout > pre {
-  margin-left: 0.8rem;
-  margin-top: 0;
-  background: none;
-  border-left: 2px solid lightsalmon;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
-
-.cell-output > .sourceCode {
-  border: none;
-}
-
-.cell-output > .sourceCode {
-  background: none;
-  margin-top: 0;
-}
-
-div.description {
-  padding-left: 2px;
-  padding-top: 5px;
-  font-style: italic;
-  font-size: 135%;
-  opacity: 70%;
-}

requirements.txt

@@ -0,0 +1 @@
+fastcore

settings.ini

@@ -1,42 +0,0 @@
-[DEFAULT]
-# All sections below are required unless otherwise specified.
-# See https://github.com/fastai/nbdev/blob/master/settings.ini for examples.
-
-### Python library ###
-repo = nbdev-spaces-demo
-lib_name = %(repo)s
-version = 0.0.1
-min_python = 3.7
-license = apache2
-
-### nbdev ###
-doc_path = _docs
-lib_path = nbdev_spaces_demo
-nbs_path = nbs
-recursive = True
-tst_flags = notest
-put_version_in_init = True
-
-### Docs ###
-branch = master
-custom_sidebar = False
-doc_host = https://%(user)s.github.io
-doc_baseurl = /%(repo)s
-git_url = https://github.com/%(user)s/%(repo)s
-title = %(lib_name)s
-
-### PyPI ###
-audience = Developers
-author = Hamel Husain
-author_email = hamel.husain@gmail.com
-copyright = 2022 onwards, %(author)s
-description = A demo of how to create a Hugging Face Space with gradio within a nbdev project.
-keywords = nbdev jupyter notebook python
-language = English
-status = 3
-user = fastai
-
-### Optional ###
-requirements = fastcore
-dev_requirements = gradio
-# console_scripts =

setup.py

@@ -1,57 +0,0 @@
-from pkg_resources import parse_version
-from configparser import ConfigParser
-import setuptools
-assert parse_version(setuptools.__version__)>=parse_version('36.2')
-
-# note: all settings are in settings.ini; edit there, not here
-config = ConfigParser(delimiters=['='])
-config.read('settings.ini')
-cfg = config['DEFAULT']
-
-cfg_keys = 'version description keywords author author_email'.split()
-expected = cfg_keys + "lib_name user branch license status min_python audience language".split()
-for o in expected: assert o in cfg, "missing expected setting: {}".format(o)
-setup_cfg = {o:cfg[o] for o in cfg_keys}
-
-licenses = {
-    'apache2': ('Apache Software License 2.0','OSI Approved :: Apache Software License'),
-    'mit': ('MIT License', 'OSI Approved :: MIT License'),
-    'gpl2': ('GNU General Public License v2', 'OSI Approved :: GNU General Public License v2 (GPLv2)'),
-    'gpl3': ('GNU General Public License v3', 'OSI Approved :: GNU General Public License v3 (GPLv3)'),
-    'bsd3': ('BSD License', 'OSI Approved :: BSD License'),
-}
-statuses = [ '1 - Planning', '2 - Pre-Alpha', '3 - Alpha',
-    '4 - Beta', '5 - Production/Stable', '6 - Mature', '7 - Inactive' ]
-py_versions = '3.6 3.7 3.8 3.9 3.10'.split()
-
-requirements = cfg.get('requirements','').split()
-if cfg.get('pip_requirements'): requirements += cfg.get('pip_requirements','').split()
-min_python = cfg['min_python']
-lic = licenses.get(cfg['license'].lower(), (cfg['license'], None))
-dev_requirements = (cfg.get('dev_requirements') or '').split()
-
-setuptools.setup(
-    name = cfg['lib_name'],
-    license = lic[0],
-    classifiers = [
-        'Development Status :: ' + statuses[int(cfg['status'])],
-        'Intended Audience :: ' + cfg['audience'].title(),
-        'Natural Language :: ' + cfg['language'].title(),
-    ] + ['Programming Language :: Python :: '+o for o in py_versions[py_versions.index(min_python):]] + (['License :: ' + lic[1] ] if lic[1] else []),
-    url = cfg['git_url'],
-    packages = setuptools.find_packages(),
-    include_package_data = True,
-    install_requires = requirements,
-    extras_require={ 'dev': dev_requirements },
-    dependency_links = cfg.get('dep_links','').split(),
-    python_requires  = '>=' + cfg['min_python'],
-    long_description = open('README.md').read(),
-    long_description_content_type = 'text/markdown',
-    zip_safe = False,
-    entry_points = {
-        'console_scripts': cfg.get('console_scripts','').split(),
-        'nbdev': [f'{cfg.get("lib_path")}={cfg.get("lib_path")}._modidx:d']
-    },
-    **setup_cfg)
-
-

yaml.md

@@ -0,0 +1,13 @@
+---
+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 -->