layout生成之构想

一些设计灵感

---

论文1

整体提示设计。图2中的每个模块都从一个语言模型中获取信息，并将其转换为最终布局中包含的元素。为每个模块设计了一个LLM提示，包括三个元素：(1)任务描述：概述任务的上下文和目标；(2)输出格式：指定了输出的预期结构和类型；(3)一次性例子：一个具体的例子，以帮助LLM理解任务。图2的蓝色对话框中的文本表示简化提示2的示例。LLM对这些提示的高级响应经过后处理，然后用作模块的输入参数，以生成场景的低级规范。

在地板模块中的LLM输出中，为每个房间提供了以下详细信息：房间类型：房间的名称，如厨房、卧室。•地板材料：对地板外观的描述。•墙材料：对墙的外观的描述。•顶点：四个元组{（xi，yi），i∈[1,2,3,4]}，表示房间各个角的坐标。材料选择。我们有236种材料中的每一种的图像表示，与程序[7] 9中的材料设置一致。使用CLIP10 [40]，我们计算了大语言模型（LLM）提供的材料描述与这些图像之间的相似性。选择相似度得分最高的材料。此外，我们利用自克隆库[21]中的148种颜色，通过选择最接近CLIP描述的颜色来细化材料的选择。墙的高度。我们有LLM根据用户的输入建议一个合适的墙的高度。例如，它可能会为博物馆等商业空间推荐一个较高的天花板。

---

论文2

这给为llm提供上下文学习的UI范例带来了挑战，特别是考虑到现有llm有限的上下文窗口和仅文本输入/输出模态。在这里，我们回顾了最近为LLM提示适应UI输入的工作方法：Wang等人（2023）将UI解析为HTML文件，为4个任务输入PALM的移动UI任务，即屏幕问题生成、屏幕总结、屏幕问题回答和将指令映射到UI操作。他们使用类、文本、源id、内容desc属性来包含屏幕小部件的详细信息。

Liu等人（2023）研究了使用GPT-3通过自然语言对话进行自动GUI测试。他们使用应用程序的属性和屏幕小部件从相应的AndroidManifast.xml文件中提取静态上下文，包括应用程序名称、活动名称、小部件文本和WidgetID，并使用这些属性构建描述UI状态的自然语言句子。

虽然Feng等人（2023）没有直接使用UI数据，但他们使用GPT-3.5来生成2D图像布局，这一任务与移动UI布局生成共享许多相似之处。他们将图像元素的位置解析为CSS（层叠样式表的缩写）片段，并将标准化的位置值作为GPT输入。

这张图展示了一个使用大型语言模型（LLM）生成特定用户界面（UI）布局的JSON文件的过程。这个过程从一个原始的UI屏幕开始，通过解析（Parse）和转换（Screen2Words Dataset），得到一个可以被LLM处理的描述性文本（Prompt）。然后，使用LLM根据这个描述性文本来生成目标UI的JSON结构描述。

流程可以分为以下几个部分：

原始屏幕：从“Clay Dataset”中选取的原始UI屏幕的例子。

解析：将原始屏幕解析为更抽象的描述，转换成LLM可以理解的格式。

Prompt设计：创建用于LLM的提示，无需UI语法。例如，“list of articles in a news app, page displaying favorites in a news app, ...”这样的提示。

JSON示例：提供一个例子（One-shot exemplar），它是以JSON格式表示的，描述了Android移动用户界面。这个JSON例子为LLM提供了生成新UI描述的结构框架。

目标UI描述：文本描述想要生成的UI界面，例如，“display of showing different chapters in a learning app”。

生成控制空间：这是描述用户界面元素的空间，提供了允许的UI元素标签，例如“Root, Background, Image, ...”。

API响应格式：定义了返回JSON结果的格式。在这个例子中，用户被要求以特定格式返回结果。

