La migliore specifica che otterrai mai per una schermata è un'immagine della schermata che sostituisce. È anche l'unica cosa che un generatore di codice non può leggere. sgcWebSockets 2026.10 aggiunge un generatore di pagine con IA al designer visuale di sgcHTML: descrivi la pagina in una frase, oppure forniscigli uno screenshot, e costruisce la pagina a partire dai tuoi componenti.
Quello che ne esce non è markup e non è un framework. Sono normali componenti sgcHTML, di proprietà della form, modificabili nell'Object Inspector, esportabili come Object Pascal che compila con il designer disinstallato.
Descrivila
Nell'IDE, la casella del prompt si trova nella barra degli strumenti della scheda Web Design, accanto a Generate e Refine. In un'applicazione che ospita il designer stesso, è 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 fotografala
Lo stesso generatore legge anche un'immagine. Uno screenshot dell'applicazione che si sta sostituendo, un mockup uscito da uno strumento di design, una fotografia di uno schizzo su una lavagna:
vTree := FGenerator.GenerateFromImage('C:\shots\orders.png',
'ignore the sidebar', oErrors);La descrizione lì è opzionale e restringe cosa osservare invece di descrivere la pagina. Legge il layout, le intestazioni, le colonne di una tabella e le etichette di un modulo dall'immagine, e scrive ciò che legge nelle caption. Nel designer il pulsante è From image, e ciò che torna è lo stesso candidato con lo stesso Accept e Discard.
Risponde con un albero di design, non con codice
Questa è la parte che fa la differenza tra un giocattolo e qualcosa che lasceresti avvicinare a un progetto. Il modello non scrive mai markup e non scrive mai Pascal. Risponde con un albero di design: lo stesso JSON che la superficie di design salva e carica.
{"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"}}
]}]}]}]}Cinque tipi di nodo, e uno di essi nomina una classe di componente. Ed è lì che si trovano i confini.
Tre confini, e nessuno di essi è il prompt
Lo schema viene dal tuo registro. La richiesta porta con sé uno schema JSON la cui enumerazione delle classi è esattamente l'insieme dei componenti registrati, ristretto ulteriormente dalla proprietà Classes. Il modello non può nominare una classe che non esiste, o una che non gli hai offerto.
La risposta viene normalizzata. NormalizeTree scarta ogni chiave che non conosce, scarta un nodo la cui classe non è registrata, limita l'albero a MaxNodes e riscrive l'elenco delle proprietà nella forma che la superficie legge.
La superficie legge in modo rigoroso. LoadTreeJSON salta e segnala un tipo di nodo sconosciuto, una classe non registrata, una proprietà che non esiste o non è scrivibile, e un valore che la proprietà rifiuta. Ottieni sempre l'elenco di ciò che non è sopravvissuto.
Il markup è l'unica cosa di cui un albero generato non è mai considerato affidabile. Un nodo html viene caricato come testo con escape a meno che AllowRawHTML non sia attivato, quindi un modello convinto a rispondere con uno script mette quello script sulla pagina come semplice testo visibile e nient'altro.
Prima il candidato, poi la pagina
Generate parte dal nulla. Refine parte dalla pagina così com'è ora e chiede l'intera pagina dopo la modifica, mai una patch, così che le due possano essere confrontate. Nessuno dei due tocca la pagina: rispondono con un albero, ed è Apply a metterlo sulla superficie. È questo che mantiene onesti Accept e Discard, e Accept conserva un passo di annullamento.
Dove vive la chiave
Sul tuo computer, non nel progetto. La pagina delle impostazioni è Tools › Options › Third Party › sgcHTML AI page generator: provider, chiave API, modello, un URL di base opzionale, la lingua in cui vengono richieste le caption e l'albero più grande che verrà accettato. La chiave viene conservata per utente e non viene mai scritta nel .dfm, nel .dproj o nella pagina, il che la tiene fuori dal controllo di versione.
Aggiornamento
Il generatore fa parte di sgcHTML. Il percorso del provider usa le unit di IA, disponibili solo su Windows: senza di esse il componente compila comunque e risponde con una riga che dice che non c'è alcun provider, così un progetto che lo usa si compila su ogni piattaforma. Nulla della pagina in fase di progettazione viene inviato da nessuna parte, tranne ciò di cui Refine ha bisogno, che è la pagina stessa.
Continua a leggere
- Delphi TLS 1.3 senza DLL OpenSSL
- Una pagina web CRUD in Delphi in cinque minuti
- sgcWebSockets 2026.10, tutto il resto di questa versione
Guardalo in video
C'è un breve video su questo sul canale eSeGeCe.
Domande, feedback o aiuto per la migrazione? Mettiti in contatto — riceverai una risposta dalle persone che hanno scritto il codice.