Example application

return (
  <div>
    <TextTranslation />
    <TextToSpeech />
    <SpeechToText />
    <TextIdentification />
    <EntityIdentification />
    <PredictionsUpload />
    <LabelsIdentification />
    <TextInterpretation />
  </div>
);

import { Predictions } from '@aws-amplify/predictions';
import { Amplify } from 'aws-amplify';
import mic from 'microphone-stream';
import { useState } from 'react';
import './App.css';
import amplifyconfig from './amplifyconfiguration.json';

Amplify.configure(amplifyconfig);

function TextIdentification() {
  const [response, setResponse] = useState('You can add a photo by uploading directly from the app');

  const identifyFromFile = async (event) => {
    setResponse('identifying text...');
    const { target: { files } } = event;
    const [file,] = files || [];

    if (!file) {
      return;
    }
    try {
      const { text } = await Predictions.identify({
        text: {
          source: {
            file,
          },
          format: 'PLAIN', // Available options 'PLAIN', 'FORM', 'TABLE', 'ALL'
        }
      })
      setResponse(text.fullText);
    } catch (err) {
      setResponse(JSON.stringify(err, null, 2));
    }
  }

  return (
    <div>
      <div>
        <h3>Text identification</h3>
        <input type="file" onChange={identifyFromFile}></input>
        <p>{response}</p>
      </div>
    </div>
  );
}

function EntityIdentification() {
  const [response, setResponse] = useState('Click upload for test');

  const identifyFromFile = async (event) => {
    setResponse('searching...');
    
    const { target: { files } } = event;
    const [file,] = files || [];

    if (!file) {
      return;
    }
    try {
      const result = await Predictions.identify({
        entities: {
          source: {
            file,
          },
          /*
          * For using the Identify Entities advanced features, enable collection:true and comment out celebrityDetection
          * Then after you upload an image to your S3 bucket (protected/predictions/index-faces/) you'll be able to run this again
          * and it will tell you if the photo you're testing is in that Collection or not
          */
          // collection: true
          celebrityDetection: true
        }
      });
      setResponse(JSON.stringify(result, null, 2))
    } catch (err) {
      setResponse(JSON.stringify(err, null, 2));
    }
  }

  return (
    <div>
      <div>
        <h3>Entity identification</h3>
        <input type="file" onChange={identifyFromFile}></input>
        <p>{response}</p>
      </div>
    </div>
  );
}

function LabelsIdentification() {
  const [response, setResponse] = useState('Click upload for test')

  const identifyFromFile = async (event) => {
    const { target: { files } } = event;
    const [file,] = files || [];

    if (!file) {
      return;
    }
    try {
      const result = Predictions.identify({
        labels: {
          source: {
            file,
          },
          type: 'ALL' // 'LABELS' will detect objects , 'UNSAFE' will detect if content is not safe, 'ALL' will do both default on amplifyconfiguration.json
        }
      });
      console.log(result);
      setResponse(JSON.stringify(result, null, 2));
    } catch (err) {
      setResponse(JSON.stringify(err, null, 2));
    }
  }

  return (
    <div>
      <div>
        <h3>Labels identification</h3>
        <input type="file" onChange={identifyFromFile}></input>
        <p>{response}</p>
      </div>
    </div>
  );
}

function SpeechToText() {
  const [response, setResponse] = useState('Record audio to generate a transcription.')
  
  function AudioRecorder({ finishRecording }) {
    const [recording, setRecording] = useState(false);
    const [micStream, setMicStream] = useState<any>();
    const [audioBuffer] = useState(
      (function() {
        let buffer = [];
        function add(raw) {
          buffer = buffer.concat(...raw);
          return buffer;
        }
        function newBuffer() {
          console.log('resetting buffer');
          buffer = [];
        }
 
        return {
          reset: function() {
            newBuffer();
          },
          addData: function(raw) {
            add(raw);
          },
          getData: function() {
            return buffer;
          }
        };
      })()
    );

    const startRecording = async () => {
      console.log('start recording');
      audioBuffer.reset();

      const startMic = new mic();
      startMic.setStream(await window.navigator.mediaDevices.getUserMedia({ video: false, audio: true }));
      
      startMic.on('data', (chunk) => {
          var raw = mic.toRaw(chunk);
          if (raw == null) {
            return;
          }
          audioBuffer.addData(raw);

        });

      setRecording(true);
      setMicStream(startMic);
    }

    async function stopRecording() {
      console.log('stop recording');

      micStream.stop();
      setMicStream(null);
      setRecording(false);

      const resultBuffer = audioBuffer.getData();
      finishRecording(resultBuffer);
    }

    return (
      <div>
        <div>
          {recording && <button onClick={stopRecording}>Stop recording</button>}
          {!recording && <button onClick={startRecording}>Start recording</button>}
        </div>
      </div>
    );
  }

  const convertFromBuffer = async (bytes) => {
    setResponse('Converting text...');
    
    try {
      const { transcription } = await Predictions.convert({
        transcription: {
          source: {
            bytes
          },
          language: 'en-US', // other options include 'en-GB', 'fr-FR', 'fr-CA', 'es-US'
        },
      });
      setResponse(transcription.fullText);
    } catch (err) {
      setResponse(JSON.stringify(err, null, 2));
    }
  }

  return (
    <div>
      <div>
        <h3>Speech to text</h3>
        <AudioRecorder finishRecording={convertFromBuffer} />
        <p>{response}</p>
      </div>
    </div>
  );
}