对于我们的第二个管道和提示式设计（图3），我们引入了UI语法，作为UI布局生成的中间步骤，其架构类似于神经符号模型（Sarker et al.，2021）。在1-shot示例中，我们没有要求llm直接生成最终的屏幕布局，我们将UI布局生成描述为两个步骤的过程：首先，我们在屏幕中介绍UI语法列表，然后解释如何使用提供的UI语法生成示例UI布局。

---

论文3

为了解决这些挑战，我们引入了LayoutGPT，这是一种无需训练的方法，它向llm注入视觉常识，并使它们能够基于文本条件生成理想的布局。尽管在没有任何图像数据的情况下进行训练，但我们发现llm可以通过上下文演示来学习视觉常识，然后应用这些知识来推断新样本的视觉规划。具体来说，我们观察到表示图像布局与样式表语言格式化网页上的图像高度兼容。因此，由于llm是用程序数据进行训练的，因此将其构建为结构化程序的布局可以增强llm仅仅从语言令牌中“想象”对象位置的能力。我们的程序不仅实现了稳定和一致的输出结构，而且加强了llm对每个单独属性值背后的视觉概念的理解。当与区域控制的图像生成模型[27]结合时，LayoutGPT比现有方法高出20-40%，在生成合理的图像布局和获得具有正确对象计数或空间关系的图像方面取得了与人类用户相当的性能。

如图2所示，LayoutGPT提示由三个主要组件组成：任务指令和具有规范化的CSS结构中的上下文范例。

CSS结构在自回归布局生成中，oj通常被建模为一个简单的值序列，即（c1、x1、y1、w1、h1、c2、x2、……）[18,24]。然而，由于每个值的含义不明确，llm很难理解这样的序列。因此，我们寻求一种结构化的格式，以指定llm来解释空间知识的每个值的物理意义。我们意识到，图像布局与CSS（层叠样式表的缩写）格式化网页布局的格式非常相似，并在HTML中定义了img标签的各种属性。例如，xj，yj对应于左边和顶部的标准属性，而wj，hj对应于CSS中的宽度和高度。

这幅图展示的是LayoutGPT框架的概览，它是一个用于2D布局规划和场景合成的流程。LayoutGPT利用文本条件（即文本描述的输入条件）来指导图像生成或3D布局的计划。以下是整个流程的步骤：

1. **输入条件**（Input Condition）：
   - 提供两个输入示例：一个是图像布局生成的输入（例如，“A tower of a building that has a clock on it”），另一个是场景合成的输入（例如，房间类型和尺寸）。

2. **输入提示**（Input prompt）：
   - 这些输入条件被转换成一个输入提示，用来检索相关的上下文示例。

3. **检索上下文示例**（Retrieve in-context exemplars）：
   - 根据输入提示，使用某种函数`f(·)`来检索相关的上下文示例。这些示例将作为参考，来帮助LLM理解和生成目标布局。

4. **任务指令**（Task Instruction）：
   - 包含任务描述、格式定义和可用的对象类别等信息。这部分为LLM提供必要的背景信息，以便正确理解任务。

5. **LLM的输出**（LLM Output）：
   - LLM根据输入提示和任务指令生成CSS格式的布局。

6. **CSS结构转换**（CSS Structure）：
   - 根据LLM的输出，将布局属性（如高度、宽度、位置等）规范化并转换为CSS格式。

7. **场景合成条件**（Scene Synthesis）：
   - 基于LLM输出的布局和新定义的属性来规划场景的合成。

8. **布局到图像模型**（Layout-to-Image Model）：
   - 将文本条件下的布局转换为可视化图像。

9. **场景合成可视化**（Indoor Scene Synthesis）：
   - 根据生成的布局和属性合成室内场景的3D视觉表示。

总的来说，这个框架描述了从文本描述开始，到LLM生成详细布局，再到将这些布局转换为图像或3D场景的完整过程。这为使用自然语言描述来创建复杂视觉内容的自动化方法提供了一种新的途径。