如何輸入一張草圖，生成美觀的版面圖？下面來看一個多模態布局生成思路。

草圖生成版面圖效果

方法

整體框架

如上圖框架，文檔布局生成的目標是：以“用戶草圖+圖像+文本”為輸入，生成“符合草圖結構、視覺美觀、語義連貫（如閱讀順序正確）”的多模態布局。

多模態模型微調PaLIGemma 3B，目的是“理解草圖結構+關聯素材內容+生成結構化布局代碼”。模型需同時處理視覺（草圖+圖像）和文本（文本+prompt）輸入，實現“結構與內容的對齊”。

PaLIGemma 3B由兩部分構成：

• 語言 backbone：Gemma（Google DeepMind的開源LLM），擅長代碼生成（因論文將布局生成轉成protobuf代碼生成任務，Gemma的代碼能力可直接復用）；
• 視覺 encoder：ViT（Vision Transformer），擅長提取圖像的結構化特征（草圖的布局結構、圖像資產的內容特征）。

模型輸出Protocol Buffer（protobuf）格式的布局代碼（而非直接輸出像素圖像），代碼中包含每個資產的：

• 位置信息：??xmin??（左上角x坐標）、??ymin??（左上角y坐標）、??width??、??height??；
• 屬性信息：素材類型（文本/圖像）、內容（如文本的具體文字、圖像的標識）。

隨后，protobuf代碼可被轉換為SVG格式（可編輯、可縮放），最終渲染為可視化的“最終布局”。

數據合成思路

既然核心是微調VLM，那么主要看一下數據合成策略：

草圖數據合成pipline

真實草圖數據的收集成本極高，提出低成本、大規模的合成草圖生成方法，該方法分兩步實現：

1、第一步：收集草圖素材（基元）

基礎素材是構成草圖的最小單元，對應布局中兩類元素塊：

• 文本塊：用1~N條水平直線表示（如1條線代表標題、3條線代表段落）；
• 圖像塊：用“帶叉的矩形”表示（直觀區分圖像與文本）。

2、 第二步：基于基元合成完整草圖

對每個數據集（如PubLayNet）訓練數據對，按以下規則合成草圖：

1. 素材屬性匹配：

• 對圖像：計算其“標準化寬高比”，與所有圖像基元的寬高比計算歐氏距離；
• 對文本：計算其“bounding box寬高+字體大小”，與所有文本基元的對應屬性計算歐氏距離。

2. 基元選擇與組合：對每個資產，選取“距離最近的k個基元”（k為超參數），隨機選擇1個；將選中的基元按資產的真實尺寸縮放，放置到布局中對應資產的位置； 所有資產的基元組合后，形成“完整合成草圖”。

合成草圖與人工收集草圖的比較

實驗性能

數據集統計。訓練集和驗證集包含合成生成的草圖，而測試集則由人工收集的草圖組成

不同的覆蓋范圍

模型在真實手繪圖像與合成手繪圖像的測試集 上的性能對比

本文轉載自???大模型自然語言處理???   作者：老余