بازشناسی گفتار در جاوا اسکریپت | به زبان خیلی ساده

۱۴۱ بازدید
آخرین به‌روزرسانی: ۰۷ شهریور ۱۴۰۲
زمان مطالعه: ۳ دقیقه
بازشناسی گفتار در جاوا اسکریپت | به زبان خیلی ساده

در این مقاله با روش ساخت موتور بازشناسی گفتار در جاوا اسکریپت با استفاده از TensorFlow.js آشنا می‌شویم. ما عادت دارم هر جا که در مورد ساخت چیزی در حوزه هوش مصنوعی، یادگیری عمیق و یادگیری ماشین فکر می‌کنیم، بی‌درنگ به زبان برنامه‌نویسی پایتون فکر کنیم، اما روش‌های دیگری نیز به این منظور وجود دارند جاوا اسکریپت یک زبان پرکاربرد است که می‌تواند از فریمورکی به نام TensorFlow.js بهره بگیرد.

پیش از آن که وارد موضوع اصلی این مقاله بشویم، باید در مورد این TensorFlow.js کمی توضیح بدهیم. TensorFlow.js یک کتابخانه جاوا اسکریپت است که از سوی گوگل برای توسعه و توزیع پروژه‌های یادگیری ماشین در مرورگر و در Node.js ارائه شده است.

TensorFlow.js صرفاً یک کتابخانه نیست. با این که می‌توانید از آن به عنوان یک کتابخانه استفاده کنید، اما کاربردهای آن برای توسعه و توزیع اپلیکیشن‌های یادگیری ماشین بسیار گسترده هستند که در ادامه این مقاله توضیح می‌دهیم.

توسعه پروژه با TensorFlow.js

چنان که در بخش قبل اشاره کردیم، TensorFlow.js یک کتابخانه قدرتمند است و با استفاده از آن می‌توان کارهای زیادی از قبیل دریافت تصاویر، دست‌کاری ویدئو و بازشناسی گفتار را اجرا کرد و در این راهنما ما روی یک پروژه ساده بازشناسی گفتار مرکز می‌کنیم.

در کدی که ارائه می‌کنیم امکان شنیدن از طریق میکروفن را فراهم ساخته‌ایم و صحبت‌هایی که کاربر انجام می‌دهد را تا چند کلمه شناسایی می‌کنیم، زیرا در این مدل نمونه‌گیری با محدودیت‌هایی مواجه هستیم.

نخستین گام این است که کتابخانه را نصب کنیم. برای نصب TensorFlow.js چند گزینه وجود دارد که در این مورد آن را از 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>

سپس کد HTML مورد نیاز برای نمایش فهرست واژگان را اضافه می‌کنیم.

1<div class="demo">
2    <div>
3        <label class="form-switch">
4            <input type="checkbox" id="audio-switch">
5            Microphone
6        </label>
7        <div id="demo-loading" class="hidden">Loading...</div>
8    </div>
9    <div id="sp-cmd-wrapper" class="grid"></div>
10</div>

این کد شامل یک چک‌باکس، یک عنصر بارگذاری و یک عنصر پوششی است که برای رندر کردن لیست واژگان استفاده می‌شود.

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

اینک باید روی چک‌باکس میکروفن کلیک کنیم تا یک «شنونده رویداد» (event listener) اجرا شود که شروع به دریافت به پردازش‌هایی برای تست کردن دمو در شرایط کاری می‌کند.

1document.getElementById("audio-switch").addEventListener('change', (event) => {
2    if(event.target.checked) {
3        if(modelLoaded) {
4            startListening();
5        }else{
6            loadModel();
7        }
8    } else {
9        stopListening();
10    }   
11});

ما در این زمان 3 سناریوی مختلف داریم. وقتی کاربر چک‌باکس را فعال کرد و مدل بارگذاری نشده بود از تابع ()loadModel استفاده می‌کنیم. زمانی که مدل از قبل بارگذاری شده باشد، فرایند شنیدن را اجرا می‌کنیم و زمانی که کاربر چک‌باکس را غیرفعال کند، گوش دادن به میکروفن را متوقف می‌سازیم.

بازشناسی گفتگو در جاوا اسکریپت

()loadModel

این تابع مسئول ایجاد یک وهله و بارگذاری مدل‌ها است. زمانی که مدل بارگذاری شد، باید فهرست برچسب‌ها را که مدل در موردش آموزش دیده با استفاده از متد ()recognizer.wordLabels به دست آوریم:

1async function loadModel() { 
2    // Show the loading element
3    const loadingElement = document.getElementById('demo-loading');
4    loadingElement.classList.remove('hidden');
5    
6    recognizer = speechCommands.create("BROWSER_FFT");  
7    await recognizer.ensureModelLoaded()
8    
9    words = recognizer.wordLabels();
10    modelLoaded = true;
11    
12    // Hide the loading element
13    loadingElement.classList.add('hidden');
14    startListening();
15}

