Update cognitive services

brenopolanski · Sep 11, 2017 · efe3bba · efe3bba
1 parent adf5e5e
commit efe3bba
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 90 deletions.
diff --git a/config.xml b/config.xml
@@ -88,6 +88,7 @@
     <plugin name="cordova-plugin-file-transfer" spec="^1.6.3" />
     <plugin name="cordova-plugin-splashscreen" spec="^4.0.3" />
     <plugin name="cordova-plugin-statusbar" spec="^2.2.2" />
+    <plugin name="cordova-plugin-tts" spec="^0.2.3" />
     <plugin name="cordova-plugin-whitelist" spec="^1.3.1" />
     <plugin name="ionic-plugin-keyboard" spec="^2.2.1" />
 </widget>
diff --git a/package.json b/package.json
@@ -31,6 +31,7 @@
         "@ionic-native/file-transfer": "^4.2.1",
         "@ionic-native/splash-screen": "3.12.1",
         "@ionic-native/status-bar": "3.12.1",
+        "@ionic-native/text-to-speech": "^4.2.1",
         "@ionic/storage": "2.0.1",
         "cordova-android": "^6.2.3",
         "cordova-plugin-camera": "^2.4.1",
@@ -41,6 +42,7 @@
         "cordova-plugin-file-transfer": "^1.6.3",
         "cordova-plugin-splashscreen": "^4.0.3",
         "cordova-plugin-statusbar": "^2.2.2",
+        "cordova-plugin-tts": "^0.2.3",
         "cordova-plugin-whitelist": "^1.3.1",
         "ionic-angular": "3.6.1",
         "ionic-plugin-keyboard": "^2.2.1",
@@ -64,7 +66,8 @@
             "cordova-plugin-whitelist": {},
             "ionic-plugin-keyboard": {},
             "cordova-plugin-file": {},
-            "cordova-plugin-file-transfer": {}
+            "cordova-plugin-file-transfer": {},
+            "cordova-plugin-tts": {}
         },
         "platforms": [
             "android"

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -7,11 +7,12 @@ import { StatusBar } from '@ionic-native/status-bar';
 import { FileTransfer, FileTransferObject } from '@ionic-native/file-transfer';
 import { File } from '@ionic-native/file';
 import { Camera } from '@ionic-native/camera';
+import { TextToSpeech } from '@ionic-native/text-to-speech';
 
 import { MyApp } from './app.component';
 import { HomePage } from '../pages/home/home';
 import { CameraProvider } from '../providers/camera/camera.provider';
-import { ComputerVisionService } from '../providers/computer-vision/computer-vision.service';
+import { CognitiveService } from '../providers/cognitive-services/cognitive-services.service';
 
 @NgModule({
   declarations: [
@@ -37,7 +38,8 @@ import { ComputerVisionService } from '../providers/computer-vision/computer-vis
     File,
     Camera,
     CameraProvider,
-    ComputerVisionService
+    CognitiveService,
+    TextToSpeech
   ]
 })
 export class AppModule {}
diff --git a/src/pages/home/home.html b/src/pages/home/home.html
@@ -7,25 +7,17 @@
 <ion-content padding class="aieyes-components-page">
 
   <ion-card>
-    <ion-card-content>
-      <img [src]="picture" />
-    </ion-card-content>
-
-    <div class="card-title">São Paulo</div>
-    <div class="card-subtitle">41 Listing</div>
-
-    <ion-item>
-      <button ion-button item-end outline icon-start *ngIf="isSpeak">
-        <ion-icon name="play"></ion-icon>
-        Speak
-      </button>
-    </ion-item>
+    <img [src]="picture" />
   </ion-card>
 
+  <p>{{imageDescription}}</p>
+
   <p>
-    <button ion-button block (click)="takePicture()">Take a Picture</button>
+    <button ion-button outline large block *ngIf="isSpeak" (click)="speakAgain()">Speak Again</button>
   </p>
 
-  <p>{{debug}}</p>
+  <p>
+    <button ion-button large block (click)="takePicture()">Take a Picture</button>
+  </p>
 
 </ion-content>
diff --git a/src/pages/home/home.scss b/src/pages/home/home.scss
@@ -1,39 +1,3 @@
 .aieyes-components-page {
 
-  ion-card {
-    position: relative;
-    text-align: center;
-    margin-bottom: 2em;
-  }
-
-  ion-card-content {
-    background-color: #f4f5f8;
-    padding: 0;
-    margin: 0;
-  }
-
-  ion-card img {
-    width: auto;
-    height: 300px;
-    display: block;
-    margin: 20px auto;
-  }
-
-  .card-title {
-    position: absolute;
-    top: 36%;
-    font-size: 2.0em;
-    width: 100%;
-    font-weight: bold;
-    color: #fff;
-  }
-
-  .card-subtitle {
-    font-size: 1.0em;
-    position: absolute;
-    top: 52%;
-    width: 100%;
-    color: #fff;
-  }
-
-}
+}
diff --git a/src/pages/home/home.ts b/src/pages/home/home.ts
@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 import { NavController, LoadingController } from 'ionic-angular';
 import { CameraProvider } from './../../providers/camera/camera.provider';
