Gradio: construya rápidamente su aplicación web

Artículo original: Gradio: cree rápidamente su comunidad de escritura WebApp_Python_AIWeker_InfoQ

1. Qué es Gradio

Si conoce el desarrollo web, sabrá que desarrollar una aplicación web implica muchas pilas de tecnología:

Front-end: HTML + CSS + JS (puede involucrar diferentes marcos CSS y marcos JS como jquery VUE react, etc.)
Lenguaje de fondo: como python/java
contenedor web: como matraz/tomcat

¿Qué debe hacer si solo sabe Python y no quiere aprender las tecnologías anteriores de nuevo?

Que yo sepa hay dos soluciones:

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

He introducido streamlit antes. Lo que quiero compartir hoy es que Gradiolas funciones proporcionadas son similares a las de streamlit. Puede crear rápidamente una aplicación web siempre que sepa Python.

Como se puede ver en la figura anterior, el posicionamiento de Gradio es construir rápidamente una biblioteca de aplicaciones web de python para inteligencia artificial, que se puede usar en anuncios en plataformas que brindan varias pantallas de razonamiento modelo como Hugging Face, y la pantalla de la torre mágica de Ali también se basa en este.

Piénselo, ¿cuál es la lógica subyacente de Gradio como biblioteca de Python?

Resultado: Gradio todavía muestra el elemento web
Proceso: Entonces, Gradio es un desarrollador que entiende tanto Python como el desarrollo web (css/js/html), y encapsula estas tecnologías web a través de Python.
pipline: lenguaje python --> css/js/html

Lo mismo debería ser cierto para streamlit, al igual que los pyecharts presentados anteriormente (la encapsulación es echarts, el marco de visualización de Baidu.

El desarrollo de maestros de código abierto es conveniente para usted y para mí, ¡me gusta!

2. Fácil de usar

Experimentemos la conveniencia de Gradio.

Instalar:

Requiere 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

copiar codigo

Ejemplo sencillo:

# 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()`

copiar codigo

El código anterior es una aplicación web simple, la función es ingresar un texto y generar un texto. Puntos clave en el código:

paquete de importaciónimport gradio as gr
gr.Interface crea una aplicación, determina el tipo de entrada, entrada y salida, y tiene una función para procesar las entradas (esta función devuelve un tipo de salida)
Proporcionar la función del módulo de función de una aplicación
lanzamiento Iniciar un contenedor web para proporcionar servicios externos

Ordenar el proceso de renderizado web

Encapsule componentes html (con estilo css, diseño, etc.) de acuerdo con los tipos de entrada y salida (como texto)
Haga clic en enviar: obtenga el valor de entrada a través de js y páselo (ajax) a la función de procesamiento en segundo plano (saludo), reciba el valor de retorno de la función a través de la función de devolución de llamada js y luego asígnelo al elemento html a través de js

3. Introducción de componentes

Lo anterior solo presenta el uso simple de Gradio. Gradio proporciona componentes html enriquecidos, como cuadros de texto, imágenes, videos, cuadros desplegables, cuadros de radio, casillas de verificación, etc.

Veamos una pantalla más común en el razonamiento de visión artificial: ingrese una imagen, emita una imagen y proporcione descarga.

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)

copiar codigo

El código anterior ignora algunos detalles del razonamiento del modelo y se centra principalmente en los resultados correspondientes de la representación de entradas y salidas. Puede observarse que

Tanto las entradas como las salidas pueden ser múltiples, y Gradio muestra los componentes correspondientes según el tipo
Entre ellos: las entradas son la imagen gr.Image, y el parámetro de la función de procesamiento correspondiente es la ruta del archivotype="filepath"
Entre ellos: salidas tiene tres salidas (una distribución es una imagen, una imagen 3D y un archivo), y las tres salidas aquí corresponden a los tres retornos de la función de procesamiento. Tres salidas corresponderán a tres representaciones de visualización, dos imágenes y una descarga de archivo
Además, a partir de los resultados de visualización, hay una lista de casos internos en la parte inferior para examples=examplesmostrar y renderizar a través de parámetros, lo cual es muy útil para mostrar la mejor representación del modelo.

Para más componentes, consulte API

https://gradio.app/docs/

Además, puede utilizar .launch(share=True)la función de compartir, que puede generar un nombre de dominio al que se puede acceder directamente desde el exterior.

4. Resumen

Este artículo compartió brevemente el proceso de creación rápida de una aplicación web a través de la biblioteca de python Gradio, resumido de la siguiente manera:

La esencia de Gradio es una biblioteca de Python que encapsula componentes como html+css+js
El mejor escenario para Gradio es demostrar el efecto de inferencia del aprendizaje automático (interactivo)
gr.Interfaz para renderizar el efecto, tenga en cuenta que las entradas y salidas son el contenido a renderizar
Recuerda la API detallada del componente: https://gradio.app/docs/