├── src
    ├── react-app-env.d.ts
    ├── index.tsx
    ├── App.test.tsx
    ├── assets
    │   └── json
    │   │   ├── parts-of-speech.json
    │   │   └── languages.json
    ├── components
    │   └── select.tsx
    ├── index.scss
    └── App.tsx
├── public
    ├── robots.txt
    ├── AWS-Logo.png
    ├── favicon.ico
    ├── manifest.json
    └── index.html
├── CODE_OF_CONDUCT.md
├── amplify
    ├── .config
    │   └── project-config.json
    └── backend
    │   ├── backend-config.json
    │   └── predictions
    │       ├── mytranslator
    │           └── mytranslator-template.json
    │       └── myinterpreter
    │           └── myinterpreter-template.json
├── tsconfig.json
├── .gitignore
├── LICENSE
├── package.json
├── CONTRIBUTING.md
└── README.md


/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="react-scripts" />
2 | 


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/public/AWS-Logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aws-samples/aws-amplify-predictions-ai-ml-with-react/HEAD/public/AWS-Logo.png


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aws-samples/aws-amplify-predictions-ai-ml-with-react/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import './index.scss';
 4 | import App from './App';
 5 | 
 6 | ReactDOM.render(
 7 |   <App />,
 8 |   document.getElementById('root')
 9 | );
10 | 


--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
1 | ## Code of Conduct
2 | This project has adopted the [Amazon Open Source Code of Conduct](https://aws.github.io/code-of-conduct).
3 | For more information see the [Code of Conduct FAQ](https://aws.github.io/code-of-conduct-faq) or contact
4 | opensource-codeofconduct@amazon.com with any additional questions or comments.
5 | 


--------------------------------------------------------------------------------
/src/App.test.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { render } from '@testing-library/react';
 3 | import App from './App';
 4 | 
 5 | test('renders learn react link', () => {
 6 |   // TODO - Add Testing
 7 |   // const { getByText } = render(<App />);
 8 |   // const linkElement = getByText(/learn react/i);
 9 |   // expect(linkElement).toBeInTheDocument();
10 | });
11 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "Aws Amplify Predictions AI/ML",
 3 |   "name": "Language Translation And Syntax Tool Using AWS Amplify Predictions AI/ML With React",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     }
10 |   ],
11 |   "start_url": ".",
12 |   "display": "standalone",
13 |   "theme_color": "#000000",
14 |   "background_color": "#ffffff"
15 | }
16 | 


--------------------------------------------------------------------------------
/amplify/.config/project-config.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "projectName": "myApp",
 3 |     "version": "3.0",
 4 |     "frontend": "javascript",
 5 |     "javascript": {
 6 |         "framework": "react",
 7 |         "config": {
 8 |             "SourceDir": "src",
 9 |             "DistributionDir": "build",
10 |             "BuildCommand": "npm run-script build",
11 |             "StartCommand": "npm run-script start"
12 |         }
13 |     },
14 |     "providers": [
15 |         "awscloudformation"
16 |     ]
17 | }


--------------------------------------------------------------------------------
/src/assets/json/parts-of-speech.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "ADJ": "Adjective",    
 3 |     "ADP": "Preposition",	
 4 |     "ADV": "Adverb",
 5 |     "AUX": "Auxiliary Verb",
 6 |     "CCONJ": "Conjunction",
 7 |     "DET": "Article",
 8 |     "INTJ":	"Interjection",
 9 |     "NOUN": "Noun",
10 |     "NUM": "Number",
11 |     "O": "Other",
12 |     "PART": "Particle",	
13 |     "PRON":	"Pronoun",
14 |     "PROPN": "Proper Noun",
15 |     "PUNCT": "Punctuation",
16 |     "SCONJ": "Conjunction",
17 |     "SYM": "Symbol",
18 |     "VERB":	"Verb"
19 | }


--------------------------------------------------------------------------------
/amplify/backend/backend-config.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"auth": {
 3 | 		"myapp598e5f14": {
 4 | 			"service": "Cognito",
 5 | 			"providerPlugin": "awscloudformation",
 6 | 			"dependsOn": [],
 7 | 			"customAuth": false
 8 | 		}
 9 | 	},
10 | 	"predictions": {
11 | 		"myinterpreter": {
12 | 			"providerPlugin": "awscloudformation",
13 | 			"service": "Comprehend",
14 | 			"interpretType": "interpretText"
15 | 		},
16 | 		"mytranslator": {
17 | 			"providerPlugin": "awscloudformation",
18 | 			"service": "Translate",
19 | 			"convertType": "translateText"
20 | 		}
21 | 	}
22 | }


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": [
 5 |       "es6",
 6 |       "dom",
 7 |       "dom.iterable",
 8 |       "esnext"
 9 |     ],
