File size: 5,812 Bytes
44ea5b0 b2214a3 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 |
---
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
```bash
pip install evaluate opencv-python
```
### Basic Example
```python
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
```python
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
```bibtex
@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)](https://arxiv.org/abs/2303.15937)
- **Reference Implementation**: [PosterLayout eval.py](https://github.com/PKU-ICST-MIPL/PosterLayout-CVPR2023/blob/main/eval.py#L144-L171)
- **Related**: CGL-GAN text readability evaluation
## Related Metrics
- [Layout Occlusion](../layout_occlusion/): Evaluates coverage of salient regions
- [Layout Utility](../layout_utility/): Measures utilization of suitable space
- [Layout Underlay Effectiveness](../layout_underlay_effectiveness/): Evaluates underlay placement
|