Cara Membuat Aplikasi Deteksi Wajah Dengan React Native

Indonesian (Bahasa Indonesia) translation by AaliyaA (you can also view the original English article)

Apakah anda pengembang aplikasi hybrid yang ingin menyertakan deteksi wajah ke dalam aplikasi anda, tetapi anda tidak tahu harus mulai dari mana? Sebagai permulaan, anda dapat membaca An Introduction to Face Detection on Android, yang menunjukkan cara menerapkan deteksi wajah di Android. Tetapi jika anda seperti saya dan anda tidak ingin menulis kode Java untuk membuat modul React Native yang melakukan ini untuk anda, maka anda berada di tempat yang tepat.

Dalam tutorial ini, kita melihat Face Detection API, yang merupakan bagian dari Microsoft Cognitive Services. API ini memungkinkan developer untuk dengan mudah menerapkan fungsi pendeteksian wajah di aplikasi. Dalam tutorial ini, saya akan menganggap bahwa ini bukan aplikasi Native React pertama anda. Jika anda baru dalam React Native, maka saya sarankan anda terlebih dahulu membaca tutorial Memulai Facebook di situs web React Native. Tutorial itu menunjukkan cara mengatur lingkungan anda dan membuat proyek Native React pertama anda.

Prasyarat

Meskipun kami fokus pada platform Android dalam tutorial ini, dengan sedikit usaha, anda dapat menambahkan dukungan untuk platform lain. Pastikan anda memasang Android Studio. Anda dapat mengunduh Android Studio dari portal pengembang Google.

1. Apa itu API Deteksi Wajah?

Sebelum kita mulai menulis aplikasi kita, saya ingin sejenak berbicara tentang API yang akan kita gunakan untuk deteksi wajah. Microsoft face detection API menyediakan deteksi wajah dan fungsi pengenalan wajah melalui API berbasis cloud. Ini memungkinkan kita mengirim permintaan HTTP yang berisi gambar atau URL dari gambar yang ada di web, dan menerima data tentang setiap wajah yang terdeteksi dalam gambar.

Mengirim Permintaan ke API

Anda dapat mengajukan permintaan ke API deteksi wajah Microsoft dengan mengirimkan permintaan POST ke https://api.projectoxford.ai/face/v1.0/detect. Permintaan harus berisi informasi tajuk berikut:

Content-Type: Field header ini berisi tipe data dari body request. Jika anda mengirim URL gambar di web, maka nilai bidang header ini harus berupa aplikasi / json. Jika anda mengirim gambar, setel bidang header ke application/octet.-streaming.
Ocp-Apim-Subscription-Key: Kolom header ini berisi kunci API yang digunakan untuk mengautentikasi permintaan anda. Saya akan menunjukkan kepada anda cara mendapatkan kunci API nanti di tutorial ini.

Secara default, API hanya mengembalikan data tentang kotak yang digunakan untuk melampirkan wajah yang terdeteksi dalam gambar. Dalam sisa tutorial ini, saya akan merujuk boxes ini sebagai face boxes. Opsi ini dapat dinonaktifkan dengan menyetel parameter query returnFaceRectangle ke false. Nilai default adalah true, yang berarti anda tidak harus menentukannya kecuali anda ingin menonaktifkan opsi ini.

Anda dapat menyediakan beberapa parameter query opsional lain untuk mengambil informasi tambahan tentang wajah yang terdeteksi:

returnFaceId: Jika diatur ke true, opsi ini menetapkan pengenal unik untuk setiap wajah yang terdeteksi.
returnFaceLandmarks: Dengan mengaktifkan opsi ini, API mengembalikan array penanda wajah wajah yang terdeteksi, termasuk mata, hidung, dan bibir. Pilihan ini dinonaktifkan secara default.
returnFaceAttributes: Jika opsi ini diaktifkan, API mencari dan mengembalikan atribut unik untuk setiap wajah yang terdeteksi. Anda perlu menyediakan daftar atribut yang dipisahkan koma yang Anda minati, seperti usia, jenis kelamin, senyum, rambut wajah, pose kepala, dan kacamata.

