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>
94 lines
4.3 KiB
Python
94 lines
4.3 KiB
Python
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 VisualHierarchyGeneralApp(FlaskAppTemplate):
|
|
"""
|
|
Visual Hierarchy General Check - For Digital Static Assets
|
|
"""
|
|
|
|
def __init__(self):
|
|
# Define the hardcoded prompt
|
|
prompt = """You are performing a visual quality control check on a digital marketing asset. Your task is to determine whether the visual hierarchy is simple and clear for digital viewing (desktop, mobile, tablet, social media).
|
|
|
|
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:
|
|
|
|
1. Clear Visual Order: The design must present a clear order for all communication elements. The viewer's eye should flow naturally in this priority:
|
|
a. Core Image (hero visual or main product)
|
|
b. Brand/Logo
|
|
c. Headline (key message or value proposition)
|
|
d. Primary Message/Supporting Copy
|
|
e. Call to Action (if present)
|
|
|
|
2. Element Differentiation: Elements should be differentiated by size, shape, boldness, or color to guide the viewer's attention effectively.
|
|
|
|
3. Digital Viewing Optimization:
|
|
a. Key elements should be immediately noticeable on screen
|
|
b. Hierarchy should work across different screen sizes (responsive design consideration)
|
|
c. Important information should not require scrolling or zooming to discover
|
|
|
|
4. Basic Visual Tests:
|
|
a. Are the core visual and brand logo the most prominent elements in the design?
|
|
b. Does the text vary in size and color to create clear hierarchy (avoid uniformity)?
|
|
c. Is there a clear primary focal point that draws attention first?
|
|
|
|
5. Gaze Sequence Test: Ensure the natural gaze sequence touches upon:
|
|
a. Brand logo
|
|
b. Main visual/hero image
|
|
c. Product (if featured)
|
|
d. Core message/headline
|
|
e. Call to action (if present)
|
|
|
|
STEPS TO EVALUATE:
|
|
1. Examine the design's layout and identify each element
|
|
2. Check prominence of elements according to the criteria above
|
|
3. Assess if the elements provide a clear path for the viewer's eye to follow in the prescribed order
|
|
4. Evaluate text differentiation in size, weight, and color
|
|
5. Confirm whether the brand logo and core visual stand out as the largest/most prominent elements
|
|
6. Verify the gaze sequence naturally flows to key elements in logical order
|
|
|
|
DECISION CRITERIA:
|
|
• Pass: Clear visual hierarchy with logical eye flow, proper element differentiation, and prominent brand/core visual
|
|
• Fail: Unclear hierarchy, competing elements, poor differentiation, or confusing visual flow
|
|
|
|
YOUR OUTPUT MUST INCLUDE:
|
|
• Detailed analysis of the visual hierarchy and eye flow
|
|
• Assessment of element prominence and differentiation
|
|
• Evaluation of the gaze sequence
|
|
• Specific issues if hierarchy is unclear
|
|
|
|
Format your response as JSON:
|
|
{
|
|
"visual_hierarchy": "Pass" or "Fail",
|
|
"hierarchy_score": "Strong", "Adequate", or "Weak",
|
|
"analysis_details": "Detailed explanation of visual hierarchy assessment, eye flow, and element prominence",
|
|
"gaze_sequence_evaluation": "Description of how the eye naturally flows through the design",
|
|
"element_prominence": {
|
|
"logo": "Assessment of logo prominence",
|
|
"core_visual": "Assessment of main visual prominence",
|
|
"headline": "Assessment of headline prominence",
|
|
"cta": "Assessment of CTA prominence (if present)"
|
|
},
|
|
"recommendations": ["Specific recommendation 1", "Specific recommendation 2"] (if failed)
|
|
}
|
|
|
|
CRITICAL:
|
|
1. Always provide detailed analysis_details explaining the hierarchy assessment
|
|
2. Focus on digital viewing context (screen-based, not physical distance)
|
|
3. Evaluate whether hierarchy works for quick comprehension on digital devices
|
|
4. Never return just "Pass" or "Fail" without comprehensive explanation"""
|
|
|
|
# Initialize the Flask app with the prompt
|
|
super().__init__(__name__, prompt)
|
|
|
|
# Run the app if executed directly
|
|
if __name__ == "__main__":
|
|
app = VisualHierarchyGeneralApp()
|
|
app.run(debug=True)
|