How to Embed a Dynamic Gradio App in Your HugoBlox Site

If you want to integrate a Gradio app into your HugoBlox site while keeping the URL dynamic (so it updates without rebuilding your Hugo site), this guide is for you! We’ll use JavaScript to fetch the app’s URL from an API and display it conditionally.

Why Use a Dynamic Approach?

✅ Benefits:

No need to rebuild Hugo every time the Gradio app URL changes.
Automatic fallback if the API is down (shows a message instead of a broken iframe)
Flexible—you can update the Gradio app URL from a backend service or database.

Step 1: Create a Hugo Partial for the Gradio Embed

To keep things modular, we’ll create a partial in Hugo, which we can reuse anywhere in our site.

Create the Partial File

Save the following file in your Hugo project:

📂 layouts/shortcodes/gradio_test.html

<div id="gradio-container">
    <p id="error-message" style="display: none; color: red; font-weight: bold;"></p>
    <iframe id="gradio-frame" width="100%" height="600px" style="border:none; display: none;"></iframe>
</div>

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

    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>

Step 2: Add the Partial to Your Hugo Page

Now, in any Hugo Markdown or HTML page where you want the Gradio app, simply add:

{{< gradio_test >}}

This will ensure the Gradio app gets loaded dynamically.

Step 3: Handling API Failures Gracefully

To improve user experience, we can add a loading message while fetching the API and a fallback message if the API is down.

Updated gradio_test.html partial shortcode with loading message:

<div id="gradio-container">
    <p id="loading-message">Loading the Gradio app, please wait...</p>
    <p id="error-message" style="display: none; color: red; font-weight: bold;"></p>
    <iframe id="gradio-frame" width="100%" height="600px" style="border:none; display: none;"></iframe>
</div>

<script>
  document.addEventListener("DOMContentLoaded", async function() {
    const apiUrl = "https://your-api.com/get-gradio-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("loading-message").style.display = "none";
      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("loading-message").style.display = "none";
      document.getElementById("error-message").innerText = "⚠️ The Gradio app is currently unavailable. Please try again later.";
      document.getElementById("error-message").style.display = "block";
    }
  });
</script>

How It Works:

Shows a loading message while fetching the Gradio app URL.
Displays the app if the API returns a valid URL.
Shows an error message if the API is down.

So now we have a loading message (

Loading the Gradio app, please wait…

) that is displayed while the API request is in progress. This provides a better user experience by informing users that the app is being loaded. and once the Gradio URL is retrieved and set in the iframe, the loading message is hidden (document.getElementById(“loading-message”).style.display = “none”;). This enhances user experience by providing clear feedback during loading.

Example:

Loading the Gradio app, please wait...

Next Steps:

Deploy your HugoBlox site and test it.
Ensure your API returns the latest Gradio app URL in JSON format.
Optionally, enhance the script to fetch a default backup URL if the API is down.

Are you searching for alternative? Look into gradio-lite.

Example1:

import gradio as gr def greet(name): return "Hello, " + name + "!" + " We are happy to see you in Y1D!" gr.Interface(greet, "textbox", "textbox").launch()