Di bawah ini adalah contoh tanggapan yang Anda dapatkan dari API yang diberikan URL permintaan berikut:

1	https://api.projectoxford.ai/face/v1.0/detect?faceId=true&faceLandmarks=true&faceAttributes=age,gender,smile,facialHair,headPose,glasses

1	[
2	{
3	"faceId": "c5c24a82-6845-4031-9d5d-978df9175426",
4	"faceRectangle": {
5	"width": 78,
6	"height": 78,
7	"left": 394,
8	"top": 54
9	},
10	"faceLandmarks": {
11	"pupilLeft": {
12	"x": 412.7,
13	"y": 78.4
14	},
15	"pupilRight": {
16	"x": 446.8,
17	"y": 74.2
18	},
19	"noseTip": {
20	"x": 437.7,
21	"y": 92.4
22	},
23	"mouthLeft": {
24	"x": 417.8,
25	"y": 114.4
26	},
27	"mouthRight": {
28	"x": 451.3,
29	"y": 109.3
30	},
31	"eyebrowLeftOuter": {
32	"x": 397.9,
33	"y": 78.5
34	},
35	"eyebrowLeftInner": {
36	"x": 425.4,
37	"y": 70.5
38	},
39	"eyeLeftOuter": {
40	"x": 406.7,
41	"y": 80.6
42	},
43	"eyeLeftTop": {
44	"x": 412.2,
45	"y": 76.2
46	},
47	"eyeLeftBottom": {
48	"x": 413.0,
49	"y": 80.1
50	},
51	"eyeLeftInner": {
52	"x": 418.9,
53	"y": 78.0
54	},
55	"eyebrowRightInner": {
56	"x": 4.8,
57	"y": 69.7
58	},
59	"eyebrowRightOuter": {
60	"x": 5.5,
61	"y": 68.5
62	},
63	"eyeRightInner": {
64	"x": 441.5,
65	"y": 75.0
66	},
67	"eyeRightTop": {
68	"x": 446.4,
69	"y": 71.7
70	},
71	"eyeRightBottom": {
72	"x": 447.0,
73	"y": 75.3
74	},
75	"eyeRightOuter": {
76	"x": 451.7,
77	"y": 73.4
78	},
79	"noseRootLeft": {
80	"x": 428.0,
81	"y": 77.1
82	},
83	"noseRootRight": {
84	"x": 435.8,
85	"y": 75.6
86	},
87	"noseLeftAlarTop": {
88	"x": 428.3,
89	"y": 89.7
90	},
91	"noseRightAlarTop": {
92	"x": 442.2,
93	"y": 87.0
94	},
95	"noseLeftAlarOutTip": {
96	"x": 424.3,
97	"y": 96.4
98	},
99	"noseRightAlarOutTip": {
100	"x": 446.6,
101	"y": 92.5
102	},
103	"upperLipTop": {
104	"x": 437.6,
105	"y": 105.9
106	},
107	"upperLipBottom": {
108	"x": 437.6,
109	"y": 108.2
110	},
111	"underLipTop": {
112	"x": 436.8,
113	"y": 111.4
114	},
115	"underLipBottom": {
116	"x": 437.3,
117	"y": 114.5
118	}
119	},
120	"faceAttributes": {
121	"age": 71.0,
122	"gender": "male",
123	"smile": 0.88,
124	"facialHair": {
125	"mustache": 0.8,
126	"beard": 0.1,
127	"sideburns": 0.02
128	}
129	},
130	"glasses": "sunglasses",
131	"headPose": {
132	"roll": 2.1,
133	"yaw": 3,
134	"pitch": 0
135	}
136	}
137	]

Tanggapan sampel ini cukup jelas jadi saya tidak akan mendalami lebih dalam tentang setiap attribut. Data dapat digunakan untuk menampilkan wajah yang terdeteksi, atributnya yang berbeda, dan bagaimana Anda dapat menunjukkannya kepada pengguna. Ini dicapai dengan menafsirkan koordinat x dan y atau posisi atas dan kiri.

Memperoleh Kunci API

