Example application
Sample React app
A sample React application with all of the Predictions features is provided below. It shows how to use all scenarios above by calling the appropriate convert, identify, and interpret API calls in the Amplify library.
The components in the app code below are rendered according to the scenarios above like so:
return ( <div> <TextTranslation /> <TextToSpeech /> <SpeechToText /> <TextIdentification /> <EntityIdentification /> <PredictionsUpload /> <LabelsIdentification /> <TextInterpretation /> </div>);React app code
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;Now run npm start and press the buttons to demo the app.