Zet een screenshot om in een Delphi-webpagina

· Componenten
Zet een screenshot om in een Delphi-webpagina

De beste specificatie die je ooit voor een scherm zult krijgen, is een afbeelding van het scherm dat het vervangt. Het is ook het enige wat een codegenerator niet kan lezen. sgcWebSockets 2026.10 voegt een AI-paginagenerator toe aan de visuele sgcHTML-designer: beschrijf de pagina in een zin, of geef hem een screenshot, en hij bouwt de pagina op uit jouw componenten.

Wat eruit komt is geen markup en geen framework. Het zijn gewone sgcHTML-componenten, eigendom van de form, bewerkbaar in de Object Inspector, exporteerbaar als Object Pascal dat compileert met de designer gedeïnstalleerd.

Beschrijf hem

In de IDE staat het promptvak in de werkbalk van het tabblad Web Design, naast Generate en Refine. In een applicatie die de designer zelf host, is het een component:

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;

Of fotografeer hem

Dezelfde generator leest ook een afbeelding. Een screenshot van de applicatie die wordt vervangen, een mockup uit een ontwerptool, een foto van een schets op een whiteboard:

vTree := FGenerator.GenerateFromImage('C:\shots\orders.png',
  'ignore the sidebar', oErrors);

De beschrijving is daar optioneel en bakent af waar naar te kijken in plaats van de pagina te beschrijven. Hij leest de lay-out, de koppen, de kolommen van een tabel en de labels van een formulier uit de afbeelding, en schrijft wat hij leest in de captions. In de designer heet de knop From image, en wat terugkomt is dezelfde kandidaat met dezelfde Accept en Discard.

Hij antwoordt met een ontwerpboom, geen code

Dit is het deel dat het verschil maakt tussen een speeltje en iets dat je in de buurt van een project zou laten komen. Het model schrijft nooit markup en nooit Pascal. Het antwoordt met een ontwerpboom: dezelfde JSON die het ontwerpoppervlak zelf opslaat en laadt.

{"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"}}
      ]}]}]}]}

Vijf soorten knooppunten, en een daarvan noemt een componentklasse. Daar liggen de grenzen.

Drie grenzen, en geen daarvan is de prompt

Het schema komt uit jouw registratie. Het verzoek bevat een JSON-schema waarvan de klasse-opsomming exact de verzameling geregistreerde componenten is, verder ingeperkt door de eigenschap Classes. Het model kan geen klasse noemen die niet bestaat, of een die je niet hebt aangeboden.

Het antwoord wordt genormaliseerd. NormalizeTree laat elke sleutel vallen die het niet kent, laat een knooppunt vallen waarvan de klasse niet geregistreerd is, begrenst de boom op MaxNodes en herschrijft de eigenschappenlijst naar de vorm die het oppervlak leest.

Het oppervlak leest strikt. LoadTreeJSON slaat een onbekend knooppunttype, een niet-geregistreerde klasse, een eigenschap die niet bestaat of niet beschrijfbaar is, en een waarde die de eigenschap weigert, over en meldt dit. Je krijgt altijd de lijst van wat het niet heeft overleefd.

Markup is het enige waarmee een gegenereerde boom nooit wordt vertrouwd. Een html-knooppunt wordt geladen als ge-escapete tekst tenzij AllowRawHTML is ingeschakeld, zodat een model dat is overgehaald om met een script te antwoorden, dat script alleen als zichtbare tekst op de pagina zet en verder niets.

Eerst kandidaat, dan pagina

Generate begint bij niets. Refine gaat uit van de pagina zoals hij nu is en vraagt om de hele pagina na de wijziging, nooit een patch, zodat de twee vergeleken kunnen worden. Geen van beide raakt de pagina aan: ze antwoorden met een boom, en Apply is wat hem op het oppervlak zet. Dat is wat Accept en Discard eerlijk houdt, en Accept behoudt één stap ongedaan maken.

Waar de sleutel woont

Op jouw machine, niet in het project. De instellingenpagina is Tools › Options › Third Party › sgcHTML AI page generator: provider, API-sleutel, model, een optionele basis-URL, de taal waarin de captions worden gevraagd en de grootste boom die geaccepteerd wordt. De sleutel wordt per gebruiker bewaard en nooit weggeschreven naar de .dfm, de .dproj of de pagina, wat hem buiten de versiebeheer houdt.

Upgraden

De generator maakt deel uit van sgcHTML. Het providerpad gebruikt de AI-units, die alleen voor Windows zijn: zonder deze compileert het component nog steeds en antwoordt het met één regel die zegt dat er geen provider is, zodat een project dat het gebruikt op elk platform kan bouwen. Niets van de pagina die wordt ontworpen wordt ergens naartoe gestuurd, behalve wat Refine nodig heeft, namelijk de pagina zelf.

Lees verder

Bekijk het

Er is een korte video hierover op het eSeGeCe-kanaal.

Vragen, feedback of hulp bij migratie? Neem contact op — je krijgt antwoord van de mensen die de code hebben geschreven.