Untuk menggunakan API deteksi wajah Microsoft, setiap permintaan harus diautentikasi dengan kunci API. Berikut adalah langkah-langkah yang perlu Anda ambil untuk mendapatkan kunci semacam itu.

Membuat akun Microsoft Live jika Anda belum memilikinya. Masuk dengan akun Microsoft Live Anda dan daftar untuk Microsoft Azure Account. Jika Anda belum memiliki akun Microsoft Azure, Anda dapat mendaftar untuk free trial, memberi Anda akses ke layanan Microsoft selama 30 hari.

Untuk API deteksi wajah, ini memungkinkan Anda mengirim hingga dua puluh panggilan API per menit secara gratis. Jika Anda sudah memiliki akun Azure, maka Anda dapat berlangganan paket Pay-As-You-Go sehingga Anda hanya membayar untuk apa yang Anda gunakan.

Setelah akun Microsoft Azure Anda diatur, Anda akan diarahkan ke Portal Microsoft Azure. Di portal, arahkan ke bilah pencarian dan masukkan cognitive services di bidang pencarian. Klik hasil yang mengatakan Cognitive Services accounts (preview). Anda harus melihat interface yang serupa dengan yang berikut:

Klik tombol Add dan isi formulir yang terlihat:

Account Name: Masukkan nama yang ingin Anda berikan ke resource.
API Type: Pilih API deteksi wajah.
Pricing Tier: Untuk tujuan pengujian, pilih tier gratis (hingga 20 panggilan API per menit). Jika Anda ingin menggunakan layanan dalam produksi, pilih opsi lain yang sesuai dengan kebutuhan aplikasi Anda.
Subscription: Pilih uji coba gratis jika Anda menggunakan akun Microsoft Azure baru. Jika tidak, pilih opsi Pay-As-You-Go.
Resource Group: Pilih yang sudah ada jika Anda sudah memilikinya. Jika tidak, buat grup sumber daya baru dengan memilih opsi baru dan masukkan nama untuk grup sumber daya.
Location: Pilih West US.

Pada langkah berikutnya, Anda harus menyetujui syarat dan ketentuan Microsoft untuk melanjutkan. Klik tombol Create dan tunggu sumber daya untuk menyelesaikan penerapan.

Setelah penerapan selesai, klik tautan All resources di bilah sisi kiri untuk melihat sumber daya yang Anda miliki saat ini. Yang baru saja Anda buat harus terdaftar di sana. Jika tidak, coba refresh halaman.

Klik resource yang Anda buat dan klik ikon kunci untuk melihat kunci API yang terkait dengan sumber daya. Secara default, dua kunci dibuat dan Anda dapat menggunakan salah satu dari itu.

2. Membangun Aplikasi

Sebelum kita mulai membuat aplikasi, izinkan saya memberi Anda gambaran singkat tentang apa sebenarnya aplikasi tersebut. Seperti yang saya sebutkan sebelumnya, kita akan membangun aplikasi deteksi wajah. Aplikasi ini akan memiliki dua tombol, satu untuk memilih gambar dan satu untuk mendeteksi wajah. Tombol untuk memilih gambar akan meminta pengguna untuk memilih sumber, kamera perangkat atau galeri.

Jika kamera dipilih, aplikasi kamera default akan diluncurkan. Jika galeri dipilih, aplikasi akan membiarkan pengguna memilih foto dari galeri. Setelah foto dipilih, tombol untuk mendeteksi wajah menjadi terlihat. Mengetuk tombol ini akan mengirim permintaan ke API deteksi wajah Microsoft, yang mengembalikan data untuk wajah yang terdeteksi. Dengan menggunakan respons API, kotak kecil ditarik di sekitar wajah yang terdeteksi, termasuk label untuk jenis kelamin dan usia orang tersebut.

Ini adalah apa yang akan terlihat seperti aplikasi:

Langkah 1: Memasang Dependensi

Sekarang kita siap untuk membangun aplikasi. Mari kita mulai dengan menginstal dependensi. Membuka jendela terminal baru di direktori kerja Anda dan eksekusi perintah berikut:

1	react native init FaceDetector

