Create a web page that runs a model that increases the resolution of the image using gradio, which makes it easy to create a web screen

Overview

In order to effectively show the performance of a model as a demo after creating a model by deep learning etc., it is more familiar and preferable for many people (especially non-engineers) to show it in GUI rather than executing it in CUI. However, it is difficult to create a GUI screen that matches the model at each demo, and most of the developers have been tired of learning the model and adjusting parameters, so there is still the motivation to implement the GUI. Not (← It is due to personal experience and I admit disagreement).

At that time, I found something called Gradio that can create a simple Web GUI with a minimum of coding, so I actually tried using it.

This time, we will develop a method to execute ESRGAN, which is a GAN method for enlarging the resolution of images published on Tensorhub by 4 times, from a Web GUI.

The created web screen looks like the following.

スクリーンショット 2020-11-23 18.18.08.png

Execution environment

Those who want to get started right away

After executing the following command, access http://127.0.0.1:7860/.

git clone https://github.com/sey323/gradio-esrgan.git
cd gradio-esrgan
pip install -r requirements.txt
python gradio-esrgan.py

Implementation

0. Big picture

Overview of source code
import gradio as gr
import tensorflow as tf
import tensorflow_hub as hub

model = hub.load("https://tfhub.dev/captain-pool/esrgan-tf2/1")


def predict(
    inp,
):
    """
Use ESRGAN to convert the input image to 4x resolution.
    https://tfhub.dev/captain-pool/esrgan-tf2/1
    inp :
Input image
    """
    h, w, c = inp.shape  #Get the image size from the input image
    inp = inp.reshape((-1, h, w, c))
    inp = tf.cast(inp, tf.float32)
    output = model(inp)
    output = tf.cast(tf.clip_by_value(output[0], 0, 255), tf.uint8)
    return output


def gradio_gui():
    """
Define gradio Gui screen
    """
    image = gr.inputs.Image(label="Input Image",)
    output = gr.outputs.Image(label="Output Image", type="numpy")

    interface = gr.Interface(fn=predict, inputs=image, outputs=output)
    interface.launch()


if __name__ == "__main__":
    gradio_gui()

1. Install tensorflow hub, gradio

Install tensorflow hub

Install Tensorflow hub by referring to Official site.

pip install "tensorflow>=2.0.0"
pip install --upgrade tensorflow-hub

Install gradio

Install by referring to Official Site.

pip install gradio

2. Use the Tensorflow hub model

With reference to the official website of TensorFlow Hub, download the ESRGAN model that converts the low-resolution image used this time to high-resolution and create a program to use. I created a method that converts the input image into a format that can be learned by Tensorflow and returns a high resolution image so that it can be executed by Gradio.

import tensorflow as tf
import tensorflow_hub as hub

model = hub.load("https://tfhub.dev/captain-pool/esrgan-tf2/1")


def predict(
    inp,
):
    """
Use ESRGAN to convert the input image to 4x resolution.
    https://tfhub.dev/captain-pool/esrgan-tf2/1
    inp :
Input image
    """
    h, w, c = inp.shape  #Get the image size from the input image
    inp = inp.reshape((-1, h, w, c))
    inp = tf.cast(inp, tf.float32)
    output = model(inp)
    output = tf.cast(tf.clip_by_value(output[0], 0, 255), tf.uint8)
    return output

3. Web screen definition using gradio

gradio is roughly divided into three classes.

class Overview
gr.inputs Input given to the model(Image, Textbox,Audio etc.)
gr.outputs Model output(Image, Textbox,Audio etc.)
gr.Interface Define functions, inputs and outputs to be executed by Gradio and draw a web screen.

For inputs and outputs, you can select text, voice, checkboxes, sliders, etc. in addition to images, so you can flexibly respond to the model you use. ESRGAN used this time uses only Image for both input and output, so select Image. Image is passed in the form of pillow.

Gradio | Docs

python


import gradio as gr

~~~~abridgement~~~~~

def gradio_gui():
    """
Define gradio Gui screen
    """
    image = gr.inputs.Image(label="Input Image",)
    output = gr.outputs.Image(label="Output Image", type="numpy")

    interface = gr.Interface(fn=predict, inputs=image, outputs=output)
    interface.launch()


if __name__ == "__main__":
    gradio_gui()

Operation check

After controlling the above program, execute it with the following command.

python


$ python gradio-esrgan.py 
2020-11-23 01:39:34.566267: I tensorflow/compiler/xla/service/service.cc:168] XLA service 0x7f9d83e7e520 initialized for platform Host (this does not guarantee that XLA will be used). Devices:
2020-11-23 01:39:34.566291: I tensorflow/compiler/xla/service/service.cc:176]   StreamExecutor device (0): Host, Default Version
Running locally at: http://127.0.0.1:7860/
To get a public link for a hosted model, set Share=True
Interface loading below...
<IPython.lib.display.IFrame object at 0x147170040>

The URL will be displayed after execution, so access that.

gradio2.png

When you access the Web screen, the above screen is displayed. The left panel shows the input element specified in gr.inputs, and the output shows the output element specified in gr.outputs.

スクリーンショット 2020-11-23 18.18.08.png

Try enlarging the image of Mandrill. The image to be input can be dragged and dropped to the input area. After waiting a few seconds, the processed image will be displayed in the "OUTPUT IMAGE" area. Download the image from the right click by saving and compare it with the enlarged image.

result.png

The image on the left is enlarged to the same size in the Finder, and the image on the right is the generated image. It can be confirmed that the fur lines and contour lines are expressed much sharper in the one enlarged by ESRGAN.

At the end

I was able to create a web screen that allows me to easily publish a model created in Tensorflow using Gradio. The definition of the web screen only needs to be described for the three modules, so once you get used to it, you can create a web page in less than 10 minutes.

GradioHub has a variety of other interesting samples, so see here for what happens when you use other texts and audio.

Gradio | Hub

Recommended Posts

Create a web page that runs a model that increases the resolution of the image using gradio, which makes it easy to create a web screen
A story that makes it easy to estimate the living area using Elasticsearch and Python
A script that makes it easy to create rich menus with the LINE Messaging API
[Python] I wrote a test of "Streamlit" that makes it easy to create visualization applications.
I tried to make a site that makes it easy to see the update information of Azure
A story that makes it easier to see Model debugging in the Django + SQLAlchemy environment
Try to edit a new image using the trained StyleGAN2 model
[Go] Create a CLI command to change the extension of the image
[Ev3dev] Create a program that captures the LCD (screen) using python
How to create a wrapper that preserves the signature of the function to wrap
I want to create a web application that uses League of Legends data ①
Create a web app that converts PDF to text using Flask and PyPDF2
[AWS Lambda] Create a deployment package using the Docker image of Amazon Linux
I tried to create a model with the sample of Amazon SageMaker Autopilot
[Python3] Take a screenshot of a web page on the server and crop it further
I wrote a class that makes it easier to divide by specifying part of speech when using Mecab in python
I made a tool that makes it a little easier to create and install a public key.
Steps to create a Job that pulls a Docker image and tests it with Github Actions
I made a function to crop the image of python openCV, so please use it.
I tried using PI Fu to generate a 3D model of a person from one image