Как настроить распознавание лица с помощью идентификации функций в своей программе

1656555493 kak nastroit raspoznavanie licza s pomoshhyu identifikaczii funkczij v svoej

автор Рохит Рамнам

Найдите лицо с помощью Microsoft Cognitive Services, Azure и JavaScript

K1PR2n3zSKsdfQH-BlnQD9S2XtC7rzu7O57f
Фото Ванессы Серпас на Unsplash

Что такое распознавание лица?

Вы, наверное, много раз видели распознавание лица в действии в разных приложениях – например, в телефоне, на фотографиях в Facebook. Распознавание лица приводит к тому, что лица имеют прямоугольники вокруг них. Следовательно, как следует из названия, это просто обнаружение лица на изображении. Это тоже разновидность машинное обучение случай использования.

В этом учебнике мы научимся распознавать лицо с помощью Microsoft. Когнитивные услуги обеспечивается голубой, и простой JavaScript и CSS.

Что я узнаю из этого учебника?

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

iXj0mo7EbVzNGkwwejoymi4vMpkPeoT0W0Qs

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

Это руководство гарантирует, что мы настроили подписку Azure и получим необходимые результаты.

Это упражнение подразумевает, что у вас есть подписка на Microsoft Azure. Если у вас его нет, вы можете создать его бесплатно, перейдя на веб-сайт Microsoft Azure. Он запросит у вас информацию о кредитной карте, но с вашей карты никогда не взимается плата, если не будут приобретены платные услуги (что не требуется для этой демонстрации).

Давайте начнем

Сначала мы входим в нашу подписку на Microsoft Azure.

Перейдите на «Portal.azure.com» и войдите, используя свой идентификатор.

Нажмите кнопку «Создать ресурс» и найдите «Лицо».

pWBktCmM22poTQCu9O0ffDJ-XwuzXFR278oG

В результатах поиска выберите Лицо (категория: «AI + машинное обучение»).

Нажмите Создайте.

Вам нужно будет заполнить простую форму, которая попросит вас:

  • дайте название своему ресурсу
  • выберите свою подписку
  • выберите геолокацию, где в основном будет находиться ваша база пользователей
  • выберите свой тарифный план (есть бесплатный план, который можно выбрать для пробных целей).
  • затем нажмите «Создать новый»

После выполнения этих шагов Azure развернет ваши службы и создаст ключи подписки.

Откройте подписку, нажав на нее, и перейдите к разделу «Обзор».

F9qllAlSy-VV235jE3cTsPqJYZU7yqpFKPqp

Это место, где можно найти ключи подписки и ключи доступа. Вам необходимо отправить ключ доступа с каждым заголовком вызова API для аутентификации.

Вот и все для настройки.

Давайте попробуем это

Теперь мы можем проверить, работает ли наш API, используя инструмент под названием Postman.

Postman является очень популярным инструментом для тестирования вызовов API.

Откройте Postman и используйте конечную точку в своей подписке Azure в качестве URL-адреса. Убедитесь, что операция, выбранная в раскрывающемся меню, имеет значение «POST».

hP4vpX4xQ03JOgvGod30j4cdzkVbwa8bd3lQ

На вкладке «Заголовки» добавьте:

  • «Ключ» «Ocp-Apim-Subscription-Key» из «Значение» [your Azure subscription keys]
  • «Ключ» «Тип содержимого» со значением «application/octet-stream»
tO2WWVz38lE8fLJcy1qLH8BUihdabaNUiSOR

На вкладке Тело выберите двоичный и нажмите Выбрать файлы, чтобы выбрать изображение с человеческим лицом.

pgpPb-EfwRP6-GYOnLG27UNY-Q7qT5fazD5g

Нажмите «Отправить».

Вы должны увидеть ответ, как показано ниже, от вызовов API Cognitive Services Azure.

[ { “faceId”: “4f3df6bb-83d9–45ea-bac5-d60cac5a1623”, “faceRectangle”: { “top”: 456, “left”: 475, “width”: 330, “height”: 330 } }]

Azure автоматически назначает идентификатор каждому лицу, которое может обнаружить и предоставляет координаты лица на этом изображении.

Вы можете запросить у Azure различные атрибуты лица. Полный список атрибутов можно найти на веб-сайте Microsoft.