Ini menciptakan proyek React Native baru untuk kita, yang pada saat penulisan, berada pada versi 0.25. Ketika proses setup selesai, navigasikan ke folder proyek.

Selanjutnya, kita Instal tiga library yang kita akan gunakan untuk mengembangkan aplikasi:

1	npm install lodash react-native-fetch-blob react-native-image-picker --save

lodash: Kami hanya menggunakan lodash untuk metode map. Kita menggunakan metode ini untuk mengonversi hasil yang kita dapatkan dari API menjadi komponen yang akan kita render.
react-native-image-picker: Library ini digunakan untuk menambahkan kemampuan untuk memilih gambar menggunakan kamera atau gambar dari galeri.
react-native-fetch-blob: Library ini digunakan untuk mengirim permintaan jaringan yang memiliki konten gumpalan. API deteksi wajah secara khusus membutuhkan gumpalan foto, tetapi API fetch tidak mendukungnya di luar box, itulah sebabnya kita menggunakan pustaka ini untuk menanganinya bagi kita.

Langkah 2: Konfigurasi Proyek

Karena tidak semua React Native modules mendukung React Native Package Manager, kita perlu mengkonfigurasi proyek secara manual sehingga modul akan bekerja tanpa masalah. Khususnya, kita perlu mengonfigurasi proyek agar react-native-image-picker untuk berfungsi dengan benar.

Di dalam direktori kerja Anda, buka file android/settings.gradle dan tambahkan cuplikan berikut segera setelah include ': app':

1	include ':react-native-image-picker'
2	project(':react-native-image-picker').projectDir = new File(settingsDir, '../node_modules/react-native-image-picker/android')

Buka file android/app/build.gradle dan temukan bagian dependencies. Seharusnya terlihat seperti ini:

dependencies 
    compile fileTree(dir: "libs", include: ["*.jar"])
    compile "com.android.support:appcompat-v7:23.0.1"
    compile "com.facebook.react:react-native:+"  // From node_modules
}

Tambahkan cuplikan berikut ke daftar dependensi:

1	compile project(':react-native-image-picker')

Buka android/app/src/main/AndroidManifest.xml dan tambahkan cuplikan berikut di bawah perizinan sistem default yang dibutuhkan oleh React Native.

1	<uses-permission android:name="android.permission.CAMERA" />
2	<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
3	<uses-feature android:name="android.hardware.camera" android:required="false"/>
4	<uses-feature android:name="android.hardware.camera.autofocus" android:required="false"/>

Untuk referensi, izin sistem default adalah:

1	<uses-permission android:name="android.permission.INTERNET" />
2	<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

Buka android/app/src/main/java/com/facedetector/MainActivity.java dan tambahkan pernyataan impor berikut di bagian atas kelas MainActivity.

1	import com.imagepicker.ImagePickerPackage;

Saya telah menyebutkan penggunaan rnpm sebelumnya. Jika Anda belum menginstalnya di komputer Anda, sekarang adalah saat yang tepat untuk melakukannya:

1	npm install rnpm -g

Setelah terinstal, jalankan perintah rnpm link untuk secara otomatis menghubungkan modul yang telah Anda instal di settings.gradle, build.gradle, AndroidManifest.xml, dan MainActivity.java.

rnpm link

Ini mengurus semua yang kita lakukan secara manual untuk react-native-image-picker. Kita telah melalui proses manual menambahkan depdensi sehingga Anda tahu apa yang rnpm lakukan di bawah tenda.

Langkah 3: Komponen Titik Masuk Aplikasi

Sekarang kita siap untuk menulis beberapa kode. Pertama, buka index.android.js dan ganti konten file ini dengan yang berikut:

import React from 'react';

import {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View
} from 'react-native';

import Detector from './components/Detector';

const image_picker_options = {
  title: 'Select Photo', 
  takePhotoButtonTitle: 'Take Photo...', 
  chooseFromLibraryButtonTitle: 'Choose from Library...',
  cameraType: 'back', 
  mediaType: 'photo',
  maxWidth: 480,
  quality: 1, 
  noData: false, 
  path: 'images'
};

