Gradio integrated with FastAPI and with simple authentication

There are many features I like about Gradio. One is the ability to integrate Gradio apps directly within a FastAPI application. Let me share a real-life scenario that I’ve encountered multiple times.

When working on AI backend projects, I frequently develop API endpoints for other teams to use in web or mobile applications. I find it very useful to provide a Gradio app along with the API to simplify the testing and integration. Gradio supports this scenario well, as it allows mounting an app on a FastAPI path. Here’s how to do it with a simple example (documentation here).

from fastapi import FastAPI
import gradio as gr

app = FastAPI()

@app.get("/")
def read_main():
    return {"message": "This is your main app"}

# very basic app with Blocks
with gr.Blocks() as demo:
    name = gr.Textbox(label="Name")
    output = gr.Textbox(label="Output Box")
    greet_btn = gr.Button("Greet")
    greet_btn.click(fn=lambda x: f"hello {x}!", inputs=name, outputs=output)

app = gr.mount_gradio_app(app, demo, path="/ui")

Securing a standalone Gradio blocks app, with a list of usernames and passwords, is also supported and well-documented. However, for securing the Gradio app mounted on FastAPI, I did not find any documentation. It turns out it is possible by directly setting some variables in the app. The approach I used is the following:

...
demo.auth = [("admin", "admin")]
demo.auth_message = None
app = gr.mount_gradio_app(app, demo, path="/ui")

Happy Gradio coding!