New front for gradio chapters

chapters/en/_toctree.yml

@@ -176,6 +176,25 @@
     title: End-of-chapter quiz
     quiz: 8
 
+- local: chapter9
+  title: 9. Building and sharing demos
+  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 features
+  - local: chapter9/7
+    title: End-of-chapter quiz
+
 - title: Hugging Face Course Event
   subtitle: Catch up with the event of the year
   sections:

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` Python package to build a demo for our model. The `gradio` package 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,108 @@
+# 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, from your favorite Python IDE to a 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
+
+
+gr.Interface(fn=greet, inputs="text", outputs="text").launch()
+```
+
+Let's walk through the code above:
+
+- First, we define our a function, *any function*. In this case it is a simple function that adds "Hello" before your name. In a more typical example, 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 parameters, the first being the prediction function, and the other two being 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 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.inputs.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 section, we'll cover other kinds of inputs and outputs.
+
+## ✏️ Let's apply it!
+
+We'll build a simple interface that allows you to demo a **text-generation** model like GPT-2. 
+
+We'll load our text generation model using the the `pipeline` abstraction from the `transformers` library. 
+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 reply. You can run it with your own input prompts to see how it works. Here are a couple of examples (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, we can create the Interface for it immediately.
+
+```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 going to see how to build other kinds of demos with `gradio`.

chapters/en/chapter9/3.mdx

@@ -0,0 +1,176 @@
+# Understanding the Interface class
+
+In this section, we will take a closer look at the `gradio.Interface` class, and understand the
+main parameters used to create an `Interface`.
+
+## How to create an `Interface`
+
+You'll notice that the `Interface` class has 3 required parameters:  
+
+ `gradio.Interface(fn, inputs, outputs, ...)`
+
+These parameters are:
+
+  - `fn`: the core 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 e.g. `"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 docs ](https://gradio.app/docs). Each pre-built
+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 `gradio.inputs.Textbox(lines=7, label="Prompt")` 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're building 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.inputs.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>
+
+## 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 in a list of input components, each component corresponds to a parameter in order.
+* you pass in a list of output coponents, each component corresponds to a returned value.
+
+```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.inputs.Dropdown(notes, type="index"),
+        gr.inputs.Slider(4, 6, step=1),
+        gr.inputs.Textbox(type="number", default=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 in 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!
+
+We'll 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.
+
+We'll load our speech recognition model using the the `pipeline` abstraction from the `transformers` library. 
+If you need a quick refresher, you can go back to [that section in Chapter 1](/course/chapter1/section3).   
+
+```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.inputs.Audio(source="microphone", type="filepath", optional=True),
+        gr.inputs.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!