Web speech API update

Author: jeroenouw

src/app/components/ai/ai.component.html

@@ -9,12 +9,19 @@ <h1 class="mat-display-1">Angular 5 AI</h1>
         </div>
     </mat-card-content>
 
-    <mat-input-container>
-        <input matInput [(ngModel)]="formInput" min="2" placeholder="Your Message..." (keyup.enter)="sendMessageToBot()" type="text">
-    </mat-input-container>
+    <div class="message-container">
+        <mat-card-actions class="voice-button">
+            <button mat-icon-button (click)="startTalkingToBot()">
+                <mat-icon>keyboard_voice</mat-icon> 
+            </button>
+        </mat-card-actions>
+        <mat-input-container>
+            <input matInput [(ngModel)]="formInput" min="2" placeholder="Your Message..." (keyup.enter)="sendMessageToBot()" type="text">
+        </mat-input-container>
+    </div>
 
     <mat-card-actions class="button center">
         <button mat-raised-button (click)="sendMessageToBot()">Send</button>
     </mat-card-actions>
-    
+
 </mat-card>

src/app/components/ai/ai.component.scss

@@ -11,6 +11,12 @@
     word-wrap: break-word;
 }
 
+.message-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+
 .message.to {
     background-color: $darkblue;
     color: $white;
@@ -32,7 +38,19 @@
     display: inline;
 }
 
+.mat-form-field {
+    width: 100%;
+}
+
 .mat-raised-button {
     background-color: $darkblue;
     color: $white;
+}
+
+.voice-button {
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    line-height: 24px;
+    padding: 8px 20px 8px 8px;
 }

src/app/components/ai/ai.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 
 import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/operator/scan';
@@ -11,21 +11,46 @@ import { Message } from '../../model/message';
   templateUrl: './ai.component.html',
   styleUrls: ['./ai.component.scss']
 })
-export class AiComponent implements OnInit {
-    allMessages: Observable<Message[]>;
-    formInput: string;
-
-    constructor(public ai: AiService) { 
-    }
-
-    ngOnInit() {
-      this.allMessages = this.ai.conversation.asObservable()
-          .scan((acc, val) => acc.concat(val) );
-    }
-
-    sendMessageToBot() {
-      this.ai.converse(this.formInput);
-      this.formInput = '';
-    }
+export class AiComponent implements OnInit, OnDestroy {
+  allMessages: Observable<Message[]>;
+  formInput: string;
+  
+  constructor(public ai: AiService) { 
+    this.formInput = '';
+  }
+  
+  ngOnInit() {
+    this.allMessages = this.ai.conversation.asObservable()
+    .scan((acc, val) => acc.concat(val) );
+  }
+  
+  ngOnDestroy() {
+    this.ai.destroyVoiceConversation();
+  }
+  
+  sendMessageToBot() {
+    this.ai.textConversation(this.formInput);
+    this.formInput = '';
+  }
+  
+  startTalkingToBot() {
+    this.ai.voiceConversation()
+    .subscribe(
+      (value) => {
+        this.formInput = value;
+        console.log(value);
+      },
+      (err) => {
+        console.log(err);
+        if (err.error) {
+          // console.log("Talking error");
+          this.startTalkingToBot();
+        }
+      },
+      () => {
+        // console.log("Talking complete");
+        this.startTalkingToBot();
+      });
+  }
 }
 

src/app/interface/Iwindow.ts

@@ -0,0 +1,4 @@
+export interface IWindow extends Window {
+    webkitSpeechRecognition: any;
+    SpeechRecognition: any;
+}

src/app/service/ai.service.ts

@@ -1,23 +1,26 @@
-import { Injectable } from '@angular/core';
+import { Injectable, NgZone } from '@angular/core';
 import { environment } from '../../environments/environment';
+import * as lodash from "lodash";
 
 import { Observable } from 'rxjs/Observable';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
 import { ApiAiClient } from 'api-ai-javascript';
 import { Message } from '../model/message'
+import { IWindow } from '../interface/iwindow'
 
 @Injectable()
 export class AiService {
     readonly token = environment.dialogflow.angularAIBot;
     readonly client = new ApiAiClient({ accessToken: this.token });
 
+    speechRecognition: any;
     conversation = new BehaviorSubject<Message[]>([]);
 
-    constructor() {       
+    constructor(private zone: NgZone) {       
     }
 
-    converse(msg: string) {
+    textConversation(msg: string) {
         const userMessage = new Message(msg, 'user');
         this.update(userMessage);
         return this.client.textRequest(msg)
@@ -31,4 +34,51 @@ export class AiService {
     update(msg: Message) {
         this.conversation.next([msg]);
     } 
+    
+    voiceConversation(): Observable<string> {
+        return Observable.create(observer => {
+            const { webkitSpeechRecognition }: IWindow = <IWindow>window;
+            this.speechRecognition = new webkitSpeechRecognition();
+            this.speechRecognition.continuous = false;
+            this.speechRecognition.interimResults = false;
+            this.speechRecognition.lang = 'en-us';
+            this.speechRecognition.maxAlternatives = 0;
+            
+            this.speechRecognition.onresult = speech => {
+                let sentence: string = "";
+                if (speech.results) {
+                    var result = speech.results[speech.resultIndex];
+                    var transcript = result[0].transcript;
+                    if (result.isFinal) {
+                        if (result[0].confidence < 0.1) {
+                            console.log("Unrecognized result - Please try again");
+                        }
+                        else {
+                            sentence = lodash.trim(transcript);
+                            console.log("Did you said? -> " + sentence + " , If not then say something else...");
+                        }
+                    }
+                }
+                this.zone.run(() => {
+                    observer.next(sentence);
+                });
+            };
+            
+            this.speechRecognition.onerror = error => {
+                observer.error(error);
+            };
+            
+            this.speechRecognition.onend = () => {
+                observer.complete();
+            };
+            
+            this.speechRecognition.start();
+            // console.log("I'm listening...");
+        });
+    }
+    
+    destroyVoiceConversation() {
+        if (this.speechRecognition)
+        this.speechRecognition.stop();
+    }
 }