Bir Ekran Görüntüsünü Delphi Web Sayfasına Dönüştürün

· Bileşenler
Bir Ekran Görüntüsünü Delphi Web Sayfasına Dönüştürün

Bir ekran için elde edebileceğiniz en iyi teknik özellik, o ekranın yerini aldığı ekranın bir fotoğrafıdır. Aynı zamanda bu, bir kod oluşturucunun okuyamadığı tek şeydir. sgcWebSockets 2026.10, sgcHTML görsel tasarımcısına bir AI sayfa oluşturucu ekliyor: sayfayı tek bir cümleyle tarif edin veya ona bir ekran görüntüsü verin, sayfayı sizin bileşenlerinizden oluştursun.

Ortaya çıkan şey ne işaretleme dilidir ne de bir framework'tür. Form'a ait, Object Inspector'da düzenlenebilen, tasarımcı kaldırılmış olsa bile derlenen Object Pascal olarak dışa aktarılabilen sıradan sgcHTML bileşenleridir.

Tarif Edin

IDE'de prompt kutusu, Generate ve Refine'ın yanında, Web Design sekmesinin araç çubuğunda yer alır. Tasarımcının kendisini barındıran bir uygulamada ise bu bir bileşendir:

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;

Ya da Fotoğraflayın

Aynı oluşturucu bir görüntüyü de okur. Değiştirilmekte olan uygulamanın bir ekran görüntüsü, bir tasarım aracından çıkan bir mockup, bir beyaz tahtadaki bir eskizin fotoğrafı:

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

Buradaki açıklama isteğe bağlıdır ve sayfayı tarif etmek yerine nereye bakılacağını daraltır. Görüntüden düzeni, başlıkları, bir tablonun sütunlarını ve bir formun etiketlerini okur, ve okuduklarını caption'lara yazar. Tasarımcıda düğmenin adı From image'dır, ve geri gelen şey aynı Accept ve Discard'a sahip aynı adaydır.

Kod Değil, Bir Tasarım Ağacıyla Yanıt Verir

Bir oyuncakla bir projeye yaklaştırabileceğiniz bir şey arasındaki farkı yaratan kısım tam olarak burasıdır. Model asla işaretleme dili yazmaz ve asla Pascal yazmaz. Bir tasarım ağacıyla yanıt verir: tasarım yüzeyinin kendisinin kaydettiği ve yüklediği aynı JSON.

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

Beş tür düğüm vardır, ve bunlardan biri bir bileşen sınıfını adlandırır. Sınırlar tam olarak orada bulunur.

Üç Sınır, ve Hiçbiri Prompt Değil

Şema sizin kayıtlarınızdan gelir. İstek, sınıf numaralandırması tam olarak kayıtlı bileşenler kümesi olan ve Classes özelliğiyle daha da daraltılan bir JSON şeması taşır. Model, var olmayan bir sınıfı veya kendisine sunmadığınız bir sınıfı adlandıramaz.

Yanıt normalleştirilir. NormalizeTree, tanımadığı her anahtarı atar, sınıfı kayıtlı olmayan bir düğümü atar, ağacı MaxNodes ile sınırlar ve özellik listesini yüzeyin okuyacağı şekle yeniden yazar.

Yüzey sıkı bir şekilde okur. LoadTreeJSON, bilinmeyen bir düğüm türünü, kayıtlı olmayan bir sınıfı, var olmayan veya yazılabilir olmayan bir özelliği ve özelliğin reddettiği bir değeri atlar ve bunu bildirir. Hayatta kalmayanların listesini her zaman alırsınız.

İşaretleme dili, oluşturulan bir ağaca asla güvenilmeyen tek şeydir. AllowRawHTML açık olmadıkça bir html düğümü kaçışlı metin olarak yüklenir, bu yüzden bir script ile yanıt vermeye ikna edilmiş bir model bile o script'i sayfaya yalnızca görünür metin olarak koyar ve başka hiçbir şey yapmaz.

Önce Aday, Sonra Sayfa

Generate hiçbir şeyden başlar. Refine, sayfanın şu anki haliyle başlar ve değişiklikten sonraki sayfanın tamamını ister, asla bir yama değil, böylece ikisi karşılaştırılabilir. İkisi de sayfaya dokunmaz: bir ağaçla yanıt verirler, ve onu yüzeye koyan şey Apply'dır. Accept ve Discard'ı dürüst tutan şey tam olarak budur, ve Accept bir adım geri alma işlemini korur.

Anahtar Nerede Yaşar

Projede değil, kendi makinenizde. Ayarlar sayfası Tools › Options › Third Party › sgcHTML AI page generator'dır: sağlayıcı, API anahtarı, model, isteğe bağlı bir temel URL, caption'ların hangi dilde istendiği ve kabul edilecek en büyük ağaç. Anahtar kullanıcı başına saklanır ve asla .dfm, .dproj veya sayfaya yazılmaz, bu da onu sürüm kontrolünün dışında tutar.

Yükseltme

Oluşturucu sgcHTML'in bir parçasıdır. Sağlayıcı yolu, yalnızca Windows'a özgü olan AI birimlerini kullanır: bunlar olmadan bileşen yine de derlenir ve bir sağlayıcı bulunmadığını belirten tek bir satırla yanıt verir, böylece onu kullanan bir proje her platformda derlenebilir. Tasarlanan sayfaya ait hiçbir şey, Refine'ın ihtiyaç duyduğu şey, yani sayfanın kendisi dışında hiçbir yere gönderilmez.

Sırada Ne Var

İzleyin

Bununla ilgili kısa bir video, eSeGeCe kanalında yer alıyor.

Sorularınız, geri bildiriminiz veya taşıma konusunda yardıma mı ihtiyacınız var? İletişime geçin — kodu yazan kişilerden yanıt alacaksınız.