코드, 음악 및 ChatGPT

Feb 12 2023

ChatGPT로 간단한 사운드 파형 비주얼라이저 웹사이트 구축

위는 ChatGPT로 구축한 웹사이트의 스크린샷입니다. 전체 ChatGPT 성적표는 여기에 있습니다.

위는 ChatGPT로 구축한 웹사이트의 스크린샷입니다. 전체 ChatGPT 대본은 여기에 있습니다 . 결과 코드는 on github 에 있습니다 . 묘사된 음악 트랙은 Eelke Kleijn의 Transmission 입니다 .

앱

상자에 MP3 파일을 끌어다 놓습니다.
파일이 업로드되고 비동기 백그라운드 작업이 대기됩니다. 프런트엔드는 작업이 완료될 때까지(또는 실패할 때까지) 계속해서 작업의 상태를 확인합니다.
작업이 처리되면 MP3가 분석되고 파형 데이터 배열이 클라이언트로 전송됩니다. 고음, 중저음에 대한 별도의 파형이 있습니다(DJ-ing 소프트웨어와 유사).
클라이언트는 파형 데이터 배열을 수신하면 HTML 캔버스에서 데이터를 시각화합니다.

그것은 사소하지 않은 소프트웨어 엔지니어링 작업입니다 . 괜찮게 보여야 하는 프런트엔드가 있습니다. 비동기 작업 및 사운드 처리를 처리하는 백엔드가 있습니다.
여러 타사 라이브러리가 필요 하고 작동 방식을 파악해야 합니다.
교차 분야 지식이 필요합니다 . mp3를 읽고, 푸리에 변환을 수행하고, 주파수 범위를 올바르게 분할해야 합니다.

앱을 구축하는 동안 우리(ChatGPT와 저는)는 작은 반복 작업을 수행하고 모든 단계에서 우리가 가지고 있는 것을 테스트했습니다. 아래 성적표의 인용문은 성적표의 해당 줄에 대한 링크입니다.

기본적인 프론트엔드

사용자가 드래그 앤 드롭을 통해 mp3를 업로드하는 웹사이트의 프런트엔드를 작성합니다. 그런 다음 mp3는 비동기 처리를 위해 백엔드로 업로드되고 UI는 작업 상태(대기열 내/처리 중/완료됨)에 대한 상태 업데이트를 표시합니다.

ChatGPT는 몇 번의 반복만으로 합리적인 결과에 도달했습니다.

좋아요, 이제 pure.css를 사용하도록 섹션을 다시 작성하고 페이지를 더 예쁘게 만들기 위해 CSS를 작성하세요.

그것도 쉬웠습니다.

백엔드

좋습니다. 이제 위의 웹페이지를 제공하는 앱을 node.js/express에 작성하고 추가로 업로드된 mp3를 처리하는 작업을 디스패치합니다. 지금은 처리가 5초 안에 완료되는 더미 작업이어야 합니다.

이것은 즉시 작동했습니다. 작업에 더 많은 기능을 반복적으로 추가했습니다 .

좋아, 이제 위의 스크립트가 작업에서 mp3의 길이를 계산하도록 합니다.

이것은 빠르다. 그런 다음 문제가 시작되었습니다.

완벽합니다. 이제 processMp3를 변경하여 트랙 분석 개체를 반환하도록 합니다. 다음과 같아야 합니다 .
{
duration: <노래 길이(초)>,
파형: [{
lows: <이 버킷에서 저주파의 음량을 나타내는 0–100의 값>,
mids: < 0–100의 값 이 버킷에서 중간 주파수의 라우드니스>,
최고: <이 버킷에서 고주파의 라우드니스를 나타내는 0–100의 값>,
}, … ]}

(객체의 파형 배열에는 512개의 버킷이 있어야 합니다.)

필요한 푸리에 변환을 수행하기 위해 ChatGPT는 전역 개체의 존재를 가정하는 라이브러리를 사용하려고 시도했으며 window이는 프런트 엔드용임을 나타냅니다.

이들은 프런트 엔드 라이브러리이며 백엔드에서 작동하지 않고 다른 것을 사용합니다.

그것은 파이썬 라이브러리인 pydub를 사용할 것을 제안했고, 분명히 작동하지 않는 자바스크립트에서 pydub를 사용하려고 시도하는 코드를 생성했습니다. 그런 다음 상황을 구성하기 시작했습니다.

ChatGPT: 이 경우 오디오 라이브러리를 사용하여 오디오 분석을 수행하고 파형을 생성할 수 있습니다 .

그런 다음 존재하지 않거나 그런 식으로 사용할 수 없는 구성된 오디오 라이브러리를 사용하는 코드 조각을 생성했습니다. 신속하게 실수를 인정했습니다.

나: 그런 npm 패키지는 없습니다

ChatGPT : 죄송합니다. 맞습니다. npm에는 오디오 라이브러리가 없습니다. 이 경우 푸리에 변환 라이브러리를 사용하여 오디오 분석을 수행하고 파형을 생성할 수 있습니다.

그런 다음 정의되지 않은 함수를 사용한다는 점을 제외하고 의미 있는 코드 조각을 생성했습니다.

let audio = await decode(audioData);

import { MP3Decoder } from "lamejs";

