Monitor you Gradio app with Logfire 🔍

The Pydantic team recently released Logfire an observability platform which promises “Uncomplicated observability”. Gradio developers have asked before about the best way to monitor their applications so I figured I would give Logfire a try to see if I could recommend it in the future.

Setup

The setup is painless. Simply go to the Logfire website and link your Github account. As of writing this, Logfire is in beta and is free. Once logged in, create a new project and store the generated API key someplace safe.

Now create a new directory in your computer, set up a virtual environment of your choice, and install the following dependencies

The Gradio application

For this demo, I wanted to build something quick but reflective of the kinds of apps being built in the AI era. So I went with a text-to-image Gradio application using the free Hugging Face Inference API.

You can check out the code below. It’s a standard Blocks application with a textbox input and image output. I am doing two custom things however:

1. I am mounting the Gradio application as a sub-application of a parent FastAPI application. This will make integration with logfire easier.
2. I am applying my own css to create a square UI in the center of the page. Feel free to remove if you are following along.

I am attaching a gif of the UI generating an image below. It’s amazing we have a fully working text-to-image app in 30 lines of code.

Integrating Logfire

Logfire comes with with built-in integrations for FastAPI and Pydantic data models. Since Gradio is built on top of those libraries, integrating logfire is pretty easy. We only need to add five lines of code!

The logfire.configure call will set up Logfire to send info about created Pydantic models during the lifecycle of our app to our project on the Logfire platform. The instrument_fastapi function will record all the data sent to our server and collect performance metrics.

I am using python-dotenv to load my Logfire API key from a .env file. I recommend you do this so that you don’t accidentally commit your token to version control. Otherwise, you have to use the token argument of configure.

Then we can add a Logfire span to our text_to_image function so we can record the generation time and the prompt for further analysis.

It’s also possible to decorate our function with logfire.instrument.

Analyzing our traces

After generating a couple of images, you can go back to the logfire platform to see the recorded data. In the Live view, you will see all the recorded traces from our FastAPI app and our custom text_to_image span.

You can use the SQL filter bar at the top to filter by span name. In this case, I will look at our text_to_image span.

In the Explore tab, we can use SQL to query all the durations recorded by Logfire. This could help us identify performance issues in our app.

Final Thoughts

All in all, I had a positive experience with Logfire. Adding Logfire to a gradio application is a breeze. It only required about 5 lines of extra code! And creating a new Logfire project is painless. That being said, it’s still in beta. I found a bug and I thought there weren’t enough examples in the documentation for how to explore the data in Logfire.

I’m excited to see the project evolve. It could prove very helpful to Gradio developers!