Guest User

Untitled

a guest
Aug 14th, 2019
88
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