E-commerce assistentie. Deel 2: Spraak op het web

Een spraakassistent op het web moet kunnen luisteren, verwerken en reageren. In dit bericht duik ik dieper in het technische verhaal rondom  spraakassistentie op het web. Recentelijk zijn verschillende bibliotheken op het web geïntroduceerd, die het interpreteren en verwerken van spraak mogelijk maken. Geen idee waar dit over gaat? Lees dan eerst Deel 1: Stand van zaken

In essentie bestaat de spraaktechnologie uit twee onderdelen: De Speech Recognition API en Speech Synthesis API. De Speech Synthesis API is in staat om tekst naar spraak te vertalen. De Speech Recognition API doet het tegenovergestelde, namelijk gebruik maken van een microfoon om spraak om te zetten naar tekst. Beide functionaliteiten kunnen bestempeld worden als experimenteel, aangezien de ondersteuning van grote browsers nog erg laag ligt.

Speech Synthesis API
Voor het uitspreken van tekst werd vroeger gebruik gemaakt van diensten die .mp3 bestanden genereerden voor het uitspreken van tekst. Hier zijn een hoop diensten voor beschikbaar waaronder bijvoorbeeld:

Deze diensten zijn over het algemeen erg langzaam, vanwege de tijd die nodig is voor het generen van de .mp3 bestanden. Daarnaast zit er vaak een maximum aantal woorden. Soms moet je jezelf eerst verplicht registreren om van de dienst gebruik te kunnen maken. Betere kwaliteit en een hogere snelheid is bij sommige diensten mogelijk tegen betaling.

Luister naar Fluency Of ga zelf aan de slag

Deze problemen zijn verholpen door ingebouwde TTS (Text-To-Speech) in de meeste moderne browsers. De ingebouwde TTS, ookwel Speech Synthesis API genoemd, wordt op dit moment ondersteund in browsers als Chrome (mobiel), Safari (mobiel) en Opera. FireFox zal naar verwachting binnen korte tijd de Speech Recognition API ook ondersteunen. Het is aan de makers van de browsers om de API te implementeren.

Een bibliotheek zoals ResposiveVoice.js maakt gebruik van de ingebouwde TTS mogelijkheid. Hierdoor zijn ze erg snel. Bij gebruik wordt er geen verzoek naar de server verstuurd of .mp3 bestand gemaakt. De spraak komt direct uit de browser. Omdat niet alle browsers de Speech Synthesis API ondersteunen, maakt ResposiveVoice.js gebruik van een ‘fallback’ methode. Deze methode zorgt ervoor dat de dienst in elke browser op de snelst mogelijke manier werkt. ResposiveVoice.js ondersteund 51 talen en 168 stemmen, waaronder ook Nederlands en Vlaams.

ResponsiveVoice.JS

browsers_and_devices_sm

Speech Recognition API
De ondersteuning van deze API is erg klein, omdat het meer een experimentele technologie is die alleen nog in Chrome en Opera te gebruiken is. Dit verklaart waarom de ondersteuning op grote websites nog zo laag is. De HTML5 functionaliteit werd als eerste in Google Chrome geïmplementeerd in Februari 2014 (Chrome 33). Ook op het web speelt Google een vooruitstrevende rol als het gaat om het inzetten van spraak naar tekst. Voor haar Chrome browser is een Web speech API voorbeeld pagina ontwikkeld, ofwel de Speech Recognition API. Op deze pagina kun je spraakherkenning in ruim 40 talen testen. In de broncode valt te zien dat er gebruik gemaakt wordt van deze nieuwe HTML5 API.

var recognition = new SpeechRecognition();

Met deze Javascript API kunnen bijvoorbeeld tools ontwikkeld worden, die het vertalen van spraakopdrachten naar functies makkelijker maken. Zo kunnen commando’s aan spraakopdrachten worden gekoppeld zoals bij SIRI en Google Now gebeurd. Bij het uitspreken van een opdracht kan zo een JavaScript functie worden uitgevoerd.

Google speech demo

Na de introductie en implementatie van spraakondersteuning op het web zijn creatievelingen aan de slag gegaan met het schrijven van bibliotheken. Deze voicecontrol bibliotheken bevatten voorgeschreven code, voor bijvoorbeeld het begrijpen van een zin, om hier vervolgens een functie aan te koppelen. De meest gebruikte is Annyang.js. Deze JavaScript bibliotheek ondersteunt meerdere talen en heeft geen afhankelijkheden. Annyang heeft een formaat van slechts 3kb, en is gratis te gebruiken en aan te passen.

Annyang test

Bij internetbureau METMEER zijn de meeste webwinkels gericht op een Nederlands publiek. De Annyang bibliotheek kan gebruikt worden om de Nederlandse taal te herkennen en te verwerken. Wat opvalt is dat de ondersteuning voor de Nederlandse taal niet zo goed werkt als de Engelse variant. Zo moet je erg duidelijk articuleren en word je soms alsnog niet goed begrepen. Vooral met namen heeft de browser moeite; zo wil een Klaas of Jan nog wel lukken, maar met namen als Liam of Stevie heeft het systeem meer moeite. De Engelse variant is verder ontwikkeld en begrijpt zinnen beter. Het zal een kwestie van tijd zijn voor de Nederlandse versie verbeterd. Vooral sinds recente ontwikkeling rond SIRI. Zo is SIRI sinds iOS 8.3 in het Nederlands te gebruiken en is in iOS 9.0 de ondersteuning voor Nederlandse accenten verbeterd.

