Media Pengembangan Web & App | by APPKEY

Pembuatan WebsiteWeb ProgrammingMempelajari Pengenalan Suara Web Dengan TensorFlow.JS

Mempelajari Pengenalan Suara Web Dengan TensorFlow.JS

-

Last Updated on April 6, 2022 by

Ketika kita biasanya berbicara tentang Artificial Inteligent, pembelajaran mendalam, pembelajaran mesin, kita secara otomatis memikirkan Python, R, atau C ++, tetapi bagaimana dengan JavaScript?

Ya ternyata, salah satu library paling populer untuk machine learning di Python juga tersedia untuk JavaScript, kita berbicara tentang Tensorflow, dan hari ini kita akan melakukan pengenalan suara web singkat dengan library tersebut, dan kita akan membangun proyek yang menyenangkan bersama.

Apa itu Tensorflow.js dan untuk apa digunakan?

programming

TensorFlow.js adalah pustaka JavaScript yang dikembangkan oleh Google untuk melatih dan menerapkan model pembelajaran mesin di browser dan di Node.js. Ini adalah pustaka pendamping TensorFlow, pustaka machine learning populer untuk Python.

TensorFlow.js bukan hanya pustaka mainan, ini adalah bisnis yang serius, kinerjanya mengejutkan, terutama saat menggunakan akselerasi hardware melalui WebGL, tetapi haruskah kita melatih model dengannya?

Mungkin tidak, meskipun Anda dapat mencapai kinerja yang hebat, itu adalah mitra Python bahkan lebih cepat dan ketika bekerja dengan Python Anda akan menemukan lebih banyak pustaka untuk mendukung kode Anda seperti Numpy dan Panda. Selain materi pembelajaran, yang tersedia untuk TensorFlow.js tidak sebanyak untuk yang lainnya.

Sekarang, ini tidak berarti Anda tidak boleh menggunakan TensorFlow.js, sebaliknya, menurut saya ini adalah perpustakaan yang bagus untuk menerapkan dan menjalankan model machine learning, dan itulah yang akan kita fokuskan untuk pembahasan artikel ini.

Artikel Terkait  Microsoft Power Apps : Solusi Pengembangan Tanpa Coding!

Menerapkan model sampel dengan TensorFlow.js

Seperti yang kami katakan, TensorFlow.js adalah pustaka yang kuat, dan kami dapat mengerjakan banyak hal berbeda seperti klasifikasi gambar, manipulasi video, dan pengenalan suara web. Untuk hari ini kami memutuskan untuk mengerjakan contoh pengenalan suara dasar.

Kode kita akan dapat mendengarkan melalui mikrofon dan mengidentifikasi apa yang dikatakan pengguna, setidaknya hingga beberapa kata karena kita memiliki beberapa batasan pada model sampel yang kita gunakan. Tapi daripada menjelaskan, akan lebih baik kalau kita mulai beraksi:

Harap aktifkan kotak centang mikrofon dan izinkan situs ini untuk mengakses mikrofon.

Hal pertama yang perlu kita lakukan adalah menginstal perpustakaan dan mendapatkan model kita. Untuk menginstal TensorFlow.js ada beberapa opsi yang dapat ditinjau disini dalam kasus kami untuk membuatnya sederhana, kami akan mengimpornya dari CDN.

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.0.0/dist/tf.min.js"></script>
<script src="https://unpkg.com/@tensorflow-models/speech-commands"></script>

Kemudian kita akan menggunakan beberapa HTML untuk menampilkan daftar kata:

<div class="demo">
<div>
<label class="form-switch">
<input type="checkbox" id="audio-switch">
Microphone
</label>
<div id="demo-loading" class="hidden">Loading...</div>
</div>
<div id="sp-cmd-wrapper" class="grid"></div>
</div>

Sejauh ini tidak ada yang aneh, kita memiliki kotak centang, elemen pemuatan dan elemen pembungkus yang akan kita gunakan untuk merender daftar kata, jadi mari kita lakukan selanjutnya:

const wrapperElement = document.getElementById('sp-cmd-wrapper');
for (let word of wordList) {
wrapperElement.innerHTML += `<div id='word-${word}'>${word}</div>`;
}

Agar demo mulai bekerja, kita perlu mengklik kotak centang Mikrofon, mari kita setel pendengar acara di sana untuk memicu proses memuat dan mendengarkan.

document.getElementById("audio-switch").addEventListener('change', (event) => {
if(event.target.checked) {
if(modelLoaded) {
startListening();
}else{
loadModel();
}
} else {
stopListening();
}
});

