Автор оригинала: FreeCodeCamp Community Member.
Rohit Ramname.
Найдите грани с Microsoft Cognivity Services, Azure и JavaScript
Что такое обнаружение лица?
Вы, вероятно, много раз видели обнаружение лица в действии сейчас, в разных приложениях – например, в вашем телефоне, на фотографиях на Facebook. Обнаружение лица приводит к лицам, имеющим прямоугольники вокруг них. Итак, как следует из названия, просто обнаруживает лицо на изображении. Это также тип Машинное обучение Используйте корпус.
В этом руководстве мы узнаем, как выполнить обнаружение лица с использованием Microsoft Когнитивные услуги предоставляется Azure, и простой JavaScript и CSS Отказ
Что я узнаю из этого урока?
К концу этого учебника мы должны быть в состоянии достичь результата ниже.
Пожалуйста, обратите внимание, что вместе с обнаружением лица Azure также дает нам примерный возраст, и если человек носит очки, функции, которые можно запрашивать в URL.
В этом руководстве гарантируется, что мы создаем подписку Azure, и мы получаем необходимые результаты.
Это упражнение предполагает, что у вас есть подписка Microsoft Azure. Если у вас нет одного, вы можете создать его бесплатно, поехав в Azure Microsoft Сайт Отказ Он попросит вас получить информацию о кредитной карте, но ваша карта никогда не взимается, если не приобретаются платные услуги (что не требуется для этой демонстрации).
Давайте начнем
Во-первых, мы вошли в свою подписку Microsoft Azure.
Перейдите на «Portal.azure.com» и войдите в систему с вашим идентификатором.
Нажмите «Создать ресурс» и найдите «лицо».
Из результатов поиска выберите «Лицо» (категория: «Обучение машины AI +»).
Нажмите Создавать.
Вам придется выполнить простую форму, которая попросит вас:
- Дайте имя вашему ресурсу
- Выберите вашу подписку
- Выберите свой геолокацию, где ваша пользовательская база в основном проживает
- Выберите план ценообразования (есть бесплатный план, который вы можете выбрать для пробных целей).
- Затем нажмите «Создать новый»
После того, как вы выполните эти шаги, Azure будет развернуть ваши услуги и создать ключевые ключи подписки.
Откройте свою подписку, нажав на нее и перейдите в раздел «Обзор».
Это место, где вы можете найти клавиши подписки и ключи доступа. Вам нужно будет отправить ключ доступа с каждым заголовком вызовов API для аутентификации.
Это это для настройки.
Давайте проверим это
Теперь мы можем проверить, работает ли наш API, используя инструмент под названием Почтальон Отказ
Postman – это очень популярный инструмент для проверки вызовов API.
Открытый почтальон и используйте конечную точку в вашей азародной подписке как URL. Убедитесь, что операция, выбранная в раскрывающемся списке, является «Post».
На вкладке «Заголовки» добавьте:
- «Клавиша» клавиша «OCP-APIM-APIM» с «значением» [ваши клавиши подписки на Azure]
- «Ключевой» «Content-Type» со значением «Приложение/октет-поток»
На вкладке «Body» выберите «Двоичный» и нажмите «Выбрать файлы», чтобы выбрать изображение с человеческим лицом.
Нажмите «Отправить».
Вы должны увидеть ответ, как приведен ниже из вызовов API Congient Services Azure.
[ { "faceId": "4f3df6bb-83d9–45ea-bac5-d60cac5a1623", "faceRectangle": { "top": 456, "left": 475, "width": 330, "height": 330 } }]Azure автоматически назначает идентификатор каждому лицу, которое он может обнаруживать, и дает координаты лица на этой картинке.
Вы можете задать Azure для разных атрибутов лица. Для полного списка атрибутов, пожалуйста, обратитесь к Сайт Microsoft Отказ
Например, чтобы запросить, если человек носит солнцезащитные очки и получить предполагаемый возраст, вы можете отправить строку запросов: https://weastus.api.cognitive.microsoft.com/face/v1.0/detect?retursfaceattributes=age1lasses Отказ Для этого запроса 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 с Управление загрузкой файлов Так что мы можем выбрать файл изображения.
Welcome
Давайте сломаемся, чтобы понять, что это такое.
Эта страница имеет два раздела: название и содержание.
Название
Содержание
- Загрузить
<ПрицветаON>, какая главная функция кнопки этого приложения - Особенности
- изображение
Далее вниз, Image Div имеет два компонента.
- ID изображения
= "IMGX", что выбрано фактическое изображение, и с ID =«Лицом», которое является прямоугольником идентификации лица.
Это это для HTML-части.
Теперь основная часть – вызов JavaScript
Код
Сначала добавьте слушателя на событие «Выбранное файл», когда выбран файл.
Document.getelementById («Загрузка»). addeventListener («Изменить», 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.target.files [0]; - Создан новый объект экземпляра класса FileReader
var fileheader (); - Содержание файла, выбранного в мероприятии, читается
reader.readasdataurl (event.target.files [0]);
Теперь, когда файл загружен полностью, SRC Собственность IMGX Элемент устанавливается:
document.getElementById("imgx").src=event.target.result;И это вызывает функцию, которая внутренне получит информацию о лице из изображения:
getFaceDetails(file1);
Давайте посмотрим на GetFaceletails Функция:
function getFaceDetails(file){ var xmlHttp = new XMLHttpRequest(); var url="https://eastus.api.cognitive.microsoft.com/face/v1.0/detect?returnFaceAttributes=age,glasses"; 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 ; } }}WHOA … ! Это выглядит грязно.
Объяснение
Да … Это … немного! Но позвольте мне объяснить.
Первые несколько строк этой функции просто открывают JavaScript XMLHTTPREQUEST с URL и запрашивать заголовки. URL – это URL Azure, который вы указали выше в Postman – или вы можете войти с портала Azure.
var xmlHttp = new XMLHttpRequest(); var url="https://eastus.api.cognitive.microsoft.com/face/v1.0/detect?returnFaceAttributes=age,glasses"; xmlHttp.open("POST",url,true);Затем мы добавили два заголовки запроса. Первый – это OCP-APIM-APIM-KEY и ваш ключ подписки Azure. Второй – это Content-Type ключ с Приложение/октет-поток значение. Так как мы собираемся отправить изображение в запрос, Приложение/октет-поток это тип двоичных данных.
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)Поскольку мы собираемся сделать изображение в центре, нам нужны левые и лучшие координаты визуализации изображения. Это позволяет нам позиционировать наше лицо прямоугольника
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 ;И это завершает часть JS.
Ниже приведена основные стайлинг CSS для целей рендеринга. Пожалуйста, обратите внимание на что мы используем CSS Grid.
#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 ) и Лицо v> ab растворенное для правильного рендеринга. Другое мудрый, лицо
Там мы идем …
Теперь вы можете открыть веб-страницу, выбирать изображение с человеческим лицом в нем и увидеть результаты.
Обнаружение лица может быть дополнительно улучшено, запрашивая дополнительные функции в URL-адрес от Azure. Например, вы можете добавить отображение настроения.
Я надеюсь, что вы нашли это урок захватывающим и построим некоторые прохладные вещи с этим.
Счастливое обучение!