()startListening

متد ()startListening پس از این که مدل بارگذاری شد و یا زمانی که کاربر میکروفن را فعال کرد، فراخوانی می‌شود. این متد مسئول دسترسی به API میکروفن است که مدل را ارزیابی کرده و تلاش می‌کند واژه‌های قابل تشخیص را بررسی کند.

1function startListening() {
2    recognizer.listen(({scores}) => {
3    
4        scores = Array.from(scores).map((s, i) => ({score: s, word: words[i]}));
5      
6        scores.sort((s1, s2) => s2.score - s1.score);
7        const elementId = `word-${scores[0].word}`;
8        document.getElementById(elementId).classList.add('active');
9        
10        // This is just for removing the highlight after 2.5 seconds
11        setTimeout(() => {
12            document.getElementById(elementId).classList.remove('active');
13        }, 2500);
14    }, 
15    {
16        probabilityThreshold: 0.70
17    });
18}

()stopListening

این متد برای توقف دسترسی به میکروفن و ارزیابی صدا مورد استفاده قرار می‌گیرد.

1function stopListening(){
2    recognizer.stopListening();
3}

بازشناسی گفتگو در جاوا اسکریپت

توزیع نهایی

اکنون باید نخستین مدل خود را از بازشناسی گفتار روی وب بسازیم.

1<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.0.0/dist/tf.min.js"></script>
2<script src="https://unpkg.com/@tensorflow-models/speech-commands"></script>
3
4<script type="text/javascript">
5    let recognizer;
6    let words;
7    const wordList = ["zero","one","two","three","four","five","six","seven","eight","nine", "yes", "no", "up", "down", "left", "right", "stop", "go"];
8    let modelLoaded = false;
9    
10    document.addEventListener('DOMContentLoaded', () => {
11        const wrapperElement = document.getElementById('sp-cmd-wrapper');
12        for (let word of wordList) {
13            wrapperElement.innerHTML += `<div class='col-3 col-md-6'><div id='word-${word}' class='badge'>${word}</div></div>`;
14        };
15        
16        document.getElementById("audio-switch").addEventListener('change', (event) => {
17            if(event.target.checked) {
18                if(modelLoaded) {
19                    startListening();
20                }else{
21                    loadModel();
22                }
23            } else {
24                stopListening();
25            }   
26        });
27    });
28    
29    async function loadModel() { 
30        // Show the loading element
31        const loadingElement = document.getElementById('demo-loading');
32        loadingElement.classList.remove('hidden');
33     
34        recognizer = speechCommands.create("BROWSER_FFT");  
35        await recognizer.ensureModelLoaded()
36        
37        words = recognizer.wordLabels();
38        modelLoaded = true;
39        
40        // Hide the loading element
41        loadingElement.classList.add('hidden');
42        startListening();
43    }
44    
45    function startListening() {
46        recognizer.listen(({scores}) => {
47            scores = Array.from(scores).map((s, i) => ({score: s, word: words[i]}));
48            
49            // After that we sort the array by score descending
50            scores.sort((s1, s2) => s2.score - s1.score);
51            
52            // And we highlight the word with the highest score
53            const elementId = `word-${scores[0].word}`;
54            document.getElementById(elementId).classList.add('active');
55            
56            // This is just for removing the highlight after 2.5 seconds
57            setTimeout(() => {
58                document.getElementById(elementId).classList.remove('active');
59            }, 2500);
60        }, 
61        {
62            probabilityThreshold: 0.70
63        });
64    }
65    
66    function stopListening(){
67        recognizer.stopListening();
68    }
69</script>
70
71<div class="demo">
72    Please enable the microphone checkbox and authorize this site to access the microphone.
73    <br />
74    Once the process finished loading speak one of the word bellow and see the magic happen.
75    <br /><br />
76    <div>
77        <label class="form-switch">
78            <input type="checkbox" id="audio-switch">
79            Microphone
80        </label>
81        <div id="demo-loading" class="hidden">Loading...</div>
82    </div>
83    <div id="sp-cmd-wrapper" class="grid"></div>
84</div>

سخن پایانی

امیدواریم از مطالعه این راهنما بهره لازم را برده باشید.

ما در این مقاله با روش پیاده‌سازی بازشناسی گفتار در جاوا اسکریپت با صرفاً چند خط کد و به کمک کتابخانه تنسورفلو آشنا شدیم. TensorFlow.js یک کتابخانه قدرتمند است که برای توسعه مدل‌های یادگیری ماشین کاربردهای فراوانی دارد.

بر اساس رای ۱ نفر
آیا این مطلب برای شما مفید بود؟
اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.
منابع:
javascript-in-plain-english
نظر شما چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *