Обзор приложения
Мы будем создавать приложение распознавания лица. У него будут как сервер (Node.js), так и для клиентских (restion.js).
Сервер отвечает за регистрацию граней с Microsoft Cognitive Services API.
С другой стороны, приложение отвечает за следующее:
- Загрузите URL из изображения на формате JPG.
- Показать атрибуты изображения, в данном случае: пол и возраст.
Вот ссылка кода
Вот что будет выглядеть приложение:
Что такое познавательные услуги?
Прежде чем мы продолжим, давайте сначала быстро перейдем за то, какие познавательные услуги. Когнитивные услуги – это сборник услуг, которые позволяют разработчикам легко реализовывать функции машинного обучения в их приложениях. Эти услуги доступны через API, который сгруппирован по следующим категориям:
- Видение – для анализа изображений и видео.
- Речь – для преобразования речи в текст и вице-версию.
- Язык – для обработки естественного языка.
- Решение – для модерации содержания.
- Поиск – для реализации алгоритмов поиска, которые используются на Bing.
Сегодня мы только обеспокоены зрением, более конкретно лицом API. Этот API используется для выявления и поиска сходства граней на изображении.
Настройка познавательных услуг
В этом разделе мы настроим познавательные услуги в портале Azure. Этот раздел предполагает, что у вас уже есть аккаунт Azure.
Во-первых, перейдите в портал Azure и ищите «познавательные услуги». Нажмите на первый результат под услугами:
Далее ищите «лицо» и нажмите на первый результат:
На странице, которая следует, нажмите на кнопку Создать, чтобы добавить сервис:
После этого он попросит детали услуги, которую вы хотите создать.
Введите детали группы ресурсов, которые вы хотите добавить сервис тоже. В этом случае я просто вводил имя, затем нажмите ОК:
После создания группы ресурсов вы можете добавить когнитивную службу. Вот что похоже, так как это развертывание:
После того, как он создан, вы найдете его в списке по когнитивным услугам:
Если вы нажмете на него, вы увидите страницу обзора. Нажмите на кнопки «Показать ключи», чтобы увидеть клавиши API, которые вы можете использовать, чтобы сделать запросы на API. Внизу вы также можете увидеть количество вызовов API, которые вы сделали, и сумма, отведенное к ценору, который вы выбрали:
Построить приложение
Теперь мы готовы начать строить приложение. Сначала мы начнем с компонента сервера.
Сервер
Сервер – это место, где мы собираемся делать все соединения с API лица.
Примечание. Это будет простой пример получения всей информации. Вы можете масштабировать API, как вы хотите.
Начните, импортируя все модули, которые нам нужно:
const express = require('express')
const axios = require('axios')
const bodyParser = require('body-parser')
const app = express()
Далее создайте базовую переменную, которая будет использоваться для инициализации экземпляра AXIOS. Мы будем использовать это, позже, чтобы сделать запрос на API. Вам необходимо поставить другой URL на основе вашего местоположения. Вы можете найти список мест здесь Отказ Клавиша API (клавиша ACP-APIM-APIM) передается в виде значения заголовка вместе с типом содержимого:
// API key from Azure
const ApiKey = `YOUR COGNITIVE SERVICES API KEY`
// Azure endpoint URL - Face API
const AzureEndpoint = `https://westus.api.cognitive.microsoft.com/face/v1.0` // replace with the server nearest to you
// Base instance for axios request
const baseInstanceOptions = {
baseURL: AzureEndpoint,
timeout: 50000,
headers: {
'Content-Type': 'application/json',
'Ocp-Apim-Subscription-Key': ApiKey
}
}
Далее добавьте маршрут для создания списка лиц. Это требует URL-адрес изображения, который будет передан из тела запроса. Этот URL должен иметь формат JPG.
app.post('/create-facelist', async (req, res) => {
try {
const instanceOptions = {...baseInstanceOptions}
const instance = axios.create(instanceOptions)
const body = req.body
// URL with all the params for Azure
const response = await instance.post(
`/detect?returnFaceId=true&returnFaceLandmarks=false&recognitionModel=recognition_01&returnRecognitionModel=false&detectionModel=detection_01&returnFaceAttributes=age,gender`,
{
url: body.image
}
)
// send the response of the fetch
res.send({
response: 'ok',
data: response.data
})
} catch (err) {
console.log("error :c : ", err)
res.send({response: 'not ok'})
}
})
Веб-приложение
Теперь мы можем перейти к кодированию приложения. Начните с создания проекта с NPX: NPX Create-React-App-приложение-приложение-приложение-приложение
Давайте получим обзор Frestend. Как я уже упоминал до того, как это очень простой пример, поэтому он будет состоять из просто ввода, который отправляет данные на API.
Теперь мы можем перейти к определению состояний приложения, как это:
// Api endpoint
const URLAPI = `http://localhost:5000`
// hook state to get the data from the API
const [data, setData] = useState([])
// Hook state to get the info from the input
const [image, setImage] = useState('https://www.kienyke.com/wp-content/uploads/2018/10/selfie.jpg')
Когда пользователь вводит значение в входе, будет установлен в состоянии:
// Set the state with the input value
const handleOnChange = event => {
setImage(event.target.value)
}
Далее со значением ввода позволяют перейти к получению данных:
const handleClickImage = async event => {
try {
const fetchOptions = {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
image: image,
})
}
// Fetch the data
const resp = await fetch(`${URLAPI}/create-facelist`, fetchOptions)
const people = await resp.json()
console.log(people.data)
// Set the state of the data
setData(people.data)
} catch (err) {
console.error(err)
}
}
Далее обновите контент Render, чтобы выглядеть следующее:
return (
Edit src/App.js and save to reload.
Upload a JPG image
Image attributes:
{
data.map(item => (
-
Gender: {item.faceAttributes.gender}, age: {item.faceAttributes.age}
))
}
Link of the image: {image}
);
В указанном выше коде все мы делаем, добавляют вход и неупорядоченный список, который будет отображать атрибуты из изображенных анализируемых.
Запуск приложения
На данный момент вы готовы запустить приложение:
# run API npm run start # run web app cd web/face-detect-app npm run start
Вывод
В этом руководстве вы узнали, как использовать Microsoft Cognitive Services для создания приложения для распознавания лиц, которое использует распознавание лица для идентификации людей.
Оригинал: “https://dev.to/davidlecodes/face-recognition-app-with-azure-3ib9”