WebDNN: Fastest DNN Execution Framework on Web Browser

WebDNN is an open source software framework for executing deep neural network (DNN) pre-trained model on web browser.

WebDNN can execute DNN models trained by follow deep learning frameworks on web browser.

TensorFlow (v1.2.0 - v1.4.0)
Keras (v2.1.3 - )
PyTorch (v0.3.0 - v0.4.1)
Chainer (v1.23.0 - v4.0.0)
Caffe

Why is WebDNN needed?

Deep neural network (DNN) is getting much attention to use in many applications. However, it requires a lot of computational resources, and there are many tremendous processes to setup execution environment based hardware acceleration such as GPGPU. Therefore providing DNN applications to end-users is very hard.

WebDNN solves this problem by using web browser as installation-free DNN execution framework. This framework optimizes trained DNN model to compress the model data and accelerate the execution, and executes it with novel JavaScript API such as WebAssembly and WebGPU to achieve zero-overhead execution. Empirical evaluations showed that it achieved more than 200x acceleration.

Performance

Compared processing time with Keras.js
Test environment:
- Mac Book Pro early 2015
- macOS 10.12.4 Sierra
- Intel Core i5 2.7 GHz CPU
- 16 GB Memory
- Intel Iris Graphics 6100 GPU
- Safari Technology Preview 30
Model: VGG16[1], Inception-v3[4], and ResNet50[2].
Input Shape: (1, 299, 299, 3) for Inception-v3, (1, 224, 224, 3) for others.

Elapsed time per image are shown in vertical axis as logarithmic scale.

WebDNN with WebGPU backend was significantly faster than Keras.js. WebDNN with WebAssembly backend was comparable with GPU backend of Keras.js. In each DNN model and backend, WebDNN obtained better results in terms of speed. More speed improvement is observed when the optimizations are applied in the graph transpiler.

Getting started in 30 seconds

Let's convert and execute ResNet50 pre-trained Keras model[3] on your web browser.

First, save ResNet50 pre-trained model provided by Keras.

from keras.applications import resnet50
model = resnet50.ResNet50(include_top=True, weights='imagenet')
model.save("resnet50.h5")

Next, convert the model by CLI. In this phase, model is optimized.

python ./bin/convert_keras.py resnet50.h5 --input_shape '(1,224,224,3)' --out output

Then, generated files (called as Descriptor) can be loaded and executed by JavaScript as follows,

let runner, image, probabilities;

async function init() {
    // Initialize descriptor runner
    runner = await WebDNN.load('./output');
    image = runner.inputs[0]; 
    probabilities = runner.outputs[0];
}

async function run() {
    // Set the value into input variable.
    image.set(await WebDNN.Image.getImageArray('./input_image.png'));
    
    // Run
    await runner.run(); 

    // Show the result
    console.log('Output', WebDNN.Math.argmax(probabilities));
}

WebDNN also supports Caffemodel and Chainer model.

For more information, please see documents.

Setup

Please see documents.

Applications / demos using WebDNN

http://make.girls.moe/#/ - MakeGirls.moe - Create Anime Characters with A.I.!
https://new3rs.github.io/AZ.js/index.html (Japanese ver) - Go AI (JavaScript version of Pyaq)
https://milhidaka.github.io/chainer-image-caption/ - Generating image caption demo
https://github.com/milhidaka/webdnn-exercise - Exercise of basic usage of WebDNN
https://emotionaltrackingsdk.morphcast.com - Emotion recognition from camera by Cynny, see [https://www.morphcast.com] for more info