### Run Browser Examples

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/README.md

Navigate to the browser examples directory, install dependencies, and start the development server to view the browser examples.

```bash
cd face-api.js/examples/examples-browser
npm i
npm start
```

--------------------------------

### Run Node.js Examples

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/README.md

Navigate to the Node.js examples directory and install dependencies. Examples can then be run using ts-node or by compiling with tsc and running with node.

```bash
cd face-api.js/examples/examples-nodejs
npm i
```

```bash
ts-node faceDetection.ts
```

```bash
tsc faceDetection.ts
node faceDetection.js
```

--------------------------------

### Document Ready and Initialization

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/examples/examples-browser/views/webcamFaceLandmarkDetection.html

Sets up the navigation bar, initializes face detection controls, and starts the webcam face landmark detection process when the DOM is ready.

```javascript
$(document).ready(function() {
  renderNavBar('#navbar', 'webcam_face_landmark_detection')
  initFaceDetectionControls()
  run()
})
```

--------------------------------

### Install face-api.js and dependencies for Node.js

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/README.md

Install face-api.js, the canvas package for Node.js, and the TensorFlow.js Node.js backend for performance.

```bash
npm i face-api.js canvas @tensorflow/tfjs-node
```

--------------------------------

### Document Ready Initialization

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/examples/examples-browser/views/webcamFaceExpressionRecognition.html

Sets up the page by rendering the navigation bar, initializing face detection controls, and starting the webcam and model loading process when the DOM is ready.

```javascript
$(document).ready(function() {
  renderNavBar('#navbar', 'webcam_face_expression_recognition')
  initFaceDetectionControls()
  run()
})
```

--------------------------------

### Install face-api.js via npm

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/README.md

Install the face-api.js library for use in your project via npm.

```bash
npm i face-api.js
```

--------------------------------

### Initialize Webcam Face Landmark Detection

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/examples/examples-browser/views/webcamFaceLandmarkDetection.html

Loads the face detection and landmark models, sets the input size, and starts the webcam stream. Ensure the models are loaded before proceeding.

```javascript
async function run() {
  // load face detection and face landmark models
  await changeFaceDetector(TINY_FACE_DETECTOR)
  await faceapi.loadFaceLandmarkModel('/')
  changeInputSize(224)
  // try to access users webcam and stream the images
  // to the video element
  const stream = await navigator.mediaDevices.getUserMedia({ video: {} })
  const videoEl = $('#inputVideo').get(0)
  videoEl.srcObject = stream
}
```

--------------------------------

### Initialize Face Recognition UI

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/examples/examples-browser/views/faceRecognition.html

Sets up the navigation bar, initializes face detection controls, and runs the initial setup for face recognition when the document is ready.

```javascript
$(document).ready(function() {
  renderNavBar('#navbar', 'face\_recognition')
  initFaceDetectionControls()
  run()
})
```

--------------------------------

### Document Ready and Initialization

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/examples/examples-browser/views/webcamFaceDetection.html

Sets up the page when the DOM is ready. It renders the navigation bar, initializes face detection controls, and starts the webcam and face detection process by calling the 'run' function.

```javascript
$(document).ready(function() {
  renderNavBar('#navbar', 'webcam_face_detection')
  initFaceDetectionControls()
  run()
})
```

--------------------------------

### Initialize Face Tracking and Load Models

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/examples/examples-browser/views/videoFaceTracking.html

Sets up the video element, loads the face detection and landmark models, and starts the video processing loop. Ensure models are loaded before calling `onPlay`.

```javascript
let forwardTimes = []
let withFaceLandmarks = false
let withBoxes = true

function onChangeWithFaceLandmarks(e) {
  withFaceLandmarks = $(e.target).prop('checked')
}

function onChangeHideBoundingBoxes(e) {
  withBoxes = !$(e.target).prop('checked')
}

function updateTimeStats(timeInMs) {
  forwardTimes = [timeInMs].concat(forwardTimes).slice(0, 30)
  const avgTimeInMs = forwardTimes.reduce((total, t) => total + t) / forwardTimes.length
  $('#time').val(`${Math.round(avgTimeInMs)} ms`)
  $('#fps').val(`${faceapi.utils.round(1000 / avgTimeInMs)}`)
}

async function onPlay(videoEl) {
  if (!videoEl.currentTime || videoEl.paused || videoEl.ended || !isFaceDetectionModelLoaded()) {
    return setTimeout(() => onPlay(videoEl))
  }

  const options = getFaceDetectorOptions()
  const ts = Date.now()
  const drawBoxes = withBoxes
  const drawLandmarks = withFaceLandmarks

  let task = faceapi.detectAllFaces(videoEl, options)
  task = withFaceLandmarks ? task.withFaceLandmarks() : task

  const results = await task
  updateTimeStats(Date.now() - ts)

  const canvas = $('#overlay').get(0)
  const dims = faceapi.matchDimensions(canvas, videoEl, true)
  const resizedResults = faceapi.resizeResults(results, dims)

  if (drawBoxes) {
    faceapi.draw.drawDetections(canvas, resizedResults)
  }

  if (drawLandmarks) {
    faceapi.draw.drawFaceLandmarks(canvas, resizedResults)
  }

  setTimeout(() => onPlay(videoEl))
}

async function run() {
  // load face detection and face landmark models
  await changeFaceDetector(TINY_FACE_DETECTOR)
  await faceapi.loadFaceLandmarkModel('/')
  changeInputSize(416)

  // start processing frames
  onPlay($('#inputVideo').get(0))
}

function updateResults() {}

$(document).ready(function() {
  renderNavBar('#navbar', 'video_face_tracking')
  initFaceDetectionControls()
  run()
})
```

--------------------------------

### Clone face-api.js Repository

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/README.md

Clone the face-api.js repository to access the project files and examples.

```bash
git clone https://github.com/justadudewhohacks/face-api.js.git
```

--------------------------------

