How to Make a Cool App with Gradio!

Hey there, my coders! I am back with something different from my usual content. Today we gonna learn about Gradio! It's like magic for making apps that help people to talk to computer.

Now you might be thinking what is this gradio?

What is Gradio?

Imagine gradio as a magic wand for making apps. Imagine having a pet robot, and you want to ask it questions or show it pictures, and it answers you back! Gradio helps you build an interface where you can type things or give pictures, and computer can respond to it.

You don't need to know a lot about coding to get started. It is very basic and easy to use. Let's see how you can use it!

Step 1: Setting Up Gradio

Before getting started, we need to tell the computer to install Gradio.

1. Open your terminal.

2. Type this in terminal:

pip install gradio

This command will help you to install gradio and set it up for you. Now you are all set to create apps!

Step 2: Creating a Super Simple App

Let's make our very first app! In this app computer will ask for your name, and the computer will says hello to you. Sounds fun, right?

Write This Code:

import gradio as gr

def greet(name):
return "Hello, " + name + "!"

iface = gr.Interface(fn=greet, inputs="text", outputs="text")
iface.launch()

Now you must be thinking what is happening in this code, Let's break it down:

1. import gradio as gr: This is like saying computer to use gradio to make app.

2. def greet(name): This is the function asking your name and will return you Hello with your name.

3. iface = gr.Interface(fn=greet, inputs="text", outputs="text"): This part tells gradio how to build the app. It will take some text as input and return text as output.

4. iface.launch(): This helps us starting the app.

Now run your code, you will see a box where you can write your name, and the computer will greet you. Isn't it cool, try typing your name.

Step 3: Making It More Fun with Pictures!

Let's make the app more cooler by adding pictures! In this, we will show computer some pictures and tell the computer to identify it.

We’ll use a machine learning model that already knows what many animals look like.

Write This code:

import gradio as gr
from tensorflow.keras.applications.resnet50 import ResNet50, decode_predictions, preprocess_input
from tensorflow.keras.preprocessing import image
import numpy as np

model = ResNet50(weights="imagenet")

def classify_image(img):
img = image.img_to_array(img)
img = np.expand_dims(img, axis=0)
img = preprocess_input(img)
preds = model.predict(img)
return decode_predictions(preds, top=1)[0][0][1]

iface = gr.Interface(fn=classify_image, inputs="image", outputs="label")
iface.launch()

Let's break down this code, to understand its functionality better:

1. Loading the model: We are uploading ResNet50 as brain of our computer, this helps the computer to guess what's in your picture.

2. classify_image: This function takes the image and guess what it sees.

3. inputs="image": Now here instead of text our app is asking for picture as input.

Now you can run the code, upload a picture and let computer guess it. You can upload anything in it.

Step 4: Sharing Your App with Friends!

Now that you have made a cool app, let's now share it with your network and friends. Gradio makes this super easy by giving you a special link you can share with anyone in the world!

Here's How You Do It:

Change the last part of your code to this:

iface.launch(share=True)

When you run this code, Gradio will give you a link that you can send to your friends. They can open the link in their browser and play with your app, just like you are!

Step 5: Adding More Fun Features

You can customise your gradio app the way you want, let's see some ways to make your app more fun:

1. Change the Title and Description

You can give your app a good title and description to make it more interactive.

iface = gr.Interface(
fn=classify_image,
inputs="image",
outputs="label",
title="Animal Classifier",
description="Upload an image, and I'll guess what animal it is!"
)
iface.launch()

Now your app looks way more cooler it has a name and a description now which makes it look more professional.

2.Use More Inputs and Outputs

What if you want to give computer more information? Maybe you want to show it both a picture and type some text, Gradio can handle that too!

Here’s how you can make an app with both an image and text as input:

iface = gr.Interface(
fn=classify_image,
inputs=["image", "text"],
outputs="label"
)
iface.launch()

Now your app will take both an image and some text. It’s like your computer just got smarter!

Conclusion

Wow! You have just learned how to make cool apps using Gradio! You can make a lot of apps using it and it makes coding really fun. You can explore more about it here.

I hope you enjoyed this blog, if you did don't forget to follow me on Linkedin and Github. Come on I also deserve some fame and if you don't please criticise me in comments.

Happy Coding!!