Connecting the Gradio Interface with the Backend API

Welcome back to "Creating a User-Friendly Interface with Gradio"! We're now in our third lesson and making excellent progress. In our previous session, you enhanced your code translator with language selection features that made the interface more versatile and user-friendly. Today, we're taking a significant step forward: connecting our Gradio interface to a real backend API!

Up until now, we've been working with a mock translation function that simply returns placeholder text. In this lesson, we'll replace this with actual API calls to our FastAPI backend, which will handle the real translation work. You'll learn how to make HTTP requests, process API responses, and elegantly handle any errors that might occur. By the end of this lesson, you'll have a fully functional code translation interface that communicates with a powerful backend service!

Before diving into code, let's understand why separating our application into a frontend interface (Gradio) and a backend API (FastAPI) is such a powerful design pattern:

1. Separation of concerns: The frontend focuses exclusively on user interactions, while the backend handles complex processing logic and resource-intensive operations.

2. Scalability: Each component can scale independently based on demand. If translation requests increase, you can scale just the backend without changing the interface.

3. Flexibility: The API you build can serve multiple clients simultaneously — not just your Gradio interface, but potentially mobile apps, other web services, or even third-party integrations.

Think of it like ordering food at a restaurant: the waiter (Gradio) takes your order, brings it to the kitchen (API), and returns with your prepared meal (translated code). The waiter doesn't need to know how to cook, just how to communicate effectively with the kitchen. This clean separation allows both components to excel at their specific roles.

Let's start by implementing the function that will call our backend API from the Gradio interface. We'll define our API URL and create a function to handle the communication:

import re
import requests
from typing import Tuple, List

# The URL where our backend API is running
API_URL = "http://0.0.0.0:3000/api"

def call_translation_api(code: str, target_language: str) -> Tuple[str, str]:
    """
    Calls the backend API to perform code translation.
    Returns the translated code and explanation.
    """
    # Validate input before making API call
    if not code.strip():
        return "", "Please enter some code to translate."

    # Prepare data to send to the API
    payload = {
        "code": code,
        "target_language": target_language
    }

In this first part of our function, we're:

• Importing the necessary libraries, including re for regular expressions.
• Setting up a constant API_URL that points to our backend service.
• Creating a function that takes the user's code and their selected target language as input.
• Adding a validation check to provide immediate feedback if the input is empty.
• Preparing a structured payload that our API expects.

This validation step is a key usability feature. By checking for empty input before making the API call, we provide instant feedback to users rather than waiting for the backend to respond with an error. Small details like this can significantly improve the user experience of your application.

Now, let's complete our API call function by sending the request and processing the response:

    try:
        # Send the POST request to our translation endpoint
        response = requests.post(f"{API_URL}/translate", json=payload)
        # Raise an exception for 4XX/5XX status codes
        response.raise_for_status()
        
        # Parse the JSON response
        result = response.json()
        
        # Extract and clean the translated code from markdown format
        translated_code_md = result.get("translated_code", "")
        translated_code = re.sub(r'^```.*\n|\n```$', '', translated_code_md.strip())
        
        # Get the explanation from the response
        explanation = result.get("explanation", "")
        
        return translated_code, explanation
    except requests.exceptions.RequestException as e:
        # Handle any errors that occur during the request
        return "", f"Error: {str(e)}"

Let's break down what's happening in this critical part of our function:

1. We make a POST request to the /translate endpoint, sending our payload as JSON.
2. We call raise_for_status() which automatically raises an exception if the request failed (e.g., HTTP 404, 500). Note: Using raise_for_status() not only helps catch server errors but also avoids accidentally processing incomplete or invalid responses: without this call, even if the API returned an error like 404 or 500, your code would continue to parse an empty or incorrect response, leading to hard-to-diagnose bugs later in the UI.
3. If successful, we parse the JSON response.
4. We extract the translated code, which comes in markdown format with code blocks.
5. Using a regular expression, we clean the markdown formatting from the code.
6. We return both the cleaned code and explanation.
7. If anything goes wrong during this process, we catch the exception and return a user-friendly error message.

The regular expression used to clean the translated code is:

r'^```.*\n|\n```$'

This regex is designed to remove the markdown code block delimiters that often wrap code returned by LLMs. Let's analyze it in detail:

• ^```.*\n:

  • ^ asserts the start of the string.
  • The three backticks (```) match the literal triple backticks that start a markdown code block.
  • .* matches any characters following the backticks on the same line (commonly the language identifier, e.g., python).
  • \n matches the newline character immediately after the opening backticks line.

• | is the OR operator, meaning the regex matches either the pattern before or after it.

• \n```$:

  • \n matches a newline character.
  • The three backticks (```) match the literal triple backticks that close the markdown code block.
  • $ asserts the end of the string.

