CrescentCrescent
PostsTagsAbout

> Six Dragons Fly Again: 인터랙티브 웹 어플리케이션

Crescent

💡 For the English version of this post, please refer to the link.

Abstract

Six Dragons Fly Again은 15세기 한국 궁중 음악 중 전승이 끊긴 치화평과 취풍형을 복원하고 공유하기 위해 연구된 딥러닝 모델이다. 그리고 우리는 이를 보여주는 생성 모델을 갖춘 인터랙티브 웹 어플리케이션을 완성했다. 모델 연구 프로젝트는 15세기 멜로디를 부활시키는 데 초점을 맞추는 동안, 우리의 웹 어플리케이션 프로젝트는 웹 데모를 통해 사용자가 자신의 멜로디를 입력하고 한국 전통 음악 합주곡을 만들 수 있는 것에 초점을 맞추었다. 인터랙티브 웹 어플리케이션은 웹 인터페이스, API 서버 및 추론 서버 세 가지 구성 요소로 이루어져 있다. Six Dragons Fly Again 모델의 참조 코드를 기반으로 새로운 음표 입력 인터페이스, 생성 요청을 위한 대기열 시스템 및 인퍼런스 서버를 구현했다. 이를 통해 전 세계 연구자들이 우리의 인터랙티브 웹 어플리케이션을 통해 한국 전통 음악을 생성함으로써 한국 전통 음악을 탐구할 수 있게 되었다.

1. Introduction

🐉 Six Dragons Fly Again:
Reviving 15th-Century Korean Court Music with Transformers and Novel Encoding
15세기 《용비어천가》 기반의 궁중 음악 중 전승이 끊긴 취풍형을 딥러닝을 통해 연주 가능한 합주곡으로 복원

국립 국악원 프로젝트로 시작
세계적인 음악정보검색 학회인 2024 ISMIR Conference에서 베스트 페이퍼 후보로 선정 (11월 논문 발표 예정)
2024년 6월 2일 국립국악원 풍류사랑방에서 〈인공지능 고음악 복원 성과 발표 및 시연회〉 진행
2024년 5월 14일 세종대왕 탄신 기념으로 경복궁에서 국립 국악원의 연주와 함께 AI로 복원한 치화평 · 취풍형 초연

2. Interactive Web Application

[Six Dragons Fly Again for Web: Interactive Web Application]
인터랙티브 웹 어플리케이션 제작 전담: Web Application, API Server 그리고 Inference Server 제작 및 배포
전세계의 연구자 등이 인터랙티브한 웹 어플리케이션을 통해서 궁중 음악을 생성해보며 한국 전통 음악을 탐구할 수 있는 기회 제공

2.1.1. Bach Doodles

Bach Doodles Features

Bach Doodles
Bach Doodles / https://magenta.tensorflow.org/coconet

2.2. Features of Six Dragons Fly Again for Web

Six Dragons Fly Again
six-dragons-fly-again.site

피리 선율을 입력받아 정악풍의 선율로 변환하고, 대금, 피리, 해금, 아쟁, 가야금 그리고 거문고까지 6개의 악기에 대한 합주 선율을 생성 결과를 제공하는 웹 어플리케이션

3. Methodology

Architecture of Six Dragons Fly Again
Architecture of Six Dragons Fly Again

3.1. Web Application

Vite, React, TypeScript + abcjs
➡️ Vercel에 배포

3.1.1 SMuFL 기반 음표 입력 인터페이스

음표를 입력하는 화면
음표를 입력하는 화면
음표를 붙임줄로 연결하는 음표 입력 인터페이스
음표를 붙임줄로 연결하는 음표 입력 인터페이스
음표의 입력이 길어지면 자동으로 다음줄로 넘어갈 수 있게 구현
음표의 입력이 길어지면 자동으로 다음줄로 넘어갈 수 있게 구현

3.1.2 마우스와 키보드를 이용한 악보 입력

마우스와 키보드를 이용해 악보를 입력할 수 있다.
마우스와 키보드를 이용해 악보를 입력할 수 있다.

3.1.3 선율 생성을 돕는 현재 입력한 박자와 마디 수 표시

현재 입력 상태를 보여주는 상태바
현재 입력 상태를 보여주는 상태바

3.1.4 합주 선율 생성 결과 악보 생성 및 MIDI 파일과 미리듣기 제공

합주 선율 생성 결과의 악보
합주 선율 생성 결과의 악보
MIDI 파일 재생 혹은 저장 기능 제공
MIDI 파일 재생 혹은 저장 기능 제공
MuseScore에서 확인한 저장된 MIDI 파일
MuseScore에서 확인한 저장된 MIDI 파일

3.2. API Server

Go + Gin
➡️ docker를 사용하여 fly.io에 배포

3.2.1. Why Go? & 대기열 및 예상 소요시간 제공 시스템

2024.07.10 티켓링크 대기열 기능의 모습
2024.07.10 티켓링크 대기열 기능의 모습

∴ 대기열의 순번과 예상 소요시간을 제공하는 API Server를 만들어 사용자에게 정보를 제공하기로 결정

3.2.2. Features

다중 사용자가 생성을 요청하는 모습. 대기열 정보 현황
다중 사용자가 생성을 요청하는 모습. 대기열 정보 현황
위의 사진에서 대기하던 사용자가 나갔을 때의 대기열 정보 현황
위의 사진에서 대기하던 사용자가 나갔을 때의 대기열 정보 현황

3.3. Inference Server

Python, PyTorch + FastAPI
➡️ Beam Cloud에 배포

3.4. Enhanced User Experience

이전의 음표 입력창과 바뀐 이후의 입력창의 모습
이전의 음표 입력창과 바뀐 이후의 입력창의 모습

UX 디자이너와 협업하여 더 직관적인 UI 적용으로 사용자 경험을 개선

상태바/조작바 도입을 통해 조작 버튼의 위치를 조정하여, 사용자가 음표 입력에 집중할 수 있도록 디자인 변경 (2024/04)
상태바/조작바 도입을 통해 조작 버튼의 위치를 조정하여, 사용자가 음표 입력에 집중할 수 있도록 디자인 변경 (2024/04)

4. Conclusion

'Six Dragons Fly Again' 프로젝트는 인공지능이 문화를 의미 있게 보존하는 방법을 보여준다. 광학 음악 인식(OMR)과 Transformer 기반 딥러닝 모델을 사용하여 15세기 한국 궁중 음악을 재현하고 전 세계 사람들이 인터랙티브 웹 사이트를 통해 탐색할 수 있도록 만들었다. 이 어플리케이션은 연구자 등의 사용자에게 15세기 궁중 음악의 버전을 즉시 탐색하고 만들 수 있는 독특한 기회를 제공한다. 한국의 음악 유산에 대해 더 많이 배우면 사용자는 이러한 역사적 작품을 다시 살려내는 데 적극적으로 참여할 수 있을 것이다.

이 프로젝트가 사용자 중심의 인터랙티브한 경험을 통해 역사 음악에 대한 접근성과 흥미를 높이고 문화유산에 대한 깊은 감상과 이해를 증진할 수 있다는 것을 보여줌으로써 향후 AI 기반 문화 보존에 대한 방법에 영감을 주기를 바란다.