La mejor especificación que jamás obtendrás para una pantalla es una imagen de la pantalla que reemplaza. Es también lo único que un generador de código no puede leer. sgcWebSockets 2026.10 añade un generador de páginas con IA al diseñador visual de sgcHTML: describe la página en una frase, o dale una captura de pantalla, y construye la página a partir de tus componentes.
Lo que sale no es marcado ni un framework. Son componentes sgcHTML normales, propiedad del formulario, editables en el Object Inspector, exportables como Object Pascal que compila con el diseñador desinstalado.
Descríbela
En el IDE, el cuadro de instrucciones está en la barra de herramientas de la pestaña Web Design, junto a Generate y Refine. En una aplicación que aloja el propio diseñador, es un componente:
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;O fotografíala
El mismo generador lee una imagen. Una captura de pantalla de la aplicación que se reemplaza, una maqueta salida de una herramienta de diseño, una fotografía de un boceto en una pizarra:
vTree := FGenerator.GenerateFromImage('C:\shots\orders.png',
'ignore the sidebar', oErrors);La descripción ahí es opcional y acota qué mirar en lugar de describir la página. Lee el diseño, los encabezados, las columnas de una tabla y las etiquetas de un formulario a partir de la imagen, y escribe lo que lee en los captions. En el diseñador el botón es From image, y lo que vuelve es el mismo candidato con el mismo Accept y Discard.
Responde con un árbol de diseño, no con código
Esta es la parte que marca la diferencia entre un juguete y algo que dejarías acercarse a un proyecto. El modelo nunca escribe marcado y nunca escribe Pascal. Responde con un árbol de diseño: el mismo JSON que la propia superficie de diseño guarda y carga.
{"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"}}
]}]}]}]}Cinco tipos de nodo, y uno de ellos nombra una clase de componente. Ahí es donde están los límites.
Tres límites, y ninguno de ellos es el prompt
El esquema viene de tu registro. La solicitud lleva un esquema JSON cuya enumeración de clases es exactamente el conjunto de componentes registrados, acotado aún más por la propiedad Classes. El modelo no puede nombrar una clase que no existe, ni una que no le ofreciste.
La respuesta se normaliza. NormalizeTree descarta toda clave que no conoce, descarta un nodo cuya clase no está registrada, limita el árbol a MaxNodes y reescribe la lista de propiedades en la forma que la superficie lee.
La superficie lee con rigor. LoadTreeJSON omite y reporta un tipo de nodo desconocido, una clase no registrada, una propiedad que no existe o no es escribible, y un valor que la propiedad rechaza. Siempre obtienes la lista de lo que no sobrevivió.
El marcado es lo único de lo que un árbol generado nunca es de fiar. Un nodo html se carga como texto escapado a menos que AllowRawHTML esté activado, así que un modelo al que se convenció de responder con un script pone ese script en la página como texto visible y nada más.
Primero candidato, luego página
Generate parte de la nada. Refine parte de la página tal como está ahora y pide la página completa después del cambio, nunca un parche, para que ambas se puedan comparar. Ninguno de los dos toca la página: responden con un árbol, y Apply es lo que lo coloca en la superficie. Eso es lo que mantiene honestos a Accept y Discard, y Accept conserva un paso de deshacer.
Dónde vive la clave
En tu máquina, no en el proyecto. La página de ajustes es Tools › Options › Third Party › sgcHTML AI page generator: proveedor, clave de API, modelo, una URL base opcional, el idioma en el que se piden los captions y el árbol más grande que se aceptará. La clave se guarda por usuario y nunca se escribe en el .dfm, el .dproj ni la página, que es lo que la mantiene fuera del control de versiones.
Actualización
El generador forma parte de sgcHTML. La ruta del proveedor usa las unidades de IA, que son solo para Windows: sin ellas el componente igualmente compila y responde con una línea que dice que no hay proveedor, así que un proyecto que lo usa se compila en todas las plataformas. Nada de la página que se está diseñando se envía a ningún sitio salvo lo que Refine necesita, que es la propia página.
Sigue leyendo
- Delphi TLS 1.3 sin DLLs de OpenSSL
- Una página CRUD web en Delphi en cinco minutos
- sgcWebSockets 2026.10, todo lo demás de esta versión
Míralo en vídeo
Hay un vídeo breve de esto en el canal de eSeGeCe.
¿Preguntas, comentarios o ayuda con la migración? Ponte en contacto — recibirás respuesta de las mismas personas que escribieron el código.