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

A teaser image generated by DALL E 2A 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 model, API, Azure 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 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 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}AppDataLocalProgramsMicrosoft VS Code by default. During the installation, don't forget to select the “Add Open with Code Action”. 

alibekjakupov_0-1713866217434.png

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.

alibekjakupov_1-1713866319106.png

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
myenvScriptsactivate

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

alibekjakupov_0-1713866595098.png

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": ""
              }
        }
    ]
}

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

alibekjakupov_1-1713866928055.png

alibekjakupov_2-1713866947986.png

Deploy to Azure App Service

Because Azure App Services run in the 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 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 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.

alibekjakupov_3-1713867278893.png

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

alibekjakupov_0-1713867305746.png

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.

alibekjakupov_2-1713867367538.png

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.

alibekjakupov_3-1713867494878.png

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)

alibekjakupov_4-1713867572600.png

Then open the Azure extension in VSCode:

alibekjakupov_5-1713867585380.png

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

alibekjakupov_6-1713867606613.png

This will start the deployment job

alibekjakupov_7-1713867624766.png

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

alibekjakupov_8-1713867672884.png

alibekjakupov_9-1713867681967.png

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

alibekjakupov_10-1713867725284.png

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.

alibekjakupov_0-1713872429330.png

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

 

This article was originally published by Microsoft's Azure AI Services Blog. You can find the original article here.