{"id":13533280,"url":"https://github.com/dabit3/amplify-ml-ai-predictions-example","last_synced_at":"2025-11-17T15:28:57.134Z","repository":{"id":73190355,"uuid":"228405450","full_name":"dabit3/amplify-ml-ai-predictions-example","owner":"dabit3","description":"This is a general overview of the Predictions category of Amplify. It shows examples of Machine Learning and AI service integration in a React app with AWS Amplify Predictions category","archived":false,"fork":false,"pushed_at":"2019-12-16T16:32:58.000Z","size":210,"stargazers_count":24,"open_issues_count":0,"forks_count":5,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-10-09T09:58:56.821Z","etag":null,"topics":["ai","aws","aws-amplify","machine-learning","polly","rekognition","serverless","transcribe"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dabit3.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2019-12-16T14:29:19.000Z","updated_at":"2025-09-13T14:47:44.000Z","dependencies_parsed_at":"2023-05-23T01:00:21.198Z","dependency_job_id":null,"html_url":"https://github.com/dabit3/amplify-ml-ai-predictions-example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/dabit3/amplify-ml-ai-predictions-example","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dabit3%2Famplify-ml-ai-predictions-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dabit3%2Famplify-ml-ai-predictions-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dabit3%2Famplify-ml-ai-predictions-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dabit3%2Famplify-ml-ai-predictions-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dabit3","download_url":"https://codeload.github.com/dabit3/amplify-ml-ai-predictions-example/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dabit3%2Famplify-ml-ai-predictions-example/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":284911354,"owners_count":27083422,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-11-17T02:00:06.431Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai","aws","aws-amplify","machine-learning","polly","rekognition","serverless","transcribe"],"created_at":"2024-08-01T07:01:18.322Z","updated_at":"2025-11-17T15:28:57.119Z","avatar_url":"https://github.com/dabit3.png","language":"JavaScript","funding_links":[],"categories":["Example Projects"],"sub_categories":["Other blogs \u0026 tutorials"],"readme":"## Amplify Predictions example\n\nTo get started, create a new React project and add the necessary dependencies:\n\n```sh\n$ npx create-react-app predictions-app\n\n$ cd predictions-app\n\n$ npm install aws-amplify aws-amplify-react\n```\n\nNext, initialize a new Amplify project:\n\n```sh\n$ amplify init\n```\n\nBecause Predictions needs the Auth category to authorize requests, go ahead and add it now:\n\n```sh\n$ amplify add auth\n```\n\nFinally, configure the React app to use the Amplify project:\n\n```js\n// src/index.js\nimport Amplify from 'aws-amplify'\nimport config from './aws-exports'\nAmplify.configure(config)\n```\n\n## Identifying text\n\nThe first example we'll initialize is identifying text from an image. To create the service, run the following command:\n\n```sh\n$ amplify add predictions\n? Please select from one of the categories below Identify\n? What would you like to identify? Identify Text\n? Provide a friendly name for your resource: \u003cyour_resource_name\u003e\n? Would you also like to identify documents? Y\n? Who should have access? Auth and Guest users\n```\n\nNext, deploy the service:\n\n```sh\n$ amplify push\n```\n\nNext, we'll create a basic React app that will allow us to upload an image and display the text from the image:\n\n```js\nimport React, { useState } from 'react'\n\nimport Amplify, { Predictions } from 'aws-amplify';\nimport { AmazonAIPredictionsProvider } from '@aws-amplify/predictions'\nAmplify.addPluggable(new AmazonAIPredictionsProvider())\n\nfunction TextIdentification() {\n  const [response, setResponse] = useState(\"You can add a photo by uploading direcly from the app \")\n\n  function identifyFromFile(event) {\n    setResponse('identifiying text...');\n    const { target: { files } } = event;\n    const [file,] = files || [];\n\n    if (!file) {\n      return;\n    }\n    Predictions.identify({\n      text: {\n        source: {\n          file,\n        },\n        format: \"PLAIN\", // Available options \"PLAIN\", \"FORM\", \"TABLE\", \"ALL\"\n      }\n    }).then(({text: { fullText }}) =\u003e {\n      setResponse(fullText)\n    })\n      .catch(err =\u003e setResponse(JSON.stringify(err, null, 2)))\n  }\n\n  return (\n    \u003cdiv className=\"Text\"\u003e\n      \u003cdiv style={{padding: 50}}\u003e\n        \u003ch3\u003eText identification\u003c/h3\u003e\n        \u003cinput type=\"file\" onChange={identifyFromFile}\u003e\u003c/input\u003e\n        \u003cp style={{\n          backgroundColor: 'black', color: 'white', padding: 20\n        }}\u003e{response}\u003c/p\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default TextIdentification\n```\n\n## Translating Text\n\nIn the next example we'll create a service that translates text from a given language to a target language.\n\nTo create the service, run the following command:\n\n```sh\n$ amplify add predictions\n? Please select from one of the categories below: Convert\n? What would you like to convert? Translate text into a different language\n? Provide a friendly name for your resource: \u003cyour_service_name\u003e\n? What is the source language? English\n? What is the target language? Russian \u003cor any language\u003e\n? Who should have access? Auth and Guest users\n```\n\n```js\nimport React, { useState } from 'react'\n\nimport Amplify, { Predictions } from 'aws-amplify';\nimport { AmazonAIPredictionsProvider } from '@aws-amplify/predictions'\nAmplify.addPluggable(new AmazonAIPredictionsProvider())\n\nfunction TextTranslation() {\n  const [response, setResponse] = useState(\"Input some text and click enter to test\")\n  const [textToTranslate, setTextToTranslate] = useState(\"write to translate\");\n  const [targetLang, setTargetLang] = useState('es')\n  function translate() {\n    Predictions.convert({\n      translateText: {\n        source: {\n          text: textToTranslate,\n          // supported languages https://docs.aws.amazon.com/translate/latest/dg/how-it-works.html#how-it-works-language-codes\n        },\n        targetLanguage: targetLang\n      }\n    }).then(result =\u003e setResponse(JSON.stringify(result, null, 2)))\n      .catch(err =\u003e setResponse(JSON.stringify(err, null, 2)))\n  }\n\n  function setText(event) {\n    setTextToTranslate(event.target.value);\n  }\n\n  function onChange(event) {\n    setTargetLang(event.target.value)\n  }\n\n  return (\n    \u003cdiv className=\"Text\"\u003e\n      \u003cdiv style={{ padding: 50 }}\u003e\n        \u003ch3\u003eText Translation\u003c/h3\u003e\n        \u003cinput value={textToTranslate} onChange={setText}\u003e\u003c/input\u003e\n        \u003cbutton onClick={translate}\u003eTranslate\u003c/button\u003e\n        \u003cp\u003e{response}\u003c/p\u003e\n        Target Language\n        \u003cselect value={targetLang} onChange={onChange}\u003e\n          \u003coption value='es'\u003eSpanish\u003c/option\u003e\n          \u003coption value='ar'\u003eArabic\u003c/option\u003e\n          \u003coption value='zh'\u003eChinese\u003c/option\u003e\n          \u003coption value='nl'\u003eDutch\u003c/option\u003e\n          \u003coption value='el'\u003eGreek\u003c/option\u003e\n          \u003coption value='he'\u003eHebrew\u003c/option\u003e\n          \u003coption value='pl'\u003ePolish\u003c/option\u003e\n        \u003c/select\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default TextTranslation\n```\n\n## Speech Generation\n\nThe next example will use Amazon Polly to synthesize speech from text. Using Polly we can pass in a string and get audio returned with speech synthesization.\n\nTo add the service, run the following command:\n\n```sh\n$ amplify add predictions\n? Please select from one of the categories below: Convert\n? What would you like to convert? Generate speech audio from text\n? Provide a friendly name for your resource: \u003cyour_service_name\u003e\n? What is the source language? US English\n? Select a speaker: \u003cyour_speaker\u003e\n? Who should have access? Auth and Guest users\n```\n\nNext, update the React app with the following:\n\n```js\nimport React, { useState } from 'react'\n\nimport Amplify, { Predictions } from 'aws-amplify';\nimport { AmazonAIPredictionsProvider } from '@aws-amplify/predictions'\nAmplify.addPluggable(new AmazonAIPredictionsProvider())\n\nfunction TextToSpeech() {\n  const [response, setResponse] = useState(\"...\")\n  const [textToGenerateSpeech, setTextToGenerateSpeech] = useState(\"write to speech\");\n\n  function generateTextToSpeech() {\n    setResponse('Generating audio...');\n    Predictions.convert({\n      textToSpeech: {\n        source: {\n          text: textToGenerateSpeech,\n        },\n        voiceId: \"Amy\" // default configured on aws-exports.js \n        // list of different options are here https://docs.aws.amazon.com/polly/latest/dg/voicelist.html\n      }\n    }).then(result =\u003e {\n      let AudioContext = window.AudioContext || window.webkitAudioContext;\n      console.log({ AudioContext });\n      const audioCtx = new AudioContext(); \n      const source = audioCtx.createBufferSource();\n      audioCtx.decodeAudioData(result.audioStream, (buffer) =\u003e {\n        source.buffer = buffer;\n        source.connect(audioCtx.destination);\n        source.start(0);\n      }, (err) =\u003e console.log({err}));\n      \n      setResponse(`Generation completed, press play`);\n    })\n      .catch(err =\u003e setResponse(err))\n  }\n\n  function setText(event) {\n    setTextToGenerateSpeech(event.target.value);\n  }\n\n  return (\n    \u003cdiv className=\"Text\"\u003e\n      \u003cdiv style={{padding: 50}}\u003e\n        \u003ch3\u003eText To Speech\u003c/h3\u003e\n        \u003cinput value={textToGenerateSpeech} onChange={setText}\u003e\u003c/input\u003e\n        \u003cbutton onClick={generateTextToSpeech}\u003eText to Speech\u003c/button\u003e\n        \u003ch3\u003e{response}\u003c/h3\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default TextToSpeech\n```\n\n## Label Real world objects\n\nThe next example we will do is showing how to identify objects in a photo. In this example we will upload an image and get a response with information about the objects in the photo.\n\nTo add the service, run the following command\n\n```sh\n$ amplify add predictions\n? Please select from one of the categories below: Identify\n? What would you like to identify? Identify Labels\n? Provide a friendly name for your resource: \u003cyour_service_name\u003e\n? Would you like use the default configuration? Default Configuration\n? Who should have access? Auth and Guest Users\n```\n\nNext, update App.js with the following:\n\n```js\nimport React, { useState } from 'react'\n\nimport Amplify, { Predictions } from 'aws-amplify';\nimport { AmazonAIPredictionsProvider } from '@aws-amplify/predictions'\nAmplify.addPluggable(new AmazonAIPredictionsProvider())\n\nfunction LabelsIdentification() {\n  const [response, setResponse] = useState([])\n\n  function identifyFromFile(event) {\n    const { target: { files } } = event;\n    const [file,] = files || [];\n\n    if (!file) {\n      return;\n    }\n    Predictions.identify({\n      labels: {\n        source: {\n          file,\n        },\n        type: \"ALL\" // \"LABELS\" will detect objects , \"UNSAFE\" will detect if content is not safe, \"ALL\" will do both default on aws-exports.js\n      }\n    }).then(result =\u003e {\n      console.log('result: ', result)\n      const labels = result.labels.map(l =\u003e l.name)\n      console.log('labels: ', labels)\n      setResponse(labels)\n    })\n      .catch(err =\u003e setResponse(JSON.stringify(err, null, 2)))\n  }\n\n  return (\n    \u003cdiv className=\"Text\"\u003e\n      \u003cdiv style={{padding: 50}}\u003e\n        \u003ch3\u003eLabels identification\u003c/h3\u003e\n        \u003cinput type=\"file\" onChange={identifyFromFile}\u003e\u003c/input\u003e\n        {\n          response.map((r, i) =\u003e (\n          \u003ch3 key={i}\u003e{r}\u003c/h3\u003e\n          ))\n        }\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default LabelsIdentification\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdabit3%2Famplify-ml-ai-predictions-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdabit3%2Famplify-ml-ai-predictions-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdabit3%2Famplify-ml-ai-predictions-example/lists"}