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.

• Gradio -GitHub --sey323 / gradio-esrgan: A program that runs ESRGAN on a web screen

Execution environment

• Ubuntu18.04
• Python3.8.0

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

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.

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.

• http://127.0.0.1:7860/

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.

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.

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