Light

michaelfromyeg / rapviz Goto Github PK

View Code? Open in Web Editor NEW

8.0 3.0 1.0 3 MB

🔥🎤 See your bars broken down right in the browser. Powered by Spotify, Genius, and Railway.

Home Page: http://rapviz.michaeldemar.co/

License: MIT License

Python 16.58% HTML 4.35% CSS 12.50% Shell 0.41% Makefile 1.80% TypeScript 64.36%

genius rhymes gcp react flask rap hip-hop

rapviz's Introduction

rapviz 🔥

Visualize your bars right in the browser!

rapviz 🔥
- About
- Usage
  - Client
  - Server
- See more

About

This project was inspired by one of my favourite YouTube trends, the "rap visualizer" video. Take a look a Genius' Check The Rhyme or Vox's Rap Deconstructed as examples. We thought we could leverage NLP, a couple of free APIs, and some basic React to create a website that generates these kinds of 'highlighted' rhymes. Introducing: rapviz!

The app consists of a Flask REST server. This API interfaces with Genuis, and does a bit of work to produce a rhyme response the frontend understands. The frontend allows the user to connect to Spotify and detects what song they're currently listening to. It then visualizes the rhymes. Deployment is done via Railway.

Usage

Head to <URL> to try it out!

To run the app locally, see the below instructions for the client and server code.

Client

The client is written in React, and uses create-react-app. Its dependencies are as follows.

node, >=v18.16.0
npm, >=v9.5.1
yarn (preferred over npm), >=v1.22.19
(optional) nvm, >=v0.39.2

To get setup, run the following commands.

$ cd client
> (now at **/rapviz/client)

$ yarn
> yarn install v1.22.19
> ...

$ yarn start
> yarn run v1.22.19
> ...
>

Server

The server is a simple Flask app. Its dependencies are as follows.

[email protected], >=3.11.4

To get setup, run the following commands.

$ cd server
> (now at **/rapviz/server)

$ python3 -m venv env
> (creates a virtual environment called `env`)

$ source env/bin/activate
> (activates said enviornment)

$ which pip
> $HOME/rapviz/server/env/bin/pip

$ pip install -r requirements.txt
> (install the dependencies)

$ python -m main.py
> (run the server)

See more

rapviz's People

Contributors

Stargazers

Watchers

Forkers

daniijal

rapviz's Issues

Add some sort of export feature

It would be cool if users could have a screenshot to share with their final output.

Add lyrics data layer

Using git as a data store (michaelfromyeg/lyrics), create a custom lyrics and rhymes database. Try pulling from there first; on missing, query Genius and save. Allow manual uploads to this DB.

Comment out project and cleanup hackathon styling issues

Allow editing rhyme scheme

Create UI for allowing users to 'submit' rhymes for syllables or words, to improve rhyme schemes based on community feedback.

May need to take inspiration from twitter/communitynotes.

Stream rhyme scheme

Rather than flash the entire rhyme scheme, there should be an option to stream the highlighting, like in the videos.

Add file upload functionality

Would function basically the same to Spotify, except lyrics would be fed from .txt, .docx., etc.

(I actually believe there's a lyrics file format too; that should be supported. This way users can work with custom songs.)

Refactor project to use React routing rather than state checking

Right now, after the Spotify authentication, there's a short delay before the Spotify content is rendered. This bug should be fixed, and the site as a whole should be refactored to use routing.

Add loading symbols and progress bars

Cleanup the freestyle page

should be change to a <textarea>
output should have max-width so it displays comfortably in the center of the screen and should use the same scrolling as the Spotify compnent

Publish site to correct URL once appproved

Redeploy the site to youvegotbarz.online once that URL becomes available.

Fix bug where song skips and bad lyrics are returned

Add handler on Flask backend for no lyrics found and prevent 'non lyrics' from being returned.

User should get 404 or similar; UI should display error. And recommend they skip the song, maybe.

Fix Spotify tab layout and add more content

The layout should be a bit more comfortable and more information should be displayed (e.g., user's profile name, Hi, ____! and a progress bar for the song).

Recommend Projects

React

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

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

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

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
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.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

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

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.