Grundlæggende preview af den virtuelle assistent på https://robinjs.party.

Sådan skrives en modulær Alexa-klon i 40 linjer JavaScript

I et stykke tid har jeg ledt efter et anstændigt tale-til-tekst-bibliotek, der er let at opsætte, let at bruge og gratis. Efter at have søgt et stykke tid gav jeg op og begyndte at arbejde på et andet projekt. Indtil i går, da jeg snuble over denne fantastiske tutorial af Wes Bos.

Denne artikel hjælper dig med at skrive en grundlæggende virtuel assistent, der fungerer i Chrome. I dette eksempel skal du servere dine filer på en server. Jeg vil bruge en grundlæggende preact-app til dette formål, da det gør det let at opsætte en server, og det gør det muligt at finpusse nogle UI bagefter uden at få hovedpine. En demo af, hvad der vil blive oprettet her, kan findes på robinjs.party.

Opdatering: Det er ikke nødvendigt at bruge en ramme som preakt, men jeg valgte at gøre dette, så jeg ikke behøver at manuelt konfigurere et projekt, bundler og babel. Der er ingen grund til at du skal bruge preakt. Hvis du ikke ønsker at bruge det, skal du bare springe det næste afsnit over og dykke til højre i 'Opret hjerte af assistenten'. Tak for tilbagemeldingen!

Opret en ny preakt-app

Lad os konfigurere en grundlæggende preakt-app med kommandoen create-preact-app. Dette gør det muligt at oprette en ny app temmelig hurtig.

Opret et nyt preakt-projekt med create-preact-app.

Vi opretter en ny fil i kildemappen, kaldet assistent.js, sammen med en ny mappe, der hedder færdigheder, som vi vil bruge til at placere vores færdigheder i. Du kan finde alle koderne for denne artikel i robinjs-webstedets lager.

Opret hjertet af assistenten

Lad os starte med at definere hjertet af vores virtuelle assistent, der accepterer en brugerdefineret konfiguration. Dette gør det muligt at oprette din egen assistent med et andet navn og taler det sprog, du vælger.

Grundklassen for vores assistent (assistent.js).

Den virtuelle assistent skal være i stand til at konvertere et input til et svar. Når svaret er opnået, præsenterer assistenten det for brugeren. Jeg kalder disse to processer og siger. Assistenten starter med at behandle input og sige derefter output. Foreløbigt vil vi få vores assistent til at logge sine svar og altid give standard svaret til brugeren, som vi har angivet i vores konfiguration.

Den grundlæggende proces og sige funktioner i vores assistent (assistent.js).

Fantastisk! Vi kan nu give sætninger til vores assistent, og han udsender sine svar til konsollen. Imidlertid er vores assistent stadig ubrugelig. Lad os rette dette ved at tilføje nogle færdigheder, der kan generere dynamiske svar.

Opret nogle færdigheder

En færdighed er et grundlæggende sæt af to funktioner - en, der bestemmer, om denne færdighed skal udløses baseret på input og en, der konverterer den faktiske input til svaret. De to funktioner, som jeg kalder trigger og løsning, er de eneste nødvendige for at skabe en færdighed.

I dette eksempel vil jeg gøre triggerfunktionen synkron, mens opløsningsfunktionen sker ved asynkron. Man vælger muligvis også at gøre triggerfunktionen asynkron, men vi vil ikke bruge denne type triggers i øjeblikket.

Lad os oprette en færdighedsmappe med to filer - time.js og whatsup.js. Disse to grundlæggende færdigheder vil blive brugt til vores assistent.

To grundlæggende færdigheder, vi vil bruge i vores assistent (færdighedsmappe).

Det sidste trin med at oprette processoren er at finde den rigtige færdighed og kalde dens løsningsfunktion. Vi kan gøre dette ved at opdatere implementeringen af ​​procesfunktionen som uddraget nedenfor.

Implementering af processfunktionen (assistent.js).

Tillykke! Du er færdig med hjertet af din egen (tekstbaserede) virtuelle assistent. Du kan nu bruge koden ovenfor til at oprette en ny instans og indlæse dine evner.

Grundlæggende brug af den tekstbaserede version af assistenten (index.js).

Lyt og tal

Tid til den sidste del af implementeringen af ​​den virtuelle assistent. Det er her, vi får assistenten til at tale sine svar til os og lytter til, hvad vi har at sige. Lad os starte med den lette del, tekst-til-tale.

Vi implementerer sagfunktionen og får den til at bruge den indbyggede API for at begynde at tale. Fra nu af kører vores kode kun i browseren, da vi vil bruge variabler, der er knyttet til vinduesvariablen. Vi bruger det almindelige udtryk /??&\/\\#,+()$~%.'"*?<>>}}} til at filtrere de tegn, som assistenten ikke skal udtale.

Grundlæggende implementering af sig-funktionen (assistent.js).

Nu når vores assistent kan tale, er det stadig nødt til at lytte til, hvad vi har at sige. For at gøre det, er vi nødt til at øjeblikkeligt indstille en webkitSpeechRecognition-instans, indstille dets sprog til det, vi har angivet i vores config, sørge for at genstarte, efter at det har hørt en sætning, og forbinde det til vores processfunktion.

Dette lyder måske meget, men det er slet ikke så meget. Vi kan tilslutte koden for at indstille dette helt i konstruktøren, når vi opretter en ny assistent. Bemærk, at vi nu har et tilbagekald, hvor vi modtager en genkendelsesinstans, som vi skal konvertere til en streng og videregive til vores procesfunktion. Jeg har også tilføjet en simpel startfunktion for at starte genkenderen.

Initialiser en grundlæggende genkender i konstruktøren (assistent.js).

Hvis du gerne vil vide mere om genkendelsesvariablen, kan du udskrive forekomsten i konsollen for at udforske dens struktur. På nuværende tidspunkt har jeg allerede skrevet en kode for at konvertere instansen til en transkription, som er den sætning, som genkenderen har hørt.

Når vi har setningen, som genkenderen har identificeret, kontrollerer vi, om det første ord er navnet på vores assistent. Kun hvis dette er tilfældet, overfører vi resten af ​​sætningen til processfunktionen. Hvis sætningen ikke starter med navnet på vores assistent, skal vi simpelthen ignorere den.

Komplet implementering af konverteringen af ​​transkriptet (assistent.js).

Instantiate en ny assistent

Det er det! Du kan begynde at bruge din egen assistent og fortsætte med at tilføje forskellige færdigheder over tid. Da hver færdighed har den samme API, vil du endda være i stand til at distribuere og installere færdigheder via npm.

Instantiate og start en ny assistent (index.js).

Kildekode

Du kan gennemgå alle koderne for denne artikel i robinjs-webstedets lager. Eksemplet, jeg har oprettet her, hostes også på robinjs.party, så du kan køre demoen med det samme.

Konklusion

Dette kan være en ekstremt grundlæggende version af en virtuel assistent, men på grund af de tilpassede færdigheder er der virkelig meget, du kan gøre med det. Jeg håber du kunne lide tutorialen og have det sjovt med at opbygge din egen version af Alexa!

Hvis du har spørgsmål, eller du kan lide dette projekt, så fortæl mig det!

Happy Coding