Gradio: quickly build your webApp

Original article: Gradio: Quickly Build Your WebApp_Python_AIWeker_InfoQ Writing Community

1. What is Gradio

If you know web development, you will know that developing a webApp involves many technology stacks:

Front-end: HTML + CSS + JS (may involve different CSS frameworks and JS frameworks such as jquery VUE react, etc.)
Backend language: such as python/java
web container: such as flask/tomcat

What should you do if you only know python and don't want to learn the above technologies all over again?

As far as I know there are two solutions:

streamlit （https://streamlit.io/）
Gradio （https://gradio.app/）

I have introduced streamlit before. What I want to share today is that Gradiothe functions provided are similar to streamlit. You can quickly build a webApp as long as you know python.

As can be seen from the figure above, Gradio's positioning is to quickly build a python webApp library for artificial intelligence, which can be used in advertisements on platforms that provide various model reasoning displays such as Hugging Face, and Ali's magic tower display is also based on this.

Think about it, what is the underlying logic of Gradio as a python library?

Result: Gradio still displays the web element
Process: So Gradio is a developer who understands both python and web development (css/js/html), and encapsulates these web technologies through python
pipline: python language --> css/js/html

The same should be true for streamlit, as is the pyecharts introduced before (the encapsulation is echarts, Baidu's visualization framework.

The development of open source masters is convenient for you and me, like it!

2. Easy to use

Let's experience the convenience of Gradio.

Install:

Requires python>=3.7

pip install -U pip -i https://pypi.tuna.tsinghua.edu.cn/simplepip install gradio  -i https://pypi.tuna.tsinghua.edu.cn/simple

copy code

Simple example:

# app.pyimport gradio as gr
def greet(name):    return "Hello " + name + "!"
demo = gr.Interface(fn=greet, inputs="text", outputs="text")
demo.launch(server_name="0.0.0.0")
# 启动# python -u app.py# Running on local URL:  http://0.0.0.0:7860# To create a public link, set `share=True` in `launch()`

copy code

The above code is a simple webApp, the function is to input a text and output a text. Key points in the code:

import packageimport gradio as gr
gr.Interface builds an app, determines the type of input inputs and output outputs, and has a function for processing input inputs (this function returns a type of outputs)
Provide an app's function module function
launch Start a web container to provide external services

Sort out the web rendering process

Encapsulate html components (with css style, layout, etc.) according to input and output types (such as text)
Click submit: Get the input value through js and pass it (ajax) to the background processing function (greet), receive the return value of the function through the js callback function, and then assign it to the html element through js

3. Component introduction

The above just introduces the simple use of Gradio. Gradio provides rich html components, such as text boxes, images, videos, drop-down boxes, radio boxes, check boxes and so on.

Let's look at a more common display in machine vision reasoning: input a picture, output a picture, and provide download.

import gradio as grfrom transformers import DPTFeatureExtractor, DPTForDepthEstimationimport torchimport numpy as npfrom PIL import Imageimport open3d as o3dfrom pathlib import Pathimport os
feature_extractor = DPTFeatureExtractor.from_pretrained("Intel/dpt-large")model = DPTForDepthEstimation.from_pretrained("Intel/dpt-large")
def process_image(image_path):    image_path = Path(image_path)    image_raw = Image.open(image_path)    image = image_raw.resize(        (800, int(800 * image_raw.size[1] / image_raw.size[0])),        Image.Resampling.LANCZOS)
    # prepare image for the model    encoding = feature_extractor(image, return_tensors="pt")
    # forward pass    with torch.no_grad():        outputs = model(**encoding)        predicted_depth = outputs.predicted_depth
    ## ... 省略    return [img, gltf_path, gltf_path]
title = "Demo: zero-shot depth estimation with DPT + 3D Point Cloud"description = "This demo is a variation from the original DPT Demo. It uses the DPT model to predict the depth of an image and then uses 3D Point Cloud to create a 3D object."examples = [["examples/1-jonathan-borba-CgWTqYxHEkg-unsplash.jpg"]]
iface = gr.Interface(fn=process_image,                     inputs=[gr.Image(                         type="filepath", label="Input Image")],                     outputs=[gr.Image(label="predicted depth", type="pil"),                              gr.Model3D(label="3d mesh reconstruction", clear_color=[                                                 1.0, 1.0, 1.0, 1.0]),                              gr.File(label="3d gLTF")],                     title=title,                     description=description,                     examples=examples,                     allow_flagging="never",                     cache_examples=False)
iface.launch(debug=True, enable_queue=False)

copy code

The above code ignores some details of model reasoning, and mainly focuses on the corresponding results of rendering are inputs and outputs. It can be seen that

Both inputs and outputs can be multiple, and Gradio displays the corresponding components according to the type
Among them: inputs is the gr.Image image, and the parameter of the corresponding processing function is the file pathtype="filepath"
Among them: outputs has three outputs (a distribution is a picture, a 3D picture, and a file), and the three outputs here correspond to the three returns of the processing function. Three outputs will correspond to three display renderings, two images and one file download
In addition, from the display results, there is a list of internal cases at the bottom to examples=examplesdisplay and render through parameters, which is very useful to display the best rendering of the model.

For more components, see API

https://gradio.app/docs/

In addition, you can use .launch(share=True)the sharing function, which can generate a domain name that can be directly accessed externally.

4. Summary

This article briefly shared the process of quickly building a webApp through the python library Gradio, summarized as follows:

The essence of Gradio is a python library that encapsulates components such as html+css+js
The best scenario for Gradio is to demonstrate the inference effect of machine learning (interactive)
gr.Interface to render the effect, note that inputs and outputs are the content to be rendered
Remember the detailed component API: https://gradio.app/docs/