New front for gradio chapters

chapters/en/_toctree.yml

@@ -167,6 +167,29 @@
     title: End-of-chapter quiz
     quiz: 8
 
+- local: chapter9
+  title: 9. Building and sharing demos
+  new: true
+  subtitle: I trained a model, but how can I show it off?
+  sections:
+  - local: chapter9/1
+    title: Introduction to Gradio
+  - local: chapter9/2
+    title: Building your first demo
+  - local: chapter9/3
+    title: Understanding the Interface class
+  - local: chapter9/4
+    title: Sharing demos with others
+  - local: chapter9/5
+    title: Integrations with the Hugging Face Hub
+  - local: chapter9/6
+    title: Advanced Interface features
+  - local: chapter9/7
+    title: Introduction to Blocks
+  - local: chapter9/8
+    title: End-of-chapter quiz
+    quiz: 9
+
 - title: Hugging Face Course Event
   sections:
   - local: event/1

chapters/en/chapter9/1.mdx

@@ -0,0 +1,32 @@
+# Introduction to Gradio
+
+In this chapter we will be learning about how to build **interactive demos** for your machine learning models. 
+
+Why build a demo or a GUI for your machine learning model in the first place? Demos allow:
+
+- **Machine learning developers** to easily present their work to a wide audience including non-technical teams or customers
+- **Researchers** to more easily reproduce machine learning models and behavior
+- **Quality testers** or **end users** to more easily identify and debug failure points of models
+- **Diverse users** to discover algorithmic biases in models
+
+We'll be using the Gradio library to build demos for our models. Gradio allows you to build, customize, and share web-based demos for any machine learning model, entirely in Python.
+
+Here are some examples of machine learning demos built with Gradio:
+
+* A **sketch recognition** model that takes in a sketch and outputs labels of what it thinks is being drawn: 
+
+<iframe src="https://hf.space/gradioiframe/abidlabs/draw2/+" frameBorder="0" height="400" title="Gradio app" class="container p-0 flex-grow space-iframe" allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"></iframe>
+
+* An extractive **question answering** model that takes in a context paragraph and a quest and outputs a response and a probability score (we discussed this kind of model [in Chapter 7]((/course/chapter7/7))): 
+
+<iframe src="https://hf.space/gradioiframe/abidlabs/question-answering-simple/+" frameBorder="0" height="420" title="Gradio app" class="container p-0 flex-grow space-iframe" allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"></iframe>
+
+* A **background removal** model that takes in an image and outputs the image with the background removed:
+
+<iframe src="https://hf.space/gradioiframe/abidlabs/remove-bg/+" frameBorder="0" height="640" title="Gradio app" class="container p-0 flex-grow space-iframe" allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"></iframe>
+
+This chapter is broken down into sections which include both _concepts_ and _applications_. After you learn the concept in each section, you'll apply it to build a particular kind of demo, ranging from image classification to speech recognition. By the time you finish this chapter, you'll be able to build these demos (and many more!) in just a few lines of Python code. 
+
+<Tip>
+👀 Check out <a href="https://huggingface.co/spaces" target="_blank">Hugging Face Spaces</a> to see many recent examples of machine learning demos built by the machine learning community!
+</Tip>

chapters/en/chapter9/2.mdx

