Transforme uma captura de tela em uma página web Delphi

26 de setembro de 2026 · Componentes

A melhor especificação que você jamais terá para uma tela é uma imagem da tela que ela substitui. É também a única coisa que um gerador de código não consegue ler. O sgcWebSockets 2026.10 adiciona um gerador de páginas com IA ao designer visual do sgcHTML: descreva a página em uma frase, ou dê a ele uma captura de tela, e ele constrói a página a partir dos seus componentes.

O que sai não é markup nem um framework. São componentes sgcHTML comuns, pertencentes ao formulário, editáveis no Object Inspector, exportáveis como Object Pascal que compila com o designer desinstalado.

Descreva-a

Na IDE, a caixa de prompt fica na barra de ferramentas da aba Web Design, ao lado de Generate e Refine. Em uma aplicação que hospeda o próprio designer, é um 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;

Ou fotografe-a

O mesmo gerador também lê uma imagem. Uma captura de tela da aplicação que está sendo substituída, um mockup vindo de uma ferramenta de design, uma foto de um esboço em um quadro branco:

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

A descrição ali é opcional e restringe o que observar, em vez de descrever a página. Ele lê o layout, os títulos, as colunas de uma tabela e os rótulos de um formulário a partir da imagem, e escreve o que lê nos captions. No designer, o botão é From image, e o que volta é o mesmo candidato, com o mesmo Accept e Discard.

Ele responde com uma árvore de design, não com código

Esta é a parte que faz a diferença entre um brinquedo e algo que você deixaria chegar perto de um projeto. O modelo nunca escreve markup e nunca escreve Pascal. Ele responde com uma árvore de design: o mesmo JSON que a própria superfície de design salva e carrega.

{"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 nó, e um deles nomeia uma classe de componente. É aí que estão os limites.

Três limites, e nenhum deles é o prompt

O esquema vem do seu registro. A requisição carrega um esquema JSON cuja enumeração de classes é exatamente o conjunto de componentes registrados, restringido ainda mais pela propriedade Classes. O modelo não pode nomear uma classe que não existe, nem uma que você não ofereceu.

A resposta é normalizada. NormalizeTree descarta toda chave que não conhece, descarta um nó cuja classe não está registrada, limita a árvore a MaxNodes e reescreve a lista de propriedades na forma que a superfície lê.

A superfície lê com rigor. LoadTreeJSON ignora e relata um tipo de nó desconhecido, uma classe não registrada, uma propriedade que não existe ou não é gravável, e um valor que a propriedade recusa. Você sempre recebe a lista do que não sobreviveu.

Markup é a única coisa em que uma árvore gerada nunca é confiável. Um nó html é carregado como texto com escape, a menos que AllowRawHTML esteja ativado, então um modelo convencido a responder com um script coloca esse script na página apenas como texto visível, e nada mais.

Primeiro o candidato, depois a página

Generate começa do zero. Refine parte da página como ela está agora e pede a página inteira depois da mudança, nunca um patch, para que as duas possam ser comparadas. Nenhum dos dois toca na página: ambos respondem com uma árvore, e é o Apply que a coloca na superfície. É isso que mantém Accept e Discard honestos, e o Accept mantém um passo de desfazer.

Onde a chave mora

Na sua máquina, não no projeto. A página de configurações é Tools › Options › Third Party › sgcHTML AI page generator: provedor, chave de API, modelo, uma URL base opcional, o idioma em que os captions são solicitados e a maior árvore que será aceita. A chave é mantida por usuário e nunca é gravada no .dfm, no .dproj ou na página, o que a mantém fora do controle de versão.

Atualização

O gerador é parte do sgcHTML. O caminho do provedor usa as units de IA, que são exclusivas do Windows: sem elas, o componente ainda compila e responde com uma linha dizendo que não há provedor, de modo que um projeto que o usa é compilado em qualquer plataforma. Nada da página sendo projetada é enviado a lugar nenhum, exceto o que o Refine precisa, que é a própria página.

Assista ao vídeo

Há um vídeo curto sobre isso no canal da eSeGeCe.

Dúvidas, feedback ou ajuda com a migração? Entre em contato — você receberá uma resposta das pessoas que escreveram o código.