Например, чтобы спросить, носит ли человек солнцезащитные очки и получить примерный возраст, можно отправить строку запроса: для этого запроса Azure пришлет примерный возраст, тип очков (или без очков) и анализ эмоций.

[ { “faceId”: “f8721afb-f9d8–4372-ab43–23fd429aafbf”, “faceRectangle”: { “top”: 640, “left”: 297, “width”: 202, “height”: 202 }, “faceAttributes”: { “age”: 31, “glasses”: “Sunglasses”, “emotion”: { “anger”: 0, “contempt”: 0.001, “disgust”: 0, “fear”: 0, “happiness”: 0, “neutral”: 0.998, “sadness”: 0, “surprise”: 0 } } }]

Прекрасно. Похоже, у нас готова базовая настройка.

Но прежде чем перестать читать статью и закрыть окно…

Переходим к интересному:

Мы подключим все это к веб-странице, чтобы увидеть результаты.

Нам понадобится простая HTML-страница из Контроль загрузки файлов чтобы мы могли выбрать файл изображения.

<div id=”containerDiv”> <div id=”titleDiv”> Welcome </div> <div id=”content”> <div id=”btnUpload”> <div class=”upload-btn-wrapper”> <button class=”btn” >Upload a file</button> <input type=”file” name=”myfile” id=”upload” /> </div></div> <div id=”features”> </div> <div id=”imgDiv”><img id=”imgx” class=”imageContainer” ><div id=”face”></div></div></div> </div>

Давайте разберемся, чтобы понять, что это такое.

Эта страница имеет два раздела: название и содержание.

Название <div> достаточно просто. Это просто название программы с идентификатором.

Содержание <div> имеет три раздела:

  • скачать <button>, являющийся основной функциональной кнопкой этой программы
  • особенности <div>, который будет содержать черты изображения лица
  • изображение <div>, который воспроизводит выбранное изображение

Далее внизу Image div состоит из двух компонентов.

  • идентификатор изображения =“imgx”что является фактическим выбранным изображением, и
  • <div> with id=«лицо», то есть прямоугольник идентификации лица.

Вот и все для раздела HTML.

Теперь основная часть – вызов JavaScript

код

Сначала добавьте слушателя к событию «Избранный файл», когда выбран файл.

document.getElementById(‘upload’).addEventListener(‘change’, fileChange, false);

Добавьте fileChange функция события:

function fileChange(event){ if(event.target.files && event.target.files.length >= 0) { var file1= event.target.files[0]; var reader = new FileReader(); reader.onload = (event) => { document.getElementById(“imgx”).src=event.target.result; getFaceDetails(file1); } } reader.readAsDataURL(event.target.files[0]); }

Когда возникает событие, то есть выбирается файл:

  • читаются детали событияvar file1= event.target.files[0];
  • создается новый объект экземпляра класса FileReadervar reader = new FileReader();
  • читается содержимое файла, выбранного в событии reader.readAsDataURL(event.target.files[0]);

Теперь, когда файл загружен полностью, файл src собственность imgx элемент установлен:

document.getElementById(“imgx”).src=event.target.result;

и он вызывает функцию, которая внутренне получит информацию о лице из изображения:

getFaceDetails(file1);

Давайте посмотрим на getFaceDetails функция:

function getFaceDetails(file){ var xmlHttp = new XMLHttpRequest(); var url=” xmlHttp.open(“POST”,url,true); xmlHttp.setRequestHeader(“Content-Type”, “application/octet-stream”);
xmlHttp.setRequestHeader(“Ocp-Apim-Subscription-Key”, “[Azure Face API subscription key]”); xmlHttp.send(file); xmlHttp.onreadystatechange = function (response) { if (this.readyState == 4 && this.status == 200) { let face=JSON.parse(this.responseText) var oleft = document.getElementById(“imgx”).offsetLeft; var otop = document.getElementById(“imgx”).offsetTop; document.getElementById(“face”).style.left=oleft+face[0].faceRectangle.left+”px”; document.getElementById(“face”).style.top=otop+face[0].faceRectangle.top+”px”; document.getElementById(“face”).style.width=face[0].faceRectangle.width+”px”; document.getElementById(“face”).style.height=face[0].faceRectangle.height+”px”; document.getElementById(“features”).innerText=”Age: “+face[0].faceAttributes.age +” Glasses:”+face[0].faceAttributes.glasses ; } }}