10 |     "allowJs": true,
11 |     "skipLibCheck": true,
12 |     "esModuleInterop": true,
13 |     "allowSyntheticDefaultImports": true,
14 |     "strict": true,
15 |     "forceConsistentCasingInFileNames": true,
16 |     "module": "esnext",
17 |     "moduleResolution": "node",
18 |     "resolveJsonModule": true,
19 |     "isolatedModules": true,
20 |     "noEmit": true,
21 |     "jsx": "react"
22 |   },
23 |   "include": [
24 |     "src"
25 |   ]
26 | }
27 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Language Translation And Syntax Tool Using AWS Amplify Predictions AI/ML With React"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/AWS-logo.png" />
13 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
14 |     <title>AWS Amplify Predictions AI/ML</title>
15 |   </head>
16 |   <body>
17 |     <noscript>You need to enable JavaScript to run this app.</noscript>
18 |     <div id="root"></div>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | target/*
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | .vscode
25 | build/
26 | dist/
27 | node_modules/
28 | Config
29 | npmlist.json
30 | 
31 | parameters.json
32 | amplify/team-provider-info.json
33 | 
34 | #amplify
35 | amplify/\#current-cloud-backend
36 | amplify/.config/local-*
37 | amplify/mock-data
38 | amplify/backend/amplify-meta.json
39 | amplify/backend/awscloudformation
40 | build/
41 | dist/
42 | node_modules/
43 | aws-exports.js
44 | awsconfiguration.json
45 | amplifyconfiguration.json
46 | amplify-build-config.json
47 | amplify-gradle-config.json
48 | amplifytools.xcconfig


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 2 | 
 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of
 4 | this software and associated documentation files (the "Software"), to deal in
 5 | the Software without restriction, including without limitation the rights to
 6 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 7 | the Software, and to permit persons to whom the Software is furnished to do so.
 8 | 
 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
10 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
11 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
12 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
13 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
14 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
15 | 
16 | 


--------------------------------------------------------------------------------
/src/components/select.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Autocomplete } from '@material-ui/lab';
 3 | import { TextField } from '@material-ui/core';
 4 | import Languages from '../assets/json/languages.json';
 5 | const languageValues: any[] = Object.keys(Languages.languages);
 6 | 
 7 | export default function(props: any) {
 8 |     return (<Autocomplete
 9 |         className="language-box"
10 |         value={props.value}
11 |         options={languageValues}
12 |         inputValue={props.input}
13 |         onInputChange={props.onInputChange}
14 |         onChange={props.onChange}
15 |         autoComplete
16 |         autoHighlight
17 |         clearOnBlur
18 |         fullWidth
19 |         classes={{popper:'language-popper'}}
20 |         getOptionLabel={(option: keyof typeof Languages.languages) => Languages.languages[option] || ''}
21 |         renderInput={(params:any) => 
22 |         <TextField
23 |             {...params}
24 |             className="language-text"
25 |             placeholder={`Select a ${props.type} Language`}
26 |         />}
27 |     />)
28 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "aws-amplify-predictions-ai-ml-with-react",
 3 |   "description": "Language Translation and Syntax Tool Made With React Using AWS Amplify Predictions Library to Integrate Artificial Intelligence and Machine Learning",
 4 |   "version": "0.1.0",
 5 |   "private": true,
 6 |   "dependencies": {
 7 |     "@aws-amplify/predictions": "^3.2.7",
 8 |     "@material-ui/core": "^4.11.0",
 9 |     "@material-ui/icons": "^4.9.1",
10 |     "@material-ui/lab": "^4.0.0-alpha.56",
11 |     "@testing-library/jest-dom": "^4.2.4",
12 |     "@testing-library/react": "^9.5.0",
13 |     "@testing-library/user-event": "^7.2.1",
14 |     "@types/jest": "^26.0.15",
15 |     "@types/node": "^14.14.2",
16 |     "@types/react": "^16.9.53",
17 |     "@types/react-dom": "^16.9.8",
18 |     "aws-amplify": "^3.3.4",
19 |     "node-sass": "^7.0.0",
20 |     "npm-force-resolutions": "0.0.3",
21 |     "react": "^17.0.1",
22 |     "react-dom": "^17.0.1",
23 |     "react-scripts": "^4.0.3",
24 |     "typescript": "^4.0.3"
25 |   },
26 |   "scripts": {
27 |     "start": "react-scripts start",
28 |     "build": "react-scripts build",
29 |     "test": "react-scripts test",
30 |     "preinstall": "npx npm-force-resolutions"
31 |   },
32 |   "resolutions": {
33 |     "node-notifier": "8.0.1",
34 |     "axios": "0.21.1",
35 |     "immer": "8.0.1",
36 |     "is-svg": "4.2.2"
37 |   },
38 |   "eslintConfig": {
39 |     "extends": "react-app"
40 |   },
41 |   "browserslist": {
42 |     "production": [
43 |       ">0.2%",
44 |       "not dead",
45 |       "not op_mini all"
46 |     ],
47 |     "development": [
48 |       "last 1 chrome version",
49 |       "last 1 firefox version",
50 |       "last 1 safari version"
51 |     ]
52 |   }
53 | }
54 | 


--------------------------------------------------------------------------------
/src/assets/json/languages.json:
--------------------------------------------------------------------------------
 1 | { 
 2 |     "languages":
 3 |     {
 4 |         "": "None",
 5 |         "af": "Afrikaans",
 6 |         "sq": "Albanian",
 7 |         "am": "Amharic",
 8 |         "ar": "Arabic",
 9 |         "az": "Azerbaijani",
10 |         "bn": "Bengali",
11 |         "bs": "Bosnian",
12 |         "bg": "Bulgarian",
13 |         "zh": "Chinese-Simplified",
14 |         "zh-TW": "Chinese-Traditional",
15 |         "hr": "Croatian",
16 |         "cs": "Czech",
17 |         "da": "Danish",
18 |         "fa-AF": "Dari",
19 |         "nl": "Dutch",
20 |         "en": "English",
21 |         "et": "Estonian",
22 |         "fi": "Finnish",
23 |         "fr": "French",
24 |         "fr-CA": "French-Canada",
25 |         "ka": "Georgian",
26 |         "de": "German",
27 |         "el": "Greek",
28 |         "ha": "Hausa",
29 |         "he": "Hebrew",
30 |         "hi": "Hindi",
31 |         "hu": "Hungarian",
32 |         "id": "Indonesian",
33 |         "it": "Italian",
34 |         "ja": "Japanese",
35 |         "ko": "Korean",
36 |         "lv": "Latvian",
37 |         "ms": "Malay",
38 |         "no": "Norwegian",
39 |         "fa": "Persian",
40 |         "ps": "Pashto",
41 |         "pl": "Polish",
42 |         "pt": "Portuguese",
43 |         "ro": "Romanian",
44 |         "ru": "Russian",
45 |         "sr": "Serbian",
46 |         "sk": "Slovak",
47 |         "sl": "Slovenian",
48 |         "so": "Somali",
49 |         "es": "Spanish",
50 |         "es-MX": "Spanish-Mexico",
51 |         "sw": "Swahili",
52 |         "sv": "Swedish",
53 |         "tl": "Tagalog",
54 |         "ta": "Tamil",
55 |         "th": "Thai",
56 |         "tr": "Turkish",
57 |         "uk": "Ukrainian",
58 |         "ur": "Urdu",
59 |         "vi": "Vietnamese"
60 |     },
61 | 
62 |     "syntax": {
63 |         "de": "German",
64 |         "en": "English",
65 |         "es": "Spanish",
66 |         "it": "Italian",
67 |         "pt": "Portuguese",
68 |         "fr": "French",
69 |         "ja": "Japanese",
70 |         "ko": "Korean",
71 |         "hi": "Hindi",
72 |         "ar": "Arabic",
73 |         "zh": "Chinese-Simplified",
74 |         "zh-TW": "Chinese-Traditional"
75 |     }
76 | }


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # Contributing Guidelines
 2 | 
 3 | Thank you for your interest in contributing to our project. Whether it's a bug report, new feature, correction, or additional
 4 | documentation, we greatly value feedback and contributions from our community.
 5 | 
 6 | Please read through this document before submitting any issues or pull requests to ensure we have all the necessary
 7 | information to effectively respond to your bug report or contribution.
 8 | 
 9 | 
10 | ## Reporting Bugs/Feature Requests
11 | 
12 | We welcome you to use the GitHub issue tracker to report bugs or suggest features.
13 | 
14 | When filing an issue, please check existing open, or recently closed, issues to make sure somebody else hasn't already
15 | reported the issue. Please try to include as much information as you can. Details like these are incredibly useful:
16 | 
17 | * A reproducible test case or series of steps
18 | * The version of our code being used
19 | * Any modifications you've made relevant to the bug
20 | * Anything unusual about your environment or deployment
21 | 
22 | 
23 | ## Contributing via Pull Requests
24 | Contributions via pull requests are much appreciated. Before sending us a pull request, please ensure that:
25 | 
26 | 1. You are working against the latest source on the *master* branch.
27 | 2. You check existing open, and recently merged, pull requests to make sure someone else hasn't addressed the problem already.
28 | 3. You open an issue to discuss any significant work - we would hate for your time to be wasted.
29 | 
30 | To send us a pull request, please:
31 | 
32 | 1. Fork the repository.
33 | 2. Modify the source; please focus on the specific change you are contributing. If you also reformat all the code, it will be hard for us to focus on your change.
34 | 3. Ensure local tests pass.
35 | 4. Commit to your fork using clear commit messages.
36 | 5. Send us a pull request, answering any default questions in the pull request interface.
37 | 6. Pay attention to any automated CI failures reported in the pull request, and stay involved in the conversation.
38 | 
39 | GitHub provides additional document on [forking a repository](https://help.github.com/articles/fork-a-repo/) and
40 | [creating a pull request](https://help.github.com/articles/creating-a-pull-request/).
41 | 
42 | 
43 | ## Finding contributions to work on
44 | Looking at the existing issues is a great way to find something to contribute on. As our projects, by default, use the default GitHub issue labels (enhancement/bug/duplicate/help wanted/invalid/question/wontfix), looking at any 'help wanted' issues is a great place to start.
45 | 
46 | 
47 | ## Code of Conduct
48 | This project has adopted the [Amazon Open Source Code of Conduct](https://aws.github.io/code-of-conduct).
49 | For more information see the [Code of Conduct FAQ](https://aws.github.io/code-of-conduct-faq) or contact
50 | opensource-codeofconduct@amazon.com with any additional questions or comments.
51 | 
52 | 
53 | ## Security issue notifications
54 | If you discover a potential security issue in this project we ask that you notify AWS/Amazon Security via our [vulnerability reporting page](http://aws.amazon.com/security/vulnerability-reporting/). Please do **not** create a public github issue.
55 | 
56 | 
57 | ## Licensing
58 | 
59 | See the [LICENSE](LICENSE) file for our project's licensing. We will ask you to confirm the licensing of your contribution.
60 | 


--------------------------------------------------------------------------------
/src/index.scss:
--------------------------------------------------------------------------------
  1 | body {
  2 |   margin: 0;
  3 |   overflow:hidden;
  4 |   font-family: 'Roboto', 'Segoe UI', 'Oxygen',
  5 |     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
  6 |     sans-serif;
  7 |   -webkit-font-smoothing: antialiased;
  8 |   -moz-osx-font-smoothing: grayscale;
  9 | 
 10 |   .App {
 11 |     text-align: center;
 12 |     background-color: #282c34;
 13 |     min-height: 100vh;
 14 |     display:flex;
 15 |     flex-direction:column;
 16 |     justify-content:flex-start;
 17 |     align-items:center;
 18 |     padding-top:10px;
 19 |     .input-container {
 20 |       color:#fff;
 21 |       width:100%;
 22 |       display:flex;
 23 |       justify-content:center;
 24 |       align-items:center;
 25 |       padding:2%;
 26 |       .text-container {
 27 |         margin:0 2%;
 28 |         padding:0;
 29 |         width:100%;
 30 |         display:flex;
 31 |         flex-direction:column;
 32 |         align-items:center;
 33 |         .text-wrapper {
 34 |           height:113px;
 35 |           width:100%;
 36 |         }
 37 |       }
 38 |       .result-container {
 39 |         margin:0 2%;
 40 |         padding:0;
 41 |         width:100%;
 42 |         display:flex;
 43 |         flex-direction:column;
 44 |         align-items:center;
 45 |         .result-box {
 46 |           margin:0;
 47 |           padding:0;
 48 |           height:113px;
 49 |           position:relative;
 50 |           width:100%;
 51 |           .words {
 52 |             display:flex;
 53 |             position:absolute;
 54 |             z-index:1;
 55 |             color:rgba(0,0,0,0.87);
 56 |             padding: 18.5px 14px;
 57 |             .word-container {
 58 |               display:flex;
 59 |               margin-right:4px;
 60 |               span {
 61 |                 cursor: pointer;
 62 |                 &:hover {
 63 |                   color: maroon;
 64 |                   font-weight:700;
 65 |                   position:relative;
 66 |                   top:-1px;
 67 |                 }
 68 |               }
 69 |             }
 70 |           }
 71 |         }
 72 |           .text-box {
 73 |             margin:0;
 74 |             position:absolute;
 75 |             top:0;
 76 |             bottom:0;
 77 |             left:0;
 78 |             right:0;
 79 |             height:113px;
 80 |             width:100%;
 81 |           }
 82 |         }
 83 |       .text-box {
 84 |         margin:0;
 85 |         .MuiInputBase-root{
 86 |           background-color:#fff;
 87 |         }
 88 |         .MuiFormHelperText-root {
 89 |           color:#fff;
 90 |         }
 91 |       }
 92 |     }
 93 |   }
 94 | 
 95 |   .MuiAutocomplete-root {
 96 |     background-color:#fff;
 97 |     margin-top:25px;
 98 |     width:250px;
 99 |     padding:5px 10px 0 10px;
100 |     border-radius:8px;
101 |   }
102 |   .MuiInput-underline {
103 |     &:before {
104 |         border-bottom:0;
105 |     }
106 |     &:after {
107 |         border-bottom:0;
108 |     }
109 |     &:hover:not(.Mui-disabled) {
110 |         &:before {
111 |             border-bottom:0;
112 |         }
113 |     }
114 |   }
115 | 
116 |   .sentiment {
117 |     .MuiSvgIcon-root {
118 |       color: #282c34;
119 |       background-color: #FCF787;
120 |       border-radius:50%;
121 |       font-size:200px;
122 |     }
123 |   }
124 | }
125 | 
126 | .submit {
127 |   margin-top:25px;
128 |   width:200px;
129 | }
130 | 
131 | .invisible {
132 |   opacity:0;
133 | }
134 | code {
135 |   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
136 |     monospace;
137 | }
138 | 
139 | .MuiTooltip-tooltip {
140 |   color: #282c34!important;
141 |   background-color: #FCF787!important;
142 |   position:relative;
143 |   top:10px;
144 | }
145 | .MuiTooltip-arrow {
146 |   color: #FCF787!important;
147 | }
148 | 
149 | .language-popper {
150 |   .MuiAutocomplete-paper {
151 |     width:220px;
152 |     position:relative;
153 |     left:-10px;
154 |   }
155 | }


--------------------------------------------------------------------------------
/amplify/backend/predictions/mytranslator/mytranslator-template.json:
--------------------------------------------------------------------------------
  1 | {
  2 |     "AWSTemplateFormatVersion": "2010-09-09",
  3 |     "Description": "Convert resource(s) stack creation using Amplify CLI",
  4 |     "Parameters": {
  5 |         "authRoleName": {
  6 |             "Type": "String"
  7 |         },
  8 |         "unauthRoleName": {
  9 |             "Type": "String"
 10 |         },
 11 |         "convertPolicyName": {
 12 |             "Type": "String"
 13 |         },
 14 |         "convertType": {
 15 |             "Type": "String"
 16 |         },
 17 |         "access": {
 18 |             "Type": "String"
 19 |         },
 20 |         "resourceName": {
 21 |             "Type": "String"
 22 |         },
 23 |         "sourceLang": {
 24 |             "Type": "String"
 25 |         },
 26 |         "targetLang": {
 27 |             "Type": "String"
 28 |         },
 29 |         "env": {
 30 |             "Type": "String"
 31 |         }
 32 |     },
 33 |     "Conditions": {
 34 |         "AuthGuestRoleAccess": {
 35 |             "Fn::Equals": [
 36 |                 {
 37 |                     "Ref": "access"
 38 |                 },
 39 |                 "authAndGuest"
 40 |             ]
 41 |         }
 42 |     },
 43 |     "Outputs": {
 44 |         "region": {
 45 |             "Value": {
 46 |                 "Fn::FindInMap": [
 47 |                     "RegionMapping",
 48 |                     {
 49 |                         "Ref": "AWS::Region"
 50 |                     },
 51 |                     {
 52 |                         "Ref": "convertType"
 53 |                     }
 54 |                 ]
 55 |             }
 56 |         },
 57 |         "sourceLang": {
 58 |             "Value": {
 59 |                 "Ref": "sourceLang"
 60 |             }
 61 |         },
 62 |         "targetLang": {
 63 |             "Value": {
 64 |                 "Ref": "targetLang"
 65 |             }
 66 |         }
 67 |     },
 68 |     "Resources": {
 69 |         "TranslatePolicy": {
 70 |             "Type": "AWS::IAM::Policy",
 71 |             "Properties": {
 72 |                 "PolicyName": {
 73 |                     "Ref": "convertPolicyName"
 74 |                 },
 75 |                 "Roles": {
 76 |                     "Fn::If": [
 77 |                         "AuthGuestRoleAccess",
 78 |                         [
 79 |                             {
 80 |                                 "Ref": "authRoleName"
 81 |                             },
 82 |                             {
 83 |                                 "Ref": "unauthRoleName"
 84 |                             }
 85 |                         ],
 86 |                         [
 87 |                             {
 88 |                                 "Ref": "authRoleName"
 89 |                             }
 90 |                         ]
 91 |                     ]
 92 |                 },
 93 |                 "PolicyDocument": {
 94 |                     "Version": "2012-10-17",
 95 |                     "Statement": [
 96 |                         {
 97 |                             "Effect": "Allow",
 98 |                             "Action": [
 99 |                                 "translate:TranslateText"
100 |                             ],
101 |                             "Resource": "*"
102 |                         }
103 |                     ]
104 |                 }
105 |             }
106 |         }
107 |     },
108 |     "Mappings": {
109 |         "RegionMapping": {
110 |             "us-east-1": {
111 |                 "translateText": "us-east-1"
112 |             },
113 |             "us-east-2": {
114 |                 "translateText": "us-east-1"
115 |             },
116 |             "us-west-2": {
117 |                 "translateText": "us-west-2"
118 |             },
119 |             "eu-west-1": {
120 |                 "translateText": "eu-west-1"
121 |             },
122 |             "eu-west-2": {
123 |                 "translateText": "eu-west-1"
124 |             },
125 |             "eu-central-1": {
126 |                 "translateText": "eu-central-1"
127 |             },
128 |             "ap-northeast-1": {
129 |                 "translateText": "ap-northeast-1"
130 |             },
131 |             "ap-northeast-2": {
132 |                 "translateText": "ap-northeast-2"
133 |             },
134 |             "ap-southeast-1": {
135 |                 "translateText": "ap-southeast-1"
136 |             },
137 |             "ap-southeast-2": {
138 |                 "translateText": "ap-southeast-1"
139 |             },
140 |             "ap-south-1": {
141 |                 "translateText": "ap-south-1"
142 |             }
143 |         }
144 |     }
145 | }


--------------------------------------------------------------------------------
/amplify/backend/predictions/myinterpreter/myinterpreter-template.json:
--------------------------------------------------------------------------------
  1 | {
  2 |     "AWSTemplateFormatVersion": "2010-09-09",
  3 |     "Description": "Interpret resource(s) stack creation using Amplify CLI",
  4 |     "Parameters": {
  5 |         "authRoleName": {
  6 |             "Type": "String"
  7 |         },
  8 |         "unauthRoleName": {
  9 |             "Type": "String"
 10 |         },
 11 |         "interpretPolicyName": {
 12 |             "Type": "String"
 13 |         },
 14 |         "resourceName": {
 15 |             "Type": "String"
 16 |         },
 17 |         "access": {
 18 |             "Type": "String"
 19 |         },
 20 |         "type": {
 21 |             "Type": "String"
 22 |         },
 23 |         "interpretType": {
 24 |             "Type": "String"
 25 |         },
 26 |         "env": {
 27 |             "Type": "String"
 28 |         }
 29 |     },
 30 |     "Conditions": {
 31 |         "AuthGuestRoleAccess": {
 32 |             "Fn::Equals": [
 33 |                 {
 34 |                     "Ref": "access"
 35 |                 },
 36 |                 "authAndGuest"
 37 |             ]
 38 |         }
 39 |     },
 40 |     "Outputs": {
 41 |         "region": {
 42 |             "Value": {
 43 |                 "Fn::FindInMap": [
 44 |                     "RegionMapping",
 45 |                     {
 46 |                         "Ref": "AWS::Region"
 47 |                     },
 48 |                     {
 49 |                         "Ref": "interpretType"
 50 |                     }
 51 |                 ]
 52 |             }
 53 |         },
 54 |         "type": {
 55 |             "Value": {
 56 |                 "Ref": "type"
 57 |             }
 58 |         }
 59 |     },
 60 |     "Resources": {
 61 |         "InterpretPolicy": {
 62 |             "Type": "AWS::IAM::Policy",
 63 |             "Properties": {
 64 |                 "PolicyName": {
 65 |                     "Ref": "interpretPolicyName"
 66 |                 },
 67 |                 "Roles": {
 68 |                     "Fn::If": [
 69 |                         "AuthGuestRoleAccess",
 70 |                         [
 71 |                             {
 72 |                                 "Ref": "authRoleName"
 73 |                             },
 74 |                             {
 75 |                                 "Ref": "unauthRoleName"
 76 |                             }
 77 |                         ],
 78 |                         [
 79 |                             {
 80 |                                 "Ref": "authRoleName"
 81 |                             }
 82 |                         ]
 83 |                     ]
 84 |                 },
 85 |                 "PolicyDocument": {
 86 |                     "Version": "2012-10-17",
 87 |                     "Statement": [
 88 |                         {
 89 |                             "Effect": "Allow",
 90 |                             "Action": [
 91 |                                 "comprehend:DetectSentiment",
 92 |                                 "comprehend:DetectEntities",
 93 |                                 "comprehend:DetectDominantLanguage",
 94 |                                 "comprehend:DetectSyntax",
 95 |                                 "comprehend:DetectKeyPhrases"
 96 |                             ],
 97 |                             "Resource": "*"
 98 |                         }
 99 |                     ]
100 |                 }
101 |             }
102 |         }
103 |     },
104 |     "Mappings": {
105 |         "RegionMapping": {
106 |             "us-east-1": {
107 |                 "interpretText": "us-east-1"
108 |             },
109 |             "us-east-2": {
110 |                 "interpretText": "us-east-2"
111 |             },
112 |             "us-west-2": {
113 |                 "interpretText": "us-west-2"
114 |             },
115 |             "eu-west-1": {
116 |                 "interpretText": "eu-west-1"
117 |             },
118 |             "eu-west-2": {
119 |                 "interpretText": "eu-west-2"
120 |             },
121 |             "eu-central-1": {
122 |                 "interpretText": "eu-central-1"
123 |             },
124 |             "ap-northeast-1": {
125 |                 "interpretText": "us-east-1"
126 |             },
127 |             "ap-northeast-2": {
128 |                 "interpretText": "us-east-1"
129 |             },
130 |             "ap-southeast-1": {
131 |                 "interpretText": "ap-southeast-1"
132 |             },
133 |             "ap-southeast-2": {
134 |                 "interpretText": "ap-southeast-2"
135 |             },
136 |             "ap-south-1": {
137 |                 "interpretText": "us-east-1"
138 |             }
139 |         }
140 |     }
141 | }


--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
  1 | import Amplify, { Predictions } from 'aws-amplify';
  2 | import { AmazonAIPredictionsProvider } from '@aws-amplify/predictions';
  3 | import awsconfig from './aws-exports';
  4 | import React, { useState } from 'react';
  5 | import { TextField, Button, Tooltip } from '@material-ui/core';
  6 | import Autocomplete from './components/select';
  7 | import AccountCircleIcon from '@material-ui/icons/AccountCircleTwoTone';
  8 | import Negative from '@material-ui/icons/SentimentDissatisfiedTwoTone';
  9 | import Positive from '@material-ui/icons/SentimentSatisfiedAltTwoTone';
 10 | import Neutral from '@material-ui/icons/FaceTwoTone';
 11 | 
 12 | import PartsOfSpeech from './assets/json/parts-of-speech.json';
 13 | import Languages from './assets/json/languages.json';
 14 | 
 15 | Amplify.configure(awsconfig);
 16 | Amplify.addPluggable(new AmazonAIPredictionsProvider());
 17 | 
 18 | let initialLanguage = navigator.languages
 19 | ? navigator.languages
 20 | : (navigator.language || (navigator as any).userLanguage);
 21 | 
 22 | if (!Array.isArray(initialLanguage)) initialLanguage = [initialLanguage];
 23 | initialLanguage = initialLanguage.find((lang: any) => Languages.languages.hasOwnProperty(lang));
 24 | if (!initialLanguage) initialLanguage = '';
 25 | 
 26 | function App() {
 27 |   const [words, getWords] = useState([]);
 28 |   const [text,getText] = useState('');
 29 |   const [mood,getMood] = useState('');
 30 | 
 31 |   const [targetInput,getTargetInput] = useState('');
 32 |   const [targetValue, getTargetValue] = useState('');
 33 | 
 34 |   const [sourceInput,getSourceInput] = useState('');
 35 |   const [sourceValue, getSourceValue] = useState(initialLanguage);
 36 | 
 37 |   function parseText() {
 38 |     return words.map((word: {text:string, syntax?:keyof typeof PartsOfSpeech}, ind:number) => {
 39 |       if (!word.syntax) {
 40 |         return (<div key={ind} className="word-container">
 41 |         <span>{word.text}</span> 
 42 |       </div>)
 43 |       } else {
 44 |         const pos: string = PartsOfSpeech[word.syntax];
 45 | 
 46 |         return (<Tooltip 
 47 |           key={ind} 
 48 |           title={pos}
 49 |           placement="top"
 50 |           interactive
 51 |           arrow
 52 |         >
 53 |           <div className="word-container">
 54 |             <span>{word.text}</span> 
 55 |           </div>
 56 |         </Tooltip>)
 57 |       }
 58 |     });
 59 |   }
 60 | 
 61 |   function parseInterpretation(interpretation:any) {
 62 |     if (typeof interpretation !== 'object' || !interpretation) return;
 63 |     const {sentiment, language, syntax} = interpretation;
 64 |     if (!targetValue) {
 65 |       getTargetValue(language);
 66 |     }
 67 |     const newMood = sentiment.predominant;
 68 |     getMood(newMood);
 69 |     getWords(syntax);
 70 |   }
 71 | 
 72 |   function translate(inputText: string, cb = (_:any)=>_) {
 73 |     if (!targetValue) return;
 74 |     Predictions.convert({
 75 |       translateText: {
 76 |         source: {
 77 |           text: inputText,
 78 |           language: sourceValue
 79 |         },
 80 |         targetLanguage: targetValue
 81 |       }
 82 |     }).then(result => {
 83 |       cb(result.text);
 84 |       console.log(result.text);
 85 |     })
 86 |       .catch(err => { throw err })
 87 |   }
 88 | 
 89 |   function interpret(inputText: string, cb = (_:any)=>_) {
 90 |     const txt: any = {
 91 |       text: {
 92 |         source: {
 93 |           text: inputText,
 94 |         },
 95 |         type: 'ALL'
 96 |       }
 97 |     }
 98 | 
 99 |     Predictions.interpret(txt).then(result => {
100 |       const { textInterpretation } = result;
101 |       cb(textInterpretation);
102 |       console.log(textInterpretation);
103 |     })
104 |       .catch(err => { throw err })
105 |   }
106 | 
107 |   function reset() {
108 |     getWords([]);
109 |     getMood('none');
110 |     getTargetValue('');
111 |     getTargetInput('');
112 |   }
113 | 
114 |   function displayMood() {
115 |     let res;
116 |     switch(mood.toUpperCase()) {
117 |       case 'POSITIVE': res = <Positive fontSize="large"/>;
118 |       break;
119 |       case 'NEGATIVE': res = <Negative fontSize="large"/>;
120 |       break;
121 |       case 'MIXED':
122 |       case 'NEUTRAL': res = <Neutral fontSize="large"/>;
123 |       break;
124 |       default: res =  <AccountCircleIcon fontSize="large"/>;
125 |       break;
126 |     }
127 |     return res;
128 |   }
129 | 
130 | 
131 |   function setText(e: any) {
132 |     getText(e.target.value);
133 |   }
134 | 
135 |   function onChange(e: any, val: any) {
136 |     getTargetValue(val);
137 |   }
138 | 
139 |   function onInputChange(e: any, val: any) {
140 |     getTargetInput(val);
141 |   }
142 | 
143 |   function sourceChange(e: any, val: any) {
144 |     getSourceValue(val);
145 |   }
146 | 
147 |   function sourceInputChange(e: any, val: any) {
148 |     getSourceInput(val);
149 |   }
150 | 
151 | 
152 |   function onSubmit() {
153 |     if (targetValue) {
154 |         translate(text, (res:string) => {
155 |           const syn = Object.keys(Languages.syntax);
156 |           if ((syn.includes(targetValue))) {
157 |             interpret(res, parseInterpretation);
158 |           } else {
159 |             const word = [{
160 |               text: res
161 |             }]
162 |             getWords((word as any));
163 |           }
164 |         });
165 |     } else {
166 |       interpret(text, parseInterpretation)
167 |     }
168 |   }
169 | 
170 |   function checkForEnter(e: any) {
171 |     if (!text.length) reset();
172 |     if (e.key === 'Enter' && text.length) {
173 |       onSubmit();
174 |     }
175 |   }
176 | 
177 |   return (
178 |     <div className="App">
179 |       <div className="sentiment">
180 |         {displayMood()}
181 |       </div>
182 |       <div className="input-container">  
183 |         <div className="text-container">
184 |           <div className="text-wrapper">
185 |             <TextField
186 |                 id="text-box"
187 |                 className="text-box"
188 |                 placeholder="Input Text Here"
189 |                 margin="normal"
190 |                 variant="outlined"
191 |                 value={text}
192 |                 onChange={setText}
193 |                 onKeyUp={checkForEnter}
194 |                 rows={4}
195 |                 multiline
196 |                 fullWidth
197 |                 autoFocus
198 |               />
199 |           </div>
200 |           <Autocomplete
201 |             value={sourceValue as keyof typeof Languages}
202 |             inputValue={sourceInput}
203 |             onInputChange={sourceInputChange}
204 |             onChange={sourceChange}
205 |             type="Source"
206 |           />
207 |         </div>
208 |         <div className="result-container">    
209 |           <div className="result-box">
210 |             <div className="words">{parseText()}</div>    
211 |             <TextField
212 |                 id="result-box"
213 |                 className="text-box"
214 |                 placeholder="Results Will Show Here"
215 |                 value={words.length ? ' ' : ''}
216 |                 margin="normal"
217 |                 variant="outlined"
218 |                 rows={4}
219 |                 multiline
220 |                 fullWidth
221 |                 inputProps={{readOnly:true}}
222 |             />
223 |           </div>
224 |           <Autocomplete
225 |             value={targetValue as keyof typeof Languages.languages}
226 |             inputValue={targetInput}
227 |             onInputChange={onInputChange}
228 |             onChange={onChange}
229 |             type="Target"
230 |           />
231 |         </div>
232 |       </div>
233 |       <Button 
234 |           className="submit"
235 |           variant="contained" 
236 |           color="primary"
237 |           onClick={onSubmit}>
238 |           Interpret
239 |       </Button>
240 |     </div>
241 |   );
242 | }
243 | 
244 | export default App;
245 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # AWS Amplify Predictions Library Sample 
  2 | 
  3 | ***Language Translation and Syntax Tool Made With React Using AWS Amplify Predictions Library to Integrate Artificial Intelligence and Machine Learning***  
  4 | 
  5 | 
  6 | 1. [Install CLI](#cli)
  7 | 2. [Initialize App](#init)
  8 | 3. [Auth](#auth)
  9 | 4. [Predictions Library](#predictions)  
 10 |   • [Syntax](#syntax)  
 11 |   • [Translation](#translation)
 12 | 5. [Hosting](#hosting)
 13 | 6. [Sample App](#app)
 14 | 7. [Security](#security)
 15 | 8. [License](#license)
 16 | 
 17 | 
 18 | <a name="cli"></a>
 19 | 
 20 | ### Install Amplify CLI
 21 | ```
 22 | npm install -g @aws-amplify/cli
 23 | ```
 24 | 
 25 | <a name="init"></a>
 26 | 
 27 | ### Initialize Amplify App
 28 | ```
 29 | amplify init
 30 | ```
 31 | Fill out the form with the appropriate info for your app:
 32 | ```
 33 | ? Enter a name for the project (myApp)  
 34 | 
 35 | ? Enter a name for the environment (dev)   
 36 | 
 37 | ? Choose your default editor: (Use arrow keys)
 38 | ❯ Visual Studio Code 
 39 |   Atom Editor 
 40 |   Sublime Text 
 41 |   IntelliJ IDEA 
 42 |   Vim (via Terminal, Mac OS only) 
 43 |   Emacs (via Terminal, Mac OS only) 
 44 |   None  
 45 | 
 46 | ? Choose the type of app that you\'re building (Use arrow keys)
 47 |   android 
 48 |   ios 
 49 | ❯ javascript  
 50 | 
 51 | ? What javascript framework are you using (Use arrow keys)
 52 |   angular 
 53 |   ember 
 54 |   ionic 
 55 | ❯ react 
 56 |   react-native 
 57 |   vue 
 58 |   none  
 59 | 
 60 | ? Source Directory Path:  (src) 
 61 | 
 62 | ? Distribution Directory Path: (build) 
 63 | 
 64 | ? Build Command:  (npm run-script build) 
 65 | 
 66 | ? Start Command: (npm run-script start) 
 67 | Using default provider  awscloudformation
 68 | 
 69 | ? Do you want to use an AWS profile? (Y/n) 
 70 | ```
 71 | After choosing how you want to authenticate with AWS, Amplify will create all the necessary resources to store your app in the cloud.  
 72 | *Note: See the `#amplify` section of `.gitignore` to see the paths to files with credential info that you can expect to see in the amplify directory but aren't present in this repo.*   Now it's time to add our services. For a full list of services you can add see the [Amplify docs](https://docs.amplify.aws/), but for our purposes we're just going to add a few.
 73 | 
 74 | <a name="auth"></a>
 75 | 
 76 | ## Add Auth
 77 | ```
 78 | amplify add auth
 79 | 
 80 | ❯ Default configuration 
 81 |   Default configuration with Social Provider (Federation) 
 82 |   Manual configuration 
 83 |   I want to learn more. 
 84 | 
 85 |  Warning: you will not be able to edit these selections. 
 86 |  How do you want users to be able to sign in? (Use arrow keys)
 87 | ❯ Username 
 88 |   Email 
 89 |   Phone Number 
 90 |   Email or Phone Number 
 91 |   I want to learn more. 
 92 | 
 93 |  Do you want to configure advanced settings? (Use arrow keys)
 94 | ❯ No, I am done. 
 95 |   Yes, I want to make some additional changes. 
 96 | ```
 97 | 
 98 | <a name="predictions"></a>
 99 | 
100 | ## Add AI/ML Predictions
101 | 
102 | <a name="syntax"></a>
103 | 
104 | ### Syntax
105 | ```
106 | amplify add predictions 
107 | 
108 | ? Please select from one of the categories below 
109 |   Identify #Identify text, labels, or entities (like celebrities) embedded within an image
110 |   Convert #Convert from one language to another, convert text to speech, or convert speech to text
111 | ❯ Interpret #Interpret Text for Meaning, Sentiment, Idioms, Syntax, etc.
112 |   Infer #Add Custom Models Using Sagemaker Endpoint 
113 |   Learn More 
114 | 
115 | ? What would you like to interpret? (Use arrow keys)
116 | ❯ Interpret Text 
117 | 
118 | # names must be alphanumeric
119 | ? Provide a friendly name for your resource (myinterpreter)
120 | 
121 | ? What kind of interpretation would you like? 
122 |   Language 
123 |   Entity 
124 |   Keyphrase 
125 |   Sentiment 
126 |   Syntax 
127 | ❯ All 
128 | 
129 | ? Who should have access? (Use arrow keys)
130 |   Auth users only 
131 | ❯ Auth and Guest users 
132 | ```
133 | <a name="translation"></a>
134 | 
135 | ### Translation
136 | Now let's go back and add in our translate library
137 | 
138 | ```
139 | amplify add predictions
140 | 
141 | ? Please select from one of the categories below 
142 |   Identify 
143 | ❯ Convert 
144 |   Interpret 
145 |   Infer 
146 |   Learn More 
147 | 
148 | ? What would you like to convert? (Use arrow keys)
149 | ❯ Translate text into a different language 
150 |   Generate speech audio from text 
151 |   Transcribe text from audio 
152 | 
153 | ? Provide a friendly name for your resource (mytranslator)
154 | 
155 | # For source and target language you're just choosing defaults, these can be overridden
156 | ? What is the source language? 
157 |   Czech 
158 |   Danish 
159 |   Dutch 
160 | ❯ English 
161 |   Finnish 
162 |   French 
163 |   German 
164 | (Move up and down to reveal more choices)
165 | 
166 | ? What is the target language? 
167 |   Portuguese 
168 |   Romanian 
169 |   Russian 
170 | ❯ Spanish 
171 |   Swedish 
172 |   Thai 
173 |   Turkish 
174 | (Move up and down to reveal more choices)
175 | 
176 | ? Who should have access? (Use arrow keys)
177 |   Auth users only 
178 | ❯ Auth and Guest users 
179 | ```
180 | Once your app is initialized, you can push updates to amplify services using the `amplify push` command.
181 | 
182 | *Note: `amplify push` will only update changes to amplify services, to update app code use `amplify publish` or Automatic Git deployments.*
183 | 
184 | ```bash
185 | amplify push
186 | ✔ Successfully pulled backend environment dev from the cloud.
187 | 
188 | Current Environment: dev
189 | 
190 | | Category    | Resource name             | Operation | Provider plugin   |
191 | | ----------- | ------------------------- | --------- | ----------------- |
192 | | Auth        | myApp                     | Create    | awscloudformation |
193 | | Predictions | myinterpreter             | Create    | awscloudformation |
194 | | Predictions | mytranslator              | Create    | awscloudformation |
195 | ? Are you sure you want to continue? Yes
196 | ```
197 | 
198 | Now the services are ready for use, but before we can access our app on the web, we have to add hosting.  
199 | 
200 | <a name="hosting"></a>
201 | 
202 | ## Add Hosting
203 | ```
204 | amplify add hosting
205 | 
206 | ? Select the plugin module to execute (Use arrow keys)
207 | ❯ Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment) 
208 |   Amazon CloudFront and S3 
209 | 
210 | ? Choose a type (Use arrow keys)
211 |   Continuous deployment (Git-based deployments) 
212 | ❯ Manual deployment 
213 |   Learn more
214 | 
215 | You can now publish your app using the following command:
216 | 
217 | Command: amplify publish
218 | ```
219 | 
220 | *Note: Make sure you add all amplify files that have sensitive info in them to your gitignore before pushing to a public repo. To ensure security you can add the entire `amplify` directory to gitignore and then use `amplify pull` to get the necessary backend files before updating.*
221 | 
222 | Once you get the confirmation that hosting was added, you can publish to the web using `amplify publish`. Once the app is deployed you'll be shown the randomly assigned URL where you can find your app and confirm that the entire process worked.  
223 | You can find instructions on how to use a custom domain with your app [here](https://docs.aws.amazon.com/amplify/latest/userguide/custom-domains.html).  
224 | 
225 | <a name="app"></a>
226 | 
227 | ## Sample App - Language Translation and Syntax
228 | *Note: The *Amplify* directory in this repo is for reference only and is missing some necessary files for security purposes. To run sample app remove current *amplify* directory and recreate it with the above tutorial*
229 | 
230 | Run app locally using `npm start` then navigating in browser to `localhost:3000`
231 | 
232 | Input text into the box on the left in the app and the AI will assess it for the following properties:
233 | 
234 | - ***Translation*** - If you choose a target language the text will be translated into that language in the results box. If the language is supported by Amazon Comprehend, it will move on to interpret the text for:
235 | 
236 | - ***Sentiment*** - If the text in the box is positive, the icon at the top will become a smiling face, if it's negative it will become a frowning face, and if it's neither it will become a neutral face.
237 | 
238 | - ***Syntax*** - Hover over a word in the result box to see what part of speech it is in the context of the text as a whole.
239 | 
240 | <a name="security"></a>
241 | 
242 | ## Security
243 | 
244 | See [CONTRIBUTING](CONTRIBUTING.md#security-issue-notifications) for more information.
245 | 
246 | <a name="license"></a>
247 | 
248 | ## License
249 | 
250 | This library is licensed under the MIT-0 License. See the [LICENSE](LICENSE) file.


--------------------------------------------------------------------------------