Das Obige ist ein Screenshot einer mit ChatGPT erstellten Website. Das gesamte ChatGPT-Transkript finden Sie hier . Der resultierende Code befindet sich auf Github . Der abgebildete Musiktitel ist Transmission von Eelke Kleijn .

Die App

• Sie ziehen eine MP3-Datei per Drag-and-Drop auf die Box.
• Die Datei wird hochgeladen und eine asynchrone Hintergrundaufgabe wird in die Warteschlange gestellt. Das Frontend überprüft kontinuierlich den Status des Jobs, bis er abgeschlossen ist (oder fehlschlägt).
• Wenn die Aufgabe verarbeitet wird, wird die MP3-Datei analysiert und ein Wellenformdaten-Array an den Client gesendet. Es gibt eine separate Wellenform für Höhen, Mitten und Tiefen (ähnlich wie bei DJ-Software).
• Sobald der Client das Wellenformdaten-Array empfängt, visualisiert er die Daten auf einem HTML-Canvas.

• Es ist eine nicht triviale Software-Engineering-Aufgabe : Es gibt ein Frontend, das anständig aussehen muss. Es gibt ein Backend, das sich um asynchrone Jobs und Soundverarbeitung kümmert.
• Es erfordert mehrere Bibliotheken von Drittanbietern und das Herausfinden ihrer Funktionsweise.
• Fachübergreifendes Wissen ist erforderlich : Sie müssen die MP3 lesen, eine Fourier-Transformation durchführen und die Frequenzbereiche korrekt aufteilen.

Während der Entwicklung der App haben wir (ChatGPT und ich) kleine Iterationen durchgeführt und bei jedem Schritt getestet, was wir hatten. Die Zitate aus dem Transkript unten sind Links zu den entsprechenden Zeilen im Transkript.

Ein einfaches Frontend

Schreiben Sie das Frontend einer Website, auf der Benutzer eine MP3-Datei per Drag & Drop hochladen. Die MP3-Datei wird dann zur asynchronen Verarbeitung in das Backend hochgeladen und die Benutzeroberfläche zeigt Statusaktualisierungen zum Status des Auftrags an (in der Warteschlange/in Bearbeitung/abgeschlossen).

ChatGPT kam mit nur wenigen Iterationen zu einem vernünftigen Ergebnis.

Okay, schreiben Sie jetzt den Abschnitt um, um pure.css zu verwenden, und schreiben Sie etwas CSS, um die Seite schöner zu machen

Das war auch einfach.

Das Backend

Okay, schreiben Sie jetzt eine App in node.js/express, die die obige Webseite bedient und zusätzlich Jobs versendet, die die hochgeladenen MP3s verarbeiten. Im Moment sollte die Verarbeitung ein Dummy-Job sein, der einfach in 5 Sekunden abgeschlossen ist.

Das hat sofort funktioniert. Wir haben dem Job schrittweise weitere Funktionen hinzugefügt :

Großartig, lassen Sie jetzt das obige Skript die Länge der MP3 in den Jobs berechnen

Das ging schnell. Dann begannen die Probleme:

Perfekt, ändern Sie jetzt ProcessMp3, sodass ein Track-Analyseobjekt zurückgegeben wird. Es sollte so aussehen :
{
Dauer: <Lieddauer in Sekunden>,
Wellenform: [{
Tiefen: <ein Wert von 0–100, der die Lautstärke der tiefen Frequenzen in diesem Bereich angibt>,
Mitten: <ein Wert von 0–100, der angibt die Lautstärke der mittleren Frequenzen in diesem Bereich>,
Höhen: <ein Wert von 0–100, der die Lautstärke der hohen Frequenzen in diesem Bereich angibt>,
}, … ]}

(Das Wellenform-Array im Objekt sollte 512 Buckets haben.)

Um die erforderliche Fourier-Transformation durchzuführen, hat ChatGPT versucht, Bibliotheken zu verwenden, die die Existenz eines globalen windowObjekts voraussetzen, was darauf hinweist, dass sie für die Front-End-Verwendung gedacht sind.

Dies sind Front-End-Bibliotheken. Sie funktionieren nicht im Backend. Verwenden Sie etwas anderes

Es wurde vorgeschlagen, Pydub zu verwenden, eine Python-Bibliothek, und Code erstellt, der versucht, Pydub in Javascript zu verwenden – was offensichtlich nicht funktioniert. Dann fing es an, Dinge zu erfinden:

ChatGPT: In diesem Fall können Sie die Audiobibliothek verwenden, um eine Audioanalyse durchzuführen und die Wellenform zu generieren .

Anschließend wurde ein Code erstellt, der eine erfundene Audiobibliothek verwendet, die nicht existiert oder nicht auf diese Weise verwendet werden kann. Es gab schnell seinen Fehler zu:

Ich: Es gibt kein solches NPM-Paket

ChatGPT : Es tut mir leid, Sie haben Recht. Es gibt keine Audiobibliothek in npm. In diesem Fall können Sie die Fourier-Transformationsbibliothek verwenden, um eine Audioanalyse durchzuführen und die Wellenform zu generieren.

