DEV Community

Cover image for AI Transcriptor App
Elmer Urbina
Elmer Urbina

Posted on

AI Transcriptor App

This is a submission for the AssemblyAI Challenge : Sophisticated Speech-to-Text.

What I Built

I built a web page easy to use, with a responsive design so that it can be used in different devices like laptops, cellphones, tablets, the app is 100% functional, contains an input to upload the file (audio) you want to transcript, a button to start transcribing, once you click this button the transcription will start automatically and the transcribed text will appear just below.

The web application is deployed so that everyone can access and use it, from any device, from anywhere, in summary I have a ready to use web app for transcribing audios using the Universal -2 model for processing the audio.

Demo

The code is under the MIT free license, you can reach the GitHub repository here.
The web app is also deployed on Render, which means it have Usability and Accessibility, you can reach and use the application Here.

The app is 100% functional, you can see it on the screenshot below.

Evidence of functionalityn

Also the interface is intuitive for anyone who has or not experience using technologies, you can see it on this image.

GUI for good user experience

The application design is responsive, can be accessed and used form any device, which means it have a Good User Experience and Accessibility, you can check it out on these screenshots:

Cellphone

Standard Tablet Size

Journey

On the Technology stack I used the traditional HTML, CSS and JS for building a web frontend with Usability and User Experience, In the Backend I used Flask for defining the routes and implementing the logic, I used the Universal-2, AssamblyAI's Model to transcribe the audio, in simple words, the Flask receive the audio, send it to the Assembly AI API (The connection is stablished through the API Key), the API process the audio and send 200 status response.

Possible Problems

Flask save the audio on the uploads folder, so when it is deployed on Render the host don't have access to saving and accessing the file on the directory, which can get into errors and the page will not translate, for solve this issue, is needed to use cloud storage for saving the audio and flask access it from the Cloud and not for the uploads directory.

Top comments (0)