knn-classifier/demo/camera.js
async function animate() {
  stats.begin();

  // Get image data from video element
  const image = tf.browser.fromPixels(video);
  let logits;
  // 'conv_preds' is the logits activation of MobileNet.
  const infer = () => mobilenet.infer(image, 'conv_preds');

  // Train class if one of the buttons is held down
  if (training != -1) {
    logits = infer();
    // Add current image to classifier
    classifier.addExample(logits, training);
  }

  // If the classifier has examples for any classes, make a prediction!
  const numClasses = classifier.getNumClasses();
  if (numClasses > 0) {
    logits = infer();

    const res = await classifier.predictClass(logits, TOPK);
    for (let i = 0; i < NUM_CLASSES; i++) {
      // Make the predicted class bold
      if (res.classIndex == i) {
        infoTexts[i].style.fontWeight = 'bold';
      } else {
        infoTexts[i].style.fontWeight = 'normal';
      }

      const classExampleCount = classifier.getClassExampleCount();
      // Update info text
      if (classExampleCount[i] > 0) {
        const conf = res.confidences[i] * 100;
        infoTexts[i].innerText = ` ${classExampleCount[i]} examples - ${conf}%`;
      }
    }
  }

  image.dispose();
  if (logits != null) {
    logits.dispose();
  }

  stats.end();

  requestAnimationFrame(animate);
}
async function animate() {
  stats.begin();

  // Get image data from video element
  const image = tf.browser.fromPixels(video);
  let logits;
  // 'conv_preds' is the logits activation of MobileNet.
  const infer = () => mobilenet.infer(image, 'conv_preds');

  // Train class if one of the buttons is held down
  if (training != -1) {
    logits = infer();
    // Add current image to classifier
    classifier.addExample(logits, training);
  }

  // If the classifier has examples for any classes, make a prediction!
  const numClasses = classifier.getNumClasses();
  if (numClasses > 0) {
    logits = infer();

    const res = await classifier.predictClass(logits, TOPK);
    for (let i = 0; i < NUM_CLASSES; i++) {
      // Make the predicted class bold
      if (res.classIndex == i) {
        infoTexts[i].style.fontWeight = 'bold';
      } else {
        infoTexts[i].style.fontWeight = 'normal';
      }

      const classExampleCount = classifier.getClassExampleCount();
      // Update info text
      if (classExampleCount[i] > 0) {
        const conf = res.confidences[i] * 100;
        infoTexts[i].innerText = ` ${classExampleCount[i]} examples - ${conf}%`;
      }
    }
  }

  image.dispose();
  if (logits != null) {
    logits.dispose();
  }

  stats.end();

  requestAnimationFrame(animate);
}
async function animate ( ) { stats . begin ( ) ; // Get image data from video element const image = tf . browser . fromPixels ( video ) ; let logits ; // 'conv_preds' is the logits activation of MobileNet. const infer = ( ) => mobilenet . infer ( image , 'conv_preds' ) ; // Train class if one of the buttons is held down if ( training != - 1 ) { logits = infer ( ) ; // Add current image to classifier classifier . addExample ( logits , training ) ; } // If the classifier has examples for any classes, make a prediction! const numClasses = classifier . getNumClasses ( ) ; if ( numClasses > 0 ) { logits = infer ( ) ; const res = await classifier . predictClass ( logits , TOPK ) ; for ( let i = 0 ; i < NUM_CLASSES ; i ++ ) { // Make the predicted class bold if ( res . classIndex == i ) { infoTexts [ i ] . style . fontWeight = 'bold' ; } else { infoTexts [ i ] . style . fontWeight = 'normal' ; } const classExampleCount = classifier . getClassExampleCount ( ) ; // Update info text if ( classExampleCount [ i ] > 0 ) { const conf = res . confidences [ i ] * 100 ; infoTexts [ i ] . innerText = ` ${ classExampleCount [ i ] } ${ conf } ` ; } } } image . dispose ( ) ; if ( logits != null ) { logits . dispose ( ) ; } stats . end ( ) ; requestAnimationFrame ( animate ) ; }
Animation function called on each frame, running prediction
Animation function called on each frame running prediction