### Document Ready and UI Initialization

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/examples/examples-browser/views/bbtFaceRecognition.html

This code runs when the DOM is fully loaded. It initializes the navigation bar, image selection controls, and face detection controls, then starts the face recognition process by calling the run() function. Ensure all necessary UI elements and their IDs are present.

```javascript
$(document).ready(function() {
  renderNavBar('#navbar', 'bbt\_face\_recognition')
  initImageSelectionControls()
  initFaceDetectionControls()
  run()
})
```

--------------------------------

### Initialization and Model Loading

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/examples/examples-browser/views/bbtFaceRecognition.html

This function initializes the face recognition process by loading the necessary models (face detection, landmarks, and recognition) and creating a face matcher. It then starts the image processing. Ensure the base path for model loading is correct.

```javascript
async function run() {
  // load face detection, face landmark model and face recognition models
  await changeFaceDetector(selectedFaceDetector)
  await faceapi.loadFaceLandmarkModel('/')
  await faceapi.loadFaceRecognitionModel('/')
  // initialize face matcher with 1 reference descriptor per bbt character
  facematcher = await createBbtFaceMatcher(1)
  // start processing image
  updateResults()
}
```

--------------------------------

### Selecting Input Element in JavaScript

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/README.md

Select the input element using its ID or pass the ID string directly to the face-api functions. This example shows how to get the element reference.

```javascript
const input = document.getElementById('myImg')
// const input = document.getElementById('myVideo')
// const input = document.getElementById('myCanvas')
// or simply:
// const input = 'myImg'
```

--------------------------------

### Face Expression Recognition Example

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/examples/examples-browser/views/faceExpressionRecognition.html

This snippet demonstrates the core logic for detecting faces, their landmarks, and expressions in an image using face-api.js. It requires the face detection, face landmark, and face expression models to be loaded.

```javascript
let thresh = 0.1
async function updateResults() {
  if (!isFaceDetectionModelLoaded()) {
    return
  }
  const inputImgEl = $("#inputImg").get(0)
  const options = getFaceDetectorOptions()
  const results = await faceapi.detectAllFaces(inputImgEl, options)
    .withFaceLandmarks()
    .withFaceExpressions()

  const canvas = $("#overlay").get(0)
  faceapi.matchDimensions(canvas, inputImgEl)
  const resizedResults = faceapi.resizeResults(results, inputImgEl)

  const minConfidence = 0.05
  faceapi.draw.drawDetections(canvas, resizedResults)
  faceapi.draw.drawFaceExpressions(canvas, resizedResults, minConfidence)
}

async function run() {
  // load face detection and face expression recognition models
  // and load face landmark model for face alignment
  await changeFaceDetector(SSD_MOBILENETV1)
  await faceapi.loadFaceLandmarkModel('/')
  await faceapi.loadFaceExpressionModel('/')

  // start processing image
  updateResults()
}

$(document).ready(function() {
  renderNavBar('#navbar', 'face_expression_recognition')
  initImageSelectionControls('happy.jpg', true)
  initFaceDetectionControls()
  run()
})
```

--------------------------------

### Face Extraction Logic

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/examples/examples-browser/views/faceExtraction.html

This snippet shows the core logic for detecting all faces in an image and then extracting them. It requires the face detection model to be loaded and uses helper functions to get detection options and display the results.

```javascript
async function updateResults() {
  if (!isFaceDetectionModelLoaded()) {
    return
  }
  const inputImgEl = $("#inputImg").get(0)
  const options = getFaceDetectorOptions()
  const detections = await faceapi.detectAllFaces(inputImgEl, options)
  const faceImages = await faceapi.extractFaces(inputImgEl, detections)
  displayExtractedFaces(faceImages)
}

function displayExtractedFaces(faceImages) {
  const canvas = $("#overlay").get(0)
  faceapi.matchDimensions(canvas, $("#inputImg").get(0))
  $("#facesContainer").empty()
  faceImages.forEach(canvas => $("#facesContainer").append(canvas))
}

async function run() {
  // load face detection model
  await changeFaceDetector(selectedFaceDetector)
  // start processing image
  updateResults()
}

$(document).ready(function() {
  renderNavBar('#navbar', 'face_extraction')
  initImageSelectionControls()
  initFaceDetectionControls()
  run()
})
```

--------------------------------

### Recognize Single Face Expressions with Landmarks

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/README.md

Use `detectSingleFace(input).withFaceLandmarks().withFaceExpressions()` to get the highest confidence face, its landmarks, and recognized expressions.

```javascript
const detectionWithExpressions = await faceapi.detectSingleFace(input).withFaceLandmarks().withFaceExpressions()
```

--------------------------------

### Detect Single Face with Landmarks

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/README.md

Use `detectSingleFace(input).withFaceLandmarks()` to get the highest confidence face along with its 68 landmark points. Returns a single object or undefined.

```javascript
const detectionWithLandmarks = await faceapi.detectSingleFace(input).withFaceLandmarks()
```

--------------------------------

### Compute Single Face Descriptor with Landmarks

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/README.md

Get the descriptor for the single highest confidence face by chaining `.withFaceLandmarks().withFaceDescriptor()` to `detectSingleFace`.

```javascript
const result = await faceapi.detectSingleFace(input).withFaceLandmarks().withFaceDescriptor()
```

--------------------------------

### Document Ready Event Handler

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/examples/examples-browser/views/faceDetection.html

Sets up the navigation bar, image selection controls, and face detection controls, then runs the initial face detection upon document load.

```javascript
$(document).ready(function() {
  renderNavBar('#navbar', 'face_detection')
  initImageSelectionControls()
  initFaceDetectionControls()
  run()
})
```

--------------------------------

### Initialize Webcam and Models

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/examples/examples-browser/views/webcamFaceExpressionRecognition.html

Loads the face detection and face expression recognition models, sets the input size, and accesses the user's webcam to stream video.