Dat de spraaktechnologie op het web nog niet ruimschoots wordt ingezet heeft een duidelijke oorzaak. Het is aan de makers van de browser om deze experimentele API’s te implementeren. Dit kan nog wel eens enkele jaren in beslag nemen. Zo worden SVG (Scalable Vector Graphics) bestanden in Internet Explorer (en Edge) nog steeds slecht ondersteund. Naast dat het pas sinds IE9 (2010) wordt ondersteund, moeten programmeurs extra code toevoegen om de bestanden goed te laten schalen in de browser. Dit terwijl deze techniek al in het jaar 2000 door Macromedia (Adobe) is geïntroduceerd.

meer over SVG

Een assistent die kan spreken en luisteren mist een belangrijk aspect, namelijk: kennis (o.a. productkennis). Deze kennis zal ergens vandaan moeten komen. Als er een vraag over een product gesteld wordt, moet dit herkend worden door informatie die ‘onderwater’ wordt opgehaald.

Tegenwoordig zijn de meeste webwinkels relatief slim. Zo worden er bijvoorbeeld aanbevelingen gedaan op basis van eerdere aankopen. Het grootste deel beschikt over dit soort functionaliteiten, omdat ze gebouwd worden op bestaande beheer systemen. Dit soort systemen bieden een basis en zorgen voor een uitgebreid aanbod aan functionaliteit die in de meeste webshops voorkomen. Bekende voorbeelden van dit soort pakketten zijn Magento of wooCommerce (voor WordPress). Magento is het populairste webwinkel systeem van dit moment. Dit pakket is volledig gericht op webwinkels en biedt het complete pakket van online betaalkoppelingen tot voorraadbeheer, facturatie en meertaligheid. De e-commerce klanten van METMEER draaien ook op dit modulaire systeem.

Dat er gebruik wordt gemaakt van Magento biedt grote voordelen voor het ondersteunen van spraakassistentie. De data (of kennis) kan bij elke webwinkel op dezelfde manier worden opgehaald. Voor spraakassistentie is het van belang dat de informatie op elk moment uitgesproken kan worden. De consument verlangt informatie van de spraakassistent, voordat hij zelf aan het lezen toekomt. Anders is de spraakassistent vrijwel overbodig en kan het geluid net zo goed uit. Bij Magento komt de productinformatie standaard pas naar voren op de product detail pagina. Door de informatie altijd beschikbaar te maken kan er bijvoorbeeld verteld worden tot welke breedte de kop van een tang te gebruiken is. Dit gebeurt bijvoorbeeld wanneer de cursor op de categoriepagina naar een product verplaatst wordt.

Er is daarom besloten om de ontwikkeling niet in Magento zelf te doen, maar met een externe applicatie. De externe applicatie is ontwikkeld met Angular.js. Dit is een JavaScript Framework dat in staat is om te werken met grote hoeveelheden data. Dit geeft de assistent een krachtig aspect, aangezien hij hiermee in staat is om de producten te filteren en bepaalde producten te tonen als er een vraag gesteld wordt. Met deze omgeving kan METMEER aan de slag met het testen van de nieuwe API’s in een omgeving van een van haar klanten. Ook kan er onderzoek gedaan worden naar de rol van spraakassistentie binnen de e-commerce. Wat werkt er wel en wat werkt er niet? Onderstaande fases en onderliggende taken vormen samen de functionaliteit die een online spraakassistent theoretisch kan bezitten:

Fase één: Voorstellen van de assistent, uitleggen wat er mogelijk is en het begroeten van de klanten bij het eerste bezoek van de website.

Fase twee: De koopbehoefte achterhalen aan de hand van het klikgedrag. Prijzen en sorteren van goederen, assisteren bij het voorraadbeheer en het selecteren van producten.

Fase drie: Begeleiden bij het verkoopproces. Bijvoorbeeld door het toelichten van de betaalmogelijkheden en de klant te bedanken voor zijn aankoop.

Spraakassistentie is nog in experimentele fase. Omdat METMEER specialist is op het gebied van e-commerce, is het belangrijk om voorop te lopen in het implementeren van deze techniek. Om die reden hebben wij als voornemen om deze techniek ruimschoots te testen, zodat het meteen geïmplementeerd kan worden voor onze klanten zodra de vraag daar is. Zodra er draagvlak is willen wij als METMEER bekend zijn met alle mogelijkheden en onmogelijkheden op het gebied van spraakassistentie. Op die manier kunnen wij koploper zijn op het gebied van spraakassistentie, wanneer het mogelijk niet meer weg te denken is binnen de e-commerce. Via een Magento module kan alle product data uit een bestaande webwinkel naar een JSON bestand (JavaScript Object Notation) worden weggeschreven. Hierdoor ontstaat een lange lijst met alle informatie van producten. Om dit mogelijk te maken is de fetch_data module ontwikkeld.

Het handige van JSON ten opzichte van bijvoorbeeld XML is dat het direct in JavaScript te gebruiken is. Via een AJAX aanvraag, waarbij asynchroon gegevens worden opgehaald van een webserver, kan uit elke Magento omgeving productkennis worden opgehaald en naar een extern systeem worden doorgespeeld. Dit is mogelijk door gebruik te maken van de fetch_data module:

// get data from magento using fetch_data module
$http.get("http://www.magento-webwikel.nl/data/ajax/fetch")
.success(function (response) {
$scope.products = response;
})
.error(function (response) {
alert('error!');
});

Hierdoor hoeft de assistent zelf niet alwetend te zijn of voorgeprogrammeerd te worden. De kennis komt door de inzet van deze module voort uit bestaande systemen en is zo breed inzetbaar. De JSON data ziet er ongeveer zo uit.

In mijn volgende blog zal ik verder ingaan op het toepassen van spraakassistentie in de Magento module. Wil je op de hoogte blijven van mijn onderzoek rondom spraakassistentie, schrijf je dan hieronder in op onze nieuwsbrief!