Music Machine

• 

  Music Machine Home Page, playlist maker features shown

• 

  Playlist Generator Input UI, custom input demo

• 

  Input Fields for Generating Playlist Input UI

• 

  Generated Playlist using OpenAI

• 

  Input Fields for Feedback and Album Cover Generation

• 

  Feedback Generated by DeepSeek-V3

• 

  Album Covers Generated by Stability-AI sdxl

Inspiration

Finding new music has always been a struggle point for us. For example, Jiwon always ends up relistening to the same Wicked soundtrack song on repeat for 8 hours a day.

"I think I fall into these looped marathons because I love music but am impatient and very picky with new songs." -- Jiwon

With interests beyond just a single genre or artist, our goal was to create an easier way to find the perfect song with any mix of interests. Built on this initial problem, we're proud that Music Machine grew beyond this singular issue through the various issues and realizations we faced.

What it does

Music Machine has two main features that modernize two ends of discovering new audio entertainment: exploration and creation.

The first feature is a playlist generator which is able to create an optimal playlist based on several criteria inputs. We made sure that the inputs could be mixed, matched, intentionally omitted, or even customized because our inspiration comes from the difficulty of finding songs with niche interest mixes. Music Machine's playlist generator is our reimagination of how people should explore new music, and we hope that the very open-ended inputs and diversity of outcomes support experimentation and inspiration.

Playlist Generator Feature Image1

Playlist Generator Feature Image2

The second feature is a lyrics coach and album art generator. By putting in your own lyrics, Music Machine will provide suggestions based on both technical and emotional metrics. We made sure that the user could specify the vision for the mood or genre, because this feature is a tool for you to create and find inspiration. While the album art generator could have been a separate feature, we decided to combine it with the lyrics coach, because seeing images helps users immerse that exact theme and create more ideas on their own.
Inputting Your Written Verse and Optional Inputs

Feedback & Prompt Being sent to Vision Model

Album Cover Images Generated!

Our vision with Music Machine is for both features to be used together to assist music discovery through multiple dimensions. However, as accessibility became a big part of Music Machine's life, we are equally happy for people to use Music Machine to make playlists and more with its large, simple, and accessible graphical user interface.

How we built it

Stage 1: The start of a graphical UI

When we first began the project, we knew that React should be a big part of the development, because it's a powerful web dev tool and a web app was suitable for Music Machine. Jiwon was especially excited to use his recent learning of React in a real project. But before we began, a solid concept idea of how data would be passed between modules and interacting with a graphical UI (GUI) was necessary.

Challenge 1: A concern of accessibility and practicality

Our first idea was to use the HTML drag and drop API to create a GUI when selecting inputs. Jiwon actually coded the event handler functions and even checked with a few tests with mocking. But as we finished the GUI prototype, we found two major issues. First, creating the vision of a drag and drop GUI required special animations we didn't think was realistic with our skillset. Second, as we kept dropping elements into each other, we realized that the interactive GUI was actually very clunky with small mouse targets. We decided to scrap the drag and drop GUI, but kept much of the logic for data transfer into our first actual prototype.

Stage 2: A working prototype

With a new GUI plan, Afreen refactored the data logic and used Material UI (MUI) to create a strong web page prototype. She also processed the input data with API calls to 3 LLMs (from OpenAI, DeepSeek, and Stability AI). It was here where Afreen realized that a lyric coach and album art generator would be a good complement to Music Machine's initial goal of being a playlist generator. With a router to manage switching between the major features, a robust playlist player and lyric coach & album art generator prototype was created; and Music Machine's goal expanded to modernizing multiple ways to discover new music.
Playlist Generator OpenAI Code

Challenge 2: Developing across borders

Working between California and India meant that we had few hours to collaborate in real time. Within 6 hours of the hackathon, we realized that Afreen had to create the shared vision on her own, then pass on the work to Jiwon. We overcame the persistent challenge in communication by using our sparse shared time to review completed work and discuss future visions. Meanwhile, we emphasized comments, readable code, and development with modular scope to communicate across time. For example, Jiwon had never worked with Material UI or with LLMs, but Afreen's structured code gave a good template for Jiwon to expand and learn from.

DeepSeek-V3 Model Code

Stability AI sdxl Model Code

Stage 3: Solving our initial inspiration

Passed off to Jiwon, we improved on the playlist generator to include custom inputs, allow omitted inputs, and expanding on the input category types. Relying on React components was especially useful for code reusability between two developers. Similarly, the lyric coach and album art generator was modified for more customizability. With styling touches and the addition of a landing page, we had a lot of fun bringing our design goals to life with Material UI and CSS.

Stage 4: Finding new reasons for Music Machine

As we worked on styling, keeping the GUI accessible was very important. While the graphic inputs provide a visually pleasing interface, we wanted to make sure that inputs could be selected with keyboard inputs and that the page could be tab navigated. As accessibility became a big part of our development, we realized that Music Machine's visually simple, clear, and big GUI was a very important feature (especially in comparison to our original GUI vision). The ability to enjoy, discover, and create music should be enjoyed by all, and we wanted to support that by adding WAI-ARIA for better screen reading support and testing accessibility with DevTool extension, Lighthouse.

Accomplishments that we're proud of

Started from a playlist generator, we are first excited to create a solution to our initial frustration of song searching. With the challenge of polar opposite time zones, the project was a tangible reward of collaborative code practices. By the end, creating a modernized solution to discovering music through two primary ways (exploration, creation) felt really rewarding.

Concerning accessibility, at the start of Music Machine's life, we tried to create a fun, but a mouse-only, dexterity-demanding GUI. Making our solutions accessible means that Music Machine can be the modernized tools to help many people discover music, and we are really proud of this additional function. For example, Jiwon can foresee his grandma using Music Machine to find more entertainment than scrolling Youtube Shorts all day.

What we learned

On a technical level, we learned and practiced new frameworks and libraries. For Jiwon, this was his second React project and first project using a React component library or LLM.

For Afreen, this was her first time working with integrating so many models using Nebius studio, emphasizing how multi-modal capabilities can be achieved to help people around the world.

Additionally, one of our greatest takeaways was adapting to significant time barriers and realizing the tangible value of collaborative coding practices. Our soft skills of communication -- in code and out -- were really challenged in this hackathon.

In addition, it was very rewarding for accessibility issues to be one of the first hurdles in creating Music Machine, then, in a full-circle style, the project's supportive and simple GUI becoming another way to use Music Machine.

What's next for Music Machine

There are some quality of life features that we see will be useful for our project like being able to export generated videos, share playlists, and remember user information in a database.

Beyond this, the most exciting potential is for Music Machine to further modernize ways to discover music. One feature that we discussed is improving the lyrics coach to also include an audio generator to suggest clips of what the lyrics could sound like. Being able to quickly receive audio feedback on users' lyrical whims matches Music Machine's goal to inspire experimentation and creativity with music.

Another feature that excites us is being able to analyze uploaded audio to provide improvements and variation. Similar to how input customization was very important to Music Machine's playlist generator, we believe that uploading audio lets users input another dimension of music that is sometimes difficult to describe in words.

Built With

• deepseek
• materialui
• nebuis-studio
• openai
• react
• stability-ai