SHARE
TWEET

Untitled

a guest Aug 14th, 2019 62 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. ### Sample Ionic app
  2.  
  3. First, be sure you have the latest Ionic CLI installed, then generate a new app (for this example you can use any template, but it's simplest to start with the Blank template to start):
  4.  
  5. ```bash
  6. $ npm i -g ionic
  7. $ ionic start predictions blank # the first argument is your project name, the second the template
  8. ```
  9.  
  10. Update the `src/polyfills.ts` and add to the top of the file `(window as any).global = window;`. Then, update the `src/tsconfig.app.json` file and add the "node" types:
  11.  
  12. ```
  13. {
  14.   "extends": "../tsconfig.json",
  15.   "compilerOptions": {
  16.     "outDir": "../out-tsc/app",
  17.     "types": ["node"]
  18.   },
  19.   "exclude": [
  20.     "test.ts",
  21.     "**/*.spec.ts"
  22.   ]
  23. }
  24.  
  25. ```
  26. #### `src/app/home/home.page.ts`
  27.  
  28. ```javascript
  29. import { Component } from '@angular/core';
  30. import Predictions from '@aws-amplify/predictions';
  31. import { TextToSpeechOutput } from '@aws-amplify/predictions/lib/types';
  32.  
  33. @Component({
  34.   selector: 'app-home',
  35.   templateUrl: 'home.page.html',
  36.   styleUrls: ['home.page.scss'],
  37. })
  38. export class HomePage {
  39.  
  40.   public textToTranslate  = "Hello Amplify";
  41.   public translateResult  = "";
  42.   public srcLang          = "en";
  43.   public targetLang       = "de";
  44.   public voiceId          = "Salli";
  45.   public speechUrl:string;
  46.   public speakResult:boolean;
  47.  
  48.   constructor() {}
  49.  
  50.   public async translate() {
  51.     const result = await Predictions.convert({
  52.       translateText: {
  53.         source: {
  54.           text: this.textToTranslate,
  55.           language : this.srcLang
  56.         },
  57.         targetLanguage: this.targetLang
  58.       }
  59.     });
  60.     this.translateResult = result.text || "Error";
  61.     if (this.speakResult) {
  62.       this.generateSpeech(result.text);
  63.     }
  64.   }
  65.  
  66.   public async generateSpeech(textToGenerateSpeech: string) {
  67.     const result:TextToSpeechOutput = await Predictions.convert({
  68.       textToSpeech: {
  69.         source: {
  70.           text: textToGenerateSpeech,
  71.         },
  72.         voiceId: this.voiceId
  73.       }
  74.     });
  75.     const audioCtx = new ((window as any).AudioContext || (window as any).webkitAudioContext)();
  76.     const source = audioCtx.createBufferSource();
  77.     audioCtx.decodeAudioData(result.audioStream, (buffer) => {
  78.       source.buffer = buffer;
  79.       source.connect(audioCtx.destination);
  80.       source.start(audioCtx.currentTime);
  81.     }, (err) => console.log({err}));
  82.   }
  83.  
  84.   public selectSource(value: string) {
  85.     this.srcLang = value;
  86.   }
  87.  
  88.   public selectTarget(value: string) {
  89.     this.targetLang = value;
  90.   }
  91.  
  92. }
  93.  
  94. ```
  95.  
  96. #### `src/app/home/home.page.html`
  97.  
  98. ```html
  99. <ion-header>
  100.   <ion-toolbar>
  101.     <ion-title>
  102.       Amplify Predictions
  103.     </ion-title>
  104.   </ion-toolbar>
  105. </ion-header>
  106.  
  107. <ion-content>
  108.     <ion-card class="welcome-card">
  109.       <ion-card-header>
  110.         <ion-card-title>Convert</ion-card-title>
  111.         <ion-card-subtitle>Translate languages</ion-card-subtitle>
  112.       </ion-card-header>
  113.       <ion-card-content>
  114.  
  115.         <ion-list>        
  116.           <ion-item>
  117.             <ion-label>Source Language</ion-label>
  118.             <ion-select #srcLang placeholder="Source Language" (ionChange)="selectSource(srcLang.value)">
  119.               <ion-select-option value="en" selected>English</ion-select-option>
  120.               <ion-select-option value="es">Spanish</ion-select-option>
  121.               <ion-select-option value="de">German</ion-select-option>
  122.               <ion-select-option value="no">Norwegian</ion-select-option>
  123.             </ion-select>
  124.           </ion-item>
  125.        
  126.           <ion-item>
  127.             <ion-label>Target Language</ion-label>
  128.             <ion-select #targetLang placeholder="Target Language" (ionChange)="selectTarget(targetLang.value)>
  129.               <ion-select-option value="en">English</ion-select-option>
  130.               <ion-select-option value="es">Spanish</ion-select-option>
  131.               <ion-select-option value="de" selected>German</ion-select-option>
  132.               <ion-select-option value="no">Norwegian</ion-select-option>
  133.             </ion-select>
  134.           </ion-item>                  
  135.         </ion-list>
  136.        
  137.         <ion-grid>
  138.           <ion-row>
  139.               <ion-col align-self-center>
  140.                   <textarea placeholder="Text to translate" [(ngModel)]="textToTranslate" rows="5" cols="30"></textarea>
  141.               </ion-col>
  142.           </ion-row>
  143.           <ion-row>
  144.               <ion-col size="6">
  145.                   <ion-button (click)="translate()" [disabled]="!textToTranslate">Translate</ion-button>
  146.               </ion-col>
  147.               <ion-col size="6" align-self-center>
  148.                 <ion-checkbox color="primary" [(ngModel)]="speakResult"></ion-checkbox> &nbsp;
  149.                 <ion-label>Speak Result</ion-label>
  150.               </ion-col>
  151.           </ion-row>
  152.           <ion-row>
  153.               <ion-col align-self-center>
  154.                   <textarea placeholder="Translation will display here" [value]="translateResult" rows="5" cols="30"></textarea>
  155.               </ion-col>
  156.           </ion-row>
  157.         </ion-grid>
  158.  
  159.       </ion-card-content>
  160.     </ion-card>
  161.  
  162. </ion-content>
  163.  
  164. ```
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top