function TextToSpeech() {
  const [response, setResponse] = useState('...')
  const [textToGenerateSpeech, setTextToGenerateSpeech] = useState('write to generate audio');

  const generateTextToSpeech = async () => {
    setResponse('Generating audio...');
    
    try {
      const result = await Predictions.convert({
        textToSpeech: {
          source: {
            text: textToGenerateSpeech,
          },
          voiceId: 'Amy' // default configured on amplifyconfiguration.json
          // list of different options are here https://docs.aws.amazon.com/polly/latest/dg/voicelist.html
        }
      });
      
      let AudioContext = window.AudioContext || window.webkitAudioContext;
      const audioCtx = new AudioContext();
      const source = audioCtx.createBufferSource();
      audioCtx.decodeAudioData(result.audioStream, (buffer) => {
        source.buffer = buffer;
        source.connect(audioCtx.destination);
        source.start(0);
      }, (err) => console.log({ err }));
      
      setResponse('Generation completed');
    } catch(err: unknown) {
      setResponse(JSON.stringify(err, null, 2));
    }
  }

  const setText = (event) => {
    setTextToGenerateSpeech(event.target.value);
  }

  return (
    <div>
      <div>
        <h3>Text To Speech</h3>
        <input type="text" value={textToGenerateSpeech} onChange={setText}></input>
        <button onClick={generateTextToSpeech}>Text to Speech</button>
        <h3>{response}</h3>
      </div>
    </div>
  );
}

function TextTranslation() {
  const [response, setResponse] = useState('Input some text and click enter to test');
  const [textToTranslate, setTextToTranslate] = useState('write to translate');

  const translate = async () => {
    try {
      const result = Predictions.convert({
        translateText: {
          source: {
            text: textToTranslate,
            // language : "es" // defaults configured on amplifyconfiguration.json
            // supported languages https://docs.aws.amazon.com/translate/latest/dg/what-is-languages.html
          },
          // targetLanguage: "en"
        }
      })
      setResponse(JSON.stringify(result, null, 2));
    } catch(err: unknown) {
      setResponse(JSON.stringify(err, null, 2));
    }
  }

  function setText(event) {
    setTextToTranslate(event.target.value);
  }

  return (
    <div>
      <div>
        <h3>Text Translation</h3>
        <input type="text" value={textToTranslate} onChange={setText}></input>
        <button onClick={translate}>Translate</button>
        <p>{response}</p>
      </div>
    </div>
  );
}

function TextInterpretation() {
  const [response, setResponse] = useState('Input some text and click enter to test');
  const [textToInterpret, setTextToInterpret] = useState('write some text here to interpret');

  const interpretFromPredictions = async () => {
    try {
      const result = Predictions.interpret({
        text: {
          source: {
            text: textToInterpret,
          },
          type: 'all'
        }
      })
      setResponse(JSON.stringify(result, null, 2));
    } catch (err) { 
      setResponse(JSON.stringify(err, null, 2));
    }
  }

  function setText(event) {
    setTextToInterpret(event.target.value);
  }

  return (
    <div>
      <div>
        <h3>Text interpretation</h3>
        <input value={textToInterpret} onChange={setText}></input>
        <button onClick={interpretFromPredictions}>test</button>
        <p>{response}</p>
      </div>
    </div>
  );
}

function App() {
  return (
    <div>
      <TextTranslation />
      <br/>
      <TextToSpeech />
      <br/>
      <SpeechToText />
      <br/>
      <TextIdentification />
      <br/>
      <EntityIdentification />
      <br/>
      <LabelsIdentification />
      <br/>
      <TextInterpretation />
    </div>
  );
}

export default App;