doc/tutorials/dnn/dnn_javascript/dnn_javascript.markdown

   1 # How to run deep networks in browser {#tutorial_dnn_javascript}
   2
   3 @prev_tutorial{tutorial_dnn_yolo}
   4 @next_tutorial{tutorial_dnn_custom_layers}
   5
   6 ## Introduction
   7 This tutorial will show us how to run deep learning models using OpenCV.js right
   8 in a browser. Tutorial refers a sample of face detection and face recognition
   9 models pipeline.
  10
  11 ## Face detection
  12 Face detection network gets BGR image as input and produces set of bounding boxes
  13 that might contain faces. All that we need is just select the boxes with a strong
  14 confidence.
  15
  16 ## Face recognition
  17 Network is called OpenFace (project https://github.com/cmusatyalab/openface).
  18 Face recognition model receives RGB face image of size `96x96`. Then it returns
  19 `128`-dimensional unit vector that represents input face as a point on the unit
  20 multidimensional sphere. So difference between two faces is an angle between two
  21 output vectors.
  22
  23 ## Sample
  24 All the sample is an HTML page that has JavaScript code to use OpenCV.js functionality.
  25 You may see an insertion of this page below. Press `Start` button to begin a demo.
  26 Press `Add a person` to name a person that is recognized as an unknown one.
  27 Next we'll discuss main parts of the code.
  28
  29 @htmlinclude js_face_recognition.html
  30
  31 -# Run face detection network to detect faces on input image.
  32 @snippet dnn/js_face_recognition.html Run face detection model
  33 You may play with input blob sizes to balance detection quality and efficiency.
  34 The bigger input blob the smaller faces may be detected.
  35
  36 -# Run face recognition network to receive `128`-dimensional unit feature vector by input face image.
  37 @snippet dnn/js_face_recognition.html Get 128 floating points feature vector
  38
  39 -# Perform a recognition.
  40 @snippet dnn/js_face_recognition.html Recognize
  41 Match a new feature vector with registered ones. Return a name of the best matched person.
  42
  43 -# The main loop.
  44 @snippet dnn/js_face_recognition.html Define frames processing
  45 A main loop of our application receives a frames from a camera and makes a recognition
  46 of an every detected face on the frame. We start this function ones when OpenCV.js was
  47 initialized and deep learning models were downloaded.