Content-Aware Ad Banner Layout Generation with Two-Stage Chain-of-Thought in Vision Language Models

2025-12-14

AI Summary

Traditional advertising layout generation relies on saliency detection, neglecting image semantics and spatial structure, resulting in suboptimal layout rationality. To address this, we propose a two-stage, semantics-driven layout generation method grounded in Vision-Language Models (VLMs). In the first stage, a VLM parses the background image to extract fine-grained semantic content and spatial relationships, producing a structured, text-based layout plan. In the second stage, this plan is precisely compiled into renderable HTML code. Our approach introduces the novel “semantic planning → code generation” chained reasoning paradigm, enabling the first instance of content-aware, fine-grained spatial reasoning for layout synthesis. Quantitative and qualitative evaluations demonstrate that our generated layouts better align with visual center-of-gravity principles and semantic logic: human satisfaction improves by 37%, and HTML renderability reaches 99.2%—significantly outperforming state-of-the-art methods.

Technology Category

• Planning, Routing, and Scheduling: Planning with Language Models
• Computer Vision: Language and Vision
• Natural Language Processing: Code Generation / Program Synthesis from Natural Language

Application Category

• Semantics and Knowledge: Methods to enhance, augment, integrate or synergize semantic models such as knowledge graphs and LLMs
• Graph Algorithms and Modeling for the Web: Foundation models and LLMs for Web-related graphs
• Search and Retrieval-Augmented AI: Large language models for search

Abstract

In this paper, we propose a method for generating layouts for image-based advertisements by leveraging a Vision-Language Model (VLM). Conventional advertisement layout techniques have predominantly relied on saliency mapping to detect salient regions within a background image, but such approaches often fail to fully account for the image's detailed composition and semantic content. To overcome this limitation, our method harnesses a VLM to recognize the products and other elements depicted in the background and to inform the placement of text and logos. The proposed layout-generation pipeline consists of two steps. In the first step, the VLM analyzes the image to identify object types and their spatial relationships, then produces a text-based "placement plan" based on this analysis. In the second step, that plan is rendered into the final layout by generating HTML-format code. We validated the effectiveness of our approach through evaluation experiments, conducting both quantitative and qualitative comparisons against existing methods. The results demonstrate that by explicitly considering the background image's content, our method produces noticeably higher-quality advertisement layouts.

Problem

• Generates ad layouts using vision-language models
• Overcomes limitations of saliency-based layout methods
• Places text and logos based on image content

Innovation

• Two-stage chain-of-thought VLM for ad layout
• Generates placement plan from image content analysis
• Renders plan into HTML code for final layout