Memories of the past, with the eyes of the future

​

• Introduction
• About Sharpic
• System Architecture
• Implementation
• Scenario & Demo
• Team Assignments
• Future Plan

CONTENTS

Introduction

1. Motivation
2. Limitation of existing solutions

1

| The problem of lowering the quality of the picture:

-> So, develop the photo-enhancing cloud applications � to solve above problem.

Motivation

1. Introduction

| There were many existing approaches/solutions (at Cloud services).

| But there were some issues/problems like below.

Limitation of existing solutions

1. Introduction

About Sharpic

• Overview
• Main features

2

| What is ‘Sharpic’:

Overview

2. Project ‘Sharpic’

• A service that helps give a new sight of the memory.

• Using Deep-learning SR model with React-Frontend

| Technologies in ‘Sharpic’:

Main features

2. Project ‘Sharpic’

• Various photo-enhance options.

• No need to use user’s local computing power.

• General people also can use easily the deep-learning methods.

: Super Resolution, Photo enhancement and 2D photo enhancement

: All processing is worked in server

System Architecture

• Backend-Frontend
• Processing Server
• Overall system architecture

3

Front-Backend

3. System Architecture

Processing

3. System Architecture

Implementation

• Introduction of technology
• Image Processing Model
• Web Frontend
• Backend Server

4

Introduction of Technology

4. Implementation

Deep-learning based Processing model

Container based cloud

SPA with React.js

Image processing model

4. Implementation

For image restoration: Various domains

RealSR

​

​

Bringing Old Photo Back to Life

​

​

Waifu2x

Image processing model

4. Implementation

For image restoration: Various domains

RealSR

​

​

Bringing Old Photo Back to Life

​

​

Waifu2x

Image processing model

4. Implementation

For image restoration: Super resolution

• Real-World image restoration model�: RealSR�: Add real noise into the LR image�

EDSR

Real SR

https://openaccess.thecvf.com/content_CVPRW_2020/papers/w31/Ji_Real-World_Super-Resolution_via_Kernel_Estimation_and_Noise_Injection_CVPRW_2020_paper.pdf

• PSNR VS Visual Quality�: For standard user, they might prefer � visual quality than PSNR value

Image processing model

4. Implementation

For image restoration: 2D animation

• Is RealSR Effective? �: No�: Cause to much artifacts / noise

• Waifu2x�: Use Vulkan build �: Works much faster

Image processing model

4. Implementation

For image restoration: Old photo restoration

• Is RealSR/Waifu2x Effective? �: No�: No any restoration exists

• Total 4 steps �1. Face detection �2. Face enhancement �3. Blending �4. Global restoration

Real SR

Waifu2x

BOPB

Image processing model

4. Implementation

• Domain specific

For image restoration: How to handle & Implement

Introduction of Technology

4. Implementation

| SPA with React.js

SPA

• Single Page Application
• Ease in building interactive web page

​

Frameworks

• React.js
• Supported by Meta(Facebook)

​

Advantages

• Using JavaScript (same as Node.js)
• Lots of documents
• Lots of use cases
• Many additional libraries (Axios,

Introduction of Technology

4. Implementation

| Web/App Responsibility & Compatibility

Responsive Web Design

• Responsive web design is about creating web pages that look good on all devices!
• A responsive web design will automatically adjust for different screen sizes and viewports.

​

React-bootstrap

• Use components provided by react-bootstrap for easy responsive implementation

​

Structure

4. Implementation

Structure of Frontend (React Components)

Main

Sidebar

Topbar

ImageListBody

Login

Signup

ImageModal

OffCanvas

ProfileModal

App

AlbumNavigation

Web Server

4. Implementation

Build react code to static html, css, js

Load on NGiNX docker

Serve web page

Introduction of Technology

4. Implementation

Container based Architecture

​

Docker Container

• Building a backend server using docker
• Docker containerize all service nodes

​

Advantages

• Provides a controlled container virtual environment for any environment
• Minimize variables according to local environment
• Can build a server infrastructure flexibly by increasing or decreasing containers
• Automated service building using docker compose

<Automated server deployment>

Introduction of Technology

4. Implementation

Container based Architecture

​

Operating System

Docker Engine

Bins/Libs

Bins/Libs

Bins/Libs

Bins/Libs

Web Server

API Server

Database

Processing Server

Web Server

4. Implementation

How to implement:

​

• Using NGiNX as a web server
• Also uses as proxy server to redirect API requests to the API server

​

Our Purpose

Through this, we tried to build a scalable server

• For preparing for a larger service that is not at the current test level

​

Backend API Server

4. Implementation

How to implement:

​

• Using go language and gin web framework
• Using docker image based on alpine linux with go language package

​

Why we chose

• Because Go is a natively compiled language, it is faster than Java or Python.
• The syntax is simple and easy to use.
• RESTful API development using the easy and powerful Gin web framework.

​

Backend API Server

4. Implementation

APIs

​

• Login/Logout authentication API
• Album handling API
• Image handling API
• Encryption using the bcrypt library and access control through session management

​

Layered Architecture

​

​

DB Client

Database

Handlers

Gin Router

App

Presentation

Layer

Business

Layer

Persistence

Layer

Database

Layer

Database

4. Implementation

How to implement:

​

• Using postgresql docker image
• Storing user data and image files

​

Why we chose

• Most loved DB by StackOverflow
• OpenSource
• Better adherence to SQL standards than MySQL.

​

​

Scenario & Demo

• Real usage
• Working Demo

5

Visiting Shapic Web

5. Scenario & Demo

• Visiting Sharpic Website and login

: Access the site using a web browser on any device

Using Shapic Web

5. Scenario & Demo

• Make Album and Upload Images

: Users can freely upload and store the photos, and can also create albums.

Upload Image

Get Processed Image

Get Processed Image

Store Image

Store Processed Image

Get Original Image

Image processing

5. Scenario & Demo

• Various Image processing model

: Super Resolution, Photo enhancement and 2D photo enhancement

Assignments of each person

6. Team Assignments

Future Plan

• Improvement
• Schedule & Plan

7

Improvement: Image model

7. Future Plan

• Model Structure

Improvement: User Interface

7. Future Plan

• UI improvement

Improvement: Image model

7. Future Plan

• Sharing feature

Reference

• Our Github

https://github.com/GCU-Sharpic

​

• Full Demo Video

https://youtu.be/YQS8nX_QcL4

​

• Documents

https://reactjs.org/docs/getting-started.html

https://axios-http.com/kr/docs/intro

https://gin-gonic.com/docs/

https://nginx.org/en/docs/

https://pkg.go.dev/github.com/lib/pq

https://docs.docker.com

​

• Processing Models

https://github.com/Tencent/Real-SR

https://github.com/microsoft/Bringing-Old-Photos-Back-to-Life

https://github.com/nihui/waifu2x-ncnn-vulkan

​

​

​

Thank You

201735801 | 가은성

201735860 | 이승철

201835421 | 김범기

202035390 | 조현민