Opening Up Custom UI

gradio.Server is now exposed as a FastAPI extension, letting you attach React, Svelte, or plain HTML/JS frontends while still keeping Gradio's queuing, concurrency control, SSE streaming, gradio_client compatibility, and ZeroGPU support intact.

The example app introduced, Text Behind Image, does the following:

• Handles background, text, and foreground separately using a drag-and-drop canvas and layer rendering
• Provides 20+ controls including font size, weight, letter spacing, color, opacity, stroke, shadow, 3D extrusion, and perspective transform
• Runs the BiRefNet background removal model on the backend to generate transparent PNGs
• Handles PNG export on the client side

The backend consists of roughly 50 lines. @spaces.GPU handles GPU allocation, and @app.api("remove_background") provides an API endpoint that goes through Gradio's queuing engine. The regular FastAPI route @app.get("/") serves the static index.html.

The frontend communicates with the backend via the Gradio JS Client. After Client.connect(window.location.origin), calling predict("/remove_background", ...) routes the request through the Gradio queue, allowing parallel requests to be managed without GPU conflicts.

The core change is clear: you can now build custom web apps with high design freedom without giving up Gradio's infrastructure.