Di atas adalah tangkapan layar dari situs web yang dibangun dengan ChatGPT. Seluruh transkrip ChatGPT ada di sini . Kode yang dihasilkan ada di on github . Trek musik yang digambarkan adalah Transmisi oleh Eelke Kleijn .

Aplikasi

• Anda drag-and-drop file MP3 ke dalam kotak.
• File diunggah, dan tugas latar belakang asinkron akan diantrekan. Frontend terus menerus memeriksa status pekerjaan sampai selesai (atau gagal).
• Saat tugas diproses, MP3 dianalisis dan larik data bentuk gelombang dikirim ke klien. Ada bentuk gelombang terpisah untuk tinggi, sedang, rendah (mirip dengan perangkat lunak DJ).
• Klien, setelah menerima larik data bentuk gelombang, memvisualisasikan data pada Kanvas HTML.

• Ini adalah tugas rekayasa perangkat lunak non-sepele : ada frontend, yang perlu terlihat layak. Ada backend, yang menangani pekerjaan asinkron dan pemrosesan suara.
• Ini membutuhkan beberapa perpustakaan pihak ketiga dan mencari tahu cara kerjanya.
• Diperlukan pengetahuan lintas disiplin : Anda perlu membaca mp3, melakukan transformasi fourier, dan membagi rentang frekuensi dengan benar.

Sepanjang pembuatan aplikasi, kami (ChatGPT dan saya) membuat iterasi kecil dan menguji apa yang kami miliki di setiap langkah. Kutipan dari transkrip di bawah ini adalah tautan ke baris yang sesuai dalam transkrip.

Sebuah front-end dasar

Tulis frontend situs web tempat pengguna mengunggah mp3 dengan drag and drop. mp3 kemudian diunggah ke backend untuk pemrosesan asinkron, dan ui menampilkan pembaruan status pada status pekerjaan (dalam antrian/diproses/selesai).

ChatGPT mencapai hasil yang masuk akal dengan hanya beberapa iterasi.

oke, sekarang tulis ulang bagian untuk menggunakan pure.css, dan tulis beberapa css untuk membuat halaman lebih cantik

Itu juga mudah.

Bagian belakang

oke, sekarang tulis aplikasi di node.js/express yang melayani halaman web di atas, dan juga mengirimkan pekerjaan yang memproses mp3 yang diunggah. Untuk saat ini, pemrosesan harus berupa pekerjaan dummy yang selesai dalam 5 detik.

Ini bekerja dengan segera. Kami berulang kali menambahkan lebih banyak fungsi ke pekerjaan :

bagus, sekarang buat skrip di atas menghitung panjang mp3 di pekerjaan

Ini cepat. Kemudian, masalah dimulai:

sempurna, sekarang ubah processMp3, sehingga mengembalikan objek analisis trek. Seharusnya terlihat seperti ini :
{
duration: <durasi lagu dalam detik>,
waveform: [{
lows: <nilai dari 0–100 menunjukkan kenyaringan frekuensi rendah pada bucket ini>,
mids: <nilai dari 0–100 menunjukkan kenyaringan frekuensi menengah pada ember ini>,
tertinggi: <nilai dari 0–100 yang menunjukkan kenyaringan frekuensi tinggi pada ember ini>,
}, … ]}

(array bentuk gelombang dalam objek harus memiliki 512 ember.)

Untuk melakukan Transformasi Fourier yang diperlukan, ChatGPT mencoba menggunakan pustaka yang mengasumsikan keberadaan objek global window, yang menunjukkan bahwa pustaka tersebut ditujukan untuk penggunaan front-end.

ini adalah perpustakaan ujung depan, mereka tidak berfungsi di backend menggunakan sesuatu yang lain

Disarankan menggunakan pydub, yang merupakan pustaka python, dan menghasilkan kode yang mencoba menggunakan pydub dalam javascript - yang jelas tidak berfungsi. Kemudian mulai mengada-ada:

ChatGPT: Dalam hal ini, Anda dapat menggunakan pustaka audio untuk melakukan analisis audio dan menghasilkan bentuk gelombang .

Itu kemudian menghasilkan sepotong kode yang menggunakan pustaka audio buatan yang tidak ada atau tidak dapat digunakan dengan cara itu. Dengan cepat mengakui kesalahannya:

Saya: tidak ada paket npm seperti itu

ChatGPT : Saya minta maaf, Anda benar. Tidak ada perpustakaan audio di npm. Dalam hal ini, Anda dapat menggunakan pustaka fourier-transform untuk melakukan analisis audio dan menghasilkan bentuk gelombang.

