Skip to content

JiminHEO322/mad_week4

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

91 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

PL

🎶 Introduction 🎶

당신의 하루를 LP로 기록하세요 🎵✨

오늘 하루, 어땠나요? 바쁜 하루 끝, 스쳐 지나가는 감정들을 한 장의 LP로 남겨보세요.

여러분의 하루를 음악과 함께 기억할 수 있는 웹사이트, PL을 만들었습니다.

글로 남긴 오늘의 순간이 감정과 키워드로 추출되고, LP 표지와 어울리는 음악으로 완성됩니다.

LP 특유의 감성을 위해 지지직 거리는 노이즈 사운드까지 담아, 더욱 깊이 있는 분위기를 더했어요.

음악으로 기억되는 하루, 감성으로 기록되는 순간.

지금 PL에서 당신만의 LP를 만들어보세요. 💿🎧

💫 Team 💫


최연우 (카이스트 전산학부 22)

https://github.com/yeonwoo68

허지민 (카이스트 전산학부 21)

https://github.com/JiminHEO322

👾 개발 환경 👾

📌 Frontend

  • React.js

  • Vite

  • Three.js

📌 Backend

  • FastAPI

  • MongoDB

📌 그 외

  • Blender

  • GitHub

👻 서비스 소개 👻

📀 메인 화면: 나만의 LP를 플레이하는 공간


PL의 메인 화면은 아날로그 감성을 담은 LP룸을 3D로 구현한 공간입니다.

사용자는 마치 LP 가득한 음악 감상실에 들어선 듯한 경험을 할 수 있어요!

📌 턴테이블: Blender를 이용해서 모델링하였으며 턴테이블의 각 구성 요소는 클릭 가능합니다.

  • Table: 마우스를 올리면 투명해지는 효과를 주었으며, 클릭하면 **오늘의 LP 제작**이 가능합니다.
  • LP: 마우스를 올리면 확대되는 효과를 주었으며, 클릭하면 LP 목록 페이지로 이동합니다.
  • 고양이: 마우스를 올리면 위로 올라가는 효과를 주었으며, 클릭하면 **로그인/로그아웃**이 가능합니다.
  • 고양이 가운데 발바닥: 마우스를 올리면 핑크색으로 변하며, 클릭하면 LP 재생/정지 가 가능합니다.
  • 고양이 나머지 발바닥: 마우스를 올리면 연핑크색으로 변하며, 클릭하면 **볼륨 조절**이 가능합니다.

1️⃣ 로그인


로그 아웃 상태에서는 **검정 냥**이가 보이고, 로그인 된 상태에서는 **삼색 냥**이가 보여요!

  • 턴테이블의 검정 냥을 누르면 로그인이 가능하고, 삼색 냥이를 누르면 로그아웃이 가능합니다.
  • Google OAuth API를 활용하여 구글 로그인 기능을 구현하였습니다.

2️⃣ 오늘의 LP 제작


턴테이블의 Table을 클릭하면 오늘의 LP를 제작할 수 있습니다!

📝 하루 기록하기

사용자는 그날의 감정을 담은 일기를 작성합니다.

🧐 감정 및 키워드 분석

입력된 텍스트를 DeepL API를 이용하여 먼저 영어로 번역합니다. 이후 감정 분석 모델인 distilBERT-base-uncased-emotion를 활용하여 글에서 주요 감정을 세 가지 추출하고 동시에 KeyBERT 라이브러리를 이용한 키워드 분석을 통해 다섯 개의 핵심 키워드를 선택합니다.

🎨 LP 표지 생성

추출된 감정과 키워드를 조합하여, 인공지능 기반의 LP 표지 이미지를 생성합니다. Hugging Face의 Stable Diffusion 3.5 API를 사용하였습니다.

🎵 음악 추천

감정과 키워드를 기반으로 Last.fm API를 활용하여 알맞는 노래를 세 곡 추천합니다. 사용자는 제안된 노래 중 하나를 선택하여 자신의 LP를 완성할 수 있습니다.

🐚 LP 재생

만들어진 LP 표지와 음악은 자동으로 선택되어 턴테이블에 적용됩니다. 노래는 YouTube API를 이용해 재생합니다.

3️⃣ 나의 LP 목록


턴테이블의 레코드판을 클릭하면 나의 LP 목록을 볼 수 있습니다.

  • 사용자가 만든 LP들을 한눈에 확인할 수 있고 정렬하여 볼 수도 있습니다.
    • react-calendar를 이용하여 캘린더를 구현하였으며,날짜를 클릭하면 해당 날짜에 만든 캘린더를 확인할 수 있습니다.
    • **전체보기 버튼**을 클릭하면 사용자의 모든 LP를 확인할 수 있습니다.
    • **날짜별 버튼**을 클릭하면 최근에 만든 LP부터 정렬되어 보여집니다.
    • **즐겨찾기 버튼**을 클릭하면 사용자가 즐겨찾기한 LP만 보입니다.
    • **집을 생각하는 고양이**를 누르면 다시 홈 화면으로 돌아갑니다.

4️⃣ LP 선택하기

  • LP 표지를 클릭하면 해당 LP를 자세히 볼 수 있습니다.
    • 해당 LP를 제작한 날짜와 작성한 글을 확인할 수 있습니다.
    • LP 표지가 마음에 든다면 다운로드 버튼을 클릭하여 다운받을 수 있습니다.
    • 재생하기 버튼을 클릭하면 선택한 LP가 턴테이블에서 재생됩니다.

✨ 느낀점 ✨

[최연우]

히히 갬성 스타일로 만들어보고 싶었는데 지민 언니가 기꺼이 같이 해줘서 너무너무 즐거웠다!!!

언니는 짱이야👍 수많은 API들을 다 연결해주어서 프론트 작업하기 너무 편했어요><

3D 웹페이지 너무 이쁘지만 블렌더는 생각보다 어려웠다..

[허지민]

최고의 디자이너 최연우

최연우 그녀의 한계는 어디까지인 것인가

About

No description or website provided.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 2

  •  
  •