Dann wurde ein Code erstellt, der Sinn ergibt – mit der Ausnahme, dass eine Funktion verwendet wurde, die nicht definiert war:

let audio = await decode(audioData);

import { MP3Decoder } from "lamejs";

Es tut mir leid, aber die Verarbeitung von Audio auf der Serverseite ist ziemlich komplex, insbesondere ohne die Verwendung einer bereits vorhandenen Bibliothek. Ich empfehle die Verwendung einer bereits vorhandenen Bibliothek wie ffmpeg, sox oder libsndfile, die eine High-Level-API für die Audioverarbeitung bereitstellt. Diese Bibliotheken können verwendet werden, um die Audiodaten aus der MP3-Datei zu extrahieren, die Audiodaten zu verarbeiten, um die Dauer und Lautstärke des Audios zu bestimmen, und die Wellenformdaten zu generieren.

Als ChatGPT stärker unter Druck gesetzt wurde, fand es immer wieder Ausreden und Möglichkeiten, das Schreiben des Teils zu vermeiden, mit dem es offensichtlich zu kämpfen hatte.

Offensichtlich war es an der Zeit, einen Schritt zurückzutreten. Ich habe ChatGPT gebeten, das Programm in Python zu schreiben , es auf stdout auszugeben und es über das node.js-Skript auszuführen. Das hat gut funktioniert und den folgenden Code erzeugt:

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

Das Schreiben des Codes zum Plotten der Wellenformdaten war nicht schwer, erforderte jedoch einige Iterationen und etwas ChatGPT-gestütztes Debugging. Irgendwann habe ich ChatGPT einen Auszug von Wellenformdaten gezeigt, um ihm bei der Korrektur seines Codes zu helfen .

Der Architekt und der Code-Affe

Dabei habe ich eine interessante Aufgabenteilung beobachtet:

• Ich fungierte als Software-Architekt : Ich entschied, was gebaut werden sollte, und traf eine Entscheidung über das Gesamtdesign. Ich habe die App in kleine Teile unterteilt, die schrittweise erstellt werden können. Ich habe auf Sicherheitsbedenken hingewiesen. Ich habe den Test gemacht.
• ChatGPT verhielt sich wie ein Code-Affe : Es meisterte die langweiligen Teile gut: das Schreiben des eigentlichen Codes, das Debuggen und die Entscheidung, welche Bibliotheken verwendet werden sollten.

Ich habe einige Zeit damit verbracht, ChatGPT dazu zu bringen, auch als Software-Architekt zu fungieren, indem ich dafür gesorgt habe, dass es eine andere Instanz von sich selbst als Code-Affe verwendet. Bisher hatte ich keinen Erfolg, aber ich versuche Folgendes:

In diesem Gespräch schlüpfen Sie in die Rolle eines Softwarearchitekten, der mit ChatGPT, einer Codierungs-KI, ein Programm erstellt. Sie können nur mit zwei Agenten interagieren:
* ChatGPT, indem Sie Ihre Antworten mit voranstellen. CHATGPT:
* Ein Unix-Terminal, indem Sie Ihren Antworten mit voranstellenTERMINAL:

Allen Ihren Nachrichten muss ausnahmslos entweder CHATGPT:oder vorangestellt werden TERMINAL:. Brechen Sie nicht aus Ihrem Charakter aus. Stellen Sie keine klärenden Fragen – gehen Sie stattdessen von Ihren besten Annahmen aus. Ich werde auf Ihre Nachrichten antworten und dabei vorgeben, entweder ChatGPT oder das Terminal zu sein.

Als Softwarearchitekt sind Sie gut im Systemdesign auf hohem Niveau, möchten aber die langweiligeren Teile des Softwareschreibens (das Schreiben des eigentlichen Codes) an chatgpt delegieren. Allerdings ist ChatGPT nicht gut für die Bewältigung komplexer Projekte geeignet, sodass Sie das Projekt in kleine spezifische Aufgaben aufteilen müssen. ChatGPT macht auch Fehler, daher empfehlen wir Ihnen, den bereitgestellten Code zu testen.

Ich gebe Ihnen ein Beispiel für ein Gespräch, das Sie führen könnten, wenn Sie eine App erstellen möchten, die „Hallo Welt“ auf der Standardausgabe ausgibt:

— —
> CHATGPT: Schreiben Sie ein Programm in C++, das „Hello, world!“ ausgibt.
> Okay, hier ist Ihr Programm:

#include<cstdio> int main() { printf("Hallo Welt"); 0 zurückgeben; }

> TERMINAL: mkdir hello-world && cd hello-world && echo „#include<cstdio> int main() { printf(\“Hello, world\“); 0 zurückgeben; }“ > prog.cpp && g++ prog.cpp && ./a.out
> Hallo Welt!
— —

Okay. Erstellen Sie nun eine App, die „Hello, world, again!“ ausgibt. mit chatgpt, wie oben.