![HEADER-Google-Developers-[GD-BLOG]-7-dos-and-don'ts-of-using-ML-on-the-web-with-MediaPipe](https://storage.googleapis.com/gweb-developer-goog-blog-assets/images/HEADER-Google-Developers-GD-BLOG-7-dos-and-dont.original.png)
Jika Anda adalah seorang developer web yang ingin menghadirkan kekuatan machine learning (ML) ke aplikasi web Anda, coba lihat MediaPipe Solutions! Dengan MediaPipe Solutions, Anda dapat men-deploy tugas khusus untuk memecahkan masalah umum ML hanya dalam beberapa baris kode. Lihat panduan di dokumen dan cobalah demo web di Codepen untuk melihat betapa mudahnya untuk memulai. Meskipun MediaPipe Solutions menangani banyak kerumitan ML di web, masih ada beberapa hal yang perlu diingat selain praktik terbaik JavaScript biasa. Saya telah menggabungkannya dalam daftar tujuh hal yang boleh dan tidak boleh dilakukan ini. Baca terus untuk mendapatkan beberapa tips jitu!
Sebagai developer web, Anda terbiasa membuat aplikasi menjadi seringan mungkin untuk memastikan pengalaman pengguna terbaik. Jika Anda memiliki item yang lebih besar untuk dimuat, Anda sudah tahu bahwa Anda ingin men-download-nya dengan cara yang bijaksana sehingga memungkinkan pengguna berinteraksi dengan konten dengan cepat daripada harus menunggu download yang lama. Strategi seperti kuantisasi telah membuat model ML lebih kecil dan dapat diakses oleh perangkat edge, tetapi model tersebut masih cukup besar sehingga Anda tidak ingin menggabungkannya dalam aplikasi web Anda. Simpan model Anda di solusi penyimpanan cloud pilihan Anda. Kemudian, saat Anda melakukan inisialisasi tugas Anda, model dan biner WebAssembly akan di-download dan diinisialisasi. Setelah pemuatan halaman pertama, gunakan penyimpanan lokal atau IndexedDB untuk menyimpan model dan biner dalam cache sehingga pemuatan halaman berikutnya berjalan lebih cepat. Anda dapat melihat contohnya di aplikasi contoh ATM tanpa sentuhan di GitHub.
Inisialisasi tugas dapat memerlukan waktu yang agak lama tergantung pada ukuran model, kecepatan koneksi, dan jenis perangkatnya. Oleh karena itu, sebaiknya lakukan inisialisasi solusi sebelum interaksi pengguna. Di sebagian besar contoh kode di Codepen, inisialisasi dilakukan saat pemuatan halaman. Harap diingat bahwa contoh ini dibuat sesederhana mungkin agar Anda dapat memahami kode dan menerapkannya pada kasus penggunaan Anda sendiri. Melakukan inisialisasi model saat memuat halaman mungkin terdengar tidak masuk akal bagi Anda. Fokus saja untuk menemukan tempat yang tepat guna menjalankan tugas sehingga pemrosesan disembunyikan dari pengguna.
Setelah inisialisasi, Anda harus melakukan pemanasan tugas dengan meneruskan gambar placeholder melalui model. Contoh ini menunjukkan fungsi untuk menjalankan kanvas 1x1 piksel melalui tugas Pose Landmarker:
function dummyDetection(poseLandmarker: PoseLandmarker) {
const width = 1;
const height = 1;
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 0, 1)';
ctx.fillRect(0, 0, width, height);
poseLandmarker.detect(canvas);
}
Salah satu bagian favorit saya dari JavaScript adalah pembersihan sampah memori otomatis. Faktanya, saya tidak dapat mengingat kapan terakhir kali manajemen memori terlintas dalam pikiran saya. Harapannya, Anda telah menyimpan sedikit informasi tentang memori di memori Anda sendiri karena Anda hanya memerlukan sedikit informasi tersebut untuk memaksimalkan tugas MediaPipe Anda. MediaPipe Solutions untuk web menggunakan WebAssembly (WASM) untuk menjalankan kode C++ di browser. Anda tidak diwajibkan memahami C++, tetapi ada gunanya mengetahui bahwa C++ membuat Anda membuang sampah sendiri. Jika Anda tidak mengosongkan memori yang tidak terpakai, Anda akan menyadari bahwa halaman web Anda menggunakan lebih banyak memori seiring berjalannya waktu. Hal ini dapat menyebabkan masalah performa atau bahkan error.
Setelah menyelesaikan solusi Anda, kosongkan resource menggunakan metode .close().
Misalnya, saya dapat membuat pengenal gestur menggunakan kode berikut:
const createGestureRecognizer = async () => {
const vision = await FilesetResolver.forVisionTasks(
"https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.0/wasm"
);
gestureRecognizer = await GestureRecognizer.createFromOptions(vision, {
baseOptions: {
modelAssetPath:
"https://storage.googleapis.com/mediapipe-models/gesture_recognizer/gesture_recognizer/float16/1/gesture_recognizer.task",
delegate: "GPU"
},
});
};
createGestureRecognizer();
Setelah saya selesai mengenali gestur, saya membuang pengenal gestur menggunakan metode close():
gestureRecognizer.close();
Setiap tugas memiliki metode close, jadi pastikan untuk menggunakannya jika relevan! Beberapa tugas memiliki metode close() untuk hasil yang ditampilkan, jadi lihat dokumen API untuk mengetahui detailnya.
Saat memutuskan atau menyesuaikan solusi Anda, ada baiknya Anda mencobanya di MediaPipe Studio sebelum menulis kode Anda sendiri. MediaPipe Studio adalah aplikasi berbasis web untuk mengevaluasi dan menyesuaikan model dan pipeline ML di perangkat untuk aplikasi Anda. Aplikasi ini memungkinkan Anda dengan cepat menguji MediaPipe solutions di browser Anda dengan data Anda sendiri, dan model ML Anda yang disesuaikan. Setiap demo solusi juga memungkinkan Anda bereksperimen dengan setelan model untuk jumlah total hasil, batas keyakinan minimum untuk melaporkan hasil, dan banyak lagi. Nantinya, hal ini akan sangat berguna saat menyesuaikan solusi sehingga Anda dapat melihat bagaimana kinerja model Anda tanpa perlu membuat halaman web pengujian.
Menguji aplikasi web Anda di berbagai perangkat dan browser selalu penting untuk memastikan aplikasi berfungsi sesuai harapan, tetapi menurut saya ada baiknya jangan lupa untuk menguji lebih awal dan sering dijalankan di berbagai platform. Anda juga dapat menggunakan MediaPipe Studio untuk menguji perangkat sehingga Anda langsung mengetahui bahwa solusi akan berhasil pada perangkat pengguna Anda.
Setiap tugas mencantumkan satu atau lebih model yang direkomendasikan. Misalnya, tugas Deteksi Objek mencantumkan tiga model berbeda, masing-masing dengan kelebihan dan kekurangan berdasarkan kecepatan, ukuran, dan akurasi. Mungkin Anda cenderung berpikir bahwa memilih model dengan akurasi paling tinggi adalah hal yang terpenting, tetapi jika Anda melakukannya, Anda akan mengorbankan kecepatan dan meningkatkan ukuran model Anda. Bergantung pada kasus penggunaan Anda, pengguna Anda mungkin mendapatkan keuntungan dari hasil yang lebih cepat dibandingkan hasil yang lebih akurat. Cara terbaik untuk membandingkan opsi model adalah dengan membandingkan di MediaPipe Studio. Saya sadar bahwa kalimat ini mulai terdengar seperti iklan untuk MediaPipe Studio, tetapi praktik ini memang bermanfaat!
Apakah Anda memiliki hal yang boleh atau tidak boleh dilakukan tentang ML di web yang menurut Anda saya lewatkan? Apakah Anda memiliki pertanyaan tentang cara memulai? Atau apakah Anda memiliki project keren yang ingin Anda bagikan? Hubungi saya di LinkedIn dan ceritakan semuanya!
