Spelling Master

Simple spelling game built with AWS Serverless services and Gen AI. Available in English and Dutch. Have features like - audio, character counts, timer, etc. Beat the timer, Be the spelling master!

Comment

Inspiration

This is my first project I used GenAI. I wanted to try out the Beadrock and related services, but didn't have a chance until now. So, I thought this hackathon would be a perfect fit to implement my idea while trying out GenAI capabilities.

What it does

  1. It is a simple spelling game. Player can choose from English (US) or Dutch to play the game.

  2. When player selects a language, there will be maximum 5 words generated. This includes a audio, brief meaning of the word and the number of characters for each word.

  3. Then the player needs to fill the word in the text box given.

  4. There is a indicator next to the text box how many characters has been entered in the text box and how many characters are required for the word. This indicator will be red until required number of characters are filled, then it turns into green.

  5. There is a timer starts as soon as the words are generated. This is based on the number of words generated.

  6. When the remaining time is less than 30 seconds, the background of the page as well as the background of the timer turns into red.

  7. Player can submit the game any time. However, if the player was unable to submit it until the timer runs out, the game will be automatically submitted.

  8. Then, the answers are evaluated and based on the number of correct answers, there is a pop up visible. If all the answers are correct, there will be a "Confetti" effect appears on the page.

  9. Clicking on the 'show results' button on the pop up, player can see the correct/incorrect answers and the correct word (in case of a incorrect answer).

How I built it

There are 2 parts of this.

  1. Backend was built using CDK with Python. https://github.com/pubudusj/spelling-game-backend
  2. Frontend was built using Vue.js. https://github.com/pubudusj/spelling-game-frontend

Backend has 2 components.

  1. Words generator will generate words with description using AWS Bedrock. Then Amazon Polly will convert text to audio and save it in S3. Then this words data will be saved in DynamoDB table. These steps of the tasks are orchestrated using Step Functions.

  2. Backend API consists of 2 endpoints. /questions will fetch max 50 random items from DynamoDB table and select single item randomly. Then a pre-signed url is generated for that item. This will be done max 5 items. Here also, the tasks are orchestrated using Step Functions Express workflow. When player submits a game, /answers end point is called to verify the answers. Here, it fetches data from DynamoDB table and returns if each word player submitted is correct or not.

Based on that, in the frontend, there are visual indicators to show the results.

Challenges we ran into

  1. Beadrock does not always return JSON. Within the prompt I used, I stated - "Produce output only in minified JSON array with the keys word and description". However, once in a while, Beadrock returns data in different formats. This could have been more accurate if I add the beginning of the response in the prompt, so Beadrock can continue from there. However, this will increase the request token count for each API call. So, to avoid additional cost and also, the error rate is acceptable (since this is anyway a background job), I kept this prompt as it is.

  2. Amazon Polly's StartSpeechSynthesisTask doesn't support S3 path. We can provide the OutputS3BucketName where the generated audio will be stored. However, we cannot specify a path to save the object. Instead, I have used the OutputS3KeyPrefix parameter to provide the path with the language code so, the audio is saved in s3://bucket_name/language_code/file_name.mp3 However, one minor issue with that is, Polly always add a dot (.) between the file name and the prefix. So, all the files generated in the sub path starts with a dot.

  3. Cost of Polly. Polly has Generative and Neural text-to-speech engines apart from Standard. However cost of them are quite high compared to Standard. Also, those are available only for limited number of languages. https://aws.amazon.com/polly/pricing/

  4. Selecting random item from DynamoDB table is hard. There is no straight forward way to achieve this. That's why I had to use a ExclusiveStartKey and fetch X number of elements and select one random item.

  5. I initially used direct integrations to start the Step Functions express workflow to generate questions directly from API Gateway. However, the VTL is complex to build specially to get the response in a specific format. So I sticked to Lambda proxy option which was more simple.

Accomplishments that we're proud of

I got good understanding about how Bedrock works in this project.| Also, the solution is complete with the intended functionality. Specially as a person with very minimum frontend knowledge, achieving this kind of functionality is really amazing thanks to Amazon Q Developer!

What we learned

How Bedrock works. Got to know some limitations of DynamoDB. Refreshed knowledge on Step Functions.

What's next for Spelling Master

  1. Currently there is no history of the played games. User login with a history and keep the progress can be a nice feature. For that we can use AWS Cognito along with Amplify UI library.

  2. Different Levels - At the moment, there are no levels to choose. In future, a language and level can be options to start a game.

  3. Add more languages - This can be easily done extending the state machine and adding a new schedule job for each new language. These new languages must be supported by Polly.

  4. Implement caching - Currently, there is no caching in place but will be handing in future for example using one pre-signed urls in many games.

** Detailed explanation can be found at the blog post: https://community.aws/content/2ZN3dyXOVdcfYV5R1X4sFaWCr0F/how-i-built-a-spelling-game-with-aws-serverless-and-genai

Built With

  • amplify
  • bedrock
  • dynamodb
  • lambda
  • scheduler
  • stepfunctions
Share this project:

Updates