Základní náhled virtuálního asistenta na https://robinjs.party.

Jak napsat modulární klon Alexa ve 40 řádcích JavaScriptu

Na chvíli jsem hledal slušnou knihovnu řeči, která se snadno nastaví, snadno se používá a je zdarma. Po chvíli hledání jsem se vzdal a začal pracovat na jiném projektu. Až do včerejška, když jsem narazil na tento úžasný tutoriál Wese Bose.

Tento článek vám pomůže napsat základní virtuální pomocníka, který bude fungovat v prohlížeči Chrome. V tomto příkladu budete muset své soubory zobrazovat na serveru. K tomuto účelu použiji základní preactovou aplikaci, protože to usnadňuje nastavení serveru a umožňuje vyladit některé UI poté, aniž by došlo k bolesti hlavy. Demo toho, co zde bude vytvořeno, najdete na robinjs.party.

Aktualizace: Není nutné používat rámec, jako je preact, ale rozhodl jsem se to udělat, takže nemusím ručně nastavovat projekt, bundler a babel. Neexistuje žádný důvod, proč musíte použít preact. Pokud jej nechcete používat, přeskočte další odstavec a pusťte se přímo do části „Vytvořte srdce asistenta“. Děkuji za zpětnou vazbu!

Vytvořte novou preactovou aplikaci

Vytvoříme základní aplikaci preact pomocí příkazu create-preact-app. Díky tomu je možné rychle vytvořit novou aplikaci.

Vytvořte nový projekt preact pomocí create-preact-app.

Vytvoříme nový soubor ve zdrojové složce s názvem assistant.js spolu s novým adresářem pojmenovaným dovednosti, ve kterém použijeme naše dovednosti. Celý kód tohoto článku najdete v úložišti webových stránek robinjs.

Vytvořte srdce asistenta

Začněme tím, že definujeme srdce našeho virtuálního asistenta, který přijímá vlastní konfiguraci. To vám umožní vytvořit si vlastního asistenta s jiným jménem a mluvit jazykem podle vašeho výběru.

Základní třída pro našeho asistenta (assistant.js).

Virtuální pomocník by měl být schopen převést vstup na odpověď. Poté, co obdrží odpověď, asistent ji předloží uživateli. Tyto dva procesy nazývám procesem a říkám. Asistent začíná zpracováním vstupu a poté vyslovením výstupu. Prozatím si náš asistent zapíše své odpovědi a vždy poskytneme výchozí odpověď na odpověď uživateli, kterou jsme uvedli v naší konfiguraci.

Základní proces a říkají funkce našeho asistenta (assistant.js).

Úžasný! Nyní můžeme asistentovi poskytnout věty a své odpovědi odešle do konzole. Náš asistent je však stále k ničemu. Opravme to přidáním některých dovedností, které mohou generovat dynamické odpovědi.

Vytvořte nějaké dovednosti

Schopnost je základní sada dvou funkcí - jedna, která určuje, zda by tato dovednost měla být spuštěna na základě vstupu a která převádí skutečný vstup na odpověď. Dvě funkce, které nazývám spoušť a řešení, jsou jediné, které jsou nezbytné k vytvoření dovednosti.

V tomto příkladu provedu synchronizační spouštěcí funkci, zatímco rozlišovací funkce bude asynchronní. Jeden by mohl zvolit, aby spoušť fungovala také asynchronně, ale tento typ triggerů zatím nebudeme používat.

Vytvořme složku dovedností se dvěma soubory - time.js a whatsup.js. Tyto dvě základní dovednosti budou použity pro našeho asistenta.

Dvě základní dovednosti, které použijeme v našem asistentovi (složka dovedností).

Posledním krokem vytvoření procesoru je nalezení správné dovednosti a vyvolání jeho rozhodovací funkce. Můžeme to provést aktualizací implementace procesní funkce, jako je úryvek níže.

Implementace procesní funkce (assistant.js).

Gratulujeme! Dokončili jste srdce svého vlastního (textového) virtuálního asistenta. Nyní můžete pomocí výše uvedeného kódu vytvořit novou instanci a načíst své dovednosti.

Základní použití textové verze asistenta (index.js).

Poslouchejte a mluvte

Čas na poslední část implementace virtuálního asistenta. Zde donutíme asistenta, aby nám odpověděl a poslouchal, co musíme říci. Začněme snadnou částí, převod textu na řeč.

Budeme implementovat funkci say a necháme ji používat vestavěné API, abychom mohli začít mluvit. Od nynějška bude náš kód spuštěn pouze v prohlížeči, protože budeme používat proměnné, které jsou připojeny k proměnné window. Regulární výraz /[&\/\\#,+()$~%.'"*?<>{}]/g používáme k odfiltrování všech znaků, které by měl asistent vyslovit.

Základní implementace funkce say (assistant.js).

Nyní, když náš asistent umí mluvit, musí stále naslouchat tomu, co musíme říct. Abychom to mohli udělat, musíme vytvořit instanci instance webkitSpeechRecognition, nastavit její jazyk na jazyk, který jsme určili v naší konfiguraci, nezapomeňte restartovat, jakmile uslyší větu, a připojit ji k naší procesní funkci.

Může to znít jako hodně, ale není to tak moc. Můžeme připojit kód, abychom to vše nastavili přímo do konstruktoru, když vytváříme nového asistenta. Všimněte si, že nyní máme zpětné volání, kde dostáváme instanci rozpoznávání, kterou bychom měli převést na řetězec a předat naši procesní funkci. Přidal jsem také jednoduchou funkci start pro spuštění rozpoznávače.

Inicializujte základní rozpoznávač ve konstruktoru (assistant.js).

Pokud se chcete dozvědět více o proměnné rozpoznávání, můžete instanci vytisknout v konzole a prozkoumat její strukturu. Prozatím jsem již napsal nějaký kód, který převádí instanci na přepis, což je věta, kterou rozpoznávač slyšel.

Jakmile dostaneme větu, kterou rozpoznávač rozpoznal, zkontrolujeme, zda první slovo je jméno našeho asistenta. Pouze v tomto případě předáme zbytek věty procesní funkci. Pokud věta nezačíná jménem našeho asistenta, měli bychom ji prostě ignorovat.

Kompletní implementace převodu přepisu (assistant.js).

Instantiate nového asistenta

A je to! Můžete začít používat svého vlastního asistenta a průběžně přidávat různé dovednosti. Protože každá dovednost má stejné API, můžete dokonce distribuovat a instalovat dovednosti pomocí npm.

Okamžité spuštění a spuštění nového asistenta (index.js).

Zdrojový kód

Všechny kódy tohoto článku si můžete prohlédnout v úložišti webových stránek robinjů. Příklad, který jsem zde vytvořil, je také hostován na robinjs.party, takže můžete ihned spustit demo.

Závěr

Může se jednat o extrémně základní verzi virtuálního asistenta, ale díky vlastním dovednostem s tím můžete opravdu hodně dělat. Doufám, že se vám kurz líbil a bavilo se vám vytvářet si vlastní verzi Alexy!

Pokud máte nějaké dotazy nebo se vám tento projekt líbí, dejte mi vědět!

Happy Coding