```javascript
async function run() {
  // load face detection and face expression recognition models
  await changeFaceDetector(TINY_FACE_DETECTOR)
  await faceapi.loadFaceExpressionModel('/')
  changeInputSize(224)
  // try to access users webcam and stream the images
  // to the video element
  const stream = await navigator.mediaDevices.getUserMedia({ video: {} })
  const videoEl = $('#inputVideo').get(0)
  videoEl.srcObject = stream
}
```

--------------------------------

### Initialize Webcam and Face Detection

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/examples/examples-browser/views/webcamFaceDetection.html

Loads the face detection model and accesses the user's webcam to stream video to the input element. Sets the initial input size for the detector.

```javascript
async function run() {
  // load face detection model
  await changeFaceDetector(TINY_FACE_DETECTOR)
  changeInputSize(128)
  // try to access users webcam and stream the images
  // to the video element
  const stream = await navigator.mediaDevices.getUserMedia({ video: {} })
  const videoEl = $('#inputVideo').get(0)
  videoEl.srcObject = stream
}
```

--------------------------------

### Initialization and Execution

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/examples/examples-browser/views/faceDetection.html

Loads the SSD Mobilenet V1 face detection model and then initiates the face detection process by calling updateResults.

```javascript
async function run() {
  // load face detection
  await changeFaceDetector(SSD_MOBILENETV1)
  // start processing image
  updateResults()
}
```

--------------------------------

### Create Image Picker with File Upload

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/README.md

Sets up an HTML file input to allow users to upload an image, which is then displayed. Converts the uploaded file to an HTMLImageElement.

```html
<img id="myImg" src="">
<input id="myFileUpload" type="file" onchange="uploadImage()" accept=".jpg, .jpeg, .png">
```

--------------------------------

### Initialize FaceMatcher with Reference Image Descriptors

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/README.md

Initializes a FaceMatcher using descriptors detected from a reference image. Ensures at least one face is detected.

```javascript
const results = await faceapi
  .detectAllFaces(referenceImage)
  .withFaceLandmarks()
  .withFaceDescriptors()

if (!results.length) {
  return
}

// create FaceMatcher with automatically assigned labels
// from the detection results for the reference image
const faceMatcher = new faceapi.FaceMatcher(results)
```

--------------------------------

### Initialize FaceMatcher with Labeled Descriptors

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/README.md

Initializes a FaceMatcher using manually provided labeled face descriptors.

```javascript
const labeledDescriptors = [
  new faceapi.LabeledFaceDescriptors(
    'obama',
    [descriptorObama1, descriptorObama2]
  ),
  new faceapi.LabeledFaceDescriptors(
    'trump',
    [descriptorTrump]
  )
]

const faceMatcher = new faceapi.FaceMatcher(labeledDescriptors)
```

--------------------------------

### Instantiate and load face-api.js model

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/README.md

Create a new instance of a face-api.js neural network and then load its weights from a URI.

```javascript
const net = new faceapi.SsdMobilenetv1()
await net.loadFromUri('/models')
```

--------------------------------

### Use Low-Level API for Face Detection and Landmarks

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/README.md

Directly access neural network forward methods for face detection and landmark prediction. Requires input and options objects.

```javascript
const detections1 = await faceapi.ssdMobilenetv1(input, options)
const detections2 = await faceapi.tinyFaceDetector(input, options)
const landmarks1 = await faceapi.detectFaceLandmarks(faceImage)
const landmarks2 = await faceapi.detectFaceLandmarksTiny(faceImage)
const descriptor = await faceapi.computeFaceDescriptor(alignedFaceImage)
```

--------------------------------

### Load face-api.js models from disk in Node.js

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/README.md

Load a face-api.js model directly from the local file system in a Node.js environment.

```javascript
await faceapi.nets.ssdMobilenetv1.loadFromDisk('./models')
```

--------------------------------

### Run Face Recognition Models

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/examples/examples-browser/views/faceRecognition.html

Loads the necessary face detection, face landmark, and face recognition models from the specified path. This is a prerequisite for performing face recognition tasks.

```javascript
async function run() {
  // load face detection, face landmark model and face recognition models
  await changeFaceDetector(selectedFaceDetector)
  await faceapi.loadFaceLandmarkModel('/')
  await faceapi.loadFaceRecognitionModel('/')
}
```

--------------------------------

### Create Image Picker with File Upload (JavaScript)

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/README.md

Handles image file uploads, converting the selected file into an HTMLImageElement and displaying it. Requires an input element with id 'myFileUpload'.

```javascript
async function uploadImage() {
  const imgFile = document.getElementById('myFileUpload').files[0]
  // create an HTMLImageElement from a Blob
  const img = await faceapi.bufferToImage(imgFile)
  document.getElementById('myImg').src = img.src
}
```

--------------------------------

### Polyfill Node.js environment for face-api.js

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/README.md

Import Node.js bindings for TensorFlow and polyfill browser-specific classes like HTMLCanvasElement, HTMLImageElement, and ImageData using the 'canvas' package.

```javascript
// import nodejs bindings to native tensorflow,
// not required, but will speed up things drastically (python required)
import '@tensorflow/tfjs-node';

// implements nodejs wrappers for HTMLCanvasElement, HTMLImageElement, ImageData
import * as canvas from 'canvas';

import * as faceapi from 'face-api.js';

// patch nodejs environment, we need to provide an implementation of
// HTMLCanvasElement and HTMLImageElement
const { Canvas, Image, ImageData } = canvas
faceapi.env.monkeyPatch({ Canvas, Image, ImageData })
```

--------------------------------

### Face Landmark Detection and Drawing

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/examples/examples-browser/views/bbtFaceLandmarkDetection.html

This snippet demonstrates the core logic for loading the face landmark model, detecting landmarks in an image, and drawing them. It requires the face-api.js library and a canvas element.

