9f9777240a
Adds Tesseract-based OCR pre-processing that computes pixel-level text positions, margins, spacing, and alignment before LLM analysis. This enables detection of subtle layout differences that vision models miss (e.g. 2.8% vs 6.4% headline margin, 83px vs 39px date gap). OCR measurements injected into 10 checks across all client profiles: - Amazon: margins, typography, headline_layout - Static General: element_alignment, safety_area, visual_hierarchy_general, text_readability_general, text_edge_clearance - L'Oreal: text_readability - Diageo/Unilever KV: visual_hierarchy Non-blocking: if Tesseract is unavailable, checks run with visual estimation only. Production requires: sudo apt install tesseract-ocr Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
63 lines
2.8 KiB
Python
Executable file
63 lines
2.8 KiB
Python
Executable file
import os
|
||
import sys
|
||
|
||
# Add parent directory to path to import shared modules
|
||
sys.path.append(os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__)))))
|
||
|
||
from visual_qc_apps.flask_app_template import FlaskAppTemplate
|
||
|
||
class VisualHierarchyApp(FlaskAppTemplate):
|
||
"""
|
||
Visual Hierarchy Check
|
||
"""
|
||
|
||
def __init__(self):
|
||
# Define the hardcoded prompt
|
||
prompt = """You are performing a visual quality-control check on a Point of Sale (POS) advertisement. Your task is to determine whether the visual hierarchy is simple and clear. Follow the criteria below to evaluate and validate the visual layout:
|
||
|
||
IMPORTANT: This check requires a reference asset (brand guideline document or image) to properly evaluate brand-specific hierarchy requirements and visual flow standards. The reference asset will provide brand-specific layout guidelines and hierarchy expectations.
|
||
|
||
MEASUREMENT DATA:
|
||
If OCR LAYOUT MEASUREMENTS are provided at the end of this prompt, use the computed character heights and element positions to verify size hierarchy between text elements. Larger character height = more prominent element. Use these measurements to confirm whether elements are correctly sized relative to each other.
|
||
|
||
CRITERIA FOR EVALUATION:
|
||
Clear Order: The advertisement must present a clear order for all communication elements. The eye should flow naturally in this order:
|
||
|
||
1. Core Image
|
||
2. Brand/Variant
|
||
3. Headline (Win, New, etc.)
|
||
4. Primary Message
|
||
5. Element Differentiation: Differentiate elements by size, shape, boldness, or color to guide the viewer's attention.
|
||
|
||
Basic Test:
|
||
Is the core visual & brand logo the largest elements on the design?
|
||
Does the text vary in size and color to avoid uniformity?
|
||
3MVAS Test: Ensure the gaze sequence touches upon:
|
||
|
||
Brand logo
|
||
Main visual
|
||
Product
|
||
Core message
|
||
|
||
STEPS TO EVALUATE:
|
||
1. Examine the advertisement's layout. Identify each element and check its prominence according to the criteria above.
|
||
2. Assess if the elements provide a clear path for the viewer's eye to follow in the prescribed order.
|
||
3. Evaluate text differentiation in size and color. Ensure the brand logo and core visual stand out as the largest elements.
|
||
4. Confirm whether the gaze sequence naturally flows to the key elements outlined in the 3MVAS Test.
|
||
|
||
YOUR OUTPUT:
|
||
State whether the visual hierarchy is "Pass" or "Fail."
|
||
If it fails, provide 1–2 concise recommendations for improving visual hierarchy clarity.
|
||
Provide a JSON code block with these fields:
|
||
{
|
||
"visual_hierarchy": "Pass" or "Fail",
|
||
"recommendations": ["If fail, list recommendations here"]
|
||
}"""
|
||
|
||
# Initialize the Flask app with the prompt
|
||
super().__init__(__name__, prompt)
|
||
|
||
# Run the app if executed directly
|
||
if __name__ == "__main__":
|
||
app = VisualHierarchyApp()
|
||
app.run(debug=True)
|