Code Monkey home page Code Monkey logo

mlh-fellowship / transcribio Goto Github PK

View Code? Open in Web Editor NEW
7.0 4.0 3.0 643 KB

A web application that allows educators to easily generate transcripts for their video lectures and provide a convenient and interactive way for students to navigate through the lecture.

Home Page: https://transcribio-mlh.web.app

License: MIT License

HTML 5.63% JavaScript 74.91% Dockerfile 1.13% Python 18.33%
video educators students transcription speech-to-text natural-language-processing docker hacktoberfest

transcribio's Introduction

Transcribio

Transcribio Logo

MIT License PR's Welcome Issues Transcribio Website

A web application that allows educators to easily generate transcripts for their video lectures and provide a convenient and interactive way for students to navigate through the lecture.

How is this tool helpful for students?

  • Improving accessibility for online lectures where educators can instantly create captions for their videos and share it with their class
  • Students can conveniently review class lectures
  • Making video content 'indexable' in a way where the class can find the topic off a video easily without hassle on the educators' end

Key Features

  • Upload a link to a video on the cloud or upload your own video
  • Our app extracts the relevant keywords from the video and provides timestamps for the same
  • Students can search for a particular keyword and jump over to that timestamp in the video instantly

Tech Stack

Languages

  • Javascript
  • React
  • Python
  • Flask
  • Firestore
  • Google Cloud Speech to Text API

Contribution Guidelines

PR's Welcome Contributors

  • Write clear meaningful git commit messages
  • Make sure your PR's description contains GitHub's special keyword references that automatically close the related issue when the PR is merged.
  • When you make very very minor changes to a PR of yours (like for example fixing a text in button, minor changes requested by reviewers) make sure you squash your commits afterward so that you don't have too many commits for a very small fix.
  • When you're submitting a PR for a UI-related issue, it would be really awesome if you add a screenshot of your change or a link to a deployment where it can be tested out along with your PR. It makes it very easy for the reviewers and you'll also get reviews quicker.

transcribio's People

Contributors

ajwad-shaikh avatar cqvu avatar knightcube avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

transcribio's Issues

Update permalink layout

Main AppLayout is updated with a new UI that includes permalink frontend and sizing fix-ups #37. These changes need to be added to PermLayout.

Save uploads to GCP

We need to save file uploads to GCP to be able to render it in permalink frontend later

Also, add videoResource key in the of the transcriptionResult document that points to the streamable video link

Dockerization

  • Improve Dockerfile
  • Create image
  • Push image to Repository
  • Deploy to Cloud Run
  • Redirect Firebase Hosting
  • Make the app live!

Refactor Frontend

  • use classes instead of hooks
  • move critical functions send...ToBackend to AppLayout
  • declutter ImportVideo
  • Render input on video player

Pre-processing UI

  • Input bar (file dropdown/URL)
  • submit
  • headers
  • requests to backend
  • spinner
  • snackbars ๐Ÿซ
    - [ ] backend validation microservice for links

README logo path is broken

The path is broken and the logo does not render in the README. Try changing the slashes in path from \ to /

Also, a better alt text like transcribio logo would be great

@knightcube hoping you can take this up

Generate and process transcripts from audio

  • set up a speech to text service (Google/Azure ?)
  • send audio files to get transcriptions
  • process transcriptions (through native algorithm/NLP offerings)
  • deploy to backend

Download Transcript

  • Render the download transcript button
  • Create the backend API endpoint for getting full transcript
  • Implement file downloading

Hosting the project frontend

The UI component be deployed to a hosting service (preferably Firebase)

Will help testing lay the foundation for backend deployment in the near future

Separate view for permalinks

Permalinks will open in a separate view fetching data that has been processed before and stored on the database.

This view will have to be designed and implemented.

Additional task :

  • Snackbars post processing

Post-processing UI

  • Video player
  • Keyword display
  • Link keyword to seek time
  • Download transcript

Search for Keyword

  • Search bar/form
  • Create backend API endpoint for getting timestamps for a certain keyword input
  • Display keyword & timestamps output

Youtube Support

Currently, our app only supports url of videos that are uploaded to the cloud. We want to extend this first to Youtube urls, and later on to any video sources.

Permalink framework

  • generate permalink post-processing
  • structure database
  • save data to database
  • show data on a permalink request

Captioning/subtitles

Add captioning to video player using the generated transcript - or display the full transcript and highlight the sentence that the video is currently on

Document API endpoints

  • sending the video (file/URL)
  • getting permalink
  • internal APIs (if backend is designed as microservices)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.