Yayoi-js

React implementation of image super-resolution using deep convolutional neural network (SRCNN)

FAQ

What is this?

This is an implementation of the image super-resolution using deep convolutional neural network (SRCNN) algorithm running purely on the browser using the Tensorflow.js library. Basically, a neural network attempts to "draw" an upscaled picture from the image you uploaded in the factor of 2.

Is my data safe?

Your data and pictures here never leave your computer! In fact, this is one of the main advantages of running neural networks in your browser. Instead of sending us your data, we send you both the model and the code to run the model. These are then run by your browser.

How big are the models I'm downloading?

Your browser will download a model around ~300KB in size.

Requirements

• Browser (Chrome is perfered)
• Image for super-resolution

Usage

First visit this page and follow these steps:

1. Upload the images
2. Click enlarge

Results

Here are two result. From left to right, the first column is the input image, the second one is what you would get from a standard bicubic interpolation, and on the right is the the output generated by the neural net.

Butterfly

Shaman

Reference

• Image Super-Resolution Using Deep Convolutional Networks
• Waifu2x

Library used

• Tensorflow.js
• React
• Redux
• Create React App
• Material Design Lite
• Material-UI

Develop

Development Requirements

• node ^8.11.0
• yarn ^1.7.0

Getting Start

1. Clone source code

$ git clone https://github.com/Panepo/Yayoi-js.git

2. Install dependencies

$ cd Yayoi-js
$ yarn

3. Start development server and visit http://localhost:3000/

$ yarn start

Scripts

yarn <script>	Description
start	Serves your app at localhost:3000
test	Run test code in ./src
lint	Lint code in ./src
prettier	Prettier code in ./src
build	Builds the production application to ./build
deploy	Deploy the production application to github pages

Testing

Jest is used for test runner. Jest will look for test files with any of the following naming conventions:

• Files with .js suffix in __tests__ folders.
• Files with .test.js suffix.
• Files with .spec.js suffix.

Jest has an integrated coverage reporter that works well with ES6 and requires no configuration. Run npm test -- --coverage (note extra -- in the middle) to include a coverage report.

Production

Build code before deployment by running yarn build.

Author

Panepo