Ketika kotak centang mengubah nilainya, kami memiliki 3 kemungkinan berbeda, pengguna mengaktifkan kotak centang dan model tidak dimuat, dalam hal ini, kami menggunakan loadModel () fungsi, namun jika model sudah dimuat kami memicu proses mendengarkan. Jika pengguna menonaktifkan kotak centang, kami berhenti mengakses mikrofon.

Mari kita tinjau setiap implementasi fungsi:

loadModel ()

loadModel () bertanggung jawab untuk membuat instance pengenal dan memuat model. Saat model dimuat, kita bisa mendapatkan daftar label tempat model dilatih recognizer.wordLabels(). Ini akan berguna nanti saat mengevaluasi model.

async function loadModel() {
// Show the loading element
const loadingElement = document.getElementById('demo-loading');
loadingElement.classList.remove('hidden');

// When calling `create()`, you must provide the type of the audio input.
// - BROWSER_FFT uses the browser's native Fourier transform.
recognizer = speechCommands.create("BROWSER_FFT");
await recognizer.ensureModelLoaded()

words = recognizer.wordLabels();
modelLoaded = true;
// Hide the loading element
loadingElement.classList.add('hidden');
startListening();
}

StartListening()

StartListening() akan dipanggil setelah model dimuat atau pengguna mengaktifkan mikrofon dan akan bertanggung jawab untuk mengakses API mikrofon dan mengevaluasi model untuk melihat kata mana yang dapat kami identifikasi. Ini terdengar rumit, tetapi berkat TensorFlow hanya ada beberapa baris kode.

function startListening() {
recognizer.listen(({scores}) => {

// Everytime the model evaluates a result it will return the scores array
// Based on this data we will build a new array with each word and it's corresponding score
scores = Array.from(scores).map((s, i) => ({score: s, word: words[i]}));

// After that we sort the array by scode descending
scores.sort((s1, s2) => s2.score - s1.score);

// And we highlight the word with the highest score
const elementId = `word-${scores[0].word}`;
document.getElementById(elementId).classList.add('active');

// This is just for removing the highlight after 2.5 seconds
setTimeout(() => {
document.getElementById(elementId).classList.remove('active');
}, 2500);
},
{
probabilityThreshold: 0.70
});
}

Sangat mudah! sekarang fungsi terakhir.

stopListening ()

StopListening() akan berhenti mengakses mikrofon dan menghentikan evaluasi.

function stopListening(){
recognizer.stopListening();
}

Itu saja, hanya itu yang Anda butuhkan untuk membuat contoh pengenalan suara web yang pertama.

Menyatukan semuanya

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.0.0/dist/tf.min.js"></script>
<script src="https://unpkg.com/@tensorflow-models/speech-commands"></script>

<script type="text/javascript">
let recognizer;
let words;
const wordList = ["zero","one","two","three","four","five","six","seven","eight","nine", "yes", "no", "up", "down", "left", "right", "stop", "go"];
let modelLoaded = false;

document.addEventListener('DOMContentLoaded', () => {
const wrapperElement = document.getElementById('sp-cmd-wrapper');
for (let word of wordList) {
wrapperElement.innerHTML += `<div class='col-3 col-md-6'><div id='word-${word}' class='badge'>${word}</div></div>`;
};

document.getElementById("audio-switch").addEventListener('change', (event) => {
if(event.target.checked) {
if(modelLoaded) {
startListening();
}else{
loadModel();
}
} else {
stopListening();
}
});
});
async function loadModel() {

// Show the loading element
const loadingElement = document.getElementById('demo-loading');
loadingElement.classList.remove('hidden');

// When calling `create()`, you must provide the type of the audio input.
// - BROWSER_FFT uses the browser's native Fourier transform.
recognizer = speechCommands.create("BROWSER_FFT");
await recognizer.ensureModelLoaded()

words = recognizer.wordLabels();
modelLoaded = true;

// Hide the loading element
loadingElement.classList.add('hidden');
startListening();
}

function startListening() {
recognizer.listen(({scores}) => {

// Everytime the model evaluates a result it will return the scores array
// Based on this data we will build a new array with each word and it's corresponding score
scores = Array.from(scores).map((s, i) => ({score: s, word: words[i]}));

// After that we sort the array by scode descending
scores.sort((s1, s2) => s2.score - s1.score);
// And we highlight the word with the highest score
const elementId = `word-${scores[0].word}`;
document.getElementById(elementId).classList.add('active');
// This is just for removing the highlight after 2.5 seconds
setTimeout(() => {
document.getElementById(elementId).classList.remove('active');
}, 2500);
},
{
probabilityThreshold: 0.70
});
}

