TranscribeNow : Live Note-taking and Subtitles

fabrikapp

Fabrikapp

Posted on November 25, 2024

TranscribeNow : Live Note-taking and Subtitles

This is a submission for the AssemblyAI Challenge : Really Rad Real-Time.

What I Built

For the AssemblyAI Challenge, I developed a real-time audio transcription and note-taking application. This project combines the power of AssemblyAI's Streaming API with a user-friendly interface to provide instant transcription, live note-taking, and AI-assisted content generation.

The application consists of three main components:

  1. A Chrome extension for capturing tab audio, displaying subtitles, and fetching audio from any webpage or microphone
  2. A server-side component for handling WebSocket connections and interacting with AssemblyAI's API
  3. A frontend web application for displaying transcriptions and managing notes. The user will be able to rewrite and generate notes from a recorded session

Demo

Source Code

Source Code Repository

Screenshots

Note Generation
Review and edit transcribed sessions with additional context and notes

List Your Sessions
AI-assisted note generation based on the transcribed content

Dashboard
The dashboard interface showing live transcription and note-taking stats

Journey

Implementing AssemblyAI's Streaming API was an exciting process that involved several key steps:

  1. Setting up the WebSocket connection: I used the Hono framework to create a WebSocket server that acts as a bridge between the client and AssemblyAI's API.

  2. Audio capture and streaming: I developed a Chrome extension to capture tab audio and stream it to our server. The extension uses the chrome.tabCapture API to access the audio stream.

  3. Real-time transcription display: On the frontend, I created a React component to display the live transcription as it comes in from the WebSocket.

  4. AI-assisted note generation: I implemented a feature that allows users to generate notes based on the transcribed content using AI-powered instructions.

One of the most challenging aspects was ensuring a smooth, real-time experience while handling the continuous stream of audio data and transcription results. I had to carefully manage state updates and optimize rendering to prevent lag or jitter in the user interface.

I am really happy to be able to connect AssemblyAI To any webpage for instant note taking and more !

By integrating these additional tools, I was able to create a more comprehensive and powerful application that goes beyond simple transcription. The Chrome extension allows for seamless audio capture from any web content, while the AI-assisted content generation provides valuable insights and summaries to users, making their note-taking process more efficient and effective.

Throughout this project, I gained valuable experience in working with real-time audio processing, WebSocket communication, and integrating AI capabilities into a web application. The AssemblyAI Streaming API proved to be robust and reliable, enabling me to create a responsive and accurate transcription experience for users.

💖 💪 🙅 🚩
fabrikapp
Fabrikapp

Posted on November 25, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

AILingo
devchallenge AILingo

November 25, 2024

subtitleGenAI subtitle generation platform
devchallenge subtitleGenAI subtitle generation platform

November 25, 2024

Podcast Content Generator
devchallenge Podcast Content Generator

November 25, 2024

MovieLens - Smart Movie Analysis Redefined
devchallenge MovieLens - Smart Movie Analysis Redefined

November 25, 2024

Sync: A real-time VIdeo Chat Application
devchallenge Sync: A real-time VIdeo Chat Application

November 25, 2024