Я собираюсь показать вам, как вы можете использовать ИИ и машинное обучение с TensorFlow в JavaScript для выполнения классификации изображений и обнаружения объектов. Я был поражен тем, как легко это было реализовать, и, честно говоря, я все еще немного чешу затылок, чувствуя, что я что-то упускаю. Но я обещаю вам, что это чертовски просто (по крайней мере, чтобы начать использовать), и вы можете анализировать изображения с помощью AI/ML и JavaScript всего за несколько минут!
Мои последние две записи в блоге были в основном романами. Оба состояли из более чем 4000 слов, и на их написание ушла вечность. Ради себя и всех, кто, возможно, следил за моими последними двумя постами, я буду краток и прост. Использование TensorFlow.js для анализа изображений заняло у меня несколько минут. Я взял код по ссылкам на их веб-сайте, вставил его в окно VS Code, и мне уже жутко сообщали, что на изображении есть кот.
Что такое классификация изображений и обнаружение объектов?
Я начну с объяснения разницы между классификацией изображений и обнаружением объектов. Мое хорошо прочитанное понимание этого (шутка, я нашел пост на StackOverflow, в котором это подытожено) заключается в том, что классификацию изображений следует использовать, когда вы хотите более конкретно предположить, что находится на изображении. С этим пакетом TensorFlow он будет выводить три разных прогноза, каждый со своим значением вероятности.
Обнаружение объектов следует использовать, когда вы хотите узнать на высоком уровне, что находится на изображении, а также где на изображении оно расположено. Высокий уровень в отношении обнаружения объектов будет относиться к объектно-ориентированному программированию в том смысле, что оно довольно абстрагировано. Подумайте: немецкая овчарка — это тип собаки, сфинкс — это тип кошки и т. д. Я также нашел эту очень подробную статью о Классификация изображений против обнаружения объектов против сегментации изображений от Пулкита Шармы на Medium, если вы хотите читать далее.
Небольшая кодовая мизансцена (у нас есть кое-что, что нужно сделать)
Есть всего несколько вещей, которые вам действительно нужны, чтобы запустить это. Во-первых, это, очевидно, редактор кода. Далее перейдите по этой ссылке, чтобы попасть на домашнюю страницу TensorFlow.js. Я не буду вдаваться в подробности о том, что такое TensorFlow, так как сам едва касаюсь его поверхности. Что мне нравится в нем до сих пор, так это то, что он с открытым исходным кодом и может использоваться на многих языках программирования. От фаворита публики, Python, до JavaScript, который просто находит применение во всем! Любите его или ненавидите, вы не можете отрицать, что это действительно мощный многофункциональный инструмент, который может изучить каждый.
Единственная загвоздка во всем этом заключается в том, что вам понадобится собственный сайт, если вы хотите обойти проблемы CORS с изображениями. Это не проблема, если у вас установлено что-то вроде Wamp или Xamp. Но вы также можете сделать то, что сделал я, поскольку я разрабатываю в основном в мире .NET, а именно настроить супер простой сайт с использованием IIS в Windows. Я не буду вдаваться в подробности того, как настроить любой хостинг в этом блоге, но, возможно, сделаю это в будущем.
Назовите свой размещенный сайт как угодно, и тогда мы сможем написать код, чтобы он заработал!
Классификация изображений с TensorFlow.js
Мы начнем с модели классификации изображений, используя TensorFlow.js. Посетите страницу моделей JS на веб-сайте TensorFlow, чтобы получить код. Я также предоставлю его здесь, но я должен сделать заявление об отказе от ответственности, что я использую базовый шаблон из примеров с некоторыми небольшими изменениями. Я не претендую на все это как на свое! Хорошо, ответственность ушла от ответственности, идем дальше.
Нажмите на Модель классификации изображений. Это приведет вас к репозиторию GitHub для проекта TensorFlow.js tfjs-models. Если вы хотите прочитать о том, что вы собираетесь прочитать, не стесняйтесь. В противном случае просто продолжайте читать, так как я опубликую код через мгновение.
Теперь о магии, которая взорвала мой мозг повсюду. Серьезно, все, что вам нужно, чтобы это заработало, — это следующий фрагмент кода. Скопируйте и вставьте его в новый файл в папке собственного веб-сайта. Я собираюсь назвать свой что-то вроде image-classification.html. Также не забудьте использовать свое собственное изображение или найти изображения кошек в Google. Загрузите изображение, а затем загрузите его на корневой уровень, рядом с другими вашими html-файлами. Вот код:
<!DOCTYPE html> <html> <head> <title>Image Classification</title> <meta charset="utf-8" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <!-- 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> </head><body> <!-- Replace this with your image. Make sure CORS settings allow reading the image! --> <img id="img" src="cat.jpg" crossorigin="anonymous" style="max-width: 200px;"></img> <h3>Predictions:</h3> <p id="predictions"></p> <script> const img = document.getElementById('img'); const predictionsElem = document.getElementById('predictions');// Load the model. mobilenet.load().then(model => { // Classify the image. model.classify(img).then(predictions => { var serializedPredictions = JSON.stringify(predictions); // View in browser in string version predictionsElem.innerHTML = serializedPredictions; // View in console in object version console.log(predictions); }); }); </script> </body></html>
В приведенном выше фрагменте важно отметить, что я добавил атрибут crossorigin="anonymous" к элементу изображения. В примерах на TensorFlow вам говорят убедиться, что вы правильно установили CORS, но на момент написания этой статьи у них не было этого атрибута. Я посмотрел его, и, похоже, это исправило его достаточно, чтобы я мог начать использовать изображение.
Осталось только открыть свой сайт и проверить результаты классификации изображений.
Результаты классификации изображений с помощью TensorFlow.js
Для запуска теста я использовал следующее изображение кота:
Как только я загрузил свой новый html-файл, мне были показаны результаты как в браузере, так и в консоли. Меня не очень волнует текстовая версия в браузере и вместо этого я посмотрю на консоль. Вот что получилось у меня:
Каждый раз, когда вы запускаете код классификации изображений, он возвращает три результата с разной вероятностью и именем класса. Я бы сказал, что этот пробег был довольно точным. Поскольку я мало что знаю о кошках, я был бы готов принять все три ответа от какого-нибудь случайного человека, рассказавшего мне ту же историю.
Это для первого примера. Похлопайте себя по плечу, потому что вы только что успешно использовали ИИ и машинное обучение в JavaScript! Перейдем к модели обнаружения объектов.
Обнаружение объектов с помощью TensorFlow.js
Следующее, что мы попробуем, — это модель обнаружения объектов в TensorFlow.js. Подводя итог, модель обнаружения объектов отличается от модели классификации изображений тем, что она дает вам имя объекта высокого уровня, но затем также включает данные о местоположении на изображении, где находится этот объект. Я всегда вспоминаю первые дни Facebook с этим. Эта жуткая маленькая белая коробочка, которая автоматически волшебно обволакивала лица ваших друзей и членов семьи, предлагая вам «пометить» их на изображении. Как ИИ уже стал частью нашей повседневной жизни, а?
В любом случае, мы будем использовать код, который будет очень похож на тот, что был в последнем файле, но с некоторыми изменениями, чтобы использовать, так сказать, другую «базовую» модель. Код классификации изображений использовал так называемые модели «MobileNet» для сбора данных. (Если я не согласен с этим, просто дайте мне знать. Я только немного читал об этом). Модель обнаружения объектов будет использовать данные, которые были агрегированы в наборе данных COCO. Если вам нужна дополнительная информация о любой из вещей, которые я только что выкинул, просто просмотрите документацию по этим пакетам GitHub.
Чтобы получить код для этого проекта, перейдите на страницу обнаружения объектов в репозитории GitHub, здесь. Мы снова будем использовать версию проекта с Script Tag. В той же папке, что и ваш последний файл, создайте новый файл с именем, например, object-detection.html, и вставьте следующий код. Убедитесь, что файл cat.jpg все еще находится на корневом уровне, чтобы он загружался без проблем.
<!DOCTYPE html> <html> <head> <title>Object Detection</title> <meta charset="utf-8" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <!-- Load TensorFlow.js. This is required to use coco-ssd model. --> <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"> </script> <!-- Load the coco-ssd model. --> <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd"> </script> </head> <body> <!-- Replace this with your image. Make sure CORS settings allow reading the image! --> <img id="img" src="cat.jpg" crossorigin="anonymous" style="max-width: 200px;"></img> <h3>Predictions:</h3> <p id="predictions"></p><!-- Place your code in the script tag below. You can also use an external .js file --> <script> // Notice there is no 'import' statement. 'cocoSsd' and 'tf' is // available on the index-page because of the script tag above. const img = document.getElementById('img'); const predictionsElem = document.getElementById('predictions');// Load the model. cocoSsd.load().then(model => { // detect objects in the image. model.detect(img).then(predictions => { var serializedPredictions = JSON.stringify(predictions); // View in browser in string version predictionsElem.innerHTML = serializedPredictions; // View in console in object version console.log(predictions); }); }); </script> </body></html>
Основное отличие в файле обнаружения объектов — это ссылки на скрипты, использующие coco-ssd, а не mobilenet. Позже в файле мы также вызываем объект cocoSsd вместо экземпляра объекта mobilenet. Что же происходит за этими мощными объектами? Я не знаю. Я все еще читаю об этом, и вы тоже должны. Но все, что нам нужно знать, это то, что это довольно удивительный материал.
Результаты обнаружения объектов с помощью TensorFlow.js
Загрузите новый файл, перейдя к тому, как вы его назвали. Я заметил, что страница coco-ssd (обнаружение объектов) загружается намного медленнее, чем классификация изображений мобильной сети. Я не уверен, почему это именно так, но если бы мне пришлось гадать, я бы сказал, что это как-то связано с тем, что он должен анализировать изображение и отображать координаты местоположения объекта.
Хорошо, после того, как вы загрузили свою страницу, вы должны увидеть то же изображение своего кота, а затем проверить консоль на наличие нового объекта, который будет выведен для нашего просмотра. Мой выглядел следующим образом после нескольких секунд загрузки:
Это выводит информацию о том, что представляет собой объект и где он расположен на изображении. Свойство bbox каждый раз показывает четыре дополнительных свойства. Они по порядку представляют оси X и Y, а также ширину и высоту отображения. Затем вы можете взять эту информацию и использовать ее аналогично тому, как Facebook делает свои предложения по тегам, как на изображении ниже. Я добавил в свой файл дополнительный код, чтобы поместить рамку вокруг лица кошки.
Добавьте «тег» в стиле Facebook к своему изображению
Добавьте следующее внутри тега <head>. Обязательно измените свои значения, чтобы они соответствовали вашему собственному выводу, чтобы поле правильно отображалось на лицевой стороне объектов.
<style>
.tag-box
{
position: absolute;
left: 34px; / Comes from the bbox[0] (X) element, or 33.7096393..., in my case /
top: 12px; / Comes from the bbox[1] (Y) element, or 11.80246728... /
width: 122px; / Comes from the bbox[2] (Width) element, or 121.54009938... /
height: 120px; / Comes from the bbox[3] (Height) element, or 119.358210146... /
border: 3px solid white;
}
</style>Затем добавьте следующий элемент где-нибудь в теги <body>:
<div class="tag-box"></div>После добавления кода в мой файл определения объекта я получил следующие результаты:
Вот и все. Поставьте себе пять, потому что вы только что использовали две функции TensorFlow с JavaScript. Вы на пути к тому, чтобы помочь роботам править миром!
Краткое содержание
Я сказал, что буду краток, так что я буду. Я только начал изучать, как использовать TensorFlow.js, и не могу слишком много говорить по действительно подробным темам. Но, установив это всего за долю времени, я понял, что это займет у меня много времени, я думаю, что, возможно, запустил еще одну червоточину программирования, которая никогда не кончается. Но я не злюсь на это.
Надеюсь, это руководство было полезным и показало вам что-то новое для изучения в мире программирования. Я знаю, что искусственный интеллект и машинное обучение — это обширные темы, и на данный момент нет ничего зазорного в том, что они являются одними из самых популярных словечек в мире технологий. Если вам понравился пост, обязательно поставьте лайк, отреагируйте на него, прокомментируйте его или посмейтесь и закройте страницу. Спасибо, как всегда, за то, что нашли время, чтобы прочитать, и я надеюсь, что вы вернетесь для новых сообщений в будущем.
Удачного кодирования!
Полезные ссылки
- Страница моделей TensorFlow.js
- Репозиторий GitHub по классификации изображений
- Репозиторий GitHub для обнаружения объектов
Изображение кошки предоставлено Manja Vitolic на Unsplash и изображение собаки предоставлено Victor Grabarczyk на Unsplash.
