Build interactive machine learning apps using gradients

As a developer using machine learning models, you may spend time writing scripts and adjusting hyperparameters. However, when you share your work or allow others to interact with the model, you can feel the huge gap between Python scripts and available web apps. Gradation An open source Python library that allows you to turn Python scripts into interactive web applications without the need for FrontEnd expertise.

In this blog, we will take a fun, hands-on approach to learning the main gradient components. Speech from text Web applications that can be run with (TTS) an AI PC or Intel®Tiber™ AI Cloud Share it with others. (Full disclosure: The author is affiliated with Intel.)

Project Summary: TTS Python Script

Develop basic Python scripts using the Coqui TTS library and the itself xtts_v2 Multilingual model. To proceed with this project, requirements.txt Files containing the following content:

gradio
coqui-tts
torch

Next, create a virtual environment and install these libraries with

pip install -r requirements.txt

Alternatively, if you are using Intel Tiber AI Cloud, or if your system has a UV package manager installed, create a virtual environment and install the library

uv init --bare
uv add -r requirements.txt

Then you can run the script

uv run 

Gangcha Alert For compatibility with recent dependency versions, I use “Coqui-tts”, a fork of the original Coqui `tts`. Therefore, do not try to install the original package with pip install TTS.

You can then create the imports you need for the script.

import torch
from TTS.api import TTS

Currently “TTS” has access to 94 models that can be run and listed

print(TTS().list_models())

In this blog, we will use XTTS-v2 A model that supports 17 languages ​​and 58 speaker voices. You can load the model and view it via the speaker

tts = TTS("tts_models/multilingual/multi-dataset/xtts_v2")

print(tts.speakers)

This is a minimal Python script that generates speeches from text.

import torch
from TTS.api import TTS

tts = TTS("tts_models/multilingual/multi-dataset/xtts_v2")

tts.tts_to_file(
    text="Every bug was once a brilliant idea--until reality kicked in.",
    speaker="Craig Gutsy",
    language="en",
    file_path="bug.wav",
)

This script works, but is not interactive. What if the user wants to enter their text, select the speaker and get the audio output straight away? That's where the gradation shines.

Gradient app anatomy

A typical gradient app consists of the following components:

• interface To define inputs and outputs
• component Like Textbox, Dropdownand Audio
• function To link backend logic
• . launch() Spin up and share apps with options share=True.

interface The class has three core arguments: fn, inputand output. Assignment (or settings) fn Arguments to the Python function you want to wrap in the user interface (UI). Inputs and outputs use one or more gradient components. You can pass these components as strings by name. "textbox" or "text"or for more customizability, an instance of a class like textbox().

import gradio as gr


# A simple Gradio app that multiplies two numbers using sliders
def multiply(x, y):
    return f"{x} x {y} = {x * y}"


demo = gr.Interface(
    fn=multiply,
    inputs=[
        gr.Slider(1, 20, step=1, label="Number 1"),
        gr.Slider(1, 20, step=1, label="Number 2"),
    ],
    outputs="textbox",  # Or outputs=gr.Textbox()
)

demo.launch()

Flag The buttons are displayed by default in the interface, allowing users to flag “interesting” combinations. In this example, when you press the flag button, Gradio generates a CSV log file below .gradio\flagged With the following content:

Number 1,Number 2,output,timestamp

12,9,12 x 9 = 108,2025-06-02 00:47:33.864511

You can set this flag operation option to turn off flagging_mode="never" In the interface.

Also, please note that you can delete the submit button and trigger it automatically multiply Functions based on settings live=True In the interface.

Convert TTS scripts to gradient apps

As proven, Gradio's core concept is simple. Wrap Python functionality in the UI Interface class. Here's how to turn a TTS script into a web app:

import gradio as gr
from TTS.api import TTS

tts = TTS("tts_models/multilingual/multi-dataset/xtts_v2")


def tts_fn(text, speaker):
    wav_path = "output.wav"
    tts.tts_to_file(text=text, speaker=speaker, language="en", file_path=wav_path)
    return wav_path


