把一张截图变成一个 Delphi 网页

· 组件
把一张截图变成一个 Delphi 网页

对于一个界面,你能得到的最好的说明书就是它所取代的那个界面的一张图片。这也恰恰是代码生成器读不懂的东西。sgcWebSockets 2026.10 为 sgcHTML 可视化设计器添加了AI 页面生成器:用一句话描述页面,或者给它一张截图,它就会用你自己的组件构建出这个页面。

生成出来的既不是标记语言,也不是一个框架,而是普通的 sgcHTML 组件,归 form 所有,可以在 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);

这里的描述文字是可选的,它的作用是缩小要关注的范围,而不是描述整个页面。它会从图片中读出布局、标题、表格的列以及表单的标签,并把读到的内容写进 caption 中。在设计器里,这个按钮叫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、请求 caption 所用的语言,以及可接受的最大树规模。密钥按用户保存,绝不会写入 .dfm、.dproj 或页面本身,这正是让它不进入版本控制系统的原因。

升级

该生成器是 sgcHTML 的一部分。提供商这条路径使用的是 AI 相关的 unit,仅支持 Windows:如果没有这些 unit,组件依然可以编译,并会用一行文字回答说没有可用的提供商,因此使用它的项目可以在每个平台上都能构建成功。正在设计的页面本身不会被发送到任何地方,除了 Refine 所需要的内容,也就是页面本身。

延伸阅读

观看视频

关于此功能的简短视频发布在eSeGeCe 频道上。

有问题、反馈,或需要迁移方面的帮助?欢迎联系我们 — 你会收到编写这些代码的人的回复。