ой…!! Это выглядит грязно.

Объяснение

Да… это… немного! Но позвольте мне объяснить.

Первые несколько строк этой функции просто открывают JavaScript XMLHttpRequest с URL-адресом и заголовками запроса. URL-адрес — это URL-адрес Azure, предоставленный выше в Postman — или вы можете получить доступ с портала Azure.

var xmlHttp = new XMLHttpRequest(); var url=” xmlHttp.open(“POST”,url,true);

Затем мы добавили два заголовка запроса. Первый – это Ocp-Apim-Subscription-Key и ваш ключ подписки на Azure. Второй – это Content-Type ключ из application/octet-stream значение. Поскольку мы собираемся отправить изображение в запросе, application/octet-stream это тип для двоичных данных.

xmlHttp.setRequestHeader(“Ocp-Apim-Subscription-Key”, “[Azure Face API subscription key]”);
xmlHttp.setRequestHeader(“Content-Type”, “application/octet-stream”);

И тогда мы звоним:

xmlHttp.send(file);

Когда запрос будет выполнен, это состояние готовности 4. Мы получаем координаты части изображения лица в формате JSON вместе с функциями.

xmlHttp.onreadystatechange = function (response) { if (this.readyState == 4 && this.status == 200) { let face=JSON.parse(this.responseText)

Поскольку мы собираемся отображать изображение в центре, нам понадобятся левая и верхняя координаты отрендерированного изображения. Это позволяет нам разместить наш прямоугольник лица. <div> соответственно.

var oleft = document.getElementById(“imgx”).offsetLeft;var otop = document.getElementById(“imgx”).offsetTop;

А теперь нам остается просто нарисовать прямоугольник («лицо» <div>) вокруг лица на воспроизведенном изображении.

document.getElementById(“face”).style.left=oleft+face[0].faceRectangle.left+”px”; document.getElementById(“face”).style.top=otop+face[0].faceRectangle.top+”px”; document.getElementById(“face”).style.width=face[0].faceRectangle.width+”px”; document.getElementById(“face”).style.height=face[0].faceRectangle.height+”px”;

А также читайте атрибуты функций в функциях <div>.

document.getElementById(“features”).innerText=”Age: “+face[0].faceAttributes.age +” Glasses:”+face[0].faceAttributes.glasses ;

На этом часть JS заканчивается.

Ниже приведен базовый стиль CSS для визуализации целей. Пожалуйста, запиши что мы используем сетку CSS.

#containerDiv{ display:grid; grid-template-areas:  “title” “content”}
#imgDiv{ background-repeat: no-repeat; border: 1px solid #bbb; border: solid; grid-area:image;}#face{ position:absolute; border:solid; border-style: ridge; border-color: cornsilk;}#features{ grid-area:features}#titleDiv{ height: 100px; display: flex; justify-content: center; align-items: center; font-size: -webkit-xxx-large; background-color: black; color: sandybrown; font-family: sans-serif; grid-area:title;}
#content{ display:grid; justify-items:center; grid-area:content; grid-template-areas:  “upload” “features” “image”}#btnUpload{ grid-area:upload;}.upload-btn-wrapper { position: relative; overflow: hidden; display: inline-block; padding: 2%; width: 100vw; display: flex; justify-content: center; } .btn { border: 2px solid gray; color:white; background-color:cornflowerblue; padding: 8px 20px; border-radius: 8px; font-size: 20px; font-weight: bold; }  .upload-btn-wrapper input[type=file] { font-size: 100px; position: absolute; left: 0; top: 0; opacity: 0; }

Его очень важно сохранить позицию управление изображением (imgx) и Face <dяv> abраствор для правильной визуализации Другойwise, Face

не отображается поверх изображения. Он будет где-то со стороны как встроенный эффект.

Там мы идем…

Теперь вы можете открыть веб-страницу, выбрать изображение с человеческим лицом и увидеть результаты.

Распознавание лица можно улучшить, запросив дополнительные функции в URL-адресе от Azure. Например, можно добавить отображение настроений.

Надеюсь, этот учебник был для вас увлекательным, и вы его создадите классные вещи с этим.

Счастливого обучения!

Добавить комментарий

Ваш адрес email не будет опубликован.