```javascript
let drawLines = true
let landmarks
let currentImg

function onChangeDrawLines(e) {
  drawLines = $(e.target).prop('checked')
  redraw()
}

function redraw() {
  const canvas = faceapi.createCanvasFromMedia(currentImg)
  $('#faceContainer').empty()
  $('#faceContainer').append(canvas)
  new faceapi.draw.DrawFaceLandmarks(landmarks, {
    drawLines
  }).draw(canvas)
}

async function onSelectionChanged(uri) {
  currentImg = await faceapi.fetchImage(uri)
  landmarks = await faceapi.detectFaceLandmarks(currentImg)
  redraw()
}

async function run() {
  await faceapi.loadFaceLandmarkModel('/')
  $('#loader').hide()
  await onSelectionChanged($('#selectList select').val())
}

$(document).ready(function() {
  renderNavBar('#navbar', 'bbt_face_landmark_detection')
  renderFaceImageSelectList( '#selectList', onSelectionChanged, {
    className: 'sheldon',
    imageIdx: 1
  } )
  run()
})
```

--------------------------------

### Load Query Image from Upload

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/examples/examples-browser/views/faceRecognition.html

Handles the upload of a query image file and updates its display. This prepares the query image for face detection and matching against a reference.

```javascript
async function uploadQueryImage(e) {
  const imgFile = $("#queryImgUploadInput").get(0).files[0]
  const img = await faceapi.bufferToImage(imgFile)
  $("#queryImg").get(0).src = img.src
  updateQueryImageResults()
}
```

--------------------------------

### Image Picker and Buffer to Image Conversion

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/README.md

Allows users to upload an image file and converts it into an HTMLImageElement.

```APIDOC
## Image Picker and Buffer to Image Conversion

### Description
Provides functionality to create an image picker using an HTML file input and convert the selected image file (Blob) into an `HTMLImageElement`.

### Methods
- `faceapi.bufferToImage(buffer)`: Converts a Blob or File object into an `HTMLImageElement`.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **buffer** (Blob | File): The image file to convert.

### Request Example
```html
<img id="myImg" src="">
<input id="myFileUpload" type="file" onchange="uploadImage()" accept=".jpg, .jpeg, .png">
```

```javascript
async function uploadImage() {
  const imgFile = document.getElementById('myFileUpload').files[0]
  // create an HTMLImageElement from a Blob
  const img = await faceapi.bufferToImage(imgFile)
  document.getElementById('myImg').src = img.src
}
```

### Response
#### Success Response (200)
- **img** (HTMLImageElement): The converted image as an `HTMLImageElement`.
```

--------------------------------

### Load Models and Detect Faces with Age/Gender

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/examples/examples-browser/views/ageAndGenderRecognition.html

Loads the necessary face detection, age/gender, and face landmark models. It then detects all faces in an input image, computes landmarks for alignment, and recognizes age and gender. Finally, it draws the detections and overlays text with age and gender information.

```javascript
async function updateResults() {
  if (!isFaceDetectionModelLoaded()) {
    return
  }
  const inputImgEl = $('#inputImg').get(0)
  const options = getFaceDetectorOptions()
  const results = await faceapi.detectAllFaces(inputImgEl, options)
    .withFaceLandmarks()
    .withAgeAndGender()

  const canvas = $('#overlay').get(0)
  faceapi.matchDimensions(canvas, inputImgEl)
  const resizedResults = faceapi.resizeResults(results, inputImgEl)
  faceapi.draw.drawDetections(canvas, resizedResults)

  resizedResults.forEach(result => {
    const { age, gender, genderProbability } = result
    new faceapi.draw.DrawTextField([
      `${faceapi.utils.round(age, 0)} years`,
      `${gender} (${faceapi.utils.round(genderProbability)})
    `
    ], result.detection.box.bottomLeft).draw(canvas)
  })
}

async function run() {
  // load face detection and age and gender recognition models
  // and load face landmark model for face alignment
  await changeFaceDetector(SSD_MOBILENETV1)
  await faceapi.loadFaceLandmarkModel('/')
  await faceapi.nets.ageGenderNet.load('/')

  // start processing image
  updateResults()
}

$(document).ready(function() {
  renderNavBar('#navbar', 'age_and_gender_recognition')
  initImageSelectionControls('happy.jpg', true)
  initFaceDetectionControls()
  run()
})
```

--------------------------------

### Load Reference Image from URL

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/examples/examples-browser/views/faceRecognition.html

Fetches a reference image from a provided URL and updates the display. It then triggers the processing of the reference image for face recognition.

```javascript
async function loadRefImageFromUrl(url) {
  const img = await requestExternalImage($('#refImgUrlInput').val())
  $('#refImg').get(0).src = img.src
  updateReferenceImageResults()
}
```

--------------------------------

### Using Tiny Model for Face Landmarks

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/README.md

Specify `true` as an argument to `.withFaceLandmarks()` to utilize the tiny face landmark model, which may offer different performance characteristics.

```javascript
const useTinyModel = true
const detectionsWithLandmarks = await faceapi.detectAllFaces(input).withFaceLandmarks(useTinyModel)
```

--------------------------------

### Composing Face Detection Tasks

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/README.md

Demonstrates various combinations of face detection tasks, including landmarks, expressions, age/gender, and descriptors.

```javascript
// all faces
await faceapi.detectAllFaces(input)
await faceapi.detectAllFaces(input).withFaceExpressions()
await faceapi.detectAllFaces(input).withFaceLandmarks()
await faceapi.detectAllFaces(input).withFaceLandmarks().withFaceExpressions()
await faceapi.detectAllFaces(input).withFaceLandmarks().withFaceExpressions().withFaceDescriptors()
await faceapi.detectAllFaces(input).withFaceLandmarks().withAgeAndGender().withFaceDescriptors()
await faceapi.detectAllFaces(input).withFaceLandmarks().withFaceExpressions().withAgeAndGender().withFaceDescriptors()

// single face
await faceapi.detectSingleFace(input)
await faceapi.detectSingleFace(input).withFaceExpressions()
await faceapi.detectSingleFace(input).withFaceLandmarks()
await faceapi.detectSingleFace(input).withFaceLandmarks().withFaceExpressions()
await faceapi.detectSingleFace(input).withFaceLandmarks().withFaceExpressions().withFaceDescriptor()
await faceapi.detectSingleFace(input).withFaceLandmarks().withAgeAndGender().withFaceDescriptor()
await faceapi.detectSingleFace(input).withFaceLandmarks().withFaceExpressions().withAgeAndGender().withFaceDescriptor()
```