@@ -0,0 +1,111 @@
+# Building your first demo
+
+Let's start by installing Gradio! Since it is a Python package, simply run:
+
+`$ pip install gradio `
+
+You can run Gradio anywhere, be it from your favourite Python IDE, to Jupyter notebooks or even in Google Colab 🤯!
+So install Gradio wherever you run Python!
+
+Let's get started with a simple “Hello World” example to get familiar with the Gradio syntax:
+
+```py
+import gradio as gr
+
+
+def greet(name):
+    return "Hello " + name
+
+
+demo = gr.Interface(fn=greet, inputs="text", outputs="text")
+
+demo.launch()
+```
+
+Let's walk through the code above:
+
+- First, we define a function called `greet()`. In this case, it is a simple function that adds "Hello" before your name, but it can be *any* Python function in general. For example, in machine learning applications, this function would *call a model to make a prediction* on an input and return the output.
+- Then, we create a Gradio `Interface` with three arguments, `fn`, `inputs`, and `outputs`. These arguments define the prediction function, as well as the _type_ of input and output components we would like. In our case, both components are simple text boxes. 
+- We then call the `launch()` method on the `Interface` that we created. 
+
+If you run this code, the interface below will appear automatically within a Jupyter/Colab notebook, or pop in a browser on **[http://localhost:7860](http://localhost:7860/)** if running from a script.
+
+<iframe src="https://hf.space/gradioiframe/course-demos/hello-world/+" frameBorder="0" height="250" title="Gradio app" class="container p-0 flex-grow space-iframe" allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"></iframe>
+
+Try using this GUI right now with your own name or some other input!
+
+You'll notice that in this GUI, Gradio automatically inferred the name of the input parameter (`name`)
+and applied it as a label on top of the textbox. What if you'd like to change that?
+Or if you'd like to customize the textbox in some other way? In that case, you can 
+instantiate a class object representing the input component. 
+
+Take a look at the example below:
+
+```py
+import gradio as gr
+
+
+def greet(name):
+    return "Hello " + name
+
+
+# We instantiate the Textbox class
+textbox = gr.Textbox(label="Type your name here:", placeholder="John Doe", lines=2)
+
+gr.Interface(fn=greet, inputs=textbox, outputs="text").launch()
+```
+
+<iframe src="https://hf.space/gradioiframe/course-demos/hello-world-custom/+" frameBorder="0" height="300" title="Gradio app" class="container p-0 flex-grow space-iframe" allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"></iframe>
+
+Here, we've created an input textbox with a label, a placeholder, and a set number of lines.
+You could do the same for the output textbox, but we'll leave that for now.
+
+We've seen that with just a few lines of code, Gradio lets you create a simple interface around any function 
+with any kind of inputs or outputs. In this section, we've started with a 
+simple textbox, but in the next sections, we'll cover other kinds of inputs and outputs. Let's now take a look at including some NLP in a Gradio application.
+
+
+## 🤖 Including model predictions
+
+Let's now build a simple interface that allows you to demo a **text-generation** model like GPT-2.
+
+We'll load our model using the the `pipeline()` function from 🤗 Transformers. 
+If you need a quick refresher, you can go back to [that section in Chapter 1](/course/chapter1/3#text-generation).   
+
+First, we define a prediction function that takes in a text prompt and returns the text completion:
+
+```py
+from transformers import pipeline
+
+model = pipeline("text-generation")
+
+
+def predict(prompt):
+    completion = model(prompt)[0]["generated_text"]
+    return completion
+```
+
+This function completes prompts that you provide, and you can run it with your own input prompts to see how it works. Here is an example (you might get a different completion):
+
+```
+predict("My favorite programming language is")
+```
+
+```
+>> My favorite programming language is Haskell. I really enjoyed the Haskell language, but it doesn't have all the features that can be applied to any other language. For example, all it does is compile to a byte array.
+```
+
+Now that we have a function for generating predictions, we can create and launch an `Interface` in the same way we did earlier:
+
+```py
+import gradio as gr
+
+gr.Interface(fn=predict, inputs="text", outputs="text").launch()
+```
+
+
+That's it! You can now use this interface to generate text using the GPT-2 model as shown below 🤯.
+
+<iframe src="https://hf.space/gradioiframe/course-demos/gpt-2/+" frameBorder="0" height="250" title="Gradio app" class="container p-0 flex-grow space-iframe" allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"></iframe>
+
+Keep reading to see how to build other kinds of demos with Gradio!

chapters/en/chapter9/3.mdx

@@ -0,0 +1,179 @@
+# Understanding the Interface class
+
+In this section, we will take a closer look at the `Interface` class, and understand the
+main parameters used to create one.
+
+## How to create an Interface
+
+You'll notice that the `Interface` class has 3 required parameters:  
+
+`Interface(fn, inputs, outputs, ...)`
+
+These parameters are:
+
+  - `fn`: the prediction function that is wrapped by the Gradio interface. This function can take one or more parameters and return one or more values
+  - `inputs`: the input component type(s). Gradio provides many pre-built components such as`"image"` or `"mic"`. 
+  - `outputs`: the output component type(s). Again, `gradio` provides many pre-built components e.g. `"image"` or `"label"`.
+
+For a complete list of components, [see the Gradio docs ](https://gradio.app/docs). Each pre-built component can be customized by instantiating the class corresponding to the component. 
+
+For example, as we saw in the [previous section](/course/chapter9/2),
+instead of passing in `"textbox"` to the `inputs` parameter, you can pass in a `Textbox(lines=7, label="Prompt")` component to create a textbox with 7 lines and a label.
+
+Let's take a look at another example, this time with an `Audio` component.
+
+## A simple example with audio
+
+As mentioned earlier, Gradio provides many different inputs and outputs. 
+So let's build an `Interface` that works with audio.
+
+In this example, we'll build an audio-to-audio function that takes an 
+audio file and simply reverses it.
+
+We will use for the input the `Audio` component. When using the `Audio` component, 
+you can specify whether you want the `source` of the audio to be a file that the user
+uploads or a microphone that the user records their voice with. In this case, let's
+set it to a `"microphone"`. Just for fun, we'll add a label to our `Audio` that says
+"Speak here...".
+
+In addition, we'd like to receive the audio as a numpy array so that we can easily
+"reverse" it. So we'll set the `"type"` to be `"numpy"`, which passes the input
+data as a tuple of (`sample_rate`, `data`) into our function.
+
+We will also use the `Audio` output component which can automatically
+render a tuple with a sample rate and numpy array of data as a playable audio file. 
+In this case, we do not need to do any customization, so we will use the string 
+shortcut `"audio"`.
+
+
+```py
+import numpy as np
+import gradio as gr
+
+
+def reverse_audio(audio):
+    sr, data = audio
+    reversed_audio = (sr, np.flipud(data))
+    return reversed_audio
+
+
+mic = gr.Audio(source="microphone", type="numpy", label="Speak here...")
+gr.Interface(reverse_audio, mic, "audio").launch()
+```
+
+The code above will produce an interface like the one below (if your browser doesn't
+ask you for microphone permissions, <a href="https://huggingface.co/spaces/course-demos/audio-reverse" target="_blank">open the demo in  a separate tab</a>.)
+
+<iframe src="https://hf.space/gradioiframe/course-demos/audio-reverse/+" frameBorder="0" height="250" title="Gradio app" class="container p-0 flex-grow space-iframe" allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"></iframe>
+
+You should now be able to record your voice and hear yourself speaking in reverse - spooky 👻!
+
+## Handling multiple inputs and outputs
+
+Let's say we had a more complicated function, with multiple inputs and outputs. 
+In the example below, we have a function that takes a dropdown index, a slider value, and number, 
+and returns an audio sample of a musical tone. 
+
+Take a look how we pass a list of input and output components,
+and see if you can follow along what's happening.
+
+The key here is that when you pass:
+* a list of input components, each component corresponds to a parameter in order.
+* a list of output coponents, each component corresponds to a returned value.
+
+The code snippet below shows how three input components line up with the three arguments of the `generate_tone()` function:
+
+```py
+import numpy as np
+import gradio as gr
+
+notes = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"]
+
+
+def generate_tone(note, octave, duration):
+    sr = 48000
+    a4_freq, tones_from_a4 = 440, 12 * (octave - 4) + (note - 9)
+    frequency = a4_freq * 2 ** (tones_from_a4 / 12)
+    duration = int(duration)
+    audio = np.linspace(0, duration, duration * sr)
+    audio = (20000 * np.sin(audio * (2 * np.pi * frequency))).astype(np.int16)
+    return (sr, audio)
+
+
+gr.Interface(
+    generate_tone,
+    [
+        gr.Dropdown(notes, type="index"),
+        gr.Slider(minimum=4, maximum=6, step=1),
+        gr.Textbox(type="number", value=1, label="Duration in seconds"),
+    ],
+    "audio",
+).launch()
+```
+
+<iframe src="https://hf.space/gradioiframe/course-demos/generate-tone/+" frameBorder="0" height="450" title="Gradio app" class="container p-0 flex-grow space-iframe" allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"></iframe>
+
+
+### The `launch()` method
+
+So far, we have used the `launch()` method to launch the interface, but we 
+haven't really discussed what it does. 
+
+By default, the `launch()` method will launch the demo in a web server that 
+is running locally. If you are running your code in a Jupyter or Colab notebook, then
+Gradio will embed the demo GUI in the notebook so you can easily use it.
+
+You can customize the behavior of `launch()` through different parameters:
+
+  - `inline` - whether to display the interface inline on Python notebooks.
+  - `inbrowser` - whether to automatically launch the interface in a new tab on the default browser.
+  - `share` - whether to create a publicly shareable link from your computer for the interface. Kind of like a Google Drive link!
+
+We'll cover the `share` parameter in a lot more detail in the next section!
+
+## ✏️ Let's apply it!
+
+Let's build an interface that allows you to demo a **speech-recognition** model.
+To make it interesting, we will accept *either* a mic input or an uploaded file.
+
+As usual, we'll load our speech recognition model using the the `pipeline()` function 🤗 Transformers. 
+If you need a quick refresher, you can go back to [that section in Chapter 1](/course/chapter1/3).   Next, we'll implement a `transcribe_audio()` function that processes the audio and returns the transcription. Finally, we'll wrap this function in an `Interface` with the `Audio` components for the inputs and just text for the output. Altogether, the code for this application is the following:
+
+```py
+from transformers import pipeline
+import gradio as gr
+
+model = pipeline("automatic-speech-recognition")
+
+
+def transcribe_audio(mic=None, file=None):
+    if mic is not None:
+        audio = mic
+    elif file is not None:
+        audio = file
+    else:
+        return "You must either provide a mic recording or a file"
+    transcription = model(audio)["text"]
+    return transcription
+
+
+gr.Interface(
+    fn=transcribe_audio,
+    inputs=[
+        gr.Audio(source="microphone", type="filepath", optional=True),
+        gr.Audio(source="upload", type="filepath", optional=True),
+    ],
+    outputs="text",
+).launch()
+```
+
+If your browser doesn't ask you for microphone permissions, <a href="https://huggingface.co/spaces/course-demos/audio-reverse" target="_blank">open the demo in a separate tab</a>.
+
+<iframe src="https://hf.space/gradioiframe/course-demos/asr/+" frameBorder="0" height="550" title="Gradio app" class="container p-0 flex-grow space-iframe" allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"></iframe>
+
+
+That's it! You can now use this interface to transcribe audio. Notice here that
+by passing in the `optional` parameter as `True`, we allow the user to either
+provide a microphone or an audio file (or neither, but that will return an error message).
+
+Keep going to see how to share your interface with others!