Deploy a Gradio app on Azure using a Python Azure App Service

Gradio is an open-source Python package that lets you easily build a demo or web app for your machine learning model, API, or any Python function. Gradio can work in Python notebooks or as a webpage. A Gradio interface can generate a public link automatically.

You can then use Gradio's built-in sharing features to share a link to your demo or web app conveniently. A share link usually looks like this: https://07ff8706ab.gradio.live. The link is served through the Gradio Share Servers, but these servers only act as a proxy for your local server, and do not save any data sent through your app. Share links expire after 72 hours. Therefore, we recommend using Azure App Service if you want a more reliable method to build a demo app. 

App Service is a service that Microsoft provides as a Platform as a Service (PaaS). It lets us host web applications, REST API's and backend services for mobile applications.

The programming language or framework that we used is not important. We can host web applications and services that are built with any of these programming languages or frameworks using azure app service. For example, .NET, Java, Python etc.

In tutorial document we provide a step-by-step guide to set your gradio application up and running on Azure.

Run your project locally

Although you can use any IDE, we do suggest using VSCode, as it contains many built-in facilities allowing to rapidly create a virtual environment, deploy your project to azure and create a local server. Download the Visual Studio Code installer for Windows. Once it is downloaded, run the installer (VSCodeUserSetup-{version}.exe). This will only take a minute. By default, VS Code is installed under C:\Users\{Username}\AppData\Local\Programs\Microsoft VS Code. During the installation don’t forget to check the “Add Open with Code Action”

For illustration, we will use this simple gradio app that displays the hello message to user.

import gradio as gr

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

demo.launch(share=True)

This code can be executed as a Python in terminal or as a cell in Jupyter notebook.

But, in order to make the Gradio app function, we have to attach a gradio.Blocks to a FastAPI application that already exists.

To do so, first create a virtual environment.

Install the library

pip install virtualenv

You can now set up venv for your project by doing these steps in your terminal, make a new project folder, go to the project folder with cd, 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 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

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)

You can create the environment variable through the terminal or PC settings but it is recommended to set up the debug profile in VScode for a more convenient development. Put the launch.json file with this content in your .vscode folder:

{
    "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

Since Azure App Services operate in the Linux environment, you have to install the gunicorn package, as this is what the startup command uses instead of uvicorn

pip install gunicorn

Create a requirements file using the following command:

pip freeze > requirements.txt

This will generate a file that shows 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

Now create a new folder named deploy and open it in VSCode. Copy the main.py and requirements.txt in this folder.

Many of the tutorials recommend building a Docker image that can then run on App Service. However, this is optional. You can also deploy code straight from a local workspace to App Service without making a Docker image.

First, you must have the Azure Tools extension pack installed and be signed into Azure from VS Code.

Then create the resource on Azure portal. Sign in to the Azure portal, Enter app services in the search bar at the top of the Azure portal. Select the item labeled App Services under the under Services heading on the menu that appears below the search bar.

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

On the Create Web App page, fill out the form as follows.

1. Resource Group → Select Create new and use your RG name.

2. Name → you-app-name. This name must be unique across Azure.

3. Runtime stack → Python 3.11.

4. Region → Any Azure region near you.

5. App Service Plan → Under Pricing plan, select Explore pricing plans to select a different App Service plan.

The App Service plan controls how many resources (CPU/memory) are available to your app and the cost of those resources.For this example, under Dev/Test, select the Basic B1 plan. The Basic B1 plan will incur a small charge against your Azure account but is recommended for better performance over the Free F1 plan.When finished, select Select to apply your changes.

On the main Create Web App page, select the Review + create at the bottom of the screen.This will take you to the Review page. Select Create to create your App Service.

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

When the deployment is done, open the Azure portal, look for the Web Service, click on the Settings and enter 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

Be aware that you will need to restart the web app after setting the environment variables.

To check how the app service works, go to Overview > Default Domain, and you can access your Web App from this link.

Voilà, your Azure Web App is now up and running. I hope you found this article helpful.