Dnes by som rád predstavil technológiu Webkit, ktorá je vyvíjaná Googlom. S technológiou sme sa už dozaista všetci stretli. Používa ju Okay Google
, Google Translator, či diktovanie v Google Docs. Vďaka priamej podpore prehliadača Google Chrome je možné túto technológiu využívať i pre svoje účely.
Využil som túto technológiu a serverovo orientovaný jazyk PHP na vytvorenie jednoduchej webaplikácie, ktorá umožní ovládať hlasom mikrokontróler Arduino, ESP dosky, prípadne aj iné, ktoré dokážu parsovať obsah súboru do premennej. Webkit umožňuje nastaviť jazyk, ktorý má previesť na text, je možné zvoliť akýkoľvek jazyk, ktorý je vedený v Language code tabuľke.
Dokonca je možné rozlišovať aj podľa regiónov. V prípade anglického jazyka máme hneď niekoľko možností regiónu: Anglicko – en-GB, Kanada – en-CA, USA – en-US, Austrália – en-AU a ďalšie. V prípade slovenčiny je navolený jazyk sk-SK a pri češtine cs-CZ.
Webaplikácia a jej funkčnosť
Webaplikácia pozostáva zo serverovej a klientskej časti. Klientská časť je aktívna, keď je používateľ na webe a skúma jeho akcie prostredníctvom Javascriptu. Do demo webaplikácie som pridal veľké ikony a inštrukcie, ktoré umožnia ľahšie spoznať ako celá webaplikácia funguje a ako základ môže byť použitá pre vaše projekty. Javascript skúma udalosť, kedy používateľ klikne na mikrofón na stránke (na ikonu). To aktivuje mikrofón, ktorý počúva váš hlas, pokým hovoríte. Akonáhle dohovoríte, mikrofón ukončí nahrávanie a odošle sa XHR request na Google servery, ktoré v krátkom časovom okamihu (pár ms) vrátia response s prekladom hlasu na text.
S prevedeným textom z hlasu je možné jednoducho pracovať a v mojom prípade som zvolil ukladanie do textového súboru, ktorý je najľahšie uspôsobený na čítanie mikrokontrolérom. Od webservera sa vráti iba hlavička a obsah súboru bez ďalšieho HTML či PHP kódu, ktorý by bolo nutné navyše orezávať, čo stojí výpočtový výkon, písanie funkcií a formátovanie výstupu.
Pri textovom súbore je nutné vyhnúť sa diakritike! Mikrokontroléry majú často problém s čítaním diakritiky najmä kvôli základnej znakovej anglickej sade, prípadne problém s kódovaním. Môže sa stať, že pri čítaní slova Čau
z textového súboru ho prečíta ako ÄŚau
či ?au
. Kvôli tomuto je nutné finálny text, ktorý bude uložený, vytvoriť bez diakritiky. Vďaka PHP jazyku je možné vytvoriť multipodmienku pre jeden príkaz. Napríklad, ak je preklad: Zapni svetlo v obývačke
, alebo Zapni světlo v obývacím pokoji
, tak to môžeme uložiť ako Zapni svetlo obyvacka
, Light on livingroom
.
Vdaka tomuto bude čítanie a porovnanie textu fungovať spoľahlivo. Webkit má ale občas svoje chvíľky a stretol som sa s tým pri prvom prototype tejto webaplikácie, keď som chcel preložiť text: Zapni led
, problém bol v tom, že to Webkit raz preložil ako Zapni LED
, Zapni let
, zapni let
, zapni led
, atď. Problém sa dá z častí vyriešiť prevodom celého stringu na malé písmená. Aj u tejto technológie platí, že menej je niekedy viac. Pri väčšom počte slov je oveľa vyššia pravdepodobnosť zlého prekladu z dôvodu zlej intonácie, výslovnosti ako u jedno, či dvojslovných príkazov.
Zmena parametrov pri webaplikácii
Mnohých by zaujímalo, ako je možné webaplikáciu pozmeniť pre ich účely. Webaplikácia pozostáva z dvoch súborov. Jedným je index.php, kde sa akcie čítajú a je prístupná klientovi a ajax.php, kde sa vykonáva iba spracovanie z XHR requestu, kde sú dáta predané z index.php cez AJAX POST request.
Určite je to možné. V prvom kroku sa zameriame na index.php, kde je možné zmeniť jazyk. Jazyk je možné zmeniť v riadku s Javascriptom
recognition.lang = "sk-SK";
Pre zvolenie iného jazyka je nutné zmeniť sk-SK parameter na iný language code. Druhým parametrom, ktorý je možné zmeniť je názov súboru, kde sa budú dáta spracovávať, prípadne si zvoliť v tomto bode iný spôsob spracovania dát, napríklad Javascriptom, Node.js, React… V súbore ajax.php je možné zmeniť podmienky pre načítané hovorené dáta podľa vašich potrieb:
<?php
if ($preklad=="zapni" || $preklad=="zapnúť"){
file_put_contents("preklady.txt", 'Zapni');
}
else if ($preklad=="vypni" || $preklad=="vypnúť"){
file_put_contents("preklady.txt", 'Vypni');
}else{
file_put_contents("preklady.txt", 'Nepodporovany preklad');
} ?>
V priečinku pre webaplikáciu je ešte pár súborov, ale tie sú určené pre demo webaplikáciu pre indikáciu stavu, môžete ich taktiež využiť pre váš projekt.
Nutné vedieť pri webaplikácii
- Nakoľko sa Google snaží svojich používateľov prehliadača Chrome chrániť pred rôznym typom útokov, má ochranu pred spustením mikrofónu na inej ako HTTPS stránke. Na HTTP stránke sa mikrofón v prehliadači Chrome nespustí.
- Kvôli tomuto obmedzeniu je nutné váš projekt umiestniť na HTTPS web.
- Tu prichádza háčik… Arduino s Ethernet shieldom nepodporuje HTTPS protokol. Preto ak chceme tento systém prevádzkovať pod Arduinom, je nutné mať 2-variant web. V prvom prípade je možné z prehliadača pristúpiť na HTTPS formu stránky pre zadanie príkazu a pre čítanie textového súboru z Arduina na HTTP protokole.
Ako na jednorázové príkazy?
Pri hlasových projektoch sa okrem ovládania výstupov ON/OFF používajú aj tzv. číslicové, či časové príkazy, ktoré chceme vykonať jednorázovo, napríklad: Zvýš jas svietidla o 25%
, Zvýš teplotu termostatu o 1°C
. Nakoľko doska číta tieto dáta cyklicky a súbor je nepozmenený, bude navyšovať jas stále o 25%, aj keď je príkaz len jednorázový! Bude navyšovať stav na plné nastavenie PWM pinu, alebo až do zničenia svietidla. Riešenie je veľmi jednoduché. Na konci každého čítania je možné odoslať request na php súbor, ktorý v textovom súbore nahradí jeho obsah prázdnym stringom, prípadne medzerou. To zaručí, že sa príkaz vykoná iba raz a zabráni sa jeho ponechaniu v textovom súbore pri opakovanom čítaní.
Mikrokontroléry
Konečne sa dostávame asi k najzaujímavejšej fáze projektu a to k mikrokontrolérom, z ktorých si môžeme urobiť zariadenie na štýl Amazon Echo dot, i keď s nimi budeme komunikovať prostredníctvom webstránky. Zdrojové sketche pre mikrokontroléry sú veľmi jednoduché a ponúkajú plnohodnotné čítanie premennej z textového súboru a aplikovanie tohto stavu. Funkčnosť je až primitívne jednoduchá. Zo servera sa prečíta .txt súbor a jeho obsah sa priradí premennej. Od toho následuje akcia na zapnutie/vypnutie výstupu. Z mojej demo webaplikácie je možné použiť príkazy Zapni
, Zapnúť
, Vypni
, Vypnúť
. Zostavil som testovacie sketche pre Arduino a Ethernet shield W5100/W5500, NodeMCU a ESP32.
Všetky dosky je možné programovať cez ArduinoIDE. Nakoľko mám k dispozícii i HTTP variantu webu a pri ESP32 je HTTPS request trochu komplikovaný s Root CA certifikátmi, tak som sa pri tejto doske rozhodol pre example HTTP request. Funkčnosť všetkých scriptov je totožná, líši sa iba so špecifickou knižnicou a zvolení príslušnej funkcie pre request a čítanie. Pri každej z dosiek sa výsledok aplikuje na výstup.
Prečítaj, aplikuj výstup. Všetky sketche je možné stiahnuť v Githube, časom pribudne i HTTPS request pre ESP32, možno aj podpora iných dosiek s príkladmi práve pre nich.
Pozor pri Arduine a Ethernet shielde
Čítanie premennej z textového súboru je pri Arduine problém, nakoľko originálna knižnica nemá funkciu pre parsovanie premennej a hlavičku vypisuje po znakoch. Vyhotovil som naň jednoduchú parser, ktorý prečíta práve jeden riadok, ktorý je určený počtom riadkov prijatej response (odpovede servera).
Každý web vracia iný počet riadkov. Je to spôsobené tým, že server okrem obsahu (stránky) odpovedá aj ďalšie informácie, napríklad HTTP kód, čas, Apache informácie… V prípade hostingu, ktorý používam je to 12 riadkov pred premennou, ale to sa líši od hostingu. Pri otvorení sketchu je možné parameter počtu riadkov nahradiť vašim počtom riadkov na riadku:
else if (x==12) readString += c;
Na správne vypočítanie počtu riadkov lepšie poslúži tento výpis Serial monitoru, ktorý preukazuje čítanie (v našom prípade 12 riadkov).
Čítať je ale možné HTML (PHP) stránku s nastavením správneho riadku. Pri využití W5500 Ethernet modulu pre Arduino je nutné použiť knižnicu Ethernet2.h, ktorá je k dispozícii ako kompatibilný klon pre Ethernet.h, funkčnosť je teda rovnaká ako u Ethernet W5100 shieldu.
Vyskúšanie webaplikácie
Webaplikácia je dostupná na vyskúšanie aj online, testovacie sketche pre Arduino, NodeMCU, ESP32 sú nalinkované priamo na túto webovú lokalitu. Vďaka tomu môžete hneď s ovládaním hlasom vyskúšať i mikrokontróler s ovládaním výstupu! Sketche nie je potrebné meniť, stačí nahrať.
Ak ste ešte zo starej školy, možno by ste chceli skúsiť i ruský jazyk a precvičiť si výslovnosť:
- RU verzia (nie je súčasťou Github repozitára)
Github repozitár s projektom
Github repozitár je dostupný na github.com/martinius96. Nakoľko je webová časť univerzálna pre akýkoľvek mikrokontróler, je možné, že v budúcnosti pribudnú testovacie sketche i pre iné dosky, napríklad RaspberryPi, Bigclown, OrangePi, micro:bit, či iné príbuzné platformy. Môžete v tom pomôcť aj vy, a to pull requestom do tohto repozitára, kde veľmi rád vnorím vaše časti kódu do projektu, prípadne sa môžete pridať ako contributor.
V blízkej dobe pribudne do repozitára i rozšírená podpora pre ESP32 s HTTP/HTTPS requestmi a rôznym typom wifi šifrovania od WPA/WPA2 PSK po 802.1×, ktoré doska plne podporuje (Eduroam). Verím, že táto pokusná webaplikácia nájde uplatnenie ako návrh pre váš projekt, kde túto technológiu využijete. Bastleniu zdar!
ČLÁNKY DO MAILU