const api_key = 'YOUR FACE DETECTION API KEY';

class FaceDetector extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Detector imagePickerOptions={image_picker_options} apiKey={api_key} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  }
});

AppRegistry.registerComponent('FaceDetector', () => FaceDetector);

Apa yang kita miliki di atas adalah kode boilerplate untuk file titik entri React Native. Pertama, kita mengimpor komponen yang kita butuhkan.

import React from 'react';

import {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View
} from 'react-native';

import Detector from './components/Detector';

Kita kemudian menyatakan opsi yang akan dibutuhkan komponen Detector. Ini termasuk opsi untuk pemilih gambar dan kunci API yang Anda dapatkan dari Microsoft Azure sebelumnya. Jangan lupa untuk memasukkan kunci API Anda dan menetapkannya ke api_key.

const image_picker_options = {
  title: 'Select Photo', 
  takePhotoButtonTitle: 'Take Photo...', 
  chooseFromLibraryButtonTitle: 'Choose from Library...',
  cameraType: 'back', //front or back camera?
  mediaType: 'photo', //the type of file that you want to pick
  maxWidth: 480, //the target width in which to resize the photo 
  quality: 1, //0 to 1 for specifying the quality of the photo
  noData: false, //if set to true it disables the base64 of the file
};

//the API Key that you got from Microsoft Azure
const api_key = 'YOUR FACE Detection API KEY'; 

Selanjutnya, kita buat komponen titik masuk dan, di dalam container utama, gunakan komponen Detector. Jangan lupa untuk meneruskan properti yang diperlukan:

class FaceDetector extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Detector imagePickerOptions={image_picker_options} apiKey={api_key} />
      </View>
    );
  }
}

Kita juga mendefinisikan gaya:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  }
});

Dan akhirnya, kita mendaftarkan komponen:

1	AppRegistry.registerComponent('FaceDetector', () => FaceDetector);

Langkah 4: Komponen Tombol

Buat sebuah file baru di direktori komponen dan beri nama Button.js. Komponen ini akan memungkinkan kita untuk dengan mudah membuat tombol yang melakukan tindakan tertentu. Nanti, Anda akan melihat bagaimana ini digunakan dalam komponen Detector. Untuk saat ini, ketahuilah bahwa Anda harus meneruskan onpress, button_styles, button_text_styles, dan text sebagai properti untuk menyesuaikan tampilan dan fungsi setiap tombol.

import React from 'react';

import {
  AppRegistry,
  Component,
  Text,
  View,
  TouchableHighlight
} from 'react-native';

export default class Button extends Component {

  render(){
    return (
      <View>
        <TouchableHighlight underlayColor={"#E8E8E8"} onPress={this.props.onpress} style={this.props.button_styles}>
          <View>
              <Text style={this.props.button_text_styles}>{this.props.text}</Text>
          </View>
        </TouchableHighlight>
      </View>
    );
  }
}

AppRegistry.registerComponent('Button', () => Button);

Langkah 5:Komponen Detektor

Masih di dalam direktori komponen, buat file baru, beri nama Detector.js, dan tambahkan kode berikut ke dalamnya. Komponen ini adalah tempat keajaiban terjadi. Luangkan waktu sejenak untuk menelusuri implementasi.

import React from 'react';

import {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  Image
} from 'react-native';


import NativeModules, { ImagePickerManager } from 'NativeModules';

import Button from './Button';

import RNFetchBlob from 'react-native-fetch-blob';

import _ from 'lodash';

export default class Detector extends Component {
  constructor(props) {
      super(props);
    this.state = {
  		photo_style: {
  			position: 'relative',
  			width: 480,
  			height: 480
  		},
  		has_photo: false,
  		photo: null,
  		face_data: null
  	};
  }

  render() {
    return (
      <View style={styles.container}>
		
		<Image
        	style={this.state.photo_style}
        	source={this.state.photo}
        	resizeMode={"contain"}
      	>
			{ this._renderFaceBoxes .call(this) }
      	</Image>
	
		<Button
            text="Pick Photo"
            onpress={this._pickImage.bind(this)}
            button_styles={styles.button}
            button_text_styles={styles.button_text} />

        { this._renderDetectFacesButton.call(this) }

      </View>
    );
  }