--------------------------------

### Update Reference Image Results

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/examples/examples-browser/views/faceRecognition.html

Detects all faces in the reference image, extracts landmarks and descriptors, and creates a FaceMatcher. It then draws bounding boxes and labels on the image overlay.

```javascript
async function updateReferenceImageResults() {
  const inputImgEl = $('#refImg').get(0)
  const canvas = $('#refImgOverlay').get(0)
  const fullFaceDescriptions = await faceapi
    .detectAllFaces(inputImgEl, getFaceDetectorOptions())
    .withFaceLandmarks()
    .withFaceDescriptors()
  if (!fullFaceDescriptions.length) {
    return
  }
  // create FaceMatcher with automatically assigned labels // from the detection results for the reference image
  faceMatcher = new faceapi.FaceMatcher(fullFaceDescriptions)
  faceapi.matchDimensions(canvas, inputImgEl)
  // resize detection and landmarks in case displayed image is smaller than // original size
  const resizedResults = faceapi.resizeResults(fullFaceDescriptions, inputImgEl)
  // draw boxes with the corresponding label as text
  const labels = faceMatcher.labeledDescriptors
    .map(ld => ld.label)
  resizedResults.forEach(({ detection, descriptor }) => {
    const label = faceMatcher.findBestMatch(descriptor).toString()
    const options = { label }
    const drawBox = new faceapi.draw.DrawBox(detection.box, options)
    drawBox.draw(canvas)
  })
}
```

--------------------------------

### Load face-api.js model weights as Float32Array using fetch

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/README.md

Load uncompressed model weights as a Float32Array using the fetch API.

```javascript
// using fetch
net.load(await faceapi.fetchNetWeights('/models/face_detection_model.weights'))
```

--------------------------------

### Detect Faces with 68 Face Landmark Points

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/README.md

Append `.withFaceLandmarks()` to detect faces and compute the 68 landmark points for each. This provides detailed facial feature information.

```javascript
const detectionsWithLandmarks = await faceapi.detectAllFaces(input).withFaceLandmarks()
```

--------------------------------

### Load face-api.js models from URI

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/README.md

Load a face-api.js model, such as ssdMobilenetv1, from a specified URI. Ensure the manifest.json and model weight files are accessible at the given route.

```javascript
await faceapi.nets.ssdMobilenetv1.loadFromUri('/models')
// accordingly for the other models:
// await faceapi.nets.faceLandmark68Net.loadFromUri('/models')
// await faceapi.nets.faceRecognitionNet.loadFromUri('/models')
// ...
```

--------------------------------

### Find Best Face Matches in Query Image 2

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/README.md

Detects all faces in a query image and finds the best match for each using a pre-initialized FaceMatcher.

```javascript
const results = await faceapi
  .detectAllFaces(queryImage2)
  .withFaceLandmarks()
  .withFaceDescriptors()

results.forEach(fd => {
  const bestMatch = faceMatcher.findBestMatch(fd.descriptor)
  console.log(bestMatch.toString())
})
```

--------------------------------

### Fetch and Display Image from URL (JavaScript)

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/README.md

Fetches an image from a given URL and displays it in an HTML image element. The fetched image is an HTMLImageElement.

```javascript
const image = await faceapi.fetchImage('/images/example.png')

console.log(image instanceof HTMLImageElement) // true

// displaying the fetched image content
const myImg = document.getElementById('myImg')
myImg.src = image.src
```

--------------------------------

### Fetch and Display Image from URL

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/README.md

Fetches an image from a given URL and displays it in an HTML image element. The fetched image is an HTMLImageElement.

```html
<img id="myImg" src="">
```

--------------------------------

### Prepare Overlay Canvas

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/README.md

Resizes the overlay canvas to match the input image dimensions. This is a prerequisite for drawing detection results.

```javascript
const displaySize = { width: input.width, height: input.height }
// resize the overlay canvas to the input dimensions
const canvas = document.getElementById('overlay')
faceapi.matchDimensions(canvas, displaySize)
```

--------------------------------

### Load Query Image from URL

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/examples/examples-browser/views/faceRecognition.html

Fetches a query image from a specified URL and updates the display. This image will then be processed for face detection and comparison.

```javascript
async function loadQueryImageFromUrl(url) {
  const img = await requestExternalImage($('#queryImgUrlInput').val())
  $('#queryImg').get(0).src = img.src
  updateQueryImageResults()
}
```

--------------------------------

### Direct Neural Network Methods

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/README.md

Utilize the forward methods of each neural network for direct face detection and landmark detection.

```APIDOC
## Direct Neural Network Methods

### Description
Use the forward methods of each neural network for direct face detection and landmark detection.

### Methods
- `faceapi.ssdMobilenetv1(input, options)`: Detects faces using the SSD MobileNetv1 model.
- `faceapi.tinyFaceDetector(input, options)`: Detects faces using the Tiny Face Detector model.
- `faceapi.detectFaceLandmarks(faceImage)`: Detects face landmarks.
- `faceapi.detectFaceLandmarksTiny(faceImage)`: Detects face landmarks using a tiny model.
- `faceapi.computeFaceDescriptor(alignedFaceImage)`: Computes the face descriptor for a given aligned face image.

### Request Example
```javascript
const detections1 = await faceapi.ssdMobilenetv1(input, options)
const detections2 = await faceapi.tinyFaceDetector(input, options)
const landmarks1 = await faceapi.detectFaceLandmarks(faceImage)
const landmarks2 = await faceapi.detectFaceLandmarksTiny(faceImage)
const descriptor = await faceapi.computeFaceDescriptor(alignedFaceImage)
```
```

