This is a sample project that demonstrates using Amazon Translate with Amazon Connect chat to perform real-time translation on chat messages, allowing a user to support dozens of languages. The web app supports multi-chat allow an Amazon COnnect Chat user to support multiple languages concurrently. Deployment is using the Amplify UI (No CLI access required) and is using serverless architecture. Deployment takes about 10 minutes.
Read the Amazon blog: https://www.amazon.com/livechattranslate
Demo
Architecture
- Existing Amazon Connect Instance (Create an instance in 3 easy steps)
- Github account (Create a free GitHub account)
Click the below button
- Connect to Github
- Click on 'Create new role' then
Next: Permissions>Next: Tags>Next: ReviewfinallyCreate role
Expand Environment variables and add the below 2
REACT_APP_CONNECT_REGION=AWS Region(Exampleeu-west-2)REACT_APP_CONNECT_INSTANCE_URL=Amazon Connect URL(Examplehttps://<<INSTANCE_NAME>>.awsapps.comorhttps://<<INSTANCE_NAME>>.my.connect.aws)
[Important, if you copy and paste, ensure there are no trailing whitespaces in the above 2 variable keys, or values. This will cause the web app to not load CCP and a rebuild will be required]
Once the app is ready, about 8 mins, you then need to update the allow list within the Amazon Connect Console to allow the WebApp to host CCP as an iFrame.
- Navigate to the Amazon Connect console (AWS), and select on your Amazon Connect instance name
- Goto
Approved originsthen+ Add origin - Enter the URL that Amplify generated for you, then click
Add(Example URLhttps://main.d13aaabbbccc.amplifyapp.com, if necessary remove the trailing '/')
Testing
- Login to the amplify web app, create an account, then login to Connect
- Start a customer chat (Goto
https://<yourConnectInstanceURL>/connect/test-chat) - Connect through to your agent that's running the new WebApp
- As the customer type some text in French and you'll see the agent translate app show 'Translate - (fr) French'
- As the agent type in English into the translate textbox and press enter. This will be converted to french and sent back to the customer as french
- Custom Terminologies is supported by the web app, and a file is created upon installation which can be updated by following the steps below:
- Update the provided Custom Terminologies files
- Go to https://console.aws.amazon.com/translate/home?#terminology
- Click on the radio button next to
connectChatTranslate - Download the CSV
- Edit the CSV, by adding additional rows. 'en' as the source language and using the columns for the destination language (Feel free to add additional languages in column D onwards)
-
- Update the
connectChatTranslatecustom terminologies with the updated CSV
- For more information visit: https://docs.aws.amazon.com/transcribe/latest/dg/how-vocabulary.html
- Update the provided Custom Terminologies files
- The web app looks for a contact attribute of
x_langif set then the language will be set accordingly. (Supported languages for translation: https://docs.aws.amazon.com/translate/latest/dg/what-is.html) - If no
x_langcontact attribute is set, the FIRST message from the customer will be used to perform language detection using Amazon Comprehend. (Supported languages for detection: https://docs.aws.amazon.com/comprehend/latest/dg/how-languages.html) - Agent side is hardcoded to
'en'
All the services used are included within the AWS Free tier offer. However, should you exceed this you will be charged for the services consumed. Please see the clean up section to delete all deployed infrastructure.
Outside of free tier you will be charged for the consumption of the services used. For example.
Amazon Connect Pricing for chat is : $0.004 per message Amazon Translate Pricing : $15 per million characters Amazon API Gateway : $1 per per million requests AWS Lambda : $0.20 per million requests AWS Amplify : $0.01 per build minute and $0.23 per GB stored per month and $0.15 per GB served
Therefore a very approximate cost for 100 users for a month, handling 59 chats per day each for 21 days (a month) we have:
| Service | Costs (Month) |
|---|---|
| Amacon Connect Chat | $8,400.00 |
| Amazon Translate | $425.25 |
| Amazon Comprehend | $63.00 |
| Amazon API Gateway | $2.10 |
| AWS Lambda | $0.22 |
| Amplify Build | $0.08 |
| Amplify Hosting | $0.01 |
| Amplify Served | $0.37 |
| Total (124k chats) | $8,891.03 |
Assumptions.
- 30% of messages are translated
- 15% of the chats require language detection
- 10 Page loads per user per day
- 150 characters average message size for translation
- Average messages per chat 17
- More testing & code clean up
- Enable language selection for the customer side
- Enable language section for the agent side
- Translate message prior connect to an agent
- Store state locally to survive page refresh
- Prevent translation attempt for same language pairs
Within the amplify UI navigate to your app, on the top right select Actions and then Delete app.