Cara menggunakan javascript pengenal emosi wajah

Apakah ini tutorial? . (Lihat catatan akhir untuk tautan ke GitHub saya)

Tujuan pembelajaran

Cara menggunakan javascript pengenal emosi wajah

Proyek ini digunakan untuk mempelajari dasar-dasar mengonversi model TensorFlow-Keras asli (Python) ke JavaScript menggunakan TensorFlow JS. TensorFlow JS adalah adaptasi JavaScript dari perpustakaan TensorFlow yang perkasa untuk Deep Learning, dan memungkinkan inferensi waktu nyata di browser menggunakan model berbasis JSON. Ini juga menyediakan alat baris perintah yang sangat nyaman untuk mengonversi model Python ke JavaScript (yang saya gunakan untuk proyek ini), karena pada saat pengembangan, struktur API tidak benar-benar matang seperti mitra Python-nya.

Tujuan Proyek

Tujuan proyek secara harfiah adalah segala sesuatu yang sepertinya dapat digunakan di browser web, selain menjadi sesuatu yang sepertinya akan membuat saya tertarik cukup lama sampai selesai. (Kecuali ada nilai bisnis eksplisit atau ROI bukan nol, saya kehilangan minat dengan sangat cepat)

Saya mencari-cari beberapa ide yang tampaknya hanya berguna sementara masih menarik atau mirip ceruk, dan menemukan kumpulan data yang berisi wajah manusia dengan ekspresi yang berbeda-beda. Wajah-wajah tersebut diklasifikasikan ke dalam 7 jenis emosi yang berlainan, dan setiap gambar berbentuk persegi dari wajah yang berbeda, dalam berbagai kondisi pencahayaan, lintas etnis dan jenis kelamin. Dari sini saya memutuskan bahwa tujuan proyek adalah merancang pendeteksi emosi yang berjalan di dalam browser menggunakan TensorFlow JS dan perangkat webcam

Masalah

Cara menggunakan javascript pengenal emosi wajah

  1. Sudah lama sejak saya menggunakan CSS
  2. Browser sebenarnya bukan cluster komputasi

Jadi saya harus membiasakan diri dengan keanehan CSS (bagaimana saya berhasil memusatkan UI utama baik secara horizontal maupun vertikal masih menjadi misteri bagi saya), dan saya juga harus membuat beberapa pengoptimalan push-toe untuk mencegah saya browser mogok setelah beberapa bingkai inferensi pertama

Dibawah tenda

Model pengenalan wajah turnkey pertama kali digunakan untuk memperoleh lokasi wajah subjek dari webcam dari sumber ini. Keluaran dari pelokalan wajah ini digambar pada kanvas dinamis, dan kotak pembatas dipangkas menjadi elemen tersembunyi

Model

Saya membangun Convolutional-Neural Network yang sangat sederhana dengan Python, melalui beberapa pembelajaran transfer menggunakan arsitektur Xception. Jaringan Xception sepenuhnya didasarkan pada lapisan konvolusional yang dapat dipisahkan secara mendalam. Ini adalah anak Tuhan alami untuk arsitektur Inception (maka namanya eXtreme Inception). Selain peningkatan kecil pada arsitektur InceptionV3, konvolusi yang dapat dipisahkan secara mendalam lebih efisien secara komputasi

Konvolusi yang dapat dipisahkan secara spasial adalah konvolusi yang dapat 'difaktorkan' secara efektif, misalnya, jika kita memiliki kernel konvolusional

[−101−202−101]\begin{bmatrix} -1&0&1\newline -2&0&2\newline -1&0&1 \end{bmatrix}12100012 1

kita perlu melakukan sembilan perkalian untuk setiap langkah yang kita ambil (setiap elemen harus dikalikan dengan piksel gambar tertentu, untuk setiap piksel dalam gambar jika jarak langkah kita adalah 1). Namun kita dapat memecah di atas menjadi

[121]×[−101]\begin{bmatrix} 1\newline 2\newline 1 \end{bmatrix}\times \begin{bmatrix} -1& 0 &1 \end{bmatrix}121×[101]


Ini berarti alih-alih melakukan 9 perkalian, kami melakukan dua konvolusi dengan masing-masing 3 perkalian untuk mencapai efek yang sama. Ini menghasilkan penurunan kompleksitas komputasi konvolusional, yang memungkinkan jaringan berjalan lebih cepat

