Классификатор изображений с TensorFlowJS

В этом видео мы создадим классификатор изображений с помощью TensorFlow JS. Вам не нужно ничего знать о машинном обучении, чтобы следить за этим видео.

Git: https://bitbucket.org/razvanst/image-classifier/src/master/

Я не использовал для этого какой-либо интерфейсный фреймворк. Первое, что нам нужно сделать, это импортировать tensorflow и обученную модель, которую мы будем использовать:

<!-- Load TensorFlow.js. This is required to use MobileNet. -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]"> </script>
<!-- Load the MobileNet model. -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/[email protected]"> </script>

После этого мы можем продолжить и создать функцию прогнозирования:

let model;
function doPrediction() {
model.classify(img).then(predictions => {
showPrediction(predictions);
});
} else {
mobilenet.load().then(_model => {
model = _model;
model.classify(img).then(predictions => {
showPrediction(predictions);
});
});
}
}

В функции doPrediction, если у нас загружена модель, мы продолжаем делать прогноз. Если нет, мы сначала загружаем модель, а затем делаем прогноз.

Теперь мы продолжим и добавим немного HTML для этого:

<div class="content">
<img id="img" crossorigin="anonymous"></img>
<p id="prediction"></p>
<div class="form">
<input type="text" id="image_url">
<button id="submit_button">Go!</button>
</div>
</div>

Здесь у нас есть тег img для изображения и файл, куда мы будем вставлять URL-адрес изображения, чтобы сделать прогноз.

Теперь вернемся к нашему JS, мы собираем все это вместе и делаем прогноз:

const img = document.getElementById('img');
const button = document.getElementById('submit_button');
const input = document.getElementById('image_url');
const result = document.getElementById('prediction');

button.onclick = () => {
const url = input.value;
img.src = url;
result.innerText = "Loading...";
}
img.onload = () => {
doPrediction();
}
function showPrediction(predictions) {
result.innerText = "This might be a " + predictions[0].className;
}

Это все. Вы можете проверить git в начале сообщения для получения полного кода.

LinkedIn: https://www.linkedin.com/in/razvanstatescu/