Add application files

README.md

@@ -24,7 +24,12 @@ The first step is to create a space and select the appropriate sdk (which is Gra
 
 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
+
+## 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).
+
+## 3. 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). 
 
@@ -73,22 +78,22 @@ You can construct a simple UI with the `gradio.interface` and then call the `lau
 ```
 #|export
 iface = gr.Interface(fn=size, inputs=gr.Text(value="tglcourse/CelebA-faces-cropped-128"), outputs="text")
-iface.launch(width=500)
+iface.launch(height=450, width=500)
 ```
 
-    Running on local URL:  http://127.0.0.1:7860
+    Running on local URL:  http://127.0.0.1:7861
     
     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>
+<div><iframe src="http://127.0.0.1:7861/" width="500" height="450" allow="autoplay; camera; microphone; clipboard-read; clipboard-write;" frameborder="0" allowfullscreen></iframe></div>
 
 
 
 
 
-    (<gradio.routes.App>, 'http://127.0.0.1:7860/', None)
+    (<gradio.routes.App>, 'http://127.0.0.1:7861/', None)
 
 
 
@@ -100,10 +105,10 @@ Note how running the `launch()` method in a notebook runs a webserver in the bac
 iface.close()
 ```
 
-    Closing server running on port: 7860
+    Closing server running on port: 7861
 
 
-## 3. Converting This Notebook Into A Gradio App
+## 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:
 
@@ -113,15 +118,6 @@ 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:
@@ -141,7 +137,7 @@ Notice how the contents of app.py only contains the exported cells from this not
     import gradio as gr
     from fastcore.net import urljson, HTTPError
     
-    # %% app.ipynb 7
+    # %% app.ipynb 8
     def size(repo:str):
         "Returns the size in GB of a HuggingFace Dataset."
         url = f'https://huggingface.co/api/datasets/{repo}'
@@ -150,9 +146,9 @@ Notice how the contents of app.py only contains the exported cells from this not
         gb = resp['size'] / 1e9
         return f'{gb:.2f} GB'
     
-    # %% app.ipynb 11
+    # %% app.ipynb 12
     iface = gr.Interface(fn=size, inputs=gr.Text(value="tglcourse/CelebA-faces-cropped-128"), outputs="text")
-    iface.launch(width=500)
+    iface.launch(height=450, width=500)
 
 
 
@@ -169,7 +165,7 @@ You must supply a requirements.txt file so the Gradio app knows how to build you
 
 _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)._
 
-## 4. Launch Your Gradio App
+## 5. Launch Your Gradio App
 
 To launch your gradio app, you need to commit the changes to the Hugging Face repo:
 
@@ -177,7 +173,7 @@ To launch your gradio app, you need to commit the changes to the Hugging Face re
 git add -A; git commit -m "Add application files"; git push
 ```
 
-## 5. Voilà!  Enjoy your Gradio App
+# 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.
 

app.md

@@ -12,7 +12,12 @@ The first step is to create a space and select the appropriate sdk (which is Gra
 
 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
+
+## 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).
+
+## 3. 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). 
 
@@ -61,22 +66,22 @@ You can construct a simple UI with the `gradio.interface` and then call the `lau
 ```
 #|export
 iface = gr.Interface(fn=size, inputs=gr.Text(value="tglcourse/CelebA-faces-cropped-128"), outputs="text")
-iface.launch(width=500)
+iface.launch(height=450, width=500)
 ```
 
-    Running on local URL:  http://127.0.0.1:7860
+    Running on local URL:  http://127.0.0.1:7861
     
     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>
+<div><iframe src="http://127.0.0.1:7861/" width="500" height="450" allow="autoplay; camera; microphone; clipboard-read; clipboard-write;" frameborder="0" allowfullscreen></iframe></div>
 
 
 
 
 
-    (<gradio.routes.App>, 'http://127.0.0.1:7860/', None)
+    (<gradio.routes.App>, 'http://127.0.0.1:7861/', None)
 
 
 
@@ -88,10 +93,10 @@ Note how running the `launch()` method in a notebook runs a webserver in the bac
 iface.close()
 ```
 
-    Closing server running on port: 7860
+    Closing server running on port: 7861
 
 
-## 3. Converting This Notebook Into A Gradio App
+## 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:
 
@@ -101,15 +106,6 @@ 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:
@@ -129,7 +125,7 @@ Notice how the contents of app.py only contains the exported cells from this not
     import gradio as gr
     from fastcore.net import urljson, HTTPError
     
-    # %% app.ipynb 7
+    # %% app.ipynb 8
     def size(repo:str):
         "Returns the size in GB of a HuggingFace Dataset."
         url = f'https://huggingface.co/api/datasets/{repo}'
@@ -138,9 +134,9 @@ Notice how the contents of app.py only contains the exported cells from this not
         gb = resp['size'] / 1e9
         return f'{gb:.2f} GB'
     
-    # %% app.ipynb 11
+    # %% app.ipynb 12
     iface = gr.Interface(fn=size, inputs=gr.Text(value="tglcourse/CelebA-faces-cropped-128"), outputs="text")
-    iface.launch(width=500)
+    iface.launch(height=450, width=500)
 
 
 
@@ -157,7 +153,7 @@ You must supply a requirements.txt file so the Gradio app knows how to build you
 
 _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)._
 
-## 4. Launch Your Gradio App
+## 5. Launch Your Gradio App
 
 To launch your gradio app, you need to commit the changes to the Hugging Face repo:
 
@@ -165,7 +161,7 @@ To launch your gradio app, you need to commit the changes to the Hugging Face re
 git add -A; git commit -m "Add application files"; git push
 ```
 
-## 5. Voilà!  Enjoy your Gradio App
+# 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.