Easily Build & Run Python Gradio Applications inside the Browser with Gradio-Lite.

5 min readNov 9, 2023

In this post, I will show you how you can easily build and run a Python Gradio application right inside the browser using Gradio-lite without the need for a backend server.

It is assumed that you already have some experience building Python Gradio applications, as this post does not cover the rudiments of building a Gradio application. If you want to get started with building Gradio apps, then check out the quick start page of the Gradio website.

What is Gradio-Lite?

According to the Gradio-lite documentation, it is a new JavaScript library that enables you to run Gradio applications directly within your web browser. It achieves this by utilizing Pyodide, a Python runtime for WebAssembly, which allows Python code to be executed in the browser environment.

With it, you can easily build and run Gradio applications right inside the browser without the need for server-side architecture.

Let’s see an example right away.

Build A Calculator App

We will build a simple calculator web application. You can find the complete code at this GitHub repository: gradio-lite-calculator-app.

First, we will generate some boilerplate HTML code in VSCode by creating a new HTML file and then pressing ! + SHIFT . That should give you something like this

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Next, we will import the Gradio-lite Javascript library remotely from a content delivery network (CDN)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"></script>
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" />
    <link rel="shortcut icon" type="image/png" href="image/calc.png"/> 
    <title>Calculator</title>
</head>
<body>

In the above code, we imported the Gradio-lite Javascript library as well as the CSS file that will be used to set the theme of the application. We also added a calculator favicon (optional) to the website and gave it the title “Calculator”.

Now we will write the Python calculator function and build the Gradio application inside the Gradio-lite tags within the <body></body> tag.

<body>
    <gradio-lite theme = "dark">

        import gradio as gr
        
        def calculator(x, y, operation):
            if operation == "Addition":
                return x + y
            elif operation == "Subtraction":
                return x - y
            elif operation == "Division":
                return x/y
            elif operation == "Multiplication":
                return x * y
                
            
        gr.Interface(calculator, inputs = [gr.Number(label = "First Number"),
                                        gr.Number(label = "Second Number"),
                                        gr.Radio(["Addition","Subtraction","Division","Multiplication"],label = "Choose Operation")], 
                                        theme = gr.themes.Soft(),
                                        analytics_enabled=True,
                                        outputs = gr.Number(label = "Calculation Result"), 
                                        title = "Calculator").launch()

    </gradio-lite>
    
</body>

If you are already familiar with Gradio, you will see that the Python code is exactly the same as building a Gradio app within a Python environment.

First, we wrote the calculator function, which allows a user to select an operation to perform on two numbers parsed to the function; either to perform an addition, subtraction, division, or multiplication.

After writing the function, we build the Gradio app interface using gr.Interface() and parse a Python list of input values, namely numbers and radio buttons (gr.Number(), gr.Radio()).

We also defined the output as a number (gr.Number()) because that is what the function returns. We used what is called Gradio components to represent the input and output values of the application. We also set the theme of the application to “dark” in the Gradio-lite tag (<gradio-lite theme = “dark”>).

Then we gave the application a title (optional) and launched it with the launch() method.

This is what the complete web application code looks like

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"></script>
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" />
    <link rel="shortcut icon" type="image/png" href="image/calc.png"/> 
    <title>Calculator</title>
</head>
<body>
    <gradio-lite theme = "dark">

        import gradio as gr
        
        def calculator(x,y,operation):
            if operation == "Addition":
                return x + y
            elif operation == "Subtraction":
                return x - y
            elif operation == "Division":
                return x/y
            elif operation == "Multiplication":
                return x * y
                
            
        gr.Interface(calculator,inputs = [gr.Number(label = "First Number"),
                                        gr.Number(label = "Second Number"),
                                        gr.Radio(["Addition","Subtraction","Division","Multiplication"],label = "Choose Operation")], 
                                        theme = gr.themes.Soft(),
                                        analytics_enabled=True,
                                        outputs = gr.Number(label = "Calculation Result"), 
                                        title = "Calculator").launch()

    </gradio-lite>
    
</body>
</html>

Now when you open up your browser, you should see something like this

That’s it! Your Python Gradio application is running in your browser! Easy like that. You can go on to host the HTML file on any web-hosting platform like GitHub Pages or Netlify so that your app goes live on the web. You can take a look at the hosted app here Calculator (calculatorsoft.netlify.app).

Limitations of Gradio-Lite

One downside to building a Gradio app in the browser using Gradio-lite is long load time. It takes between 5 to 15 seconds for the app to load. This is because the browser needs to load the Pyodide runtime before it can render Python code. Another downside is that, not all Python libraries are supported by Pyodide at the moment.

If you are writing an application that does not have much package dependency, then you are good to go. If your application does have many package dependencies, then you should check whether the dependencies are included in Pyodide.

But this is not to take anything away from this cool new Javascript library. It is worth exploring and having fun with. Great job by the developers!

I hope you found this post helpful! If yes, then please drop a 👏 below and share. Thanks! 😃

Follow me on Medium: Ifeanyi Idiaye

Follow me on X (formerly Twitter): @Ifeanyidiaye

You may also check out my other Medium posts below:

How to Check Code Runtime in R, Python, and Javascript | by Ifeanyi Idiaye | Oct, 2023 | Dev Genius

10 Python Dictionary Methods You Should Know | by Ifeanyi Idiaye | Oct, 2023 | Dev Genius

Build A Web Article Summarizer in R | by Ifeanyi Idiaye | Dev Genius

Easily Convert PDF File to Word Using {Convert2Docx} R Package | by Ifeanyi Idiaye | Medium

How to Deploy an R Shiny App as a Hugging Face Space | by Ifeanyi Idiaye | Medium

Easily Build & Run Python Gradio Applications inside the Browser with Gradio-Lite.

Written by Ifeanyi Idiaye