---
title: "Any Custom Frontend with Gradio's Backend"
description: "gradio.Server enables applications built with React, Svelte, or plain HTML/JavaScript to use Gradio’s backend facilities instead of Gradio components. The post demonstrates this with Text Behind Image, whose browser UI layers a background, styled text, and a transparent foreground produced by BiRefNet, then exports a PNG client-side. A roughly 50-line Python backend extends FastAPI, exposes a standard HTML route, and defines an @app.api(\"remove_background\") endpoint; @spaces.GPU handles ZeroGPU allocation while Gradio supplies queuing, concurrency control, SSE streaming, and gradio_client compatibility. The frontend calls the endpoint through the Gradio JavaScript client, so image-processing requests pass through the queue while rendering and compositing remain in the browser. The result is a custom frontend that retains Spaces hosting and Gradio infrastructure."
---

# Any Custom Frontend with Gradio's Backend

[Hugging Face](https://yomu.fyi/company/hugging-face) · yuvraj sharma, Abubakar Abid · Apr 1, 2026

**Type:** Tutorial

## Summary

gradio.Server enables applications built with React, Svelte, or plain HTML/JavaScript to use Gradio’s backend facilities instead of Gradio components. The post demonstrates this with Text Behind Image, whose browser UI layers a background, styled text, and a transparent foreground produced by BiRefNet, then exports a PNG client-side. A roughly 50-line Python backend extends FastAPI, exposes a standard HTML route, and defines an @app.api("remove\_background") endpoint; @spaces.GPU handles ZeroGPU allocation while Gradio supplies queuing, concurrency control, SSE streaming, and gradio\_client compatibility. The frontend calls the endpoint through the Gradio JavaScript client, so image-processing requests pass through the queue while rendering and compositing remain in the browser. The result is a custom frontend that retains Spaces hosting and Gradio infrastructure.

## Context

The project needed a full web application with a layered drag-and-drop canvas, extensive text styling and transformation controls, client-side PNG export, and an ML endpoint for background removal. Gradio components could not express this interface, but the project still needed Gradio queuing, concurrency management, ZeroGPU support, and Hugging Face Spaces hosting.

## Approach / What changed

Use gradio.Server as a FastAPI-based backend. A @app.api("remove\_background") endpoint loads an image, runs BiRefNet segmentation through a @spaces.GPU-decorated function, and returns a transparent PNG. A standard @app.get("/") route serves a self-contained HTML/CSS/JavaScript frontend, which calls the backend through the Gradio JavaScript client and performs layering, text rendering, compositing, and export in the browser.

## Takeaways

- gradio.Server combines FastAPI routes with Gradio’s queuing engine, SSE streaming, concurrency control, and gradio\_client compatibility.
- Using the Gradio JavaScript client routes frontend image-processing requests through Gradio’s queue instead of a raw fetch call.
- The Text Behind Image frontend uses a three-layer canvas and client-side compositing, keeping text effects, transforms, and PNG export in the browser.

**Tags:** [Architecture](https://yomu.fyi/topic/architecture), [Deployment](https://yomu.fyi/topic/deployment), [Machine Learning](https://yomu.fyi/topic/machine-learning), [Python](https://yomu.fyi/topic/python)

- Source: [Hugging Face](https://huggingface.co/blog/introducing-gradio-server)
- Source URL: https://huggingface.co/blog/introducing-gradio-server
- Ingested by Yomu: 2026-08-29T01:47:11.956Z

[Read original post](https://huggingface.co/blog/introducing-gradio-server)