Kemudian menghasilkan sepotong kode yang masuk akal — kecuali menggunakan fungsi yang tidak didefinisikan:

let audio = await decode(audioData);

import { MP3Decoder } from "lamejs";

Maaf, pemrosesan audio di sisi server cukup rumit, terutama tanpa menggunakan pustaka yang sudah ada sebelumnya. Saya sarankan menggunakan perpustakaan yang sudah ada sebelumnya, seperti ffmpeg, sox, atau libsndfile, yang menyediakan API tingkat tinggi untuk pemrosesan audio. Pustaka ini dapat digunakan untuk mengekstrak data audio dari file MP3, memproses data audio untuk menentukan durasi dan kenyaringan audio, dan menghasilkan data bentuk gelombang.

Saat ditekan lebih lanjut, ChatGPT terus memberikan alasan dan cara untuk menghindari penulisan bagian yang jelas-jelas bermasalah.

Jelas sudah waktunya untuk mengambil langkah mundur. Saya meminta ChatGPT untuk menulis program dengan python , menjadikannya keluaran ke stdout, dan menjalankannya dari skrip node.js. Itu bekerja dengan baik, dan menghasilkan kode berikut:

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))

Menulis kode untuk memplot data bentuk gelombang tidaklah sulit, tetapi memerlukan beberapa iterasi dan beberapa proses debug dengan bantuan ChatGPT. Pada titik tertentu, saya menunjukkan kepada ChatGPT kutipan data bentuk gelombang untuk membantunya memperbaiki kodenya .

Arsitek dan Kode Monyet

Saya mengamati pemisahan tugas yang menarik selama proses ini:

• Saya bertindak sebagai arsitek perangkat lunak : Saya memutuskan apa yang akan dibangun dan membuat keputusan tentang keseluruhan desain. Saya membagi aplikasi menjadi bagian-bagian kecil yang dapat dibangun secara bertahap. Saya menunjukkan masalah keamanan. Saya melakukan pengujian.
• ChatGPT bertindak seperti monyet kode : Itu bekerja dengan baik di bagian yang membosankan: menulis kode aktual, men-debug, dan memutuskan pustaka apa yang akan digunakan.

Saya telah menghabiskan beberapa waktu untuk mencoba membuat ChatGPT bertindak sebagai arsitek perangkat lunak juga, dengan membuatnya menggunakan instance dirinya sendiri sebagai kode monyet. Sejauh ini, saya tidak berhasil, tetapi inilah yang saya coba:

Dalam percakapan ini, Anda akan berperan sebagai arsitek perangkat lunak yang membuat program dengan ChatGPT, AI pengkodean. Anda hanya dapat berinteraksi dengan dua agen:
* ChatGPT, dengan mengawali respons Anda dengan CHATGPT:
* Terminal unix, dengan mengawali respons Anda denganTERMINAL:

Semua pesan Anda, tanpa pengecualian, harus diawali dengan salah satu CHATGPT:atau TERMINAL:. Jangan keluar dari karakter. Jangan ajukan pertanyaan klarifikasi apa pun - alih-alih gunakan asumsi terbaik Anda. Saya akan membalas pesan Anda, berpura-pura menjadi ChatGPT atau terminal.

Sebagai arsitek perangkat lunak, Anda ahli dalam desain sistem tingkat tinggi, tetapi ingin mendelegasikan bagian penulisan perangkat lunak yang lebih membosankan (menulis kode sebenarnya) ke chatgpt. Namun, ChatGPT tidak pandai menangani proyek yang rumit, jadi Anda harus memecah proyek menjadi tugas-tugas kecil yang spesifik. ChatGPT juga membuat kesalahan, jadi Anda dianjurkan untuk menguji kode yang diberikannya.

Saya akan memberi Anda contoh percakapan yang dapat Anda lakukan, jika Anda ingin membuat aplikasi yang mencetak halo dunia ke keluaran standar:

— —
> CHATGPT: Tulis program dalam C++ yang menampilkan "Hello, world!".
> Oke, ini program Anda:

#include<cstdio> int main() { printf("Halo, dunia"); kembali 0; }

> TERMINAL: mkdir hello-world && cd hello-world && echo “#include<cstdio> int main() { printf(\”Halo, dunia\”); kembali 0; }” > prog.cpp && g++ prog.cpp && ./a.out
> Halo dunia!
— —

Oke. Sekarang buat aplikasi yang mencetak "Halo, dunia, lagi!" menggunakan chatgpt, seperti di atas.