он же Тестирование Tensorflow.js

Просматривая в Интернете некоторые технические материалы, я узнал о tensorflow.js, библиотеке машинного обучения на JavaScript. Глядя на него, я обнаружил, что его можно использовать для обнаружения объектов. Я читал о его настройке. Там я нашел два способа настройки Tensorflow.js в своем браузерном проекте:

  • Использование тегов сценария.
  • Установка из NPM и использование инструмента сборки, такого как Parcel.

Полное руководство приведено в Tensorflow.js, с которого я счел хорошим начать.

Мне было легко и удобно использовать теги сценария, и я просмотрел код для добавления библиотеки в проект.



Настройка | TensorFlow.js
Здесь используется использование тега scriptwww.tensorflow.org



<script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js"></script>

Позже для обнаружения объектов я нашел предварительно обученную модель под названием MobileNet и скопировал несколько строк кода. Я узнал, что модель Tensorflow.js берет элементы изображения на основе браузера (например, элементы «img», «видео», «холст») и на выходе возвращает массив наиболее вероятных предсказанных элементов с их вероятностью того, что Предсказываемый объект такой же, как тот, что показан на изображении. Основная часть кода взята с MobileNet:

// Load the model.
  mobilenet.load().then(model => {
    // Classify the image.
    model.classify(img).then(predictions => {
      console.log('Predictions: ');
      console.log(predictions);
    });
  });

Позже я попробовал этот код с изображением кота, и он дал мне правильный результат. В топе результата с вероятностью 0,9148746728897095 оказалась персидская кошка.

Тогда я подумал, а почему бы не попробовать это на видео с веб-камеры. Позже я попробовал, показав видео улитки. Из файла в 31,8 Кб и 1000 объектов его обходим и получаем результат. Мне посчастливилось обнаружить один из 1000 объектов, включенных в эту модель. (запись 113 от 0 до 999).

Я попробовал вводить записанное видео с камеры в реальном времени через getUserMedia. Сначала он не работал и выдавал ошибку: Запрошенный размер текстуры [0x0] недействителен. Но позже при поиске в Интернете я нашел решение, заключающееся в том, чтобы просто установить атрибуты высоты и ширины видеоэлемента. Я направил веб-камеру на видео, и оно было показано на моем экране. В короткие сроки это дало результат. К счастью, это сработало.

Я добавил кнопки для запуска и остановки веб-камеры вместе с местом для результата.

Исходный код находится здесь, на Github. Ключевой фрагмент кода небольшой и простой — Tensorflow и MobileNet очень помогли в завершении этого проекта:

Следует отметить, что я пробовал это в Chrome, а не в любом другом браузере с веб-камерой.

Спасибо за чтение! Надеюсь, вам понравилось.