  _pickImage() {
  	
	this.setState({
		face_data: null
	});

	ImagePickerManager.showImagePicker(this.props.imagePickerOptions, (response) => {
	 	
	  if(response.error){
	  	alert('Error getting the image. Please try again.');
	  }else{
	  	
	    let source = {uri: response.uri};

	    this.setState({
	      photo_style: {
			position: 'relative',
			width: response.width,
			height: response.height
	      },
	      has_photo: true,
	      photo: source,
	      photo_data: response.data
	    });
	    
	  }
	});

  }

  _renderDetectFacesButton() {
  	if(this.state.has_photo){
	  	return  (
			<Button
	            text="Detect Faces"
	            onpress={this._detectFaces.bind(this)}
	            button_styles={styles.button}
	            button_text_styles={styles.button_text} />
	  	);
  	}
  }

  _detectFaces() {

	RNFetchBlob.fetch('POST', 'https://api.projectoxford.ai/face/v1.0/detect?returnFaceId=true&returnFaceAttributes=age,gender', {
		'Accept': 'application/json',
	    'Content-Type': 'application/octet-stream',
	    'Ocp-Apim-Subscription-Key': this.props.apiKey
	}, this.state.photo_data)
	.then((res) => {
		return res.json();		
	})
	.then((json) => {
		
		if(json.length){
			this.setState({
				face_data: json
			});
		}else{
			alert("Sorry, I can't see any faces in there.");
		}
		
		return json;
	})
	.catch (function (error) {
		console.log(error);
    	alert('Sorry, the request failed. Please try again.' + JSON.stringify(error));
	});
	

  }

  _renderFaceBoxes () {

  	if(this.state.face_data){

	  	let views = _.map(this.state.face_data, (x) => {
	  		
	  		let box = {
	  			position: 'absolute',
	  			top: x.faceRectangle.top,
				left: x.faceRectangle.left
	  		};

			let style = { 
				width: x.faceRectangle.width,
				height: x.faceRectangle.height,
				borderWidth: 2,
				borderColor: '#fff',
			};
			
			let attr = {
				color: '#fff',
			};

		  	return (
		  		<View key={x.faceId} style={box}>
					<View style={style}></View>
					<Text style={attr}>{x.faceAttributes.gender}, {x.faceAttributes.age} y/o</Text>
		  		</View>
		  	);
	  	});

	  	return <View>{views}</View>
  	}

  }
  
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
   	alignItems: 'center',
   	alignSelf: 'center',
    backgroundColor: '#ccc'
  },
  button: {
	margin: 10,
	padding: 15,
	backgroundColor: '#529ecc'
  },
  button_text: {
  	color: '#FFF',
    fontSize: 20
  }
});

AppRegistry.registerComponent('Detector', () => Detector);

Mari kita hancurkan sehingga Anda tahu persis apa yang sedang terjadi. Kita mulai dengan mengimpor library yang kita butuhkan. Ini termasuk React dan komponen bawaannya, image picker, komponen tombol, library react-native-fetch-blob , dan lodash.

import React from 'react';

import {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  Image
} from 'react-native';


import NativeModules, { ImagePickerManager } from 'NativeModules';

import Button from './Button';

import RNFetchBlob from 'react-native-fetch-blob';

import _ from 'lodash';

Di dalam deklarasi class, kita memiliki konstruktor yang dijalankan sebelum komponen dipasang. Di sini kita mengatur styling default untuk foto yang dipilih, nilai boolean yang digunakan sebagai dasar apakah akan menampilkan tombol untuk mendeteksi wajah atau tidak, foto itu sendiri, dan face_data, yang digunakan sebagai sumber data untuk membuat kotak wajah .

export default class Detector extends Component {
  constructor(props) {
    super(props);
    this.state = {
  		photo_style: {
  			position: 'relative',
  			width: 480,
  			height: 480
  		},
  		has_photo: false,
  		photo: null,
  		face_data: null
  	};
  }
  
  ...
}