Together, this regex matches and removes both the opening line of the code block (including any language specifier) and the closing line of triple backticks. By stripping these delimiters, we obtain clean code that can be displayed directly in the Gradio code editor without markdown artifacts.

This step is crucial because many LLMs return code wrapped in markdown-style code blocks to preserve formatting. Removing these wrappers ensures the user sees only the raw translated code, improving readability and user experience.

Now that we have our API communication function, we need to connect it to our Gradio interface. Let's update our interface to use this function:

def setup_gradio_app(supported_languages: List[str]) -> gr.Blocks:
    # Capitalize language names for better display in the UI
    supported_languages = [lang.capitalize() for lang in supported_languages]
    
    with gr.Blocks(title="Intelligent Code Translator") as demo:
        gr.Markdown("# 🧠 Intelligent Code Translator")
        gr.Markdown(
            "Paste your code below, select the source and target languages, and click **Translate** to see the result."
        )

        # UI components omitted for brevity...

        # Connect the translate button to our API call function
        translate_btn.click(
            call_translation_api,
            inputs=[code_input, target_language],
            outputs=[translated_code, explanation]
        )

    return demo

This is where we connect our user interface components to our API functionality. The key change here is replacing the mock translation function with our new call_translation_api function. When a user clicks the Translate button, Gradio will:

1. Extract the values from the code_input and target_language components.
2. Pass those values to our call_translation_api function.
3. Display the returned results in the translated_code and explanation components.

Notice the small but thoughtful detail of capitalizing language names with lang.capitalize(). This creates a more polished look in the dropdown menus. Professional interfaces pay attention to these presentation details, as they significantly impact how users perceive your application's quality.

Now let's see how we integrate our Gradio app with the FastAPI backend. Let's first recall how we have been setting up the FastAPI application up to this point:

from fastapi import FastAPI
from fastapi.responses import RedirectResponse
import gradio as gr

from api.routes import router as api_router
from api.logger import LoggingMiddleware
from api.service import get_supported_languages
from gradio_app.app import setup_gradio_app

# Initialize the FastAPI application with metadata
app = FastAPI(
    title="Code Translator API",
    description="A simple API for code translation using Haystack and LLMs.",
    version="0.3.0"
)

# Add logging middleware to track requests
app.add_middleware(LoggingMiddleware)

# Include the API router with a prefix
app.include_router(api_router, prefix="/api")

This code sets up our FastAPI application with several important components:

1. We create a FastAPI app with descriptive metadata (title, description, version).
2. We add a custom LoggingMiddleware that will track and log all requests to our API.
3. We include our API router with the prefix /api — this means all our API endpoints will start with this path.

We will now extend this code to also take into account the frontend (the Gradio app).

The final step is to mount our Gradio interface within the FastAPI app and set up a convenient root redirect:

# Setup Gradio app with languages from the backend
gradio_app = setup_gradio_app(supported_languages=get_supported_languages())

# Add root redirect for better user experience
@app.get("/")
async def root_redirect():
    return RedirectResponse(url="/index")

# Mount the Gradio app at the /index path
app = gr.mount_gradio_app(app, gradio_app, path="/index")

This code accomplishes three important things:

1. It initializes our Gradio app, passing in the supported languages from the backend using get_supported_languages().
2. It adds a redirect from the root URL (/) to /index, making the interface more accessible.
3. It uses gr.mount_gradio_app() to embed our Gradio interface at the /index path within our FastAPI app.

The root redirect is a usability enhancement that might seem small but makes a big difference. When users visit the base URL of our application, they're automatically redirected to the interface by mean of a RedirectResponse without needing to know the exact path. This reduces friction and makes the application more intuitive to use, while also maintaining clean separation: FastAPI continues managing routing at the root level, while Gradio is mounted at a clearly defined subpath (/index). This structure keeps your project scalable if you want to add other routes later, such as /admin, /docs, or additional APIs.

The mount_gradio_app function is where the magic happens for Gradio-FastAPI integration. It embeds our Gradio interface within the FastAPI application, allowing both components to work together seamlessly while maintaining their separation of concerns.

Congratulations! You've successfully connected your Gradio interface to a real backend API, transforming your application from a static prototype into a dynamic, fully functional tool. You've learned how to make API requests, process responses, handle errors gracefully, and integrate Gradio with FastAPI to create a seamless user experience. These are valuable skills that extend far beyond this project, empowering you to build sophisticated applications with clean separations between interface and processing logic.

In the upcoming practice section, you'll have the opportunity to implement everything you've learned and see your code translator in action. You'll experience firsthand how the different components work together and have the chance to experiment with various inputs and edge cases. Remember that thoughtful error handling and user feedback are just as important as the core functionality itself — they're what transform a working application into a truly user-friendly tool. Keep learning!