Membuat Antarmuka Tanpa Sentuh dengan Tensorflow.js – Menuju AI — Publikasi AI dan Teknologi Terkemuka di Dunia

Pengarang: Hammaad Memon

Pembelajaran Mendalam

Layar sentuh sangat revolusioner. Namun, dengan munculnya teknologi nirkabel dan penyakit yang sangat menular menyebar di permukaan, ada kebutuhan akan cara yang halus untuk berinteraksi dengan aplikasi. Memperkenalkan Antarmuka Tanpa Sentuh.

Antarmuka tanpa sentuhanSumber: Oleh Ali Pazani dari pexels.com

pengantar

Touchless Interface berjalan cukup baik pada spektrum perangkat yang besar, membuka pintu untuk implementasi dunia nyata di banyak platform — mulai dari kios tanpa sentuh hingga integrasi game VR.

Penulisan ini akan menelusuri kode untuk antarmuka tanpa sentuh berbasis web di mana pengguna dari platform apa pun dapat berinteraksi dengan blok virtual dengan gerakan tangan mereka.

Tautan Berguna:

Mempersiapkan

Sebelum data dapat mulai didorong melalui model pembelajaran mendalam, ada beberapa tugas yang harus diselesaikan terlebih dahulu.

Memuat Tensorflow.js Memuat Model HandPose Menyiapkan WebCam Membuat blok yang dibuat secara acak

Tensorflow.js hanya dimuat melalui cdn di file index.html. Tag skrip untuk Tensorflow.js ditempatkan sebelum tag JavaScript lokal dan setelah semua elemen UI untuk memungkinkan UI memuat Tensorflow.js pertama, dan JavaScript lokal terakhir.

Model HandPose juga dimuat melalui cdn tepat setelah Tensorflow.js untuk alasan yang sama seperti di atas. Namun, memuat model HandPose juga memerlukan eksekusi perintah asinkron berikut: handpose.load() . Dalam kode untuk Antarmuka Tanpa Sentuhan, langkah 1-3 dibungkus dengan panggilan ke fungsi-fungsi try(). Inilah fungsi upaya () untuk memuat Model HandPose:

// Muat model handpose MediaPipe.
const model = menunggu upaya(
async() => menunggu handpose.load(),
() => statusDisplay.textContent = “Menyiapkan Webcam”,
() => fail(“Gagal Memuat Model”),
);

Fungsi upaya () mengambil 3 fungsi adalah parameter. Fungsi pertama yang dilewatkan adalah fungsi yang akan dieksekusi. Fungsi kedua akan dijalankan jika yang pertama selesai tanpa kesalahan. Dan fungsi terakhir akan dijalankan jika yang pertama melempar kesalahan. Dalam hal ini, jika menunggu handpose.load() berjalan tanpa kesalahan, status di layar akan diperbarui ke langkah berikutnya jika tidak, panggilan balik yang gagal akan dijalankan untuk membatalkan penyiapan.

Tugas selanjutnya adalah menyiapkan webcam yang diekstraksi ke dalam fungsi asinkron setupWebcam dan biasanya dibungkus dengan panggilan upaya (). SetupWebcam fungsi mengakses webcam pengguna dan menetapkannya sebagai sumber elemen video di layar. Ini juga mengatur variabel global untuk ukuran webcam yang akan penting untuk menguraikan offset tangan dari umpan video. Fungsi ini juga menyetel properti play-inline benar untuk elemen video guna memastikan kompatibilitas safari.

Tugas penyiapan terakhir adalah membuat blok berwarna secara acak untuk berinteraksi dengan pengguna. Hal ini dilakukan dalam fungsi createObjects dengan menggunakan fungsi document.createElement untuk membuat elemen HTML yang kemudian diterapkan secara acak ke preset gaya.

Melacak Tangan

Setelah menyelesaikan pengaturan awal, sisa kode akan dieksekusi dalam loop utama aplikasi. Langkah pertama dalam melacak tangan pengguna adalah memanggil fungsi asinkron model.estimateHands(videoRef) yang menggunakan model HandPose untuk memprediksi tangan dari elemen video yang mengalirkan umpan webcam pengguna. Fungsi estimasiHands mengembalikan larik prediksi, di mana prediksi pertama paling relevan. Objek prediksi memiliki banyak informasi penting seperti koordinat (x, y, z) untuk pangkal telapak tangan dan titik kunci di setiap jari.

Tugas pertama adalah memindahkan elemen target di layar berdasarkan posisi tangan di webcam. Fungsi getHandCoords mengambil prediksi.anotasi sebagai masukan dan menggunakannya untuk mengambil koordinat x dan y dari dasar telapak tangan. Kemudian mengirimkan kembali hasil dari ekspresi berikut:

