Deploy a Gradio Web App on Azure with Azure App Service: a Step-by-Step Guide

A teaser image generated by DALL E 2

Context

 

Gradio is an open-source Python package that you can use for free to create a demo or web app for your machine learning model, API, Azure AI Services integration or any Python function. You can run Gradio in Python notebooks or on a script. A Gradio interface can automatically create a public link, so you can then share a link to your demo or web app easily with Gradio's sharing features. A share link usually looks like this: https://07ff8706ab.gradio.live . This link uses the Gradio Share Servers, but these servers only forward your local server, and do not keep any data sent through your app. Share links are valid for 72 hours. For a more stable way to build a demo app, we suggest using Azure App Service.  App Service is a Platform as a Service (PaaS) offering from Microsoft. It allows us to host web applications, REST API's and backend services for mobile applications. We can host web applications and services that are made with multiple programming languages or frameworks including, .NET, Java, Python etc. This document gives you a detailed guide on how to get your gradio application working on Azure. Up we go!

 

Run your project locally

 

Any IDE will work, but we recommend using VSCode, because it has many features that make it easy to create a virtual environment, deploy your project to azure and run a local server. Download the Visual Studio Code installer for Windows. When the download is done, run the installer (VSCodeUserSetup-{version}.exe). It will take a minute or less. VS Code will be installed in C:\Users\{Username}\AppData\Local\Programs\Microsoft VS Code by default. During the installation, don't forget to select the "Add Open with Code Action". 

 

 

As an example, we will show this basic gradio app that shows the hello message to user.

 

import gradio as gr

with gr.Blocks() as demo:
    gr.Markdown("Hi friends!")

demo.launch(share=True)

 

You can run this code as a Python terminal or as a Jupyter notebook cell.

 

 

However, to get the Gradio app to work, we need to connect a gradio.Blocks to a FastAPI application that is already in place.

 

Begin by creating a virtual environment. To achieve this, you need to install the library first.

 

pip install virtualenv

 

To create a venv for your project, follow these steps in your terminal: make a new project folder, use cd to go to the project folder, and run this command

 

cd my-project
python -m venv myenv
myenv\Scripts\activate

 

Otherwise you can create a venv in VSCode, using the command palette : Ctrl + Shift + P -> Python: Create Environment

 

 

Now install the libraries

 

pip install gradio
pip install fastapi

 

And rewrite your initial gradio code. Create main.py  and add the following code :

 

from fastapi import FastAPI
import gradio as gr

app = FastAPI()

with gr.Blocks() as demo:
    gr.Markdown("Hi friends!")

app = gr.mount_gradio_app(app, demo, path="/")

 

You are now ready to run your FastAPI application

 

python main.py

 

Please note, that when you need to use secrets in your code, you should use the environment variables.

 

 

import os
import gradio as gr

with gr.Blocks() as demo:
    my_secret_key = os.environ["MY_SECRET_KEY"]
    gr.Markdown("Hi friends!")

demo.launch(share=True)

 

 

One way to make the environment variable is through the terminal or PC settings, but a better way to set up the debug profile in VScode is to make your development easier. In your .vscode folder, put the launch.json file that has this content:

 

 

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Python Debugger: FastAPI",
            "type": "debugpy",
            "request": "launch",
            "module": "uvicorn",
            "args": [
                "main:app",
                "--reload"
            ],
            "jinja": true,
            "env": {
                "MY_SECRET_KEY": "<my secret key value>"
              }
        }
    ]
}

 

 

This will enable you to launch your local app by using the Run > Start Debugging

 

 

 

Deploy to Azure App Service

 

Because Azure App Services run in the Linux environment, you need to install the gunicorn package, as this is what the startup command relies on instead of uvicorn.

 

pip install gunicorn

 

Use the following command to make a requirements file:

 

pip freeze > requirements.txt

 

This will create a file that displays all the packages and their dependencies with their versions, something like this:

 

aiofiles==23.2.1
altair==5.3.0
annotated-types==0.6.0
anyio==4.3.0
attrs==23.2.0
certifi==2024.2.2
charset-normalizer==3.3.2
click==8.1.7
colorama==0.4.6
contourpy==1.2.1
cycler==0.12.1
fastapi==0.110.1
ffmpy==0.3.2
filelock==3.13.4
fonttools==4.51.0
fsspec==2024.3.1
gradio==4.26.0
gradio_client==0.15.1
gunicorn==21.2.0

 

Make a new folder called deploy and open it in VSCode. Paste the main.py and requirements.txt files in this folder.

 

Some of the tutorials suggest creating a Docker image that can then run on App Service. But this is not required. You can also deploy code directly from a local workspace to App Service without making a Docker image.

 

Before you start, make sure you have the Azure Tools extension pack  installed and you are logged into Azure from VS Code. Then go to the Azure portal to create the resource. Sign in to the Azure portal, type app services in the search bar at the top of the portal. Choose the option called App Services under the Services heading on the menu that shows up below the search bar.

 

 

On the App Services page, select + Create, then select + Web App from the drop-down menu.

 

 

The App Service plan determines the amount of resources (CPU/memory) that your app can use and how much you pay for them.For this example, under Dev/Test, choose the Basic B1 plan. The Basic B1 plan will cost a little bit from your Azure account but is better for performance than the Free F1 plan. When done, select Select to confirm your changes.

 

 

At the bottom of the screen on the main Create Web App page, choose the Review + create option. This will bring you to the Review page. To create your App Service, select Create.

 

Now in VSCode sign to Azure using the command palette (Ctrl + Shift + P)

 

 

Then open the Azure extension in VSCode:

 

 

Now go to your Web App resource that you made earlier > Right Click > Deploy to Web App

 

 

This will start the deployment job

 

 

After the deployment is finished, go to the Azure portal, search for the Web Service, select the Settings and input environment variables

 

 

 

And then type the secret name and value as they appear in your local settings in VSCode.

 

To finish, go to Settings > Configuration > Startup Command and type in this command

 

python -m gunicorn main:app -k uvicorn.workers.UvicornWorker

 

 

To make the web app work properly and recognize the secrets, you have to restart it after setting the environment variables.

 

To see if the app service is functioning, go to Overview > Default Domain, and you can use this link to access your Web App.

 

 

There you have it, your Azure Web App is ready to go. I hope this article was useful.