Webové aplikácie s rečovými technológiami

Každý z nás zažil bezradnú situáciu, keď sa mu do ruky dostal starý klasický mobilný telefón bez dotykovej obrazovky. Ovládať takýto "stroj" bez možnosti vyberať položky priamo dotykom na disleji, bolo, povedzme si otvorene - vyčerpávajúce. Veľmi rýchlo sme si zvykli, že do displejov je možné "ďobať" a tak sa o to pokúšame skoro na všetkých obrazovkách :).

Postupne si tiež budeme zvykať, že na všetky zariadenia, ktoré v sebe skrývajú počítač, budeme hovoriť. V mobiloch a prehliadačoch naších počítačov máme Google Voice Search, ktorý umožňuje zadať kľúčové slová a frázy pre vyhľadávanie hlasom. Iphonisti si zvykli na virtuálnú asistentku SIRI, s ktorou sa môžu porozprávať. V internetových obchodoch si môžeme za prijateľnú sumu kúpiť Amazon Echo s virtuálnou asistentkou Alexa alebo Google Home. LG prináša na trh chladničku s veľkým displejom a s virtuálnou asistentkou Alexa od Amazonu. Spoločnosť Panasonic prináša nový infotainment pre autá, v ktorom bude "sedieť" takisto Alexa, hneď vedľa Google Asistenta. V aute už teda nikdy nebudete sami, hneď máte dvoch spolujazdcov. Rútime sa do sveta, kde budeme komunikovať (hlavne) s vecami :). To nemôžeme zmeškať :). A keďže v súčasnosti svetu vládne web poďme sa pozrieť, ako je možné rozprávať sa s webom.

Web Speech API

Webové stránky a aplikácie je možné už v súčasnosti ovládať hlasom. Za všetkým v živote hľadaj ženu, teda vlastne Google. Podobne je tomu aj v prípade "počúvajúceho webu". V roku 2012 bolo publikované Web Speech API rozhranie , ktoré umožňuje využívať automatické rozpoznávanie reči a syntézu reči vo webových prehliadačoch. Keďže aj v tomto mal prsty Google, hneď sa aj objavila podpora tohto API v prehliadačoch Google Chrome. A nakoniec, je to opäť Google, kto poskytuje verejne dostupnú službu rozpoznávania a syntézy reči, ktorá môže byť využitá pomocou Web Speech API.

Poďme sa pozrieť na to, ako to funguje.

Hovor, tvoja webová stránka Ťa počúva.

Aby sme hneď na začiatku preukázali, že vás nevodíme za nos, môžete si kliknúť na nasledujúce demo, ktoré danú funkcionalitu ukazuje: demo. Nezabudnite si nastaviť jazyk na slovenčinu a nadiktovať niečo "po našom".

Teraz sa pozrime na to, ako uvedené demo funguje:

• Krok číslo jedna je overenie toho, či daný webový prehliadač podporuje Web Speech API. To sa deje cez zistenie prítomnosti objektu webkitSpeechRecognition. (Google rozpoznávač reči používa prefix webkit).

