La meilleure spécification que vous obtiendrez jamais pour un écran est une image de l'écran qu'il remplace. C'est aussi la seule chose qu'un générateur de code ne peut pas lire. sgcWebSockets 2026.10 ajoute un générateur de pages par IA au designer visuel sgcHTML : décrivez la page en une phrase, ou donnez-lui une capture d'écran, et il construit la page à partir de vos composants.
Ce qui en ressort n'est ni du balisage ni un framework. Ce sont des composants sgcHTML ordinaires, appartenant au formulaire, modifiables dans l'Object Inspector, exportables sous forme d'Object Pascal qui compile même le designer désinstallé.
Décrivez-la
Dans l'IDE, la zone de prompt se trouve dans la barre d'outils de l'onglet Web Design, à côté de Generate et Refine. Dans une application qui héberge elle-même le designer, c'est un composant :
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;Ou photographiez-la
Le même générateur lit aussi une image. Une capture d'écran de l'application remplacée, une maquette issue d'un outil de conception, une photo d'un croquis sur un tableau blanc :
vTree := FGenerator.GenerateFromImage('C:\shots\orders.png',
'ignore the sidebar', oErrors);La description y est facultative et restreint ce qu'il faut regarder plutôt que de décrire la page. Il lit la mise en page, les titres, les colonnes d'un tableau et les libellés d'un formulaire à partir de l'image, et écrit ce qu'il lit dans les captions. Dans le designer, le bouton s'appelle From image, et ce qui revient est le même candidat, avec les mêmes Accept et Discard.
Il répond avec un arbre de conception, pas du code
C'est la partie qui fait la différence entre un jouet et quelque chose que vous laisseriez approcher d'un projet. Le modèle n'écrit jamais de balisage et n'écrit jamais de Pascal. Il répond avec un arbre de conception : le même JSON que la surface de conception elle-même enregistre et charge.
{"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"}}
]}]}]}]}Cinq types de nœuds, et l'un d'eux nomme une classe de composant. C'est là que se trouvent les limites.
Trois limites, et aucune n'est le prompt
Le schéma provient de votre registre. La requête transporte un schéma JSON dont l'énumération des classes est exactement l'ensemble des composants enregistrés, restreint encore par la propriété Classes. Le modèle ne peut pas nommer une classe qui n'existe pas, ni une que vous n'avez pas proposée.
La réponse est normalisée. NormalizeTree supprime chaque clé qu'il ne connaît pas, supprime un nœud dont la classe n'est pas enregistrée, plafonne l'arbre à MaxNodes et réécrit la liste de propriétés dans la forme que la surface lit.
La surface lit de façon stricte. LoadTreeJSON ignore et signale un type de nœud inconnu, une classe non enregistrée, une propriété qui n'existe pas ou n'est pas modifiable, et une valeur que la propriété refuse. Vous obtenez toujours la liste de ce qui n'a pas survécu.
Le balisage est la seule chose à laquelle un arbre généré n'est jamais fait confiance. Un nœud html est chargé comme texte échappé à moins que AllowRawHTML ne soit activé, de sorte qu'un modèle qu'on a convaincu de répondre avec un script place ce script sur la page comme du texte visible et rien d'autre.
D'abord le candidat, ensuite la page
Generate part de rien. Refine part de la page telle qu'elle est maintenant et demande la page entière après le changement, jamais un correctif, afin que les deux puissent être comparées. Ni l'un ni l'autre ne touche la page : ils répondent avec un arbre, et c'est Apply qui le place sur la surface. C'est ce qui garde Accept et Discard honnêtes, et Accept conserve une étape d'annulation.
Où vit la clé
Sur votre machine, pas dans le projet. La page des paramètres est Tools › Options › Third Party › sgcHTML AI page generator : fournisseur, clé API, modèle, une URL de base facultative, la langue dans laquelle les captions sont demandées, et le plus grand arbre qui sera accepté. La clé est conservée par utilisateur et jamais écrite dans le .dfm, le .dproj ou la page, ce qui la maintient hors du contrôle de version.
Mise à niveau
Le générateur fait partie de sgcHTML. Le chemin du fournisseur utilise les unités d'IA, qui sont réservées à Windows : sans elles, le composant compile quand même et répond avec une seule ligne indiquant qu'il n'y a pas de fournisseur, de sorte qu'un projet qui l'utilise se compile sur toutes les plateformes. Rien de la page en cours de conception n'est envoyé nulle part, sauf ce dont Refine a besoin, à savoir la page elle-même.
À lire aussi
- Delphi TLS 1.3 sans DLL OpenSSL
- Une page web CRUD Delphi en cinq minutes
- sgcWebSockets 2026.10, tout le reste de cette version
Voir la vidéo
Il existe une courte vidéo à ce sujet sur la chaîne eSeGeCe.
Des questions, un retour ou besoin d'aide pour la migration ? Contactez-nous — vous recevrez une réponse des personnes qui ont écrit le code.