Audiogram

<div align="center"> <h2 align="center">AUDIOGRAM</h2> <h4 align="center"> Generate engaging shareable audiograms<br/> The best part, you can customize and download it! </h4> </div> <details open> <summary>Table of Contents</summary> <ol> <li> <a href="#about-the-project">About The Project</a> <ul> <li><a href="#preview">Project Preview </a></li> <li><a href="#built-with">Built With</a></li> </ul> </li> <li> <a href="#getting-started">Getting Started</a> <ul> <li><a href="#prerequisites">Prerequisites</a></li> <li><a href="#clone-the-repository">Clone the repository</a></li> </ul> </li> <li> <a href="#usage">Usage</a> <ul> <li><a href="#run-in-production-mode">Run in production mode</a></li> <li><a href="#run-in-development-mode">Run in development mode</a></li> </ul> </li> <li><a href="#contact">Contact</a></li> <li><a href="#Other Usefull Links">Usefull Links</a></li> </ol> </details>

About The Project

Just Upload an Audio Clip & a Photo and your audiogram will be ready to be shared with the world! <br/> The Audiogram Webapp will take of the transcription, audio visualizer and everything else.

Using Audiogam you can generate subtitles of your audio clips.

Salient features

• Generates Subtitles.

• Cool Audio Visualization.

• Customizable.

• Downloadable and Shareable.

Preview

<div align="center"> <div> <a href="https://www.loom.com/share/9509ffdf7de54792a8c3f23b62dc7b75"> <p>Audiogram Demo - Watch Video</p> </a> <a href="https://www.loom.com/share/9509ffdf7de54792a8c3f23b62dc7b75"> <img style="max-width:300px;" src="https://cdn.loom.com/sessions/thumbnails/9509ffdf7de54792a8c3f23b62dc7b75-with-play.gif"> </a> </div> </div>

Built With

<table align="center" width="800"> <tr> <td align="center" ><a href="https://www.typescriptlang.org"><img style="border-radius: 8px;" src="https://upload.wikimedia.org/wikipedia/commons/4/4c/Typescript_logo_2020.svg" width="70px;" height="75px;" alt="TypeScript" /><br /><b><font color="#777">TypeScript</font></b></a></td> <td align="center"><a href="https://nextjs.org/"><img src="https://iconape.com/wp-content/files/gm/82643/png/next-js.png" width="70px;" height="75px;" alt="Next JS"/><br /><b><font color="#777">NextJs</font></b></a></td> <td align="center"><a href="https://reactjs.org"><img src="https://github-production-user-asset-6210df.s3.amazonaws.com/68416000/268571168-def90636-6cb8-4069-8d96-c3ada66fc3ef.png" width="80px;" height="75px;" style="border-radius: 8px;" alt="Openai"/><br /><b><font color="#777">Openai Whisper</font></b></a></td> <td align="center"><a href="https://flask.palletsprojects.com/en/2.3.x/"><img src="https://github.com/SAYUK09/Audiogram/assets/68416000/6e601e29-51ed-438d-b829-3e30e5bf500c" width="75px;" alt="Pyhton-Flask"/><br /><b><font color="#777">Python-Flask</font></b></a></td> <td align="center"><a href="https://nodejs.org/en"><img src="https://github.com/SAYUK09/Audiogram/assets/68416000/31cfb6fa-bd63-4bd2-ad5c-820e6fbcced1" width="75px;" alt="Nodejs"/><br /><b><font color="#777">NodeJS</font></b></a></td> </tr> </table> <h4>The App is structured as follows:</h4>

• NodeJS Backend : Renders the video and upload it to cloudinary
• Python Transcription Api : Transcribes the audio file using Openai Whisper

Getting Started

Prerequisites

• Node.js
• Yarn
• Git

Clone the repository

git clone https://github.com/SAYUK09/Audiogram

Usage

Run in production mode

yarn 

yarn build

yarn start

Run in development mode

yarn 

yarn dev

Please configure the Backend Dependencies before launching this project.

• Audiogram Nodejs BE
• Flask Transcription API

Browse the app

• http://localhost:3000

Other Usefull Links

• Audiogram Nodejs BE
• Flask Transcription API

Contact

Twitter - @sayuri_kamble Linkedin - @sayurikamble