112719b2c5
- Redesigned frontend with Outfit/Figtree typography, coral accent palette, noise texture, glassmorphism header, and staggered animations - Split monolithic index.html into modular JS (app, api, upload, batch, results, page-viewer, utils) and extracted CSS - Fixed worker.py to generate page images for Visual Page Inspector - Added Docker Compose stack (web, worker, redis, postgres) - Added batch upload, HTML report export, rate limiting, and Redis queue - Extended test suite with checker, remediation, worker, and DB tests Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
128 lines
4.5 KiB
Python
128 lines
4.5 KiB
Python
#!/usr/bin/env python3
|
|
"""
|
|
Create a test PDF with images that will trigger the visual inspector
|
|
"""
|
|
|
|
from reportlab.lib.pagesizes import letter
|
|
from reportlab.pdfgen import canvas
|
|
from reportlab.lib.utils import ImageReader
|
|
from PIL import Image, ImageDraw, ImageFont
|
|
import io
|
|
|
|
def create_image_with_text(text, width=300, height=100, bg_color='red', text_color='white'):
|
|
"""Create an image with text in it (accessibility violation)"""
|
|
img = Image.new('RGB', (width, height), color=bg_color)
|
|
draw = ImageDraw.Draw(img)
|
|
|
|
# Try to use a decent font
|
|
try:
|
|
font = ImageFont.truetype("/System/Library/Fonts/Helvetica.ttc", 24)
|
|
except (OSError, IOError):
|
|
font = ImageFont.load_default()
|
|
|
|
# Draw text on image
|
|
bbox = draw.textbbox((0, 0), text, font=font)
|
|
text_width = bbox[2] - bbox[0]
|
|
text_height = bbox[3] - bbox[1]
|
|
|
|
position = ((width - text_width) // 2, (height - text_height) // 2)
|
|
draw.text(position, text, fill=text_color, font=font)
|
|
|
|
# Convert to bytes
|
|
buffer = io.BytesIO()
|
|
img.save(buffer, format='PNG')
|
|
buffer.seek(0)
|
|
return ImageReader(buffer)
|
|
|
|
def create_test_pdf():
|
|
"""Create a test PDF with accessibility issues"""
|
|
filename = "test_visual_inspector.pdf"
|
|
c = canvas.Canvas(filename, pagesize=letter)
|
|
width, height = letter
|
|
|
|
# Page 1 - Images with text (will show markers)
|
|
c.setFont("Helvetica-Bold", 24)
|
|
c.drawString(50, height - 50, "Page 1: Images with Text Issues")
|
|
|
|
c.setFont("Helvetica", 12)
|
|
c.drawString(50, height - 80, "These images contain text - accessibility violations!")
|
|
|
|
# Image 1 - Red box with "CLICK HERE" (bad practice)
|
|
img1 = create_image_with_text("CLICK HERE", 300, 100, 'red', 'white')
|
|
c.drawImage(img1, 50, height - 250, width=300, height=100)
|
|
|
|
# Image 2 - Yellow box with "Important Info" (bad practice)
|
|
img2 = create_image_with_text("Important Information", 350, 120, 'orange', 'black')
|
|
c.drawImage(img2, 50, height - 400, width=350, height=120)
|
|
|
|
# Image 3 - Blue box with "Warning" (bad practice)
|
|
img3 = create_image_with_text("⚠️ WARNING", 280, 90, 'blue', 'yellow')
|
|
c.drawImage(img3, 50, height - 550, width=280, height=90)
|
|
|
|
c.showPage()
|
|
|
|
# Page 2 - More images
|
|
c.setFont("Helvetica-Bold", 24)
|
|
c.drawString(50, height - 50, "Page 2: More Text-in-Image Issues")
|
|
|
|
c.setFont("Helvetica", 12)
|
|
c.drawString(50, height - 80, "All of these should be actual text, not images!")
|
|
|
|
# Image 4 - Green box with "Submit" (button as image)
|
|
img4 = create_image_with_text("SUBMIT", 200, 80, 'green', 'white')
|
|
c.drawImage(img4, 100, height - 200, width=200, height=80)
|
|
|
|
# Image 5 - Purple box with "Learn More" (link as image)
|
|
img5 = create_image_with_text("Learn More →", 250, 90, 'purple', 'white')
|
|
c.drawImage(img5, 100, height - 350, width=250, height=90)
|
|
|
|
# Image 6 - Gray box with instructions (bad practice)
|
|
img6 = create_image_with_text("Instructions Here", 320, 100, 'gray', 'white')
|
|
c.drawImage(img6, 100, height - 500, width=320, height=100)
|
|
|
|
c.showPage()
|
|
|
|
# Page 3 - Correct way (no images with text)
|
|
c.setFont("Helvetica-Bold", 24)
|
|
c.drawString(50, height - 50, "Page 3: Correct Implementation")
|
|
|
|
c.setFont("Helvetica", 12)
|
|
c.drawString(50, height - 80, "This page uses actual text - much better!")
|
|
|
|
# Use actual text instead of images
|
|
c.setFont("Helvetica-Bold", 18)
|
|
c.setFillColorRGB(1, 0, 0)
|
|
c.drawString(100, height - 150, "CLICK HERE")
|
|
|
|
c.setFillColorRGB(1, 0.5, 0)
|
|
c.drawString(100, height - 200, "Important Information")
|
|
|
|
c.setFillColorRGB(0, 0, 1)
|
|
c.drawString(100, height - 250, "⚠️ WARNING")
|
|
|
|
c.setFillColorRGB(0, 0.5, 0)
|
|
c.drawString(100, height - 300, "SUBMIT")
|
|
|
|
c.setFillColorRGB(0.5, 0, 0.5)
|
|
c.drawString(100, height - 350, "Learn More →")
|
|
|
|
c.setFillColorRGB(0, 0, 0)
|
|
c.setFont("Helvetica", 12)
|
|
c.drawString(50, height - 450, "This page should show NO markers in the visual inspector!")
|
|
c.drawString(50, height - 470, "(Because it uses proper accessible text)")
|
|
|
|
c.showPage()
|
|
c.save()
|
|
|
|
print(f"✅ Created {filename}")
|
|
print(f"")
|
|
print(f"This PDF has:")
|
|
print(f" • Page 1: 3 images with text (will show 3 markers)")
|
|
print(f" • Page 2: 3 images with text (will show 3 markers)")
|
|
print(f" • Page 3: Proper text (will show 0 markers)")
|
|
print(f"")
|
|
print(f"Upload this to test the Visual Page Inspector!")
|
|
print(f"You should see red/orange markers highlighting each image.")
|
|
|
|
if __name__ == "__main__":
|
|
create_test_pdf()
|