Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Future of the Web with Conversational Interface...

Tomomi Imura
February 14, 2018

Future of the Web with Conversational Interface (in JavaScript!)

My talk about conversational interface with JavaScript
- a high-level overview
- Examples and demo with JS/Node.js, incl. W3C proposal standard

Tomomi Imura

February 14, 2018
Tweet

More Decks by Tomomi Imura

Other Decks in Technology

Transcript

  1. @ • advocate open web & technology • code JavaScript

    & Node.js • write & speak about tech • hack useless stuff • A cat lady of the InterWeb • dev relations at Slack tomomi imura
  2. @ Conversational User Interactions: Siri and Alexa (Voice Assistants) Alexa,

    how is the weather? Hey Siri In various form-factors
  3. @

  4. @ Deliver me a large margherita pizza! What kind of

    crust do you want? 1. Regular crust 2. Thin crust 3. Gluten free crust Thin crust cha ching!
  5. @ Where is the address of your home? It’s 325

    Ruby Street. Request a ride Come over to my place!
  6. @ Yes, get me a ride now Your driver, Sam

    will pick you up in 6 minutes. Look for the red Toyota Prius!
  7. @

  8. @ Messaging Platforms • Slack • Facebook Messenger • Telegram

    • WeChat • Kik • Viver • LINE etc.
  9. @ Natural Conversation APIs • DialogFlow (API.ai /Google) • Wit.ai

    (Facebook) • Microsoft Bot Framework • Motion.ai • Chatbots.io • Converse AI • Recast.ai • Flow XO • ManyChat • Fluent.ai (Voice UI) etc.
  10. @ Hi, I want to book a flight! Yes, from

    SFO. Where are you flying to? London Hi Linda! Are you flying from San Francisco, as usual? An airline customer service bot Linda may not know she is talking to a bot!
  11. @

  12. @ NLP Platforms / APIs Natural Language Processing & Cognitive

    platforms: • IBM Watson • Google Cloud Natural Language API • Microsoft LUIS • Amazon Lex • Baidu UNIT
  13. @ Example: API.ai + FB Messenger const app = require('apiai')(CLIENT_ACCESS_TOKEN);

    function sendMessage(event) { let sender = event.sender.id; let text = event.message.text; let ai = app.textRequest(text, { sessionId: SESSION_STRING }); ai.on('response', (response) => { // Got a response. Let's POST to Facebook Messenger }); ai.end(); } API.ai Node.js SDK
  14. @

  15. @ Example: IBM Watson + Slack The bot workflow: 1.

    Read each message on a Slack channel 2. Send the message to IBM Watson for examination 3. If the likelihood of an emotion is above the given confidence threshold post the most prominent emotion
  16. @ Example: IBM Watson + Slack app.post('/events', (req, res) =>

    { let q = req.body; if (q.type === 'event_callback') { if(!q.event.text) return; analyzeTone(q.event); } }); Use Slack Events API to grab the text when a user post a message Pass the text data to Watson to analyze HTTP POST using ExpressJS
  17. @ Example: IBM Watson + Slack const watson = require('watson-developer-cloud');

    let tone_analyzer = watson.tone_analyzer({ username: process.env.WATSON_USERNAME, password: process.env.WATSON_PASSWORD, }); const confidencethreshold = 0.55; tone_analyzer.tone({text: text}, (err, tone) => { tone.document_tone.tone_categories.forEach((tonecategory) => { if(tonecategory.category_id === 'emotion_tone'){ tonecategory.tones.forEach((emotion) => { if(emotion.score >= confidencethreshold) { postEmotionOnSlackChannel(emotion); }}); }}); }); Returns emotions score in 0 to 1 Just initializing it w/ your API credentials Post the result on Slack
  18. @ Example: IBM Watson + Slack + Raspberry Pi (for

    fun) function colorEmotion(emotion) { if (emotion.tone_id === 'anger') { setLED(red); } else if(emotion.tone_id === 'joy') { setLED(yellow); } else if(emotion.tone_id === 'fear') { setLED(purple); } else if(emotion.tone_id === 'disgust') { setLED(green); } else if(emotion.tone_id === 'sadness') { setLED(blue); } } Change the LED color to match the emotion
  19. @ Ack, this sucks! I want my money back! An

    angry customer detected. Connect the customer with a human!
  20. @ Project: Artificial Voice Chat Hello! 1 2 Howdy 2.

    Generate Artificial reply Using the 3rd party API 1. User talk to browser Voice command: Voice -> Text 3 3. Browser speaks back Text -> Synthetic Voice Text
  21. @ Web Speech API: Speech Recognition const SpeechRecognition = window.SpeechRecognition

    || window.webkitSpeechRecognition; const recognition = new SpeechRecognition(); Get an instance of the SpeechRecognition, the controller interface In the current Chromium, it is still prefixed
  22. @ Web Speech API: Speech Recognition (Cont’d) recognition.lang = 'en-US';

    recognition.interimResults = false; recognition.start(); recognition.addEventListener('result', (e) => { let last = e.results.length - 1; let text = e.results[last][0].transcript; }); Some properties Methods: start(), stop(), abort() Events: onresult, onerror, onaudiostarted, onaudioend, etc.
  23. @ Web Speech API: Speech Synthesis const synth = window.speechSynthesis;

    const utterance = new SpeechSynthesisUtterance(); utterance.text = 'I am a robot'; utterance.pitch = 1.5; utterance.voice = 'Alex'; synth.speak(utterance); No vendor prefix Properties of the SpeechSynthesisUtterance interface Get available voices with synth.getVoices() method
  24. @ Web Speech API: Speech Synthesis (voice by Alex or

    whoever browser is) TEXT to VOICE “howdy” Howdy
  25. @