demo = gr.Interface(
    fn=tts_fn,
    inputs=[
        gr.Textbox(label="Text"),
        gr.Dropdown(choices=tts.speakers, label="Speaker"),
    ],
    outputs=gr.Audio(label="Generated Audio"),
    title="Text-to-Speech Demo",
    description="Enter text and select a speaker to generate speech.",
)
demo.launch()

With just a few lines, you can use a web app that lets users enter text, choose speakers, and listen to generated audio. Sharing this app is as easy as replacing the last line with demo.launch(share=True)it will instantly provide you with a public URL. For production or permanent hosting, you can unlock grade apps in your face space for free or run them on your own server.

Beyond the Interface: Power User Block

The interface is suitable for most use cases, but also offers Gradio blocka low-level API for building complex multi-step apps with complex layouts, multiple functions, and dynamic interactivity. Blocks allow you to:

• Place components in rows, columns, or tabs
• Chain output as input to other functions
• Dynamically update component properties (e.g. Hide/Show, Enable/Disable)
• Build a dashboard, multimodal app, or a full-featured web UI

This is the taste of what is possible with a simple app that counts the number of words as soon as the user completes the typing, allowing the user to clear input and output with one button. This example shows how to control the layout of your app with line Here are two important event types: .change() and .click().

import gradio as gr


def word_count(text):
    return f"{len(text.split())} word(s)" if text.strip() else ""


def clear_text():
    return "", ""


with gr.Blocks() as demo:
    gr.Markdown("## Word Counter")

    with gr.Row():
        input_box = gr.Textbox(placeholder="Type something...", label="Input")
        count_box = gr.Textbox(label="Word Count", interactive=False)

    with gr.Row():
        clear_btn = gr.Button("Clear")

    input_box.change(fn=word_count, inputs=input_box, outputs=count_box)
    clear_btn.click(
        fn=clear_text, outputs=[input_box, count_box]
    )  # No inputs needed for clear_text

demo.launch()

If you're interested in the types of these components, try it

print(type(input_box))  # 

Note that at runtime, you cannot “read” the values ​​of Textbox Like a variable. Gradient components are not live bound to Python variables. This simply defines the UI and behavior. Actual value of a Textbox It is only passed to the Python feature when it exists (in the browser) on the client and occurs when a user interaction occurs ( .click() or .change()). If you are investigating advanced flows (such as maintaining state or syncing), Gradio's state It may be convenient.

Grade Component Update

Gradio offers some flexibility when it comes to updating components. Consider the following two code snippets: However, it looks a little different, but does the same thing. Textbox When the button is clicked.

Option 1: Returns the new value directly

import gradio as gr


def update_text(box):
    return "Text successfully launched!"


with gr.Blocks() as demo:
    textbox = gr.Textbox(value="Awaiting launch sequence", label="Mission Log")
    button = gr.Button("Initiate Launch")

    button.click(fn=update_text, inputs=textbox, outputs=textbox)

demo.launch()

Option 2: use gr.update()

import gradio as gr


def update_text():
    return gr.update(value="Text successfully launched!")


with gr.Blocks() as demo:
    textbox = gr.Textbox(value="Awaiting launch sequence", label="Mission Log")
    button = gr.Button("Initiate Launch")

    button.click(fn=update_text, inputs=[], outputs=textbox)

demo.launch()

So which one should you use? If you just want to update value It's perfectly fine to return a plain string (or number, or what the component expects) of a component. However, if you want to update other properties, such as hiding a component, changing labels, or disabling it, gr.update() It's the way to go.

Understanding any kind of object is also helpful gr.update() I'll come back to dispel some of the mysteries around it. For example, under the hood gr.update(visible=False) It's just a dictionary:

{'__type__': 'update', 'visible': False}

It's a small detail, but knows when and how to use it gr.update() It allows your grade apps to be more dynamic and responsive.

If you find this article valuable, consider sharing it with your network. For more AI development how-to content, visit Intel® AI Development Resources.

Hugging the face space of a wide range of machine learning applications. Be sure to learn from others and be able to research the code and share work with the community.

Acknowledgments

The authors thank Jack Erickson for providing feedback on previous drafts of this work.

resource