-import { ComputerVisionService } from './../../providers/computer-vision/computer-vision.service';
+import { CognitiveService } from './../../providers/cognitive-services/cognitive-services.service';
 
 @Component({
   selector: 'page-home',
@@ -11,12 +11,11 @@ export class HomePage {
 
   picture: string = 'https://raw.githubusercontent.com/ionic-team/ionic-preview-app/master/src/assets/img/card-saopaolo.png';
   isSpeak: boolean = false;
-
-  debug: any;
+  imageDescription: string;
 
   constructor(
     private cameraProvider: CameraProvider,
-    private computerVisionService: ComputerVisionService,
+    private cognitiveService: CognitiveService,
     public navCtrl: NavController,
     public loadingCtrl: LoadingController
   ) {
@@ -26,40 +25,47 @@ export class HomePage {
   async takePicture(): Promise<any> {
     const loading = this.loadingCtrl.create();
 
+    let descriptionAnalyzedImage;
+
     loading.present();
 
     try {
       await this.cameraProvider.getPictureFromCamera().then(picture => {
         if (picture) {
           this.picture = picture;
           this.isSpeak = true;
-
-          /*this.computerVisionService.analyzeImage(this.picture).then(text => {
-            this.debug = text;
-
-            this.test1 = Object.keys(text);
-            this.test2 = text;
-          });*/
         }
 
         loading.dismiss();
       }, error => {
         console.error(error);
       });
 
-      await this.computerVisionService.analyzeImage(this.picture).then(text => {
-        this.debug = text;
+      await this.cognitiveService.analyzeImage(this.picture).then(description => {
+        this.imageDescription = description;
+        // descriptionAnalyzedImage = description;
       }, error => {
         console.error(error);
       });
 
-      await this.computerVisionService.translateText(this.debug).subscribe(data => {
-        this.debug = data.text;
+      await this.cognitiveService.translateText(this.imageDescription).subscribe(translated => {
+        this.imageDescription = translated.text;
       });
+
+      await this.cognitiveService.playAudio(this.imageDescription);
     } 
     catch (error) {
       console.error(error);
     }
   }
 
+  async speakAgain(): Promise<any> {
+    try {
+      await this.cognitiveService.playAudio(this.imageDescription);
+    }
+    catch(error) {
+      console.error(error);
+    }
+  }
+
 }
diff --git a/...omputer-vision/computer-vision.service.ts → ...ve-services/cognitive-services.service.ts b/...omputer-vision/computer-vision.service.ts → ...ve-services/cognitive-services.service.ts
@@ -1,18 +1,20 @@
 import { Injectable } from '@angular/core';
 import { Http, Headers } from '@angular/http';
 import { FileTransfer, FileUploadOptions, FileTransferObject } from '@ionic-native/file-transfer';
+import { TextToSpeech } from '@ionic-native/text-to-speech';
 import keys from '../../utils/keys';
 import configs from '../../utils/configs';
 import 'rxjs/add/operator/map';
 
 @Injectable()
-export class ComputerVisionService {
+export class CognitiveService {
 
   private fileTransfer: FileTransferObject;
 
   constructor(
     private http: Http, 
-    private transfer: FileTransfer
+    private transfer: FileTransfer,
+    private tts: TextToSpeech
   ) {
     this.fileTransfer = this.transfer.create();
   }
@@ -31,32 +33,23 @@ export class ComputerVisionService {
     };
 
     return this.fileTransfer.upload(imageFilePath, uriBase, options)
-    .then(data => data.response)
-    .then(x => {
-      // return this.translateText('I speak English');
-      // return 'I speak English';      
-      //return x['description'].captions[0].text;
-      // return JSON.stringify(x);
+      .then(data => data.response)
+      .then(res => {
+        const resParse = JSON.parse(res);
 
-      let y = JSON.parse(x);
-
-      // return this.translateText(y.description.captions[0].text).subscribe(translatedText => {
-      //   return translatedText.text;
-      // });
-
-      return y.description.captions[0].text;
-    }, error => {
-      console.error('ANALIZE IMAGE ERROR -> ' + JSON.stringify(error));
-    });
+        return resParse.description.captions[0].text;
+      }, error => {
+        console.error('ANALIZE IMAGE ERROR -> ' + JSON.stringify(error));
+      });
   }
 
-  translateText(text: string) {
+  translateText(text) {
     const uriBase = configs.TRANSLATE_URI_BASE;
     const headers = new Headers();
     headers.append('Content-Type', 'application/json');
 
     const data = {
-      text: text,
+      text,
       from: 'en',
       to: 'pt'
     };
@@ -65,4 +58,8 @@ export class ComputerVisionService {
       .map(res => res.json())
   }
 
+  playAudio(text) {
+    return this.tts.speak(text);
+  }
+
 }