DEV Community

tq-bit
tq-bit

Posted on • Updated on

 

Chattergram - a chat app that transcribes voice messages!

A month ago, I received a series of voice messages from a friend that lasted 15 minutes

Fifteen

Minutes

By the time I listened, I could have

  • Taken a shower
  • Prepared lunch
  • Call him and quickly speak about what bugs him
  • Write the code for this hackathon (which, in fact, I did during the time he was busy recording the second series)

I talked to my gf about it that day. How much I would prefer if people just called. Or wrote a text message.

Chattergram-banner

Fast forward, I read the announcement here. And well, you can imagine what instantly came to mind.

What if stop word-filled monologues like this one could be transcribed?

What problem does Chattergram solve?

Let's talk more serious. More often than not one finds themselves in a situation in which they cannot listen to spoken text.

  • Because they're in a silent part of the train (is that a thing outside of germany?). Or in a crowded office/public space. You could read - but not listen to - a message
  • Maybe they are in a hurry and just want to skim through the text very quick
  • Due to a disease that causes them to be hearing impaired

The sender could still record their message. Just now the receiver can choose whether to listen or read.

Overview of My Submission

Chattergram is a full stack Typescript app that transcribes voice messages into readable text.

It aims to make voice messages more accessible by giving the receiver a choice. Read it. Or listen.

preview of the chat section

I have prepared a demo under https://chat.q-bit.me/. It uses the remaining credits from my trial phase - feel free to give it a shot.

Submission Category:

Accessibility Advocates

Link to Code on GitHub

GitHub logo tq-bit / chattergram

Transcribe speech messages into written text


Logo

Chattergram

A chat application that transcribes voice messages to text

About The Project

Chattergram is a full-stack Typescript chat application. With a particular extra:

It transcribes other people's (english) voice messages into written text for you

Chattergram landingpage

I've created Chattergram for the Dev.to & Deepgram Hackathon. It stands in no affiliation to the Android app 'Chattergram for Android'.

Chattergram audio recording

Recorded voice messages are automatically transcribed by Deepgram's Audio API..

Features

  • Above all: Voice message transcription from recorded audiofiles
  • User authentication
  • Persistent chats
  • Swift deployment with docker & docker-compose
  • Typed data structures & OpenAPI specification under /api/docs
  • Last but not least: Light & darkmode

Non-features

  • Accurate user login stati
  • User profiling
  • Chat rooms
  • Automated CI/CD
  • Automated testing

Demo

You can try chattergram under https://chat.q-bit.me/.

The demo will remain up till the 31. of April or until my free Deepgram credit expires. It runs on a 2GB DO Droplet.

(…

Additional Resources / Info

Attached in the readme.md file, please have a look here: https://github.com/tq-bit/chattergram#getting-started

Top comments (5)

Collapse
 
bekahhw profile image
BekahHW

This is really fun.

Collapse
 
muriithigakuru profile image
Muriithi Gakuru

I think this is an amazing idea. Your UI skills are off the hook. I usually prefer voice notes but sometimes receiving VNs longer than 5 minutes just makes me want to lose my shirt.
My feedback is that the transcribed results are displayed twice per instance. Also some instructions on how to use the product would come in handy.
Keep on keeping on.

Collapse
 
tqbit profile image
tq-bit • Edited

Hi Muri,

thanks a lot for your feedback. Funny enough I priorized systematic code over UI on this one.

Agreed as well. My WA status says 'Before you send a VM, consider calling' for around 4 years now.

About the duplicated results: Did you happen to send a message to yourself? Or to a second account?
And about the instructions, do you think Vue tour might to the trick? I'd be curious to give it a shot. pulsardev.github.io/vue-tour/

Collapse
 
muriithigakuru profile image
Muriithi Gakuru

I think I sent it to myself. No wonder it was duplicated.
I've just discovered Vue tour right now actually, it looks like it can do the trick.

Thread Thread
 
tqbit profile image
tq-bit

I've got the duplicated chat part fixed, users can now properly send messages to themselves (they weren't getting saved before).

I decided against Vue tour though, it would've come down to a maximum of two steps to be described. Instead, I've added a placeholder for when a user logs in and didn't choose a chat partner.

Thanks again for your input

The AI Brief

AI generated git commit messages

Minimize the struggle of remembering what you just coded. AI-generated commits make it easier to manage projects and keep track of changes. The Nutlope/aicommits project demonstrates how AI can improve commit messages.

I open sourced an AI that creates any UI in seconds

Make AI-generated user interfaces a breeze. This open-source project harnesses the power of generative AI technologies like chatGPT to create versatile, quick, and intuitive UI components.

Use AI to commit like a PRO in 1 second

Upgrade your commit message game with AI. Boost your productivity by using ChatGPT to generate commit messages and avoid context switching. OpenCommit is an open-source library that helps you achieve this easily.

Build your own ChatGPT starter kit

Train AI models on custom data for improved domain-specific knowledge. Combine the power of WebView technologies and this starter kit to train your ChatGPT model on specific websites, allowing for better-optimized outcomes.