Hosting a Gradio Frontend
In this example, we’ll demonstrate how you can host a frontend app with Gradio that runs on Beam.
This example illustrates a few capabilities of Beam:
- Hosting ASGI apps
- Using the hot-reloading feature to develop locally
- Deploying apps to a persistent web endpoint
Import Beam modules
You’ll start by importing a Beam App
and Runtime
App
is the namespace for a project. You’ll give it a unique name as an identifier.- Inside the
App
is aRuntime
. TheRuntime
is a definition of the hardware your container will run on.
Creating a Gradio Frontend
This app has two files: app.py
and frontend.py
.
We use FastAPI to route traffic to the Gradio server.
In our same folder, we have a file with a simple Gradio frontend:
Developing your app on Beam
Beam includes a live-reloading feature that allows you to run your code on the same environment you’ll be running in production.
By default, Beam will sync all the files in your working directory to the remote container. This allows you to use the files you have locally while developing. If you want to prevent some files from getting uploaded, you can create a .beamignore
.
In your shell, run beam serve app.py
. This will:
- Spin up a container
- Run the container on a cloud machine
- Print a cURL request to invoke the API
- Stream the logs to your shell
You should keep this terminal window open while developing.
Now, head back to your IDE, and change a line of code. Hit save.
If you look closely at the shell running beam serve
, you’ll notice the server reloading with your code changes.
You’ll use this workflow anytime you’re developing an app on Beam. Trust us — it makes the development process uniquely fast and painless.
Call the API
Open a browser window and paste the URL printed when you ran beam serve
.
If you paste this URL in your browser, you’ll see the Gradio frontend:
Deployment
Now it’s time to deploy the app to create a persistent endpoint. In your shell, run this command to deploy your app:
Unlike a temporary beam serve
session, this will create a persistent deployment and will remain active until you stop it.
Further Reading
Was this page helpful?