Используйте React Native для создания приложения распознавания лиц

 _createFaceList() { Requestor.request( face_api_base_url + '/face/v1.0/facelists/' + facelist_id, 'PUT', this.props.apiKey, JSON.stringify(facelist_data) ) .then(function(res){ alert('Face List Created!'); }); } 

Функция _addFaceToFaceList добавляет данные лица в список лиц , на этот раз используя функцию upload из библиотеки Requestor. Принимается URL, на который вы хотите отправить запрос в качестве первого аргумента, ключ API в качестве второго, представление base64 выбранной фотографии в качестве третьего и пользовательские данные в качестве четвертого. Значение userData преобразуется в строку, поскольку функция upload отправляет его в качестве параметра запроса. Вот почему вы ограничены отправкой минимальных данных с максимальной длиной 1 КБ.

 _addFaceToFaceList() { var user_data = { name: this.state.name, filename: this.state.photo.uri }; Requestor.upload( face_api_base_url + '/face/v1.0/facelists/' + facelist_id + '/persistedFaces', this.props.apiKey, this.state.photo_data, { userData: JSON.stringify(user_data) } ) .then((res) => { alert('Face was added to face list!'); }); } 

Функция _getSimilarFace сначала отправляет запрос конечной точке обнаружения лица . Это назначает уникальный идентификатор лицам, обнаруженным на фотографии, и возвращает их вместе с шириной, высотой, верхом и левым положением для создания рамки, окружающей обнаруженное лицо. Но для этого урока вы используете только идентификатор лица.

 _getSimilarFace() { Requestor.upload( face_api_base_url + '/face/v1.0/detect', this.props.apiKey, this.state.photo_data ) .then((facedetect_res) => { ... }); } 

Вот пример ответа, чтобы дать вам представление о том, как выглядят данные, с которыми вы работаете:

 [ { "faceId": "c5c24a82-6845-4031-9d5d-978df9175426", "faceRectangle": { "width": 78, "height": 78, "left": 394, "top": 54 } } ] 

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

 let face_id = facedetect_res[0].faceId; 

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

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

Если вы укажете 2 а затем извлечете вторую строку из результатов, вы получите me2.jpg . Это работает наоборот (подача me2.jpg в конечную точку схожих граней возвращает me.jpg ). Все это означает, что вы получаете второе наиболее близкое соответствие, поэтому нет никаких шансов, что API когда-либо вернет одну и ту же фотографию.

 let data = { faceId: face_id, faceListId: facelist_id, maxNumOfCandidatesReturned: 2 } 

