Getting on with React!

Today was the day, that I decided to dive into React – and what a pleasant experience.

In our study product-group we’ve discussed topics like speech recognition, text-to-speech and how we could combine this using AI and Machine Learning in the end. Therefor I decided to give React a go, with the idea in mind to create an app that recognized speech.

I followed this tutorial made by Thapa Technical on YouTube. I didn’t understand a word of what he’s saying in the video, but I managed to follow along anyhow.

First I started up by getting to know Vite – which Thapa also have made a short video about.

Vite is a tool for different frameworks, that makes it easier to get going with your project.

Vine supports different Javascript frameworks, as you can see above.

I started out by developing on my own localhost, and as the hours went by a product was slowly showing. The initial page could only recognize microphone input, and the you could copy it into the clipboard. That part was quite easy due to Reacts many available modules using (“npm”) – Node Package Manager.

Then I thought, what if I want to do it reverse. So the client can speak the input, and also get it read out loud afterwards. This took some more time, especially how to playback audio was a bit of an head-eche.

I decided to go with Google as the “provider” for my little ‘service’, and as a student I can not afford expensive API’s. So it was time to get creative. I looked into how the regular Google Translate page outputs the speechs, when you click this icon:

My research revealed it’s actually just an URL/endpoint you can hit, and the it will on-the-fly create a mp3 audiofile for playback for you. An example would be:

https://translate.google.com/translate_tts?ie=UTF-8&q=This%20is%20a%20test

This made me realise that if just took the transcript content from my page, I could pass that to an URL like above, and then grab the audio file for playback. Cha-ching! 😋

So yeah, everything kind of went smooth until this audio-playback. I got the URL, I could play it in my own browser, but the React-page simply wouldnt play it.

I opened DevTools in Chrome, and I immetiately saw that it got a 404-error, when trying to retrieve the audiofile. Huh? Google time!

The solution was to tell our index that we don’t kiss and tell.

<meta name="referrer" content="no-referrer">

Then the 404-error was gone, but yet still no audio wanted to play. I tried various solutions. Howler.js, creating an iframe inside the app (wtf, I know), nothing seemed to work – apart from my very last try!

* …. will update later … *

The application is LIVE here:

tts.mickeygee.com

The application is deployed at AWS, with their Amplify service. Which also was the very first time I tried deploying a React-app. No worries, AWS had me all the way, easing the procedure from localhost to the world wide webs.

As I already had made a git-repo on GitHub, I was able to connect my GitHub account with AWS Amplify, select the repo, and then they handled everything. The only thing I had to double-check was the build-settings among the ‘baseDirectory’.

This also means that it will auto-build any future commits that I am doing. God I love CI/CL.