ppedv.de Website relaunch by Codex

Seit über 10 Jahren wurde die ppedv Web Seite nicht mehr relevant überarbeitet. Neue Kurs Agenda da oder Kursblatt dort. Diese Website ist nicht nur HTML und CSS, sondern ein Ecosystem auf Basis von ASP.NET Webforms und Visual Basic. Mehrere Generationen von ppedv Mitarbeitern haben ihre mehr oder weniger kreativen Ergüsse darin verewigt.

Relaunch war immer ein Projekt für die Zukunft. Jetzt ist da keine Zeit dafür.

Genau das ist es, wo ich AI sehe. Aufgaben und Prozesse zusätzlich erledigt zu bekommen.

Bilder und Grafiken wurden früher wirklich durch entsprechende Job Position erledigt. Zwischenzeitlich war es dann eher minimalistisch gelöst. .Jetzt reicht ein Prompt.

ppedvweb1

Für erste Experimente habe ich mein Abo von OpenAi für 20$ pro Monat genutzt. Neben Webchat und Desktop App mit Codex gestartet. Zwischen drin auch Antrophic Abo und Claude. Fand ich tatsächlich einen Hauch innovativer. Aber Claude Abo lief aus.
Meine Anforderungen:
-KI braucht Zugriff auf Source Code
-KI soll selbst ändern und deployen können
-Bilder passend zum Inhalt
-SEO und JSON LD
-Inhaltlich aktualisieren

Man könnte aspx, VB, CSS, Js, ASCX, JPG, PNG Dateien in ein Github Repository legen und dann OpenAi Zugriff gewähren. Das hat viele Vorteile und einen Nachteil. Ich wollte es lokal, weil ich die LLM Option lokal im Hinterkopf habe. Aber erst mal das Beste und Mächtigste Modell.

Also die komplette Website auf C: und auf geht’s mit Chat.
In den ersten Versuchen musste ich jede Code Änderung per Hand bestätigen, bis ich bemerkte wenn man ihm Sandbox Modus gibt, das ändern der Dateien keine Bestätigung mehr braucht. Im Chat noch automatischer Review aktivieren.
Bei mir läuft Visual Studio und IIS Express, so das Codex tatsächlich die Seiten per Playwright in einem Review aufruft und noch einmal Layout überprüft. Coole Sache.

Sogar den Deploy habe ich mir von der KI per FTP erledigen lassen. Dazu die Zugangsdaten per Setx als Umgebungsvariablen angelegt und die Namen der KI mitgeteilt. Per Kommando deploy im Codex Chat wurden die Dateien kopiert. Allerdings war diese nicht so eine gute Idee. Das ganze verbratet Token ohne Ende und man läuft dann doch in Limits.
ppedvweb2

Ich habe mir später ein Powershell Script erstellen lassen, das ich manuell ausführe um den FTP Transfer zu erledigen. Tatsächlich kann man das Script auch von Codex anstubsen lassen. In meinem ersten Versuch hat er es jedes Mal den PS Code neu erstellt. Das dauert und kostet Token. Ein wichtiges Learning. Prozessbeschreibungen im Dialog klären, um dann den Code zu bekommen es zu automatisieren!

Im ersten Schritt wurden ein paar Muster Seiten per Prompt Dialog modernisiert. Ich war begeistert, sah super aus. Meine Anforderungen: Nimm Bootstrap 5 (wir hatten alles ab 3), überschreib die Styles und wo es nicht passt nimm custom css Klassen.
Mein erster Stolperstein: von ASPX Seite zu Seite musste ich Dinge im Chat immer wieder wiederholen, die ich vorher schon für geklärt hielt. Das LLM hat vergessen. Ein Problem des Kontext Fensters.
Der Kontext ist der Input der komplett ins LLM übergeben wird. Das hat nur einen limitierte Größe. Und wenn du dir alle Bootstrap Klassen und den ganzen Rest deiner Website merken sollst, geht das offensichtlich nicht. Codex fängt an die Erinnerung zu komprimieren, was zum einem mit längerem Dialog dauert und zum anderen zu seltsamen Effekten führt. Aus Freude wird Ärger über die dumme LLM
ppedvweb3

Dann kam ich auf die Idee mir Skills generieren zu lassen. Skills ist eine neuere Entwicklung im AI Universum, die das Problem der Komplexität von Agenten lösen soll. Ich würde das als Expertise bezeichnen. Bei Codex liegen die in einem speziellen Ordner mit dem Namen des Skills und die Datei ist immer skill.md.

ppedvweb7

Inhalt der MD Dateien eigentlich nur ein umfangreicher Prompt im Markdown Format. Ich strukturiere das pro Expertise.


Skill für ppedv Website
Skill für Kursblätter samt Bild
Skill für Content eines Kursblattes

Das LLM erstellt und aktualisiert den Skill auf Anforderung selber, den Skill zu verwenden. Nicht explizit, sondern über den Kontext.
Verblendet von den Erfolgserlebnissen übersah ich, das Codex immer wieder idente CSS Klassen für jede Page generierte. Die CSS Datei explodierte. Einfaches Beispiel –Text Rechts ist text-end in Bootstrap 5. Codex generierte für jede Seite eine pp-page1-right Klasse. Darauf hab ich in mind 3x hingewiesen. Der Dialog mit Codex wurde plötzlich mühsam und unproduktiv.
Also erst die generellen Regeln formuliert. Dann sehr lange und penibel für zwei drei Kursblätter und immer wieder zu Codex “aktualisiere den Skill”. Das ist eigentlich eine Prozessdokumentation und ein lernjob für mich. Ich wusste ja gar nicht was ich wollte.

Das geht sogar soweit, das mein Kursblatt Skill eine Anweisung enthält den Content Skill ggf selbst zu verändern. Eigentlich ist der Inhalt des Kurs Produktes vom Produkt Manager in Stein gegossen, um die KI nicht selbstständig Kursinhalte ändern zu lassen. Aber ehrlich: SQL Server 2012 im Jahre 2026…. Eines der besseren Features: automatisch Zusammenhänge zu erkennen und in den Content Skill einzubauen: Diese Power Woche setzt sich aus diesem und diesem Kurs zusammen.

Also um es klar zu sagen: die KI erfindet die Texte, Bilder und das HTML/CSS neu anhand meines Content Skills und der Layout Skills.

ppedvweb4

Für die Bilder greife ich meist ein, weil die sonst alle gleich aussehen. Schreibe ich einmal “Mensch am Schreibtisch… “ dann sind alle weiteren Bilder in dem Layout. So ein Bildprompt geht durchaus über 5-6 Zeilen.
Nachdem ich den  Prozess für mich fertig hatte und mein Limit Codex ausgeschöpft war, ein Openai für 200$ Abo. Das sollte einem der komplette Relaunch der Website wert sein. Auf keinen Fall will ich warten. Mit /Fast (CLI) soll es  auch doppelt so schnell gehen.

ppedvweb5

Das Gegenteil ist der Fall. Ich warte immer länger, Codex hängt Minutenlang. Am Ende dauert das addieren von 1+2 im Chat 15 Minuten. Das Web ist voll von Beschwerden.
Tatsächlich hat mich auch ein Github Issue auf den Trichter gebracht einfach einen neuen Chat zu eröffnen. Und schwupp klappt das auch so in etwa erwartungsgemäß.

ppedvweb8

Den umfangreichen Einweisungsprompt lasse ich mir im alten Chat erstellen.

Kommen wir zum einem weiteren negativen Punkt. Was mache ich mit der gewonnen Zeit?  Es sind gut 160 Kursblätter, die ich nicht vollautomatisch erneuern lassen will. Ich habe gelernt, das LLM driftet von der Anweisung ab, es gibt neue unbekannt Anwendungsfälle und die Bilderstellung ist zu monoton. Ich will das LLM überwachen. 
Sowohl auf Inhalt aber auch Bild werfe ich einen Blick drauf. Unterbricht jedes Mal meine Arbeit. Wie ein Teamkollege der dauern im Teams Chat anklopft.

ppedvweb6

Hier ist plötzlich der Preis und Termine links statt rechts.

Auf diese Frage habe ich keine Antwort. Der Zeitaufwand real pro Kursblatt wäre sicher 1h. So benötige ich 2-3 Minuten. Aber leider verteilt über Tage, weil Laufzeit pro Kursblatt 10-20 Minuten.
.

Kommentare sind geschlossen