Berikutnya adalah render() method, yang membuat foto yang dipilih dan dua tombol, pilih gambar dan mendeteksi wajah. Perhatikan bahwa kita memanggil tiga method lain di bawah ini, _renderFaceBoxes(), _pickImage(), dan _renderDetectedFacesButton(). Kita akan berjalan melalui metode ini segera, tetapi untuk sekarang tahu bahwa mereka digunakan untuk menyederhanakan penerapan metode render().

Juga perhatikan bahwa kita menggunakan call dan bind daripada memanggil metode secara langsung. Ini karena method di dalam kelas ES6 tidak terikat secara otomatis ke kelas. Ini berarti Anda harus menggunakan bind atau call untuk mengikat method ke this, yang mengacu pada class itu sendiri. Jika Anda tidak tahu perbedaan antara bind and call, periksa Stack Overflow question tentang perbedaan antara call, apply, dan bind.

render() {
  return (
    <View style={styles.container}>
  
      	<Image
	        style={this.state.photo_style}
	        source={this.state.photo}
	        resizeMode={"contain"}
	      >
	    { this._renderFaceBoxes.call(this) }
	    </Image>

  		<Button
          text="Pick Photo"
          onpress={this._pickImage.bind(this)}
          button_styles={styles.button}
          button_text_styles={styles.button_text} />

      	{ this._renderDetectFacesButton.call(this) }

    </View>
  );
}

Method _pickImage() dipanggil ketika tombol untuk memilih gambar ditekan. Ini menetapkan face_data ke null sehingga kotak wajah yang sudah ada, dihapus. Kemudian membuka dialog untuk memilih tempat untuk mendapatkan foto dari, kamera atau galeri.

Dialog menggunakan objek yang dilewatkan dari index.android.js untuk menyesuaikan pengaturannya. Setelah foto diambil, respons yang berisi lokal URI dan base64 terrepresentasi dari fotonya, dimensinya (lebar dan tinggi), dan informasi penting lainnya tentang file dikembalikan. Kita menggunakan data ini untuk memperbarui keadaan, yang memperbarui antarmuka pengguna aplikasi.

Perhatikan bahwa sebelumnya kita menetapkan maxWidth jadi 480 untuk opsi pemetik gambar. Ini berarti bahwa gambar yang dipilih diubah ukurannya ke lebar dan tingginya secara otomatis disesuaikan untuk mempertahankan aspek rasio. Inilah sebabnya mengapa kita memperbarui lebar dan tinggi di photo_style untuk mengubah ukuran dari komponen Image sehingga foto sangat cocok.

position diatur ke relative sehingga kotak wajah yang benar-benar diposisikan terhambat di dalam komponen Image. photo digunakan sebagai sumber untuk komponen Image dan photo_data adalah representasi base64 foto. Kita perlu memasukkannya ke dalam keadaan sehingga kita bisa menggunakannya nanti ketika membuat permintaan ke API.

_pickImage() {
  
  this.setState({
    face_data: null
  });

  ImagePickerManager.showImagePicker(this.props.imagePickerOptions, (response) => {
    
    if(response.error){
      alert('Error getting the image. Please try again.');
    }else{
      
      let source = {uri: response.uri}; //the source of the photo to display

      this.setState({
        photo_style: {
          	position: 'relative',
      		width: response.width,
      		height: response.height
        },
        has_photo: true,
        photo: source,
        photo_data: response.data
      });
      
    }
  });

}

Metode _renderDetectFacesButton() bertanggung jawab untuk menampilkan tombol untuk mendeteksi wajah. Hanya menampilkan tombol jika has_photo di state diatur ke true.

_renderDetectFacesButton() {
  if(this.state.has_photo){
    return  (
    <Button
            text="Detect Faces"
            onpress={this._detectFaces.bind(this)}
            button_styles={styles.button}
            button_text_styles={styles.button_text} />
    );
  }
}

Ketika tombol deteksi wajah ditekan, method _detectFaces() dijalankan. Metode ini membuat permintaan POST ke Face Detection API, meneruskan representasi base64 dari foto yang dipilih bersama dengan beberapa opsi sebagai parameter query.

