Setting Up an API to Provide the Gradio URL

This post is linked to How to Embed a Dynamic Gradio App in Your HugoBlox Site, where we discussed embedding a Gradio app dynamically in HugoBlox using an API. The API serves the Gradio app URL dynamically so that the Hugo site does not need to be rebuilt every time the URL changes. Here, we’ll walk through setting up that API and deploying it.

Step 1: Create a Simple API to Serve the Gradio URL

We’ll use FastAPI (Python) to create a simple API that returns the Gradio app URL in JSON format.

1. Install FastAPI and Uvicorn

If you haven’t already, install FastAPI and Uvicorn:

pip install fastapi uvicorn

and before that of course you need to make a venv, activate it and update the pip.

sudo apt update && sudo apt upgrade -y
sudo apt install -y python3-venv
python3 -m venv api-env
source api-env/bin/activate
pip install --upgrade pip

2. Create the API Server (`app.py`)

Create a file called app.py and add the following code:

from fastapi import FastAPI
from fastapi.responses import JSONResponse

app = FastAPI()

# Hardcoded Gradio app URL (replace with your actual URL)
GRADIO_APP_URL = "https://your-app.hf.space"

@app.get("/get-gradio-url")
async def get_gradio_url():
    """
    Returns the URL of the Gradio app.
    """
    return JSONResponse(content={"url": GRADIO_APP_URL})

Step 2: Run the API Locally

To start your API server, run:

uvicorn app:app --host 0.0.0.0 --port 8000

This will start the API on http://localhost:8000/get-gradio-url, which will return:

{
    "url": "https://your-app.hf.space"
}

Step 3: Deploy the API Online

If you want the API to be accessible from your HugoBlox site, you need to deploy it. Here are a few hosting options:

Option 1: Deploy on Hugging Face Spaces (FastAPI)

Create a new Hugging Face Space.
Choose FastAPI as the template.
Upload your app.py file.
The API will be available at:

https://your-space.hf.space/get-gradio-url

Option 2: Deploy on Render

Sign up at Render.
Create a new web service.
Upload your app.py file.
Set uvicorn app:app --host 0.0.0.0 --port 8000 as the start command.

Option 3: Deploy on Vercel (Serverless)

If you want a serverless option:

Install Vercel CLI:

npm install -g vercel

Create a folder api/ and add get_gradio_url.py:

from fastapi import FastAPI
from fastapi.responses import JSONResponse

app = FastAPI()

@app.get("/get-gradio-url")
async def get_gradio_url():
    return JSONResponse(content={"url": "https://your-app.hf.space"})

Run:

vercel deploy

Your API will be available at:

https://your-vercel-app.vercel.app/api/get-gradio-url

Step 4: Update Your HugoBlox Site

Once your API is live, update the API URL in your Hugo shortcode (gradio.html):

<script>
  document.addEventListener("DOMContentLoaded", async function() {
    const apiUrl = "https://your-deployed-api.com/get-gradio-url"; // Replace with your actual API URL

    try {
      const response = await fetch(apiUrl);
      if (!response.ok) {
        throw new Error("API returned an error");
      }

      const data = await response.json();
      const gradioUrl = data.url;

      if (!gradioUrl) {
        throw new Error("No URL provided by API");
      }

      document.getElementById("gradio-frame").src = gradioUrl;
      document.getElementById("gradio-frame").style.display = "block";
    } catch (error) {
      console.error("Failed to load Gradio URL:", error);
      document.getElementById("error-message").innerText = "⚠️ The Gradio app is currently unavailable. Please try again later.";
      document.getElementById("error-message").style.display = "block";
    }
  });
</script>

Summery

You now have a fully working API that serves the Gradio app URL dynamically!
Your HugoBlox site will always fetch the latest URL without needing a rebuild.
If the API is down, users will see a friendly error message instead of a broken iframe.