--------------------------------

### Load Reference Image from Upload

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/examples/examples-browser/views/faceRecognition.html

Handles the upload of a reference image file and updates the display. It then calls a function to process the reference image for face detection and descriptor extraction.

```javascript
async function uploadRefImage(e) {
  const imgFile = $("#refImgUploadInput").get(0).files[0]
  const img = await faceapi.bufferToImage(imgFile)
  $("#refImg").get(0).src = img.src
  updateReferenceImageResults()
}
```

--------------------------------

### Detect All Faces with Landmarks and Descriptors

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/README.md

Detects all faces, computes landmarks, and computes face descriptors for each face. Returns an array of objects containing detection, landmarks, and descriptors.

```APIDOC
## detectAllFaces(...).withFaceLandmarks().withFaceDescriptors()

### Description
Detects all faces, computes 68 point facial landmarks for each, and then computes the face descriptor for each face. This method chains after `detectAllFaces` and `withFaceLandmarks`.

### Method
```javascript
const faceapi = require('face-api.js');

const input = 'myImg';

const results = await faceapi.detectAllFaces(input).withFaceLandmarks().withFaceDescriptors()
```

### Parameters
#### Input
- **input** (HTMLImageElement | HTMLVideoElement | HTMLCanvasElement | string) - The input element or its ID to detect faces from.

### Returns
- **Array<[WithFaceDescriptor<WithFaceLandmarks<WithFaceDetection<{}>>>](#getting-started-utility-classes)>** - An array of objects, each containing face detection, landmark, and descriptor data.
```

--------------------------------

### Log available face-api.js neural networks

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/README.md

Access and log all available neural network instances exported by faceapi.nets.

```javascript
console.log(faceapi.nets)
// ageGenderNet
// faceExpressionNet
// faceLandmark68Net
// faceLandmark68TinyNet
// faceRecognitionNet
// ssdMobilenetv1
// tinyFaceDetector
// tinyYolov2
```

--------------------------------

### JavaScript: Image and Landmark Processing Logic

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/examples/examples-browser/views/batchFaceLandmarks.html

Contains the core logic for loading models, processing images, detecting face landmarks individually and in batches, and measuring the time taken for each approach. It also handles drawing the detected landmarks on the images.

```javascript
let images = []
let landmarksByFace = []
let numImages = 40

function onNumImagesChanged(e) {
  const val = parseInt(e.target.value) || 40
  numImages = Math.min(Math.max(val, 0), 40)
  e.target.value = numImages
}

function displayTimeStats(timeNoBatch, timeBatch) {
  $('#timeNoBatch').val(`${timeNoBatch} ms`)
  $('#timeBatch').val(`${timeBatch} ms`)
}

function drawLandmarkCanvas(img, landmarks) {
  const canvas = faceapi.createCanvasFromMedia(img)
  $('#faceContainer').append(canvas)
  new faceapi.draw.DrawFaceLandmarks(landmarks).draw(canvas)
}

async function runLandmarkDetection(useBatchInput) {
  const ts = Date.now()
  landmarksByFace = useBatchInput ? await faceapi.detectLandmarks(images.slice(0, numImages)) : await Promise.all(images.slice(0, numImages).map(img => faceapi.detectLandmarks(img)))
  const time = Date.now() - ts
  return time
}

async function measureTimings() {
  const timeNoBatch = await runLandmarkDetection(false)
  const timeBatch = await runLandmarkDetection(true)
  return { timeNoBatch, timeBatch }
}

async function measureTimingsAndDisplay() {
  const { timeNoBatch, timeBatch } = await measureTimings()
  displayTimeStats(timeNoBatch, timeBatch)
  $('#faceContainer').empty()
  landmarksByFace.forEach((landmarks, i) => drawLandmarkCanvas(images[i], landmarks))
}

async function run() {
  await faceapi.loadFaceLandmarkModel('/')
  $('#loader').hide()
  const allImgUris = classes
    .map(clazz => Array.from(Array(5), (_, idx) => getFaceImageUri(clazz, idx + 1)))
    .reduce((flat, arr) => flat.concat(arr))
  images = await Promise.all(allImgUris.map( async uri => faceapi.fetchImage(uri) ))
  // warmup
  await measureTimings()
  // run
  measureTimingsAndDisplay()
}

$(document).ready(function() {
  $('#numImages').on('change', onNumImagesChanged)
  renderNavBar('#navbar', 'batch_face_landmarks')
  run()
})
```

--------------------------------

### Fetch Image from URL

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/README.md

Fetches an image from a given URL and returns it as an HTMLImageElement.

```APIDOC
## Fetch Image from URL

### Description
Fetches an image from a specified URL. The fetched image can then be used or displayed.

### Method
`faceapi.fetchImage(url)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **url** (string): The URL of the image to fetch.

### Request Example
```html
<img id="myImg" src="">
```

```javascript
const image = await faceapi.fetchImage('/images/example.png')

console.log(image instanceof HTMLImageElement) // true

// displaying the fetched image content
const myImg = document.getElementById('myImg')
myImg.src = image.src
```

### Response
#### Success Response (200)
- **image** (HTMLImageElement): The fetched image as an HTMLImageElement.
```

--------------------------------

### Configure SsdMobilenetv1 Face Detection

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/README.md

Use SsdMobilenetv1Options to set the minimum confidence threshold and maximum number of faces to detect. Defaults are provided for convenience.

```javascript
export interface ISsdMobilenetv1Options {
  // minimum confidence threshold
  // default: 0.5
  minConfidence?: number

  // maximum number of faces to return
  // default: 100
  maxResults?: number
}

