Text only | Text with Images

Cobra Forum

Plesk Panel => Web Application => Topic started by: mahesh on Dec 23, 2023, 06:20 AM

Title: How to Build ML Web Apps using Gradio
Post by: mahesh on Dec 23, 2023, 06:20 AM
(https://pix.cobrasoft.org/images/2023/12/23/h0OWlSR.png)
Introduction
Gradio is a Python package that allows developers to create customizable and interactive interfaces for Machine Learning models. Deployed as a web application, Gradio allows you to build a production-ready application on top of your machine learning model and avail to Internet users using your Server IP address or domain name.

This article explains how to build machine learning web applications using Gradio. You will create a Gradio interface, integrate a working machine learning model into the web application interface, and implement additional interface features using a Vultr Cloud Server.

Prerequisites
Before you begin:


Code Select
  # su gradio_user
Create the Gradio Interface
To build a new interface, install Gradio on the server, and set up your application as described in the steps below.

1.Using the Python pip package manager, install the Gradio package

Code Select
$ pip3 install gradio
2.Using a text editor such as Nano, create a new Python file app.py

Code Select
$ nano app.py
3.Add the following code to the file
Code Select
import gradio as gr
 def test(name):
     return "Hi " + name + "! Welcome to the App"


 interface = gr.Interface(fn=test, inputs= gr.Textbox(), outputs= gr.Textbox())

 interface.launch(server_name="0.0.0.0", server_port=8080) Save and close the file

4.Below is what the application code does:

4.To accept incoming connections to the Gradio interface, allow the listening port 8080 through the UFW firewall

Code Select
$ sudo ufw allow 8080
5.Restart the firewall to save changes

Code Select
$ sudo ufw reload
6.Using Python, run the Gradio application file

Code Select
$ python3 app.py
When successful, your output should look like the one below:

Code Select
Running on local URL:  http://0.0.0.0:8080
7.Using a web browser such as Firefox, visit your public Server IP Address on port 8080

Code Select
http://SERVER-IP:8080
(https://pix.cobrasoft.org/images/2023/12/23/8ImerQY.png)
Verify that the Gradio web application loads successfully. Then, enter your name in the name field and click Submit to view the output. In your terminal session, press CTRL + C to stop the application.

Example: Build an Image Restoration Web Application using Gradio
To leverage the power of your Gradio web application, build and integrate the GFPGAN model to perform image restoration tasks with the ability to upscale any low-resolution image as described below.

1.Using pip, install the latest PyTorch package

Code Select
$ pip3 install torch torchvision --index-url https://download.pytorch.org/whl/cu118
2.Install GFPGAN and the model dependency packages

Code Select
$ pip3 install realesrgan gfpgan basicsr
3.Create a new Python application file model.py

Code Select
$ nano model.py
4.Add the following code to the file

Code Select
import gradio as gr
 from gfpgan import GFPGANer
 from basicsr.archs.rrdbnet_arch import RRDBNet
 from realesrgan import RealESRGANer
 import numpy as np
 import cv2
 import requests

 def enhance_image(input_image):
     arch = 'clean'
     model_name = 'GFPGANv1.4'
     gfpgan_checkpoint = 'https://github.com/TencentARC/GFPGAN/releases/download/v1.3.4/GFPGANv1.4.pth'
     realersgan_checkpoint = 'https://github.com/xinntao/Real-ESRGAN/releases/download/v0.2.1/RealESRGAN_x2plus.pth'

     rrdbnet = RRDBNet(num_in_ch=3, num_out_ch=3, num_feat=64, num_block=23, num_grow_ch=32, scale=2)

     bg_upsampler = RealESRGANer(
         scale=2,
         model_path=realersgan_checkpoint,
         model=rrdbnet,
         tile=400,
         tile_pad=10,
         pre_pad=0,
         half=True
     )

     restorer = GFPGANer(
         model_path=gfpgan_checkpoint,
         upscale=2,
         arch=arch,
         channel_multiplier=2,
         bg_upsampler=bg_upsampler
     )

     input_image = input_image.astype(np.uint8)
     cropped_faces, restored_faces, restored_img = restorer.enhance(input_image)

     return restored_faces[0], restored_img

 interface = gr.Interface(
     fn=enhance_image,
     inputs=gr.Image(),
     outputs=[gr.Image(), gr.Image()],
     live=True,
     title="Face Enhancement with GFPGAN",
     description="Upload an image of a face and see it enhanced using GFPGAN. Two outputs will be displayed: restored_faces and restored_img."
 )   

 interface.launch(server_name="0.0.0.0", server_port=8080)
Save and close the file

Below is what the above code does:

5.Run the Python application file

Code Select
$ python3 model.py
6.In a new web browser window, access the Gradio web application interface

Code Select
https://SERVER-IP:8080
(https://pix.cobrasoft.org/images/2023/12/23/Screenshot-2023-08-29-at-1-11-20-AM.png)Verify that you can upload an input image and two restored images display in your output.

Customize the Gradio Interface
The example web application in this article uses the image Gradio type to generate the interface. To customize your application, you can implement any of the following supported Gradio input and output functions:

For example, to implement Text input and output type, apply the function to your respective interface as below:

Code Select
interface = gr.Interface(
    fn=FUNCTION_NAME,  # Your Desired Function Name
    inputs=gr.Textbox(), 
    outputs=gr.Textbox()
)To implement more than one function in a single interface, set your interface to the following

Code Select
interface = gr.Interface(
    fn=FUNCTION_NAME,  # Your Desired Function Name
    inputs=[gr.Image(), gr.Audio()],
    outputs=[gr.Video(), gr.Textbox()]
)Depending on your model requirements, you can change the inputs and outputs types. Before implementing a function, verify if it's available for either input or output. For more input and output types, visit the Gradio Interface documentation.

Conclusion
In this article, you installed Gradio and created a sample image restoration application on a Vultr Cloud GPU server. You can customize your Gradio interface with more models, and server the web application using your domain name by integrating a reverse proxy such as Nginx for public access. To implement login functionality, visit the Gradio login button documentation page.

More Information
Text only | Text with Images