Satsuki

React implementation of image fast style transfer

FAQ

What is this?

This is an implementation of the Fast Neural Style Transfer algorithm running purely on the browser using the Tensorflow.js library. Basically, a neural network attempts to "draw" one picture from the image you uploaded in the style of another.

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?

For each available style, your browser will download a model around ~6.6MB in size. Be careful if you have limited bandwidth (mobile data users). Besides The Gleaner by Miller style, all other models will be downloaded once you click them.

Requirements

• Browser (Chrome is perfered)
• Image for style transfer or a webcam

Usage

First visit this page and follow these steps:

1. Upload the images or capture an image from camera (note that the image will resize to 256x256 to fit neural network input.)
2. Choice one of the styles

Results

Here are the results. From left to right, the first column is the input image, the second to sixth image are style-transfered image.

Reference

• A Neural Algorithm of Artistic Style
• Perceptual Losses for Real-Time Style Transfer and Super-Resolution
• Fast Style Transfer in TensorFlow
• Fast Neural Style Transfer in browser with deeplearn.js
• zaidalyafeai

Library used

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

Develop

Development Requirements

• node ^8.11.0
• yarn ^1.7.0

Getting Start

1. Clone source code

$ git clone https://github.com/Panepo/Satsuki.git

2. Install dependencies

$ cd Satsuki
$ 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