Perhatikan bahwa kita menyampaikan representasi base64 foto, tetapi file blob adalah apa yang sebenarnya dikirim ke server karena kita menggunakan library react-native-fetch-blob. Setelah kita mendapatkan balasan, kita memperbarui state dengan face_data untuk merender kotak wajah.

_detectFaces() {

  RNFetchBlob.fetch('POST', 'https://api.projectoxford.ai/face/v1.0/detect?returnFaceId=true&returnFaceAttributes=age,gender', {
      'Accept': 'application/json',
      'Content-Type': 'application/octet-stream',
      'Ocp-Apim-Subscription-Key': this.props.apiKey
  }, this.state.photo_data)
  .then((res) => {
    return res.json();    
  })
  .then((json) => {
    
    if(json.length){
      this.setState({
        face_data: json
      });
    }else{
      //an empty array is returned if the API didn't detect any faces
      alert("Sorry, I can't see any faces in there.");
    }
    
    return json;
  })
  .catch (function (error) {
    console.log(error);
      alert('Sorry, the request failed. Please try again.' + JSON.stringify(error));
  });


}

Perhatikan bahwa, dalam kode di atas, kita menangani kasus di mana API tidak dapat mendeteksi wajah apa pun di foto dengan memperingatkan pengguna. Ini bisa terjadi karena dua alasan:

Foto tidak berisi wajah apapun.
Wajah-wajah dalam foto tidak dapat dikenali oleh algoritma deteksi wajah, karena mereka terlalu besar atau terlalu kecil, sudut wajah besar (pose kepala), pencahayaan tidak cukup atau terlalu banyak, atau sesuatu yang menghalangi sebagian dari wajah.

Metode _renderFaceBoxes() mengembalikan kotak wajah berdasarkan pada face_data yang saat ini dalam state. Kita menggunakan fungsi lodash map() untuk mengulang melalui data wajah. Setiap kotak benar-benar diposisikan sehingga semuanya dimulai di tepi kiri atas komponen Image. Posisi top dan left serta width dan height masing-masing box didasarkan pada nilai yang disimpan dalam objek faceRectangle.

_renderFaceBoxes() {

  if(this.state.face_data){

    let views = _.map(this.state.face_data, (x) => {
      
      let box = {
        position: 'absolute',
        top: x.faceRectangle.top,
          left: x.faceRectangle.left
      };

      let style = { 
        width: x.faceRectangle.width,
        height: x.faceRectangle.height,
        borderWidth: 2,
        borderColor: '#fff',
      };
    
      let attr = {
        color: '#fff',
      };

      return (
        <View key={x.faceId} style={box}>
        	<View style={style}></View>
        	<Text style={attr}>{x.faceAttributes.gender}, {x.faceAttributes.age} y/o</Text>
        </View>
      );
    });

    return <View>{views}</View>
  }

}

Sebelum kita mendaftarkan komponen, kita menambahkan gaya.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    alignSelf: 'center',
    backgroundColor: '#ccc'
  },
  button: {
  margin: 10,
  padding: 15,
  backgroundColor: '#529ecc'
  },
  button_text: {
    color: '#FFF',
    fontSize: 20
  }
});

Dan akhirnya, kita mendaftar komponen.

1	AppRegistry.registerComponent('Detector', () => Detector);

3. Build dan Run

Build dan run aplikasi untuk melihat apakah semuanya berfungsi dengan benar. Jangan lupa untuk memasukkan kunci API yang Anda peroleh dari Microsoft Azure Portal. Dengan kunci API yang valid, aplikasi tidak akan dapat mendeteksi wajah apa pun.

Kesimpulan

Itu dia. Dalam tutorial ini, Anda belajar cara membuat aplikasi deteksi wajah menggunakan API deteksi wajah Microsoft. Saat melakukannya, Anda belajar cara menambahkan layanan ke Microsoft Azure dan membuat permintaan ke API deteksi wajah.

Jika Anda ingin mempelajari lebih lanjut tentang API deteksi wajah, periksa dokumentasi resminya dan Referensi API Layanan Kognitif.