kembali [
( palmX / webcamWidth ) * 100,
( palmY / webcamHeight ) * 100
];

Posisi tangan di area pandang diubah menjadi persentase offset yang kemudian digunakan untuk mengatur atribut gaya kanan dan atas dari target di layar agar sesuai dengan posisi tangan.

Berinteraksi dengan UI

Langkah terakhir dan mungkin yang paling menantang adalah memungkinkan pengguna untuk mengambil, memindahkan, dan menjatuhkan blok yang dibuat secara acak. Berikut penjelasan singkat tentang konsep tersebut:

Saat jari pengguna terentang dan telapak tangan rata ke arah kamera, target di layar harus melewati blok apa pun tanpa mengubah posisinya dan menjatuhkan blok apa pun yang dipegang.

Sebaliknya, ketika jari pengguna ditekuk, atau tangan mengepal, balok yang dipegang harus terus digerakkan. Jika tidak ada balok yang dipegang, melewati balok dengan tangan tertutup harus mengambilnya dan menyeretnya bersama dengan kursor di layar.

Memperkenalkan perpustakaan isHandOpen

Implementasi kode semu di atas tergantung pada penentuan secara akurat apakah tangan pengguna terbuka atau tidak. Untuk mengekstrak komponen ini secara efisien menjadi komponen yang dapat digunakan kembali, saya telah menyusun pustaka JavaScript murni yang menggunakan objek predicts.annotations untuk mengembalikan nilai benar atau salah apakah tangan pengguna terbuka atau tidak. Berikut tautan ke repositori. Penting untuk dicatat bahwa repositori Touchless Interface dikirimkan dengan isHandOpen disertakan. Jika tidak menggunakan repositori Touchless Interface, unduh file JavaScript isHandOpen yang diperkecil dan rujuk tepat di atas tag JavaScript lokal mana pun. Ini akan mendefinisikan fungsi isHandOpen yang mengambil dua parameter: objek prediksi.annotations, dan HAND_OPEN_BUFFER opsional. Parameter kedua mengontrol berapa kali berturut-turut tangan harus dideteksi sebagai terbuka sebelum fungsi isHandOpen mengembalikan nilai true. Secara default, HAND_OPEN_BUFFER adalah null yang berarti fungsi mengembalikan persis seperti yang diprediksinya, setiap saat. Bug berulang yang saya temukan dengan pendekatan ini adalah aplikasi menjatuhkan blok ketika tangan pengguna ditutup. HAND_OPEN_BUFFER secara efektif menghilangkan masalah positif palsu dengan biaya menjatuhkan item yang kemudian dipanggil HAND_OPEN_BUFFER ke isHandOpen-yang dalam hal ini hanya beberapa milidetik.

Menyeret Item

Panggilan sederhana ke isHandOpen dengan objek prediksi.annotations dan HAND_OPEN_BUFFER dari 2 mengembalikan Boolean apakah tangan pengguna terbuka atau tidak. Langkah selanjutnya adalah mengizinkan pengguna untuk memindahkan blok di layar. Untuk mengambil blok, tangan pengguna harus ditutup dan kursor atau target harus dekat dengan blok. Jika tangan tertutup dan saat ini tidak ada item yang dipegang, fungsi canGrabItem dijalankan yang membandingkan nilai gaya atas dan kanan target dengan setiap item di layar dan menemukan objek terdekat yang dapat diambil. Jika item cukup dekat, maka item tersebut akan ditetapkan sebagai nilai untuk variabel global untuk item yang saat ini dipegang. Nilai tersebut kemudian dibaca pada iterasi berikutnya dari loop utama yang menggantikannya bersama dengan kursor target — memindahkannya bersama dengan tangan pengguna.

Ringkasan

Touchless Interface menggunakan model HandPose dari Tensorflow.js untuk menemukan lokasi tangan pengguna dari webcam dan memproyeksikan posisinya ke kursor di layar. Kemudian mengintegrasikan perpustakaan isHandOpen untuk menguraikan apakah tangan pengguna terbuka atau tidak. Informasi ini kemudian digunakan untuk memungkinkan pengguna mengambil, memindahkan, dan menjatuhkan widget di layar dengan jari dan tangan mereka.

Implikasi

Touchless Interface di browser mewakili beragam aplikasi untuk teknologi ini. Dari solusi nirsentuh untuk area publik hingga perendaman perangkat lunak di level baru, antarmuka nirsentuh memiliki kemampuan untuk merevolusi cara manusia berinteraksi dengan komputer.

Membuat Antarmuka Tanpa Sentuh dengan Tensorflow.js awalnya diterbitkan di Towards AI on Medium, di mana orang-orang melanjutkan percakapan dengan menyoroti dan menanggapi cerita ini.

Diterbitkan melalui Menuju AI