画面について得られる最良の仕様書は、それが置き換える画面そのものの写真です。そしてそれこそが、コード生成ツールには読み取れない唯一のものでもあります。sgcWebSockets 2026.10は、sgcHTMLのビジュアルデザイナーにAIページジェネレーターを追加します。ページを一文で説明するか、スクリーンショットを渡すだけで、あなた自身のコンポーネントからページを構築します。
できあがるのはマークアップでもフレームワークでもありません。フォームが所有する普通のsgcHTMLコンポーネントであり、Object Inspectorで編集でき、デザイナーがインストールされていなくてもコンパイルできるObject Pascalとしてエクスポートできます。
言葉で説明する
IDEでは、プロンプトボックスはWeb Designタブのツールバーにあり、GenerateとRefineの隣にあります。デザイナー自体をホストするアプリケーションでは、それは一つのコンポーネントです。
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;あるいは写真で伝える
同じジェネレーターは画像も読み取ります。置き換え対象のアプリケーションのスクリーンショット、デザインツールから出力されたモックアップ、ホワイトボードに描かれたスケッチの写真などです。
vTree := FGenerator.GenerateFromImage('C:\shots\orders.png',
'ignore the sidebar', oErrors);ここでの説明文は任意で、ページを説明するというよりも、どこに注目すべきかを絞り込む役割を果たします。画像からレイアウト、見出し、テーブルの列、フォームのラベルを読み取り、読み取った内容をキャプションに書き込みます。デザイナーではこのボタンはFrom imageという名前で、返ってくるのは同じAcceptとDiscardを持つ同じ候補です。
コードではなくデザインツリーで答える
ここが、おもちゃとプロジェクトの近くに置いてもよいものとを分ける部分です。モデルはマークアップを書くことも、Pascalを書くこともありません。答えるのはデザインツリー、つまりデザインサーフェス自体が保存し読み込むのと同じ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"}}
]}]}]}]}ノードの種類は五つで、そのうちの一つがコンポーネントクラスを指定します。境界線はまさにそこにあります。
三つの境界線、そのどれもがプロンプトではない
スキーマはあなたのレジストリから来ます。リクエストには、クラスの列挙がまさに登録済みコンポーネントの集合と一致するJSONスキーマが含まれ、さらにClassesプロパティによって絞り込まれます。モデルは存在しないクラスや、提供されていないクラスを指定することはできません。
回答は正規化されます。NormalizeTreeは知らないキーをすべて捨て、クラスが登録されていないノードを捨て、ツリーをMaxNodesで制限し、プロパティのリストをサーフェスが読み取れる形に書き換えます。
サーフェスは厳格に読み取ります。LoadTreeJSONは、未知のノード種別、未登録のクラス、存在しないまたは書き込み不可のプロパティ、そしてプロパティが拒否する値をスキップし、かつ報告します。生き残らなかったものの一覧は常に得られます。
マークアップは、生成されたツリーが決して信頼されない唯一のものです。AllowRawHTMLが有効になっていない限り、htmlノードはエスケープされたテキストとして読み込まれるため、スクリプトで答えるように仕向けられたモデルがあっても、そのスクリプトはページ上に目に見えるテキストとして置かれるだけで、それ以上のことは起こりません。
まず候補、それからページ
Generateは何もない状態から始まります。Refineは今の状態のページから始まり、変更後のページ全体を求めます。パッチを求めることは決してなく、それは両者を比較できるようにするためです。どちらもページに直接触れることはありません。両者はツリーで答えるだけであり、それをサーフェスに反映するのがApplyです。これがAcceptとDiscardを正直に保つ理由であり、Acceptは一段階分の元に戻す操作を残します。
鍵はどこにあるか
プロジェクトの中ではなく、あなたのマシンの中です。設定ページはTools › Options › Third Party › sgcHTML AI page generatorにあり、プロバイダー、APIキー、モデル、任意のベースURL、キャプションを依頼する言語、そして受け入れる最大のツリーサイズを設定します。キーはユーザーごとに保持され、.dfm、.dproj、ページのいずれにも書き込まれることはなく、これによりソース管理の外に保たれます。
アップグレード
このジェネレーターはsgcHTMLの一部です。プロバイダーの経路はWindows専用のAIユニットを使用します。それらがなくてもコンポーネントは問題なくコンパイルされ、プロバイダーが存在しないことを示す一行を返すだけなので、これを使うプロジェクトはすべてのプラットフォームでビルドできます。デザイン中のページ自体は、Refineが必要とするもの、つまりページ自体を除いて、どこにも送信されません。
次に読む
動画で見る
この内容についての短い動画がeSeGeCeチャンネルにあります。
質問、フィードバック、移行のお手伝いが必要ですか?お問い合わせください — コードを書いた本人たちから返信が届きます。