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