// example
const options = new faceapi.SsdMobilenetv1Options({ minConfidence: 0.8 })
```

--------------------------------

### Specifying Face Detector Options

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/README.md

Customize face detection by providing options objects for different detectors like SsdMobilenetv1 or TinyFaceDetector. Refer to the documentation for tuning options.

```javascript
const detections1 = await faceapi.detectAllFaces(input, new faceapi.SsdMobilenetv1Options())
const detections2 = await faceapi.detectAllFaces(input, new faceapi.TinyFaceDetectorOptions())
```

--------------------------------

### Detect All Faces with Landmarks and Expressions

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/README.md

Detects all faces, computes landmarks, and recognizes face expressions for each face. Returns an array of objects containing detection, landmarks, and expressions.

```APIDOC
## detectAllFaces(...).withFaceLandmarks().withFaceExpressions()

### Description
Detects all faces, computes 68 point facial landmarks for each, and then recognizes the face expressions for each face. This method chains after `detectAllFaces` and `withFaceLandmarks`.

### Method
```javascript
const faceapi = require('face-api.js');

const input = 'myImg';

const detectionsWithExpressions = await faceapi.detectAllFaces(input).withFaceLandmarks().withFaceExpressions()
```

### Parameters
#### Input
- **input** (HTMLImageElement | HTMLVideoElement | HTMLCanvasElement | string) - The input element or its ID to detect faces from.

