API

AssemblyAI - Retool App

Amit Jotwani

Jul 17, 2023 — 3 min read

I had a great time exploring AssemblyAI and thought it would be cool to create a user interface for it using Retool that lets you easily transcribe audio files. Here's what I came up with in version 0.1.

Just upload the file, or if you prefer, record audio in real-time, and let AssemblyAI's API handle the transcription process. It's pretty straightforward!

Once the transcription is finished, you can browse through all your transcriptions. You'll find the text version right there, alongside the original recorded audio.

The onboarding experience provided by AssemblyAI was one of the best I've encountered for a developer API product. They made it super user-friendly and hassle-free.

User Stories

I should be able to upload an audio file, and send it for transcription.
I should be able to record audio and send it for transcription.
I should be able to view all my transriptions in a table format.
I should be able to play the audio for my transcriptions.

Let's begin

Transcribing a file using AssemblyAI is basically a two-step process - upload the file (/upload), and then transcribe the file using the audio_url returned by the /upload POST request (/transcript).

Step 0: Set up the resource for AssemblyAI in Retool

This is a one-time step in Retool.

Step 1: Upload audio to AssemblyAI

The first step is to upload the file to AssemblyAI using the POST /upload endpoint. In Retool, you can configure this by following these steps:

The tricky part here is passing the file data correctly. In the resource configuration for the endpoint, make sure to set the Body to binary, and pass the contents of the file as a binary string. If you're using the file uploader component or the microphone component in Retool, it automatically handles the conversion to binary for you.

Here's what that configuration looks like in Retool:

Step 2: Transcribe Audio

Once the file is uploaded, it's time to transcribe it using AssemblyAI's /transcript endpoint, and passing the audio_urlreturned by the /upload request in Step 1.

Here's what this config looks like in Retool:

Step 3: Get Transcription

Hit the /transcript endpoint, along with the ID of the transription.

Step 4: To get the list of all transcriptions

Hit the /transcript endpoint, and pass limit and status as query parameters. Here's what this config looks like in Retool:

Streamlining Tax Season with a Simple Email Hack

Every year, as tax season rolls around, I find myself frantically looking through emails and apps to track down tax-deductible expenses. It’s always such a mess. It's like a scavenger hunt, except the prize is just getting my taxes done. So last night, inspired by the annual

Integrating Prism.js for Code Highlighting and Copy-to-Clipboard Functionality in Ghost

I wanted to enhance my Ghost blog's code snippets with syntax highlighting and a convenient copy-to-clipboard feature. For this, I integrated Prism.js - a lightweight, extensible syntax highlighter. Here's how I did it, broken down into the code for the site header and footer. Files

Deploying a Hugo Website to GitHub Pages Using GitHub Actions

After setting up Ghost for my personal website, I was looking for something a bit simpler. While Ghost is an incredibly powerful platform, it felt like an overkill for my needs—especially for a personal website. I still have a soft spot for the straightforwardness of HTML and CSS, so

Dynamically Updating Your Tidbyt Display with REST API Data

I recently bought a Tidbyt, a fascinating retro pixelated display that can do everything from showing the weather to displaying memes (h/t to Greg Baugues for the recommendation). After setting it up and exploring some pre-built apps (mine currently cycles through a Nokia Snake game, a Tetris clock I&