Die beste Spezifikation, die Sie je für einen Bildschirm bekommen werden, ist ein Bild des Bildschirms, den er ersetzt. Es ist auch das Einzige, was ein Codegenerator nicht lesen kann. sgcWebSockets 2026.10 fügt dem visuellen sgcHTML-Designer einen KI-Seitengenerator hinzu: Beschreiben Sie die Seite in einem Satz, oder geben Sie ihm einen Screenshot, und er baut die Seite aus Ihren Komponenten.
Was dabei herauskommt, ist kein Markup und kein Framework. Es sind gewöhnliche sgcHTML-Komponenten, die dem Formular gehören, im Object Inspector bearbeitbar, exportierbar als Object Pascal, das auch ohne installierten Designer kompiliert.
Beschreiben Sie sie
In der IDE sitzt das Prompt-Feld in der Symbolleiste der Registerkarte Web Design, neben Generate und Refine. In einer Anwendung, die den Designer selbst hostet, ist es eine Komponente:
uses
sgcHTMLDesign_AI;
FGenerator := TsgcHTMLDesignAIGenerator.Create(Self);
FGenerator.Surface := oSurface;
FGenerator.APIKey := ReadSetting('openai.key');
FGenerator.Model := 'gpt-4o-mini';
oErrors := TStringList.Create;
try
vTree := FGenerator.Generate(
'an orders page with a search box, a grid of this month''s orders ' +
'and a chart of the totals by customer', oErrors);
if vTree <> '' then
FGenerator.Apply(vTree, oErrors);
finally
oErrors.Free;
end;Oder fotografieren Sie sie
Derselbe Generator liest auch ein Bild. Ein Screenshot der Anwendung, die ersetzt wird, ein Mockup aus einem Designwerkzeug, ein Foto einer Skizze auf einem Whiteboard:
vTree := FGenerator.GenerateFromImage('C:\shots\orders.png',
'ignore the sidebar', oErrors);Die Beschreibung ist dort optional und grenzt ein, worauf zu achten ist, statt die Seite zu beschreiben. Sie liest das Layout, die Überschriften, die Spalten einer Tabelle und die Beschriftungen eines Formulars aus dem Bild und schreibt das Gelesene in die Captions. Im Designer heißt die Schaltfläche From image, und was zurückkommt, ist derselbe Kandidat mit demselben Accept und Discard.
Sie antwortet mit einem Design-Baum, nicht mit Code
Das ist der Teil, der den Unterschied zwischen einem Spielzeug und etwas ausmacht, das Sie in die Nähe eines Projekts lassen würden. Das Modell schreibt niemals Markup und niemals Pascal. Es antwortet mit einem Design-Baum: demselben JSON, das die Design-Oberfläche selbst speichert und lädt.
{"version":1,"nodes":[
{"kind":"section","caption":"Orders","children":[
{"kind":"row","children":[
{"kind":"column","width":12,"children":[
{"kind":"component","class":"TsgcHTMLComponent_Grid",
"props":{"ElementID":"orders","Title":"Orders of the month"}}
]}]}]}]}Fünf Knotentypen, und einer von ihnen benennt eine Komponentenklasse. Genau dort liegen die Grenzen.
Drei Grenzen, und keine davon ist der Prompt
Das Schema stammt aus Ihrer Registrierung. Die Anfrage trägt ein JSON-Schema, dessen Klassenaufzählung genau der Menge der registrierten Komponenten entspricht, weiter eingeschränkt durch die Eigenschaft Classes. Das Modell kann keine Klasse benennen, die nicht existiert, oder eine, die Sie nicht angeboten haben.
Die Antwort wird normalisiert. NormalizeTree verwirft jeden Schlüssel, den es nicht kennt, verwirft einen Knoten, dessen Klasse nicht registriert ist, begrenzt den Baum auf MaxNodes und schreibt die Eigenschaftsliste in die Form um, die die Oberfläche liest.
Die Oberfläche liest streng. LoadTreeJSON überspringt und meldet einen unbekannten Knotentyp, eine nicht registrierte Klasse, eine Eigenschaft, die nicht existiert oder nicht beschreibbar ist, und einen Wert, den die Eigenschaft ablehnt. Sie erhalten immer die Liste dessen, was nicht überlebt hat.
Markup ist das Einzige, dem ein generierter Baum niemals vertraut wird. Ein html-Knoten wird als maskierter Text geladen, sofern AllowRawHTML nicht aktiviert ist, sodass ein Modell, das dazu gebracht wurde, mit einem Skript zu antworten, dieses Skript nur als sichtbaren Text auf die Seite setzt und sonst nichts.
Erst Kandidat, dann Seite
Generate beginnt bei null. Refine geht von der Seite aus, wie sie jetzt ist, und fragt nach der gesamten Seite nach der Änderung, niemals nach einem Patch, damit beide verglichen werden können. Keines von beiden rührt die Seite an: Sie antworten mit einem Baum, und Apply ist es, was ihn auf die Oberfläche setzt. Das ist es, was Accept und Discard ehrlich hält, und Accept behält einen Schritt Rückgängig.
Wo der Schlüssel lebt
Auf Ihrem Rechner, nicht im Projekt. Die Einstellungsseite ist Tools › Options › Third Party › sgcHTML AI page generator: Anbieter, API-Schlüssel, Modell, eine optionale Basis-URL, die Sprache, in der die Captions angefragt werden, und der größte Baum, der akzeptiert wird. Der Schlüssel wird pro Benutzer gespeichert und niemals in die .dfm, die .dproj oder die Seite geschrieben, was ihn aus der Versionskontrolle heraushält.
Aktualisierung
Der Generator ist Teil von sgcHTML. Der Anbieterpfad nutzt die KI-Units, die nur unter Windows verfügbar sind: Ohne sie kompiliert die Komponente trotzdem und antwortet mit einer Zeile, die besagt, dass kein Anbieter vorhanden ist, sodass ein Projekt, das sie verwendet, auf jeder Plattform gebaut werden kann. Nichts von der entworfenen Seite wird irgendwohin gesendet, außer dem, was Refine benötigt, nämlich die Seite selbst.
Weiterlesen
- Delphi TLS 1.3 ohne OpenSSL-DLLs
- Eine Delphi-Web-CRUD-Seite in fünf Minuten
- sgcWebSockets 2026.10, alles andere in dieser Version
Video ansehen
Dazu gibt es ein kurzes Video auf dem eSeGeCe-Kanal.
Fragen, Feedback oder Hilfe bei der Migration? Kontaktieren Sie uns — Sie erhalten eine Antwort von den Leuten, die den Code geschrieben haben.