Deploy a Gradio App

This guide explains how to deploy a basic Gradio (opens in a new tab) application to Koyeb using:

  1. Git-driven deployment to automatically build and deploy a new version of your application each time a change is detected on your branch.
  2. Pre-built containers you can deploy from any public or private registry.

You will need:

You can deploy and preview the Gradio application from this guide by clicking the Deploy to Koyeb button below.

Deploy to Koyeb (opens in a new tab)

Consult the repository on GitHub (opens in a new tab) to view this example application.

Create the Gradio app

Start by creating a basic Gradio application.

Alternatively, you can fork the repository on GitHub (opens in a new tab) to get a complete copy of the code. If you fork the repository, then you can skip to section on git-driven deployment on Koyeb.

Create a new project

Create a new directory for your project files and navigate into it:

mkdir example-gradio
cd example-gradio

In the example-gradio directory, create a virtual environment for the new project and activate it by typing:

python3 -m venv venv
source venv/bin/activate

Install the package

Install Gradio using pip install:

pip install gradio

Save your project dependencies to a requirements.txt file using pip freeze:

pip freeze > requirements.txt

Create a basic Gradio application

Now that the dependencies are installed, you can create a basic Gradio application.

Create a file called app.py with the following contents:

app.py
import gradio as gr
import os
 
 
def greet(name, intensity):
    return(f"Hello, {name or 'world'}" + "!" * int(intensity))
 
demo = gr.Interface(
        fn=greet,
        inputs=["text", "slider"],
        outputs=["text"]
        )
 
port = int(os.environ.get('PORT', 7860))
 
demo.launch(server_name="0.0.0.0", server_port=port)

This application sets up a basic web page with some input fields and an output field that renders results. The web server runs on the port specified by the PORT environment variable, using port 7860 as a fallback value.

Test the application

Run the application locally:

python app.py

Navigate to http://localhost:7860 in your web browser to see the application's web page. Add your name to the name field, select an intensity from the slider, and click Submit. The output will then greet you.

Press CTRL-C to shut down the app when finished.

Create a Dockerfile for the project (Optional)

We can build and run our Gradio project on Koyeb using the native Python buildpack, but we can also optionally build from a Dockerfile for more control. To make it possible to build a container image for our application, we just need to create the Dockerfile. We'll also define a .dockerignore file to tell the builder what files to skip when creating the image.

First, define a .dockerignore file in your main project directory. Inside, paste the following contents:

.dockerignore
.git
.gitignore
Dockerfile
.dockerignore
venv
flagged

This file tells Docker to not include Git files, the Docker files themselves, the Python virtual environment, or the flagged directory that is generated by interface interactions. This helps ensure that the image we build is not bloated and that the build completes faster.

Next, create a new file called Dockerfile within the main project directory. Inside, paste the following contents:

Dockerfile
FROM python:slim
 
WORKDIR /app
COPY . .
RUN pip install -r requirements.txt
 
CMD ["python", "app.py"]

This Dockerfile is based on the slim version of the python image (opens in a new tab). The Dockerfile copies all of the project files to the image's filesystem and then installs the dependencies with pip.

If you have Docker installed locally, you can build and test the image on your computer and optionally upload it to a registry. You can deploy container images from any container registry to Koyeb.

You can also build the Dockerfile directly from the repository when we deploy, which is useful as a way of automatically deploying when changes occur.

Push the project to GitHub

In the project directory, initialize a new Git repository by running the following command:

git init

Create a new GitHub repository (opens in a new tab) for your Gradio project if you haven't already done so.

Use GitHub's default .gitignore file for Python to avoid committing unnecessary and unwanted files:

curl -L https://raw.githubusercontent.com/github/gitignore/master/Python.gitignore -o .gitignore

Append an entry for the flagged directory that is created by user interactions by typing:

echo "flagged" > .gitingore

When you are ready, run the following commands to commit and push changes to the repository, replacing the GitHub username and repository name with values from your account and the GitHub repo name:

git add :/
git commit -m "Initial commit"
git remote add origin git@github.com:<YOUR_GITHUB_USERNAME>/<YOUR_REPOSITORY_NAME>.git
git branch -M main
git push -u origin main

Replace <YOUR_GITHUB_USERNAME>/<YOUR_REPOSITORY_NAME> with your GitHub username and repository name.

Deploy to Koyeb using git-driven deployment

Once the repository is pushed to GitHub, you can deploy the Gradio application to Koyeb. Any changes in the deployed branch of your codebase will automatically trigger a redeploy on Koyeb, ensuring that your application is always up-to-date.

To deploy the Gradio app on Koyeb using the control panel (opens in a new tab), follow the steps below:

  1. Click Create Service on the Overview tab of the Koyeb control panel and choose Web service.
  2. Select GitHub as the deployment option.
  3. Choose the GitHub repository containing your application code. Alternatively, you can enter our public Gradio example repository (opens in a new tab) into the Public GitHub repository: https://github.com/koyeb/example-gradio.
  4. Select a Build option for your project. You can choose Dockerfile if you added a Dockerfile to your project. Otherwise, choose buildpack.
  5. If you are using the Buildpack builder, click the Override toggle associated with the Run command field and enter python app.py.
  6. Choose a CPU for your Service. The default Nano works well for this project.
  7. Click the Deploy button.

This creates a Koyeb App and Service which builds and deploys your application on Koyeb. You can access your application running on Koyeb by clicking the URL ending with .koyeb.app.

Deploy to Koyeb from a container registry

If you chose to build a container image for the Gradio application, you can optionally deploy the application from a container registry instead of from GitHub.

To deploy a pre-built Gradio container image on Koyeb using the control panel (opens in a new tab), follow these steps:

  1. Click Create Service on the Overview tab of the Koyeb control panel and then select Web service.
  2. Select Docker as the deployment option.
  3. Choose the container image and tag from your registry and click Next to continue.
  4. Choose a CPU for your Service. The default Nano works well for this project.
  5. Click the Deploy button.

This creates a Koyeb App and Service that pulls from the container registry and deploys your application on Koyeb. You can access your application running on Koyeb by clicking the URL ending with .koyeb.app.

What's next

For another example of a Gradio application deployed on Koyeb, check out this tutorials:

To learn more about the features available for your apps, check out the following documentation: