Overall Architecture of Our Service

This Project provides Matting Service remotely through Client-Server architecutre. Thanks to this, users can extract the foreground of an image and perform special processes regardless of hardware performance.

This page includes the following:

• A full description of the implementation of the service
• A description of the modules, techniques, and reasons used in the server-side implementation.
• A description of the modules, techniques, and reasons used in the client-side implementation.

0. Service Overall

As explained above, this project adopts Server-Client Architecture. Matting Tasks require modest computing power. However, the server-client structure solves the performance limitations of local devices, making it possible for users to create ppt materials using office laptops or create emojis through mobile devices.

The server diagram looks like this:

• When a client sends a request (Image, or message) to the server, the server sends a response in the appropriate html and image format.
• If you send a predict request, the server performs image matting and stores the result in Server Storage. And it sends the download html page as response.
• After that, when a download request comes, it sends the matted image to the client.
• When a user sends a composite request and a background image together as a request, the server performs the composite and saves the result in storage. Sends the download html page to the client.
• From the download page, the user can then send a request to download the results to Storage.

1. Server Side

This service is implemented as a web server using Flask & Apache and a web client using HTML and CSS.

• How Server Works

Users will first connect to the Apache server before accessing Flask. As a web server, Apache solves the shortcomings of Flask, which is optimized to resolve a single client's request. However, simply sticking Apache and Flask together doesn't make them communicate with each other. It is not shown in the picture, but for communication, it is necessary to use WSGI, which is made for communication between the web server and the Python app.

• Flask

What is Flask?: Python Web Framework specialized for creating websites and API servers through Python. It is also used in conjunction with Docker or Kubenetes. Large overseas sites are also adopting Flask.

Pros of Flask

• easy to enter
• You can implement a server without implementing complex code.
• Distribution is easy.

Flask makes it easy to build a server through Python. Matting Network implemented in Pytorch is stored inside this Flask server, and when a user performs a work request, it plays a role of transmitting the appropriate result.

However, Flask has limitations. Flask has achieved simplicity, but the advantages of other web server development software are almost nonexistent. Both security and authentication must be handled by the developer directly, and there is a vulnerability when multiple users access. Therefore, it is more effective to have a separate web server such as Apache or nginx.

• Apache

Apache HTTP Server is a web server program provided by the Apache Software Foundation. It is currently the most used web server program in the world.

Pros of Apache

• Various additional features
• Simple to build

2. Client Side

• How the Client works

• Crop(Image Process)

In this project, you need the ability to crop the desired area as much as you handle the image. We used the Vue library to implement Crop. Vue is a JSP image processing library that provides a variety of features. Vue provides convenient features through a familiar interface.

There are two types of crops.

• A method of cropping while enlarging and moving an image in a fixed shape
• A method of cropping while moving and enlarging a frame in a freeform shape

• HTML WebPage

We used HTML for our client implementation. By using the web, we have been able to provide services that encompass both desktop and mobile devices.