-
The cat vibing to the website.
-
The website before you enter the URL.
-
The website when the process is finished.
-
The cat vibing to Rick Astley.
Check out the project here: http://catvibesto.space
Inspiration
We took the brief of spreading positive social change, so we decided the best thing that we can do is to spread joy, and make a fun product that people can enjoy using. We also both think the vibing cat is hilarious, so we decided what better way to spread joy and cheer than to make the cat vibe to any song or YouTube video that people wanted!
What it does
We produced a website that allows the user to enter a link to any YouTube video they want, and in return they get a short clip of the same video with the cat vibing along to the exact tempo of the song they provided.
How we built it
The app is built with an angular JS front end which links to a backend running in google cloud.
The frontend submits jobs to a firestore database. There are 3 cloud functions which listen to changes to the database. First download_video is invoked which uses youtube-dl to download the youtube video. Then get_bpm uses pydub and numpy to calculate the bpm of the song. After this a final cloud function uses ffmpeg to change the speed of the cat to match the song and composites it with the downloaded youtube video. Finally this result is uploaded to a google cloud storage bucket and the download url returned.
Challenges we ran into
Neither of us had used google cloud or even made a web app before. So the main challenges were all of the new technologies that we had to learn and learning how to best design an app to run in the cloud.
Writing functions that run in the cloud was quite a challenge given that our functions were all concerned with file manipulation. Each function didn’t have a persistent file system and the file system that they had access to was read only and so we had to very carefully write the functions to work within these constraints.
Accomplishments that we're proud of
We managed to get the base program working exactly how we wanted it to, and with enough time to add some more polished features, such as variably calculating how long the clip should be, when the cat should start vibing, as well as having to play around with chroma keys for videos, trying to get the perfect blend to make the cat seamlessly blend into the video.
On the programming side, there were many challenges with deploying cloud functions, as it takes a lot of adapting a function to go from a local instance to one that runs from the cloud. We also struggled with the front end development, so to be able to create a website that looks polished, with dynamic progress bars, animated backgrounds and good looking features is a huge accomplishment.
What we learned
We’re both now much more comfortable with writing web apps that use the cloud. In particular we learned how to use AngularJs, google cloud functions, and firebase. We got a lot more experience writing functions with ffmpeg, as well as other libraries like aubio and Pydub for analysing data from audio files.
What's next for Cat Vibes To_____
Adding new features like multiple cats bopping on alternate beats. Taking user feedback to improve the app experience. The processing speed of the application could be improved. Currently it takes ~15 seconds to process a video. With access to faster servers we could potentially decrease that.
Then we will vibe off into the sunset.
https://github.com/CatVibesToSpace/CatVibesToSpace/tree/main
Log in or sign up for Devpost to join the conversation.