README.md

metadata

title: Layout Unreadability
emoji: 🌍
colorFrom: gray
colorTo: blue
sdk: gradio
sdk_version: 4.36.1
app_file: app.py
pinned: false

Layout Unreadability

Description

The Layout Unreadability metric evaluates whether text elements are placed on visually complex or non-flat background regions that could impair readability. This metric computes the non-flatness (gradient intensity) of regions where text is positioned, helping assess whether text placement respects readability principles in content-aware layout design.

What It Measures

This metric computes:

• Background complexity under text: Gradient intensity in regions occupied by text elements
• Text readability risk: Whether text is placed on busy or complex backgrounds
• Content-awareness: How well the layout avoids placing text on unsuitable regions

Lower scores indicate better text placement on flat, readable backgrounds.

Metric Details

• Uses Sobel gradient operators to detect edges and texture in background canvas
• Computes gradient magnitude (non-flatness) in regions covered by text elements
• Excludes underlay/decoration elements from background canvas analysis
• From PosterLayout (Hsu et al., CVPR 2023) and CGL-GAN methodology
• Lower gradient scores mean text is on flatter, more readable backgrounds

Usage

Installation

pip install evaluate opencv-python

Basic Example

import evaluate
import numpy as np

# Load the metric with canvas dimensions
metric = evaluate.load(
    "creative-graphic-design/layout-unreadability",
    canvas_width=360,
    canvas_height=504,
    text_label_index=1,
    decoration_label_index=3
)

# Prepare data
predictions = np.random.rand(1, 25, 4)  # normalized ltrb coordinates
gold_labels = np.random.randint(0, 4, size=(1, 25))  # class labels
# Paths to canvas background images
image_canvases = ["path/to/canvas_image.jpg"]

score = metric.compute(
    predictions=predictions,
    gold_labels=gold_labels,
    image_canvases=image_canvases
)
print(score)

Batch Processing Example

import evaluate

# Load the metric
metric = evaluate.load(
    "creative-graphic-design/layout-unreadability",
    canvas_width=360,
    canvas_height=504,
    text_label_index=1,
    decoration_label_index=3
)

# Batch processing
batch_size = 128
predictions = np.random.rand(batch_size, 25, 4)
gold_labels = np.random.randint(0, 4, size=(batch_size, 25))
image_canvases = [f"path/to/canvas_{i}.jpg" for i in range(batch_size)]

score = metric.compute(
    predictions=predictions,
    gold_labels=gold_labels,
    image_canvases=image_canvases
)
print(score)

Parameters

Initialization Parameters

• canvas_width (int, required): Width of the canvas in pixels
• canvas_height (int, required): Height of the canvas in pixels
• text_label_index (int, optional, default=1): Class index for text elements
• decoration_label_index (int, optional, default=3): Class index for underlay/decoration elements to mask out

Computation Parameters

• predictions (list of lists of float): Normalized bounding boxes in ltrb format (0.0 to 1.0)
• gold_labels (list of lists of int): Class labels for each element (0 = padding)
• image_canvases (list of str): File paths to canvas background images

Note:

• Canvas images should show the background content (photos, graphics) where layout will be placed
• Underlay/decoration elements are masked out before computing gradients
• Only text elements (text_label_index) are evaluated for readability

Returns

Returns a float value representing the average gradient intensity under text elements (range: 0.0 to 1.0).

Interpretation

• Lower is better (range: 0.0 to 1.0)
• Value ~0.0: Text placed on flat, uniform backgrounds (ideal for readability)
• Value 0.0-0.2: Good text placement on relatively flat regions
• Value 0.2-0.4: Moderate background complexity, may affect readability
• Value 0.4-0.6: High background complexity, readability concerns
• Value > 0.6: Very complex backgrounds under text (poor placement)

Use Cases

• Content-aware poster generation: Ensure text is readable on background imagery
• Advertisement layout: Place call-to-action text on suitable backgrounds
• Presentation slides: Validate text visibility on photo backgrounds
• Magazine/flyer design: Assess text-background contrast and readability

Key Insights

• Readability principle: Text should be on flat or low-detail backgrounds
• Design solutions: Use underlay/decoration elements to create readable regions
• Trade-off: Sometimes text must go on complex backgrounds (consider semi-transparent overlays)
• Context matters: Title text may tolerate more complexity than body text

Citations

@inproceedings{hsu2023posterlayout,
  title={Posterlayout: A new benchmark and approach for content-aware visual-textual presentation layout},
  author={Hsu, Hsiao Yuan and He, Xiangteng and Peng, Yuxin and Kong, Hao and Zhang, Qing},
  booktitle={Proceedings of the IEEE/CVF Conference on Computer Vision and Pattern Recognition},
  pages={6018--6026},
  year={2023}
}

References

• Paper: PosterLayout (Hsu et al., CVPR 2023)
• Reference Implementation: PosterLayout eval.py
• Related: CGL-GAN text readability evaluation

Related Metrics

• Layout Occlusion: Evaluates coverage of salient regions
• Layout Utility: Measures utilization of suitable space
• Layout Underlay Effectiveness: Evaluates underlay placement