Zamień zrzut ekranu w stronę webową Delphi

· Komponenty
Zamień zrzut ekranu w stronę webową Delphi

Najlepsza specyfikacja, jaką kiedykolwiek dostaniesz dla ekranu, to zdjęcie ekranu, który zastępuje. To także jedyna rzecz, której generator kodu nie potrafi odczytać. sgcWebSockets 2026.10 dodaje generator stron AI do wizualnego projektanta sgcHTML: opisz stronę w jednym zdaniu albo podaj mu zrzut ekranu, a on zbuduje stronę z Twoich komponentów.

To, co powstaje, nie jest znacznikiem ani frameworkiem. To zwykłe komponenty sgcHTML, należące do formularza, edytowalne w Object Inspectorze, eksportowalne jako Object Pascal, który kompiluje się nawet przy odinstalowanym projektancie.

Opisz ją

W IDE pole promptu znajduje się na pasku narzędzi zakładki Web Design, obok Generate i Refine. W aplikacji, która sama hostuje projektanta, jest to komponent:

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;

Albo sfotografuj ją

Ten sam generator odczytuje też obraz. Zrzut ekranu zastępowanej aplikacji, makieta z narzędzia projektowego, zdjęcie szkicu na tablicy:

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

Opis jest tam opcjonalny i zawęża to, na co należy zwrócić uwagę, zamiast opisywać stronę. Odczytuje z obrazu układ, nagłówki, kolumny tabeli i etykiety formularza, a to, co odczyta, zapisuje w podpisach (caption). W projektancie przycisk nazywa się From image, a to, co wraca, jest tym samym kandydatem, z tymi samymi Accept i Discard.

Odpowiada drzewem projektu, a nie kodem

To ta część, która stanowi różnicę między zabawką a czymś, co pozwoliłbyś zbliżyć się do prawdziwego projektu. Model nigdy nie pisze znaczników ani nigdy nie pisze kodu Pascal. Odpowiada drzewem projektu: tym samym JSON-em, który sama powierzchnia projektowa zapisuje i wczytuje.

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

Pięć rodzajów węzłów, a jeden z nich nazywa klasę komponentu. I właśnie tam przebiegają granice.

Trzy granice, i żadna z nich nie jest promptem

Schemat pochodzi z Twojego rejestru. Żądanie niesie ze sobą schemat JSON, którego wyliczenie klas jest dokładnie zbiorem zarejestrowanych komponentów, dodatkowo zawężonym przez właściwość Classes. Model nie może nazwać klasy, która nie istnieje, ani takiej, której mu nie udostępniono.

Odpowiedź jest normalizowana. NormalizeTree odrzuca każdy nieznany klucz, odrzuca węzeł, którego klasa nie jest zarejestrowana, ogranicza drzewo do MaxNodes i przepisuje listę właściwości do postaci, którą odczytuje powierzchnia.

Powierzchnia odczytuje ściśle. LoadTreeJSON pomija i zgłasza nieznany rodzaj węzła, niezarejestrowaną klasę, właściwość, która nie istnieje lub nie jest zapisywalna, oraz wartość, którą właściwość odrzuca. Zawsze otrzymujesz listę tego, co nie przetrwało.

Znacznik to jedyna rzecz, której wygenerowane drzewo nigdy nie może być zaufane. Węzeł html jest wczytywany jako tekst z ucieczkami (escaped), chyba że włączono AllowRawHTML, więc model nakłoniony do odpowiedzi skryptem umieszcza ten skrypt na stronie jedynie jako widoczny tekst i nic więcej.

Najpierw kandydat, potem strona

Generate zaczyna od zera. Refine zaczyna od strony w jej obecnym kształcie i prosi o całą stronę po zmianie, nigdy o łatkę, tak aby obie można było porównać. Żadne z nich nie dotyka strony: obie odpowiadają drzewem, a to Apply umieszcza je na powierzchni. Właśnie to sprawia, że Accept i Discard pozostają uczciwe, a Accept zachowuje jeden krok cofnięcia.

Gdzie mieszka klucz

Na Twoim komputerze, nie w projekcie. Strona ustawień to Tools › Options › Third Party › sgcHTML AI page generator: dostawca, klucz API, model, opcjonalny bazowy URL, język, w którym proszone są podpisy, oraz największe drzewo, jakie zostanie zaakceptowane. Klucz jest przechowywany dla każdego użytkownika osobno i nigdy nie jest zapisywany w pliku .dfm, .dproj ani w stronie, co utrzymuje go poza systemem kontroli wersji.

Aktualizacja

Generator jest częścią sgcHTML. Ścieżka dostawcy korzysta z jednostek AI, dostępnych wyłącznie dla Windows: bez nich komponent i tak się kompiluje i odpowiada jedną linią mówiącą, że nie ma dostawcy, dzięki czemu projekt, który go używa, buduje się na każdej platformie. Nic z projektowanej strony nie jest wysyłane nigdzie indziej poza tym, czego potrzebuje Refine, czyli samą stroną.

Czytaj dalej

Zobacz wideo

Jest na ten temat krótkie wideo na kanale eSeGeCe.

Pytania, uwagi lub pomoc przy migracji? Skontaktuj się z nami — otrzymasz odpowiedź od osób, które napisały ten kod.