React ilə nitq tanıma qurmaq üçün əsas təlimat

Bu yaxınlarda bir istifadəçinin xəyallarını qeyd etmək və saxlamaq üçün JavaScript'in Web Speech API'sinin Səsdən Mətnə Danışma Tanıma (Səsdən Mətnə Danışıq Tanıma) xüsusiyyətindən istifadə edən bir yuxu jurnal tətbiqi yaratdım (istifadəçi növünü tam yuxularda görməkdənsə) var). Səsdən mətn texnologiyası təəccüblü dərəcədə dəqiqdir. Bəzi çatışmazlıqlar ... bu anda Chrome tərəfindən tam dəstəklənir və sadəcə maraq itirənə qədər (dinləməyi dayandırana qədər) dinləyir (təxminən beş dəqiqəyə qədər). Bir çox tətbiq üçün beş dəqiqə kifayətdir. Buna görə bir nəzər salmağa dəyər.

Bu tətbiqi yaratmaqdan çox əyləndim və bu nitq tanıma texnologiyasına daxil olmaq üçün nə etdiyimi bölüşmək istədim. Xüsusilə, funksiyanı bir Reakt komponentinə necə daxil edə bildiyimi bölüşmək istərdim. Bu təlimatın sonunda bacara biləcəksiniz

  • Nitq tanıma (səsdən mətnə) və dayandırın
  • Səs əmrlərindən istifadə edərək nitqin tanınmasını dayandırın.

Aşağıda təlimatın son məhsuluna bir nümunə verilmişdir. Mavi düymə nitqin tanınmasını başlayır və dayandırır və ara / son protokollar boz / qara rəngdə göstərilir.

Gəlin içəri!

SpeechRecognition yeni bir nümunə qurun.

SpeechRecognition örnəyini ilk dəfə qurmaq üçün çox vaxt sərf etmək istəmirəm, çünki aşağıdakı sənədlərə daxil edilmişdir: https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition

Bununla birlikdə, varsayılan olaraq false olaraq ayarlandığı üçün tanıma.interimResults = true təyin etdiyimizə işarə etmək istəyirəm. Dəyəri doğru olaraq dəyişdirsəniz, bu təlimatın məqsədləri üçün həm aralıq nəticələri, həm də son nəticələrini görəcəksiniz.

İlkin və qəti dəqiqələr arasındakı fərq haqqında qeyd:

İlkin transkriptlər sadəcə nitq tanıma sisteminizin ən yaxşı uyğunluğu tapmaq üçün axtardığı sözlərdir. Məsələn, "vafli" dedinizsə, nitq tanıma ilkin işləmə əvvəlcə "dəhşətli" ola bilər. Sonra bir saniyə və ya daha sonra, daha yaxşı uyğunluğu taparsa özünü "vafli" ilə düzəldə bilər. Sözüm budur: dəqiqliyə ehtiyacınız varsa, müvəqqəti deyil, qəti transkriptlərdən istifadə edin.

Sadəcə nitqin tanınmasının necə işlədiyini göstərmək üçün bu təlimata ilkin transkriptləri daxil edirik. İlkin məlumatlar sizi maraqlandırmırsa, nitq tanıma nümunəsini qurarkən yuxarıdakı qovluqdan 5 sətri çıxara bilərsiniz.

İndi ilk hədəfimizə girə bilərik!

Bir düyməyə basaraq nitqin tanınmasını başladın / dayandırın

Hər hansı bir kod yazmazdan əvvəl, yanaşma tərzimizi izah edək.

Əvvəlcə bir düymə elementi yaratmalıyıq. Düymənin işləkliyini proqramlaşdırmaq üçün hər kliklə maraqlanan onClick hadisə işləyicisini aşağıdakı kimi yazmalısınız:

  • Düyməni ilk dəfə vurduğumuzda nitqin tanınmasına başlamaq istəyirik.
  • İkinci dəfə vurduqda qulaq asmağı dayandırmalıyıq.
  • Daha çox vursaq, bu başlanğıc / dayandırma dövrü təkrarlanmalıdır.

Yuxarıdakı məqamlara baxsaq, bu “eşitmə vəziyyətini” (eyham, işarə) bir şəkildə izləməyimiz lazım olduğu aydın olur. Bu o deməkdir ki, nitqin tanınmasına nə vaxt başlayacağımızı / dayandıracağımızı izləməliyik. Bunu necə edə bilərik? Bəli aşağıda göstərildiyi kimi React komponentimizin yerli vəziyyətini istifadə edə bilərik. Varsayılan olaraq, komponentimiz dinləmir, bu səbəbdən ilk dinləmə vəziyyəti səhvdir.

this.state = {dinləmə: yalan}

İndi nitq tanıma funksiyasını söndürmək üçün bir yola ehtiyacımız var. Yəni dinləmə vəziyyətimizi doğru ilə yalan arasında dəyişdirmək üçün bir yola ehtiyacımız var. Bunu etmək üçün aşağıda göstərildiyi kimi sadə metod toggleLists yaza bilərik.

toggleListen () {this.setState = ({Dinləmə:! this.state.listening})}

İndi onClick işləyicimizi yaza bilərik. Bu istədiyimiz axın:

→ Düyməni vurun

→ Dinləməyə keçin (yəni dəyişmə siyahılarını çağırın)

→ this.state.listening = true / false olduqda nitqin tanınmasına başlayın / dayandırın

[→ Statusdan asılı olan hər şeyi edin, məs. B. this.state.listening = true] ikən düymənin rəngini dəyişdirin.

Bütün nitq tanıma məntiqini idarə etmək üçün handleListen adlı ayrı bir metod yaradacağıq. Hər şeydən əvvəl, onClick işləyicimizi aşağıdakı kimi müəyyənləşdirmək mantiqidir:

onClick = {() => {this.toggleListen () this.handleListen ()}}

Bununla birlikdə, onClick işləyicisini bu şəkildə qurarsanız, tez bir zamanda tıkladığınızda həmişə başlamadığını görəcəksiniz! Çalma başlamazdan əvvəl bir neçə dəfə basmalı ola bilərsiniz. Niyə bu? Yaxşı, React-in setState metodunun sinxron olmasına zəmanət verilmir. Arxa planda, React vəziyyəti dəyişdirməyin ən yaxşı zamanına qərar verir. Bəzən dərhal olur, bəzən deyil. Beləliklə, problemimiz var.

Bu problemi həll etmək üçün, geri çağırışdakı setLate (aşağıya baxın) üçün handleListen metodumuzu çağırırıq.

toggleListen () {this.setState ({Dinləmə:! this.state.listening}, this.handleListen)}

İndi onClick işləyicimizi this.toggleListen-ə uyğunlaşdırmaq üçün kifayətdir. İstədiyiniz axın (klikləyin → siyahılar → keçid siyahıları) artıq təmin edilir!

onClick = {this.toggleListen}

Bu təlimatın qalan hissəsi, işləyicimizi dinlə metodunu inkişaf etdirməyə həsr edilmişdir. Budur indiyə qədər əldə etdiklərimizi (bəzi CSS-lər daxil olmaqla) qısa bir şəkildə yenidən təqdim edirik. Bu metodları bağlamağı unutmayın!

HandleListen metodu:

Hand.Listen-ə aşağıdakı kodla başlayırıq ki, bu da nitq tanımağımızı this.state.listening = true olduqda dinləməyə başlayacağını söyləyir.

handleListen () {if (this.state.listening) tanıma.start ()}

Aralıq və yekun hesabatları toplamaq üçün onresult adlı nitq tanınması üçün daxili hadisə işləyicisini istifadə edirik (aşağıya ümumi bax). For döngəsindəki kod xüsusi olaraq sənədlərdən gəlir.

İndi düyməni basdıqda danışarkən bu divləri dolduran ilkin və son transkriptləri görə bilməlisiniz!

Bununla bir az oynasanız, nitqin tanınmasının nitqdə ağlabatan bir fasilə ilə öz-özünə bitdiyini görərsiniz. Biz bunu istəmirik. İstifadəçinin düşünməsi bir neçə saniyə çəkərsə nə olar?

Digər daxili tədbir dinləyiciləri ilə oynayaraq nitq tanımağı "davamlı" dinləməyə aldada bilərik. Xüsusilə, tanıma daxilində yenidən başlaya bilərik. Başlanğıcda dayandırmağa qərar verərsə, dinləməni yenidən başladın.

Nitq tanımağı dayandırmaq üçün, this.state.listening = false olduqda tanınma.end çağıran else ifadəsini əlavə edirik.

Yuxarıdakı kodla, this.state.listening = true, lakin nitqin tanınması dinləməyi dayandırmağa qərar verirsə, eşitmə yenidən manipulyasiya olunur (muahaha!). Yoxla! Lənətə gəlmiş şey, o düyməni yenidən vurana qədər dinləyəcək ... əksəriyyəti üçün. Təəssüf ki, təxminən 5 dəqiqədən sonra bir nöqtədə vaxtı bitəcəkdir. Həqiqətən 5 dəqiqədən çox vaxta ehtiyacınız varsa, hadisə dinləyiciləri ilə oynayaraq və yerli vəziyyətə digər nəzarət olunan məlumatları əlavə edərək bu problemi həll edə bilərsiniz.

Səs əmrləri ilə nitqin tanınmasını dayandırın

Bir klik yerinə bir səs əmri istifadə edərək nitq tanımağı dayandırmaq istəyirsinizsə nə olar? Deyək ki, "dur" və "dinləyin" sözlərini ardıcıllıqla söylədikdən sonra dinləmələrini dayandırmalarını istəyərsiniz. Sizə lazım olan yalnız yekun ssenarini bir sıra sözlərə bölməkdir. Bu massivdəki son iki söz "Stop" və "Listening" dirsə, tanınma.stop çağırırsınız. Daha sonra "dinləməyi dayandır" ifadəsini ehtiva etməyən son mətn yaratmaq üçün "dayandır" və "dinlə" sözlərini massivdən çıxara bilərsiniz.

Ümumiyyətlə, son transkriptə sahib olduqdan sonra sadəcə bir sıra manipulyasiya oyunudur. Bu xüsusi səs əmrləri nümunəsi haqqında daha çox məlumat üçün son hissədəki "- KOMANDALAR -" bölməsinə baxın.

Son nəticə qeyd: nitq tanıma fəaliyyətini izləmək üçün aşağıdakı konsol.log ifadələrini əlavə etdim.

  • "Dinləyirəm!" Düyməni vurduğunuzda qeyd olundu və dinləmə başlayır.
  • "... dinləməyə davam edin ..." nitqin tanınması dayandırıldıqdan sonra öz-özünə yenidən başlandıqda qeyd olunur.
  • Bir kliklə nitq tanımağı bitirdikdə "bir kliklə dayandırıldı" qeyd olunur.
  • Səs əmrindən istifadə edərək nitq tanımağı dayandırdığınız zaman "əmr başına dayandı" qeyd olunur.

Bu təlimat üçün hamısı budur! Bu birləşmə ilə (SpeechRecognition + React) daha çox şey edə bilərsiniz, məsələn. Məsələn, dinləyərkən düymənizin rəngini dəyişdirin və ya başqa bir komponent göstərin.

Nə edirsən et, onunla əylən!