• Ak sa zistí prítomnosť tohto rozhrania, je možné vytvoriť objekt triedy webkitSpeechRecognition, ktorý bude tvoriť rozhranie pre prístup k rozpoznávaču reči. Vytvorený objekt sa v našom prípade volá recognition.

  if (!('webkitSpeechRecognition' in window)) {
      upgrade();
  } else {
      var recognition = new webkitSpeechRecognition();
      recognition.continuous = true;
      recognition.interimResults = true;
  
      recognition.onstart = function() { ... }
      recognition.onresult = function(event) { ... }
      recognition.onerror = function(event) { ... }
      recognition.onend = function() { ... }
  ...

Na ďalších dvoch riadkoch môžeme vidieť nastavenie dvoch hodnôt - continuous a interimResults. Defaultnou hodnotou atribútu continuous je false, čo znamená, že sa nejedná o kontinuálne rozpoznávanie, ale po zaznamenaní pauzy sa rozpoznávanie ukončí. Toto nastavenie je vhodné pre zadávanie slovných povelov, alebo krátke vety, ktoré je možné vysloviť bez zastavenia.

Ak tento parameter nastavíme na true (ako je to v našom deme), rozpoznávanie bude pokračovať, aj keď sa v prehovore vyskytne pauza, alebo používateľ prestane hovoriť. Takéto nastavenie je vhodné pre tzv. "diktovacie" aplikácie, ktoré umožňujú diktovať dlhšie texty (poznámky, emaily a pod.).

Východzia hodnota atribútu interimResults je false, čo znamená, že pri rozpoznávaní bude rozpoznávač vraciať iba finálny výsledok (nie hypotézy). Ak túto hodnotu zmeníma na true uvidíme aj priebežne rozpoznané hypotézy, čím sa aj naoko zvýši rýchlosť odozvy rozpoznávača. V tomto prípade, sa bude dočasný text (priebežné hypotézy) zobrazovať šedou farbou. Finálny výsledok rozpoznávania bude následne zobrazený ako čierny text.

Keď používateľ klikne na ikonku mikrofónu, rozpoznávač začne rozpoznávať reč:

function startButton(event) {
  ...
  final_transcript = '';
  recognition.lang = select_dialect.value;
  recognition.start();

Po nastavení jazyka, je rozpoznávanie reči aktivované volaním funkcie recognition.start(). Po aktivácii je vyvolaná udalosť onstart. Pri objavení sa nového výsledku rozpoznávania je vyvolaná udalosť onresult.

recognition.onresult = function(event) {
    var interim_transcript = '';

    for (var i = event.resultIndex; i < event.results.length; ++i) {
      if (event.results[i].isFinal) {
        final_transcript += event.results[i][0].transcript;
      } else {
        interim_transcript += event.results[i][0].transcript;
      }
    }
    final_transcript = capitalize(final_transcript);
    final_span.innerHTML = linebreak(final_transcript);
    interim_span.innerHTML = linebreak(interim_transcript);
    };
}

Funkcia, ktorú sme uviedli vyššie spracuje výsledky rozpoznávania do dvoch reťazcov znakov: _finaltranscript a _interimtranscript. Následne sú oba reťazce vložené do príslušných span prvkov.

_interimtranscript je lokálna premenná a vytvára sa znova pri každom zavolaní, pretože dočasné výsledky sa môžu meniť. Premenná _finaltranscript je definovaná ako globálna, pretože finálny text sa už nemení. Cyklus for bude teda začínať od pozície event.resultIndexa bude sa pridávať iba nový text.

A to je vlastne všetko, čo je potrebné vedieť. Pre prezretie úplného kódu, ktorý už len upravuje vzhľad tlačítka s mikrofónom a pod. si zobrazte zdrojový kód stránky z horeuvedeného dema.

Hovorí k vám Web...

Podpora webovej syntézy reči je taktiež súčasťou Web Speech API. Syntéza reči umožňuje umelo vytvoreným hlasom prečítať zadaný text. V tomto prípade sa bude jednať o text, ktorý môžeme definovať vo vlastnej webovej stránke. Táto funkcionalita umožní vytvárať weby, ktoré môžu na svojho návštevníka prehovoriť (a tak ho napr. vystrašiť, alebo žeby bol dôvod iný?).

Použitie syntetizátora je veľmi jednoduché. Postačí vytvoriť textové vyjadrenie (SpeechSynthesisUtterance), ktoré následne predáme syntetizátoru volaním API metódy speechSynthesis.speak():

var msg = new SpeechSynthesisUtterance('Hello World');
window.speechSynthesis.speak(msg);

Po kliknutí na nasledujúce tlačítko, si môžete vyskúšať či to funguje:

Ako presne sme to dokázali? Takto:

<div><button onclick="var msg=new SpeechSynthesisUtterance('Hello World');window.speechSynthesis.speak(msg);">Keď na mňa klikneš, pozdravím celý svet.</button></div>

Web Speech API nám umožňuje tiež zmeniť parametre syntetického hlasu. Napríklad hlasitosť (volume), rýchlosť (rate), hlas (voice), výšku tónu (pitch) alebo jazyk (lang):

var msg = new SpeechSynthesisUtterance();
var voices = window.speechSynthesis.getVoices();
msg.voice = voices[10]; // Pozn.: niektoré hlasy nepotporujú zmenu parametrov
msg.voiceURI = 'native';
msg.volume = 1; // 0 to 1
msg.rate = 1; // 0.1 to 10
msg.pitch = 2; //0 to 2
msg.text = 'Hello World';
msg.lang = 'en-US';

speechSynthesis.speak(msg);

<div><button onclick="var msg=new SpeechSynthesisUtterance('Hello World!');msg.rate = 5; window.speechSynthesis.speak(msg);">Keď na mňa klikneš, pozdravím celý svet RÝCHLEJŠIE.</button></div>

Samozrejme, Web Speech API umožňuje aj vykonávať ďalšie nastavenia a ponúka ďalšie funkcie. Viac informácií môžete nájsť napr. tu