doc/tutorials/dnn/dnn_javascript/dnn_javascript.markdown

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