### Returns
- **Array<[WithFaceExpressions<WithFaceLandmarks<WithFaceDetection<{}>>>](#getting-started-utility-classes)>** - An array of objects, each containing face detection, landmark, and expression data.
```

--------------------------------

### Detect All Faces with Landmarks

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/README.md

Detects all faces and computes 68 facial landmark points for each detected face. Returns an array of objects containing face detection and landmarks.

```APIDOC
## detectAllFaces(...).withFaceLandmarks()

### Description
Detects all faces in an input and computes 68 point facial landmarks for each detected face. This method chains after `detectAllFaces`.

### Method
```javascript
const faceapi = require('face-api.js');

const input = 'myImg';

const detectionsWithLandmarks = await faceapi.detectAllFaces(input).withFaceLandmarks()
```

### Parameters
#### Input
- **input** (HTMLImageElement | HTMLVideoElement | HTMLCanvasElement | string) - The input element or its ID to detect faces from.

#### useTinyModel (Optional)
- **useTinyModel** (boolean) - If true, uses the tiny face landmark model. Defaults to false.
```javascript
const useTinyModel = true
const detectionsWithLandmarks = await faceapi.detectAllFaces(input).withFaceLandmarks(useTinyModel)
```

### Returns
- **Array<[WithFaceLandmarks<WithFaceDetection<{}>>](#getting-started-utility-classes)>** - An array of objects, each containing face detection and landmark data.
```

--------------------------------

### Face Landmark Detection Logic

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/examples/examples-browser/views/faceLandmarkDetection.html

This code snippet handles the core logic for detecting all faces and their landmarks in an image. It loads the necessary models, processes the input image, and draws the results on an overlay canvas. Ensure face detection and landmark models are loaded before calling.

```javascript
let withBoxes = true

function onChangeHideBoundingBoxes(e) {
  withBoxes = !$(e.target).prop('checked')
  updateResults()
}

async function updateResults() {
  if (!isFaceDetectionModelLoaded()) {
    return
  }

  const inputImgEl = $('#inputImg').get(0)
  const options = getFaceDetectorOptions()
  const results = await faceapi.detectAllFaces(inputImgEl, options).withFaceLandmarks()
  const canvas = $('#overlay').get(0)
  faceapi.matchDimensions(canvas, inputImgEl)
  const resizedResults = faceapi.resizeResults(results, inputImgEl)

  if (withBoxes) {
    faceapi.draw.drawDetections(canvas, resizedResults)
  }
  faceapi.draw.drawFaceLandmarks(canvas, resizedResults)
}

async function run() {
  // load face detection and face landmark models
  await changeFaceDetector(SSD_MOBILENETV1)
  await faceapi.loadFaceLandmarkModel('/')

  // start processing image
  updateResults()
}

$(document).ready(function() {
  renderNavBar('#navbar', 'face_landmark_detection')
  initImageSelectionControls()
  initFaceDetectionControls()
  run()
})
```

--------------------------------

### Configure TinyFaceDetector Face Detection

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/README.md

Configure TinyFaceDetectorOptions by specifying the input size for image processing and the score threshold for detection. Smaller input sizes are faster but less precise for small faces.

```javascript
export interface ITinyFaceDetectorOptions {
  // size at which image is processed, the smaller the faster,
  // but less precise in detecting smaller faces, must be divisible
  // by 32, common sizes are 128, 160, 224, 320, 416, 512, 608,
  // for face tracking via webcam I would recommend using smaller sizes,
  // e.g. 128, 160, for detecting smaller faces use larger sizes, e.g. 512, 608
  // default: 416
  inputSize?: number

  // minimum confidence threshold
  // default: 0.5
  scoreThreshold?: number
}

// example
const options = new faceapi.TinyFaceDetectorOptions({ inputSize: 320 })
```

--------------------------------

### Find Best Face Match in Query Image 1

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/README.md

Detects a single face in a query image and finds the best match using a pre-initialized FaceMatcher.

```javascript
const singleResult = await faceapi
  .detectSingleFace(queryImage1)
  .withFaceLandmarks()
  .withFaceDescriptor()

if (singleResult) {
  const bestMatch = faceMatcher.findBestMatch(singleResult.descriptor)
  console.log(bestMatch.toString())
}
```

--------------------------------

### Create Canvas from Media Element

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/README.md

Creates an HTML canvas element from an existing image or video element.

```APIDOC
## Create Canvas from Media Element

### Description
Creates an HTML canvas element that mirrors the content of a given image or video element.

### Method
`faceapi.createCanvasFromMedia(mediaElement)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **mediaElement** (HTMLImageElement | HTMLVideoElement): The image or video element to create a canvas from.

### Request Example
```html
<img id="myImg" src="images/example.png" />
<video id="myVideo" src="media/example.mp4" />
```

```javascript
const canvas1 = faceapi.createCanvasFromMedia(document.getElementById('myImg'))
const canvas2 = faceapi.createCanvasFromMedia(document.getElementById('myVideo'))
```

### Response
#### Success Response (200)
- **canvas** (HTMLCanvasElement): A new canvas element containing the media content.
```

--------------------------------

### Recognize Face Expressions with Landmarks

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/README.md

Append `.withFaceExpressions()` to detect faces, compute landmarks, and recognize the expressions for each face. This returns detailed expression data.

```javascript
const detectionsWithExpressions = await faceapi.detectAllFaces(input).withFaceLandmarks().withFaceExpressions()
```

--------------------------------

### Update Query Image Results

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/examples/examples-browser/views/faceRecognition.html

Detects faces in the query image and uses the existing FaceMatcher to find the best match for each detected face. It then draws bounding boxes and labels on the query image overlay.

```javascript
async function updateQueryImageResults() {
  if (!faceMatcher) {
    return
  }
  const inputImgEl = $('#queryImg').get(0)
  const canvas = $('#queryImgOverlay').get(0)
  const results = await faceapi
    .detectAllFaces(inputImgEl, getFaceDetectorOptions())
    .withFaceLandmarks()
    .withFaceDescriptors()
  faceapi.matchDimensions(canvas, inputImgEl)
  // resize detection and landmarks in case displayed image is smaller than // original size
  const resizedResults = faceapi.resizeResults(results, inputImgEl)
  resizedResults.forEach(({ detection, descriptor }) => {
    const label = faceMatcher.findBestMatch(descriptor).toString()
    const options = { label }
    const drawBox = new faceapi.draw.DrawBox(detection.box, options)
    drawBox.draw(canvas)
  })
}
```

--------------------------------

### Detect All Faces with Age and Gender Estimation

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/README.md

Detects all faces in an image and estimates the age and gender for each. Requires face landmarks.

```javascript
const detectionsWithAgeAndGender = await faceapi.detectAllFaces(input).withFaceLandmarks().withAgeAndGender()
```

--------------------------------

### Draw Custom Box with Label

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/README.md

Creates and draws a custom bounding box with a label on a specified canvas. Requires defining the box coordinates and drawing options.

```javascript
const box = { x: 50, y: 50, width: 100, height: 100 }
// see DrawBoxOptions below
const drawOptions = {
  label: 'Hello I am a box!',
  lineWidth: 2
}
const drawBox = new faceapi.draw.DrawBox(box, drawOptions)
drawBox.draw(document.getElementById('myCanvas'))
```

--------------------------------

### Webcam Age and Gender Recognition Logic

Source: https://github.com/justadudewhohacks/face-api.js/blob/master/examples/examples-browser/views/webcamAgeAndGenderRecognition.html

This JavaScript code handles the core logic for webcam access, face detection, age and gender estimation, and drawing the results onto an overlay canvas. It includes functions for updating time statistics and interpolating age predictions for stability.

```javascript
let forwardTimes = []
let predictedAges = []
let withBoxes = true

function onChangeHideBoundingBoxes(e) {
  withBoxes = !$(e.target).prop('checked')
}

function updateTimeStats(timeInMs) {
  forwardTimes = [timeInMs].concat(forwardTimes).slice(0, 30)
  const avgTimeInMs = forwardTimes.reduce((total, t) => total + t) / forwardTimes.length
  $('#time').val(`${Math.round(avgTimeInMs)} ms`)
  $('#fps').val(`${faceapi.utils.round(1000 / avgTimeInMs)}`)
}

function interpolateAgePredictions(age) {
  predictedAges = [age].concat(predictedAges).slice(0, 30)
  const avgPredictedAge = predictedAges.reduce((total, a) => total + a) / predictedAges.length
  return avgPredictedAge
}

async function onPlay() {
  const videoEl = $('#inputVideo').get(0)
  if(videoEl.paused || videoEl.ended || !isFaceDetectionModelLoaded()) {
    return setTimeout(() => onPlay())
  }

  const options = getFaceDetectorOptions()
  const ts = Date.now()
  const result = await faceapi.detectSingleFace(videoEl, options)
    .withAgeAndGender()

  updateTimeStats(Date.now() - ts)

  if (result) {
    const canvas = $('#overlay').get(0)
    const dims = faceapi.matchDimensions(canvas, videoEl, true)
    const resizedResult = faceapi.resizeResults(result, dims)

    if (withBoxes) {
      faceapi.draw.drawDetections(canvas, resizedResult)
    }

    const { age, gender, genderProbability } = resizedResult
    // interpolate gender predictions over last 30 frames
    // to make the displayed age more stable
    const interpolatedAge = interpolateAgePredictions(age)
    new faceapi.draw.DrawTextField([
      `${faceapi.utils.round(interpolatedAge, 0)} years`,
      `${gender} (${faceapi.utils.round(genderProbability)})
    ],
    result.detection.box.bottomLeft
    ).draw(canvas)
  }

  setTimeout(() => onPlay())
}

async function run() {
  // load face detection and face expression recognition models
  await changeFaceDetector(TINY_FACE_DETECTOR)
  await faceapi.nets.ageGenderNet.load('/')
  changeInputSize(224)

  // try to access users webcam and stream the images
  // to the video element
  const stream = await navigator.mediaDevices.getUserMedia({ video: {} })
  const videoEl = $('#inputVideo').get(0)
  videoEl.srcObject = stream
}

function updateResults() {}

$(document).ready(function() {
  renderNavBar('#navbar', 'webcam_age_and_gender_recognition')
  initFaceDetectionControls()
  run()
})
```