▶️ Swiftube - Creating videos using React ⚛️ & AI

#githubhack23 #javascript #react #nextjs

What I built 🚀

I've built Swiftube, an innovative application that transforms user prompts into animated videos, complete with intro & outro, images, voice-over and table.

My Tech Stack:

Category Submission: 🃏

Wacky Wildcards

App Link 🌐

https://swiftube.vercel.app

Screenshots 🖼️

Video Playback ▶️
Homepage 🏠
Creating a new video 🪄
Explore videos made by others!

Description

Swiftube generates videos based on the instructions and raw content provided by the user, by leveraging the power of:

Remotion - Programmatic videos using React
Google Text-to-Speech
OpenAI (2023 special!)

This is very useful when you have some talking points and images from a presentation and want to quickly convert it into an engaging video for YouTube, Instagram, or what have you!

Remotion's programmatic approach unlocks many features, including but not limited to:

Changing the video host entirely (this is huge!)
Changing the Channel Logo in the outro

Watch this example video to see it in action! (try changing the Video Settings)

Given some more time, I'd love to implement:

Rendering mp4 videos in the cloud using GitHub Actions and Remotion Lambda!
Prettier looking video w/ animations (right now it's just the talking points and images)
and many more features...

Link to Source Code 🧑‍💻

Next.js Frontend - https://github.com/thecmdrunner/swiftube-frontend
Backend - https://github.com/thecmdrunner/swiftube-backend

Permissive License 🌟

MIT License

Background 🤔

I loved the idea of creating videos with dynamic data using Remotion and started to dabble with it. I had a vague idea that it can be used to make simple videos that convey some text.

Then, after experimenting more with it, I got a basic demo of Remotion with Text-to-speech working.

I realized that the pairing of OpenAI and Remotion can be a huge time saver for many because it eliminates the need for:

Fancy & expensive equipment for recording your voice.
Video/Audio editing skills

Just bring your own content!

How I built it 🤓

After learning about the Text-to-speech APIs, Cloud storage, picking the right databases, facing lots of challenges, and dealing with lots and lots of mathematics on the Remotion size, it finally worked as intended.

Admittedly, it's still in the early stages, and is only good for < 10 mins videos. But I invite members of the Open Source community to criticize, iterate and improve on it, if they find it useful :)

Happy to be a part of this Hackathon!
Thanks for reading this far, appreciate it :)