Wie man mit ChatGPT Oberflächen für PyQt5-Programme baut
Nein, ChatGPT macht nicht alles vollautomatisch. Aber im Buch ChatGPT, OpenAI und der blaue Planet lernen Sie kennen, was schon alles „halbautomatisch“ geht. Dort wird im Kapitel 7 gezeigt, wie man Webseiten abtastet, und so Informationen extrahiert. Solch ein Web-Crawler erzeugt dann per Python-Script eine CSV-Datei mit über 8400 Datensätzen. Wahlweise auch mit weiteren Feldern und als XLS-Datei. Natürlich können Sie ChatGPT-4o auch lediglich mit einigen Worten beschreiben, wie Sie sich die Bedienoberfläche zur CSV-Datei vorstellen. Aber es geht noch einfacher:
Auf https://progpi.de/gpt-4o-klug-und-schnell/#Bildanalyse haben Sie vielleicht schon die verblüffenden Fähigkeiten von ChatGPT-4o kennengelernt, Bilder inhaltlich zu analysieren.
Von der Skizze zu Programm
Mit einer groben handgezeichneten Skizze der geplanten Bedienoberfläche und ein paar guten Prompts, die sich auf Felder in der Skizze beziehen, kommen Sie erstaunlich weit. Hier nochmals die Skizze:
Über den Büroklammer-Button wird die grobe Layout-Skizze dem Prompt als Datei hinzugefügt.
Die Daten zur Skizze
Aber bevor Sie loslegen können, brauchen Sie natürlich noch Daten. Entweder holen Sie sich eine passende CSV-Datei aus dem Downloadbereich zum ChatGPT-Buch , oder Sie starten mit einem eigenen kleinen und kompakten Datensatz wie diesem:
Name;Geburtsdatum;Todesdatum;Beschreibung
Abbe, Ernst;23. Januar 1840;14. Januar 1905;deutscher Physiker, Unternehmer
Antonius der Große;ca 251;ca. 356;christlicher Mönch, Asket und Einsiedler
Arnim, Bettina von;4. April 1785;20. Januar 1859;deutsche Schriftstellerin
Bach, Johann Sebastian;21. März 1685 (JK);28. Juli 1750;deutscher Komponist
Balzac, Honoré de;20. Mai 1799;18. August 1850;französischer Schriftsteller
Copernicus, Nicolaus;19. Februar 1473;24. Mai 1543;Domherr, Astronom
Darwin, Charles;12. Februar 1809;19. April 1882;britischer Naturforscher
Die (handgezeichnete) Skizze der geplanten Bedienoberfläche und die vorhandenen Daten müssen allerdings zueinander passen. Als ersten Schritt bekommt ChatGPT-4o die Skizze über das Büroklammer-Icon und zusätzlich folgenden Prompt:
Mach mir Python Code für eine Qt-GUI nach dem Foto
Die CSV-Datensätze haben folgendes Format:
Name;Geburtsdatum;Todesdatum;Beschreibung
Abbe, Ernst;23. Januar 1840;14. Januar 1905;deutscher Physiker, Unternehmer
Antonius der Große;ca 251;ca. 356;christlicher Mönch, Asket und Einsiedler
Die csv-Datei soll als Parameter angegeben werden. Suchresultate nach Enter im Volltextfeld
anzeigen. Dort z.B. Physiker, Chemiker, Politiker als ODER Suche interpretieren und im Trefferfeld
dann z.B. 1/34 statt der Gesamtmenge der Treffer anzeigen.
Entwicklungszyklen mit ChatGPT-4o für die Oberfläche des Programms
Nachfolgend können Sie erleben, wie sich die Python-Oberfläche mit jedem weiteren Prompt verbessert. Der gesamte Chatverlauf ist als autorenQtGUI.pdf im Download für Kapitel7 enthalten. Hier soll der Fokus eher auf den Screenshots der Oberfläche liegen, was zum ersten Entwurf von ChatGPT führt:
Hier ist ein Beispiel für einen Python-Code, der eine Qt-basierte GUI mit PyQt5 erstellt, die den Anforderungen auf dem Bild entspricht. Die Anwendung kann eine CSV-Datei laden und eine Volltextsuche durchführen, bei der Suchbegriffe als „ODER“ interpretiert werden. [test01.py]
Features
- CSV Laden: Die Daten aus der CSV-Datei werden geladen und in der GUI angezeigt.
- Volltextsuche: Die Suche durchsucht die Beschreibung mit einer „ODER“-Logik basierend auf den eingegebenen Keywords.
- Navigation: Mit den Tasten << und >> kann zwischen den Treffern navigiert werden.
- Trefferanzahl: Die aktuelle Trefferanzahl wird in der Form 1/34 angezeigt.
Benötigte Python-Bibliotheken
• PyQt5 (pip install pyqt5)
Ein Button zum Laden der CSV-Datei war nicht in der Skizze und noch hat ChatGPT-4o nicht ganz verstanden, was zu tun ist. Folglich folgender Prompt:
Die *.csv-Datei soll beim Start als Parameter angegeben werden. Kein Button zum Laden. Labelfelder für Geburtstag und Todestag getrennt. Alle Labelfelder mit passenden CSV-Daten füllen. Nur die grünen Felder der Skizze sind Eingabefelder.
Hier ist eine angepasste Version des Codes, bei dem die CSV-Datei als Startparameter übergeben wird und keine Schaltfläche zum Laden der Datei benötigt wird. Die Geburtstags- und Todestagsfelder sind getrennte Labels, und nur die grünen Felder auf der Skizze (das Volltextfeld) sind als Eingabefelder definiert. [test02.py]
Anpassungen im Code
1. CSV als Parameter:
• Die CSV-Datei wird beim Start des Programms über die Kommandozeilenargumente angegeben.
• Beispiel: python navigator.py daten.csv
2. Trennung der Felder:
• Geburtstags- und Todestagsinformationen werden in separaten QLabel-Feldern angezeigt.
3. Eingabefelder:
• Nur das Suchfeld (search_input) ist bearbeitbar. Alle anderen Felder (QLabel) sind rein für die Anzeige der CSV-Daten.
4. Initiale Ansicht:
• Beim Start wird die gesamte CSV-Liste ohne Filter angezeigt.
Aufrufbeispiel………
Nun hat ChatGPT-4o den Python Code (auf Basis von PyQt5.QtWidgets) so geschrieben, daß erstmals die als Parameter angegebene Datei gelesen und die Anzahl der Datensätze durchklickbar angezeigt wird. Auch die Suche im Feld „Beschreibung“ funktioniert. Allerdings ist das Layout immer noch linksbündig und es fehlen auch Buttons. Folglich folgender Prompt:
Halte dich beim Layout an die Skizze und setze alle Buttons um. Symmetrische zentrierte Darstellung ohne überflüssige Beschriftungen
Hier ist der angepasste Python-Code, der das Layout exakt gemäß der Skizze umsetzt. Die Darstellung ist zentriert, symmetrisch und ohne überflüssige Beschriftungen. Alle Buttons sind entsprechend der Skizze umgesetzt. [test03.py]
Die Buttons << und >> sind jetzt zwar vorhanden, bewirken aber ein Sprung zum allerersten bzw allerletzten Datensatz. Das soll besser werden:
Die Buttons << und >> sollen einen Sprung um 1/10 der Treffermenge durchführen. Den Sprungwert auf einen durch 5 teilbaren Wert runden
Hier ist der aktualisierte Code, der die Buttons << und >> so modifiziert, dass sie einen Sprung um 1/10 der Trefferanzahl machen. Der Sprungwert wird dabei auf einen durch 5 teilbaren Wert gerundet. [test04.py]
Die Buttons sind jetzt voll funktionsfähig und ein 10% Sprung vorwärts hat zum Datensatz 846 geführt. Auch die Oder-Suche und das Durchklicken der Treffermenge scheint zu funktionieren:
Welche CSV-Daten werden durchsucht?
In der (etwas verfrühten) Annahme, daß die Suche schon perfekt funktioniert, sollen neue Funktionen hinzukommen:
Setze unter das Eingabefeld nebeneinander drei Radiobuttons:
Suchmodus: o Namen o Beschreibung o Volltext
und schalte den Suchmodus entsprechend um
Bei „Volltext“ muß nun stets die Summe der Datensätze aus „Namen“ und „Beschreibung“ herauskommen. Dabei ist die Suche auch auf Teilstrings sensitiv. So finden Sie (im großen Datensatz mit 8428 Treffern) bei Eingabe von „öst“ im Feld „Namen“ nur wenige Namen wie z.B. „Köster“ während „Beschreibung“ über 600 österreichische Treffer liefert.
Da Sie die Weiterentwicklung des Programmcodes durch ChatGPT an allen test*.py Dateien gerne selbst nachvollziehen können, seinen hier mehrere Prompts zusammengefasst:
Setze in der Captionleiste hinter „Navigator“ den CSV-Dateinamen und dahinter die Datensatzanzahl
Mach rechts neben die Radiobuttons einen Button „Wikipedia“ der bei Betätigung nach dem Namen der angezeigten Person sucht.
Das geht so nicht. Starte Chromium, und darin Wikipedia mit der Person
Für Wikipedia alle Vornamen nach vorn ziehen und das Komma weglassen
Ein Link zu Wikipedia
Nach ein paar Änderungen durch ChatGPT funktioniert auch die Wikipedia Suche, und es kann z.B. Rudolf Diesel gefunden und angezeigt werden.
Es soll auch die Möglichkeit bestehen, einen Datensatz per absoluter Nummer anzusteuern. Dafür war in der Skizze ein bisher nicht umgesetztes, kleines und mittiges Feld vorgesehen. Aber eleganter ist vielleicht folgende Lösung:
Wenn im grünen Eingabefeld #222 angegeben wird, soll direkt zu diesem absoluten Datensatz gesprungen werden und danach das Eingabefeld leer sein
ChatGPT-4o setzt diese Vorgabe perfekt um, und eleganterweise kommt auch noch ein dezenter Hinweis in das Eingabefeld, was sehr benutzerfreundlich ist. Nun zu einem neuen Test der ODER-Suche:
Leider funktioniert die Oder-Suche möglicherweise seit dem Einbau der Radio-Buttons nicht mehr korrekt. Denn „physiker, chemiker“ führt jetzt zu einer sehr kleinen Treffermenge mit lediglich 3 Treffern. ChatGPT darf also nochmal ran:
Die Eigenschaft bei „physiker, chemiker“ sowohl physiker pur als auch chemiker pur zu finden ist verlorengegangen.
Nun stellt sich heraus, daß die früher mal ermittelten 185 Treffer für „physiker, chemiker“ ebenfalls nicht korrekt waren. Unter den nun angezeigten Treffern sind jede Menge Physiker, Chemiker, oder Doppelberufler was der ODER Suche entspricht. Und eine Schnittmenge soll es auch noch geben:
OK, und jetzt soll „physiker+chemiker“ eine Schnittmenge bilden
Was hat uns ChatGPT-4o gebaut?
Zusammenfassend bleibt festzustellen, daß alle Anweisungen den Code zu ändern ausschließlich per Prompt erteilt werden konnten. Darüber hinaus hat ChatGPT kein einziges Mal einen Hinweis dazu bekommen wo im Python Quelltext Fehler oder funktionale Defizite vorliegen. Mit anderen Worten: Für die Funktionsfähigkeit der erstellten Python-Skripts waren keine Programmierkenntnisse erforderlich. Wie stark sich der Programmcode durch die jeweiligen Prompts verändert hat, ist auch an den Dateigrößen erkennbar:
3907 Byte test01.py
4345 Byte test02.py
5567 Byte test03.py
6188 Byte test04.py
8175 Byte test05.py
8366 Byte test06.py
8902 Byte test07.py
8938 Byte test08.py
9178 Byte test09.py
10120 Byte test10.py
10444 Byte test11.py
10792 Byte test12.py
11014 Byte test13.py
11980 Byte navigatorGUI.py
Ganz fehlerfrei ist test12.py übrigens noch nicht, was zu folgendem Prompt führt:
Wenn es keinen offenen Browser gibt, bevor das Python-Skript gestartet wird, dann blockiert die GUI nach der ersten Wikipedia-Anzeige
ChatGPT-4o erzeugt nun test13.py mit behobenem Fehler. Dann soll noch ein „Export-Button“ hinzukommen…..
Jetzt wäre anzumerken, daß ChatGPT ein paar mal die Anweisung „den ganzen Code“ bekommen hat (wer noch nie programmiert hat, braucht es so), was den Chat natürlich verlängert. Nun kann ChatGPT-4o eine Version test14.py (zumindest temporär) nicht mehr komplett erstellen, und der Code ist unvollständig. Es ist damit Zeit für einen neuen Chat mit test13.py als Anlage:
ChatGPT wird jetzt nicht mehr mit einer unnötig gewordenen Hand-Skizze und Zwischenresultaten belastet und produziert navigatorGUI.py (bzw. den Code für die Zwischenablage) völlig problemlos:
CSV-Daten exportieren
Die Kurzanleitung hat ChatGPT-4o ohne weitere Hinweise erstellt. Und auch der neue Export-Button ist funktionsfähig:
Ein Klick auf Export erzeugt eine neue CSV-Datei mit 31 Datensätzen, in denen „Charles“ bei den Namen oder in der Beschreibung vorkommt.
Zusammenfassung:
Ob es gelingt, ChatGPT (oder auch Perplexity) quasi unüberwacht Code schreiben zu lassen, hängt im wesentlichen davon ab, welche Bibliotheken ChatGPT heranziehen kann, und wieviel Quelltext für die Aufgabenstellung schon in den Trainingsdaten des LLM (Large Language Model) existierte. Man sollte bei jeder Programmentwicklung bedenken, daß ChatGPT lokal abgelegte Dateien nicht kennt und möglicherweise aus Datenschutzgründen auch nie kennenlernen soll. Für die Erstellung der graphischen Oberfläche genügte hier eine grobe Skizze und ein Beispieldatensatz, der auch in der Skizze vorkommt. Das reichte für die Feldzuordnung vollkommen aus. Der hier experimentell durchgeführte Verzicht, den von ChatGPT erzeugten Code anzuschauen kann allerdings nur bei einfachen Aufgabenstellungen funktionieren.
Haben Sie ChatGPT auch schon „unüberwacht“ Code programmieren lassen? Kommentare sind erwünscht.
In einer Welt, wo Bytes und Bits regieren,
Erhebt sich ChatGPT, um uns zu führen.
Ein künstlich‘ Hirn, von Menschenhand gemacht,
Das Worte webt und kluge Sätze schafft.
Es denkt in Codes, versteht der Sprache Klang,
Hilft Dir beim Schreiben, Tag für Tag entlang.
Ob Poesie, ob Prosa, tief durchdacht,
Mit ChatGPT wird’s meisterhaft vollbracht.
Doch nicht nur Worte formt es mit Bedacht,
Auch Programme werden hier erdacht.
Python, die Sprache, die es oft benutzt,
Damit dein Code in neuer Klarheit nutzt.
(ChatGPT-Dichtkunst)