function stopListening(){
recognizer.stopListening();
}
</script>
<div class="demo">
Please enable the microphone checkbox and authorize this site to access the microphone.
<br />
Once the process finished loading speak one of the word bellow and see the magic happen.
<br /><br />
<div>
<label class="form-switch">
<input type="checkbox" id="audio-switch">
Microphone
</label>
<div id="demo-loading" class="hidden">Loading...</div>
</div>
<div id="sp-cmd-wrapper" class="grid"></div>
</div>

Kesimpulan

TensorFlow.js adalah library andal yang ideal untuk menerapkan model pembelajaran machine learning. Hari ini kita sudah mempelajari bahwa hanya dengan beberapa baris kode kita dapat memuat model pengenalan suara web dan mulai menghasilkan hasil. Seperti kebanyakan solusi Machine learning, ini sama bagusnya dengan model dan datanya.

Jangan lupa kunjungi Web App di https://appkey.id/ dan dapatkan berbagai indormasi terbaru tentang game development.


Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.

Jasa Pembuatan Aplikasi

Jasa Pembuatan Website

Jasa Pembuatan Paket Aplikasi

Jasa Pembuatan Internet Marketing

Mau posting artikel iklan?

Yuk klik dan ikuti ketentuan layanan dari kami, dapatkan penawaran paket dengan harga terbaik!

Subscribe Sekarang

Dapatkan beragam informasi menarik tentang Website, Aplikasi, Desain, Video dan API langsung melalui email Anda. Subscribe sekarang dan terus belajar bersama kami!

Kategori

Blog Post Ranking 10

Contoh PHP Curl : 10 Hal Luar Biasa yang dapat Anda Kembangkan dengan Curl

Meningkatnya jumlah aplikasi yang pindah ke web telah membuat "HTTP Scripting" lebih sering diminta dan diinginkan. Untuk dapat secara...

Encoding Adalah : Proses Komunikasi Encoding dan Decoding

Jika kita dapat melihat percakapan antar komputer, mungkin akan terlihat seperti ini: "010110111011101011010010110". Bahasa ini disebut dengan biner, encoding...

Looping Adalah Algoritma Perulangan: Berikut Contohnya

Jika anda sudah mendalami atau sedang mendalami dunia pemrograman terdapat sebuah konsep yang dapat memudahkan anda dalam menyusun struktur...

Rekomendasi 7 Aplikasi Pembuat Animasi 3D Terbaik. Ayo Cek!

Apakah Anda bercita-cita untuk menjadi seorang animator profesional? Belajar membuat animasi kini sudah menjadi hal mudah yang bisa dilakukan...

Metadata Adalah? Fungsi dan Jenis-Jenis Metadata

Pernah mendengar istilah metadata? Mungkin, kita sering mendengar istilah metadata. Tetapi, banyak dari kita yang belum tahu arti dari metadata...

Ini Cara Mudah Membuat Redirect PHP | Seri Belajar PHP

Fungsi redirect PHP sangat banyak digunakan dalam kehidupan berwebsite alias mengelola website. Script redirect PHP banyak dipergunakan oleh user...

Cara Membuat Aplikasi di Playstore dengan Mudah

Membuat aplikasi di Playstore bisa Anda lakukan dengan mudah. Terdapat beberapa situs yang bisa membantu Anda untuk membuat aplikasi...

4 Cara Mengatasi Autentikasi Google Play Store dengan Cepat dan Mudah

Apakah Anda sedang mengalami masalah autentikasi Google Play Store? Permasalahan autentikasi Google Play Store adalah permasalahan umum sering dialami...

Cara Mudah Menambahkan Lokasi Alamat Bisnis Anda di Google Maps

Saat ingin hunting tempat makan atau tempat nongkrong terbaru, tak jarang beberapa dari Anda biasanya mendapatkan informasi terkini melalui...

Rekomendasi 10 Aplikasi Coding Android Terbaik

Ketersediaan aplikasi coding Android memang banyak dicari oleh orang-orang yang sedang atau akan memulai untuk membuat aplikasi android. Jika...

Bisnis

Online Service

Peluang Bisnis

Model Bisnis

Entrepreneurship

Uang

Ketrampilan

Outsourcing

Monetize

Pemasaran

SEO

Internet Marketing

Dasar Pemasaran

Strategi Pemasaran

Situs Web Analitik

Iklan

Teknologi

Teknologi Terbaru

AI

Komputer

Jaringan

Paling Sering dibaca
Mungkin Anda Menyukainya