죄송하지만 서버 측에서 오디오를 처리하는 것은 특히 기존 라이브러리를 사용하지 않는 경우 상당히 복잡합니다. 오디오 처리를 위한 고급 API를 제공하는 ffmpeg, sox 또는 libsndfile과 같은 기존 라이브러리를 사용하는 것이 좋습니다. 이러한 라이브러리를 사용하여 MP3 파일에서 오디오 데이터를 추출하고, 오디오 데이터를 처리하여 오디오의 길이와 크기를 결정하고, 파형 데이터를 생성할 수 있습니다.

더 압박을 받으면 ChatGPT는 분명히 어려움을 겪고 있는 부분을 작성하지 않는 변명과 방법을 계속해서 제시했습니다.

분명히 한 걸음 뒤로 물러날 때였습니다. 나는 ChatGPT에게 파이썬으로 프로그램을 작성하고 stdout으로 출력하고 node.js 스크립트에서 실행하도록 요청했습니다. 잘 작동했고 다음 코드를 생성했습니다.

import numpy as np
import matplotlib.pyplot as plt
from pydub import AudioSegment

def process_mp3(mp3_path):
    audio = AudioSegment.from_file(mp3_path, format="mp3")
    samples = np.array(audio.get_array_of_samples())
    duration = len(audio) / 1000
    sample_rate = audio.frame_rate
    num_samples = len(samples)
    num_buckets = 512
    bucket_size = num_samples // num_buckets

    waveform = []
    for i in range(num_buckets):
        start = i * bucket_size
        end = start + bucket_size
        bucket_samples = samples[start:end]
        
        fft = np.fft.rfft(bucket_samples)
        fft = np.abs(fft)

        low_freq = int(sample_rate * 0.05)
        mid_freq = int(sample_rate * 0.5)
        high_freq = int(sample_rate * 0.95)

        lows = np.mean(fft[:low_freq])
        mids = np.mean(fft[low_freq:mid_freq])
        highs = np.mean(fft[mid_freq:high_freq])

        waveform.append({
            "lows": lows,
            "mids": mids,
            "highs": highs
        })

    return {
        "duration": duration,
        "waveform": waveform
    }

if __name__ == "__main__":
    mp3_path = sys.argv[1]
    waveform_data = process_mp3(mp3_path)
    print(json.dumps(waveform_data))

파형 데이터를 플로팅하기 위한 코드를 작성하는 것은 어렵지 않았지만 몇 번의 반복과 일부 ChatGPT 지원 디버깅이 필요했습니다. 어느 시점에서 나는 ChatGPT가 코드를 수정하는 데 도움이 되는 파형 데이터의 발췌 부분을 보여주었습니다 .

건축가와 코드 원숭이

이 과정에서 흥미로운 작업 분리를 관찰했습니다.

저는 소프트웨어 설계자로 활동했습니다 . 무엇을 빌드할지 결정하고 전체 디자인을 결정했습니다. 앱을 점진적으로 구축할 수 있는 작은 부분으로 나누었습니다. 보안 문제를 지적했습니다. 나는 테스트를했다.
ChatGPT는 코드 원숭이처럼 행동했습니다 . 실제 코드 작성, 디버깅 및 사용할 라이브러리 결정과 같은 지루한 부분에서 잘 수행되었습니다.

저는 ChatGPT가 자신의 또 다른 인스턴스를 코드 원숭이로 사용하도록 하여 소프트웨어 설계자 역할도 하도록 하기 위해 시간을 보냈습니다. 지금까지는 실패했지만 이것이 내가 시도하는 것입니다.

이 대화에서는 코딩 AI인 ChatGPT로 프로그램을 구축하는 소프트웨어 아키텍트 역할을 하게 됩니다. 두 에이전트와만 상호 작용할 수 있습니다.
* ChatGPT, 응답 앞에 다음을 추가 CHATGPT:
* Unix 터미널, 응답 앞에 다음을 추가TERMINAL:

예외 없이 모든 메시지 앞에 CHATGPT:또는 가 추가되어야 합니다 TERMINAL:. 캐릭터에서 벗어나지 마십시오. 명확한 질문을 하지 마십시오. 대신 최선의 가정을 사용하십시오. ChatGPT 또는 단말기인 것처럼 가장하여 귀하의 메시지에 답장하겠습니다.

소프트웨어 아키텍트로서 귀하는 높은 수준의 시스템 설계에 능숙하지만 소프트웨어 작성(실제 코드 작성)의 더 지루한 부분을 chatgpt에 위임하고 싶습니다. 그러나 ChatGPT는 복잡한 프로젝트를 잘 처리하지 못하므로 프로젝트를 작은 특정 작업으로 나누어야 합니다. ChatGPT도 실수를 하므로 제공되는 코드를 테스트하는 것이 좋습니다.

Hello World를 표준 출력으로 출력하는 앱을 빌드하려는 경우 할 수 있는 대화의 예를 제공하겠습니다.

— —
> CHATGPT: "Hello, world!"를 출력하는 프로그램을 C++로 작성하십시오.
> 좋습니다. 프로그램은 다음과 같습니다.

#include<cstdio> int main() { printf("안녕하세요, 세계"); 0을 반환합니다. }

> 터미널: mkdir hello-world && cd hello-world && echo "#include<cstdio> int main() { printf(\"Hello, world\"); 0을 반환합니다. }” > prog.cpp && g++ prog.cpp && ./a.out
> Hello, world!
— —