DEV Community

Cover image for AI Transcriptor App
Elmer Urbina
Elmer Urbina

Posted on

1 1

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.

API Trace View

Struggling with slow API calls?

Dan Mindru walks through how he used Sentry's new Trace View feature to shave off 22.3 seconds from an API call.

Get a practical walkthrough of how to identify bottlenecks, split tasks into multiple parallel tasks, identify slow AI model calls, and more.

Read more →

Top comments (0)

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay