Codice, Musica e ChatGPT
Quanto sopra è uno screenshot di un sito Web creato con ChatGPT. L'intera trascrizione di ChatGPT è qui . Il codice risultante è in on github . Il brano musicale raffigurato è Transmission di Eelke Kleijn .
L'applicazione
- Trascina e rilascia un file MP3 sulla scatola.
- Il file viene caricato e un'attività in background asincrona viene messa in coda. Il frontend controlla continuamente lo stato del lavoro finché non viene completato (o fallisce).
- Quando l'attività viene elaborata, l'MP3 viene analizzato e un array di dati della forma d'onda viene inviato al client. C'è una forma d'onda separata per alti, medi e bassi (simile al software per DJ).
- Il client, dopo aver ricevuto l'array di dati della forma d'onda, visualizza i dati su un Canvas HTML.
- È un compito di ingegneria del software non banale : c'è un frontend, che deve avere un aspetto decente. C'è un backend, che si occupa dei lavori asincroni e dell'elaborazione del suono.
- Richiede più librerie di terze parti e capire come funzionano.
- È richiesta una conoscenza interdisciplinare : è necessario leggere l'mp3, eseguire una trasformata di Fourier e suddividere correttamente le gamme di frequenza.
Durante la creazione dell'app, noi (ChatGPT e io) abbiamo effettuato piccole iterazioni e testato ciò che avevamo in ogni fase. Le citazioni dalla trascrizione di seguito sono collegamenti alle righe corrispondenti nella trascrizione.
Un front-end di base
Scrivi il frontend di un sito Web in cui gli utenti caricano un mp3 tramite trascinamento. l'mp3 viene quindi caricato nel back-end per l'elaborazione asincrona e l'interfaccia utente visualizza gli aggiornamenti sullo stato del lavoro (in coda/elaborazione/completato).
ChatGPT è arrivato a un risultato ragionevole con solo poche iterazioni.
ok, ora riscrivi la sezione per usare pure.css, e scrivi un po' di css per rendere la pagina più bella
Anche quello è stato facile.
Il back-end
ok, ora scrivi un'app in node.js/express che serva la pagina web di cui sopra e inoltre invii lavori che elaborano gli mp3 caricati. Per ora, l'elaborazione dovrebbe essere un lavoro fittizio che si completa semplicemente in 5 secondi.
Funzionava immediatamente. Abbiamo aggiunto iterativamente più funzionalità al lavoro :
fantastico, ora fai in modo che lo script sopra calcoli la lunghezza dell'mp3 nei lavori
Questo è stato veloce. Poi sono iniziati i problemi:
perfetto, ora cambia processMp3, in modo che restituisca un oggetto di analisi della traccia. Dovrebbe essere simile a questo :
{
duration: <durata del brano in secondi>,
waveform: [{
lows: <un valore compreso tra 0 e 100 che indica il volume delle basse frequenze in questo segmento>,
mids: <un valore compreso tra 0 e 100 che indica il volume delle frequenze medie in questo segmento>,
alti: <un valore compreso tra 0 e 100 che indica il volume delle frequenze alte in questo segmento>,
}, … ]}
(l'array della forma d'onda nell'oggetto dovrebbe avere 512 bucket.)
Per eseguire la trasformata di Fourier richiesta, ChatGPT ha provato a utilizzare librerie che presupponevano l'esistenza di un windowoggetto globale, indicando che sono pensate per l'uso front-end.
queste sono librerie front-end, non funzionano sul back-end usano qualcos'altro
Ha suggerito di utilizzare pydub, che è una libreria python, e ha prodotto codice che tenta di utilizzare pydub in javascript, che ovviamente non funziona. Poi ha iniziato a inventare cose:
ChatGPT: in tal caso, puoi utilizzare la libreria audio per eseguire l'analisi audio e generare la forma d'onda .
Ha quindi prodotto un pezzo di codice che utilizza una libreria audio inventata che non esiste o non può essere utilizzata in quel modo. Ha subito ammesso il suo errore:
Io: non esiste un tale pacchetto npm
ChatGPT : Mi scuso, hai ragione. Non esiste una libreria audio in npm. In tal caso, è possibile utilizzare la libreria della trasformata di Fourier per eseguire l'analisi audio e generare la forma d'onda.
Quindi ha prodotto un pezzo di codice che ha senso, tranne per il fatto che ha utilizzato una funzione che non era definita:
let audio = await decode(audioData);
import { MP3Decoder } from "lamejs";
Mi dispiace, ma l'elaborazione dell'audio sul lato server è piuttosto complessa, soprattutto senza l'utilizzo di una libreria preesistente. Consiglio di utilizzare una libreria preesistente, come ffmpeg, sox o libsndfile, che fornisce un'API di alto livello per l'elaborazione audio. Queste librerie possono essere utilizzate per estrarre i dati audio dal file MP3, elaborare i dati audio per determinare la durata e il volume dell'audio e generare i dati della forma d'onda.
Quando veniva premuto di più, ChatGPT continuava a trovare scuse e modi per evitare di scrivere la parte con cui stava chiaramente lottando.
Chiaramente era giunto il momento di fare un passo indietro. Ho chiesto a ChatGPT di scrivere il programma in python , renderlo output su stdout ed eseguirlo dallo script node.js. Ha funzionato bene e ha prodotto il seguente codice:
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))
Scrivere il codice per tracciare i dati della forma d'onda non è stato difficile, ma ha richiesto alcune iterazioni e un po' di debug assistito da ChatGPT. Ad un certo punto, ho mostrato a ChatGPT un estratto dei dati della forma d'onda per aiutarlo a correggere il suo codice .
L'architetto e la scimmia del codice
Ho osservato un'interessante separazione dei compiti durante questo processo:
- Ho agito come architetto del software : ho deciso cosa costruire e ho preso decisioni sul progetto generale. Ho diviso l'app in piccole parti che possono essere costruite in modo incrementale. Ho sottolineato problemi di sicurezza. Ho fatto il test.
- ChatGPT si è comportato come una scimmia del codice : ha funzionato bene nelle parti noiose: scrivere il codice effettivo, eseguire il debug e decidere quali librerie utilizzare.
Ho passato un po' di tempo a cercare di fare in modo che ChatGPT agisse anche come architetto del software, facendogli usare un'altra istanza di se stesso come una scimmia di codice. Finora non ho avuto successo, ma questo è quello che sto provando:
In questa conversazione, interpreterai il ruolo di un architetto del software che crea un programma con ChatGPT, un'IA di codifica. Puoi interagire solo con due agenti:
* ChatGPT, anteponendo le tue risposte con CHATGPT:
* Un terminale unix, anteponendo le tue risposte conTERMINAL:
Tutti i tuoi messaggi, senza eccezioni, devono essere preceduti da CHATGPT:o TERMINAL:. Non uscire dal personaggio. Non fare domande chiarificatrici, usa invece le tue migliori supposizioni. Risponderò ai tuoi messaggi, fingendo di essere ChatGPT o il terminale.
In qualità di architetto del software, sei bravo nella progettazione di sistemi di alto livello, ma vuoi delegare le parti più noiose della scrittura del software (scrivere il codice vero e proprio) a chatgpt. Tuttavia, ChatGPT non è bravo a gestire progetti complessi, quindi dovrai suddividere il progetto in piccole attività specifiche. Anche ChatGPT commette errori, quindi sei incoraggiato a testare il codice che ti fornisce.
Ti darò un esempio di una conversazione che potresti avere, se volessi creare un'app che stampi hello world sullo standard output:
— —
> CHATGPT: scrivere un programma in C++ che emetta "Hello, world!".
> Ok, ecco il tuo programma:
#include<cstdio> int main() { printf("Ciao mondo"); ritorno 0; }
> TERMINALE: mkdir ciao-mondo && cd ciao-mondo && echo “#include<cstdio> int main() { printf(\”Ciao, mondo\”); ritorno 0; }” > prog.cpp && g++ prog.cpp && ./a.out
> Ciao, mondo!
— —
Va bene. Ora crea un'app che stampa "Hello, world, again!" usando chatgpt, come sopra.

![Che cos'è un elenco collegato, comunque? [Parte 1]](https://post.nghiatu.com/assets/images/m/max/724/1*Xokk6XOjWyIGCBujkJsCzQ.jpeg)



