Отправьте запрос в конечную точку поиска похожих лиц, преобразовав данные, построенные в строку, потому что это то, что ожидается от API Face.

 Requestor.request( face_api_base_url + '/face/v1.0/findsimilars', 'POST', this.props.apiKey, JSON.stringify(data) //convert data to a string ) .then((similarfaces_res) => { ... }); 

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

Примечание . Вам необходимо проанализировать userData поскольку они сохраняются в виде строки. Затем вы используете данные, чтобы обновить состояние с подобной фотографией и сообщением, содержащим имя подобного лица и номер доверия. Доверительное число находится в диапазоне от 0 до 1. Числа ближе к 1 означают более высокую вероятность того, что предоставленная пользователем фотография того же человека, что и фотография, возвращенная API.

 let similar_face = similarfaces_res[1]; Requestor.request( face_api_base_url + '/face/v1.0/facelists/' + facelist_id, 'GET', this.props.apiKey ) .then((facelist_res) => { let user_data = {}; facelist_res['persistedFaces'].forEach((face) => { if(face.persistedFaceId == similar_face.persistedFaceId){ user_data = JSON.parse(face.userData); } }); this.setState({ similar_photo: {uri: user_data.filename}, message: 'Similar to: ' + user_data.name + ' with confidence of ' + similar_face.confidence }); }); 

Вот пример ответа от конечной точки поиска похожих лиц:

 [ { "persistedFaceId" : "015839fb-fbd9-4f79-ace9-7675fc2f1dd9", "confidence" : 0.82 }, ... ] 

Добавьте стили:

 const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center' }, button: { padding: 10, margin: 20, height: 45, overflow: 'hidden', backgroundColor: 'white' }, text_input: { height: 40, borderColor: 'gray', borderWidth: 1, backgroundColor: '#FFF' }, message: { fontSize: 30, fontWeight: 'bold' } }); 

Requestor

Библиотека Requestor отправляет HTTP-запросы в Face API. Создайте файл lib / Requestor.js и добавьте следующее:

 import RNFetchBlob from 'react-native-fetch-blob'; module.exports = { upload: function(url, api_key, photo, query_params){ var ret = []; for(var d in query_params){ ret.push(encodeURIComponent(d) + "=" + encodeURIComponent(query_params[d])); } var url = url + "?" + ret.join("&"); return RNFetchBlob.fetch('POST', url, { 'Accept': 'application/json', 'Content-Type': 'application/octet-stream', 'Ocp-Apim-Subscription-Key': api_key }, photo) .then((res) => { return res.json(); }) .then((json) => { return json; }) .catch(function (error) { console.log(error); }); }, request: function(url, method, api_key, data){ let headers = { 'Content-Type': 'application/json', 'Ocp-Apim-Subscription-Key': api_key }; let options = { 'method': method, 'headers': headers }; if(typeof data != 'undefined'){ options.body = data; } return fetch(url, options) .then((res) => { return res.json(); }) .then((json) => { return json; }) .catch(function(error){ console.log(error); }); } } 

Разбивка кода выше. Функция upload обрабатывает все HTTP-запросы на загрузку файлов в Face API. При этом используется библиотека реагировать-родным-извлечением-блобом для отправки представления фотографии в base64 вместе с информацией заголовка, необходимой для API Face.

 upload: function(url, api_key, photo, query_params){ if(typeof query_params != 'undefined'){ //construct the query parameter from the query_params object let ret = []; for(let d in query_params){ ret.push(encodeURIComponent(d) + "=" + encodeURIComponent(query_params[d])); } let url = url + "?" + ret.join("&"); //combine the query parameters with the URL } return RNFetchBlob.fetch('POST', url, { 'Accept': 'application/json', 'Content-Type': 'application/octet-stream', 'Ocp-Apim-Subscription-Key': api_key }, photo) .then((res) => { return res.json(); }) .then((json) => { return json; }) .catch(function (error) { console.log(error); }); }, 

Далее идет метод request который обрабатывает простые HTTP-запросы, такие как отправка строковых данных на сервер.

 request: function(url, method, api_key, data){ let headers = { 'Content-Type': 'application/json', 'Ocp-Apim-Subscription-Key': api_key }; let options = { 'method': method, 'headers': headers }; if(typeof data != 'undefined'){ options.body = data; } return fetch(url, options) .then((res) => { return res.json(); }) .then((json) => { return json; }) .catch(function(error){ console.log(error); }); } 

Играя с приложением

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

После загрузки фотографий скопируйте их на свое устройство и запустите приложение.

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

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

Смотреть в будущее

Это оно! В этом уроке вы работали с Microsoft Face API. Специально освещая функцию распознавания лиц и поиска похожих лиц. Есть и другие интересные вещи, которые вы можете сделать с Face API, вот другие функции, на которые стоит обратить внимание:

• Обнаружение лица : это обязательное условие для получения подобного лица, поэтому я не рассмотрел такие функции обнаружения лица, как оценка возраста человека или угадывание его пола. Вы также можете определить черты лица, например, если человек носит очки или нет, или волосы на лице.
• Группировка лиц : для группировки лиц на основе сходства.
• Проверка лица : для проверки подлинности двух обнаруженных лиц. Вы можете использовать это как форму аутентификации в своих приложениях React Native. Вместо того, чтобы пользователь вводил свою электронную почту и пароль, он может сделать селфи для входа в систему.
• Идентификация лица : для идентификации людей по обнаруженному лицу. Как и API схожих лиц, вы должны сначала добавить грани, прежде чем сможете его использовать.

Любые другие комментарии или вопросы, пожалуйста, дайте мне знать ниже .