Zatímco prohlížeče směřují k podpoře rozpoznávání řeči a více futuristických schopností, vývojáři webových aplikací jsou obvykle omezeni na klávesnici a myš. Ale co kdybychom mohli rozšířit interakci klávesnice a myši s jinými režimy interakce, jako jsou hlasové příkazy nebo pozice rukou?
V této sérii příspěvků vytvoříme základní mapový průzkumník s multimodálními interakcemi. Nejprve jsou hlasové příkazy. Než však začleníme jakékoli příkazy, nejprve budeme muset rozložit strukturu naší aplikace.
Naše aplikace, zaváděcí s vytvořit-reagovat-aplikaci, bude mapa na celou obrazovku využívající komponenty React pro Leaflet.js. Po spuštění vytvořit-reagovat-aplikaci, příze přidat leták, a příze přidat reakční leták, otevřeme naše Aplikace komponenta a definovat naši Mapa součástka:
importovat React, {Component} z 'reagovat';importovat {Map, TileLayer} z 'reagovat-leták'
import './App.css';
aplikace třídy rozšiřuje komponentu {
stát = {
střed: [41.878099, -87,648116],
zvětšení: 12,
};
updateViewport = (výřez) => {
this.setState ({
střed: viewport.center,
zoom: viewport.zoom,
});
};
poskytnout() {
const {
centrum,
Zvětšení,
} = this.state;
vrátit se (
style = {{height: '100%', width: '100%'}}
střed = {střed}
zoom = {zoom}
onViewportChange = {this.updateViewport}>
url = "// {s} .tile.openstreetmap.org / {z} / {x} / {y} .png"
attribution = "© přispěvatelé OpenStreetMap"
/>
)
}
}
exportovat výchozí aplikaci;
The Aplikace komponenta je stavová komponenta, která sleduje vlastnosti středu a zvětšení a předává je do Mapa součástka. Když uživatel interaguje s mapami pomocí integrovaných interakcí myši a klávesnice, jsme upozorněni, abychom aktualizovali náš stav o nový střed a úrovně přiblížení.
S definovanou komponentou pro celou obrazovku vypadá naše aplikace takto:
Po vybalení z krabice získáváme typické režimy interakce, včetně myši, klávesnice a dotyku na zařízeních, která je podporují. S našimi základními interakcemi a definovaným uživatelským rozhraním přidáme hlasové příkazy pro přiblížení a oddálení.
Existuje mnoho knihoven, které umožňují rozpoznávání řeči v prohlížeči. Chrome dokonce podporuje i základní SpeechDetection API. Použijeme annyang, populární a jednoduchou knihovnu pro detekci textu v jazyce JavaScript. S annyang definujete příkazy a jejich obslužné rutiny v objektu JavaScript, například takto:
const příkazy = { 'in': () => console.log ('in command received'),
'out': () => console.log ('out command received'),
};
Pak vše, co musíte udělat, je předat tento objekt do metody na annyang objekt a zavolat Start() na tom objektu. Celý příklad vypadá takto:
importovat annyang z 'annyang';const příkazy = {
'in': () => console.log ('in command received'),
'out': () => console.log ('out command received'),
};
annyang.addCommands (příkazy);
annyang.start ();
To je super jednoduché, ale z kontextu to moc nedává smysl, tak to začleňme do naší komponenty React. V rámci componentDidMount hák, přidáme naše příkazy a začneme poslouchat, ale místo přihlášení do konzoly zavoláme dvě metody, které aktualizují úroveň přiblížení v našem stavu:
zoomIn = () => { this.setState ({
zoom: this.state.zoom + 1
});
};
zoomOut = (... args) => {
this.setState ({
zoom: this.state.zoom - 1
});
};
componentDidMount () {
annyang.addCommands ({
'in': this.zoomIn,
'out': this.zoomOut,
});
annyang.start ();
}
Když se naše stránka obnoví, prohlížeč nás požádá o povolení používat mikrofon. Pokud řeknete ano, můžete nyní přiblížit a oddálit hlasové příkazy „in“ a „out“. Chcete více? Knihovna annyang také podporuje zástupné symboly a regulární výrazy. Abychom podporovali přiblížení přímo na určitou úroveň, můžeme definovat příkaz takto:
annyang.addCommands ({ / * stávající příkazy * /
'zoom level: level': {regexp: / ^ zoom level (\ d +) /, callback: this.zoomTo},
});
The :úroveň součástí klíče je standardní způsob definování jednoslovného zástupného symbolu. (Pokud bychom chtěli zástupný symbol pro více světů, mohli bychom použít *úroveň místo toho.) Ve výchozím nastavení je slovo zachycené zástupným znakem předáno jako argument řetězce funkci obslužné rutiny. Ale pokud definujeme obslužnou rutinu jako objekt s regulární výraz a zpětné volání klíče, můžeme dále omezit, jaký může být zástupný symbol. V tomto případě omezíme zástupný symbol pouze na číslice. Tento zástupný symbol bude i nadále předáván jako řetězec, takže když nastavíme úroveň přiblížení, budeme jej muset vynutit na číslo:
zoomTo = (zoomLevel) => { this.setState ({
zoom: + zoomLevel,
});
}
A to je vše! Nyní můžeme přiblížit nebo oddálit jednu úroveň po druhé, nebo můžeme přeskočit přímo na úroveň vyslovením jejího čísla. Pokud si s tím hrajete doma, všimnete si, že annyang trvá několik sekund, než příkaz zaregistruje, a někdy se příkazy nezaregistrují. Rozpoznávání řeči není dokonalé. Pokud vytváříte rozpoznávání řeči do produkčního systému, budete chtít začlenit mechanismy zpětné vazby v reálném čase pro chyby nebo zjistit, kdy knihovna aktivně poslouchá.
Pokud si chcete s kódem pohrát, najdete ho na GitHubu. Neváhejte a kontaktujte na Twitteru a sdílejte svá vlastní multimodální rozhraní: @freethejazz.