Konvolusi yang dapat dipisahkan secara mendalam adalah konvolusi yang dapat dipisahkan sepanjang dimensi ortogonalnya. Jika kita memiliki blok konvolusional yaitu 3×3×33\times 3\times 33×3×3 dan yang digunakan untuk menggabungkan gambar W×H×3W\times H\times3W×H×3 , konvolusi yang dapat dipisahkan secara mendalam akan memungkinkan pemisahan 'kubus' awal menjadi tiga 3× 3×13\kali 3\kali 13×3×< /a>1 blok, mirip dengan pemisahan spasial di atas untuk mengurangi kompleksitas komputasi.

Secara intuitif, inilah yang dibutuhkan dalam pemrosesan gambar, karena gambar berwarna biasanya tiga saluran, dan 3×3×33\times 3\times 33×3×3 kernel adalah apa yang digunakan untuk menggabungkan gambar berwarna.

Model pelatihan

Menggunakan Keras API, saya menggunakan transfer-learning untuk melatih kembali MobileNet untuk mengenali 7 kelas emosi seperti yang ada di dataset fer-2013. Saya juga menggunakan augmentasi (flip, shear, scale) dan pengacakan acak untuk memvalidasi silang model selama pelatihan. Semua ini cukup standar, bagian uniknya menyusul

Setelah menyimpan model di. h5, TF-JS menyediakan alat baris perintah yang rapi untuk mengonversi model yang disimpan menjadi JSON (yang ternyata menjadi urutan besarnya lebih kecil). Keuntungan menggunakan model dalam browser berlipat ganda. Gambar yang sedang diproses tidak perlu dikirim ke beberapa cluster terpusat, yang berarti privasi pengguna meningkat secara signifikan, sementara pada saat yang sama, latensi diminimalkan

sistem arsitektur

Cara menggunakan javascript pengenal emosi wajah

Seperti dijelaskan di atas, sistem meminta akses webcam dari pengguna dan melakukan pelokalan wajah untuk 'menemukan' wajah pengguna dari umpan video langsung. Saya mempertimbangkan untuk memvisualisasikan lokasi kotak pembatas di aliran seperti yang terlihat oleh pengguna, namun memutuskan untuk tidak melakukannya di menit-menit terakhir

Sekarang bagian yang menyenangkan, inferensi tidak berjalan di setiap frame, karena ini akan membuat browser modern kewalahan hingga macet, macet, dan berbagai macam masalah menyenangkan. Setelah beberapa percobaan, 10 bingkai tampak seperti keseimbangan yang masuk akal antara meminimalkan beban komputasi sambil tetap memberikan pengalaman waktu nyata

Ide saya adalah memiliki bingkai halaman yang berubah warna tergantung pada suasana hati, dan item teks di bagian atas bingkai untuk tujuan yang sama (apakah Anda mendapatkan bagian di mana saya mengatakan bahwa saya bukan desainer front-end? )

Cara menggunakan javascript pengenal emosi wajah

Untuk ini, saya memasukkan Bulma. css dan belajar sedikit tentang transisi CSS agar warnanya berubah secara bertahap

Dan itu berhasil. Perintah teks di bawah ini diatur secara otomatis tergantung pada ekspresi wajah saya, dan warnanya berubah sesuai

Cara menggunakan javascript pengenal emosi wajah

Tujuan Pembelajaran Masa Depan

Saya ingin dapat mengimplementasikan ini dengan model yang jauh lebih ringan, sebagai tambahan, menurut saya menempatkan penanda pada titik wajah utama untuk memvisualisasikan apa yang dilihat model akan sangat keren

Bagaimana cara kerja pengenalan wajah *?

Pada dasarnya cara kerjanya wajah pengenalan sangat sederhana , sama dengan biometrik lainnya seperti sidik jari. Kamera akan memindai wajah secara detail, mulai dari alis, mata, bibir, hidung, bentuk wajah, dan tanda lain di wajah seseorang.

Apakah pengenalan wajah termasuk AI?

Pengenalan wajah adalah teknologi di bidang AI yang digunakan untuk mengidentifikasi dan mengonfirmasi identitas seseorang menggunakan wajahnya.

Apa yang dimaksud dengan Pengenalan Wajah?

Pengenalan wajah adalah sistem identifikasi dan autentikasi seseorang dengan menggunakan fitur wajah. Sistem pada pengenalan wajah dapat mengenali wajah baik dalam foto, video, maupun secara real-time.