Spaces:
Running
Running
| [{"id": 0, "difficulty": "easy", "source": "easy/0", "reference_image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/0/reference.png", "reference_html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Login</title></head>\n<body style=\"margin:0;font-family:sans-serif;background:#f0f2f5;display:flex;align-items:center;justify-content:center;min-height:100vh;\">\n <div style=\"background:#fff;padding:40px;border-radius:8px;box-shadow:0 2px 12px rgba(0,0,0,.1);width:320px;\">\n <h2 style=\"margin:0 0 24px;text-align:center;color:#1a1a1a;\">Sign In</h2>\n <label style=\"display:block;margin-bottom:6px;font-size:14px;color:#555;\">Email</label>\n <input type=\"email\" placeholder=\"you@example.com\" style=\"width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid #ddd;border-radius:6px;font-size:14px;margin-bottom:16px;\">\n <label style=\"display:block;margin-bottom:6px;font-size:14px;color:#555;\">Password</label>\n <input type=\"password\" placeholder=\"\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\" style=\"width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid #ddd;border-radius:6px;font-size:14px;margin-bottom:24px;\">\n <button style=\"width:100%;padding:12px;background:#4f46e5;color:#fff;border:none;border-radius:6px;font-size:15px;cursor:pointer;\">Sign In</button>\n <p style=\"text-align:center;margin-top:16px;font-size:13px;color:#888;\">Don't have an account? <a href=\"#\" style=\"color:#4f46e5;\">Sign up</a></p>\n </div>\n</body>\n</html>\n", "variants": [{"name": "perfect", "rewards": {"format": 0.5, "validity": 1.0, "structural": 1.0, "text_block": 1.0, "position": 1.0, "color": 1.0, "clip": 1.0, "ssim": 1.0, "total": 0.9773}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/0/perfect.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Login</title></head>\n<body style=\"margin:0;font-family:sans-serif;background:#f0f2f5;display:flex;align-items:center;justify-content:center;min-height:100vh;\">\n <div style=\"background:#fff;padding:40px;border-radius:8px;box-shadow:0 2px 12px rgba(0,0,0,.1);width:320px;\">\n <h2 style=\"margin:0 0 24px;text-align:center;color:#1a1a1a;\">Sign In</h2>\n <label style=\"display:block;margin-bottom:6px;font-size:14px;color:#555;\">Email</label>\n <input type=\"email\" placeholder=\"you@example.com\" style=\"width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid #ddd;border-radius:6px;font-size:14px;margin-bottom:16px;\">\n <label style=\"display:block;margin-bottom:6px;font-size:14px;color:#555;\">Password</label>\n <input type=\"password\" placeholder=\"\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\" style=\"width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid #ddd;border-radius:6px;font-size:14px;margin-bottom:24px;\">\n <button style=\"width:100%;padding:12px;background:#4f46e5;color:#fff;border:none;border-radius:6px;font-size:15px;cursor:pointer;\">Sign In</button>\n <p style=\"text-align:center;margin-top:16px;font-size:13px;color:#888;\">Don't have an account? <a href=\"#\" style=\"color:#4f46e5;\">Sign up</a></p>\n </div>\n</body>\n</html>\n"}, {"name": "minor_diff", "rewards": {"format": 0.5, "validity": 1.0, "structural": 1.0, "text_block": 1.0, "position": 0.9943, "color": 0.6554, "clip": 0.9346, "ssim": 0.7712, "total": 0.8837}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/0/minor_diff.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Login</title></head>\n<body style=\"margin:0;font-family:sans-serif;background:#888888;display:flex;align-items:center;justify-content:center;min-height:100vh;\">\n <div style=\"background:#fff;padding:40px;border-radius:8px;box-shadow:0 2px 12px rgba(0,0,0,.1);width:320px;\">\n <h2 style=\"margin:0 0 24px;text-align:center;color:#1a1a1a;\">Sign In</h2>\n <label style=\"display:block;margin-bottom:6px;font-size:10px;color:#555;\">Email</label>\n <input type=\"email\" placeholder=\"you@example.com\" style=\"width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid #ddd;border-radius:6px;font-size:10px;margin-bottom:16px;\">\n <label style=\"display:block;margin-bottom:6px;font-size:14px;color:#555;\">Password</label>\n <input type=\"password\" placeholder=\"\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\" style=\"width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid #ddd;border-radius:6px;font-size:14px;margin-bottom:24px;\">\n <button style=\"width:100%;padding:12px;background:#4f46e5;color:#fff;border:none;border-radius:6px;font-size:15px;cursor:pointer;\">Sign In</button>\n <p style=\"text-align:center;margin-top:16px;font-size:13px;color:#888;\">Don't have an account? <a href=\"#\" style=\"color:#4f46e5;\">Sign up</a></p>\n </div>\n</body>\n</html>\n"}, {"name": "bad_colors", "rewards": {"format": 0.5, "validity": 1.0, "structural": 1.0, "text_block": 1.0, "position": 1.0, "color": 0.0, "clip": 0.7947, "ssim": 0.4944, "total": 0.7253}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/0/bad_colors.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Login</title></head>\n<body style=\"margin:0;font-family:sans-serif;background:#0f0d0a;display:flex;align-items:center;justify-content:center;min-height:100vh;\">\n <div style=\"background:#fff;padding:40px;border-radius:8px;box-shadow:0 2px 12px rgba(0,0,0,.1);width:320px;\">\n <h2 style=\"margin:0 0 24px;text-align:center;color:#e5e5e5;\">Sign In</h2>\n <label style=\"display:block;margin-bottom:6px;font-size:14px;color:#555;\">Email</label>\n <input type=\"email\" placeholder=\"you@example.com\" style=\"width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid #ddd;border-radius:6px;font-size:14px;margin-bottom:16px;\">\n <label style=\"display:block;margin-bottom:6px;font-size:14px;color:#555;\">Password</label>\n <input type=\"password\" placeholder=\"\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\" style=\"width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid #ddd;border-radius:6px;font-size:14px;margin-bottom:24px;\">\n <button style=\"width:100%;padding:12px;background:#b0b91a;color:#fff;border:none;border-radius:6px;font-size:15px;cursor:pointer;\">Sign In</button>\n <p style=\"text-align:center;margin-top:16px;font-size:13px;color:#888;\">Don't have an account? <a href=\"#\" style=\"color:#b0b91a;\">Sign up</a></p>\n </div>\n</body>\n</html>\n"}, {"name": "no_layout", "rewards": {"format": 0.5, "validity": 1.0, "structural": 0.6842, "text_block": 0.1006, "position": 0.7436, "color": 0.5886, "clip": 0.6086, "ssim": 0.8014, "total": 0.5222}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/0/no_layout.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Login</title></head>\n<body style=\"font-family:sans-serif; background:#f0f2f5\">\n <div style=\"background:#fff\">\n <h2 style=\"text-align:center; color:#1a1a1a\">Sign In</h2>\n <label style=\"font-size:14px; color:#555\">Email</label>\n <input type=\"email\" placeholder=\"you@example.com\" style=\"border:1px solid #ddd; font-size:14px\">\n <label style=\"font-size:14px; color:#555\">Password</label>\n <input type=\"password\" placeholder=\"\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\" style=\"border:1px solid #ddd; font-size:14px\">\n <button style=\"background:#4f46e5; color:#fff; border:none; font-size:15px; cursor:pointer\">Sign In</button>\n <p style=\"text-align:center; font-size:13px; color:#888\">Don't have an account? <a href=\"#\" style=\"color:#4f46e5\">Sign up</a></p>\n </div>\n</body>\n</html>\n"}, {"name": "half_styled", "rewards": {"format": 0.5, "validity": 1.0, "structural": 0.8421, "text_block": 0.0, "position": 0.7567, "color": 0.5851, "clip": 0.4814, "ssim": 0.7467, "total": 0.4663}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/0/half_styled.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Login</title></head>\n<body style=\"margin:0; background:#f0f2f5; align-items:center; min-height:100vh\">\n <div style=\"background:#fff; border-radius:8px; width:320px\">\n <h2 style=\"margin:0 0 24px; color:#1a1a1a\">Sign In</h2>\n <label style=\"display:block; font-size:14px\">Email</label>\n <input type=\"email\" placeholder=\"you@example.com\" style=\"width:100%; padding:10px 12px; border-radius:6px; margin-bottom:16px\">\n <label style=\"display:block; font-size:14px\">Password</label>\n <input type=\"password\" placeholder=\"\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\" style=\"width:100%; padding:10px 12px; border-radius:6px; margin-bottom:24px\">\n <button style=\"width:100%; background:#4f46e5; border:none; font-size:15px\">Sign In</button>\n <p style=\"text-align:center; font-size:13px\">Don't have an account? <a href=\"#\" style=\"color:#4f46e5\">Sign up</a></p>\n </div>\n</body>\n</html>\n"}, {"name": "no_style", "rewards": {"format": 0.5, "validity": 1.0, "structural": 0.5, "text_block": 0.1006, "position": 0.7396, "color": 0.5277, "clip": 0.3392, "ssim": 0.7906, "total": 0.4424}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/0/no_style.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Login</title></head>\n<body>\n <div>\n <h2>Sign In</h2>\n <label>Email</label>\n <input type=\"email\" placeholder=\"you@example.com\">\n <label>Password</label>\n <input type=\"password\" placeholder=\"\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\">\n <button>Sign In</button>\n <p>Don't have an account? <a href=\"#\">Sign up</a></p>\n </div>\n</body>\n</html>\n"}, {"name": "blank", "rewards": {"format": 0.5, "validity": 0.75, "structural": 0.2485, "text_block": 0.0, "position": 0.0, "color": 0.5282, "clip": 0.0, "ssim": 0.8616, "total": 0.0}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/0/blank.png", "html": "<!DOCTYPE html><html><head><title>Page</title></head><body style=\"background:#fff;\"></body></html>"}]}, {"id": 1, "difficulty": "easy", "source": "easy/1", "reference_image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/1/reference.png", "reference_html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Blog Post</title></head>\n<body style=\"margin:0;font-family:Georgia,serif;background:#fff;color:#222;max-width:680px;margin:0 auto;padding:40px 20px;\">\n <p style=\"font-size:13px;color:#888;margin-bottom:8px;\">TECHNOLOGY \u00b7 5 MIN READ</p>\n <h1 style=\"font-size:32px;line-height:1.3;margin:0 0 16px;\">The Rise of AI-Assisted Development</h1>\n <div style=\"display:flex;align-items:center;gap:12px;margin-bottom:32px;\">\n <div style=\"width:40px;height:40px;border-radius:50%;background:#4f46e5;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:bold;\">AJ</div>\n <div>\n <p style=\"margin:0;font-size:14px;font-weight:bold;color:#333;\">Amal Joe</p>\n <p style=\"margin:0;font-size:13px;color:#888;\">April 8, 2026</p>\n </div>\n </div>\n <div style=\"background:#f8f8f8;border-left:4px solid #4f46e5;padding:16px 20px;margin-bottom:28px;border-radius:0 6px 6px 0;\">\n <p style=\"margin:0;font-style:italic;color:#555;\">\"AI is not replacing developers \u2014 it's giving them superpowers.\"</p>\n </div>\n <p style=\"line-height:1.8;margin-bottom:20px;\">Modern development has shifted dramatically with the introduction of large language models capable of understanding and generating code. Teams that once spent days on boilerplate now ship features in hours.</p>\n <p style=\"line-height:1.8;\">The key insight is that AI excels at pattern completion, while humans excel at problem definition. Together, the combination is unbeatable.</p>\n</body>\n</html>\n", "variants": [{"name": "perfect", "rewards": {"format": 0.5, "validity": 1.0, "structural": 1.0, "text_block": 1.0, "position": 1.0, "color": 1.0, "clip": 1.0, "ssim": 1.0, "total": 0.9773}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/1/perfect.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Blog Post</title></head>\n<body style=\"margin:0;font-family:Georgia,serif;background:#fff;color:#222;max-width:680px;margin:0 auto;padding:40px 20px;\">\n <p style=\"font-size:13px;color:#888;margin-bottom:8px;\">TECHNOLOGY \u00b7 5 MIN READ</p>\n <h1 style=\"font-size:32px;line-height:1.3;margin:0 0 16px;\">The Rise of AI-Assisted Development</h1>\n <div style=\"display:flex;align-items:center;gap:12px;margin-bottom:32px;\">\n <div style=\"width:40px;height:40px;border-radius:50%;background:#4f46e5;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:bold;\">AJ</div>\n <div>\n <p style=\"margin:0;font-size:14px;font-weight:bold;color:#333;\">Amal Joe</p>\n <p style=\"margin:0;font-size:13px;color:#888;\">April 8, 2026</p>\n </div>\n </div>\n <div style=\"background:#f8f8f8;border-left:4px solid #4f46e5;padding:16px 20px;margin-bottom:28px;border-radius:0 6px 6px 0;\">\n <p style=\"margin:0;font-style:italic;color:#555;\">\"AI is not replacing developers \u2014 it's giving them superpowers.\"</p>\n </div>\n <p style=\"line-height:1.8;margin-bottom:20px;\">Modern development has shifted dramatically with the introduction of large language models capable of understanding and generating code. Teams that once spent days on boilerplate now ship features in hours.</p>\n <p style=\"line-height:1.8;\">The key insight is that AI excels at pattern completion, while humans excel at problem definition. Together, the combination is unbeatable.</p>\n</body>\n</html>\n"}, {"name": "bad_colors", "rewards": {"format": 0.5, "validity": 1.0, "structural": 1.0, "text_block": 1.0, "position": 1.0, "color": 0.7967, "clip": 0.9377, "ssim": 0.8697, "total": 0.9176}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/1/bad_colors.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Blog Post</title></head>\n<body style=\"margin:0;font-family:Georgia,serif;background:#fff;color:#222;max-width:680px;margin:0 auto;padding:40px 20px;\">\n <p style=\"font-size:13px;color:#888;margin-bottom:8px;\">TECHNOLOGY \u00b7 5 MIN READ</p>\n <h1 style=\"font-size:32px;line-height:1.3;margin:0 0 16px;\">The Rise of AI-Assisted Development</h1>\n <div style=\"display:flex;align-items:center;gap:12px;margin-bottom:32px;\">\n <div style=\"width:40px;height:40px;border-radius:50%;background:#b0b91a;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:bold;\">AJ</div>\n <div>\n <p style=\"margin:0;font-size:14px;font-weight:bold;color:#333;\">Amal Joe</p>\n <p style=\"margin:0;font-size:13px;color:#888;\">April 8, 2026</p>\n </div>\n </div>\n <div style=\"background:#070707;border-left:4px solid #b0b91a;padding:16px 20px;margin-bottom:28px;border-radius:0 6px 6px 0;\">\n <p style=\"margin:0;font-style:italic;color:#555;\">\"AI is not replacing developers \u2014 it's giving them superpowers.\"</p>\n </div>\n <p style=\"line-height:1.8;margin-bottom:20px;\">Modern development has shifted dramatically with the introduction of large language models capable of understanding and generating code. Teams that once spent days on boilerplate now ship features in hours.</p>\n <p style=\"line-height:1.8;\">The key insight is that AI excels at pattern completion, while humans excel at problem definition. Together, the combination is unbeatable.</p>\n</body>\n</html>\n"}, {"name": "minor_diff", "rewards": {"format": 0.5, "validity": 1.0, "structural": 1.0, "text_block": 0.8304, "position": 0.9827, "color": 0.7741, "clip": 0.759, "ssim": 0.7001, "total": 0.8029}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/1/minor_diff.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Blog Post</title></head>\n<body style=\"margin:0;font-family:Georgia,serif;background:#fff;color:#222;max-width:680px;margin:0 auto;padding:40px 20px;\">\n <p style=\"font-size:9px;color:#888;margin-bottom:8px;\">TECHNOLOGY \u00b7 5 MIN READ</p>\n <h1 style=\"font-size:28px;line-height:1.3;margin:0 0 16px;\">The Rise of AI-Assisted Development</h1>\n <div style=\"display:flex;align-items:center;gap:12px;margin-bottom:32px;\">\n <div style=\"width:40px;height:40px;border-radius:50%;background:#888888;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:bold;\">AJ</div>\n <div>\n <p style=\"margin:0;font-size:14px;font-weight:bold;color:#333;\">Amal Joe</p>\n <p style=\"margin:0;font-size:13px;color:#888;\">April 8, 2026</p>\n </div>\n </div>\n <div style=\"background:#f8f8f8;border-left:4px solid #4f46e5;padding:16px 20px;margin-bottom:28px;border-radius:0 6px 6px 0;\">\n <p style=\"margin:0;font-style:italic;color:#555;\">\"AI is not replacing developers \u2014 it's giving them superpowers.\"</p>\n </div>\n <p style=\"line-height:1.8;margin-bottom:20px;\">Modern development has shifted dramatically with the introduction of large language models capable of understanding and generating code. Teams that once spent days on boilerplate now ship features in hours.</p>\n <p style=\"line-height:1.8;\">The key insight is that AI excels at pattern completion, while humans excel at problem definition. Together, the combination is unbeatable.</p>\n</body>\n</html>\n"}, {"name": "half_styled", "rewards": {"format": 0.5, "validity": 1.0, "structural": 0.8684, "text_block": 0.7662, "position": 0.9719, "color": 0.7395, "clip": 0.72, "ssim": 0.5761, "total": 0.748}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/1/half_styled.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Blog Post</title></head>\n<body style=\"margin:0; background:#fff; max-width:680px; padding:40px 20px\">\n <p style=\"font-size:13px; margin-bottom:8px\">TECHNOLOGY \u00b7 5 MIN READ</p>\n <h1 style=\"font-size:32px; margin:0 0 16px\">The Rise of AI-Assisted Development</h1>\n <div style=\"display:flex; gap:12px\">\n <div style=\"width:40px; border-radius:50%; display:flex; justify-content:center; font-weight:bold\">AJ</div>\n <div>\n <p style=\"margin:0; font-weight:bold\">Amal Joe</p>\n <p style=\"margin:0; color:#888\">April 8, 2026</p>\n </div>\n </div>\n <div style=\"background:#f8f8f8; padding:16px 20px; border-radius:0 6px 6px 0\">\n <p style=\"margin:0; color:#555\">\"AI is not replacing developers \u2014 it's giving them superpowers.\"</p>\n </div>\n <p style=\"line-height:1.8\">Modern development has shifted dramatically with the introduction of large language models capable of understanding and generating code. Teams that once spent days on boilerplate now ship features in hours.</p>\n <p style=\"line-height:1.8\">The key insight is that AI excels at pattern completion, while humans excel at problem definition. Together, the combination is unbeatable.</p>\n</body>\n</html>\n"}, {"name": "no_layout", "rewards": {"format": 0.5, "validity": 1.0, "structural": 0.7632, "text_block": 0.5733, "position": 0.8628, "color": 0.7293, "clip": 0.6499, "ssim": 0.5442, "total": 0.659}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/1/no_layout.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Blog Post</title></head>\n<body style=\"font-family:Georgia,serif; background:#fff; color:#222; max-width:680px\">\n <p style=\"font-size:13px; color:#888\">TECHNOLOGY \u00b7 5 MIN READ</p>\n <h1 style=\"font-size:32px; line-height:1.3\">The Rise of AI-Assisted Development</h1>\n <div style=\"gap:12px\">\n <div style=\"background:#4f46e5; color:#fff; font-weight:bold\">AJ</div>\n <div>\n <p style=\"font-size:14px; font-weight:bold; color:#333\">Amal Joe</p>\n <p style=\"font-size:13px; color:#888\">April 8, 2026</p>\n </div>\n </div>\n <div style=\"background:#f8f8f8; border-left:4px solid #4f46e5\">\n <p style=\"font-style:italic; color:#555\">\"AI is not replacing developers \u2014 it's giving them superpowers.\"</p>\n </div>\n <p style=\"line-height:1.8\">Modern development has shifted dramatically with the introduction of large language models capable of understanding and generating code. Teams that once spent days on boilerplate now ship features in hours.</p>\n <p style=\"line-height:1.8\">The key insight is that AI excels at pattern completion, while humans excel at problem definition. Together, the combination is unbeatable.</p>\n</body>\n</html>\n"}, {"name": "no_style", "rewards": {"format": 0.5, "validity": 1.0, "structural": 0.5, "text_block": 0.4036, "position": 0.8579, "color": 0.6953, "clip": 0.5769, "ssim": 0.542, "total": 0.5788}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/1/no_style.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Blog Post</title></head>\n<body>\n <p>TECHNOLOGY \u00b7 5 MIN READ</p>\n <h1>The Rise of AI-Assisted Development</h1>\n <div>\n <div>AJ</div>\n <div>\n <p>Amal Joe</p>\n <p>April 8, 2026</p>\n </div>\n </div>\n <div>\n <p>\"AI is not replacing developers \u2014 it's giving them superpowers.\"</p>\n </div>\n <p>Modern development has shifted dramatically with the introduction of large language models capable of understanding and generating code. Teams that once spent days on boilerplate now ship features in hours.</p>\n <p>The key insight is that AI excels at pattern completion, while humans excel at problem definition. Together, the combination is unbeatable.</p>\n</body>\n</html>\n"}, {"name": "blank", "rewards": {"format": 0.5, "validity": 0.75, "structural": 0.2263, "text_block": 0.0, "position": 0.0, "color": 0.6826, "clip": 0.0, "ssim": 0.7133, "total": 0.0}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/1/blank.png", "html": "<!DOCTYPE html><html><head><title>Page</title></head><body style=\"background:#fff;\"></body></html>"}]}, {"id": 2, "difficulty": "easy", "source": "easy/2", "reference_image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/2/reference.png", "reference_html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Contact</title></head>\n<body style=\"margin:0;font-family:sans-serif;background:#fff;color:#222;max-width:560px;margin:0 auto;padding:60px 20px;\">\n <h1 style=\"font-size:28px;margin:0 0 8px;\">Get in Touch</h1>\n <p style=\"color:#666;margin:0 0 32px;\">We'll get back to you within 24 hours.</p>\n <div style=\"display:flex;gap:16px;margin-bottom:20px;\">\n <div style=\"flex:1;\">\n <label style=\"display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:#444;\">First Name</label>\n <input style=\"width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid #e0e0e0;border-radius:6px;font-size:14px;\">\n </div>\n <div style=\"flex:1;\">\n <label style=\"display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:#444;\">Last Name</label>\n <input style=\"width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid #e0e0e0;border-radius:6px;font-size:14px;\">\n </div>\n </div>\n <label style=\"display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:#444;\">Email</label>\n <input type=\"email\" style=\"width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid #e0e0e0;border-radius:6px;font-size:14px;margin-bottom:20px;\">\n <label style=\"display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:#444;\">Message</label>\n <textarea rows=\"5\" style=\"width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid #e0e0e0;border-radius:6px;font-size:14px;resize:vertical;margin-bottom:24px;\"></textarea>\n <button style=\"padding:12px 28px;background:#111;color:#fff;border:none;border-radius:6px;font-size:15px;cursor:pointer;\">Send Message</button>\n</body>\n</html>\n", "variants": [{"name": "perfect", "rewards": {"format": 0.5, "validity": 1.0, "structural": 1.0, "text_block": 1.0, "position": 1.0, "color": 1.0, "clip": 1.0, "ssim": 1.0, "total": 0.9773}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/2/perfect.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Contact</title></head>\n<body style=\"margin:0;font-family:sans-serif;background:#fff;color:#222;max-width:560px;margin:0 auto;padding:60px 20px;\">\n <h1 style=\"font-size:28px;margin:0 0 8px;\">Get in Touch</h1>\n <p style=\"color:#666;margin:0 0 32px;\">We'll get back to you within 24 hours.</p>\n <div style=\"display:flex;gap:16px;margin-bottom:20px;\">\n <div style=\"flex:1;\">\n <label style=\"display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:#444;\">First Name</label>\n <input style=\"width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid #e0e0e0;border-radius:6px;font-size:14px;\">\n </div>\n <div style=\"flex:1;\">\n <label style=\"display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:#444;\">Last Name</label>\n <input style=\"width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid #e0e0e0;border-radius:6px;font-size:14px;\">\n </div>\n </div>\n <label style=\"display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:#444;\">Email</label>\n <input type=\"email\" style=\"width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid #e0e0e0;border-radius:6px;font-size:14px;margin-bottom:20px;\">\n <label style=\"display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:#444;\">Message</label>\n <textarea rows=\"5\" style=\"width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid #e0e0e0;border-radius:6px;font-size:14px;resize:vertical;margin-bottom:24px;\"></textarea>\n <button style=\"padding:12px 28px;background:#111;color:#fff;border:none;border-radius:6px;font-size:15px;cursor:pointer;\">Send Message</button>\n</body>\n</html>\n"}, {"name": "bad_colors", "rewards": {"format": 0.5, "validity": 1.0, "structural": 1.0, "text_block": 1.0, "position": 1.0, "color": 0.9995, "clip": 0.8688, "ssim": 0.8771, "total": 0.9306}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/2/bad_colors.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Contact</title></head>\n<body style=\"margin:0;font-family:sans-serif;background:#fff;color:#222;max-width:560px;margin:0 auto;padding:60px 20px;\">\n <h1 style=\"font-size:28px;margin:0 0 8px;\">Get in Touch</h1>\n <p style=\"color:#666;margin:0 0 32px;\">We'll get back to you within 24 hours.</p>\n <div style=\"display:flex;gap:16px;margin-bottom:20px;\">\n <div style=\"flex:1;\">\n <label style=\"display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:#444;\">First Name</label>\n <input style=\"width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid #1f1f1f;border-radius:6px;font-size:14px;\">\n </div>\n <div style=\"flex:1;\">\n <label style=\"display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:#444;\">Last Name</label>\n <input style=\"width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid #1f1f1f;border-radius:6px;font-size:14px;\">\n </div>\n </div>\n <label style=\"display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:#444;\">Email</label>\n <input type=\"email\" style=\"width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid #1f1f1f;border-radius:6px;font-size:14px;margin-bottom:20px;\">\n <label style=\"display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:#444;\">Message</label>\n <textarea rows=\"5\" style=\"width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid #1f1f1f;border-radius:6px;font-size:14px;resize:vertical;margin-bottom:24px;\"></textarea>\n <button style=\"padding:12px 28px;background:#111;color:#fff;border:none;border-radius:6px;font-size:15px;cursor:pointer;\">Send Message</button>\n</body>\n</html>\n"}, {"name": "minor_diff", "rewards": {"format": 0.5, "validity": 1.0, "structural": 1.0, "text_block": 1.0, "position": 0.9949, "color": 0.8791, "clip": 0.9147, "ssim": 0.9066, "total": 0.9282}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/2/minor_diff.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Contact</title></head>\n<body style=\"margin:0;font-family:sans-serif;background:#fff;color:#222;max-width:560px;margin:0 auto;padding:60px 20px;\">\n <h1 style=\"font-size:24px;margin:0 0 8px;\">Get in Touch</h1>\n <p style=\"color:#666;margin:0 0 32px;\">We'll get back to you within 24 hours.</p>\n <div style=\"display:flex;gap:16px;margin-bottom:20px;\">\n <div style=\"flex:1;\">\n <label style=\"display:block;font-size:9px;font-weight:600;margin-bottom:6px;color:#444;\">First Name</label>\n <input style=\"width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid #e0e0e0;border-radius:6px;font-size:14px;\">\n </div>\n <div style=\"flex:1;\">\n <label style=\"display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:#444;\">Last Name</label>\n <input style=\"width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid #e0e0e0;border-radius:6px;font-size:14px;\">\n </div>\n </div>\n <label style=\"display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:#444;\">Email</label>\n <input type=\"email\" style=\"width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid #e0e0e0;border-radius:6px;font-size:14px;margin-bottom:20px;\">\n <label style=\"display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:#444;\">Message</label>\n <textarea rows=\"5\" style=\"width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid #e0e0e0;border-radius:6px;font-size:14px;resize:vertical;margin-bottom:24px;\"></textarea>\n <button style=\"padding:12px 28px;background:#111;color:#fff;border:none;border-radius:6px;font-size:15px;cursor:pointer;\">Send Message</button>\n</body>\n</html>\n"}, {"name": "half_styled", "rewards": {"format": 0.5, "validity": 1.0, "structural": 0.8889, "text_block": 0.8571, "position": 0.9657, "color": 0.2187, "clip": 0.4552, "ssim": 0.6706, "total": 0.6549}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/2/half_styled.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Contact</title></head>\n<body style=\"margin:0; background:#fff; max-width:560px; padding:60px 20px\">\n <h1 style=\"font-size:28px\">Get in Touch</h1>\n <p style=\"color:#666\">We'll get back to you within 24 hours.</p>\n <div style=\"display:flex; margin-bottom:20px\">\n <div style=\"flex:1\">\n <label style=\"display:block; font-weight:600; color:#444\">First Name</label>\n <input style=\"width:100%; padding:10px 12px; border-radius:6px\">\n </div>\n <div style=\"flex:1\">\n <label style=\"display:block; font-weight:600; color:#444\">Last Name</label>\n <input style=\"width:100%; padding:10px 12px; border-radius:6px\">\n </div>\n </div>\n <label style=\"display:block; font-weight:600; color:#444\">Email</label>\n <input type=\"email\" style=\"width:100%; padding:10px 12px; border-radius:6px; margin-bottom:20px\">\n <label style=\"display:block; font-weight:600; color:#444\">Message</label>\n <textarea rows=\"5\" style=\"width:100%; padding:10px 12px; border-radius:6px; resize:vertical\"></textarea>\n <button style=\"padding:12px 28px; color:#fff; border-radius:6px; cursor:pointer\">Send Message</button>\n</body>\n</html>\n"}, {"name": "no_layout", "rewards": {"format": 0.5, "validity": 1.0, "structural": 0.7778, "text_block": 0.2545, "position": 0.7757, "color": 0.1598, "clip": 0.716, "ssim": 0.8107, "total": 0.5385}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/2/no_layout.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Contact</title></head>\n<body style=\"font-family:sans-serif; background:#fff; color:#222; max-width:560px\">\n <h1 style=\"font-size:28px\">Get in Touch</h1>\n <p style=\"color:#666\">We'll get back to you within 24 hours.</p>\n <div style=\"gap:16px\">\n <div style=\"\">\n <label style=\"font-size:13px; font-weight:600; color:#444\">First Name</label>\n <input style=\"border:1px solid #e0e0e0; font-size:14px\">\n </div>\n <div style=\"\">\n <label style=\"font-size:13px; font-weight:600; color:#444\">Last Name</label>\n <input style=\"border:1px solid #e0e0e0; font-size:14px\">\n </div>\n </div>\n <label style=\"font-size:13px; font-weight:600; color:#444\">Email</label>\n <input type=\"email\" style=\"border:1px solid #e0e0e0; font-size:14px\">\n <label style=\"font-size:13px; font-weight:600; color:#444\">Message</label>\n <textarea rows=\"5\" style=\"border:1px solid #e0e0e0; font-size:14px; resize:vertical\"></textarea>\n <button style=\"background:#111; color:#fff; border:none; font-size:15px; cursor:pointer\">Send Message</button>\n</body>\n</html>\n"}, {"name": "no_style", "rewards": {"format": 0.5, "validity": 1.0, "structural": 0.5, "text_block": 0.1776, "position": 0.8317, "color": 0.1629, "clip": 0.5025, "ssim": 0.7711, "total": 0.4565}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/2/no_style.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Contact</title></head>\n<body>\n <h1>Get in Touch</h1>\n <p>We'll get back to you within 24 hours.</p>\n <div>\n <div>\n <label>First Name</label>\n <input>\n </div>\n <div>\n <label>Last Name</label>\n <input>\n </div>\n </div>\n <label>Email</label>\n <input type=\"email\">\n <label>Message</label>\n <textarea rows=\"5\"></textarea>\n <button>Send Message</button>\n</body>\n</html>\n"}, {"name": "blank", "rewards": {"format": 0.5, "validity": 0.75, "structural": 0.2017, "text_block": 0.0, "position": 0.0, "color": 0.1545, "clip": 0.0395, "ssim": 0.8767, "total": 0.0}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/2/blank.png", "html": "<!DOCTYPE html><html><head><title>Page</title></head><body style=\"background:#fff;\"></body></html>"}]}, {"id": 3, "difficulty": "easy", "source": "easy/3", "reference_image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/3/reference.png", "reference_html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Product</title></head>\n<body style=\"margin:0;font-family:sans-serif;background:#fff;color:#111;max-width:800px;margin:0 auto;padding:40px 20px;\">\n <div style=\"display:flex;gap:40px;align-items:flex-start;\">\n <div style=\"flex:1;background:#f5f5f5;border-radius:12px;aspect-ratio:1;display:flex;align-items:center;justify-content:center;\">\n <svg width=\"80\" height=\"80\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#999\" stroke-width=\"1.5\"><rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\"/><line x1=\"8\" y1=\"21\" x2=\"16\" y2=\"21\"/><line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"21\"/></svg>\n </div>\n <div style=\"flex:1;\">\n <p style=\"margin:0 0 8px;font-size:13px;color:#999;letter-spacing:.05em;\">ELECTRONICS</p>\n <h1 style=\"font-size:26px;margin:0 0 12px;\">UltraView Monitor 27\"</h1>\n <div style=\"display:flex;align-items:center;gap:8px;margin-bottom:16px;\">\n <span style=\"color:#f59e0b;font-size:16px;\">\u2605\u2605\u2605\u2605\u2606</span>\n <span style=\"font-size:13px;color:#888;\">4.2 (318 reviews)</span>\n </div>\n <p style=\"font-size:28px;font-weight:700;margin:0 0 20px;\">$349<span style=\"font-size:16px;color:#888;font-weight:400;text-decoration:line-through;margin-left:10px;\">$429</span></p>\n <p style=\"line-height:1.7;color:#555;font-size:14px;margin-bottom:24px;\">4K IPS display with 144Hz refresh rate, HDR400 support, and USB-C connectivity. Perfect for professionals and gamers alike.</p>\n <button style=\"width:100%;padding:14px;background:#4f46e5;color:#fff;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;margin-bottom:12px;\">Add to Cart</button>\n <button style=\"width:100%;padding:14px;background:#fff;color:#111;border:1px solid #ddd;border-radius:8px;font-size:15px;cursor:pointer;\">Save for Later</button>\n </div>\n </div>\n</body>\n</html>\n", "variants": [{"name": "perfect", "rewards": {"format": 0.5, "validity": 1.0, "structural": 1.0, "text_block": 1.0, "position": 1.0, "color": 1.0, "clip": 1.0, "ssim": 1.0, "total": 0.9773}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/3/perfect.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Product</title></head>\n<body style=\"margin:0;font-family:sans-serif;background:#fff;color:#111;max-width:800px;margin:0 auto;padding:40px 20px;\">\n <div style=\"display:flex;gap:40px;align-items:flex-start;\">\n <div style=\"flex:1;background:#f5f5f5;border-radius:12px;aspect-ratio:1;display:flex;align-items:center;justify-content:center;\">\n <svg width=\"80\" height=\"80\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#999\" stroke-width=\"1.5\"><rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\"/><line x1=\"8\" y1=\"21\" x2=\"16\" y2=\"21\"/><line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"21\"/></svg>\n </div>\n <div style=\"flex:1;\">\n <p style=\"margin:0 0 8px;font-size:13px;color:#999;letter-spacing:.05em;\">ELECTRONICS</p>\n <h1 style=\"font-size:26px;margin:0 0 12px;\">UltraView Monitor 27\"</h1>\n <div style=\"display:flex;align-items:center;gap:8px;margin-bottom:16px;\">\n <span style=\"color:#f59e0b;font-size:16px;\">\u2605\u2605\u2605\u2605\u2606</span>\n <span style=\"font-size:13px;color:#888;\">4.2 (318 reviews)</span>\n </div>\n <p style=\"font-size:28px;font-weight:700;margin:0 0 20px;\">$349<span style=\"font-size:16px;color:#888;font-weight:400;text-decoration:line-through;margin-left:10px;\">$429</span></p>\n <p style=\"line-height:1.7;color:#555;font-size:14px;margin-bottom:24px;\">4K IPS display with 144Hz refresh rate, HDR400 support, and USB-C connectivity. Perfect for professionals and gamers alike.</p>\n <button style=\"width:100%;padding:14px;background:#4f46e5;color:#fff;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;margin-bottom:12px;\">Add to Cart</button>\n <button style=\"width:100%;padding:14px;background:#fff;color:#111;border:1px solid #ddd;border-radius:8px;font-size:15px;cursor:pointer;\">Save for Later</button>\n </div>\n </div>\n</body>\n</html>\n"}, {"name": "minor_diff", "rewards": {"format": 0.5, "validity": 1.0, "structural": 1.0, "text_block": 1.0, "position": 0.9889, "color": 0.697, "clip": 0.6797, "ssim": 0.6828, "total": 0.8189}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/3/minor_diff.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Product</title></head>\n<body style=\"margin:0;font-family:sans-serif;background:#fff;color:#111;max-width:800px;margin:0 auto;padding:40px 20px;\">\n <div style=\"display:flex;gap:40px;align-items:flex-start;\">\n <div style=\"flex:1;background:#888888;border-radius:12px;aspect-ratio:1;display:flex;align-items:center;justify-content:center;\">\n <svg width=\"80\" height=\"80\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#999\" stroke-width=\"1.5\"><rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\"/><line x1=\"8\" y1=\"21\" x2=\"16\" y2=\"21\"/><line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"21\"/></svg>\n </div>\n <div style=\"flex:1;\">\n <p style=\"margin:0 0 8px;font-size:9px;color:#999;letter-spacing:.05em;\">ELECTRONICS</p>\n <h1 style=\"font-size:22px;margin:0 0 12px;\">UltraView Monitor 27\"</h1>\n <div style=\"display:flex;align-items:center;gap:8px;margin-bottom:16px;\">\n <span style=\"color:#f59e0b;font-size:16px;\">\u2605\u2605\u2605\u2605\u2606</span>\n <span style=\"font-size:13px;color:#888;\">4.2 (318 reviews)</span>\n </div>\n <p style=\"font-size:28px;font-weight:700;margin:0 0 20px;\">$349<span style=\"font-size:16px;color:#888;font-weight:400;text-decoration:line-through;margin-left:10px;\">$429</span></p>\n <p style=\"line-height:1.7;color:#555;font-size:14px;margin-bottom:24px;\">4K IPS display with 144Hz refresh rate, HDR400 support, and USB-C connectivity. Perfect for professionals and gamers alike.</p>\n <button style=\"width:100%;padding:14px;background:#4f46e5;color:#fff;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;margin-bottom:12px;\">Add to Cart</button>\n <button style=\"width:100%;padding:14px;background:#fff;color:#111;border:1px solid #ddd;border-radius:8px;font-size:15px;cursor:pointer;\">Save for Later</button>\n </div>\n </div>\n</body>\n</html>\n"}, {"name": "bad_colors", "rewards": {"format": 0.5, "validity": 1.0, "structural": 1.0, "text_block": 1.0, "position": 1.0, "color": 0.3173, "clip": 0.8548, "ssim": 0.6931, "total": 0.8093}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/3/bad_colors.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Product</title></head>\n<body style=\"margin:0;font-family:sans-serif;background:#fff;color:#111;max-width:800px;margin:0 auto;padding:40px 20px;\">\n <div style=\"display:flex;gap:40px;align-items:flex-start;\">\n <div style=\"flex:1;background:#0a0a0a;border-radius:12px;aspect-ratio:1;display:flex;align-items:center;justify-content:center;\">\n <svg width=\"80\" height=\"80\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#999\" stroke-width=\"1.5\"><rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\"/><line x1=\"8\" y1=\"21\" x2=\"16\" y2=\"21\"/><line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"21\"/></svg>\n </div>\n <div style=\"flex:1;\">\n <p style=\"margin:0 0 8px;font-size:13px;color:#999;letter-spacing:.05em;\">ELECTRONICS</p>\n <h1 style=\"font-size:26px;margin:0 0 12px;\">UltraView Monitor 27\"</h1>\n <div style=\"display:flex;align-items:center;gap:8px;margin-bottom:16px;\">\n <span style=\"color:#0a61f4;font-size:16px;\">\u2605\u2605\u2605\u2605\u2606</span>\n <span style=\"font-size:13px;color:#888;\">4.2 (318 reviews)</span>\n </div>\n <p style=\"font-size:28px;font-weight:700;margin:0 0 20px;\">$349<span style=\"font-size:16px;color:#888;font-weight:400;text-decoration:line-through;margin-left:10px;\">$429</span></p>\n <p style=\"line-height:1.7;color:#555;font-size:14px;margin-bottom:24px;\">4K IPS display with 144Hz refresh rate, HDR400 support, and USB-C connectivity. Perfect for professionals and gamers alike.</p>\n <button style=\"width:100%;padding:14px;background:#b0b91a;color:#fff;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;margin-bottom:12px;\">Add to Cart</button>\n <button style=\"width:100%;padding:14px;background:#fff;color:#111;border:1px solid #ddd;border-radius:8px;font-size:15px;cursor:pointer;\">Save for Later</button>\n </div>\n </div>\n</body>\n</html>\n"}, {"name": "half_styled", "rewards": {"format": 0.5, "validity": 1.0, "structural": 0.8913, "text_block": 0.6244, "position": 0.9702, "color": 0.5134, "clip": 0.6003, "ssim": 0.7641, "total": 0.6778}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/3/half_styled.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Product</title></head>\n<body style=\"margin:0; background:#fff; max-width:800px; padding:40px 20px\">\n <div style=\"display:flex; align-items:flex-start\">\n <div style=\"flex:1; border-radius:12px; display:flex; justify-content:center\">\n <svg width=\"80\" height=\"80\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#999\" stroke-width=\"1.5\"><rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\"/><line x1=\"8\" y1=\"21\" x2=\"16\" y2=\"21\"/><line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"21\"/></svg>\n </div>\n <div style=\"flex:1\">\n <p style=\"margin:0 0 8px; color:#999\">ELECTRONICS</p>\n <h1 style=\"font-size:26px\">UltraView Monitor 27\"</h1>\n <div style=\"display:flex; gap:8px\">\n <span style=\"color:#f59e0b\">\u2605\u2605\u2605\u2605\u2606</span>\n <span style=\"font-size:13px\">4.2 (318 reviews)</span>\n </div>\n <p style=\"font-size:28px; margin:0 0 20px\">$349<span style=\"font-size:16px; font-weight:400; margin-left:10px\">$429</span></p>\n <p style=\"line-height:1.7; font-size:14px\">4K IPS display with 144Hz refresh rate, HDR400 support, and USB-C connectivity. Perfect for professionals and gamers alike.</p>\n <button style=\"width:100%; background:#4f46e5; border:none; font-size:15px; cursor:pointer\">Add to Cart</button>\n <button style=\"width:100%; background:#fff; border:1px solid #ddd; font-size:15px\">Save for Later</button>\n </div>\n </div>\n</body>\n</html>\n"}, {"name": "no_style", "rewards": {"format": 0.5, "validity": 1.0, "structural": 0.5, "text_block": 0.1177, "position": 0.6452, "color": 0.4181, "clip": 0.0748, "ssim": 0.6683, "total": 0.3468}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/3/no_style.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Product</title></head>\n<body>\n <div>\n <div>\n <svg width=\"80\" height=\"80\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#999\" stroke-width=\"1.5\"><rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\"/><line x1=\"8\" y1=\"21\" x2=\"16\" y2=\"21\"/><line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"21\"/></svg>\n </div>\n <div>\n <p>ELECTRONICS</p>\n <h1>UltraView Monitor 27\"</h1>\n <div>\n <span>\u2605\u2605\u2605\u2605\u2606</span>\n <span>4.2 (318 reviews)</span>\n </div>\n <p>$349<span>$429</span></p>\n <p>4K IPS display with 144Hz refresh rate, HDR400 support, and USB-C connectivity. Perfect for professionals and gamers alike.</p>\n <button>Add to Cart</button>\n <button>Save for Later</button>\n </div>\n </div>\n</body>\n</html>\n"}, {"name": "no_layout", "rewards": {"format": 0.5, "validity": 1.0, "structural": 0.7826, "text_block": 0.0, "position": 0.1669, "color": 0.4483, "clip": 0.0, "ssim": 0.7076, "total": 0.2766}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/3/no_layout.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Product</title></head>\n<body style=\"font-family:sans-serif; background:#fff; color:#111; max-width:800px\">\n <div style=\"gap:40px\">\n <div style=\"background:#f5f5f5; aspect-ratio:1\">\n <svg width=\"80\" height=\"80\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#999\" stroke-width=\"1.5\"><rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\"/><line x1=\"8\" y1=\"21\" x2=\"16\" y2=\"21\"/><line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"21\"/></svg>\n </div>\n <div style=\"\">\n <p style=\"font-size:13px; color:#999; letter-spacing:.05em\">ELECTRONICS</p>\n <h1 style=\"font-size:26px\">UltraView Monitor 27\"</h1>\n <div style=\"gap:8px\">\n <span style=\"color:#f59e0b; font-size:16px\">\u2605\u2605\u2605\u2605\u2606</span>\n <span style=\"font-size:13px; color:#888\">4.2 (318 reviews)</span>\n </div>\n <p style=\"font-size:28px; font-weight:700\">$349<span style=\"font-size:16px; color:#888; font-weight:400; text-decoration:line-through\">$429</span></p>\n <p style=\"line-height:1.7; color:#555; font-size:14px\">4K IPS display with 144Hz refresh rate, HDR400 support, and USB-C connectivity. Perfect for professionals and gamers alike.</p>\n <button style=\"background:#4f46e5; color:#fff; border:none; font-size:15px; font-weight:600; cursor:pointer\">Add to Cart</button>\n <button style=\"background:#fff; color:#111; border:1px solid #ddd; font-size:15px; cursor:pointer\">Save for Later</button>\n </div>\n </div>\n</body>\n</html>\n"}, {"name": "blank", "rewards": {"format": 0.5, "validity": 0.75, "structural": 0.1756, "text_block": 0.0, "position": 0.0, "color": 0.416, "clip": 0.0, "ssim": 0.8098, "total": 0.0}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/3/blank.png", "html": "<!DOCTYPE html><html><head><title>Page</title></head><body style=\"background:#fff;\"></body></html>"}]}, {"id": 4, "difficulty": "easy", "source": "easy/4", "reference_image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/4/reference.png", "reference_html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>About</title></head>\n<body style=\"margin:0;font-family:sans-serif;background:#fff;color:#222;\">\n <div style=\"background:#0f172a;color:#fff;padding:60px 40px;text-align:center;\">\n <div style=\"width:80px;height:80px;border-radius:50%;background:#4f46e5;margin:0 auto 20px;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700;\">N</div>\n <h1 style=\"font-size:28px;margin:0 0 10px;\">Nova Technologies</h1>\n <p style=\"color:#94a3b8;max-width:500px;margin:0 auto;\">Building the next generation of developer tools since 2020.</p>\n </div>\n <div style=\"max-width:700px;margin:0 auto;padding:60px 20px;\">\n <h2 style=\"font-size:22px;margin:0 0 16px;\">Our Mission</h2>\n <p style=\"line-height:1.8;color:#555;margin-bottom:40px;\">We believe every developer deserves tools that amplify their creativity, not constrain it. Our products are built with a deep empathy for the craft of software engineering.</p>\n <div style=\"display:grid;grid-template-columns:repeat(3,1fr);gap:24px;\">\n <div style=\"text-align:center;padding:24px;background:#f8fafc;border-radius:10px;\">\n <p style=\"font-size:28px;font-weight:700;color:#4f46e5;margin:0 0 6px;\">50K+</p>\n <p style=\"font-size:13px;color:#888;margin:0;\">Developers</p>\n </div>\n <div style=\"text-align:center;padding:24px;background:#f8fafc;border-radius:10px;\">\n <p style=\"font-size:28px;font-weight:700;color:#4f46e5;margin:0 0 6px;\">120+</p>\n <p style=\"font-size:13px;color:#888;margin:0;\">Countries</p>\n </div>\n <div style=\"text-align:center;padding:24px;background:#f8fafc;border-radius:10px;\">\n <p style=\"font-size:28px;font-weight:700;color:#4f46e5;margin:0 0 6px;\">99.9%</p>\n <p style=\"font-size:13px;color:#888;margin:0;\">Uptime</p>\n </div>\n </div>\n </div>\n</body>\n</html>\n", "variants": [{"name": "perfect", "rewards": {"format": 0.5, "validity": 1.0, "structural": 1.0, "text_block": 1.0, "position": 1.0, "color": 1.0, "clip": 1.0, "ssim": 1.0, "total": 0.9773}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/4/perfect.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>About</title></head>\n<body style=\"margin:0;font-family:sans-serif;background:#fff;color:#222;\">\n <div style=\"background:#0f172a;color:#fff;padding:60px 40px;text-align:center;\">\n <div style=\"width:80px;height:80px;border-radius:50%;background:#4f46e5;margin:0 auto 20px;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700;\">N</div>\n <h1 style=\"font-size:28px;margin:0 0 10px;\">Nova Technologies</h1>\n <p style=\"color:#94a3b8;max-width:500px;margin:0 auto;\">Building the next generation of developer tools since 2020.</p>\n </div>\n <div style=\"max-width:700px;margin:0 auto;padding:60px 20px;\">\n <h2 style=\"font-size:22px;margin:0 0 16px;\">Our Mission</h2>\n <p style=\"line-height:1.8;color:#555;margin-bottom:40px;\">We believe every developer deserves tools that amplify their creativity, not constrain it. Our products are built with a deep empathy for the craft of software engineering.</p>\n <div style=\"display:grid;grid-template-columns:repeat(3,1fr);gap:24px;\">\n <div style=\"text-align:center;padding:24px;background:#f8fafc;border-radius:10px;\">\n <p style=\"font-size:28px;font-weight:700;color:#4f46e5;margin:0 0 6px;\">50K+</p>\n <p style=\"font-size:13px;color:#888;margin:0;\">Developers</p>\n </div>\n <div style=\"text-align:center;padding:24px;background:#f8fafc;border-radius:10px;\">\n <p style=\"font-size:28px;font-weight:700;color:#4f46e5;margin:0 0 6px;\">120+</p>\n <p style=\"font-size:13px;color:#888;margin:0;\">Countries</p>\n </div>\n <div style=\"text-align:center;padding:24px;background:#f8fafc;border-radius:10px;\">\n <p style=\"font-size:28px;font-weight:700;color:#4f46e5;margin:0 0 6px;\">99.9%</p>\n <p style=\"font-size:13px;color:#888;margin:0;\">Uptime</p>\n </div>\n </div>\n </div>\n</body>\n</html>\n"}, {"name": "minor_diff", "rewards": {"format": 0.5, "validity": 1.0, "structural": 1.0, "text_block": 1.0, "position": 0.9957, "color": 0.2958, "clip": 0.6888, "ssim": 0.6872, "total": 0.7675}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/4/minor_diff.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>About</title></head>\n<body style=\"margin:0;font-family:sans-serif;background:#fff;color:#222;\">\n <div style=\"background:#888888;color:#fff;padding:60px 40px;text-align:center;\">\n <div style=\"width:80px;height:80px;border-radius:50%;background:#4f46e5;margin:0 auto 20px;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;\">N</div>\n <h1 style=\"font-size:24px;margin:0 0 10px;\">Nova Technologies</h1>\n <p style=\"color:#94a3b8;max-width:500px;margin:0 auto;\">Building the next generation of developer tools since 2020.</p>\n </div>\n <div style=\"max-width:700px;margin:0 auto;padding:60px 20px;\">\n <h2 style=\"font-size:22px;margin:0 0 16px;\">Our Mission</h2>\n <p style=\"line-height:1.8;color:#555;margin-bottom:40px;\">We believe every developer deserves tools that amplify their creativity, not constrain it. Our products are built with a deep empathy for the craft of software engineering.</p>\n <div style=\"display:grid;grid-template-columns:repeat(3,1fr);gap:24px;\">\n <div style=\"text-align:center;padding:24px;background:#f8fafc;border-radius:10px;\">\n <p style=\"font-size:28px;font-weight:700;color:#4f46e5;margin:0 0 6px;\">50K+</p>\n <p style=\"font-size:13px;color:#888;margin:0;\">Developers</p>\n </div>\n <div style=\"text-align:center;padding:24px;background:#f8fafc;border-radius:10px;\">\n <p style=\"font-size:28px;font-weight:700;color:#4f46e5;margin:0 0 6px;\">120+</p>\n <p style=\"font-size:13px;color:#888;margin:0;\">Countries</p>\n </div>\n <div style=\"text-align:center;padding:24px;background:#f8fafc;border-radius:10px;\">\n <p style=\"font-size:28px;font-weight:700;color:#4f46e5;margin:0 0 6px;\">99.9%</p>\n <p style=\"font-size:13px;color:#888;margin:0;\">Uptime</p>\n </div>\n </div>\n </div>\n</body>\n</html>\n"}, {"name": "bad_colors", "rewards": {"format": 0.5, "validity": 1.0, "structural": 1.0, "text_block": 1.0, "position": 1.0, "color": 0.0, "clip": 0.3744, "ssim": 0.4473, "total": 0.6234}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/4/bad_colors.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>About</title></head>\n<body style=\"margin:0;font-family:sans-serif;background:#fff;color:#222;\">\n <div style=\"background:#f0e8d5;color:#fff;padding:60px 40px;text-align:center;\">\n <div style=\"width:80px;height:80px;border-radius:50%;background:#b0b91a;margin:0 auto 20px;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700;\">N</div>\n <h1 style=\"font-size:28px;margin:0 0 10px;\">Nova Technologies</h1>\n <p style=\"color:#6b5c47;max-width:500px;margin:0 auto;\">Building the next generation of developer tools since 2020.</p>\n </div>\n <div style=\"max-width:700px;margin:0 auto;padding:60px 20px;\">\n <h2 style=\"font-size:22px;margin:0 0 16px;\">Our Mission</h2>\n <p style=\"line-height:1.8;color:#555;margin-bottom:40px;\">We believe every developer deserves tools that amplify their creativity, not constrain it. Our products are built with a deep empathy for the craft of software engineering.</p>\n <div style=\"display:grid;grid-template-columns:repeat(3,1fr);gap:24px;\">\n <div style=\"text-align:center;padding:24px;background:#070503;border-radius:10px;\">\n <p style=\"font-size:28px;font-weight:700;color:#b0b91a;margin:0 0 6px;\">50K+</p>\n <p style=\"font-size:13px;color:#888;margin:0;\">Developers</p>\n </div>\n <div style=\"text-align:center;padding:24px;background:#070503;border-radius:10px;\">\n <p style=\"font-size:28px;font-weight:700;color:#b0b91a;margin:0 0 6px;\">120+</p>\n <p style=\"font-size:13px;color:#888;margin:0;\">Countries</p>\n </div>\n <div style=\"text-align:center;padding:24px;background:#070503;border-radius:10px;\">\n <p style=\"font-size:28px;font-weight:700;color:#b0b91a;margin:0 0 6px;\">99.9%</p>\n <p style=\"font-size:13px;color:#888;margin:0;\">Uptime</p>\n </div>\n </div>\n </div>\n</body>\n</html>\n"}, {"name": "half_styled", "rewards": {"format": 0.5, "validity": 1.0, "structural": 0.8684, "text_block": 0.5084, "position": 0.8513, "color": 0.3885, "clip": 0.2096, "ssim": 0.6167, "total": 0.5084}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/4/half_styled.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>About</title></head>\n<body style=\"margin:0; background:#fff\">\n <div style=\"background:#0f172a; padding:60px 40px\">\n <div style=\"width:80px; border-radius:50%; margin:0 auto 20px; align-items:center; font-size:28px\">N</div>\n <h1 style=\"font-size:28px\">Nova Technologies</h1>\n <p style=\"color:#94a3b8; margin:0 auto\">Building the next generation of developer tools since 2020.</p>\n </div>\n <div style=\"max-width:700px; padding:60px 20px\">\n <h2 style=\"font-size:22px\">Our Mission</h2>\n <p style=\"line-height:1.8; margin-bottom:40px\">We believe every developer deserves tools that amplify their creativity, not constrain it. Our products are built with a deep empathy for the craft of software engineering.</p>\n <div style=\"display:grid; gap:24px\">\n <div style=\"text-align:center; background:#f8fafc\">\n <p style=\"font-size:28px; color:#4f46e5\">50K+</p>\n <p style=\"font-size:13px; margin:0\">Developers</p>\n </div>\n <div style=\"text-align:center; background:#f8fafc\">\n <p style=\"font-size:28px; color:#4f46e5\">120+</p>\n <p style=\"font-size:13px; margin:0\">Countries</p>\n </div>\n <div style=\"text-align:center; background:#f8fafc\">\n <p style=\"font-size:28px; color:#4f46e5\">99.9%</p>\n <p style=\"font-size:13px; margin:0\">Uptime</p>\n </div>\n </div>\n </div>\n</body>\n</html>\n"}, {"name": "no_layout", "rewards": {"format": 0.5, "validity": 1.0, "structural": 0.7368, "text_block": 0.3688, "position": 0.8152, "color": 0.0891, "clip": 0.6492, "ssim": 0.5112, "total": 0.5058}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/4/no_layout.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>About</title></head>\n<body style=\"font-family:sans-serif; background:#fff; color:#222\">\n <div style=\"background:#0f172a; color:#fff; text-align:center\">\n <div style=\"background:#4f46e5; font-size:28px; font-weight:700\">N</div>\n <h1 style=\"font-size:28px\">Nova Technologies</h1>\n <p style=\"color:#94a3b8; max-width:500px\">Building the next generation of developer tools since 2020.</p>\n </div>\n <div style=\"max-width:700px\">\n <h2 style=\"font-size:22px\">Our Mission</h2>\n <p style=\"line-height:1.8; color:#555\">We believe every developer deserves tools that amplify their creativity, not constrain it. Our products are built with a deep empathy for the craft of software engineering.</p>\n <div style=\"gap:24px\">\n <div style=\"text-align:center; background:#f8fafc\">\n <p style=\"font-size:28px; font-weight:700; color:#4f46e5\">50K+</p>\n <p style=\"font-size:13px; color:#888\">Developers</p>\n </div>\n <div style=\"text-align:center; background:#f8fafc\">\n <p style=\"font-size:28px; font-weight:700; color:#4f46e5\">120+</p>\n <p style=\"font-size:13px; color:#888\">Countries</p>\n </div>\n <div style=\"text-align:center; background:#f8fafc\">\n <p style=\"font-size:28px; font-weight:700; color:#4f46e5\">99.9%</p>\n <p style=\"font-size:13px; color:#888\">Uptime</p>\n </div>\n </div>\n </div>\n</body>\n</html>\n"}, {"name": "no_style", "rewards": {"format": 0.5, "validity": 1.0, "structural": 0.5, "text_block": 0.2697, "position": 0.7611, "color": 0.0, "clip": 0.0, "ssim": 0.4448, "total": 0.2943}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/4/no_style.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>About</title></head>\n<body>\n <div>\n <div>N</div>\n <h1>Nova Technologies</h1>\n <p>Building the next generation of developer tools since 2020.</p>\n </div>\n <div>\n <h2>Our Mission</h2>\n <p>We believe every developer deserves tools that amplify their creativity, not constrain it. Our products are built with a deep empathy for the craft of software engineering.</p>\n <div>\n <div>\n <p>50K+</p>\n <p>Developers</p>\n </div>\n <div>\n <p>120+</p>\n <p>Countries</p>\n </div>\n <div>\n <p>99.9%</p>\n <p>Uptime</p>\n </div>\n </div>\n </div>\n</body>\n</html>\n"}, {"name": "blank", "rewards": {"format": 0.5, "validity": 0.75, "structural": 0.1802, "text_block": 0.0, "position": 0.0, "color": 0.0, "clip": 0.0, "ssim": 0.5071, "total": 0.0}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/4/blank.png", "html": "<!DOCTYPE html><html><head><title>Page</title></head><body style=\"background:#fff;\"></body></html>"}]}, {"id": 5, "difficulty": "medium", "source": "medium/0", "reference_image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/5/reference.png", "reference_html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>SaaS Landing</title></head>\n<body style=\"margin:0;font-family:sans-serif;background:#fff;color:#111;\">\n <nav style=\"display:flex;align-items:center;justify-content:space-between;padding:16px 40px;border-bottom:1px solid #f0f0f0;\">\n <span style=\"font-size:20px;font-weight:700;color:#4f46e5;\">Streamline</span>\n <div style=\"display:flex;gap:28px;font-size:14px;color:#555;\">\n <a href=\"#\" style=\"text-decoration:none;color:#555;\">Features</a>\n <a href=\"#\" style=\"text-decoration:none;color:#555;\">Pricing</a>\n <a href=\"#\" style=\"text-decoration:none;color:#555;\">Docs</a>\n </div>\n <button style=\"padding:9px 20px;background:#4f46e5;color:#fff;border:none;border-radius:6px;font-size:14px;cursor:pointer;\">Get Started</button>\n </nav>\n <div style=\"text-align:center;padding:80px 20px 60px;background:linear-gradient(135deg,#f0f0ff 0%,#fff 100%);\">\n <span style=\"background:#ede9fe;color:#4f46e5;font-size:12px;font-weight:600;padding:4px 12px;border-radius:20px;letter-spacing:.05em;\">NOW IN BETA</span>\n <h1 style=\"font-size:48px;font-weight:800;margin:20px 0 16px;line-height:1.2;\">Ship faster,<br>break nothing.</h1>\n <p style=\"font-size:18px;color:#666;max-width:480px;margin:0 auto 32px;line-height:1.6;\">The all-in-one platform for teams that care about quality. CI/CD, monitoring, and deployment in one place.</p>\n <div style=\"display:flex;gap:12px;justify-content:center;\">\n <button style=\"padding:14px 28px;background:#4f46e5;color:#fff;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;\">Start for free</button>\n <button style=\"padding:14px 28px;background:#fff;color:#111;border:1px solid #ddd;border-radius:8px;font-size:15px;cursor:pointer;\">Watch demo \u2192</button>\n </div>\n </div>\n <div style=\"display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:900px;margin:0 auto;padding:60px 20px;\">\n <div style=\"padding:28px;border:1px solid #f0f0f0;border-radius:12px;\">\n <div style=\"width:44px;height:44px;background:#ede9fe;border-radius:10px;margin-bottom:16px;display:flex;align-items:center;justify-content:center;font-size:22px;\">\u26a1</div>\n <h3 style=\"margin:0 0 10px;font-size:17px;\">Fast Deploys</h3>\n <p style=\"margin:0;font-size:14px;color:#666;line-height:1.6;\">Push to production in under 30 seconds with zero downtime.</p>\n </div>\n <div style=\"padding:28px;border:1px solid #f0f0f0;border-radius:12px;\">\n <div style=\"width:44px;height:44px;background:#dcfce7;border-radius:10px;margin-bottom:16px;display:flex;align-items:center;justify-content:center;font-size:22px;\">\ud83d\udd12</div>\n <h3 style=\"margin:0 0 10px;font-size:17px;\">Secure by Default</h3>\n <p style=\"margin:0;font-size:14px;color:#666;line-height:1.6;\">SOC2 compliant. Secrets management and audit logs built in.</p>\n </div>\n <div style=\"padding:28px;border:1px solid #f0f0f0;border-radius:12px;\">\n <div style=\"width:44px;height:44px;background:#fef3c7;border-radius:10px;margin-bottom:16px;display:flex;align-items:center;justify-content:center;font-size:22px;\">\ud83d\udcca</div>\n <h3 style=\"margin:0 0 10px;font-size:17px;\">Live Monitoring</h3>\n <p style=\"margin:0;font-size:14px;color:#666;line-height:1.6;\">Real-time metrics, error tracking, and alerting out of the box.</p>\n </div>\n </div>\n</body>\n</html>\n", "variants": [{"name": "perfect", "rewards": {"format": 0.5, "validity": 1.0, "structural": 1.0, "text_block": 1.0, "position": 1.0, "color": 1.0, "clip": 1.0, "ssim": 1.0, "total": 0.9773}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/5/perfect.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>SaaS Landing</title></head>\n<body style=\"margin:0;font-family:sans-serif;background:#fff;color:#111;\">\n <nav style=\"display:flex;align-items:center;justify-content:space-between;padding:16px 40px;border-bottom:1px solid #f0f0f0;\">\n <span style=\"font-size:20px;font-weight:700;color:#4f46e5;\">Streamline</span>\n <div style=\"display:flex;gap:28px;font-size:14px;color:#555;\">\n <a href=\"#\" style=\"text-decoration:none;color:#555;\">Features</a>\n <a href=\"#\" style=\"text-decoration:none;color:#555;\">Pricing</a>\n <a href=\"#\" style=\"text-decoration:none;color:#555;\">Docs</a>\n </div>\n <button style=\"padding:9px 20px;background:#4f46e5;color:#fff;border:none;border-radius:6px;font-size:14px;cursor:pointer;\">Get Started</button>\n </nav>\n <div style=\"text-align:center;padding:80px 20px 60px;background:linear-gradient(135deg,#f0f0ff 0%,#fff 100%);\">\n <span style=\"background:#ede9fe;color:#4f46e5;font-size:12px;font-weight:600;padding:4px 12px;border-radius:20px;letter-spacing:.05em;\">NOW IN BETA</span>\n <h1 style=\"font-size:48px;font-weight:800;margin:20px 0 16px;line-height:1.2;\">Ship faster,<br>break nothing.</h1>\n <p style=\"font-size:18px;color:#666;max-width:480px;margin:0 auto 32px;line-height:1.6;\">The all-in-one platform for teams that care about quality. CI/CD, monitoring, and deployment in one place.</p>\n <div style=\"display:flex;gap:12px;justify-content:center;\">\n <button style=\"padding:14px 28px;background:#4f46e5;color:#fff;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;\">Start for free</button>\n <button style=\"padding:14px 28px;background:#fff;color:#111;border:1px solid #ddd;border-radius:8px;font-size:15px;cursor:pointer;\">Watch demo \u2192</button>\n </div>\n </div>\n <div style=\"display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:900px;margin:0 auto;padding:60px 20px;\">\n <div style=\"padding:28px;border:1px solid #f0f0f0;border-radius:12px;\">\n <div style=\"width:44px;height:44px;background:#ede9fe;border-radius:10px;margin-bottom:16px;display:flex;align-items:center;justify-content:center;font-size:22px;\">\u26a1</div>\n <h3 style=\"margin:0 0 10px;font-size:17px;\">Fast Deploys</h3>\n <p style=\"margin:0;font-size:14px;color:#666;line-height:1.6;\">Push to production in under 30 seconds with zero downtime.</p>\n </div>\n <div style=\"padding:28px;border:1px solid #f0f0f0;border-radius:12px;\">\n <div style=\"width:44px;height:44px;background:#dcfce7;border-radius:10px;margin-bottom:16px;display:flex;align-items:center;justify-content:center;font-size:22px;\">\ud83d\udd12</div>\n <h3 style=\"margin:0 0 10px;font-size:17px;\">Secure by Default</h3>\n <p style=\"margin:0;font-size:14px;color:#666;line-height:1.6;\">SOC2 compliant. Secrets management and audit logs built in.</p>\n </div>\n <div style=\"padding:28px;border:1px solid #f0f0f0;border-radius:12px;\">\n <div style=\"width:44px;height:44px;background:#fef3c7;border-radius:10px;margin-bottom:16px;display:flex;align-items:center;justify-content:center;font-size:22px;\">\ud83d\udcca</div>\n <h3 style=\"margin:0 0 10px;font-size:17px;\">Live Monitoring</h3>\n <p style=\"margin:0;font-size:14px;color:#666;line-height:1.6;\">Real-time metrics, error tracking, and alerting out of the box.</p>\n </div>\n </div>\n</body>\n</html>\n"}, {"name": "minor_diff", "rewards": {"format": 0.5, "validity": 1.0, "structural": 1.0, "text_block": 1.0, "position": 0.9968, "color": 0.9579, "clip": 1.0, "ssim": 0.9866, "total": 0.9694}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/5/minor_diff.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>SaaS Landing</title></head>\n<body style=\"margin:0;font-family:sans-serif;background:#fff;color:#111;\">\n <nav style=\"display:flex;align-items:center;justify-content:space-between;padding:16px 40px;border-bottom:1px solid #f0f0f0;\">\n <span style=\"font-size:16px;font-weight:700;color:#4f46e5;\">Streamline</span>\n <div style=\"display:flex;gap:28px;font-size:10px;color:#555;\">\n <a href=\"#\" style=\"text-decoration:none;color:#555;\">Features</a>\n <a href=\"#\" style=\"text-decoration:none;color:#555;\">Pricing</a>\n <a href=\"#\" style=\"text-decoration:none;color:#555;\">Docs</a>\n </div>\n <button style=\"padding:9px 20px;background:#888888;color:#fff;border:none;border-radius:6px;font-size:14px;cursor:pointer;\">Get Started</button>\n </nav>\n <div style=\"text-align:center;padding:80px 20px 60px;background:linear-gradient(135deg,#f0f0ff 0%,#fff 100%);\">\n <span style=\"background:#ede9fe;color:#4f46e5;font-size:12px;font-weight:600;padding:4px 12px;border-radius:20px;letter-spacing:.05em;\">NOW IN BETA</span>\n <h1 style=\"font-size:48px;font-weight:800;margin:20px 0 16px;line-height:1.2;\">Ship faster,<br>break nothing.</h1>\n <p style=\"font-size:18px;color:#666;max-width:480px;margin:0 auto 32px;line-height:1.6;\">The all-in-one platform for teams that care about quality. CI/CD, monitoring, and deployment in one place.</p>\n <div style=\"display:flex;gap:12px;justify-content:center;\">\n <button style=\"padding:14px 28px;background:#4f46e5;color:#fff;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;\">Start for free</button>\n <button style=\"padding:14px 28px;background:#fff;color:#111;border:1px solid #ddd;border-radius:8px;font-size:15px;cursor:pointer;\">Watch demo \u2192</button>\n </div>\n </div>\n <div style=\"display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:900px;margin:0 auto;padding:60px 20px;\">\n <div style=\"padding:28px;border:1px solid #f0f0f0;border-radius:12px;\">\n <div style=\"width:44px;height:44px;background:#ede9fe;border-radius:10px;margin-bottom:16px;display:flex;align-items:center;justify-content:center;font-size:22px;\">\u26a1</div>\n <h3 style=\"margin:0 0 10px;font-size:17px;\">Fast Deploys</h3>\n <p style=\"margin:0;font-size:14px;color:#666;line-height:1.6;\">Push to production in under 30 seconds with zero downtime.</p>\n </div>\n <div style=\"padding:28px;border:1px solid #f0f0f0;border-radius:12px;\">\n <div style=\"width:44px;height:44px;background:#dcfce7;border-radius:10px;margin-bottom:16px;display:flex;align-items:center;justify-content:center;font-size:22px;\">\ud83d\udd12</div>\n <h3 style=\"margin:0 0 10px;font-size:17px;\">Secure by Default</h3>\n <p style=\"margin:0;font-size:14px;color:#666;line-height:1.6;\">SOC2 compliant. Secrets management and audit logs built in.</p>\n </div>\n <div style=\"padding:28px;border:1px solid #f0f0f0;border-radius:12px;\">\n <div style=\"width:44px;height:44px;background:#fef3c7;border-radius:10px;margin-bottom:16px;display:flex;align-items:center;justify-content:center;font-size:22px;\">\ud83d\udcca</div>\n <h3 style=\"margin:0 0 10px;font-size:17px;\">Live Monitoring</h3>\n <p style=\"margin:0;font-size:14px;color:#666;line-height:1.6;\">Real-time metrics, error tracking, and alerting out of the box.</p>\n </div>\n </div>\n</body>\n</html>\n"}, {"name": "bad_colors", "rewards": {"format": 0.5, "validity": 1.0, "structural": 1.0, "text_block": 1.0, "position": 1.0, "color": 0.3746, "clip": 0.5022, "ssim": 0.6616, "total": 0.7327}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/5/bad_colors.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>SaaS Landing</title></head>\n<body style=\"margin:0;font-family:sans-serif;background:#fff;color:#111;\">\n <nav style=\"display:flex;align-items:center;justify-content:space-between;padding:16px 40px;border-bottom:1px solid #0f0f0f;\">\n <span style=\"font-size:20px;font-weight:700;color:#b0b91a;\">Streamline</span>\n <div style=\"display:flex;gap:28px;font-size:14px;color:#555;\">\n <a href=\"#\" style=\"text-decoration:none;color:#555;\">Features</a>\n <a href=\"#\" style=\"text-decoration:none;color:#555;\">Pricing</a>\n <a href=\"#\" style=\"text-decoration:none;color:#555;\">Docs</a>\n </div>\n <button style=\"padding:9px 20px;background:#b0b91a;color:#fff;border:none;border-radius:6px;font-size:14px;cursor:pointer;\">Get Started</button>\n </nav>\n <div style=\"text-align:center;padding:80px 20px 60px;background:linear-gradient(135deg,#0f0f00 0%,#fff 100%);\">\n <span style=\"background:#121601;color:#b0b91a;font-size:12px;font-weight:600;padding:4px 12px;border-radius:20px;letter-spacing:.05em;\">NOW IN BETA</span>\n <h1 style=\"font-size:48px;font-weight:800;margin:20px 0 16px;line-height:1.2;\">Ship faster,<br>break nothing.</h1>\n <p style=\"font-size:18px;color:#666;max-width:480px;margin:0 auto 32px;line-height:1.6;\">The all-in-one platform for teams that care about quality. CI/CD, monitoring, and deployment in one place.</p>\n <div style=\"display:flex;gap:12px;justify-content:center;\">\n <button style=\"padding:14px 28px;background:#b0b91a;color:#fff;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;\">Start for free</button>\n <button style=\"padding:14px 28px;background:#fff;color:#111;border:1px solid #ddd;border-radius:8px;font-size:15px;cursor:pointer;\">Watch demo \u2192</button>\n </div>\n </div>\n <div style=\"display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:900px;margin:0 auto;padding:60px 20px;\">\n <div style=\"padding:28px;border:1px solid #0f0f0f;border-radius:12px;\">\n <div style=\"width:44px;height:44px;background:#121601;border-radius:10px;margin-bottom:16px;display:flex;align-items:center;justify-content:center;font-size:22px;\">\u26a1</div>\n <h3 style=\"margin:0 0 10px;font-size:17px;\">Fast Deploys</h3>\n <p style=\"margin:0;font-size:14px;color:#666;line-height:1.6;\">Push to production in under 30 seconds with zero downtime.</p>\n </div>\n <div style=\"padding:28px;border:1px solid #0f0f0f;border-radius:12px;\">\n <div style=\"width:44px;height:44px;background:#230318;border-radius:10px;margin-bottom:16px;display:flex;align-items:center;justify-content:center;font-size:22px;\">\ud83d\udd12</div>\n <h3 style=\"margin:0 0 10px;font-size:17px;\">Secure by Default</h3>\n <p style=\"margin:0;font-size:14px;color:#666;line-height:1.6;\">SOC2 compliant. Secrets management and audit logs built in.</p>\n </div>\n <div style=\"padding:28px;border:1px solid #0f0f0f;border-radius:12px;\">\n <div style=\"width:44px;height:44px;background:#010c38;border-radius:10px;margin-bottom:16px;display:flex;align-items:center;justify-content:center;font-size:22px;\">\ud83d\udcca</div>\n <h3 style=\"margin:0 0 10px;font-size:17px;\">Live Monitoring</h3>\n <p style=\"margin:0;font-size:14px;color:#666;line-height:1.6;\">Real-time metrics, error tracking, and alerting out of the box.</p>\n </div>\n </div>\n</body>\n</html>\n"}, {"name": "half_styled", "rewards": {"format": 0.5, "validity": 1.0, "structural": 0.9167, "text_block": 0.3136, "position": 0.8555, "color": 0.5848, "clip": 0.5481, "ssim": 0.5739, "total": 0.5557}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/5/half_styled.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>SaaS Landing</title></head>\n<body style=\"margin:0; background:#fff\">\n <nav style=\"display:flex; justify-content:space-between; border-bottom:1px solid #f0f0f0\">\n <span style=\"font-size:20px; color:#4f46e5\">Streamline</span>\n <div style=\"display:flex; font-size:14px\">\n <a href=\"#\" style=\"text-decoration:none\">Features</a>\n <a href=\"#\" style=\"text-decoration:none\">Pricing</a>\n <a href=\"#\" style=\"text-decoration:none\">Docs</a>\n </div>\n <button style=\"padding:9px 20px; color:#fff; border-radius:6px; cursor:pointer\">Get Started</button>\n </nav>\n <div style=\"text-align:center; background:linear-gradient(135deg,#f0f0ff 0%,#fff 100%)\">\n <span style=\"background:#ede9fe; font-size:12px; padding:4px 12px; letter-spacing:.05em\">NOW IN BETA</span>\n <h1 style=\"font-size:48px; margin:20px 0 16px\">Ship faster,<br>break nothing.</h1>\n <p style=\"font-size:18px; max-width:480px; line-height:1.6\">The all-in-one platform for teams that care about quality. CI/CD, monitoring, and deployment in one place.</p>\n <div style=\"display:flex; justify-content:center\">\n <button style=\"padding:14px 28px; color:#fff; border-radius:8px; font-weight:600\">Start for free</button>\n <button style=\"padding:14px 28px; color:#111; border-radius:8px; cursor:pointer\">Watch demo \u2192</button>\n </div>\n </div>\n <div style=\"display:grid; gap:24px; margin:0 auto\">\n <div style=\"padding:28px; border-radius:12px\">\n <div style=\"width:44px; background:#ede9fe; margin-bottom:16px; align-items:center; font-size:22px\">\u26a1</div>\n <h3 style=\"margin:0 0 10px\">Fast Deploys</h3>\n <p style=\"margin:0; color:#666\">Push to production in under 30 seconds with zero downtime.</p>\n </div>\n <div style=\"padding:28px; border-radius:12px\">\n <div style=\"width:44px; background:#dcfce7; margin-bottom:16px; align-items:center; font-size:22px\">\ud83d\udd12</div>\n <h3 style=\"margin:0 0 10px\">Secure by Default</h3>\n <p style=\"margin:0; color:#666\">SOC2 compliant. Secrets management and audit logs built in.</p>\n </div>\n <div style=\"padding:28px; border-radius:12px\">\n <div style=\"width:44px; background:#fef3c7; margin-bottom:16px; align-items:center; font-size:22px\">\ud83d\udcca</div>\n <h3 style=\"margin:0 0 10px\">Live Monitoring</h3>\n <p style=\"margin:0; color:#666\">Real-time metrics, error tracking, and alerting out of the box.</p>\n </div>\n </div>\n</body>\n</html>\n"}, {"name": "no_layout", "rewards": {"format": 0.5, "validity": 1.0, "structural": 0.7917, "text_block": 0.2393, "position": 0.7758, "color": 0.61, "clip": 0.5675, "ssim": 0.5486, "total": 0.5269}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/5/no_layout.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>SaaS Landing</title></head>\n<body style=\"font-family:sans-serif; background:#fff; color:#111\">\n <nav style=\"border-bottom:1px solid #f0f0f0\">\n <span style=\"font-size:20px; font-weight:700; color:#4f46e5\">Streamline</span>\n <div style=\"gap:28px; font-size:14px; color:#555\">\n <a href=\"#\" style=\"text-decoration:none; color:#555\">Features</a>\n <a href=\"#\" style=\"text-decoration:none; color:#555\">Pricing</a>\n <a href=\"#\" style=\"text-decoration:none; color:#555\">Docs</a>\n </div>\n <button style=\"background:#4f46e5; color:#fff; border:none; font-size:14px; cursor:pointer\">Get Started</button>\n </nav>\n <div style=\"text-align:center; background:linear-gradient(135deg,#f0f0ff 0%,#fff 100%)\">\n <span style=\"background:#ede9fe; color:#4f46e5; font-size:12px; font-weight:600; letter-spacing:.05em\">NOW IN BETA</span>\n <h1 style=\"font-size:48px; font-weight:800; line-height:1.2\">Ship faster,<br>break nothing.</h1>\n <p style=\"font-size:18px; color:#666; max-width:480px; line-height:1.6\">The all-in-one platform for teams that care about quality. CI/CD, monitoring, and deployment in one place.</p>\n <div style=\"gap:12px\">\n <button style=\"background:#4f46e5; color:#fff; border:none; font-size:15px; font-weight:600; cursor:pointer\">Start for free</button>\n <button style=\"background:#fff; color:#111; border:1px solid #ddd; font-size:15px; cursor:pointer\">Watch demo \u2192</button>\n </div>\n </div>\n <div style=\"gap:24px; max-width:900px\">\n <div style=\"border:1px solid #f0f0f0\">\n <div style=\"background:#ede9fe; font-size:22px\">\u26a1</div>\n <h3 style=\"font-size:17px\">Fast Deploys</h3>\n <p style=\"font-size:14px; color:#666; line-height:1.6\">Push to production in under 30 seconds with zero downtime.</p>\n </div>\n <div style=\"border:1px solid #f0f0f0\">\n <div style=\"background:#dcfce7; font-size:22px\">\ud83d\udd12</div>\n <h3 style=\"font-size:17px\">Secure by Default</h3>\n <p style=\"font-size:14px; color:#666; line-height:1.6\">SOC2 compliant. Secrets management and audit logs built in.</p>\n </div>\n <div style=\"border:1px solid #f0f0f0\">\n <div style=\"background:#fef3c7; font-size:22px\">\ud83d\udcca</div>\n <h3 style=\"font-size:17px\">Live Monitoring</h3>\n <p style=\"font-size:14px; color:#666; line-height:1.6\">Real-time metrics, error tracking, and alerting out of the box.</p>\n </div>\n </div>\n</body>\n</html>\n"}, {"name": "no_style", "rewards": {"format": 0.5, "validity": 1.0, "structural": 0.5, "text_block": 0.1581, "position": 0.7081, "color": 0.561, "clip": 0.0361, "ssim": 0.549, "total": 0.358}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/5/no_style.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>SaaS Landing</title></head>\n<body>\n <nav>\n <span>Streamline</span>\n <div>\n <a href=\"#\">Features</a>\n <a href=\"#\">Pricing</a>\n <a href=\"#\">Docs</a>\n </div>\n <button>Get Started</button>\n </nav>\n <div>\n <span>NOW IN BETA</span>\n <h1>Ship faster,<br>break nothing.</h1>\n <p>The all-in-one platform for teams that care about quality. CI/CD, monitoring, and deployment in one place.</p>\n <div>\n <button>Start for free</button>\n <button>Watch demo \u2192</button>\n </div>\n </div>\n <div>\n <div>\n <div>\u26a1</div>\n <h3>Fast Deploys</h3>\n <p>Push to production in under 30 seconds with zero downtime.</p>\n </div>\n <div>\n <div>\ud83d\udd12</div>\n <h3>Secure by Default</h3>\n <p>SOC2 compliant. Secrets management and audit logs built in.</p>\n </div>\n <div>\n <div>\ud83d\udcca</div>\n <h3>Live Monitoring</h3>\n <p>Real-time metrics, error tracking, and alerting out of the box.</p>\n </div>\n </div>\n</body>\n</html>\n"}, {"name": "blank", "rewards": {"format": 0.5, "validity": 0.75, "structural": 0.1289, "text_block": 0.0, "position": 0.0, "color": 0.5581, "clip": 0.0, "ssim": 0.7456, "total": 0.0}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/5/blank.png", "html": "<!DOCTYPE html><html><head><title>Page</title></head><body style=\"background:#fff;\"></body></html>"}]}, {"id": 6, "difficulty": "medium", "source": "medium/1", "reference_image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/6/reference.png", "reference_html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Pricing</title></head>\n<body style=\"margin:0;font-family:sans-serif;background:#f9fafb;color:#111;padding:60px 20px;\">\n <h1 style=\"text-align:center;font-size:36px;margin:0 0 12px;\">Simple, transparent pricing</h1>\n <p style=\"text-align:center;color:#666;font-size:16px;margin:0 0 48px;\">Start free. Scale as you grow.</p>\n <div style=\"display:flex;gap:24px;max-width:900px;margin:0 auto;align-items:flex-start;\">\n <div style=\"flex:1;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:32px;\">\n <h2 style=\"font-size:18px;margin:0 0 8px;\">Hobby</h2>\n <p style=\"font-size:13px;color:#888;margin:0 0 20px;\">For personal projects</p>\n <p style=\"font-size:36px;font-weight:700;margin:0 0 24px;\">$0<span style=\"font-size:14px;font-weight:400;color:#888;\">/mo</span></p>\n <ul style=\"list-style:none;padding:0;margin:0 0 28px;font-size:14px;color:#555;line-height:2;\">\n <li>\u2713 3 projects</li><li>\u2713 1 GB storage</li><li>\u2713 Community support</li>\n </ul>\n <button style=\"width:100%;padding:12px;background:#f3f4f6;color:#111;border:none;border-radius:8px;font-size:14px;cursor:pointer;\">Get started</button>\n </div>\n <div style=\"flex:1;background:#4f46e5;border-radius:12px;padding:32px;color:#fff;position:relative;\">\n <span style=\"position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:#fbbf24;color:#000;font-size:11px;font-weight:700;padding:4px 12px;border-radius:20px;\">MOST POPULAR</span>\n <h2 style=\"font-size:18px;margin:0 0 8px;\">Pro</h2>\n <p style=\"font-size:13px;color:#c7d2fe;margin:0 0 20px;\">For growing teams</p>\n <p style=\"font-size:36px;font-weight:700;margin:0 0 24px;\">$29<span style=\"font-size:14px;font-weight:400;color:#c7d2fe;\">/mo</span></p>\n <ul style=\"list-style:none;padding:0;margin:0 0 28px;font-size:14px;color:#e0e7ff;line-height:2;\">\n <li>\u2713 Unlimited projects</li><li>\u2713 50 GB storage</li><li>\u2713 Priority support</li><li>\u2713 Team collaboration</li>\n </ul>\n <button style=\"width:100%;padding:12px;background:#fff;color:#4f46e5;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;\">Start free trial</button>\n </div>\n <div style=\"flex:1;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:32px;\">\n <h2 style=\"font-size:18px;margin:0 0 8px;\">Enterprise</h2>\n <p style=\"font-size:13px;color:#888;margin:0 0 20px;\">For large organisations</p>\n <p style=\"font-size:36px;font-weight:700;margin:0 0 24px;\">Custom</p>\n <ul style=\"list-style:none;padding:0;margin:0 0 28px;font-size:14px;color:#555;line-height:2;\">\n <li>\u2713 Unlimited everything</li><li>\u2713 SSO & SAML</li><li>\u2713 SLA guarantee</li><li>\u2713 Dedicated support</li>\n </ul>\n <button style=\"width:100%;padding:12px;background:#f3f4f6;color:#111;border:none;border-radius:8px;font-size:14px;cursor:pointer;\">Contact sales</button>\n </div>\n </div>\n</body>\n</html>\n", "variants": [{"name": "perfect", "rewards": {"format": 0.5, "validity": 1.0, "structural": 1.0, "text_block": 1.0, "position": 1.0, "color": 1.0, "clip": 1.0, "ssim": 1.0, "total": 0.9773}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/6/perfect.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Pricing</title></head>\n<body style=\"margin:0;font-family:sans-serif;background:#f9fafb;color:#111;padding:60px 20px;\">\n <h1 style=\"text-align:center;font-size:36px;margin:0 0 12px;\">Simple, transparent pricing</h1>\n <p style=\"text-align:center;color:#666;font-size:16px;margin:0 0 48px;\">Start free. Scale as you grow.</p>\n <div style=\"display:flex;gap:24px;max-width:900px;margin:0 auto;align-items:flex-start;\">\n <div style=\"flex:1;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:32px;\">\n <h2 style=\"font-size:18px;margin:0 0 8px;\">Hobby</h2>\n <p style=\"font-size:13px;color:#888;margin:0 0 20px;\">For personal projects</p>\n <p style=\"font-size:36px;font-weight:700;margin:0 0 24px;\">$0<span style=\"font-size:14px;font-weight:400;color:#888;\">/mo</span></p>\n <ul style=\"list-style:none;padding:0;margin:0 0 28px;font-size:14px;color:#555;line-height:2;\">\n <li>\u2713 3 projects</li><li>\u2713 1 GB storage</li><li>\u2713 Community support</li>\n </ul>\n <button style=\"width:100%;padding:12px;background:#f3f4f6;color:#111;border:none;border-radius:8px;font-size:14px;cursor:pointer;\">Get started</button>\n </div>\n <div style=\"flex:1;background:#4f46e5;border-radius:12px;padding:32px;color:#fff;position:relative;\">\n <span style=\"position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:#fbbf24;color:#000;font-size:11px;font-weight:700;padding:4px 12px;border-radius:20px;\">MOST POPULAR</span>\n <h2 style=\"font-size:18px;margin:0 0 8px;\">Pro</h2>\n <p style=\"font-size:13px;color:#c7d2fe;margin:0 0 20px;\">For growing teams</p>\n <p style=\"font-size:36px;font-weight:700;margin:0 0 24px;\">$29<span style=\"font-size:14px;font-weight:400;color:#c7d2fe;\">/mo</span></p>\n <ul style=\"list-style:none;padding:0;margin:0 0 28px;font-size:14px;color:#e0e7ff;line-height:2;\">\n <li>\u2713 Unlimited projects</li><li>\u2713 50 GB storage</li><li>\u2713 Priority support</li><li>\u2713 Team collaboration</li>\n </ul>\n <button style=\"width:100%;padding:12px;background:#fff;color:#4f46e5;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;\">Start free trial</button>\n </div>\n <div style=\"flex:1;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:32px;\">\n <h2 style=\"font-size:18px;margin:0 0 8px;\">Enterprise</h2>\n <p style=\"font-size:13px;color:#888;margin:0 0 20px;\">For large organisations</p>\n <p style=\"font-size:36px;font-weight:700;margin:0 0 24px;\">Custom</p>\n <ul style=\"list-style:none;padding:0;margin:0 0 28px;font-size:14px;color:#555;line-height:2;\">\n <li>\u2713 Unlimited everything</li><li>\u2713 SSO & SAML</li><li>\u2713 SLA guarantee</li><li>\u2713 Dedicated support</li>\n </ul>\n <button style=\"width:100%;padding:12px;background:#f3f4f6;color:#111;border:none;border-radius:8px;font-size:14px;cursor:pointer;\">Contact sales</button>\n </div>\n </div>\n</body>\n</html>\n"}, {"name": "minor_diff", "rewards": {"format": 0.5, "validity": 1.0, "structural": 1.0, "text_block": 1.0, "position": 0.9891, "color": 0.8536, "clip": 0.8378, "ssim": 0.658, "total": 0.8728}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/6/minor_diff.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Pricing</title></head>\n<body style=\"margin:0;font-family:sans-serif;background:#888888;color:#111;padding:60px 20px;\">\n <h1 style=\"text-align:center;font-size:32px;margin:0 0 12px;\">Simple, transparent pricing</h1>\n <p style=\"text-align:center;color:#666;font-size:12px;margin:0 0 48px;\">Start free. Scale as you grow.</p>\n <div style=\"display:flex;gap:24px;max-width:900px;margin:0 auto;align-items:flex-start;\">\n <div style=\"flex:1;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:32px;\">\n <h2 style=\"font-size:18px;margin:0 0 8px;\">Hobby</h2>\n <p style=\"font-size:13px;color:#888;margin:0 0 20px;\">For personal projects</p>\n <p style=\"font-size:36px;font-weight:700;margin:0 0 24px;\">$0<span style=\"font-size:14px;font-weight:400;color:#888;\">/mo</span></p>\n <ul style=\"list-style:none;padding:0;margin:0 0 28px;font-size:14px;color:#555;line-height:2;\">\n <li>\u2713 3 projects</li><li>\u2713 1 GB storage</li><li>\u2713 Community support</li>\n </ul>\n <button style=\"width:100%;padding:12px;background:#f3f4f6;color:#111;border:none;border-radius:8px;font-size:14px;cursor:pointer;\">Get started</button>\n </div>\n <div style=\"flex:1;background:#4f46e5;border-radius:12px;padding:32px;color:#fff;position:relative;\">\n <span style=\"position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:#fbbf24;color:#000;font-size:11px;font-weight:700;padding:4px 12px;border-radius:20px;\">MOST POPULAR</span>\n <h2 style=\"font-size:18px;margin:0 0 8px;\">Pro</h2>\n <p style=\"font-size:13px;color:#c7d2fe;margin:0 0 20px;\">For growing teams</p>\n <p style=\"font-size:36px;font-weight:700;margin:0 0 24px;\">$29<span style=\"font-size:14px;font-weight:400;color:#c7d2fe;\">/mo</span></p>\n <ul style=\"list-style:none;padding:0;margin:0 0 28px;font-size:14px;color:#e0e7ff;line-height:2;\">\n <li>\u2713 Unlimited projects</li><li>\u2713 50 GB storage</li><li>\u2713 Priority support</li><li>\u2713 Team collaboration</li>\n </ul>\n <button style=\"width:100%;padding:12px;background:#fff;color:#4f46e5;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;\">Start free trial</button>\n </div>\n <div style=\"flex:1;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:32px;\">\n <h2 style=\"font-size:18px;margin:0 0 8px;\">Enterprise</h2>\n <p style=\"font-size:13px;color:#888;margin:0 0 20px;\">For large organisations</p>\n <p style=\"font-size:36px;font-weight:700;margin:0 0 24px;\">Custom</p>\n <ul style=\"list-style:none;padding:0;margin:0 0 28px;font-size:14px;color:#555;line-height:2;\">\n <li>\u2713 Unlimited everything</li><li>\u2713 SSO & SAML</li><li>\u2713 SLA guarantee</li><li>\u2713 Dedicated support</li>\n </ul>\n <button style=\"width:100%;padding:12px;background:#f3f4f6;color:#111;border:none;border-radius:8px;font-size:14px;cursor:pointer;\">Contact sales</button>\n </div>\n </div>\n</body>\n</html>\n"}, {"name": "bad_colors", "rewards": {"format": 0.5, "validity": 1.0, "structural": 1.0, "text_block": 1.0, "position": 1.0, "color": 0.0, "clip": 0.7147, "ssim": 0.3088, "total": 0.6818}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/6/bad_colors.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Pricing</title></head>\n<body style=\"margin:0;font-family:sans-serif;background:#060504;color:#111;padding:60px 20px;\">\n <h1 style=\"text-align:center;font-size:36px;margin:0 0 12px;\">Simple, transparent pricing</h1>\n <p style=\"text-align:center;color:#666;font-size:16px;margin:0 0 48px;\">Start free. Scale as you grow.</p>\n <div style=\"display:flex;gap:24px;max-width:900px;margin:0 auto;align-items:flex-start;\">\n <div style=\"flex:1;background:#fff;border:1px solid #1a1814;border-radius:12px;padding:32px;\">\n <h2 style=\"font-size:18px;margin:0 0 8px;\">Hobby</h2>\n <p style=\"font-size:13px;color:#888;margin:0 0 20px;\">For personal projects</p>\n <p style=\"font-size:36px;font-weight:700;margin:0 0 24px;\">$0<span style=\"font-size:14px;font-weight:400;color:#888;\">/mo</span></p>\n <ul style=\"list-style:none;padding:0;margin:0 0 28px;font-size:14px;color:#555;line-height:2;\">\n <li>\u2713 3 projects</li><li>\u2713 1 GB storage</li><li>\u2713 Community support</li>\n </ul>\n <button style=\"width:100%;padding:12px;background:#0c0b09;color:#111;border:none;border-radius:8px;font-size:14px;cursor:pointer;\">Get started</button>\n </div>\n <div style=\"flex:1;background:#b0b91a;border-radius:12px;padding:32px;color:#fff;position:relative;\">\n <span style=\"position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:#0440db;color:#000;font-size:11px;font-weight:700;padding:4px 12px;border-radius:20px;\">MOST POPULAR</span>\n <h2 style=\"font-size:18px;margin:0 0 8px;\">Pro</h2>\n <p style=\"font-size:13px;color:#382d01;margin:0 0 20px;\">For growing teams</p>\n <p style=\"font-size:36px;font-weight:700;margin:0 0 24px;\">$29<span style=\"font-size:14px;font-weight:400;color:#382d01;\">/mo</span></p>\n <ul style=\"list-style:none;padding:0;margin:0 0 28px;font-size:14px;color:#1f1800;line-height:2;\">\n <li>\u2713 Unlimited projects</li><li>\u2713 50 GB storage</li><li>\u2713 Priority support</li><li>\u2713 Team collaboration</li>\n </ul>\n <button style=\"width:100%;padding:12px;background:#fff;color:#b0b91a;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;\">Start free trial</button>\n </div>\n <div style=\"flex:1;background:#fff;border:1px solid #1a1814;border-radius:12px;padding:32px;\">\n <h2 style=\"font-size:18px;margin:0 0 8px;\">Enterprise</h2>\n <p style=\"font-size:13px;color:#888;margin:0 0 20px;\">For large organisations</p>\n <p style=\"font-size:36px;font-weight:700;margin:0 0 24px;\">Custom</p>\n <ul style=\"list-style:none;padding:0;margin:0 0 28px;font-size:14px;color:#555;line-height:2;\">\n <li>\u2713 Unlimited everything</li><li>\u2713 SSO & SAML</li><li>\u2713 SLA guarantee</li><li>\u2713 Dedicated support</li>\n </ul>\n <button style=\"width:100%;padding:12px;background:#0c0b09;color:#111;border:none;border-radius:8px;font-size:14px;cursor:pointer;\">Contact sales</button>\n </div>\n </div>\n</body>\n</html>\n"}, {"name": "half_styled", "rewards": {"format": 0.5, "validity": 1.0, "structural": 0.8696, "text_block": 0.5823, "position": 0.9417, "color": 0.2443, "clip": 0.6017, "ssim": 0.6133, "total": 0.6058}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/6/half_styled.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Pricing</title></head>\n<body style=\"margin:0; background:#f9fafb; padding:60px 20px\">\n <h1 style=\"text-align:center; margin:0 0 12px\">Simple, transparent pricing</h1>\n <p style=\"text-align:center; font-size:16px\">Start free. Scale as you grow.</p>\n <div style=\"display:flex; max-width:900px; align-items:flex-start\">\n <div style=\"flex:1; border:1px solid #e5e7eb; padding:32px\">\n <h2 style=\"font-size:18px\">Hobby</h2>\n <p style=\"font-size:13px; margin:0 0 20px\">For personal projects</p>\n <p style=\"font-size:36px; margin:0 0 24px\">$0<span style=\"font-size:14px; color:#888\">/mo</span></p>\n <ul style=\"list-style:none; margin:0 0 28px; color:#555\">\n <li>\u2713 3 projects</li><li>\u2713 1 GB storage</li><li>\u2713 Community support</li>\n </ul>\n <button style=\"width:100%; background:#f3f4f6; border:none; font-size:14px\">Get started</button>\n </div>\n <div style=\"flex:1; border-radius:12px; color:#fff\">\n <span style=\"position:absolute; left:50%; background:#fbbf24; font-size:11px; padding:4px 12px\">MOST POPULAR</span>\n <h2 style=\"font-size:18px\">Pro</h2>\n <p style=\"font-size:13px; margin:0 0 20px\">For growing teams</p>\n <p style=\"font-size:36px; margin:0 0 24px\">$29<span style=\"font-size:14px; color:#c7d2fe\">/mo</span></p>\n <ul style=\"list-style:none; margin:0 0 28px; color:#e0e7ff\">\n <li>\u2713 Unlimited projects</li><li>\u2713 50 GB storage</li><li>\u2713 Priority support</li><li>\u2713 Team collaboration</li>\n </ul>\n <button style=\"width:100%; background:#fff; border:none; font-size:14px; cursor:pointer\">Start free trial</button>\n </div>\n <div style=\"flex:1; border:1px solid #e5e7eb; padding:32px\">\n <h2 style=\"font-size:18px\">Enterprise</h2>\n <p style=\"font-size:13px; margin:0 0 20px\">For large organisations</p>\n <p style=\"font-size:36px; margin:0 0 24px\">Custom</p>\n <ul style=\"list-style:none; margin:0 0 28px; color:#555\">\n <li>\u2713 Unlimited everything</li><li>\u2713 SSO & SAML</li><li>\u2713 SLA guarantee</li><li>\u2713 Dedicated support</li>\n </ul>\n <button style=\"width:100%; background:#f3f4f6; border:none; font-size:14px\">Contact sales</button>\n </div>\n </div>\n</body>\n</html>\n"}, {"name": "no_layout", "rewards": {"format": 0.5, "validity": 1.0, "structural": 0.7609, "text_block": 0.2622, "position": 0.6796, "color": 0.4486, "clip": 0.3169, "ssim": 0.5091, "total": 0.4387}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/6/no_layout.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Pricing</title></head>\n<body style=\"font-family:sans-serif; background:#f9fafb; color:#111\">\n <h1 style=\"text-align:center; font-size:36px\">Simple, transparent pricing</h1>\n <p style=\"text-align:center; color:#666; font-size:16px\">Start free. Scale as you grow.</p>\n <div style=\"gap:24px; max-width:900px\">\n <div style=\"background:#fff; border:1px solid #e5e7eb\">\n <h2 style=\"font-size:18px\">Hobby</h2>\n <p style=\"font-size:13px; color:#888\">For personal projects</p>\n <p style=\"font-size:36px; font-weight:700\">$0<span style=\"font-size:14px; font-weight:400; color:#888\">/mo</span></p>\n <ul style=\"list-style:none; font-size:14px; color:#555; line-height:2\">\n <li>\u2713 3 projects</li><li>\u2713 1 GB storage</li><li>\u2713 Community support</li>\n </ul>\n <button style=\"background:#f3f4f6; color:#111; border:none; font-size:14px; cursor:pointer\">Get started</button>\n </div>\n <div style=\"background:#4f46e5; color:#fff\">\n <span style=\"background:#fbbf24; color:#000; font-size:11px; font-weight:700\">MOST POPULAR</span>\n <h2 style=\"font-size:18px\">Pro</h2>\n <p style=\"font-size:13px; color:#c7d2fe\">For growing teams</p>\n <p style=\"font-size:36px; font-weight:700\">$29<span style=\"font-size:14px; font-weight:400; color:#c7d2fe\">/mo</span></p>\n <ul style=\"list-style:none; font-size:14px; color:#e0e7ff; line-height:2\">\n <li>\u2713 Unlimited projects</li><li>\u2713 50 GB storage</li><li>\u2713 Priority support</li><li>\u2713 Team collaboration</li>\n </ul>\n <button style=\"background:#fff; color:#4f46e5; border:none; font-size:14px; font-weight:600; cursor:pointer\">Start free trial</button>\n </div>\n <div style=\"background:#fff; border:1px solid #e5e7eb\">\n <h2 style=\"font-size:18px\">Enterprise</h2>\n <p style=\"font-size:13px; color:#888\">For large organisations</p>\n <p style=\"font-size:36px; font-weight:700\">Custom</p>\n <ul style=\"list-style:none; font-size:14px; color:#555; line-height:2\">\n <li>\u2713 Unlimited everything</li><li>\u2713 SSO & SAML</li><li>\u2713 SLA guarantee</li><li>\u2713 Dedicated support</li>\n </ul>\n <button style=\"background:#f3f4f6; color:#111; border:none; font-size:14px; cursor:pointer\">Contact sales</button>\n </div>\n </div>\n</body>\n</html>\n"}, {"name": "no_style", "rewards": {"format": 0.5, "validity": 1.0, "structural": 0.5, "text_block": 0.2881, "position": 0.8087, "color": 0.1982, "clip": 0.0, "ssim": 0.5422, "total": 0.344}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/6/no_style.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Pricing</title></head>\n<body>\n <h1>Simple, transparent pricing</h1>\n <p>Start free. Scale as you grow.</p>\n <div>\n <div>\n <h2>Hobby</h2>\n <p>For personal projects</p>\n <p>$0<span>/mo</span></p>\n <ul>\n <li>\u2713 3 projects</li><li>\u2713 1 GB storage</li><li>\u2713 Community support</li>\n </ul>\n <button>Get started</button>\n </div>\n <div>\n <span>MOST POPULAR</span>\n <h2>Pro</h2>\n <p>For growing teams</p>\n <p>$29<span>/mo</span></p>\n <ul>\n <li>\u2713 Unlimited projects</li><li>\u2713 50 GB storage</li><li>\u2713 Priority support</li><li>\u2713 Team collaboration</li>\n </ul>\n <button>Start free trial</button>\n </div>\n <div>\n <h2>Enterprise</h2>\n <p>For large organisations</p>\n <p>Custom</p>\n <ul>\n <li>\u2713 Unlimited everything</li><li>\u2713 SSO & SAML</li><li>\u2713 SLA guarantee</li><li>\u2713 Dedicated support</li>\n </ul>\n <button>Contact sales</button>\n </div>\n </div>\n</body>\n</html>\n"}, {"name": "blank", "rewards": {"format": 0.5, "validity": 0.75, "structural": 0.1126, "text_block": 0.0, "position": 0.0, "color": 0.194, "clip": 0.0, "ssim": 0.6901, "total": 0.0}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/6/blank.png", "html": "<!DOCTYPE html><html><head><title>Page</title></head><body style=\"background:#fff;\"></body></html>"}]}, {"id": 7, "difficulty": "medium", "source": "medium/2", "reference_image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/7/reference.png", "reference_html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Team</title></head>\n<body style=\"margin:0;font-family:sans-serif;background:#fff;color:#111;padding:60px 20px;\">\n <h1 style=\"text-align:center;font-size:34px;margin:0 0 12px;\">Meet the Team</h1>\n <p style=\"text-align:center;color:#888;margin:0 0 48px;\">The people building the future of development tooling.</p>\n <div style=\"display:grid;grid-template-columns:repeat(4,1fr);gap:24px;max-width:960px;margin:0 auto;\">\n <div style=\"text-align:center;\">\n <div style=\"width:80px;height:80px;border-radius:50%;background:#818cf8;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;font-weight:700;\">S</div>\n <p style=\"font-weight:600;margin:0 0 4px;\">Sarah Chen</p>\n <p style=\"font-size:13px;color:#888;margin:0 0 10px;\">CEO & Co-founder</p>\n <p style=\"font-size:13px;color:#555;line-height:1.5;\">Previously at Google Brain. PhD in ML from Stanford.</p>\n </div>\n <div style=\"text-align:center;\">\n <div style=\"width:80px;height:80px;border-radius:50%;background:#34d399;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;font-weight:700;\">M</div>\n <p style=\"font-weight:600;margin:0 0 4px;\">Marcus Lee</p>\n <p style=\"font-size:13px;color:#888;margin:0 0 10px;\">CTO & Co-founder</p>\n <p style=\"font-size:13px;color:#555;line-height:1.5;\">Built infra at Stripe. Open source contributor.</p>\n </div>\n <div style=\"text-align:center;\">\n <div style=\"width:80px;height:80px;border-radius:50%;background:#fb923c;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;font-weight:700;\">P</div>\n <p style=\"font-weight:600;margin:0 0 4px;\">Priya Nair</p>\n <p style=\"font-size:13px;color:#888;margin:0 0 10px;\">Head of Design</p>\n <p style=\"font-size:13px;color:#555;line-height:1.5;\">Design systems expert. Ex-Figma and Notion.</p>\n </div>\n <div style=\"text-align:center;\">\n <div style=\"width:80px;height:80px;border-radius:50%;background:#f472b6;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;font-weight:700;\">J</div>\n <p style=\"font-weight:600;margin:0 0 4px;\">Jake Torres</p>\n <p style=\"font-size:13px;color:#888;margin:0 0 10px;\">Lead Engineer</p>\n <p style=\"font-size:13px;color:#555;line-height:1.5;\">Full-stack dev. Rust and TypeScript enthusiast.</p>\n </div>\n </div>\n</body>\n</html>\n", "variants": [{"name": "perfect", "rewards": {"format": 0.5, "validity": 1.0, "structural": 1.0, "text_block": 1.0, "position": 1.0, "color": 1.0, "clip": 1.0, "ssim": 1.0, "total": 0.9773}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/7/perfect.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Team</title></head>\n<body style=\"margin:0;font-family:sans-serif;background:#fff;color:#111;padding:60px 20px;\">\n <h1 style=\"text-align:center;font-size:34px;margin:0 0 12px;\">Meet the Team</h1>\n <p style=\"text-align:center;color:#888;margin:0 0 48px;\">The people building the future of development tooling.</p>\n <div style=\"display:grid;grid-template-columns:repeat(4,1fr);gap:24px;max-width:960px;margin:0 auto;\">\n <div style=\"text-align:center;\">\n <div style=\"width:80px;height:80px;border-radius:50%;background:#818cf8;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;font-weight:700;\">S</div>\n <p style=\"font-weight:600;margin:0 0 4px;\">Sarah Chen</p>\n <p style=\"font-size:13px;color:#888;margin:0 0 10px;\">CEO & Co-founder</p>\n <p style=\"font-size:13px;color:#555;line-height:1.5;\">Previously at Google Brain. PhD in ML from Stanford.</p>\n </div>\n <div style=\"text-align:center;\">\n <div style=\"width:80px;height:80px;border-radius:50%;background:#34d399;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;font-weight:700;\">M</div>\n <p style=\"font-weight:600;margin:0 0 4px;\">Marcus Lee</p>\n <p style=\"font-size:13px;color:#888;margin:0 0 10px;\">CTO & Co-founder</p>\n <p style=\"font-size:13px;color:#555;line-height:1.5;\">Built infra at Stripe. Open source contributor.</p>\n </div>\n <div style=\"text-align:center;\">\n <div style=\"width:80px;height:80px;border-radius:50%;background:#fb923c;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;font-weight:700;\">P</div>\n <p style=\"font-weight:600;margin:0 0 4px;\">Priya Nair</p>\n <p style=\"font-size:13px;color:#888;margin:0 0 10px;\">Head of Design</p>\n <p style=\"font-size:13px;color:#555;line-height:1.5;\">Design systems expert. Ex-Figma and Notion.</p>\n </div>\n <div style=\"text-align:center;\">\n <div style=\"width:80px;height:80px;border-radius:50%;background:#f472b6;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;font-weight:700;\">J</div>\n <p style=\"font-weight:600;margin:0 0 4px;\">Jake Torres</p>\n <p style=\"font-size:13px;color:#888;margin:0 0 10px;\">Lead Engineer</p>\n <p style=\"font-size:13px;color:#555;line-height:1.5;\">Full-stack dev. Rust and TypeScript enthusiast.</p>\n </div>\n </div>\n</body>\n</html>\n"}, {"name": "bad_colors", "rewards": {"format": 0.5, "validity": 1.0, "structural": 1.0, "text_block": 1.0, "position": 1.0, "color": 0.436, "clip": 0.8768, "ssim": 0.9584, "total": 0.8667}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/7/bad_colors.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Team</title></head>\n<body style=\"margin:0;font-family:sans-serif;background:#fff;color:#111;padding:60px 20px;\">\n <h1 style=\"text-align:center;font-size:34px;margin:0 0 12px;\">Meet the Team</h1>\n <p style=\"text-align:center;color:#888;margin:0 0 48px;\">The people building the future of development tooling.</p>\n <div style=\"display:grid;grid-template-columns:repeat(4,1fr);gap:24px;max-width:960px;margin:0 auto;\">\n <div style=\"text-align:center;\">\n <div style=\"width:80px;height:80px;border-radius:50%;background:#7e7307;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;font-weight:700;\">S</div>\n <p style=\"font-weight:600;margin:0 0 4px;\">Sarah Chen</p>\n <p style=\"font-size:13px;color:#888;margin:0 0 10px;\">CEO & Co-founder</p>\n <p style=\"font-size:13px;color:#555;line-height:1.5;\">Previously at Google Brain. PhD in ML from Stanford.</p>\n </div>\n <div style=\"text-align:center;\">\n <div style=\"width:80px;height:80px;border-radius:50%;background:#cb2c66;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;font-weight:700;\">M</div>\n <p style=\"font-weight:600;margin:0 0 4px;\">Marcus Lee</p>\n <p style=\"font-size:13px;color:#888;margin:0 0 10px;\">CTO & Co-founder</p>\n <p style=\"font-size:13px;color:#555;line-height:1.5;\">Built infra at Stripe. Open source contributor.</p>\n </div>\n <div style=\"text-align:center;\">\n <div style=\"width:80px;height:80px;border-radius:50%;background:#046dc3;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;font-weight:700;\">P</div>\n <p style=\"font-weight:600;margin:0 0 4px;\">Priya Nair</p>\n <p style=\"font-size:13px;color:#888;margin:0 0 10px;\">Head of Design</p>\n <p style=\"font-size:13px;color:#555;line-height:1.5;\">Design systems expert. Ex-Figma and Notion.</p>\n </div>\n <div style=\"text-align:center;\">\n <div style=\"width:80px;height:80px;border-radius:50%;background:#0b8d49;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;font-weight:700;\">J</div>\n <p style=\"font-weight:600;margin:0 0 4px;\">Jake Torres</p>\n <p style=\"font-size:13px;color:#888;margin:0 0 10px;\">Lead Engineer</p>\n <p style=\"font-size:13px;color:#555;line-height:1.5;\">Full-stack dev. Rust and TypeScript enthusiast.</p>\n </div>\n </div>\n</body>\n</html>\n"}, {"name": "minor_diff", "rewards": {"format": 0.5, "validity": 1.0, "structural": 1.0, "text_block": 1.0, "position": 0.9939, "color": 0.7914, "clip": 0.777, "ssim": 0.7679, "total": 0.8659}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/7/minor_diff.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Team</title></head>\n<body style=\"margin:0;font-family:sans-serif;background:#fff;color:#111;padding:60px 20px;\">\n <h1 style=\"text-align:center;font-size:30px;margin:0 0 12px;\">Meet the Team</h1>\n <p style=\"text-align:center;color:#888;margin:0 0 48px;\">The people building the future of development tooling.</p>\n <div style=\"display:grid;grid-template-columns:repeat(4,1fr);gap:24px;max-width:960px;margin:0 auto;\">\n <div style=\"text-align:center;\">\n <div style=\"width:80px;height:80px;border-radius:50%;background:#888888;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;font-weight:700;\">S</div>\n <p style=\"font-weight:600;margin:0 0 4px;\">Sarah Chen</p>\n <p style=\"font-size:13px;color:#888;margin:0 0 10px;\">CEO & Co-founder</p>\n <p style=\"font-size:13px;color:#555;line-height:1.5;\">Previously at Google Brain. PhD in ML from Stanford.</p>\n </div>\n <div style=\"text-align:center;\">\n <div style=\"width:80px;height:80px;border-radius:50%;background:#34d399;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;font-weight:700;\">M</div>\n <p style=\"font-weight:600;margin:0 0 4px;\">Marcus Lee</p>\n <p style=\"font-size:13px;color:#888;margin:0 0 10px;\">CTO & Co-founder</p>\n <p style=\"font-size:13px;color:#555;line-height:1.5;\">Built infra at Stripe. Open source contributor.</p>\n </div>\n <div style=\"text-align:center;\">\n <div style=\"width:80px;height:80px;border-radius:50%;background:#fb923c;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;font-weight:700;\">P</div>\n <p style=\"font-weight:600;margin:0 0 4px;\">Priya Nair</p>\n <p style=\"font-size:13px;color:#888;margin:0 0 10px;\">Head of Design</p>\n <p style=\"font-size:13px;color:#555;line-height:1.5;\">Design systems expert. Ex-Figma and Notion.</p>\n </div>\n <div style=\"text-align:center;\">\n <div style=\"width:80px;height:80px;border-radius:50%;background:#f472b6;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;font-weight:700;\">J</div>\n <p style=\"font-weight:600;margin:0 0 4px;\">Jake Torres</p>\n <p style=\"font-size:13px;color:#888;margin:0 0 10px;\">Lead Engineer</p>\n <p style=\"font-size:13px;color:#555;line-height:1.5;\">Full-stack dev. Rust and TypeScript enthusiast.</p>\n </div>\n </div>\n</body>\n</html>\n"}, {"name": "no_layout", "rewards": {"format": 0.5, "validity": 1.0, "structural": 0.75, "text_block": 0.2158, "position": 0.7656, "color": 0.5097, "clip": 0.6262, "ssim": 0.5075, "total": 0.5118}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/7/no_layout.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Team</title></head>\n<body style=\"font-family:sans-serif; background:#fff; color:#111\">\n <h1 style=\"text-align:center; font-size:34px\">Meet the Team</h1>\n <p style=\"text-align:center; color:#888\">The people building the future of development tooling.</p>\n <div style=\"gap:24px; max-width:960px\">\n <div style=\"text-align:center\">\n <div style=\"background:#818cf8; color:#fff; font-size:24px; font-weight:700\">S</div>\n <p style=\"font-weight:600\">Sarah Chen</p>\n <p style=\"font-size:13px; color:#888\">CEO & Co-founder</p>\n <p style=\"font-size:13px; color:#555; line-height:1.5\">Previously at Google Brain. PhD in ML from Stanford.</p>\n </div>\n <div style=\"text-align:center\">\n <div style=\"background:#34d399; color:#fff; font-size:24px; font-weight:700\">M</div>\n <p style=\"font-weight:600\">Marcus Lee</p>\n <p style=\"font-size:13px; color:#888\">CTO & Co-founder</p>\n <p style=\"font-size:13px; color:#555; line-height:1.5\">Built infra at Stripe. Open source contributor.</p>\n </div>\n <div style=\"text-align:center\">\n <div style=\"background:#fb923c; color:#fff; font-size:24px; font-weight:700\">P</div>\n <p style=\"font-weight:600\">Priya Nair</p>\n <p style=\"font-size:13px; color:#888\">Head of Design</p>\n <p style=\"font-size:13px; color:#555; line-height:1.5\">Design systems expert. Ex-Figma and Notion.</p>\n </div>\n <div style=\"text-align:center\">\n <div style=\"background:#f472b6; color:#fff; font-size:24px; font-weight:700\">J</div>\n <p style=\"font-weight:600\">Jake Torres</p>\n <p style=\"font-size:13px; color:#888\">Lead Engineer</p>\n <p style=\"font-size:13px; color:#555; line-height:1.5\">Full-stack dev. Rust and TypeScript enthusiast.</p>\n </div>\n </div>\n</body>\n</html>\n"}, {"name": "no_style", "rewards": {"format": 0.5, "validity": 1.0, "structural": 0.5, "text_block": 0.2235, "position": 0.7739, "color": 0.5631, "clip": 0.2567, "ssim": 0.6022, "total": 0.4395}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/7/no_style.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Team</title></head>\n<body>\n <h1>Meet the Team</h1>\n <p>The people building the future of development tooling.</p>\n <div>\n <div>\n <div>S</div>\n <p>Sarah Chen</p>\n <p>CEO & Co-founder</p>\n <p>Previously at Google Brain. PhD in ML from Stanford.</p>\n </div>\n <div>\n <div>M</div>\n <p>Marcus Lee</p>\n <p>CTO & Co-founder</p>\n <p>Built infra at Stripe. Open source contributor.</p>\n </div>\n <div>\n <div>P</div>\n <p>Priya Nair</p>\n <p>Head of Design</p>\n <p>Design systems expert. Ex-Figma and Notion.</p>\n </div>\n <div>\n <div>J</div>\n <p>Jake Torres</p>\n <p>Lead Engineer</p>\n <p>Full-stack dev. Rust and TypeScript enthusiast.</p>\n </div>\n </div>\n</body>\n</html>\n"}, {"name": "half_styled", "rewards": {"format": 0.5, "validity": 1.0, "structural": 0.8611, "text_block": 0.2049, "position": 0.724, "color": 0.562, "clip": 0.0, "ssim": 0.6497, "total": 0.3942}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/7/half_styled.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Team</title></head>\n<body style=\"margin:0; background:#fff; padding:60px 20px\">\n <h1 style=\"text-align:center; margin:0 0 12px\">Meet the Team</h1>\n <p style=\"text-align:center; margin:0 0 48px\">The people building the future of development tooling.</p>\n <div style=\"display:grid; gap:24px; margin:0 auto\">\n <div style=\"text-align:center\">\n <div style=\"width:80px; border-radius:50%; margin:0 auto 14px; align-items:center; color:#fff; font-weight:700\">S</div>\n <p style=\"font-weight:600\">Sarah Chen</p>\n <p style=\"font-size:13px; margin:0 0 10px\">CEO & Co-founder</p>\n <p style=\"font-size:13px; line-height:1.5\">Previously at Google Brain. PhD in ML from Stanford.</p>\n </div>\n <div style=\"text-align:center\">\n <div style=\"width:80px; border-radius:50%; margin:0 auto 14px; align-items:center; color:#fff; font-weight:700\">M</div>\n <p style=\"font-weight:600\">Marcus Lee</p>\n <p style=\"font-size:13px; margin:0 0 10px\">CTO & Co-founder</p>\n <p style=\"font-size:13px; line-height:1.5\">Built infra at Stripe. Open source contributor.</p>\n </div>\n <div style=\"text-align:center\">\n <div style=\"width:80px; border-radius:50%; margin:0 auto 14px; align-items:center; color:#fff; font-weight:700\">P</div>\n <p style=\"font-weight:600\">Priya Nair</p>\n <p style=\"font-size:13px; margin:0 0 10px\">Head of Design</p>\n <p style=\"font-size:13px; line-height:1.5\">Design systems expert. Ex-Figma and Notion.</p>\n </div>\n <div style=\"text-align:center\">\n <div style=\"width:80px; border-radius:50%; margin:0 auto 14px; align-items:center; color:#fff; font-weight:700\">J</div>\n <p style=\"font-weight:600\">Jake Torres</p>\n <p style=\"font-size:13px; margin:0 0 10px\">Lead Engineer</p>\n <p style=\"font-size:13px; line-height:1.5\">Full-stack dev. Rust and TypeScript enthusiast.</p>\n </div>\n </div>\n</body>\n</html>\n"}, {"name": "blank", "rewards": {"format": 0.5, "validity": 0.75, "structural": 0.1528, "text_block": 0.0, "position": 0.0, "color": 0.5598, "clip": 0.0, "ssim": 0.7605, "total": 0.0}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/7/blank.png", "html": "<!DOCTYPE html><html><head><title>Page</title></head><body style=\"background:#fff;\"></body></html>"}]}, {"id": 8, "difficulty": "medium", "source": "medium/3", "reference_image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/8/reference.png", "reference_html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Article</title></head>\n<body style=\"margin:0;font-family:sans-serif;background:#fff;color:#111;\">\n <nav style=\"display:flex;align-items:center;justify-content:space-between;padding:14px 32px;border-bottom:1px solid #eee;\">\n <span style=\"font-weight:700;font-size:18px;\">DevDigest</span>\n <div style=\"display:flex;gap:24px;font-size:14px;color:#555;\">\n <a href=\"#\" style=\"text-decoration:none;color:#555;\">Articles</a>\n <a href=\"#\" style=\"text-decoration:none;color:#555;\">Newsletter</a>\n <a href=\"#\" style=\"text-decoration:none;color:#555;\">Jobs</a>\n </div>\n </nav>\n <div style=\"display:flex;max-width:1000px;margin:40px auto;padding:0 20px;gap:48px;\">\n <main style=\"flex:2;\">\n <span style=\"background:#fee2e2;color:#dc2626;font-size:11px;font-weight:700;padding:3px 10px;border-radius:4px;\">RUST</span>\n <h1 style=\"font-size:28px;line-height:1.3;margin:12px 0 20px;\">Why Rust is Winning the Systems Programming War</h1>\n <p style=\"font-size:14px;color:#888;margin-bottom:24px;\">By <strong style=\"color:#555;\">Alex Kim</strong> \u00b7 8 min read \u00b7 Apr 8, 2026</p>\n <p style=\"line-height:1.8;color:#333;margin-bottom:18px;\">Memory safety without garbage collection was once considered impossible. Rust has proved the skeptics wrong, and major tech companies are taking notice.</p>\n <p style=\"line-height:1.8;color:#333;margin-bottom:18px;\">The Linux kernel, Android, and the Windows kernel have all started incorporating Rust. This isn't a trend \u2014 it's a fundamental shift in how critical infrastructure is built.</p>\n <h2 style=\"font-size:20px;margin:32px 0 12px;\">The Ownership Model</h2>\n <p style=\"line-height:1.8;color:#333;\">Rust's ownership system enforces memory safety at compile time. Every value has exactly one owner, and the compiler ensures that references never outlive their data.</p>\n </main>\n <aside style=\"flex:1;\">\n <div style=\"background:#f9fafb;border-radius:10px;padding:20px;margin-bottom:24px;\">\n <h3 style=\"margin:0 0 14px;font-size:15px;\">Trending</h3>\n <div style=\"font-size:13px;color:#555;line-height:2.2;border-top:1px solid #eee;padding-top:12px;\">\n <p style=\"margin:0;\">1. Go vs Rust in 2026</p>\n <p style=\"margin:0;\">2. The React Server Components Guide</p>\n <p style=\"margin:0;\">3. Postgres vs SQLite at scale</p>\n <p style=\"margin:0;\">4. Building your own LLM</p>\n </div>\n </div>\n <div style=\"background:#ede9fe;border-radius:10px;padding:20px;\">\n <h3 style=\"margin:0 0 8px;font-size:15px;color:#4f46e5;\">Newsletter</h3>\n <p style=\"font-size:13px;color:#555;margin:0 0 12px;\">Weekly digest of the best dev articles.</p>\n <input placeholder=\"your@email.com\" style=\"width:100%;box-sizing:border-box;padding:8px 12px;border:1px solid #c4b5fd;border-radius:6px;font-size:13px;margin-bottom:8px;\">\n <button style=\"width:100%;padding:8px;background:#4f46e5;color:#fff;border:none;border-radius:6px;font-size:13px;cursor:pointer;\">Subscribe</button>\n </div>\n </aside>\n </div>\n</body>\n</html>\n", "variants": [{"name": "perfect", "rewards": {"format": 0.5, "validity": 1.0, "structural": 1.0, "text_block": 1.0, "position": 1.0, "color": 1.0, "clip": 1.0, "ssim": 1.0, "total": 0.9773}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/8/perfect.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Article</title></head>\n<body style=\"margin:0;font-family:sans-serif;background:#fff;color:#111;\">\n <nav style=\"display:flex;align-items:center;justify-content:space-between;padding:14px 32px;border-bottom:1px solid #eee;\">\n <span style=\"font-weight:700;font-size:18px;\">DevDigest</span>\n <div style=\"display:flex;gap:24px;font-size:14px;color:#555;\">\n <a href=\"#\" style=\"text-decoration:none;color:#555;\">Articles</a>\n <a href=\"#\" style=\"text-decoration:none;color:#555;\">Newsletter</a>\n <a href=\"#\" style=\"text-decoration:none;color:#555;\">Jobs</a>\n </div>\n </nav>\n <div style=\"display:flex;max-width:1000px;margin:40px auto;padding:0 20px;gap:48px;\">\n <main style=\"flex:2;\">\n <span style=\"background:#fee2e2;color:#dc2626;font-size:11px;font-weight:700;padding:3px 10px;border-radius:4px;\">RUST</span>\n <h1 style=\"font-size:28px;line-height:1.3;margin:12px 0 20px;\">Why Rust is Winning the Systems Programming War</h1>\n <p style=\"font-size:14px;color:#888;margin-bottom:24px;\">By <strong style=\"color:#555;\">Alex Kim</strong> \u00b7 8 min read \u00b7 Apr 8, 2026</p>\n <p style=\"line-height:1.8;color:#333;margin-bottom:18px;\">Memory safety without garbage collection was once considered impossible. Rust has proved the skeptics wrong, and major tech companies are taking notice.</p>\n <p style=\"line-height:1.8;color:#333;margin-bottom:18px;\">The Linux kernel, Android, and the Windows kernel have all started incorporating Rust. This isn't a trend \u2014 it's a fundamental shift in how critical infrastructure is built.</p>\n <h2 style=\"font-size:20px;margin:32px 0 12px;\">The Ownership Model</h2>\n <p style=\"line-height:1.8;color:#333;\">Rust's ownership system enforces memory safety at compile time. Every value has exactly one owner, and the compiler ensures that references never outlive their data.</p>\n </main>\n <aside style=\"flex:1;\">\n <div style=\"background:#f9fafb;border-radius:10px;padding:20px;margin-bottom:24px;\">\n <h3 style=\"margin:0 0 14px;font-size:15px;\">Trending</h3>\n <div style=\"font-size:13px;color:#555;line-height:2.2;border-top:1px solid #eee;padding-top:12px;\">\n <p style=\"margin:0;\">1. Go vs Rust in 2026</p>\n <p style=\"margin:0;\">2. The React Server Components Guide</p>\n <p style=\"margin:0;\">3. Postgres vs SQLite at scale</p>\n <p style=\"margin:0;\">4. Building your own LLM</p>\n </div>\n </div>\n <div style=\"background:#ede9fe;border-radius:10px;padding:20px;\">\n <h3 style=\"margin:0 0 8px;font-size:15px;color:#4f46e5;\">Newsletter</h3>\n <p style=\"font-size:13px;color:#555;margin:0 0 12px;\">Weekly digest of the best dev articles.</p>\n <input placeholder=\"your@email.com\" style=\"width:100%;box-sizing:border-box;padding:8px 12px;border:1px solid #c4b5fd;border-radius:6px;font-size:13px;margin-bottom:8px;\">\n <button style=\"width:100%;padding:8px;background:#4f46e5;color:#fff;border:none;border-radius:6px;font-size:13px;cursor:pointer;\">Subscribe</button>\n </div>\n </aside>\n </div>\n</body>\n</html>\n"}, {"name": "minor_diff", "rewards": {"format": 0.5, "validity": 1.0, "structural": 1.0, "text_block": 0.95, "position": 0.9908, "color": 0.8983, "clip": 0.9425, "ssim": 0.8371, "total": 0.9136}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/8/minor_diff.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Article</title></head>\n<body style=\"margin:0;font-family:sans-serif;background:#fff;color:#111;\">\n <nav style=\"display:flex;align-items:center;justify-content:space-between;padding:14px 32px;border-bottom:1px solid #eee;\">\n <span style=\"font-weight:700;font-size:14px;\">DevDigest</span>\n <div style=\"display:flex;gap:24px;font-size:10px;color:#555;\">\n <a href=\"#\" style=\"text-decoration:none;color:#555;\">Articles</a>\n <a href=\"#\" style=\"text-decoration:none;color:#555;\">Newsletter</a>\n <a href=\"#\" style=\"text-decoration:none;color:#555;\">Jobs</a>\n </div>\n </nav>\n <div style=\"display:flex;max-width:1000px;margin:40px auto;padding:0 20px;gap:48px;\">\n <main style=\"flex:2;\">\n <span style=\"background:#888888;color:#dc2626;font-size:11px;font-weight:700;padding:3px 10px;border-radius:4px;\">RUST</span>\n <h1 style=\"font-size:28px;line-height:1.3;margin:12px 0 20px;\">Why Rust is Winning the Systems Programming War</h1>\n <p style=\"font-size:14px;color:#888;margin-bottom:24px;\">By <strong style=\"color:#555;\">Alex Kim</strong> \u00b7 8 min read \u00b7 Apr 8, 2026</p>\n <p style=\"line-height:1.8;color:#333;margin-bottom:18px;\">Memory safety without garbage collection was once considered impossible. Rust has proved the skeptics wrong, and major tech companies are taking notice.</p>\n <p style=\"line-height:1.8;color:#333;margin-bottom:18px;\">The Linux kernel, Android, and the Windows kernel have all started incorporating Rust. This isn't a trend \u2014 it's a fundamental shift in how critical infrastructure is built.</p>\n <h2 style=\"font-size:20px;margin:32px 0 12px;\">The Ownership Model</h2>\n <p style=\"line-height:1.8;color:#333;\">Rust's ownership system enforces memory safety at compile time. Every value has exactly one owner, and the compiler ensures that references never outlive their data.</p>\n </main>\n <aside style=\"flex:1;\">\n <div style=\"background:#f9fafb;border-radius:10px;padding:20px;margin-bottom:24px;\">\n <h3 style=\"margin:0 0 14px;font-size:15px;\">Trending</h3>\n <div style=\"font-size:13px;color:#555;line-height:2.2;border-top:1px solid #eee;padding-top:12px;\">\n <p style=\"margin:0;\">1. Go vs Rust in 2026</p>\n <p style=\"margin:0;\">2. The React Server Components Guide</p>\n <p style=\"margin:0;\">3. Postgres vs SQLite at scale</p>\n <p style=\"margin:0;\">4. Building your own LLM</p>\n </div>\n </div>\n <div style=\"background:#ede9fe;border-radius:10px;padding:20px;\">\n <h3 style=\"margin:0 0 8px;font-size:15px;color:#4f46e5;\">Newsletter</h3>\n <p style=\"font-size:13px;color:#555;margin:0 0 12px;\">Weekly digest of the best dev articles.</p>\n <input placeholder=\"your@email.com\" style=\"width:100%;box-sizing:border-box;padding:8px 12px;border:1px solid #c4b5fd;border-radius:6px;font-size:13px;margin-bottom:8px;\">\n <button style=\"width:100%;padding:8px;background:#4f46e5;color:#fff;border:none;border-radius:6px;font-size:13px;cursor:pointer;\">Subscribe</button>\n </div>\n </aside>\n </div>\n</body>\n</html>\n"}, {"name": "bad_colors", "rewards": {"format": 0.5, "validity": 1.0, "structural": 1.0, "text_block": 1.0, "position": 1.0, "color": 0.4067, "clip": 0.7778, "ssim": 0.7789, "total": 0.8157}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/8/bad_colors.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Article</title></head>\n<body style=\"margin:0;font-family:sans-serif;background:#fff;color:#111;\">\n <nav style=\"display:flex;align-items:center;justify-content:space-between;padding:14px 32px;border-bottom:1px solid #eee;\">\n <span style=\"font-weight:700;font-size:18px;\">DevDigest</span>\n <div style=\"display:flex;gap:24px;font-size:14px;color:#555;\">\n <a href=\"#\" style=\"text-decoration:none;color:#555;\">Articles</a>\n <a href=\"#\" style=\"text-decoration:none;color:#555;\">Newsletter</a>\n <a href=\"#\" style=\"text-decoration:none;color:#555;\">Jobs</a>\n </div>\n </nav>\n <div style=\"display:flex;max-width:1000px;margin:40px auto;padding:0 20px;gap:48px;\">\n <main style=\"flex:2;\">\n <span style=\"background:#011d1d;color:#23d9d9;font-size:11px;font-weight:700;padding:3px 10px;border-radius:4px;\">RUST</span>\n <h1 style=\"font-size:28px;line-height:1.3;margin:12px 0 20px;\">Why Rust is Winning the Systems Programming War</h1>\n <p style=\"font-size:14px;color:#888;margin-bottom:24px;\">By <strong style=\"color:#555;\">Alex Kim</strong> \u00b7 8 min read \u00b7 Apr 8, 2026</p>\n <p style=\"line-height:1.8;color:#333;margin-bottom:18px;\">Memory safety without garbage collection was once considered impossible. Rust has proved the skeptics wrong, and major tech companies are taking notice.</p>\n <p style=\"line-height:1.8;color:#333;margin-bottom:18px;\">The Linux kernel, Android, and the Windows kernel have all started incorporating Rust. This isn't a trend \u2014 it's a fundamental shift in how critical infrastructure is built.</p>\n <h2 style=\"font-size:20px;margin:32px 0 12px;\">The Ownership Model</h2>\n <p style=\"line-height:1.8;color:#333;\">Rust's ownership system enforces memory safety at compile time. Every value has exactly one owner, and the compiler ensures that references never outlive their data.</p>\n </main>\n <aside style=\"flex:1;\">\n <div style=\"background:#060504;border-radius:10px;padding:20px;margin-bottom:24px;\">\n <h3 style=\"margin:0 0 14px;font-size:15px;\">Trending</h3>\n <div style=\"font-size:13px;color:#555;line-height:2.2;border-top:1px solid #eee;padding-top:12px;\">\n <p style=\"margin:0;\">1. Go vs Rust in 2026</p>\n <p style=\"margin:0;\">2. The React Server Components Guide</p>\n <p style=\"margin:0;\">3. Postgres vs SQLite at scale</p>\n <p style=\"margin:0;\">4. Building your own LLM</p>\n </div>\n </div>\n <div style=\"background:#121601;border-radius:10px;padding:20px;\">\n <h3 style=\"margin:0 0 8px;font-size:15px;color:#b0b91a;\">Newsletter</h3>\n <p style=\"font-size:13px;color:#555;margin:0 0 12px;\">Weekly digest of the best dev articles.</p>\n <input placeholder=\"your@email.com\" style=\"width:100%;box-sizing:border-box;padding:8px 12px;border:1px solid #3b4a02;border-radius:6px;font-size:13px;margin-bottom:8px;\">\n <button style=\"width:100%;padding:8px;background:#b0b91a;color:#fff;border:none;border-radius:6px;font-size:13px;cursor:pointer;\">Subscribe</button>\n </div>\n </aside>\n </div>\n</body>\n</html>\n"}, {"name": "no_style", "rewards": {"format": 0.5, "validity": 1.0, "structural": 0.5, "text_block": 0.2429, "position": 0.7638, "color": 0.6934, "clip": 0.4923, "ssim": 0.3893, "total": 0.4861}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/8/no_style.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Article</title></head>\n<body>\n <nav>\n <span>DevDigest</span>\n <div>\n <a href=\"#\">Articles</a>\n <a href=\"#\">Newsletter</a>\n <a href=\"#\">Jobs</a>\n </div>\n </nav>\n <div>\n <main>\n <span>RUST</span>\n <h1>Why Rust is Winning the Systems Programming War</h1>\n <p>By <strong>Alex Kim</strong> \u00b7 8 min read \u00b7 Apr 8, 2026</p>\n <p>Memory safety without garbage collection was once considered impossible. Rust has proved the skeptics wrong, and major tech companies are taking notice.</p>\n <p>The Linux kernel, Android, and the Windows kernel have all started incorporating Rust. This isn't a trend \u2014 it's a fundamental shift in how critical infrastructure is built.</p>\n <h2>The Ownership Model</h2>\n <p>Rust's ownership system enforces memory safety at compile time. Every value has exactly one owner, and the compiler ensures that references never outlive their data.</p>\n </main>\n <aside>\n <div>\n <h3>Trending</h3>\n <div>\n <p>1. Go vs Rust in 2026</p>\n <p>2. The React Server Components Guide</p>\n <p>3. Postgres vs SQLite at scale</p>\n <p>4. Building your own LLM</p>\n </div>\n </div>\n <div>\n <h3>Newsletter</h3>\n <p>Weekly digest of the best dev articles.</p>\n <input placeholder=\"your@email.com\">\n <button>Subscribe</button>\n </div>\n </aside>\n </div>\n</body>\n</html>\n"}, {"name": "half_styled", "rewards": {"format": 0.5, "validity": 1.0, "structural": 0.875, "text_block": 0.3561, "position": 0.919, "color": 0.7781, "clip": 0.0319, "ssim": 0.4926, "total": 0.4691}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/8/half_styled.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Article</title></head>\n<body style=\"margin:0; background:#fff\">\n <nav style=\"display:flex; justify-content:space-between; border-bottom:1px solid #eee\">\n <span style=\"font-weight:700\">DevDigest</span>\n <div style=\"display:flex; font-size:14px\">\n <a href=\"#\" style=\"text-decoration:none\">Articles</a>\n <a href=\"#\" style=\"text-decoration:none\">Newsletter</a>\n <a href=\"#\" style=\"text-decoration:none\">Jobs</a>\n </div>\n </nav>\n <div style=\"display:flex; margin:40px auto; gap:48px\">\n <main style=\"flex:2\">\n <span style=\"background:#fee2e2; font-size:11px; padding:3px 10px\">RUST</span>\n <h1 style=\"font-size:28px; margin:12px 0 20px\">Why Rust is Winning the Systems Programming War</h1>\n <p style=\"font-size:14px; margin-bottom:24px\">By <strong style=\"color:#555\">Alex Kim</strong> \u00b7 8 min read \u00b7 Apr 8, 2026</p>\n <p style=\"line-height:1.8; margin-bottom:18px\">Memory safety without garbage collection was once considered impossible. Rust has proved the skeptics wrong, and major tech companies are taking notice.</p>\n <p style=\"line-height:1.8; margin-bottom:18px\">The Linux kernel, Android, and the Windows kernel have all started incorporating Rust. This isn't a trend \u2014 it's a fundamental shift in how critical infrastructure is built.</p>\n <h2 style=\"font-size:20px\">The Ownership Model</h2>\n <p style=\"line-height:1.8\">Rust's ownership system enforces memory safety at compile time. Every value has exactly one owner, and the compiler ensures that references never outlive their data.</p>\n </main>\n <aside style=\"flex:1\">\n <div style=\"background:#f9fafb; padding:20px\">\n <h3 style=\"margin:0 0 14px\">Trending</h3>\n <div style=\"font-size:13px; line-height:2.2; padding-top:12px\">\n <p style=\"margin:0\">1. Go vs Rust in 2026</p>\n <p style=\"margin:0\">2. The React Server Components Guide</p>\n <p style=\"margin:0\">3. Postgres vs SQLite at scale</p>\n <p style=\"margin:0\">4. Building your own LLM</p>\n </div>\n </div>\n <div style=\"background:#ede9fe; padding:20px\">\n <h3 style=\"margin:0 0 8px; color:#4f46e5\">Newsletter</h3>\n <p style=\"font-size:13px; margin:0 0 12px\">Weekly digest of the best dev articles.</p>\n <input placeholder=\"your@email.com\" style=\"width:100%; padding:8px 12px; border-radius:6px; margin-bottom:8px\">\n <button style=\"width:100%; background:#4f46e5; border:none; font-size:13px\">Subscribe</button>\n </div>\n </aside>\n </div>\n</body>\n</html>\n"}, {"name": "no_layout", "rewards": {"format": 0.5, "validity": 1.0, "structural": 0.7708, "text_block": 0.2471, "position": 0.7389, "color": 0.7141, "clip": 0.2799, "ssim": 0.3971, "total": 0.4529}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/8/no_layout.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Article</title></head>\n<body style=\"font-family:sans-serif; background:#fff; color:#111\">\n <nav style=\"border-bottom:1px solid #eee\">\n <span style=\"font-weight:700; font-size:18px\">DevDigest</span>\n <div style=\"gap:24px; font-size:14px; color:#555\">\n <a href=\"#\" style=\"text-decoration:none; color:#555\">Articles</a>\n <a href=\"#\" style=\"text-decoration:none; color:#555\">Newsletter</a>\n <a href=\"#\" style=\"text-decoration:none; color:#555\">Jobs</a>\n </div>\n </nav>\n <div style=\"max-width:1000px; gap:48px\">\n <main style=\"\">\n <span style=\"background:#fee2e2; color:#dc2626; font-size:11px; font-weight:700\">RUST</span>\n <h1 style=\"font-size:28px; line-height:1.3\">Why Rust is Winning the Systems Programming War</h1>\n <p style=\"font-size:14px; color:#888\">By <strong style=\"color:#555\">Alex Kim</strong> \u00b7 8 min read \u00b7 Apr 8, 2026</p>\n <p style=\"line-height:1.8; color:#333\">Memory safety without garbage collection was once considered impossible. Rust has proved the skeptics wrong, and major tech companies are taking notice.</p>\n <p style=\"line-height:1.8; color:#333\">The Linux kernel, Android, and the Windows kernel have all started incorporating Rust. This isn't a trend \u2014 it's a fundamental shift in how critical infrastructure is built.</p>\n <h2 style=\"font-size:20px\">The Ownership Model</h2>\n <p style=\"line-height:1.8; color:#333\">Rust's ownership system enforces memory safety at compile time. Every value has exactly one owner, and the compiler ensures that references never outlive their data.</p>\n </main>\n <aside style=\"\">\n <div style=\"background:#f9fafb\">\n <h3 style=\"font-size:15px\">Trending</h3>\n <div style=\"font-size:13px; color:#555; line-height:2.2; border-top:1px solid #eee\">\n <p style=\"\">1. Go vs Rust in 2026</p>\n <p style=\"\">2. The React Server Components Guide</p>\n <p style=\"\">3. Postgres vs SQLite at scale</p>\n <p style=\"\">4. Building your own LLM</p>\n </div>\n </div>\n <div style=\"background:#ede9fe\">\n <h3 style=\"font-size:15px; color:#4f46e5\">Newsletter</h3>\n <p style=\"font-size:13px; color:#555\">Weekly digest of the best dev articles.</p>\n <input placeholder=\"your@email.com\" style=\"border:1px solid #c4b5fd; font-size:13px\">\n <button style=\"background:#4f46e5; color:#fff; border:none; font-size:13px; cursor:pointer\">Subscribe</button>\n </div>\n </aside>\n </div>\n</body>\n</html>\n"}, {"name": "blank", "rewards": {"format": 0.5, "validity": 0.75, "structural": 0.1261, "text_block": 0.0, "position": 0.0, "color": 0.6864, "clip": 0.0, "ssim": 0.5815, "total": 0.0}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/8/blank.png", "html": "<!DOCTYPE html><html><head><title>Page</title></head><body style=\"background:#fff;\"></body></html>"}]}, {"id": 9, "difficulty": "medium", "source": "medium/4", "reference_image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/9/reference.png", "reference_html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Settings</title></head>\n<body style=\"margin:0;font-family:sans-serif;background:#f9fafb;color:#111;display:flex;min-height:100vh;\">\n <aside style=\"width:220px;background:#fff;border-right:1px solid #e5e7eb;padding:24px 0;\">\n <div style=\"padding:0 20px 24px;border-bottom:1px solid #e5e7eb;\">\n <div style=\"display:flex;align-items:center;gap:10px;\">\n <div style=\"width:36px;height:36px;border-radius:50%;background:#4f46e5;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;\">A</div>\n <div><p style=\"margin:0;font-size:13px;font-weight:600;\">Amal Joe</p><p style=\"margin:0;font-size:11px;color:#888;\">Pro Plan</p></div>\n </div>\n </div>\n <nav style=\"padding:12px 0;\">\n <a style=\"display:block;padding:10px 20px;font-size:14px;color:#4f46e5;background:#ede9fe;font-weight:600;text-decoration:none;\">Profile</a>\n <a style=\"display:block;padding:10px 20px;font-size:14px;color:#555;text-decoration:none;\">Security</a>\n <a style=\"display:block;padding:10px 20px;font-size:14px;color:#555;text-decoration:none;\">Notifications</a>\n <a style=\"display:block;padding:10px 20px;font-size:14px;color:#555;text-decoration:none;\">Billing</a>\n <a style=\"display:block;padding:10px 20px;font-size:14px;color:#555;text-decoration:none;\">Integrations</a>\n </nav>\n </aside>\n <main style=\"flex:1;padding:40px;\">\n <h1 style=\"font-size:22px;margin:0 0 6px;\">Profile Settings</h1>\n <p style=\"color:#888;font-size:14px;margin:0 0 32px;\">Manage your personal information.</p>\n <div style=\"background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:28px;max-width:560px;\">\n <div style=\"display:flex;gap:16px;margin-bottom:24px;\">\n <div style=\"flex:1;\"><label style=\"font-size:12px;font-weight:600;color:#444;display:block;margin-bottom:6px;\">First Name</label><input value=\"Amal\" style=\"width:100%;box-sizing:border-box;padding:9px 12px;border:1px solid #e5e7eb;border-radius:6px;font-size:14px;\"></div>\n <div style=\"flex:1;\"><label style=\"font-size:12px;font-weight:600;color:#444;display:block;margin-bottom:6px;\">Last Name</label><input value=\"Joe\" style=\"width:100%;box-sizing:border-box;padding:9px 12px;border:1px solid #e5e7eb;border-radius:6px;font-size:14px;\"></div>\n </div>\n <label style=\"font-size:12px;font-weight:600;color:#444;display:block;margin-bottom:6px;\">Email</label>\n <input value=\"amaljoe88@gmail.com\" style=\"width:100%;box-sizing:border-box;padding:9px 12px;border:1px solid #e5e7eb;border-radius:6px;font-size:14px;margin-bottom:24px;\">\n <label style=\"font-size:12px;font-weight:600;color:#444;display:block;margin-bottom:6px;\">Bio</label>\n <textarea rows=\"3\" style=\"width:100%;box-sizing:border-box;padding:9px 12px;border:1px solid #e5e7eb;border-radius:6px;font-size:14px;margin-bottom:24px;resize:vertical;\">Building AI tools for developers.</textarea>\n <button style=\"padding:10px 24px;background:#4f46e5;color:#fff;border:none;border-radius:6px;font-size:14px;cursor:pointer;\">Save Changes</button>\n </div>\n </main>\n</body>\n</html>\n", "variants": [{"name": "perfect", "rewards": {"format": 0.5, "validity": 1.0, "structural": 1.0, "text_block": 1.0, "position": 1.0, "color": 1.0, "clip": 1.0, "ssim": 1.0, "total": 0.9773}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/9/perfect.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Settings</title></head>\n<body style=\"margin:0;font-family:sans-serif;background:#f9fafb;color:#111;display:flex;min-height:100vh;\">\n <aside style=\"width:220px;background:#fff;border-right:1px solid #e5e7eb;padding:24px 0;\">\n <div style=\"padding:0 20px 24px;border-bottom:1px solid #e5e7eb;\">\n <div style=\"display:flex;align-items:center;gap:10px;\">\n <div style=\"width:36px;height:36px;border-radius:50%;background:#4f46e5;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;\">A</div>\n <div><p style=\"margin:0;font-size:13px;font-weight:600;\">Amal Joe</p><p style=\"margin:0;font-size:11px;color:#888;\">Pro Plan</p></div>\n </div>\n </div>\n <nav style=\"padding:12px 0;\">\n <a style=\"display:block;padding:10px 20px;font-size:14px;color:#4f46e5;background:#ede9fe;font-weight:600;text-decoration:none;\">Profile</a>\n <a style=\"display:block;padding:10px 20px;font-size:14px;color:#555;text-decoration:none;\">Security</a>\n <a style=\"display:block;padding:10px 20px;font-size:14px;color:#555;text-decoration:none;\">Notifications</a>\n <a style=\"display:block;padding:10px 20px;font-size:14px;color:#555;text-decoration:none;\">Billing</a>\n <a style=\"display:block;padding:10px 20px;font-size:14px;color:#555;text-decoration:none;\">Integrations</a>\n </nav>\n </aside>\n <main style=\"flex:1;padding:40px;\">\n <h1 style=\"font-size:22px;margin:0 0 6px;\">Profile Settings</h1>\n <p style=\"color:#888;font-size:14px;margin:0 0 32px;\">Manage your personal information.</p>\n <div style=\"background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:28px;max-width:560px;\">\n <div style=\"display:flex;gap:16px;margin-bottom:24px;\">\n <div style=\"flex:1;\"><label style=\"font-size:12px;font-weight:600;color:#444;display:block;margin-bottom:6px;\">First Name</label><input value=\"Amal\" style=\"width:100%;box-sizing:border-box;padding:9px 12px;border:1px solid #e5e7eb;border-radius:6px;font-size:14px;\"></div>\n <div style=\"flex:1;\"><label style=\"font-size:12px;font-weight:600;color:#444;display:block;margin-bottom:6px;\">Last Name</label><input value=\"Joe\" style=\"width:100%;box-sizing:border-box;padding:9px 12px;border:1px solid #e5e7eb;border-radius:6px;font-size:14px;\"></div>\n </div>\n <label style=\"font-size:12px;font-weight:600;color:#444;display:block;margin-bottom:6px;\">Email</label>\n <input value=\"amaljoe88@gmail.com\" style=\"width:100%;box-sizing:border-box;padding:9px 12px;border:1px solid #e5e7eb;border-radius:6px;font-size:14px;margin-bottom:24px;\">\n <label style=\"font-size:12px;font-weight:600;color:#444;display:block;margin-bottom:6px;\">Bio</label>\n <textarea rows=\"3\" style=\"width:100%;box-sizing:border-box;padding:9px 12px;border:1px solid #e5e7eb;border-radius:6px;font-size:14px;margin-bottom:24px;resize:vertical;\">Building AI tools for developers.</textarea>\n <button style=\"padding:10px 24px;background:#4f46e5;color:#fff;border:none;border-radius:6px;font-size:14px;cursor:pointer;\">Save Changes</button>\n </div>\n </main>\n</body>\n</html>\n"}, {"name": "minor_diff", "rewards": {"format": 0.5, "validity": 1.0, "structural": 1.0, "text_block": 1.0, "position": 0.9986, "color": 0.9084, "clip": 0.8873, "ssim": 0.8691, "total": 0.9212}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/9/minor_diff.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Settings</title></head>\n<body style=\"margin:0;font-family:sans-serif;background:#888888;color:#111;display:flex;min-height:100vh;\">\n <aside style=\"width:220px;background:#fff;border-right:1px solid #e5e7eb;padding:24px 0;\">\n <div style=\"padding:0 20px 24px;border-bottom:1px solid #e5e7eb;\">\n <div style=\"display:flex;align-items:center;gap:10px;\">\n <div style=\"width:36px;height:36px;border-radius:50%;background:#4f46e5;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;\">A</div>\n <div><p style=\"margin:0;font-size:9px;font-weight:600;\">Amal Joe</p><p style=\"margin:0;font-size:8px;color:#888;\">Pro Plan</p></div>\n </div>\n </div>\n <nav style=\"padding:12px 0;\">\n <a style=\"display:block;padding:10px 20px;font-size:14px;color:#4f46e5;background:#ede9fe;font-weight:600;text-decoration:none;\">Profile</a>\n <a style=\"display:block;padding:10px 20px;font-size:14px;color:#555;text-decoration:none;\">Security</a>\n <a style=\"display:block;padding:10px 20px;font-size:14px;color:#555;text-decoration:none;\">Notifications</a>\n <a style=\"display:block;padding:10px 20px;font-size:14px;color:#555;text-decoration:none;\">Billing</a>\n <a style=\"display:block;padding:10px 20px;font-size:14px;color:#555;text-decoration:none;\">Integrations</a>\n </nav>\n </aside>\n <main style=\"flex:1;padding:40px;\">\n <h1 style=\"font-size:22px;margin:0 0 6px;\">Profile Settings</h1>\n <p style=\"color:#888;font-size:14px;margin:0 0 32px;\">Manage your personal information.</p>\n <div style=\"background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:28px;max-width:560px;\">\n <div style=\"display:flex;gap:16px;margin-bottom:24px;\">\n <div style=\"flex:1;\"><label style=\"font-size:12px;font-weight:600;color:#444;display:block;margin-bottom:6px;\">First Name</label><input value=\"Amal\" style=\"width:100%;box-sizing:border-box;padding:9px 12px;border:1px solid #e5e7eb;border-radius:6px;font-size:14px;\"></div>\n <div style=\"flex:1;\"><label style=\"font-size:12px;font-weight:600;color:#444;display:block;margin-bottom:6px;\">Last Name</label><input value=\"Joe\" style=\"width:100%;box-sizing:border-box;padding:9px 12px;border:1px solid #e5e7eb;border-radius:6px;font-size:14px;\"></div>\n </div>\n <label style=\"font-size:12px;font-weight:600;color:#444;display:block;margin-bottom:6px;\">Email</label>\n <input value=\"amaljoe88@gmail.com\" style=\"width:100%;box-sizing:border-box;padding:9px 12px;border:1px solid #e5e7eb;border-radius:6px;font-size:14px;margin-bottom:24px;\">\n <label style=\"font-size:12px;font-weight:600;color:#444;display:block;margin-bottom:6px;\">Bio</label>\n <textarea rows=\"3\" style=\"width:100%;box-sizing:border-box;padding:9px 12px;border:1px solid #e5e7eb;border-radius:6px;font-size:14px;margin-bottom:24px;resize:vertical;\">Building AI tools for developers.</textarea>\n <button style=\"padding:10px 24px;background:#4f46e5;color:#fff;border:none;border-radius:6px;font-size:14px;cursor:pointer;\">Save Changes</button>\n </div>\n </main>\n</body>\n</html>\n"}, {"name": "bad_colors", "rewards": {"format": 0.5, "validity": 1.0, "structural": 1.0, "text_block": 1.0, "position": 1.0, "color": 0.0421, "clip": 0.4695, "ssim": 0.5687, "total": 0.6673}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/9/bad_colors.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Settings</title></head>\n<body style=\"margin:0;font-family:sans-serif;background:#060504;color:#111;display:flex;min-height:100vh;\">\n <aside style=\"width:220px;background:#fff;border-right:1px solid #1a1814;padding:24px 0;\">\n <div style=\"padding:0 20px 24px;border-bottom:1px solid #1a1814;\">\n <div style=\"display:flex;align-items:center;gap:10px;\">\n <div style=\"width:36px;height:36px;border-radius:50%;background:#b0b91a;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;\">A</div>\n <div><p style=\"margin:0;font-size:13px;font-weight:600;\">Amal Joe</p><p style=\"margin:0;font-size:11px;color:#888;\">Pro Plan</p></div>\n </div>\n </div>\n <nav style=\"padding:12px 0;\">\n <a style=\"display:block;padding:10px 20px;font-size:14px;color:#b0b91a;background:#121601;font-weight:600;text-decoration:none;\">Profile</a>\n <a style=\"display:block;padding:10px 20px;font-size:14px;color:#555;text-decoration:none;\">Security</a>\n <a style=\"display:block;padding:10px 20px;font-size:14px;color:#555;text-decoration:none;\">Notifications</a>\n <a style=\"display:block;padding:10px 20px;font-size:14px;color:#555;text-decoration:none;\">Billing</a>\n <a style=\"display:block;padding:10px 20px;font-size:14px;color:#555;text-decoration:none;\">Integrations</a>\n </nav>\n </aside>\n <main style=\"flex:1;padding:40px;\">\n <h1 style=\"font-size:22px;margin:0 0 6px;\">Profile Settings</h1>\n <p style=\"color:#888;font-size:14px;margin:0 0 32px;\">Manage your personal information.</p>\n <div style=\"background:#fff;border:1px solid #1a1814;border-radius:10px;padding:28px;max-width:560px;\">\n <div style=\"display:flex;gap:16px;margin-bottom:24px;\">\n <div style=\"flex:1;\"><label style=\"font-size:12px;font-weight:600;color:#444;display:block;margin-bottom:6px;\">First Name</label><input value=\"Amal\" style=\"width:100%;box-sizing:border-box;padding:9px 12px;border:1px solid #1a1814;border-radius:6px;font-size:14px;\"></div>\n <div style=\"flex:1;\"><label style=\"font-size:12px;font-weight:600;color:#444;display:block;margin-bottom:6px;\">Last Name</label><input value=\"Joe\" style=\"width:100%;box-sizing:border-box;padding:9px 12px;border:1px solid #1a1814;border-radius:6px;font-size:14px;\"></div>\n </div>\n <label style=\"font-size:12px;font-weight:600;color:#444;display:block;margin-bottom:6px;\">Email</label>\n <input value=\"amaljoe88@gmail.com\" style=\"width:100%;box-sizing:border-box;padding:9px 12px;border:1px solid #1a1814;border-radius:6px;font-size:14px;margin-bottom:24px;\">\n <label style=\"font-size:12px;font-weight:600;color:#444;display:block;margin-bottom:6px;\">Bio</label>\n <textarea rows=\"3\" style=\"width:100%;box-sizing:border-box;padding:9px 12px;border:1px solid #1a1814;border-radius:6px;font-size:14px;margin-bottom:24px;resize:vertical;\">Building AI tools for developers.</textarea>\n <button style=\"padding:10px 24px;background:#b0b91a;color:#fff;border:none;border-radius:6px;font-size:14px;cursor:pointer;\">Save Changes</button>\n </div>\n </main>\n</body>\n</html>\n"}, {"name": "half_styled", "rewards": {"format": 0.5, "validity": 1.0, "structural": 0.84, "text_block": 0.2532, "position": 0.9074, "color": 0.6085, "clip": 0.5724, "ssim": 0.6374, "total": 0.5579}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/9/half_styled.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Settings</title></head>\n<body style=\"margin:0; background:#f9fafb; display:flex\">\n <aside style=\"width:220px; border-right:1px solid #e5e7eb\">\n <div style=\"padding:0 20px 24px\">\n <div style=\"display:flex; gap:10px\">\n <div style=\"width:36px; border-radius:50%; color:#fff; align-items:center; font-weight:700\">A</div>\n <div><p style=\"margin:0; font-weight:600\">Amal Joe</p><p style=\"margin:0; color:#888\">Pro Plan</p></div>\n </div>\n </div>\n <nav style=\"padding:12px 0\">\n <a style=\"display:block; font-size:14px; background:#ede9fe; text-decoration:none\">Profile</a>\n <a style=\"display:block; font-size:14px; text-decoration:none\">Security</a>\n <a style=\"display:block; font-size:14px; text-decoration:none\">Notifications</a>\n <a style=\"display:block; font-size:14px; text-decoration:none\">Billing</a>\n <a style=\"display:block; font-size:14px; text-decoration:none\">Integrations</a>\n </nav>\n </aside>\n <main style=\"flex:1\">\n <h1 style=\"font-size:22px\">Profile Settings</h1>\n <p style=\"color:#888; margin:0 0 32px\">Manage your personal information.</p>\n <div style=\"background:#fff; border-radius:10px; max-width:560px\">\n <div style=\"display:flex; margin-bottom:24px\">\n <div style=\"flex:1\"><label style=\"font-size:12px; color:#444; margin-bottom:6px\">First Name</label><input value=\"Amal\" style=\"width:100%; padding:9px 12px; border-radius:6px\"></div>\n <div style=\"flex:1\"><label style=\"font-size:12px; color:#444; margin-bottom:6px\">Last Name</label><input value=\"Joe\" style=\"width:100%; padding:9px 12px; border-radius:6px\"></div>\n </div>\n <label style=\"font-size:12px; color:#444; margin-bottom:6px\">Email</label>\n <input value=\"amaljoe88@gmail.com\" style=\"width:100%; padding:9px 12px; border-radius:6px; margin-bottom:24px\">\n <label style=\"font-size:12px; color:#444; margin-bottom:6px\">Bio</label>\n <textarea rows=\"3\" style=\"width:100%; padding:9px 12px; border-radius:6px; margin-bottom:24px\">Building AI tools for developers.</textarea>\n <button style=\"padding:10px 24px; color:#fff; border-radius:6px; cursor:pointer\">Save Changes</button>\n </div>\n </main>\n</body>\n</html>\n"}, {"name": "no_layout", "rewards": {"format": 0.5, "validity": 1.0, "structural": 0.76, "text_block": 0.261, "position": 0.8681, "color": 0.6142, "clip": 0.5201, "ssim": 0.6888, "total": 0.5487}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/9/no_layout.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Settings</title></head>\n<body style=\"font-family:sans-serif; background:#f9fafb; color:#111\">\n <aside style=\"background:#fff; border-right:1px solid #e5e7eb\">\n <div style=\"border-bottom:1px solid #e5e7eb\">\n <div style=\"gap:10px\">\n <div style=\"background:#4f46e5; color:#fff; font-weight:700\">A</div>\n <div><p style=\"font-size:13px; font-weight:600\">Amal Joe</p><p style=\"font-size:11px; color:#888\">Pro Plan</p></div>\n </div>\n </div>\n <nav style=\"\">\n <a style=\"font-size:14px; color:#4f46e5; background:#ede9fe; font-weight:600; text-decoration:none\">Profile</a>\n <a style=\"font-size:14px; color:#555; text-decoration:none\">Security</a>\n <a style=\"font-size:14px; color:#555; text-decoration:none\">Notifications</a>\n <a style=\"font-size:14px; color:#555; text-decoration:none\">Billing</a>\n <a style=\"font-size:14px; color:#555; text-decoration:none\">Integrations</a>\n </nav>\n </aside>\n <main style=\"\">\n <h1 style=\"font-size:22px\">Profile Settings</h1>\n <p style=\"color:#888; font-size:14px\">Manage your personal information.</p>\n <div style=\"background:#fff; border:1px solid #e5e7eb; max-width:560px\">\n <div style=\"gap:16px\">\n <div style=\"\"><label style=\"font-size:12px; font-weight:600; color:#444\">First Name</label><input value=\"Amal\" style=\"border:1px solid #e5e7eb; font-size:14px\"></div>\n <div style=\"\"><label style=\"font-size:12px; font-weight:600; color:#444\">Last Name</label><input value=\"Joe\" style=\"border:1px solid #e5e7eb; font-size:14px\"></div>\n </div>\n <label style=\"font-size:12px; font-weight:600; color:#444\">Email</label>\n <input value=\"amaljoe88@gmail.com\" style=\"border:1px solid #e5e7eb; font-size:14px\">\n <label style=\"font-size:12px; font-weight:600; color:#444\">Bio</label>\n <textarea rows=\"3\" style=\"border:1px solid #e5e7eb; font-size:14px; resize:vertical\">Building AI tools for developers.</textarea>\n <button style=\"background:#4f46e5; color:#fff; border:none; font-size:14px; cursor:pointer\">Save Changes</button>\n </div>\n </main>\n</body>\n</html>\n"}, {"name": "no_style", "rewards": {"format": 0.5, "validity": 1.0, "structural": 0.5, "text_block": 0.2587, "position": 0.8676, "color": 0.5775, "clip": 0.0528, "ssim": 0.6803, "total": 0.4239}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/9/no_style.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Settings</title></head>\n<body>\n <aside>\n <div>\n <div>\n <div>A</div>\n <div><p>Amal Joe</p><p>Pro Plan</p></div>\n </div>\n </div>\n <nav>\n <a>Profile</a>\n <a>Security</a>\n <a>Notifications</a>\n <a>Billing</a>\n <a>Integrations</a>\n </nav>\n </aside>\n <main>\n <h1>Profile Settings</h1>\n <p>Manage your personal information.</p>\n <div>\n <div>\n <div><label>First Name</label><input value=\"Amal\"></div>\n <div><label>Last Name</label><input value=\"Joe\"></div>\n </div>\n <label>Email</label>\n <input value=\"amaljoe88@gmail.com\">\n <label>Bio</label>\n <textarea rows=\"3\">Building AI tools for developers.</textarea>\n <button>Save Changes</button>\n </div>\n </main>\n</body>\n</html>\n"}, {"name": "blank", "rewards": {"format": 0.5, "validity": 0.75, "structural": 0.1253, "text_block": 0.0, "position": 0.0, "color": 0.5899, "clip": 0.0, "ssim": 0.8312, "total": 0.0}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/9/blank.png", "html": "<!DOCTYPE html><html><head><title>Page</title></head><body style=\"background:#fff;\"></body></html>"}]}, {"id": 10, "difficulty": "hard", "source": "hard/0", "reference_image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/10/reference.png", "reference_html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Dashboard</title></head>\n<body style=\"margin:0;font-family:sans-serif;background:#0f172a;color:#e2e8f0;display:flex;min-height:100vh;\">\n <aside style=\"width:200px;background:#1e293b;padding:24px 0;flex-shrink:0;\">\n <div style=\"padding:0 20px 24px;font-size:18px;font-weight:700;color:#fff;border-bottom:1px solid #334155;\">\u26a1 Pulsar</div>\n <nav style=\"padding:16px 0;\">\n <a style=\"display:flex;align-items:center;gap:10px;padding:10px 20px;font-size:13px;color:#fff;background:#334155;text-decoration:none;margin-bottom:2px;\">\ud83d\udcca Overview</a>\n <a style=\"display:flex;align-items:center;gap:10px;padding:10px 20px;font-size:13px;color:#94a3b8;text-decoration:none;margin-bottom:2px;\">\ud83d\ude80 Deployments</a>\n <a style=\"display:flex;align-items:center;gap:10px;padding:10px 20px;font-size:13px;color:#94a3b8;text-decoration:none;margin-bottom:2px;\">\ud83d\udcc1 Projects</a>\n <a style=\"display:flex;align-items:center;gap:10px;padding:10px 20px;font-size:13px;color:#94a3b8;text-decoration:none;margin-bottom:2px;\">\ud83d\udc65 Team</a>\n <a style=\"display:flex;align-items:center;gap:10px;padding:10px 20px;font-size:13px;color:#94a3b8;text-decoration:none;\">\u2699\ufe0f Settings</a>\n </nav>\n </aside>\n <main style=\"flex:1;padding:32px;\">\n <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:28px;\">\n <h1 style=\"margin:0;font-size:22px;\">Overview</h1>\n <button style=\"padding:9px 18px;background:#4f46e5;color:#fff;border:none;border-radius:6px;font-size:13px;cursor:pointer;\">+ New Project</button>\n </div>\n <div style=\"display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px;\">\n <div style=\"background:#1e293b;border-radius:10px;padding:20px;\"><p style=\"margin:0 0 8px;font-size:12px;color:#94a3b8;\">DEPLOYMENTS</p><p style=\"margin:0;font-size:28px;font-weight:700;\">1,284</p><p style=\"margin:4px 0 0;font-size:12px;color:#34d399;\">\u2191 12% this week</p></div>\n <div style=\"background:#1e293b;border-radius:10px;padding:20px;\"><p style=\"margin:0 0 8px;font-size:12px;color:#94a3b8;\">SUCCESS RATE</p><p style=\"margin:0;font-size:28px;font-weight:700;\">99.2%</p><p style=\"margin:4px 0 0;font-size:12px;color:#34d399;\">\u2191 0.3% this week</p></div>\n <div style=\"background:#1e293b;border-radius:10px;padding:20px;\"><p style=\"margin:0 0 8px;font-size:12px;color:#94a3b8;\">AVG BUILD TIME</p><p style=\"margin:0;font-size:28px;font-weight:700;\">28s</p><p style=\"margin:4px 0 0;font-size:12px;color:#fb923c;\">\u2193 3s slower</p></div>\n <div style=\"background:#1e293b;border-radius:10px;padding:20px;\"><p style=\"margin:0 0 8px;font-size:12px;color:#94a3b8;\">ACTIVE PROJECTS</p><p style=\"margin:0;font-size:28px;font-weight:700;\">47</p><p style=\"margin:4px 0 0;font-size:12px;color:#34d399;\">\u2191 3 new</p></div>\n </div>\n <div style=\"background:#1e293b;border-radius:10px;padding:24px;\">\n <h2 style=\"margin:0 0 20px;font-size:16px;\">Recent Deployments</h2>\n <table style=\"width:100%;border-collapse:collapse;font-size:13px;\">\n <thead><tr style=\"color:#64748b;border-bottom:1px solid #334155;\"><th style=\"text-align:left;padding:8px 0;\">Project</th><th style=\"text-align:left;padding:8px 0;\">Branch</th><th style=\"text-align:left;padding:8px 0;\">Status</th><th style=\"text-align:left;padding:8px 0;\">Time</th></tr></thead>\n <tbody>\n <tr style=\"border-bottom:1px solid #1e293b;\"><td style=\"padding:12px 0;color:#e2e8f0;\">api-service</td><td style=\"padding:12px 0;color:#94a3b8;\">main</td><td style=\"padding:12px 0;\"><span style=\"background:#dcfce7;color:#16a34a;padding:3px 10px;border-radius:20px;font-size:11px;\">\u2713 Success</span></td><td style=\"padding:12px 0;color:#94a3b8;\">2 min ago</td></tr>\n <tr style=\"border-bottom:1px solid #1e293b;\"><td style=\"padding:12px 0;color:#e2e8f0;\">web-frontend</td><td style=\"padding:12px 0;color:#94a3b8;\">feat/auth</td><td style=\"padding:12px 0;\"><span style=\"background:#fef3c7;color:#d97706;padding:3px 10px;border-radius:20px;font-size:11px;\">\u27f3 Building</span></td><td style=\"padding:12px 0;color:#94a3b8;\">5 min ago</td></tr>\n <tr><td style=\"padding:12px 0;color:#e2e8f0;\">ml-pipeline</td><td style=\"padding:12px 0;color:#94a3b8;\">main</td><td style=\"padding:12px 0;\"><span style=\"background:#fee2e2;color:#dc2626;padding:3px 10px;border-radius:20px;font-size:11px;\">\u2717 Failed</span></td><td style=\"padding:12px 0;color:#94a3b8;\">18 min ago</td></tr>\n </tbody>\n </table>\n </div>\n </main>\n</body>\n</html>\n", "variants": [{"name": "perfect", "rewards": {"format": 0.5, "validity": 1.0, "structural": 1.0, "text_block": 1.0, "position": 1.0, "color": 1.0, "clip": 1.0, "ssim": 1.0, "total": 0.9773}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/10/perfect.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Dashboard</title></head>\n<body style=\"margin:0;font-family:sans-serif;background:#0f172a;color:#e2e8f0;display:flex;min-height:100vh;\">\n <aside style=\"width:200px;background:#1e293b;padding:24px 0;flex-shrink:0;\">\n <div style=\"padding:0 20px 24px;font-size:18px;font-weight:700;color:#fff;border-bottom:1px solid #334155;\">\u26a1 Pulsar</div>\n <nav style=\"padding:16px 0;\">\n <a style=\"display:flex;align-items:center;gap:10px;padding:10px 20px;font-size:13px;color:#fff;background:#334155;text-decoration:none;margin-bottom:2px;\">\ud83d\udcca Overview</a>\n <a style=\"display:flex;align-items:center;gap:10px;padding:10px 20px;font-size:13px;color:#94a3b8;text-decoration:none;margin-bottom:2px;\">\ud83d\ude80 Deployments</a>\n <a style=\"display:flex;align-items:center;gap:10px;padding:10px 20px;font-size:13px;color:#94a3b8;text-decoration:none;margin-bottom:2px;\">\ud83d\udcc1 Projects</a>\n <a style=\"display:flex;align-items:center;gap:10px;padding:10px 20px;font-size:13px;color:#94a3b8;text-decoration:none;margin-bottom:2px;\">\ud83d\udc65 Team</a>\n <a style=\"display:flex;align-items:center;gap:10px;padding:10px 20px;font-size:13px;color:#94a3b8;text-decoration:none;\">\u2699\ufe0f Settings</a>\n </nav>\n </aside>\n <main style=\"flex:1;padding:32px;\">\n <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:28px;\">\n <h1 style=\"margin:0;font-size:22px;\">Overview</h1>\n <button style=\"padding:9px 18px;background:#4f46e5;color:#fff;border:none;border-radius:6px;font-size:13px;cursor:pointer;\">+ New Project</button>\n </div>\n <div style=\"display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px;\">\n <div style=\"background:#1e293b;border-radius:10px;padding:20px;\"><p style=\"margin:0 0 8px;font-size:12px;color:#94a3b8;\">DEPLOYMENTS</p><p style=\"margin:0;font-size:28px;font-weight:700;\">1,284</p><p style=\"margin:4px 0 0;font-size:12px;color:#34d399;\">\u2191 12% this week</p></div>\n <div style=\"background:#1e293b;border-radius:10px;padding:20px;\"><p style=\"margin:0 0 8px;font-size:12px;color:#94a3b8;\">SUCCESS RATE</p><p style=\"margin:0;font-size:28px;font-weight:700;\">99.2%</p><p style=\"margin:4px 0 0;font-size:12px;color:#34d399;\">\u2191 0.3% this week</p></div>\n <div style=\"background:#1e293b;border-radius:10px;padding:20px;\"><p style=\"margin:0 0 8px;font-size:12px;color:#94a3b8;\">AVG BUILD TIME</p><p style=\"margin:0;font-size:28px;font-weight:700;\">28s</p><p style=\"margin:4px 0 0;font-size:12px;color:#fb923c;\">\u2193 3s slower</p></div>\n <div style=\"background:#1e293b;border-radius:10px;padding:20px;\"><p style=\"margin:0 0 8px;font-size:12px;color:#94a3b8;\">ACTIVE PROJECTS</p><p style=\"margin:0;font-size:28px;font-weight:700;\">47</p><p style=\"margin:4px 0 0;font-size:12px;color:#34d399;\">\u2191 3 new</p></div>\n </div>\n <div style=\"background:#1e293b;border-radius:10px;padding:24px;\">\n <h2 style=\"margin:0 0 20px;font-size:16px;\">Recent Deployments</h2>\n <table style=\"width:100%;border-collapse:collapse;font-size:13px;\">\n <thead><tr style=\"color:#64748b;border-bottom:1px solid #334155;\"><th style=\"text-align:left;padding:8px 0;\">Project</th><th style=\"text-align:left;padding:8px 0;\">Branch</th><th style=\"text-align:left;padding:8px 0;\">Status</th><th style=\"text-align:left;padding:8px 0;\">Time</th></tr></thead>\n <tbody>\n <tr style=\"border-bottom:1px solid #1e293b;\"><td style=\"padding:12px 0;color:#e2e8f0;\">api-service</td><td style=\"padding:12px 0;color:#94a3b8;\">main</td><td style=\"padding:12px 0;\"><span style=\"background:#dcfce7;color:#16a34a;padding:3px 10px;border-radius:20px;font-size:11px;\">\u2713 Success</span></td><td style=\"padding:12px 0;color:#94a3b8;\">2 min ago</td></tr>\n <tr style=\"border-bottom:1px solid #1e293b;\"><td style=\"padding:12px 0;color:#e2e8f0;\">web-frontend</td><td style=\"padding:12px 0;color:#94a3b8;\">feat/auth</td><td style=\"padding:12px 0;\"><span style=\"background:#fef3c7;color:#d97706;padding:3px 10px;border-radius:20px;font-size:11px;\">\u27f3 Building</span></td><td style=\"padding:12px 0;color:#94a3b8;\">5 min ago</td></tr>\n <tr><td style=\"padding:12px 0;color:#e2e8f0;\">ml-pipeline</td><td style=\"padding:12px 0;color:#94a3b8;\">main</td><td style=\"padding:12px 0;\"><span style=\"background:#fee2e2;color:#dc2626;padding:3px 10px;border-radius:20px;font-size:11px;\">\u2717 Failed</span></td><td style=\"padding:12px 0;color:#94a3b8;\">18 min ago</td></tr>\n </tbody>\n </table>\n </div>\n </main>\n</body>\n</html>\n"}, {"name": "minor_diff", "rewards": {"format": 0.5, "validity": 1.0, "structural": 1.0, "text_block": 1.0, "position": 0.9983, "color": 0.7702, "clip": 0.9296, "ssim": 0.6485, "total": 0.8818}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/10/minor_diff.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Dashboard</title></head>\n<body style=\"margin:0;font-family:sans-serif;background:#888888;color:#e2e8f0;display:flex;min-height:100vh;\">\n <aside style=\"width:200px;background:#1e293b;padding:24px 0;flex-shrink:0;\">\n <div style=\"padding:0 20px 24px;font-size:14px;font-weight:700;color:#fff;border-bottom:1px solid #334155;\">\u26a1 Pulsar</div>\n <nav style=\"padding:16px 0;\">\n <a style=\"display:flex;align-items:center;gap:10px;padding:10px 20px;font-size:9px;color:#fff;background:#334155;text-decoration:none;margin-bottom:2px;\">\ud83d\udcca Overview</a>\n <a style=\"display:flex;align-items:center;gap:10px;padding:10px 20px;font-size:13px;color:#94a3b8;text-decoration:none;margin-bottom:2px;\">\ud83d\ude80 Deployments</a>\n <a style=\"display:flex;align-items:center;gap:10px;padding:10px 20px;font-size:13px;color:#94a3b8;text-decoration:none;margin-bottom:2px;\">\ud83d\udcc1 Projects</a>\n <a style=\"display:flex;align-items:center;gap:10px;padding:10px 20px;font-size:13px;color:#94a3b8;text-decoration:none;margin-bottom:2px;\">\ud83d\udc65 Team</a>\n <a style=\"display:flex;align-items:center;gap:10px;padding:10px 20px;font-size:13px;color:#94a3b8;text-decoration:none;\">\u2699\ufe0f Settings</a>\n </nav>\n </aside>\n <main style=\"flex:1;padding:32px;\">\n <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:28px;\">\n <h1 style=\"margin:0;font-size:22px;\">Overview</h1>\n <button style=\"padding:9px 18px;background:#4f46e5;color:#fff;border:none;border-radius:6px;font-size:13px;cursor:pointer;\">+ New Project</button>\n </div>\n <div style=\"display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px;\">\n <div style=\"background:#1e293b;border-radius:10px;padding:20px;\"><p style=\"margin:0 0 8px;font-size:12px;color:#94a3b8;\">DEPLOYMENTS</p><p style=\"margin:0;font-size:28px;font-weight:700;\">1,284</p><p style=\"margin:4px 0 0;font-size:12px;color:#34d399;\">\u2191 12% this week</p></div>\n <div style=\"background:#1e293b;border-radius:10px;padding:20px;\"><p style=\"margin:0 0 8px;font-size:12px;color:#94a3b8;\">SUCCESS RATE</p><p style=\"margin:0;font-size:28px;font-weight:700;\">99.2%</p><p style=\"margin:4px 0 0;font-size:12px;color:#34d399;\">\u2191 0.3% this week</p></div>\n <div style=\"background:#1e293b;border-radius:10px;padding:20px;\"><p style=\"margin:0 0 8px;font-size:12px;color:#94a3b8;\">AVG BUILD TIME</p><p style=\"margin:0;font-size:28px;font-weight:700;\">28s</p><p style=\"margin:4px 0 0;font-size:12px;color:#fb923c;\">\u2193 3s slower</p></div>\n <div style=\"background:#1e293b;border-radius:10px;padding:20px;\"><p style=\"margin:0 0 8px;font-size:12px;color:#94a3b8;\">ACTIVE PROJECTS</p><p style=\"margin:0;font-size:28px;font-weight:700;\">47</p><p style=\"margin:4px 0 0;font-size:12px;color:#34d399;\">\u2191 3 new</p></div>\n </div>\n <div style=\"background:#1e293b;border-radius:10px;padding:24px;\">\n <h2 style=\"margin:0 0 20px;font-size:16px;\">Recent Deployments</h2>\n <table style=\"width:100%;border-collapse:collapse;font-size:13px;\">\n <thead><tr style=\"color:#64748b;border-bottom:1px solid #334155;\"><th style=\"text-align:left;padding:8px 0;\">Project</th><th style=\"text-align:left;padding:8px 0;\">Branch</th><th style=\"text-align:left;padding:8px 0;\">Status</th><th style=\"text-align:left;padding:8px 0;\">Time</th></tr></thead>\n <tbody>\n <tr style=\"border-bottom:1px solid #1e293b;\"><td style=\"padding:12px 0;color:#e2e8f0;\">api-service</td><td style=\"padding:12px 0;color:#94a3b8;\">main</td><td style=\"padding:12px 0;\"><span style=\"background:#dcfce7;color:#16a34a;padding:3px 10px;border-radius:20px;font-size:11px;\">\u2713 Success</span></td><td style=\"padding:12px 0;color:#94a3b8;\">2 min ago</td></tr>\n <tr style=\"border-bottom:1px solid #1e293b;\"><td style=\"padding:12px 0;color:#e2e8f0;\">web-frontend</td><td style=\"padding:12px 0;color:#94a3b8;\">feat/auth</td><td style=\"padding:12px 0;\"><span style=\"background:#fef3c7;color:#d97706;padding:3px 10px;border-radius:20px;font-size:11px;\">\u27f3 Building</span></td><td style=\"padding:12px 0;color:#94a3b8;\">5 min ago</td></tr>\n <tr><td style=\"padding:12px 0;color:#e2e8f0;\">ml-pipeline</td><td style=\"padding:12px 0;color:#94a3b8;\">main</td><td style=\"padding:12px 0;\"><span style=\"background:#fee2e2;color:#dc2626;padding:3px 10px;border-radius:20px;font-size:11px;\">\u2717 Failed</span></td><td style=\"padding:12px 0;color:#94a3b8;\">18 min ago</td></tr>\n </tbody>\n </table>\n </div>\n </main>\n</body>\n</html>\n"}, {"name": "bad_colors", "rewards": {"format": 0.5, "validity": 1.0, "structural": 1.0, "text_block": 1.0, "position": 1.0, "color": 0.0, "clip": 0.5369, "ssim": 0.1233, "total": 0.6161}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/10/bad_colors.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Dashboard</title></head>\n<body style=\"margin:0;font-family:sans-serif;background:#f0e8d5;color:#1d170f;display:flex;min-height:100vh;\">\n <aside style=\"width:200px;background:#e1d6c4;padding:24px 0;flex-shrink:0;\">\n <div style=\"padding:0 20px 24px;font-size:18px;font-weight:700;color:#fff;border-bottom:1px solid #ccbeaa;\">\u26a1 Pulsar</div>\n <nav style=\"padding:16px 0;\">\n <a style=\"display:flex;align-items:center;gap:10px;padding:10px 20px;font-size:13px;color:#fff;background:#ccbeaa;text-decoration:none;margin-bottom:2px;\">\ud83d\udcca Overview</a>\n <a style=\"display:flex;align-items:center;gap:10px;padding:10px 20px;font-size:13px;color:#6b5c47;text-decoration:none;margin-bottom:2px;\">\ud83d\ude80 Deployments</a>\n <a style=\"display:flex;align-items:center;gap:10px;padding:10px 20px;font-size:13px;color:#6b5c47;text-decoration:none;margin-bottom:2px;\">\ud83d\udcc1 Projects</a>\n <a style=\"display:flex;align-items:center;gap:10px;padding:10px 20px;font-size:13px;color:#6b5c47;text-decoration:none;margin-bottom:2px;\">\ud83d\udc65 Team</a>\n <a style=\"display:flex;align-items:center;gap:10px;padding:10px 20px;font-size:13px;color:#6b5c47;text-decoration:none;\">\u2699\ufe0f Settings</a>\n </nav>\n </aside>\n <main style=\"flex:1;padding:32px;\">\n <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:28px;\">\n <h1 style=\"margin:0;font-size:22px;\">Overview</h1>\n <button style=\"padding:9px 18px;background:#b0b91a;color:#fff;border:none;border-radius:6px;font-size:13px;cursor:pointer;\">+ New Project</button>\n </div>\n <div style=\"display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px;\">\n <div style=\"background:#e1d6c4;border-radius:10px;padding:20px;\"><p style=\"margin:0 0 8px;font-size:12px;color:#6b5c47;\">DEPLOYMENTS</p><p style=\"margin:0;font-size:28px;font-weight:700;\">1,284</p><p style=\"margin:4px 0 0;font-size:12px;color:#cb2c66;\">\u2191 12% this week</p></div>\n <div style=\"background:#e1d6c4;border-radius:10px;padding:20px;\"><p style=\"margin:0 0 8px;font-size:12px;color:#6b5c47;\">SUCCESS RATE</p><p style=\"margin:0;font-size:28px;font-weight:700;\">99.2%</p><p style=\"margin:4px 0 0;font-size:12px;color:#cb2c66;\">\u2191 0.3% this week</p></div>\n <div style=\"background:#e1d6c4;border-radius:10px;padding:20px;\"><p style=\"margin:0 0 8px;font-size:12px;color:#6b5c47;\">AVG BUILD TIME</p><p style=\"margin:0;font-size:28px;font-weight:700;\">28s</p><p style=\"margin:4px 0 0;font-size:12px;color:#046dc3;\">\u2193 3s slower</p></div>\n <div style=\"background:#e1d6c4;border-radius:10px;padding:20px;\"><p style=\"margin:0 0 8px;font-size:12px;color:#6b5c47;\">ACTIVE PROJECTS</p><p style=\"margin:0;font-size:28px;font-weight:700;\">47</p><p style=\"margin:4px 0 0;font-size:12px;color:#cb2c66;\">\u2191 3 new</p></div>\n </div>\n <div style=\"background:#e1d6c4;border-radius:10px;padding:24px;\">\n <h2 style=\"margin:0 0 20px;font-size:16px;\">Recent Deployments</h2>\n <table style=\"width:100%;border-collapse:collapse;font-size:13px;\">\n <thead><tr style=\"color:#9b8b74;border-bottom:1px solid #ccbeaa;\"><th style=\"text-align:left;padding:8px 0;\">Project</th><th style=\"text-align:left;padding:8px 0;\">Branch</th><th style=\"text-align:left;padding:8px 0;\">Status</th><th style=\"text-align:left;padding:8px 0;\">Time</th></tr></thead>\n <tbody>\n <tr style=\"border-bottom:1px solid #e1d6c4;\"><td style=\"padding:12px 0;color:#1d170f;\">api-service</td><td style=\"padding:12px 0;color:#6b5c47;\">main</td><td style=\"padding:12px 0;\"><span style=\"background:#230318;color:#e95cb5;padding:3px 10px;border-radius:20px;font-size:11px;\">\u2713 Success</span></td><td style=\"padding:12px 0;color:#6b5c47;\">2 min ago</td></tr>\n <tr style=\"border-bottom:1px solid #e1d6c4;\"><td style=\"padding:12px 0;color:#1d170f;\">web-frontend</td><td style=\"padding:12px 0;color:#6b5c47;\">feat/auth</td><td style=\"padding:12px 0;\"><span style=\"background:#010c38;color:#2688f9;padding:3px 10px;border-radius:20px;font-size:11px;\">\u27f3 Building</span></td><td style=\"padding:12px 0;color:#6b5c47;\">5 min ago</td></tr>\n <tr><td style=\"padding:12px 0;color:#1d170f;\">ml-pipeline</td><td style=\"padding:12px 0;color:#6b5c47;\">main</td><td style=\"padding:12px 0;\"><span style=\"background:#011d1d;color:#23d9d9;padding:3px 10px;border-radius:20px;font-size:11px;\">\u2717 Failed</span></td><td style=\"padding:12px 0;color:#6b5c47;\">18 min ago</td></tr>\n </tbody>\n </table>\n </div>\n </main>\n</body>\n</html>\n"}, {"name": "half_styled", "rewards": {"format": 0.5, "validity": 1.0, "structural": 0.8542, "text_block": 0.2198, "position": 0.7696, "color": 0.8668, "clip": 0.5783, "ssim": 0.602, "total": 0.5686}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/10/half_styled.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Dashboard</title></head>\n<body style=\"margin:0; background:#0f172a; display:flex\">\n <aside style=\"width:200px; padding:24px 0\">\n <div style=\"padding:0 20px 24px; font-weight:700; border-bottom:1px solid #334155\">\u26a1 Pulsar</div>\n <nav style=\"padding:16px 0\">\n <a style=\"display:flex; gap:10px; font-size:13px; background:#334155; margin-bottom:2px\">\ud83d\udcca Overview</a>\n <a style=\"display:flex; gap:10px; font-size:13px; text-decoration:none\">\ud83d\ude80 Deployments</a>\n <a style=\"display:flex; gap:10px; font-size:13px; text-decoration:none\">\ud83d\udcc1 Projects</a>\n <a style=\"display:flex; gap:10px; font-size:13px; text-decoration:none\">\ud83d\udc65 Team</a>\n <a style=\"display:flex; gap:10px; font-size:13px; text-decoration:none\">\u2699\ufe0f Settings</a>\n </nav>\n </aside>\n <main style=\"flex:1\">\n <div style=\"display:flex; align-items:center\">\n <h1 style=\"margin:0\">Overview</h1>\n <button style=\"padding:9px 18px; color:#fff; border-radius:6px; cursor:pointer\">+ New Project</button>\n </div>\n <div style=\"display:grid; gap:16px\">\n <div style=\"background:#1e293b; padding:20px\"><p style=\"margin:0 0 8px; color:#94a3b8\">DEPLOYMENTS</p><p style=\"margin:0; font-weight:700\">1,284</p><p style=\"margin:4px 0 0; color:#34d399\">\u2191 12% this week</p></div>\n <div style=\"background:#1e293b; padding:20px\"><p style=\"margin:0 0 8px; color:#94a3b8\">SUCCESS RATE</p><p style=\"margin:0; font-weight:700\">99.2%</p><p style=\"margin:4px 0 0; color:#34d399\">\u2191 0.3% this week</p></div>\n <div style=\"background:#1e293b; padding:20px\"><p style=\"margin:0 0 8px; color:#94a3b8\">AVG BUILD TIME</p><p style=\"margin:0; font-weight:700\">28s</p><p style=\"margin:4px 0 0; color:#fb923c\">\u2193 3s slower</p></div>\n <div style=\"background:#1e293b; padding:20px\"><p style=\"margin:0 0 8px; color:#94a3b8\">ACTIVE PROJECTS</p><p style=\"margin:0; font-weight:700\">47</p><p style=\"margin:4px 0 0; color:#34d399\">\u2191 3 new</p></div>\n </div>\n <div style=\"background:#1e293b; padding:24px\">\n <h2 style=\"margin:0 0 20px\">Recent Deployments</h2>\n <table style=\"width:100%; font-size:13px\">\n <thead><tr style=\"color:#64748b\"><th style=\"text-align:left\">Project</th><th style=\"text-align:left\">Branch</th><th style=\"text-align:left\">Status</th><th style=\"text-align:left\">Time</th></tr></thead>\n <tbody>\n <tr style=\"border-bottom:1px solid #1e293b\"><td style=\"padding:12px 0\">api-service</td><td style=\"padding:12px 0\">main</td><td style=\"padding:12px 0\"><span style=\"background:#dcfce7; padding:3px 10px; font-size:11px\">\u2713 Success</span></td><td style=\"padding:12px 0\">2 min ago</td></tr>\n <tr style=\"border-bottom:1px solid #1e293b\"><td style=\"padding:12px 0\">web-frontend</td><td style=\"padding:12px 0\">feat/auth</td><td style=\"padding:12px 0\"><span style=\"background:#fef3c7; padding:3px 10px; font-size:11px\">\u27f3 Building</span></td><td style=\"padding:12px 0\">5 min ago</td></tr>\n <tr><td style=\"padding:12px 0\">ml-pipeline</td><td style=\"padding:12px 0\">main</td><td style=\"padding:12px 0\"><span style=\"background:#fee2e2; padding:3px 10px; font-size:11px\">\u2717 Failed</span></td><td style=\"padding:12px 0\">18 min ago</td></tr>\n </tbody>\n </table>\n </div>\n </main>\n</body>\n</html>\n"}, {"name": "no_layout", "rewards": {"format": 0.5, "validity": 1.0, "structural": 0.75, "text_block": 0.1613, "position": 0.6079, "color": 0.8975, "clip": 0.4437, "ssim": 0.5686, "total": 0.5023}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/10/no_layout.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Dashboard</title></head>\n<body style=\"font-family:sans-serif; background:#0f172a; color:#e2e8f0\">\n <aside style=\"background:#1e293b\">\n <div style=\"font-size:18px; font-weight:700; color:#fff; border-bottom:1px solid #334155\">\u26a1 Pulsar</div>\n <nav style=\"\">\n <a style=\"gap:10px; font-size:13px; color:#fff; background:#334155; text-decoration:none\">\ud83d\udcca Overview</a>\n <a style=\"gap:10px; font-size:13px; color:#94a3b8; text-decoration:none\">\ud83d\ude80 Deployments</a>\n <a style=\"gap:10px; font-size:13px; color:#94a3b8; text-decoration:none\">\ud83d\udcc1 Projects</a>\n <a style=\"gap:10px; font-size:13px; color:#94a3b8; text-decoration:none\">\ud83d\udc65 Team</a>\n <a style=\"gap:10px; font-size:13px; color:#94a3b8; text-decoration:none\">\u2699\ufe0f Settings</a>\n </nav>\n </aside>\n <main style=\"\">\n <div style=\"\">\n <h1 style=\"font-size:22px\">Overview</h1>\n <button style=\"background:#4f46e5; color:#fff; border:none; font-size:13px; cursor:pointer\">+ New Project</button>\n </div>\n <div style=\"gap:16px\">\n <div style=\"background:#1e293b\"><p style=\"font-size:12px; color:#94a3b8\">DEPLOYMENTS</p><p style=\"font-size:28px; font-weight:700\">1,284</p><p style=\"font-size:12px; color:#34d399\">\u2191 12% this week</p></div>\n <div style=\"background:#1e293b\"><p style=\"font-size:12px; color:#94a3b8\">SUCCESS RATE</p><p style=\"font-size:28px; font-weight:700\">99.2%</p><p style=\"font-size:12px; color:#34d399\">\u2191 0.3% this week</p></div>\n <div style=\"background:#1e293b\"><p style=\"font-size:12px; color:#94a3b8\">AVG BUILD TIME</p><p style=\"font-size:28px; font-weight:700\">28s</p><p style=\"font-size:12px; color:#fb923c\">\u2193 3s slower</p></div>\n <div style=\"background:#1e293b\"><p style=\"font-size:12px; color:#94a3b8\">ACTIVE PROJECTS</p><p style=\"font-size:28px; font-weight:700\">47</p><p style=\"font-size:12px; color:#34d399\">\u2191 3 new</p></div>\n </div>\n <div style=\"background:#1e293b\">\n <h2 style=\"font-size:16px\">Recent Deployments</h2>\n <table style=\"border-collapse:collapse; font-size:13px\">\n <thead><tr style=\"color:#64748b; border-bottom:1px solid #334155\"><th style=\"text-align:left\">Project</th><th style=\"text-align:left\">Branch</th><th style=\"text-align:left\">Status</th><th style=\"text-align:left\">Time</th></tr></thead>\n <tbody>\n <tr style=\"border-bottom:1px solid #1e293b\"><td style=\"color:#e2e8f0\">api-service</td><td style=\"color:#94a3b8\">main</td><td style=\"\"><span style=\"background:#dcfce7; color:#16a34a; font-size:11px\">\u2713 Success</span></td><td style=\"color:#94a3b8\">2 min ago</td></tr>\n <tr style=\"border-bottom:1px solid #1e293b\"><td style=\"color:#e2e8f0\">web-frontend</td><td style=\"color:#94a3b8\">feat/auth</td><td style=\"\"><span style=\"background:#fef3c7; color:#d97706; font-size:11px\">\u27f3 Building</span></td><td style=\"color:#94a3b8\">5 min ago</td></tr>\n <tr><td style=\"color:#e2e8f0\">ml-pipeline</td><td style=\"color:#94a3b8\">main</td><td style=\"\"><span style=\"background:#fee2e2; color:#dc2626; font-size:11px\">\u2717 Failed</span></td><td style=\"color:#94a3b8\">18 min ago</td></tr>\n </tbody>\n </table>\n </div>\n </main>\n</body>\n</html>\n"}, {"name": "no_style", "rewards": {"format": 0.5, "validity": 1.0, "structural": 0.5, "text_block": 0.2018, "position": 0.6479, "color": 0.0, "clip": 0.1044, "ssim": 0.1777, "total": 0.2528}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/10/no_style.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Dashboard</title></head>\n<body>\n <aside>\n <div>\u26a1 Pulsar</div>\n <nav>\n <a>\ud83d\udcca Overview</a>\n <a>\ud83d\ude80 Deployments</a>\n <a>\ud83d\udcc1 Projects</a>\n <a>\ud83d\udc65 Team</a>\n <a>\u2699\ufe0f Settings</a>\n </nav>\n </aside>\n <main>\n <div>\n <h1>Overview</h1>\n <button>+ New Project</button>\n </div>\n <div>\n <div><p>DEPLOYMENTS</p><p>1,284</p><p>\u2191 12% this week</p></div>\n <div><p>SUCCESS RATE</p><p>99.2%</p><p>\u2191 0.3% this week</p></div>\n <div><p>AVG BUILD TIME</p><p>28s</p><p>\u2193 3s slower</p></div>\n <div><p>ACTIVE PROJECTS</p><p>47</p><p>\u2191 3 new</p></div>\n </div>\n <div>\n <h2>Recent Deployments</h2>\n <table>\n <thead><tr><th>Project</th><th>Branch</th><th>Status</th><th>Time</th></tr></thead>\n <tbody>\n <tr><td>api-service</td><td>main</td><td><span>\u2713 Success</span></td><td>2 min ago</td></tr>\n <tr><td>web-frontend</td><td>feat/auth</td><td><span>\u27f3 Building</span></td><td>5 min ago</td></tr>\n <tr><td>ml-pipeline</td><td>main</td><td><span>\u2717 Failed</span></td><td>18 min ago</td></tr>\n </tbody>\n </table>\n </div>\n </main>\n</body>\n</html>\n"}, {"name": "blank", "rewards": {"format": 0.5, "validity": 0.75, "structural": 0.0814, "text_block": 0.0, "position": 0.0, "color": 0.0, "clip": 0.0, "ssim": 0.2257, "total": 0.0}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/10/blank.png", "html": "<!DOCTYPE html><html><head><title>Page</title></head><body style=\"background:#fff;\"></body></html>"}]}, {"id": 11, "difficulty": "hard", "source": "hard/1", "reference_image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/11/reference.png", "reference_html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>E-commerce</title></head>\n<body style=\"margin:0;font-family:sans-serif;background:#fff;color:#111;\">\n <nav style=\"background:#111;color:#fff;padding:14px 32px;display:flex;align-items:center;justify-content:space-between;\">\n <span style=\"font-weight:700;font-size:20px;letter-spacing:-.5px;\">SHOP<span style=\"color:#f59e0b;\">.</span></span>\n <div style=\"display:flex;gap:28px;font-size:14px;color:#ccc;\">\n <a href=\"#\" style=\"color:#fff;text-decoration:none;font-weight:500;\">New</a>\n <a href=\"#\" style=\"color:#ccc;text-decoration:none;\">Men</a>\n <a href=\"#\" style=\"color:#ccc;text-decoration:none;\">Women</a>\n <a href=\"#\" style=\"color:#ccc;text-decoration:none;\">Sale</a>\n </div>\n <div style=\"display:flex;gap:16px;align-items:center;\">\n <span style=\"font-size:14px;color:#ccc;\">\ud83d\udd0d</span>\n <span style=\"font-size:14px;color:#ccc;\">\ud83d\uded2 3</span>\n </div>\n </nav>\n <div style=\"display:flex;max-width:1200px;margin:0 auto;padding:32px 20px;gap:32px;\">\n <aside style=\"width:200px;flex-shrink:0;\">\n <h3 style=\"font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin:0 0 16px;color:#888;\">Category</h3>\n <div style=\"font-size:14px;line-height:2.4;border-bottom:1px solid #eee;margin-bottom:20px;padding-bottom:16px;\">\n <p style=\"margin:0;cursor:pointer;font-weight:600;color:#111;\">All (128)</p>\n <p style=\"margin:0;cursor:pointer;color:#555;\">T-Shirts (34)</p>\n <p style=\"margin:0;cursor:pointer;color:#555;\">Hoodies (28)</p>\n <p style=\"margin:0;cursor:pointer;color:#555;\">Jackets (22)</p>\n <p style=\"margin:0;cursor:pointer;color:#555;\">Pants (44)</p>\n </div>\n <h3 style=\"font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin:0 0 16px;color:#888;\">Price</h3>\n <div style=\"font-size:14px;line-height:2.4;\">\n <p style=\"margin:0;cursor:pointer;color:#555;\">Under $50</p>\n <p style=\"margin:0;cursor:pointer;color:#555;\">$50 \u2013 $100</p>\n <p style=\"margin:0;cursor:pointer;font-weight:600;color:#111;\">$100 \u2013 $200</p>\n <p style=\"margin:0;cursor:pointer;color:#555;\">Over $200</p>\n </div>\n </aside>\n <div style=\"flex:1;\">\n <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;\">\n <p style=\"margin:0;font-size:14px;color:#888;\">128 products</p>\n <select style=\"padding:8px 12px;border:1px solid #e5e7eb;border-radius:6px;font-size:14px;\">\n <option>Best selling</option><option>Price: Low to High</option><option>Price: High to Low</option>\n </select>\n </div>\n <div style=\"display:grid;grid-template-columns:repeat(3,1fr);gap:20px;\">\n <div><div style=\"background:#f5f5f5;border-radius:8px;aspect-ratio:3/4;margin-bottom:12px;display:flex;align-items:center;justify-content:center;font-size:40px;\">\ud83d\udc55</div><p style=\"margin:0 0 4px;font-size:14px;font-weight:500;\">Essential Tee</p><p style=\"margin:0;font-size:14px;color:#888;\">$38</p></div>\n <div><div style=\"background:#e8f4fd;border-radius:8px;aspect-ratio:3/4;margin-bottom:12px;display:flex;align-items:center;justify-content:center;font-size:40px;position:relative;\"><span style=\"position:absolute;top:10px;left:10px;background:#ef4444;color:#fff;font-size:11px;padding:3px 8px;border-radius:4px;\">SALE</span>\ud83e\udde5</div><p style=\"margin:0 0 4px;font-size:14px;font-weight:500;\">Puffer Jacket</p><p style=\"margin:0;font-size:14px;\"><span style=\"color:#ef4444;font-weight:600;\">$89</span> <span style=\"color:#bbb;text-decoration:line-through;font-size:13px;\">$149</span></p></div>\n <div><div style=\"background:#fdf5e8;border-radius:8px;aspect-ratio:3/4;margin-bottom:12px;display:flex;align-items:center;justify-content:center;font-size:40px;\">\ud83d\udc54</div><p style=\"margin:0 0 4px;font-size:14px;font-weight:500;\">Oxford Shirt</p><p style=\"margin:0;font-size:14px;color:#888;\">$75</p></div>\n </div>\n </div>\n </div>\n</body>\n</html>\n", "variants": [{"name": "perfect", "rewards": {"format": 0.5, "validity": 1.0, "structural": 1.0, "text_block": 1.0, "position": 1.0, "color": 1.0, "clip": 1.0, "ssim": 1.0, "total": 0.9773}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/11/perfect.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>E-commerce</title></head>\n<body style=\"margin:0;font-family:sans-serif;background:#fff;color:#111;\">\n <nav style=\"background:#111;color:#fff;padding:14px 32px;display:flex;align-items:center;justify-content:space-between;\">\n <span style=\"font-weight:700;font-size:20px;letter-spacing:-.5px;\">SHOP<span style=\"color:#f59e0b;\">.</span></span>\n <div style=\"display:flex;gap:28px;font-size:14px;color:#ccc;\">\n <a href=\"#\" style=\"color:#fff;text-decoration:none;font-weight:500;\">New</a>\n <a href=\"#\" style=\"color:#ccc;text-decoration:none;\">Men</a>\n <a href=\"#\" style=\"color:#ccc;text-decoration:none;\">Women</a>\n <a href=\"#\" style=\"color:#ccc;text-decoration:none;\">Sale</a>\n </div>\n <div style=\"display:flex;gap:16px;align-items:center;\">\n <span style=\"font-size:14px;color:#ccc;\">\ud83d\udd0d</span>\n <span style=\"font-size:14px;color:#ccc;\">\ud83d\uded2 3</span>\n </div>\n </nav>\n <div style=\"display:flex;max-width:1200px;margin:0 auto;padding:32px 20px;gap:32px;\">\n <aside style=\"width:200px;flex-shrink:0;\">\n <h3 style=\"font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin:0 0 16px;color:#888;\">Category</h3>\n <div style=\"font-size:14px;line-height:2.4;border-bottom:1px solid #eee;margin-bottom:20px;padding-bottom:16px;\">\n <p style=\"margin:0;cursor:pointer;font-weight:600;color:#111;\">All (128)</p>\n <p style=\"margin:0;cursor:pointer;color:#555;\">T-Shirts (34)</p>\n <p style=\"margin:0;cursor:pointer;color:#555;\">Hoodies (28)</p>\n <p style=\"margin:0;cursor:pointer;color:#555;\">Jackets (22)</p>\n <p style=\"margin:0;cursor:pointer;color:#555;\">Pants (44)</p>\n </div>\n <h3 style=\"font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin:0 0 16px;color:#888;\">Price</h3>\n <div style=\"font-size:14px;line-height:2.4;\">\n <p style=\"margin:0;cursor:pointer;color:#555;\">Under $50</p>\n <p style=\"margin:0;cursor:pointer;color:#555;\">$50 \u2013 $100</p>\n <p style=\"margin:0;cursor:pointer;font-weight:600;color:#111;\">$100 \u2013 $200</p>\n <p style=\"margin:0;cursor:pointer;color:#555;\">Over $200</p>\n </div>\n </aside>\n <div style=\"flex:1;\">\n <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;\">\n <p style=\"margin:0;font-size:14px;color:#888;\">128 products</p>\n <select style=\"padding:8px 12px;border:1px solid #e5e7eb;border-radius:6px;font-size:14px;\">\n <option>Best selling</option><option>Price: Low to High</option><option>Price: High to Low</option>\n </select>\n </div>\n <div style=\"display:grid;grid-template-columns:repeat(3,1fr);gap:20px;\">\n <div><div style=\"background:#f5f5f5;border-radius:8px;aspect-ratio:3/4;margin-bottom:12px;display:flex;align-items:center;justify-content:center;font-size:40px;\">\ud83d\udc55</div><p style=\"margin:0 0 4px;font-size:14px;font-weight:500;\">Essential Tee</p><p style=\"margin:0;font-size:14px;color:#888;\">$38</p></div>\n <div><div style=\"background:#e8f4fd;border-radius:8px;aspect-ratio:3/4;margin-bottom:12px;display:flex;align-items:center;justify-content:center;font-size:40px;position:relative;\"><span style=\"position:absolute;top:10px;left:10px;background:#ef4444;color:#fff;font-size:11px;padding:3px 8px;border-radius:4px;\">SALE</span>\ud83e\udde5</div><p style=\"margin:0 0 4px;font-size:14px;font-weight:500;\">Puffer Jacket</p><p style=\"margin:0;font-size:14px;\"><span style=\"color:#ef4444;font-weight:600;\">$89</span> <span style=\"color:#bbb;text-decoration:line-through;font-size:13px;\">$149</span></p></div>\n <div><div style=\"background:#fdf5e8;border-radius:8px;aspect-ratio:3/4;margin-bottom:12px;display:flex;align-items:center;justify-content:center;font-size:40px;\">\ud83d\udc54</div><p style=\"margin:0 0 4px;font-size:14px;font-weight:500;\">Oxford Shirt</p><p style=\"margin:0;font-size:14px;color:#888;\">$75</p></div>\n </div>\n </div>\n </div>\n</body>\n</html>\n"}, {"name": "minor_diff", "rewards": {"format": 0.5, "validity": 1.0, "structural": 1.0, "text_block": 0.9677, "position": 0.9927, "color": 0.9059, "clip": 0.796, "ssim": 0.8502, "total": 0.8882}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/11/minor_diff.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>E-commerce</title></head>\n<body style=\"margin:0;font-family:sans-serif;background:#fff;color:#111;\">\n <nav style=\"background:#111;color:#fff;padding:14px 32px;display:flex;align-items:center;justify-content:space-between;\">\n <span style=\"font-weight:700;font-size:16px;letter-spacing:-.5px;\">SHOP<span style=\"color:#f59e0b;\">.</span></span>\n <div style=\"display:flex;gap:28px;font-size:10px;color:#ccc;\">\n <a href=\"#\" style=\"color:#fff;text-decoration:none;font-weight:500;\">New</a>\n <a href=\"#\" style=\"color:#ccc;text-decoration:none;\">Men</a>\n <a href=\"#\" style=\"color:#ccc;text-decoration:none;\">Women</a>\n <a href=\"#\" style=\"color:#ccc;text-decoration:none;\">Sale</a>\n </div>\n <div style=\"display:flex;gap:16px;align-items:center;\">\n <span style=\"font-size:14px;color:#ccc;\">\ud83d\udd0d</span>\n <span style=\"font-size:14px;color:#ccc;\">\ud83d\uded2 3</span>\n </div>\n </nav>\n <div style=\"display:flex;max-width:1200px;margin:0 auto;padding:32px 20px;gap:32px;\">\n <aside style=\"width:200px;flex-shrink:0;\">\n <h3 style=\"font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin:0 0 16px;color:#888;\">Category</h3>\n <div style=\"font-size:14px;line-height:2.4;border-bottom:1px solid #eee;margin-bottom:20px;padding-bottom:16px;\">\n <p style=\"margin:0;cursor:pointer;font-weight:600;color:#111;\">All (128)</p>\n <p style=\"margin:0;cursor:pointer;color:#555;\">T-Shirts (34)</p>\n <p style=\"margin:0;cursor:pointer;color:#555;\">Hoodies (28)</p>\n <p style=\"margin:0;cursor:pointer;color:#555;\">Jackets (22)</p>\n <p style=\"margin:0;cursor:pointer;color:#555;\">Pants (44)</p>\n </div>\n <h3 style=\"font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin:0 0 16px;color:#888;\">Price</h3>\n <div style=\"font-size:14px;line-height:2.4;\">\n <p style=\"margin:0;cursor:pointer;color:#555;\">Under $50</p>\n <p style=\"margin:0;cursor:pointer;color:#555;\">$50 \u2013 $100</p>\n <p style=\"margin:0;cursor:pointer;font-weight:600;color:#111;\">$100 \u2013 $200</p>\n <p style=\"margin:0;cursor:pointer;color:#555;\">Over $200</p>\n </div>\n </aside>\n <div style=\"flex:1;\">\n <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;\">\n <p style=\"margin:0;font-size:14px;color:#888;\">128 products</p>\n <select style=\"padding:8px 12px;border:1px solid #e5e7eb;border-radius:6px;font-size:14px;\">\n <option>Best selling</option><option>Price: Low to High</option><option>Price: High to Low</option>\n </select>\n </div>\n <div style=\"display:grid;grid-template-columns:repeat(3,1fr);gap:20px;\">\n <div><div style=\"background:#888888;border-radius:8px;aspect-ratio:3/4;margin-bottom:12px;display:flex;align-items:center;justify-content:center;font-size:40px;\">\ud83d\udc55</div><p style=\"margin:0 0 4px;font-size:14px;font-weight:500;\">Essential Tee</p><p style=\"margin:0;font-size:14px;color:#888;\">$38</p></div>\n <div><div style=\"background:#e8f4fd;border-radius:8px;aspect-ratio:3/4;margin-bottom:12px;display:flex;align-items:center;justify-content:center;font-size:40px;position:relative;\"><span style=\"position:absolute;top:10px;left:10px;background:#ef4444;color:#fff;font-size:11px;padding:3px 8px;border-radius:4px;\">SALE</span>\ud83e\udde5</div><p style=\"margin:0 0 4px;font-size:14px;font-weight:500;\">Puffer Jacket</p><p style=\"margin:0;font-size:14px;\"><span style=\"color:#ef4444;font-weight:600;\">$89</span> <span style=\"color:#bbb;text-decoration:line-through;font-size:13px;\">$149</span></p></div>\n <div><div style=\"background:#fdf5e8;border-radius:8px;aspect-ratio:3/4;margin-bottom:12px;display:flex;align-items:center;justify-content:center;font-size:40px;\">\ud83d\udc54</div><p style=\"margin:0 0 4px;font-size:14px;font-weight:500;\">Oxford Shirt</p><p style=\"margin:0;font-size:14px;color:#888;\">$75</p></div>\n </div>\n </div>\n </div>\n</body>\n</html>\n"}, {"name": "bad_colors", "rewards": {"format": 0.5, "validity": 1.0, "structural": 1.0, "text_block": 1.0, "position": 1.0, "color": 0.3022, "clip": 0.7404, "ssim": 0.8101, "total": 0.7972}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/11/bad_colors.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>E-commerce</title></head>\n<body style=\"margin:0;font-family:sans-serif;background:#fff;color:#111;\">\n <nav style=\"background:#111;color:#fff;padding:14px 32px;display:flex;align-items:center;justify-content:space-between;\">\n <span style=\"font-weight:700;font-size:20px;letter-spacing:-.5px;\">SHOP<span style=\"color:#0a61f4;\">.</span></span>\n <div style=\"display:flex;gap:28px;font-size:14px;color:#ccc;\">\n <a href=\"#\" style=\"color:#fff;text-decoration:none;font-weight:500;\">New</a>\n <a href=\"#\" style=\"color:#ccc;text-decoration:none;\">Men</a>\n <a href=\"#\" style=\"color:#ccc;text-decoration:none;\">Women</a>\n <a href=\"#\" style=\"color:#ccc;text-decoration:none;\">Sale</a>\n </div>\n <div style=\"display:flex;gap:16px;align-items:center;\">\n <span style=\"font-size:14px;color:#ccc;\">\ud83d\udd0d</span>\n <span style=\"font-size:14px;color:#ccc;\">\ud83d\uded2 3</span>\n </div>\n </nav>\n <div style=\"display:flex;max-width:1200px;margin:0 auto;padding:32px 20px;gap:32px;\">\n <aside style=\"width:200px;flex-shrink:0;\">\n <h3 style=\"font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin:0 0 16px;color:#888;\">Category</h3>\n <div style=\"font-size:14px;line-height:2.4;border-bottom:1px solid #eee;margin-bottom:20px;padding-bottom:16px;\">\n <p style=\"margin:0;cursor:pointer;font-weight:600;color:#111;\">All (128)</p>\n <p style=\"margin:0;cursor:pointer;color:#555;\">T-Shirts (34)</p>\n <p style=\"margin:0;cursor:pointer;color:#555;\">Hoodies (28)</p>\n <p style=\"margin:0;cursor:pointer;color:#555;\">Jackets (22)</p>\n <p style=\"margin:0;cursor:pointer;color:#555;\">Pants (44)</p>\n </div>\n <h3 style=\"font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin:0 0 16px;color:#888;\">Price</h3>\n <div style=\"font-size:14px;line-height:2.4;\">\n <p style=\"margin:0;cursor:pointer;color:#555;\">Under $50</p>\n <p style=\"margin:0;cursor:pointer;color:#555;\">$50 \u2013 $100</p>\n <p style=\"margin:0;cursor:pointer;font-weight:600;color:#111;\">$100 \u2013 $200</p>\n <p style=\"margin:0;cursor:pointer;color:#555;\">Over $200</p>\n </div>\n </aside>\n <div style=\"flex:1;\">\n <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;\">\n <p style=\"margin:0;font-size:14px;color:#888;\">128 products</p>\n <select style=\"padding:8px 12px;border:1px solid #1a1814;border-radius:6px;font-size:14px;\">\n <option>Best selling</option><option>Price: Low to High</option><option>Price: High to Low</option>\n </select>\n </div>\n <div style=\"display:grid;grid-template-columns:repeat(3,1fr);gap:20px;\">\n <div><div style=\"background:#0a0a0a;border-radius:8px;aspect-ratio:3/4;margin-bottom:12px;display:flex;align-items:center;justify-content:center;font-size:40px;\">\ud83d\udc55</div><p style=\"margin:0 0 4px;font-size:14px;font-weight:500;\">Essential Tee</p><p style=\"margin:0;font-size:14px;color:#888;\">$38</p></div>\n <div><div style=\"background:#170b02;border-radius:8px;aspect-ratio:3/4;margin-bottom:12px;display:flex;align-items:center;justify-content:center;font-size:40px;position:relative;\"><span style=\"position:absolute;top:10px;left:10px;background:#10bbbb;color:#fff;font-size:11px;padding:3px 8px;border-radius:4px;\">SALE</span>\ud83e\udde5</div><p style=\"margin:0 0 4px;font-size:14px;font-weight:500;\">Puffer Jacket</p><p style=\"margin:0;font-size:14px;\"><span style=\"color:#10bbbb;font-weight:600;\">$89</span> <span style=\"color:#bbb;text-decoration:line-through;font-size:13px;\">$149</span></p></div>\n <div><div style=\"background:#020a17;border-radius:8px;aspect-ratio:3/4;margin-bottom:12px;display:flex;align-items:center;justify-content:center;font-size:40px;\">\ud83d\udc54</div><p style=\"margin:0 0 4px;font-size:14px;font-weight:500;\">Oxford Shirt</p><p style=\"margin:0;font-size:14px;color:#888;\">$75</p></div>\n </div>\n </div>\n </div>\n</body>\n</html>\n"}, {"name": "no_style", "rewards": {"format": 0.5, "validity": 1.0, "structural": 0.5, "text_block": 0.3728, "position": 0.723, "color": 0.211, "clip": 0.2164, "ssim": 0.7099, "total": 0.4331}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/11/no_style.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>E-commerce</title></head>\n<body>\n <nav>\n <span>SHOP<span>.</span></span>\n <div>\n <a href=\"#\">New</a>\n <a href=\"#\">Men</a>\n <a href=\"#\">Women</a>\n <a href=\"#\">Sale</a>\n </div>\n <div>\n <span>\ud83d\udd0d</span>\n <span>\ud83d\uded2 3</span>\n </div>\n </nav>\n <div>\n <aside>\n <h3>Category</h3>\n <div>\n <p>All (128)</p>\n <p>T-Shirts (34)</p>\n <p>Hoodies (28)</p>\n <p>Jackets (22)</p>\n <p>Pants (44)</p>\n </div>\n <h3>Price</h3>\n <div>\n <p>Under $50</p>\n <p>$50 \u2013 $100</p>\n <p>$100 \u2013 $200</p>\n <p>Over $200</p>\n </div>\n </aside>\n <div>\n <div>\n <p>128 products</p>\n <select>\n <option>Best selling</option><option>Price: Low to High</option><option>Price: High to Low</option>\n </select>\n </div>\n <div>\n <div><div>\ud83d\udc55</div><p>Essential Tee</p><p>$38</p></div>\n <div><div><span>SALE</span>\ud83e\udde5</div><p>Puffer Jacket</p><p><span>$89</span> <span>$149</span></p></div>\n <div><div>\ud83d\udc54</div><p>Oxford Shirt</p><p>$75</p></div>\n </div>\n </div>\n </div>\n</body>\n</html>\n"}, {"name": "half_styled", "rewards": {"format": 0.5, "validity": 1.0, "structural": 0.8333, "text_block": 0.2435, "position": 0.5093, "color": 0.5151, "clip": 0.0698, "ssim": 0.737, "total": 0.4054}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/11/half_styled.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>E-commerce</title></head>\n<body style=\"margin:0; background:#fff\">\n <nav style=\"background:#111; padding:14px 32px; align-items:center\">\n <span style=\"font-weight:700; letter-spacing:-.5px\">SHOP<span style=\"color:#f59e0b\">.</span></span>\n <div style=\"display:flex; font-size:14px\">\n <a href=\"#\" style=\"color:#fff; font-weight:500\">New</a>\n <a href=\"#\" style=\"color:#ccc\">Men</a>\n <a href=\"#\" style=\"color:#ccc\">Women</a>\n <a href=\"#\" style=\"color:#ccc\">Sale</a>\n </div>\n <div style=\"display:flex; align-items:center\">\n <span style=\"font-size:14px\">\ud83d\udd0d</span>\n <span style=\"font-size:14px\">\ud83d\uded2 3</span>\n </div>\n </nav>\n <div style=\"display:flex; margin:0 auto; gap:32px\">\n <aside style=\"width:200px\">\n <h3 style=\"font-size:13px; text-transform:uppercase; margin:0 0 16px\">Category</h3>\n <div style=\"font-size:14px; border-bottom:1px solid #eee; padding-bottom:16px\">\n <p style=\"margin:0; font-weight:600\">All (128)</p>\n <p style=\"margin:0; color:#555\">T-Shirts (34)</p>\n <p style=\"margin:0; color:#555\">Hoodies (28)</p>\n <p style=\"margin:0; color:#555\">Jackets (22)</p>\n <p style=\"margin:0; color:#555\">Pants (44)</p>\n </div>\n <h3 style=\"font-size:13px; text-transform:uppercase; margin:0 0 16px\">Price</h3>\n <div style=\"font-size:14px\">\n <p style=\"margin:0; color:#555\">Under $50</p>\n <p style=\"margin:0; color:#555\">$50 \u2013 $100</p>\n <p style=\"margin:0; font-weight:600\">$100 \u2013 $200</p>\n <p style=\"margin:0; color:#555\">Over $200</p>\n </div>\n </aside>\n <div style=\"flex:1\">\n <div style=\"display:flex; align-items:center\">\n <p style=\"margin:0; color:#888\">128 products</p>\n <select style=\"padding:8px 12px; border-radius:6px\">\n <option>Best selling</option><option>Price: Low to High</option><option>Price: High to Low</option>\n </select>\n </div>\n <div style=\"display:grid; gap:20px\">\n <div><div style=\"background:#f5f5f5; aspect-ratio:3/4; display:flex; justify-content:center\">\ud83d\udc55</div><p style=\"margin:0 0 4px; font-weight:500\">Essential Tee</p><p style=\"margin:0; color:#888\">$38</p></div>\n <div><div style=\"background:#e8f4fd; aspect-ratio:3/4; display:flex; justify-content:center; position:relative\"><span style=\"position:absolute; left:10px; color:#fff; padding:3px 8px\">SALE</span>\ud83e\udde5</div><p style=\"margin:0 0 4px; font-weight:500\">Puffer Jacket</p><p style=\"margin:0\"><span style=\"color:#ef4444\">$89</span> <span style=\"color:#bbb; font-size:13px\">$149</span></p></div>\n <div><div style=\"background:#fdf5e8; aspect-ratio:3/4; display:flex; justify-content:center\">\ud83d\udc54</div><p style=\"margin:0 0 4px; font-weight:500\">Oxford Shirt</p><p style=\"margin:0; color:#888\">$75</p></div>\n </div>\n </div>\n </div>\n</body>\n</html>\n"}, {"name": "no_layout", "rewards": {"format": 0.5, "validity": 1.0, "structural": 0.75, "text_block": 0.2611, "position": 0.0388, "color": 0.3393, "clip": 0.2257, "ssim": 0.7188, "total": 0.3726}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/11/no_layout.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>E-commerce</title></head>\n<body style=\"font-family:sans-serif; background:#fff; color:#111\">\n <nav style=\"background:#111; color:#fff\">\n <span style=\"font-weight:700; font-size:20px; letter-spacing:-.5px\">SHOP<span style=\"color:#f59e0b\">.</span></span>\n <div style=\"gap:28px; font-size:14px; color:#ccc\">\n <a href=\"#\" style=\"color:#fff; text-decoration:none; font-weight:500\">New</a>\n <a href=\"#\" style=\"color:#ccc; text-decoration:none\">Men</a>\n <a href=\"#\" style=\"color:#ccc; text-decoration:none\">Women</a>\n <a href=\"#\" style=\"color:#ccc; text-decoration:none\">Sale</a>\n </div>\n <div style=\"gap:16px\">\n <span style=\"font-size:14px; color:#ccc\">\ud83d\udd0d</span>\n <span style=\"font-size:14px; color:#ccc\">\ud83d\uded2 3</span>\n </div>\n </nav>\n <div style=\"max-width:1200px; gap:32px\">\n <aside style=\"\">\n <h3 style=\"font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#888\">Category</h3>\n <div style=\"font-size:14px; line-height:2.4; border-bottom:1px solid #eee\">\n <p style=\"cursor:pointer; font-weight:600; color:#111\">All (128)</p>\n <p style=\"cursor:pointer; color:#555\">T-Shirts (34)</p>\n <p style=\"cursor:pointer; color:#555\">Hoodies (28)</p>\n <p style=\"cursor:pointer; color:#555\">Jackets (22)</p>\n <p style=\"cursor:pointer; color:#555\">Pants (44)</p>\n </div>\n <h3 style=\"font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#888\">Price</h3>\n <div style=\"font-size:14px; line-height:2.4\">\n <p style=\"cursor:pointer; color:#555\">Under $50</p>\n <p style=\"cursor:pointer; color:#555\">$50 \u2013 $100</p>\n <p style=\"cursor:pointer; font-weight:600; color:#111\">$100 \u2013 $200</p>\n <p style=\"cursor:pointer; color:#555\">Over $200</p>\n </div>\n </aside>\n <div style=\"\">\n <div style=\"\">\n <p style=\"font-size:14px; color:#888\">128 products</p>\n <select style=\"border:1px solid #e5e7eb; font-size:14px\">\n <option>Best selling</option><option>Price: Low to High</option><option>Price: High to Low</option>\n </select>\n </div>\n <div style=\"gap:20px\">\n <div><div style=\"background:#f5f5f5; aspect-ratio:3/4; font-size:40px\">\ud83d\udc55</div><p style=\"font-size:14px; font-weight:500\">Essential Tee</p><p style=\"font-size:14px; color:#888\">$38</p></div>\n <div><div style=\"background:#e8f4fd; aspect-ratio:3/4; font-size:40px\"><span style=\"background:#ef4444; color:#fff; font-size:11px\">SALE</span>\ud83e\udde5</div><p style=\"font-size:14px; font-weight:500\">Puffer Jacket</p><p style=\"font-size:14px\"><span style=\"color:#ef4444; font-weight:600\">$89</span> <span style=\"color:#bbb; text-decoration:line-through; font-size:13px\">$149</span></p></div>\n <div><div style=\"background:#fdf5e8; aspect-ratio:3/4; font-size:40px\">\ud83d\udc54</div><p style=\"font-size:14px; font-weight:500\">Oxford Shirt</p><p style=\"font-size:14px; color:#888\">$75</p></div>\n </div>\n </div>\n </div>\n</body>\n</html>\n"}, {"name": "blank", "rewards": {"format": 0.5, "validity": 0.75, "structural": 0.0856, "text_block": 0.0, "position": 0.0, "color": 0.2003, "clip": 0.0, "ssim": 0.7668, "total": 0.0}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/11/blank.png", "html": "<!DOCTYPE html><html><head><title>Page</title></head><body style=\"background:#fff;\"></body></html>"}]}, {"id": 12, "difficulty": "hard", "source": "hard/2", "reference_image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/12/reference.png", "reference_html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Analytics</title></head>\n<body style=\"margin:0;font-family:sans-serif;background:#f8fafc;color:#1e293b;\">\n <nav style=\"background:#fff;border-bottom:1px solid #e2e8f0;padding:14px 28px;display:flex;align-items:center;justify-content:space-between;\">\n <div style=\"display:flex;align-items:center;gap:24px;\">\n <span style=\"font-weight:700;font-size:17px;color:#4f46e5;\">Analytics</span>\n <div style=\"display:flex;gap:4px;background:#f1f5f9;border-radius:6px;padding:3px;\">\n <button style=\"padding:5px 14px;background:#fff;border:none;border-radius:4px;font-size:13px;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.1);\">7d</button>\n <button style=\"padding:5px 14px;background:transparent;border:none;font-size:13px;cursor:pointer;color:#64748b;\">30d</button>\n <button style=\"padding:5px 14px;background:transparent;border:none;font-size:13px;cursor:pointer;color:#64748b;\">90d</button>\n </div>\n </div>\n <button style=\"padding:8px 16px;background:#4f46e5;color:#fff;border:none;border-radius:6px;font-size:13px;cursor:pointer;\">Export CSV</button>\n </nav>\n <div style=\"padding:28px;\">\n <div style=\"display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px;\">\n <div style=\"background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:20px;\"><p style=\"margin:0 0 6px;font-size:12px;font-weight:600;color:#64748b;text-transform:uppercase;\">Total Revenue</p><p style=\"margin:0;font-size:26px;font-weight:700;\">$84,231</p><p style=\"margin:6px 0 0;font-size:12px;color:#16a34a;\">\u2191 18.2% vs last period</p></div>\n <div style=\"background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:20px;\"><p style=\"margin:0 0 6px;font-size:12px;font-weight:600;color:#64748b;text-transform:uppercase;\">Visitors</p><p style=\"margin:0;font-size:26px;font-weight:700;\">24,891</p><p style=\"margin:6px 0 0;font-size:12px;color:#16a34a;\">\u2191 7.4%</p></div>\n <div style=\"background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:20px;\"><p style=\"margin:0 0 6px;font-size:12px;font-weight:600;color:#64748b;text-transform:uppercase;\">Conversion</p><p style=\"margin:0;font-size:26px;font-weight:700;\">3.6%</p><p style=\"margin:6px 0 0;font-size:12px;color:#ef4444;\">\u2193 0.4%</p></div>\n <div style=\"background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:20px;\"><p style=\"margin:0 0 6px;font-size:12px;font-weight:600;color:#64748b;text-transform:uppercase;\">Avg Order</p><p style=\"margin:0;font-size:26px;font-weight:700;\">$94.30</p><p style=\"margin:6px 0 0;font-size:12px;color:#16a34a;\">\u2191 10.1%</p></div>\n </div>\n <div style=\"display:grid;grid-template-columns:2fr 1fr;gap:16px;\">\n <div style=\"background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:24px;\">\n <h3 style=\"margin:0 0 20px;font-size:15px;\">Revenue Over Time</h3>\n <div style=\"display:flex;align-items:flex-end;gap:8px;height:120px;\">\n <div style=\"flex:1;background:#ede9fe;border-radius:4px 4px 0 0;height:40%;\"></div>\n <div style=\"flex:1;background:#ede9fe;border-radius:4px 4px 0 0;height:55%;\"></div>\n <div style=\"flex:1;background:#ede9fe;border-radius:4px 4px 0 0;height:48%;\"></div>\n <div style=\"flex:1;background:#ede9fe;border-radius:4px 4px 0 0;height:72%;\"></div>\n <div style=\"flex:1;background:#ede9fe;border-radius:4px 4px 0 0;height:60%;\"></div>\n <div style=\"flex:1;background:#4f46e5;border-radius:4px 4px 0 0;height:85%;\"></div>\n <div style=\"flex:1;background:#4f46e5;border-radius:4px 4px 0 0;height:100%;\"></div>\n </div>\n <div style=\"display:flex;gap:8px;margin-top:8px;font-size:11px;color:#94a3b8;\">\n <span style=\"flex:1;text-align:center;\">Mon</span><span style=\"flex:1;text-align:center;\">Tue</span><span style=\"flex:1;text-align:center;\">Wed</span><span style=\"flex:1;text-align:center;\">Thu</span><span style=\"flex:1;text-align:center;\">Fri</span><span style=\"flex:1;text-align:center;\">Sat</span><span style=\"flex:1;text-align:center;\">Sun</span>\n </div>\n </div>\n <div style=\"background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:24px;\">\n <h3 style=\"margin:0 0 16px;font-size:15px;\">Top Sources</h3>\n <div style=\"font-size:13px;\">\n <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;\"><span>Google</span><div style=\"display:flex;align-items:center;gap:8px;\"><div style=\"width:80px;height:6px;background:#e2e8f0;border-radius:3px;overflow:hidden;\"><div style=\"width:62%;height:100%;background:#4f46e5;border-radius:3px;\"></div></div><span style=\"color:#888;font-size:12px;\">62%</span></div></div>\n <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;\"><span>Direct</span><div style=\"display:flex;align-items:center;gap:8px;\"><div style=\"width:80px;height:6px;background:#e2e8f0;border-radius:3px;overflow:hidden;\"><div style=\"width:22%;height:100%;background:#818cf8;border-radius:3px;\"></div></div><span style=\"color:#888;font-size:12px;\">22%</span></div></div>\n <div style=\"display:flex;justify-content:space-between;align-items:center;\"><span>Social</span><div style=\"display:flex;align-items:center;gap:8px;\"><div style=\"width:80px;height:6px;background:#e2e8f0;border-radius:3px;overflow:hidden;\"><div style=\"width:16%;height:100%;background:#c4b5fd;border-radius:3px;\"></div></div><span style=\"color:#888;font-size:12px;\">16%</span></div></div>\n </div>\n </div>\n </div>\n </div>\n</body>\n</html>\n", "variants": [{"name": "perfect", "rewards": {"format": 0.5, "validity": 1.0, "structural": 1.0, "text_block": 1.0, "position": 1.0, "color": 1.0, "clip": 1.0, "ssim": 1.0, "total": 0.9773}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/12/perfect.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Analytics</title></head>\n<body style=\"margin:0;font-family:sans-serif;background:#f8fafc;color:#1e293b;\">\n <nav style=\"background:#fff;border-bottom:1px solid #e2e8f0;padding:14px 28px;display:flex;align-items:center;justify-content:space-between;\">\n <div style=\"display:flex;align-items:center;gap:24px;\">\n <span style=\"font-weight:700;font-size:17px;color:#4f46e5;\">Analytics</span>\n <div style=\"display:flex;gap:4px;background:#f1f5f9;border-radius:6px;padding:3px;\">\n <button style=\"padding:5px 14px;background:#fff;border:none;border-radius:4px;font-size:13px;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.1);\">7d</button>\n <button style=\"padding:5px 14px;background:transparent;border:none;font-size:13px;cursor:pointer;color:#64748b;\">30d</button>\n <button style=\"padding:5px 14px;background:transparent;border:none;font-size:13px;cursor:pointer;color:#64748b;\">90d</button>\n </div>\n </div>\n <button style=\"padding:8px 16px;background:#4f46e5;color:#fff;border:none;border-radius:6px;font-size:13px;cursor:pointer;\">Export CSV</button>\n </nav>\n <div style=\"padding:28px;\">\n <div style=\"display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px;\">\n <div style=\"background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:20px;\"><p style=\"margin:0 0 6px;font-size:12px;font-weight:600;color:#64748b;text-transform:uppercase;\">Total Revenue</p><p style=\"margin:0;font-size:26px;font-weight:700;\">$84,231</p><p style=\"margin:6px 0 0;font-size:12px;color:#16a34a;\">\u2191 18.2% vs last period</p></div>\n <div style=\"background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:20px;\"><p style=\"margin:0 0 6px;font-size:12px;font-weight:600;color:#64748b;text-transform:uppercase;\">Visitors</p><p style=\"margin:0;font-size:26px;font-weight:700;\">24,891</p><p style=\"margin:6px 0 0;font-size:12px;color:#16a34a;\">\u2191 7.4%</p></div>\n <div style=\"background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:20px;\"><p style=\"margin:0 0 6px;font-size:12px;font-weight:600;color:#64748b;text-transform:uppercase;\">Conversion</p><p style=\"margin:0;font-size:26px;font-weight:700;\">3.6%</p><p style=\"margin:6px 0 0;font-size:12px;color:#ef4444;\">\u2193 0.4%</p></div>\n <div style=\"background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:20px;\"><p style=\"margin:0 0 6px;font-size:12px;font-weight:600;color:#64748b;text-transform:uppercase;\">Avg Order</p><p style=\"margin:0;font-size:26px;font-weight:700;\">$94.30</p><p style=\"margin:6px 0 0;font-size:12px;color:#16a34a;\">\u2191 10.1%</p></div>\n </div>\n <div style=\"display:grid;grid-template-columns:2fr 1fr;gap:16px;\">\n <div style=\"background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:24px;\">\n <h3 style=\"margin:0 0 20px;font-size:15px;\">Revenue Over Time</h3>\n <div style=\"display:flex;align-items:flex-end;gap:8px;height:120px;\">\n <div style=\"flex:1;background:#ede9fe;border-radius:4px 4px 0 0;height:40%;\"></div>\n <div style=\"flex:1;background:#ede9fe;border-radius:4px 4px 0 0;height:55%;\"></div>\n <div style=\"flex:1;background:#ede9fe;border-radius:4px 4px 0 0;height:48%;\"></div>\n <div style=\"flex:1;background:#ede9fe;border-radius:4px 4px 0 0;height:72%;\"></div>\n <div style=\"flex:1;background:#ede9fe;border-radius:4px 4px 0 0;height:60%;\"></div>\n <div style=\"flex:1;background:#4f46e5;border-radius:4px 4px 0 0;height:85%;\"></div>\n <div style=\"flex:1;background:#4f46e5;border-radius:4px 4px 0 0;height:100%;\"></div>\n </div>\n <div style=\"display:flex;gap:8px;margin-top:8px;font-size:11px;color:#94a3b8;\">\n <span style=\"flex:1;text-align:center;\">Mon</span><span style=\"flex:1;text-align:center;\">Tue</span><span style=\"flex:1;text-align:center;\">Wed</span><span style=\"flex:1;text-align:center;\">Thu</span><span style=\"flex:1;text-align:center;\">Fri</span><span style=\"flex:1;text-align:center;\">Sat</span><span style=\"flex:1;text-align:center;\">Sun</span>\n </div>\n </div>\n <div style=\"background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:24px;\">\n <h3 style=\"margin:0 0 16px;font-size:15px;\">Top Sources</h3>\n <div style=\"font-size:13px;\">\n <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;\"><span>Google</span><div style=\"display:flex;align-items:center;gap:8px;\"><div style=\"width:80px;height:6px;background:#e2e8f0;border-radius:3px;overflow:hidden;\"><div style=\"width:62%;height:100%;background:#4f46e5;border-radius:3px;\"></div></div><span style=\"color:#888;font-size:12px;\">62%</span></div></div>\n <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;\"><span>Direct</span><div style=\"display:flex;align-items:center;gap:8px;\"><div style=\"width:80px;height:6px;background:#e2e8f0;border-radius:3px;overflow:hidden;\"><div style=\"width:22%;height:100%;background:#818cf8;border-radius:3px;\"></div></div><span style=\"color:#888;font-size:12px;\">22%</span></div></div>\n <div style=\"display:flex;justify-content:space-between;align-items:center;\"><span>Social</span><div style=\"display:flex;align-items:center;gap:8px;\"><div style=\"width:80px;height:6px;background:#e2e8f0;border-radius:3px;overflow:hidden;\"><div style=\"width:16%;height:100%;background:#c4b5fd;border-radius:3px;\"></div></div><span style=\"color:#888;font-size:12px;\">16%</span></div></div>\n </div>\n </div>\n </div>\n </div>\n</body>\n</html>\n"}, {"name": "minor_diff", "rewards": {"format": 0.5, "validity": 1.0, "structural": 1.0, "text_block": 1.0, "position": 0.9971, "color": 0.9924, "clip": 0.8625, "ssim": 0.7687, "total": 0.9132}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/12/minor_diff.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Analytics</title></head>\n<body style=\"margin:0;font-family:sans-serif;background:#888888;color:#1e293b;\">\n <nav style=\"background:#fff;border-bottom:1px solid #e2e8f0;padding:14px 28px;display:flex;align-items:center;justify-content:space-between;\">\n <div style=\"display:flex;align-items:center;gap:24px;\">\n <span style=\"font-weight:700;font-size:13px;color:#4f46e5;\">Analytics</span>\n <div style=\"display:flex;gap:4px;background:#f1f5f9;border-radius:6px;padding:3px;\">\n <button style=\"padding:5px 14px;background:#fff;border:none;border-radius:4px;font-size:9px;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.1);\">7d</button>\n <button style=\"padding:5px 14px;background:transparent;border:none;font-size:13px;cursor:pointer;color:#64748b;\">30d</button>\n <button style=\"padding:5px 14px;background:transparent;border:none;font-size:13px;cursor:pointer;color:#64748b;\">90d</button>\n </div>\n </div>\n <button style=\"padding:8px 16px;background:#4f46e5;color:#fff;border:none;border-radius:6px;font-size:13px;cursor:pointer;\">Export CSV</button>\n </nav>\n <div style=\"padding:28px;\">\n <div style=\"display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px;\">\n <div style=\"background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:20px;\"><p style=\"margin:0 0 6px;font-size:12px;font-weight:600;color:#64748b;text-transform:uppercase;\">Total Revenue</p><p style=\"margin:0;font-size:26px;font-weight:700;\">$84,231</p><p style=\"margin:6px 0 0;font-size:12px;color:#16a34a;\">\u2191 18.2% vs last period</p></div>\n <div style=\"background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:20px;\"><p style=\"margin:0 0 6px;font-size:12px;font-weight:600;color:#64748b;text-transform:uppercase;\">Visitors</p><p style=\"margin:0;font-size:26px;font-weight:700;\">24,891</p><p style=\"margin:6px 0 0;font-size:12px;color:#16a34a;\">\u2191 7.4%</p></div>\n <div style=\"background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:20px;\"><p style=\"margin:0 0 6px;font-size:12px;font-weight:600;color:#64748b;text-transform:uppercase;\">Conversion</p><p style=\"margin:0;font-size:26px;font-weight:700;\">3.6%</p><p style=\"margin:6px 0 0;font-size:12px;color:#ef4444;\">\u2193 0.4%</p></div>\n <div style=\"background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:20px;\"><p style=\"margin:0 0 6px;font-size:12px;font-weight:600;color:#64748b;text-transform:uppercase;\">Avg Order</p><p style=\"margin:0;font-size:26px;font-weight:700;\">$94.30</p><p style=\"margin:6px 0 0;font-size:12px;color:#16a34a;\">\u2191 10.1%</p></div>\n </div>\n <div style=\"display:grid;grid-template-columns:2fr 1fr;gap:16px;\">\n <div style=\"background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:24px;\">\n <h3 style=\"margin:0 0 20px;font-size:15px;\">Revenue Over Time</h3>\n <div style=\"display:flex;align-items:flex-end;gap:8px;height:120px;\">\n <div style=\"flex:1;background:#ede9fe;border-radius:4px 4px 0 0;height:40%;\"></div>\n <div style=\"flex:1;background:#ede9fe;border-radius:4px 4px 0 0;height:55%;\"></div>\n <div style=\"flex:1;background:#ede9fe;border-radius:4px 4px 0 0;height:48%;\"></div>\n <div style=\"flex:1;background:#ede9fe;border-radius:4px 4px 0 0;height:72%;\"></div>\n <div style=\"flex:1;background:#ede9fe;border-radius:4px 4px 0 0;height:60%;\"></div>\n <div style=\"flex:1;background:#4f46e5;border-radius:4px 4px 0 0;height:85%;\"></div>\n <div style=\"flex:1;background:#4f46e5;border-radius:4px 4px 0 0;height:100%;\"></div>\n </div>\n <div style=\"display:flex;gap:8px;margin-top:8px;font-size:11px;color:#94a3b8;\">\n <span style=\"flex:1;text-align:center;\">Mon</span><span style=\"flex:1;text-align:center;\">Tue</span><span style=\"flex:1;text-align:center;\">Wed</span><span style=\"flex:1;text-align:center;\">Thu</span><span style=\"flex:1;text-align:center;\">Fri</span><span style=\"flex:1;text-align:center;\">Sat</span><span style=\"flex:1;text-align:center;\">Sun</span>\n </div>\n </div>\n <div style=\"background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:24px;\">\n <h3 style=\"margin:0 0 16px;font-size:15px;\">Top Sources</h3>\n <div style=\"font-size:13px;\">\n <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;\"><span>Google</span><div style=\"display:flex;align-items:center;gap:8px;\"><div style=\"width:80px;height:6px;background:#e2e8f0;border-radius:3px;overflow:hidden;\"><div style=\"width:62%;height:100%;background:#4f46e5;border-radius:3px;\"></div></div><span style=\"color:#888;font-size:12px;\">62%</span></div></div>\n <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;\"><span>Direct</span><div style=\"display:flex;align-items:center;gap:8px;\"><div style=\"width:80px;height:6px;background:#e2e8f0;border-radius:3px;overflow:hidden;\"><div style=\"width:22%;height:100%;background:#818cf8;border-radius:3px;\"></div></div><span style=\"color:#888;font-size:12px;\">22%</span></div></div>\n <div style=\"display:flex;justify-content:space-between;align-items:center;\"><span>Social</span><div style=\"display:flex;align-items:center;gap:8px;\"><div style=\"width:80px;height:6px;background:#e2e8f0;border-radius:3px;overflow:hidden;\"><div style=\"width:16%;height:100%;background:#c4b5fd;border-radius:3px;\"></div></div><span style=\"color:#888;font-size:12px;\">16%</span></div></div>\n </div>\n </div>\n </div>\n </div>\n</body>\n</html>\n"}, {"name": "bad_colors", "rewards": {"format": 0.5, "validity": 1.0, "structural": 1.0, "text_block": 1.0, "position": 1.0, "color": 0.0, "clip": 0.1921, "ssim": 0.4925, "total": 0.5881}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/12/bad_colors.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Analytics</title></head>\n<body style=\"margin:0;font-family:sans-serif;background:#070503;color:#e1d6c4;\">\n <nav style=\"background:#fff;border-bottom:1px solid #1d170f;padding:14px 28px;display:flex;align-items:center;justify-content:space-between;\">\n <div style=\"display:flex;align-items:center;gap:24px;\">\n <span style=\"font-weight:700;font-size:17px;color:#b0b91a;\">Analytics</span>\n <div style=\"display:flex;gap:4px;background:#0e0a06;border-radius:6px;padding:3px;\">\n <button style=\"padding:5px 14px;background:#fff;border:none;border-radius:4px;font-size:13px;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.1);\">7d</button>\n <button style=\"padding:5px 14px;background:transparent;border:none;font-size:13px;cursor:pointer;color:#9b8b74;\">30d</button>\n <button style=\"padding:5px 14px;background:transparent;border:none;font-size:13px;cursor:pointer;color:#9b8b74;\">90d</button>\n </div>\n </div>\n <button style=\"padding:8px 16px;background:#b0b91a;color:#fff;border:none;border-radius:6px;font-size:13px;cursor:pointer;\">Export CSV</button>\n </nav>\n <div style=\"padding:28px;\">\n <div style=\"display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px;\">\n <div style=\"background:#fff;border:1px solid #1d170f;border-radius:10px;padding:20px;\"><p style=\"margin:0 0 6px;font-size:12px;font-weight:600;color:#9b8b74;text-transform:uppercase;\">Total Revenue</p><p style=\"margin:0;font-size:26px;font-weight:700;\">$84,231</p><p style=\"margin:6px 0 0;font-size:12px;color:#e95cb5;\">\u2191 18.2% vs last period</p></div>\n <div style=\"background:#fff;border:1px solid #1d170f;border-radius:10px;padding:20px;\"><p style=\"margin:0 0 6px;font-size:12px;font-weight:600;color:#9b8b74;text-transform:uppercase;\">Visitors</p><p style=\"margin:0;font-size:26px;font-weight:700;\">24,891</p><p style=\"margin:6px 0 0;font-size:12px;color:#e95cb5;\">\u2191 7.4%</p></div>\n <div style=\"background:#fff;border:1px solid #1d170f;border-radius:10px;padding:20px;\"><p style=\"margin:0 0 6px;font-size:12px;font-weight:600;color:#9b8b74;text-transform:uppercase;\">Conversion</p><p style=\"margin:0;font-size:26px;font-weight:700;\">3.6%</p><p style=\"margin:6px 0 0;font-size:12px;color:#10bbbb;\">\u2193 0.4%</p></div>\n <div style=\"background:#fff;border:1px solid #1d170f;border-radius:10px;padding:20px;\"><p style=\"margin:0 0 6px;font-size:12px;font-weight:600;color:#9b8b74;text-transform:uppercase;\">Avg Order</p><p style=\"margin:0;font-size:26px;font-weight:700;\">$94.30</p><p style=\"margin:6px 0 0;font-size:12px;color:#e95cb5;\">\u2191 10.1%</p></div>\n </div>\n <div style=\"display:grid;grid-template-columns:2fr 1fr;gap:16px;\">\n <div style=\"background:#fff;border:1px solid #1d170f;border-radius:10px;padding:24px;\">\n <h3 style=\"margin:0 0 20px;font-size:15px;\">Revenue Over Time</h3>\n <div style=\"display:flex;align-items:flex-end;gap:8px;height:120px;\">\n <div style=\"flex:1;background:#121601;border-radius:4px 4px 0 0;height:40%;\"></div>\n <div style=\"flex:1;background:#121601;border-radius:4px 4px 0 0;height:55%;\"></div>\n <div style=\"flex:1;background:#121601;border-radius:4px 4px 0 0;height:48%;\"></div>\n <div style=\"flex:1;background:#121601;border-radius:4px 4px 0 0;height:72%;\"></div>\n <div style=\"flex:1;background:#121601;border-radius:4px 4px 0 0;height:60%;\"></div>\n <div style=\"flex:1;background:#b0b91a;border-radius:4px 4px 0 0;height:85%;\"></div>\n <div style=\"flex:1;background:#b0b91a;border-radius:4px 4px 0 0;height:100%;\"></div>\n </div>\n <div style=\"display:flex;gap:8px;margin-top:8px;font-size:11px;color:#6b5c47;\">\n <span style=\"flex:1;text-align:center;\">Mon</span><span style=\"flex:1;text-align:center;\">Tue</span><span style=\"flex:1;text-align:center;\">Wed</span><span style=\"flex:1;text-align:center;\">Thu</span><span style=\"flex:1;text-align:center;\">Fri</span><span style=\"flex:1;text-align:center;\">Sat</span><span style=\"flex:1;text-align:center;\">Sun</span>\n </div>\n </div>\n <div style=\"background:#fff;border:1px solid #1d170f;border-radius:10px;padding:24px;\">\n <h3 style=\"margin:0 0 16px;font-size:15px;\">Top Sources</h3>\n <div style=\"font-size:13px;\">\n <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;\"><span>Google</span><div style=\"display:flex;align-items:center;gap:8px;\"><div style=\"width:80px;height:6px;background:#1d170f;border-radius:3px;overflow:hidden;\"><div style=\"width:62%;height:100%;background:#b0b91a;border-radius:3px;\"></div></div><span style=\"color:#888;font-size:12px;\">62%</span></div></div>\n <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;\"><span>Direct</span><div style=\"display:flex;align-items:center;gap:8px;\"><div style=\"width:80px;height:6px;background:#1d170f;border-radius:3px;overflow:hidden;\"><div style=\"width:22%;height:100%;background:#7e7307;border-radius:3px;\"></div></div><span style=\"color:#888;font-size:12px;\">22%</span></div></div>\n <div style=\"display:flex;justify-content:space-between;align-items:center;\"><span>Social</span><div style=\"display:flex;align-items:center;gap:8px;\"><div style=\"width:80px;height:6px;background:#1d170f;border-radius:3px;overflow:hidden;\"><div style=\"width:16%;height:100%;background:#3b4a02;border-radius:3px;\"></div></div><span style=\"color:#888;font-size:12px;\">16%</span></div></div>\n </div>\n </div>\n </div>\n </div>\n</body>\n</html>\n"}, {"name": "no_layout", "rewards": {"format": 0.5, "validity": 1.0, "structural": 0.72, "text_block": 0.0781, "position": 0.6328, "color": 0.5315, "clip": 0.4827, "ssim": 0.6665, "total": 0.4528}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/12/no_layout.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Analytics</title></head>\n<body style=\"font-family:sans-serif; background:#f8fafc; color:#1e293b\">\n <nav style=\"background:#fff; border-bottom:1px solid #e2e8f0\">\n <div style=\"gap:24px\">\n <span style=\"font-weight:700; font-size:17px; color:#4f46e5\">Analytics</span>\n <div style=\"gap:4px; background:#f1f5f9\">\n <button style=\"background:#fff; border:none; font-size:13px; cursor:pointer\">7d</button>\n <button style=\"background:transparent; border:none; font-size:13px; cursor:pointer; color:#64748b\">30d</button>\n <button style=\"background:transparent; border:none; font-size:13px; cursor:pointer; color:#64748b\">90d</button>\n </div>\n </div>\n <button style=\"background:#4f46e5; color:#fff; border:none; font-size:13px; cursor:pointer\">Export CSV</button>\n </nav>\n <div style=\"\">\n <div style=\"gap:16px\">\n <div style=\"background:#fff; border:1px solid #e2e8f0\"><p style=\"font-size:12px; font-weight:600; color:#64748b; text-transform:uppercase\">Total Revenue</p><p style=\"font-size:26px; font-weight:700\">$84,231</p><p style=\"font-size:12px; color:#16a34a\">\u2191 18.2% vs last period</p></div>\n <div style=\"background:#fff; border:1px solid #e2e8f0\"><p style=\"font-size:12px; font-weight:600; color:#64748b; text-transform:uppercase\">Visitors</p><p style=\"font-size:26px; font-weight:700\">24,891</p><p style=\"font-size:12px; color:#16a34a\">\u2191 7.4%</p></div>\n <div style=\"background:#fff; border:1px solid #e2e8f0\"><p style=\"font-size:12px; font-weight:600; color:#64748b; text-transform:uppercase\">Conversion</p><p style=\"font-size:26px; font-weight:700\">3.6%</p><p style=\"font-size:12px; color:#ef4444\">\u2193 0.4%</p></div>\n <div style=\"background:#fff; border:1px solid #e2e8f0\"><p style=\"font-size:12px; font-weight:600; color:#64748b; text-transform:uppercase\">Avg Order</p><p style=\"font-size:26px; font-weight:700\">$94.30</p><p style=\"font-size:12px; color:#16a34a\">\u2191 10.1%</p></div>\n </div>\n <div style=\"gap:16px\">\n <div style=\"background:#fff; border:1px solid #e2e8f0\">\n <h3 style=\"font-size:15px\">Revenue Over Time</h3>\n <div style=\"gap:8px\">\n <div style=\"background:#ede9fe\"></div>\n <div style=\"background:#ede9fe\"></div>\n <div style=\"background:#ede9fe\"></div>\n <div style=\"background:#ede9fe\"></div>\n <div style=\"background:#ede9fe\"></div>\n <div style=\"background:#4f46e5\"></div>\n <div style=\"background:#4f46e5\"></div>\n </div>\n <div style=\"gap:8px; font-size:11px; color:#94a3b8\">\n <span style=\"text-align:center\">Mon</span><span style=\"text-align:center\">Tue</span><span style=\"text-align:center\">Wed</span><span style=\"text-align:center\">Thu</span><span style=\"text-align:center\">Fri</span><span style=\"text-align:center\">Sat</span><span style=\"text-align:center\">Sun</span>\n </div>\n </div>\n <div style=\"background:#fff; border:1px solid #e2e8f0\">\n <h3 style=\"font-size:15px\">Top Sources</h3>\n <div style=\"font-size:13px\">\n <div style=\"\"><span>Google</span><div style=\"gap:8px\"><div style=\"background:#e2e8f0\"><div style=\"background:#4f46e5\"></div></div><span style=\"color:#888; font-size:12px\">62%</span></div></div>\n <div style=\"\"><span>Direct</span><div style=\"gap:8px\"><div style=\"background:#e2e8f0\"><div style=\"background:#818cf8\"></div></div><span style=\"color:#888; font-size:12px\">22%</span></div></div>\n <div style=\"\"><span>Social</span><div style=\"gap:8px\"><div style=\"background:#e2e8f0\"><div style=\"background:#c4b5fd\"></div></div><span style=\"color:#888; font-size:12px\">16%</span></div></div>\n </div>\n </div>\n </div>\n </div>\n</body>\n</html>\n"}, {"name": "half_styled", "rewards": {"format": 0.5, "validity": 1.0, "structural": 0.86, "text_block": 0.2245, "position": 0.8042, "color": 0.526, "clip": 0.1986, "ssim": 0.6635, "total": 0.449}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/12/half_styled.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Analytics</title></head>\n<body style=\"margin:0; background:#f8fafc\">\n <nav style=\"background:#fff; padding:14px 28px; align-items:center\">\n <div style=\"display:flex; gap:24px\">\n <span style=\"font-weight:700; color:#4f46e5\">Analytics</span>\n <div style=\"display:flex; background:#f1f5f9; padding:3px\">\n <button style=\"padding:5px 14px; border:none; font-size:13px; box-shadow:0 1px 3px rgba(0,0,0,.1)\">7d</button>\n <button style=\"padding:5px 14px; border:none; cursor:pointer\">30d</button>\n <button style=\"padding:5px 14px; border:none; cursor:pointer\">90d</button>\n </div>\n </div>\n <button style=\"padding:8px 16px; color:#fff; border-radius:6px; cursor:pointer\">Export CSV</button>\n </nav>\n <div style=\"padding:28px\">\n <div style=\"display:grid; gap:16px\">\n <div style=\"background:#fff; border-radius:10px\"><p style=\"margin:0 0 6px; font-weight:600; text-transform:uppercase\">Total Revenue</p><p style=\"margin:0; font-weight:700\">$84,231</p><p style=\"margin:6px 0 0; color:#16a34a\">\u2191 18.2% vs last period</p></div>\n <div style=\"background:#fff; border-radius:10px\"><p style=\"margin:0 0 6px; font-weight:600; text-transform:uppercase\">Visitors</p><p style=\"margin:0; font-weight:700\">24,891</p><p style=\"margin:6px 0 0; color:#16a34a\">\u2191 7.4%</p></div>\n <div style=\"background:#fff; border-radius:10px\"><p style=\"margin:0 0 6px; font-weight:600; text-transform:uppercase\">Conversion</p><p style=\"margin:0; font-weight:700\">3.6%</p><p style=\"margin:6px 0 0; color:#ef4444\">\u2193 0.4%</p></div>\n <div style=\"background:#fff; border-radius:10px\"><p style=\"margin:0 0 6px; font-weight:600; text-transform:uppercase\">Avg Order</p><p style=\"margin:0; font-weight:700\">$94.30</p><p style=\"margin:6px 0 0; color:#16a34a\">\u2191 10.1%</p></div>\n </div>\n <div style=\"display:grid; gap:16px\">\n <div style=\"background:#fff; border-radius:10px\">\n <h3 style=\"margin:0 0 20px\">Revenue Over Time</h3>\n <div style=\"display:flex; gap:8px\">\n <div style=\"flex:1; border-radius:4px 4px 0 0\"></div>\n <div style=\"flex:1; border-radius:4px 4px 0 0\"></div>\n <div style=\"flex:1; border-radius:4px 4px 0 0\"></div>\n <div style=\"flex:1; border-radius:4px 4px 0 0\"></div>\n <div style=\"flex:1; border-radius:4px 4px 0 0\"></div>\n <div style=\"flex:1; border-radius:4px 4px 0 0\"></div>\n <div style=\"flex:1; border-radius:4px 4px 0 0\"></div>\n </div>\n <div style=\"display:flex; margin-top:8px; color:#94a3b8\">\n <span style=\"flex:1\">Mon</span><span style=\"flex:1\">Tue</span><span style=\"flex:1\">Wed</span><span style=\"flex:1\">Thu</span><span style=\"flex:1\">Fri</span><span style=\"flex:1\">Sat</span><span style=\"flex:1\">Sun</span>\n </div>\n </div>\n <div style=\"background:#fff; border-radius:10px\">\n <h3 style=\"margin:0 0 16px\">Top Sources</h3>\n <div style=\"font-size:13px\">\n <div style=\"display:flex; align-items:center\"><span>Google</span><div style=\"display:flex; gap:8px\"><div style=\"width:80px; background:#e2e8f0; overflow:hidden\"><div style=\"width:62%; background:#4f46e5\"></div></div><span style=\"color:#888\">62%</span></div></div>\n <div style=\"display:flex; align-items:center\"><span>Direct</span><div style=\"display:flex; gap:8px\"><div style=\"width:80px; background:#e2e8f0; overflow:hidden\"><div style=\"width:22%; background:#818cf8\"></div></div><span style=\"color:#888\">22%</span></div></div>\n <div style=\"display:flex; align-items:center\"><span>Social</span><div style=\"display:flex; gap:8px\"><div style=\"width:80px; background:#e2e8f0; overflow:hidden\"><div style=\"width:16%; background:#c4b5fd\"></div></div><span style=\"color:#888\">16%</span></div></div>\n </div>\n </div>\n </div>\n </div>\n</body>\n</html>\n"}, {"name": "no_style", "rewards": {"format": 0.5, "validity": 1.0, "structural": 0.5, "text_block": 0.0882, "position": 0.7104, "color": 0.5203, "clip": 0.0, "ssim": 0.6809, "total": 0.3433}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/12/no_style.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Analytics</title></head>\n<body>\n <nav>\n <div>\n <span>Analytics</span>\n <div>\n <button>7d</button>\n <button>30d</button>\n <button>90d</button>\n </div>\n </div>\n <button>Export CSV</button>\n </nav>\n <div>\n <div>\n <div><p>Total Revenue</p><p>$84,231</p><p>\u2191 18.2% vs last period</p></div>\n <div><p>Visitors</p><p>24,891</p><p>\u2191 7.4%</p></div>\n <div><p>Conversion</p><p>3.6%</p><p>\u2193 0.4%</p></div>\n <div><p>Avg Order</p><p>$94.30</p><p>\u2191 10.1%</p></div>\n </div>\n <div>\n <div>\n <h3>Revenue Over Time</h3>\n <div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n </div>\n <div>\n <span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span>\n </div>\n </div>\n <div>\n <h3>Top Sources</h3>\n <div>\n <div><span>Google</span><div><div><div></div></div><span>62%</span></div></div>\n <div><span>Direct</span><div><div><div></div></div><span>22%</span></div></div>\n <div><span>Social</span><div><div><div></div></div><span>16%</span></div></div>\n </div>\n </div>\n </div>\n </div>\n</body>\n</html>\n"}, {"name": "blank", "rewards": {"format": 0.5, "validity": 0.75, "structural": 0.0733, "text_block": 0.0, "position": 0.0, "color": 0.5211, "clip": 0.0, "ssim": 0.7709, "total": 0.0}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/12/blank.png", "html": "<!DOCTYPE html><html><head><title>Page</title></head><body style=\"background:#fff;\"></body></html>"}]}, {"id": 13, "difficulty": "hard", "source": "hard/3", "reference_image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/13/reference.png", "reference_html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Docs</title></head>\n<body style=\"margin:0;font-family:sans-serif;background:#fff;color:#1e293b;display:flex;flex-direction:column;min-height:100vh;\">\n <nav style=\"border-bottom:1px solid #e2e8f0;padding:14px 28px;display:flex;align-items:center;justify-content:space-between;background:#fff;position:sticky;top:0;z-index:10;\">\n <div style=\"display:flex;align-items:center;gap:32px;\">\n <span style=\"font-weight:700;font-size:17px;color:#4f46e5;\">Docs</span>\n <div style=\"display:flex;gap:20px;font-size:14px;color:#64748b;\">\n <a href=\"#\" style=\"color:#4f46e5;text-decoration:none;font-weight:500;\">Guide</a>\n <a href=\"#\" style=\"color:#64748b;text-decoration:none;\">API Reference</a>\n <a href=\"#\" style=\"color:#64748b;text-decoration:none;\">Examples</a>\n </div>\n </div>\n <div style=\"background:#f1f5f9;border-radius:6px;padding:7px 14px;font-size:13px;color:#94a3b8;width:200px;\">\ud83d\udd0d Search docs...</div>\n </nav>\n <div style=\"display:flex;flex:1;max-width:1100px;margin:0 auto;padding:32px 20px;gap:40px;width:100%;box-sizing:border-box;\">\n <aside style=\"width:200px;flex-shrink:0;\">\n <p style=\"font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#94a3b8;margin:0 0 12px;\">Getting Started</p>\n <nav style=\"font-size:14px;margin-bottom:24px;\">\n <a style=\"display:block;padding:5px 0;color:#4f46e5;font-weight:600;text-decoration:none;\">Introduction</a>\n <a style=\"display:block;padding:5px 0;color:#64748b;text-decoration:none;\">Installation</a>\n <a style=\"display:block;padding:5px 0;color:#64748b;text-decoration:none;\">Quick Start</a>\n </nav>\n <p style=\"font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#94a3b8;margin:0 0 12px;\">Core Concepts</p>\n <nav style=\"font-size:14px;margin-bottom:24px;\">\n <a style=\"display:block;padding:5px 0;color:#64748b;text-decoration:none;\">Environments</a>\n <a style=\"display:block;padding:5px 0;color:#64748b;text-decoration:none;\">Actions & Obs</a>\n <a style=\"display:block;padding:5px 0;color:#64748b;text-decoration:none;\">Rewards</a>\n </nav>\n <p style=\"font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#94a3b8;margin:0 0 12px;\">API</p>\n <nav style=\"font-size:14px;\">\n <a style=\"display:block;padding:5px 0;color:#64748b;text-decoration:none;\">POST /reset</a>\n <a style=\"display:block;padding:5px 0;color:#64748b;text-decoration:none;\">POST /step</a>\n <a style=\"display:block;padding:5px 0;color:#64748b;text-decoration:none;\">GET /state</a>\n </nav>\n </aside>\n <main style=\"flex:1;min-width:0;\">\n <div style=\"display:flex;gap:8px;font-size:12px;color:#94a3b8;margin-bottom:24px;\">\n <span>Docs</span><span>\u203a</span><span>Getting Started</span><span>\u203a</span><span style=\"color:#4f46e5;\">Introduction</span>\n </div>\n <h1 style=\"font-size:30px;margin:0 0 12px;\">Introduction</h1>\n <p style=\"color:#64748b;font-size:15px;margin:0 0 28px;line-height:1.7;\">OpenEnv is a standard HTTP interface for building reinforcement learning environments. It provides a simple REST API that any agent can interact with, regardless of programming language.</p>\n <div style=\"background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:20px;margin-bottom:28px;\">\n <p style=\"margin:0 0 10px;font-size:13px;font-weight:600;color:#64748b;\">INSTALLATION</p>\n <code style=\"font-family:monospace;font-size:13px;color:#4f46e5;\">pip install openenv-core</code>\n </div>\n <h2 style=\"font-size:20px;margin:0 0 14px;\">How it works</h2>\n <p style=\"color:#475569;line-height:1.8;margin-bottom:16px;\">Each environment exposes three endpoints: <code style=\"background:#f1f5f9;padding:2px 6px;border-radius:4px;font-size:13px;\">/reset</code> to start an episode, <code style=\"background:#f1f5f9;padding:2px 6px;border-radius:4px;font-size:13px;\">/step</code> to submit an action, and <code style=\"background:#f1f5f9;padding:2px 6px;border-radius:4px;font-size:13px;\">/state</code> to inspect current state.</p>\n <div style=\"display:flex;gap:12px;margin-top:32px;font-size:14px;\">\n <button style=\"padding:10px 20px;background:#4f46e5;color:#fff;border:none;border-radius:6px;cursor:pointer;\">Next: Installation \u2192</button>\n </div>\n </main>\n </div>\n</body>\n</html>\n", "variants": [{"name": "perfect", "rewards": {"format": 0.5, "validity": 1.0, "structural": 1.0, "text_block": 1.0, "position": 1.0, "color": 1.0, "clip": 1.0, "ssim": 1.0, "total": 0.9773}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/13/perfect.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Docs</title></head>\n<body style=\"margin:0;font-family:sans-serif;background:#fff;color:#1e293b;display:flex;flex-direction:column;min-height:100vh;\">\n <nav style=\"border-bottom:1px solid #e2e8f0;padding:14px 28px;display:flex;align-items:center;justify-content:space-between;background:#fff;position:sticky;top:0;z-index:10;\">\n <div style=\"display:flex;align-items:center;gap:32px;\">\n <span style=\"font-weight:700;font-size:17px;color:#4f46e5;\">Docs</span>\n <div style=\"display:flex;gap:20px;font-size:14px;color:#64748b;\">\n <a href=\"#\" style=\"color:#4f46e5;text-decoration:none;font-weight:500;\">Guide</a>\n <a href=\"#\" style=\"color:#64748b;text-decoration:none;\">API Reference</a>\n <a href=\"#\" style=\"color:#64748b;text-decoration:none;\">Examples</a>\n </div>\n </div>\n <div style=\"background:#f1f5f9;border-radius:6px;padding:7px 14px;font-size:13px;color:#94a3b8;width:200px;\">\ud83d\udd0d Search docs...</div>\n </nav>\n <div style=\"display:flex;flex:1;max-width:1100px;margin:0 auto;padding:32px 20px;gap:40px;width:100%;box-sizing:border-box;\">\n <aside style=\"width:200px;flex-shrink:0;\">\n <p style=\"font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#94a3b8;margin:0 0 12px;\">Getting Started</p>\n <nav style=\"font-size:14px;margin-bottom:24px;\">\n <a style=\"display:block;padding:5px 0;color:#4f46e5;font-weight:600;text-decoration:none;\">Introduction</a>\n <a style=\"display:block;padding:5px 0;color:#64748b;text-decoration:none;\">Installation</a>\n <a style=\"display:block;padding:5px 0;color:#64748b;text-decoration:none;\">Quick Start</a>\n </nav>\n <p style=\"font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#94a3b8;margin:0 0 12px;\">Core Concepts</p>\n <nav style=\"font-size:14px;margin-bottom:24px;\">\n <a style=\"display:block;padding:5px 0;color:#64748b;text-decoration:none;\">Environments</a>\n <a style=\"display:block;padding:5px 0;color:#64748b;text-decoration:none;\">Actions & Obs</a>\n <a style=\"display:block;padding:5px 0;color:#64748b;text-decoration:none;\">Rewards</a>\n </nav>\n <p style=\"font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#94a3b8;margin:0 0 12px;\">API</p>\n <nav style=\"font-size:14px;\">\n <a style=\"display:block;padding:5px 0;color:#64748b;text-decoration:none;\">POST /reset</a>\n <a style=\"display:block;padding:5px 0;color:#64748b;text-decoration:none;\">POST /step</a>\n <a style=\"display:block;padding:5px 0;color:#64748b;text-decoration:none;\">GET /state</a>\n </nav>\n </aside>\n <main style=\"flex:1;min-width:0;\">\n <div style=\"display:flex;gap:8px;font-size:12px;color:#94a3b8;margin-bottom:24px;\">\n <span>Docs</span><span>\u203a</span><span>Getting Started</span><span>\u203a</span><span style=\"color:#4f46e5;\">Introduction</span>\n </div>\n <h1 style=\"font-size:30px;margin:0 0 12px;\">Introduction</h1>\n <p style=\"color:#64748b;font-size:15px;margin:0 0 28px;line-height:1.7;\">OpenEnv is a standard HTTP interface for building reinforcement learning environments. It provides a simple REST API that any agent can interact with, regardless of programming language.</p>\n <div style=\"background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:20px;margin-bottom:28px;\">\n <p style=\"margin:0 0 10px;font-size:13px;font-weight:600;color:#64748b;\">INSTALLATION</p>\n <code style=\"font-family:monospace;font-size:13px;color:#4f46e5;\">pip install openenv-core</code>\n </div>\n <h2 style=\"font-size:20px;margin:0 0 14px;\">How it works</h2>\n <p style=\"color:#475569;line-height:1.8;margin-bottom:16px;\">Each environment exposes three endpoints: <code style=\"background:#f1f5f9;padding:2px 6px;border-radius:4px;font-size:13px;\">/reset</code> to start an episode, <code style=\"background:#f1f5f9;padding:2px 6px;border-radius:4px;font-size:13px;\">/step</code> to submit an action, and <code style=\"background:#f1f5f9;padding:2px 6px;border-radius:4px;font-size:13px;\">/state</code> to inspect current state.</p>\n <div style=\"display:flex;gap:12px;margin-top:32px;font-size:14px;\">\n <button style=\"padding:10px 20px;background:#4f46e5;color:#fff;border:none;border-radius:6px;cursor:pointer;\">Next: Installation \u2192</button>\n </div>\n </main>\n </div>\n</body>\n</html>\n"}, {"name": "minor_diff", "rewards": {"format": 0.5, "validity": 1.0, "structural": 1.0, "text_block": 0.9688, "position": 0.9958, "color": 0.9832, "clip": 0.9694, "ssim": 0.9665, "total": 0.9545}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/13/minor_diff.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Docs</title></head>\n<body style=\"margin:0;font-family:sans-serif;background:#fff;color:#1e293b;display:flex;flex-direction:column;min-height:100vh;\">\n <nav style=\"border-bottom:1px solid #e2e8f0;padding:14px 28px;display:flex;align-items:center;justify-content:space-between;background:#fff;position:sticky;top:0;z-index:10;\">\n <div style=\"display:flex;align-items:center;gap:32px;\">\n <span style=\"font-weight:700;font-size:13px;color:#4f46e5;\">Docs</span>\n <div style=\"display:flex;gap:20px;font-size:10px;color:#64748b;\">\n <a href=\"#\" style=\"color:#4f46e5;text-decoration:none;font-weight:500;\">Guide</a>\n <a href=\"#\" style=\"color:#64748b;text-decoration:none;\">API Reference</a>\n <a href=\"#\" style=\"color:#64748b;text-decoration:none;\">Examples</a>\n </div>\n </div>\n <div style=\"background:#888888;border-radius:6px;padding:7px 14px;font-size:13px;color:#94a3b8;width:200px;\">\ud83d\udd0d Search docs...</div>\n </nav>\n <div style=\"display:flex;flex:1;max-width:1100px;margin:0 auto;padding:32px 20px;gap:40px;width:100%;box-sizing:border-box;\">\n <aside style=\"width:200px;flex-shrink:0;\">\n <p style=\"font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#94a3b8;margin:0 0 12px;\">Getting Started</p>\n <nav style=\"font-size:14px;margin-bottom:24px;\">\n <a style=\"display:block;padding:5px 0;color:#4f46e5;font-weight:600;text-decoration:none;\">Introduction</a>\n <a style=\"display:block;padding:5px 0;color:#64748b;text-decoration:none;\">Installation</a>\n <a style=\"display:block;padding:5px 0;color:#64748b;text-decoration:none;\">Quick Start</a>\n </nav>\n <p style=\"font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#94a3b8;margin:0 0 12px;\">Core Concepts</p>\n <nav style=\"font-size:14px;margin-bottom:24px;\">\n <a style=\"display:block;padding:5px 0;color:#64748b;text-decoration:none;\">Environments</a>\n <a style=\"display:block;padding:5px 0;color:#64748b;text-decoration:none;\">Actions & Obs</a>\n <a style=\"display:block;padding:5px 0;color:#64748b;text-decoration:none;\">Rewards</a>\n </nav>\n <p style=\"font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#94a3b8;margin:0 0 12px;\">API</p>\n <nav style=\"font-size:14px;\">\n <a style=\"display:block;padding:5px 0;color:#64748b;text-decoration:none;\">POST /reset</a>\n <a style=\"display:block;padding:5px 0;color:#64748b;text-decoration:none;\">POST /step</a>\n <a style=\"display:block;padding:5px 0;color:#64748b;text-decoration:none;\">GET /state</a>\n </nav>\n </aside>\n <main style=\"flex:1;min-width:0;\">\n <div style=\"display:flex;gap:8px;font-size:12px;color:#94a3b8;margin-bottom:24px;\">\n <span>Docs</span><span>\u203a</span><span>Getting Started</span><span>\u203a</span><span style=\"color:#4f46e5;\">Introduction</span>\n </div>\n <h1 style=\"font-size:30px;margin:0 0 12px;\">Introduction</h1>\n <p style=\"color:#64748b;font-size:15px;margin:0 0 28px;line-height:1.7;\">OpenEnv is a standard HTTP interface for building reinforcement learning environments. It provides a simple REST API that any agent can interact with, regardless of programming language.</p>\n <div style=\"background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:20px;margin-bottom:28px;\">\n <p style=\"margin:0 0 10px;font-size:13px;font-weight:600;color:#64748b;\">INSTALLATION</p>\n <code style=\"font-family:monospace;font-size:13px;color:#4f46e5;\">pip install openenv-core</code>\n </div>\n <h2 style=\"font-size:20px;margin:0 0 14px;\">How it works</h2>\n <p style=\"color:#475569;line-height:1.8;margin-bottom:16px;\">Each environment exposes three endpoints: <code style=\"background:#f1f5f9;padding:2px 6px;border-radius:4px;font-size:13px;\">/reset</code> to start an episode, <code style=\"background:#f1f5f9;padding:2px 6px;border-radius:4px;font-size:13px;\">/step</code> to submit an action, and <code style=\"background:#f1f5f9;padding:2px 6px;border-radius:4px;font-size:13px;\">/state</code> to inspect current state.</p>\n <div style=\"display:flex;gap:12px;margin-top:32px;font-size:14px;\">\n <button style=\"padding:10px 20px;background:#4f46e5;color:#fff;border:none;border-radius:6px;cursor:pointer;\">Next: Installation \u2192</button>\n </div>\n </main>\n </div>\n</body>\n</html>\n"}, {"name": "bad_colors", "rewards": {"format": 0.5, "validity": 1.0, "structural": 1.0, "text_block": 1.0, "position": 1.0, "color": 0.498, "clip": 0.327, "ssim": 0.7843, "total": 0.7265}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/13/bad_colors.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Docs</title></head>\n<body style=\"margin:0;font-family:sans-serif;background:#fff;color:#e1d6c4;display:flex;flex-direction:column;min-height:100vh;\">\n <nav style=\"border-bottom:1px solid #1d170f;padding:14px 28px;display:flex;align-items:center;justify-content:space-between;background:#fff;position:sticky;top:0;z-index:10;\">\n <div style=\"display:flex;align-items:center;gap:32px;\">\n <span style=\"font-weight:700;font-size:17px;color:#b0b91a;\">Docs</span>\n <div style=\"display:flex;gap:20px;font-size:14px;color:#9b8b74;\">\n <a href=\"#\" style=\"color:#b0b91a;text-decoration:none;font-weight:500;\">Guide</a>\n <a href=\"#\" style=\"color:#9b8b74;text-decoration:none;\">API Reference</a>\n <a href=\"#\" style=\"color:#9b8b74;text-decoration:none;\">Examples</a>\n </div>\n </div>\n <div style=\"background:#0e0a06;border-radius:6px;padding:7px 14px;font-size:13px;color:#6b5c47;width:200px;\">\ud83d\udd0d Search docs...</div>\n </nav>\n <div style=\"display:flex;flex:1;max-width:1100px;margin:0 auto;padding:32px 20px;gap:40px;width:100%;box-sizing:border-box;\">\n <aside style=\"width:200px;flex-shrink:0;\">\n <p style=\"font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#6b5c47;margin:0 0 12px;\">Getting Started</p>\n <nav style=\"font-size:14px;margin-bottom:24px;\">\n <a style=\"display:block;padding:5px 0;color:#b0b91a;font-weight:600;text-decoration:none;\">Introduction</a>\n <a style=\"display:block;padding:5px 0;color:#9b8b74;text-decoration:none;\">Installation</a>\n <a style=\"display:block;padding:5px 0;color:#9b8b74;text-decoration:none;\">Quick Start</a>\n </nav>\n <p style=\"font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#6b5c47;margin:0 0 12px;\">Core Concepts</p>\n <nav style=\"font-size:14px;margin-bottom:24px;\">\n <a style=\"display:block;padding:5px 0;color:#9b8b74;text-decoration:none;\">Environments</a>\n <a style=\"display:block;padding:5px 0;color:#9b8b74;text-decoration:none;\">Actions & Obs</a>\n <a style=\"display:block;padding:5px 0;color:#9b8b74;text-decoration:none;\">Rewards</a>\n </nav>\n <p style=\"font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#6b5c47;margin:0 0 12px;\">API</p>\n <nav style=\"font-size:14px;\">\n <a style=\"display:block;padding:5px 0;color:#9b8b74;text-decoration:none;\">POST /reset</a>\n <a style=\"display:block;padding:5px 0;color:#9b8b74;text-decoration:none;\">POST /step</a>\n <a style=\"display:block;padding:5px 0;color:#9b8b74;text-decoration:none;\">GET /state</a>\n </nav>\n </aside>\n <main style=\"flex:1;min-width:0;\">\n <div style=\"display:flex;gap:8px;font-size:12px;color:#6b5c47;margin-bottom:24px;\">\n <span>Docs</span><span>\u203a</span><span>Getting Started</span><span>\u203a</span><span style=\"color:#b0b91a;\">Introduction</span>\n </div>\n <h1 style=\"font-size:30px;margin:0 0 12px;\">Introduction</h1>\n <p style=\"color:#9b8b74;font-size:15px;margin:0 0 28px;line-height:1.7;\">OpenEnv is a standard HTTP interface for building reinforcement learning environments. It provides a simple REST API that any agent can interact with, regardless of programming language.</p>\n <div style=\"background:#070503;border:1px solid #1d170f;border-radius:8px;padding:20px;margin-bottom:28px;\">\n <p style=\"margin:0 0 10px;font-size:13px;font-weight:600;color:#9b8b74;\">INSTALLATION</p>\n <code style=\"font-family:monospace;font-size:13px;color:#b0b91a;\">pip install openenv-core</code>\n </div>\n <h2 style=\"font-size:20px;margin:0 0 14px;\">How it works</h2>\n <p style=\"color:#b8aa96;line-height:1.8;margin-bottom:16px;\">Each environment exposes three endpoints: <code style=\"background:#0e0a06;padding:2px 6px;border-radius:4px;font-size:13px;\">/reset</code> to start an episode, <code style=\"background:#0e0a06;padding:2px 6px;border-radius:4px;font-size:13px;\">/step</code> to submit an action, and <code style=\"background:#0e0a06;padding:2px 6px;border-radius:4px;font-size:13px;\">/state</code> to inspect current state.</p>\n <div style=\"display:flex;gap:12px;margin-top:32px;font-size:14px;\">\n <button style=\"padding:10px 20px;background:#b0b91a;color:#fff;border:none;border-radius:6px;cursor:pointer;\">Next: Installation \u2192</button>\n </div>\n </main>\n </div>\n</body>\n</html>\n"}, {"name": "no_layout", "rewards": {"format": 0.5, "validity": 1.0, "structural": 0.7344, "text_block": 0.2588, "position": 0.8746, "color": 0.705, "clip": 0.5011, "ssim": 0.485, "total": 0.5278}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/13/no_layout.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Docs</title></head>\n<body style=\"font-family:sans-serif; background:#fff; color:#1e293b\">\n <nav style=\"border-bottom:1px solid #e2e8f0; background:#fff; z-index:10\">\n <div style=\"gap:32px\">\n <span style=\"font-weight:700; font-size:17px; color:#4f46e5\">Docs</span>\n <div style=\"gap:20px; font-size:14px; color:#64748b\">\n <a href=\"#\" style=\"color:#4f46e5; text-decoration:none; font-weight:500\">Guide</a>\n <a href=\"#\" style=\"color:#64748b; text-decoration:none\">API Reference</a>\n <a href=\"#\" style=\"color:#64748b; text-decoration:none\">Examples</a>\n </div>\n </div>\n <div style=\"background:#f1f5f9; font-size:13px; color:#94a3b8\">\ud83d\udd0d Search docs...</div>\n </nav>\n <div style=\"max-width:1100px; gap:40px\">\n <aside style=\"\">\n <p style=\"font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#94a3b8\">Getting Started</p>\n <nav style=\"font-size:14px\">\n <a style=\"color:#4f46e5; font-weight:600; text-decoration:none\">Introduction</a>\n <a style=\"color:#64748b; text-decoration:none\">Installation</a>\n <a style=\"color:#64748b; text-decoration:none\">Quick Start</a>\n </nav>\n <p style=\"font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#94a3b8\">Core Concepts</p>\n <nav style=\"font-size:14px\">\n <a style=\"color:#64748b; text-decoration:none\">Environments</a>\n <a style=\"color:#64748b; text-decoration:none\">Actions & Obs</a>\n <a style=\"color:#64748b; text-decoration:none\">Rewards</a>\n </nav>\n <p style=\"font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#94a3b8\">API</p>\n <nav style=\"font-size:14px\">\n <a style=\"color:#64748b; text-decoration:none\">POST /reset</a>\n <a style=\"color:#64748b; text-decoration:none\">POST /step</a>\n <a style=\"color:#64748b; text-decoration:none\">GET /state</a>\n </nav>\n </aside>\n <main style=\"\">\n <div style=\"gap:8px; font-size:12px; color:#94a3b8\">\n <span>Docs</span><span>\u203a</span><span>Getting Started</span><span>\u203a</span><span style=\"color:#4f46e5\">Introduction</span>\n </div>\n <h1 style=\"font-size:30px\">Introduction</h1>\n <p style=\"color:#64748b; font-size:15px; line-height:1.7\">OpenEnv is a standard HTTP interface for building reinforcement learning environments. It provides a simple REST API that any agent can interact with, regardless of programming language.</p>\n <div style=\"background:#f8fafc; border:1px solid #e2e8f0\">\n <p style=\"font-size:13px; font-weight:600; color:#64748b\">INSTALLATION</p>\n <code style=\"font-family:monospace; font-size:13px; color:#4f46e5\">pip install openenv-core</code>\n </div>\n <h2 style=\"font-size:20px\">How it works</h2>\n <p style=\"color:#475569; line-height:1.8\">Each environment exposes three endpoints: <code style=\"background:#f1f5f9; font-size:13px\">/reset</code> to start an episode, <code style=\"background:#f1f5f9; font-size:13px\">/step</code> to submit an action, and <code style=\"background:#f1f5f9; font-size:13px\">/state</code> to inspect current state.</p>\n <div style=\"gap:12px; font-size:14px\">\n <button style=\"background:#4f46e5; color:#fff; border:none; cursor:pointer\">Next: Installation \u2192</button>\n </div>\n </main>\n </div>\n</body>\n</html>\n"}, {"name": "half_styled", "rewards": {"format": 0.5, "validity": 1.0, "structural": 0.8438, "text_block": 0.078, "position": 0.7606, "color": 0.7099, "clip": 0.4068, "ssim": 0.5676, "total": 0.4636}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/13/half_styled.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Docs</title></head>\n<body style=\"margin:0; background:#fff; display:flex; min-height:100vh\">\n <nav style=\"border-bottom:1px solid #e2e8f0; display:flex; justify-content:space-between; position:sticky; z-index:10\">\n <div style=\"display:flex; gap:32px\">\n <span style=\"font-weight:700; color:#4f46e5\">Docs</span>\n <div style=\"display:flex; font-size:14px\">\n <a href=\"#\" style=\"color:#4f46e5; font-weight:500\">Guide</a>\n <a href=\"#\" style=\"color:#64748b\">API Reference</a>\n <a href=\"#\" style=\"color:#64748b\">Examples</a>\n </div>\n </div>\n <div style=\"background:#f1f5f9; padding:7px 14px; color:#94a3b8\">\ud83d\udd0d Search docs...</div>\n </nav>\n <div style=\"display:flex; max-width:1100px; padding:32px 20px; width:100%\">\n <aside style=\"width:200px\">\n <p style=\"font-size:11px; text-transform:uppercase; color:#94a3b8\">Getting Started</p>\n <nav style=\"font-size:14px\">\n <a style=\"display:block; color:#4f46e5; text-decoration:none\">Introduction</a>\n <a style=\"display:block; color:#64748b\">Installation</a>\n <a style=\"display:block; color:#64748b\">Quick Start</a>\n </nav>\n <p style=\"font-size:11px; text-transform:uppercase; color:#94a3b8\">Core Concepts</p>\n <nav style=\"font-size:14px\">\n <a style=\"display:block; color:#64748b\">Environments</a>\n <a style=\"display:block; color:#64748b\">Actions & Obs</a>\n <a style=\"display:block; color:#64748b\">Rewards</a>\n </nav>\n <p style=\"font-size:11px; text-transform:uppercase; color:#94a3b8\">API</p>\n <nav style=\"font-size:14px\">\n <a style=\"display:block; color:#64748b\">POST /reset</a>\n <a style=\"display:block; color:#64748b\">POST /step</a>\n <a style=\"display:block; color:#64748b\">GET /state</a>\n </nav>\n </aside>\n <main style=\"flex:1\">\n <div style=\"display:flex; font-size:12px; margin-bottom:24px\">\n <span>Docs</span><span>\u203a</span><span>Getting Started</span><span>\u203a</span><span style=\"color:#4f46e5\">Introduction</span>\n </div>\n <h1 style=\"font-size:30px\">Introduction</h1>\n <p style=\"color:#64748b; margin:0 0 28px\">OpenEnv is a standard HTTP interface for building reinforcement learning environments. It provides a simple REST API that any agent can interact with, regardless of programming language.</p>\n <div style=\"background:#f8fafc; border-radius:8px; margin-bottom:28px\">\n <p style=\"margin:0 0 10px; font-weight:600\">INSTALLATION</p>\n <code style=\"font-family:monospace; color:#4f46e5\">pip install openenv-core</code>\n </div>\n <h2 style=\"font-size:20px\">How it works</h2>\n <p style=\"color:#475569; margin-bottom:16px\">Each environment exposes three endpoints: <code style=\"background:#f1f5f9; border-radius:4px\">/reset</code> to start an episode, <code style=\"background:#f1f5f9; border-radius:4px\">/step</code> to submit an action, and <code style=\"background:#f1f5f9; border-radius:4px\">/state</code> to inspect current state.</p>\n <div style=\"display:flex; margin-top:32px\">\n <button style=\"padding:10px 20px; color:#fff; border-radius:6px\">Next: Installation \u2192</button>\n </div>\n </main>\n </div>\n</body>\n</html>\n"}, {"name": "no_style", "rewards": {"format": 0.5, "validity": 1.0, "structural": 0.5, "text_block": 0.2633, "position": 0.8761, "color": 0.6981, "clip": 0.0988, "ssim": 0.4855, "total": 0.4262}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/13/no_style.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Docs</title></head>\n<body>\n <nav>\n <div>\n <span>Docs</span>\n <div>\n <a href=\"#\">Guide</a>\n <a href=\"#\">API Reference</a>\n <a href=\"#\">Examples</a>\n </div>\n </div>\n <div>\ud83d\udd0d Search docs...</div>\n </nav>\n <div>\n <aside>\n <p>Getting Started</p>\n <nav>\n <a>Introduction</a>\n <a>Installation</a>\n <a>Quick Start</a>\n </nav>\n <p>Core Concepts</p>\n <nav>\n <a>Environments</a>\n <a>Actions & Obs</a>\n <a>Rewards</a>\n </nav>\n <p>API</p>\n <nav>\n <a>POST /reset</a>\n <a>POST /step</a>\n <a>GET /state</a>\n </nav>\n </aside>\n <main>\n <div>\n <span>Docs</span><span>\u203a</span><span>Getting Started</span><span>\u203a</span><span>Introduction</span>\n </div>\n <h1>Introduction</h1>\n <p>OpenEnv is a standard HTTP interface for building reinforcement learning environments. It provides a simple REST API that any agent can interact with, regardless of programming language.</p>\n <div>\n <p>INSTALLATION</p>\n <code>pip install openenv-core</code>\n </div>\n <h2>How it works</h2>\n <p>Each environment exposes three endpoints: <code>/reset</code> to start an episode, <code>/step</code> to submit an action, and <code>/state</code> to inspect current state.</p>\n <div>\n <button>Next: Installation \u2192</button>\n </div>\n </main>\n </div>\n</body>\n</html>\n"}, {"name": "blank", "rewards": {"format": 0.5, "validity": 0.75, "structural": 0.0911, "text_block": 0.0, "position": 0.0, "color": 0.6933, "clip": 0.0, "ssim": 0.7001, "total": 0.0}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/13/blank.png", "html": "<!DOCTYPE html><html><head><title>Page</title></head><body style=\"background:#fff;\"></body></html>"}]}, {"id": 14, "difficulty": "hard", "source": "hard/4", "reference_image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/14/reference.png", "reference_html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Kanban</title></head>\n<body style=\"margin:0;font-family:sans-serif;background:#f1f5f9;color:#1e293b;min-height:100vh;\">\n <nav style=\"background:#fff;border-bottom:1px solid #e2e8f0;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;\">\n <div style=\"display:flex;align-items:center;gap:16px;\">\n <span style=\"font-weight:700;font-size:16px;\">\ud83d\uddc2 Sprint 24</span>\n <span style=\"font-size:13px;color:#94a3b8;\">Apr 1 \u2013 Apr 14</span>\n </div>\n <div style=\"display:flex;align-items:center;gap:10px;\">\n <div style=\"display:flex;\"><div style=\"width:28px;height:28px;border-radius:50%;background:#4f46e5;color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;border:2px solid #fff;\">A</div><div style=\"width:28px;height:28px;border-radius:50%;background:#34d399;color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;border:2px solid #fff;margin-left:-8px;\">M</div><div style=\"width:28px;height:28px;border-radius:50%;background:#fb923c;color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;border:2px solid #fff;margin-left:-8px;\">P</div></div>\n <button style=\"padding:7px 14px;background:#4f46e5;color:#fff;border:none;border-radius:6px;font-size:13px;cursor:pointer;\">+ Add Task</button>\n </div>\n </nav>\n <div style=\"display:flex;gap:16px;padding:24px;overflow-x:auto;\">\n <div style=\"min-width:260px;background:#e2e8f0;border-radius:10px;padding:16px;\">\n <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;\"><h3 style=\"margin:0;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#64748b;\">Backlog</h3><span style=\"background:#94a3b8;color:#fff;font-size:11px;padding:2px 8px;border-radius:10px;\">5</span></div>\n <div style=\"background:#fff;border-radius:8px;padding:14px;margin-bottom:10px;box-shadow:0 1px 3px rgba(0,0,0,.06);\"><p style=\"margin:0 0 8px;font-size:13px;font-weight:500;\">Redesign onboarding flow</p><div style=\"display:flex;justify-content:space-between;align-items:center;\"><span style=\"background:#ede9fe;color:#7c3aed;font-size:11px;padding:2px 8px;border-radius:4px;\">Design</span><span style=\"font-size:11px;color:#94a3b8;\">P</span></div></div>\n <div style=\"background:#fff;border-radius:8px;padding:14px;margin-bottom:10px;box-shadow:0 1px 3px rgba(0,0,0,.06);\"><p style=\"margin:0 0 8px;font-size:13px;font-weight:500;\">Add dark mode support</p><div style=\"display:flex;justify-content:space-between;align-items:center;\"><span style=\"background:#dcfce7;color:#16a34a;font-size:11px;padding:2px 8px;border-radius:4px;\">Frontend</span><span style=\"font-size:11px;color:#94a3b8;\">A</span></div></div>\n </div>\n <div style=\"min-width:260px;background:#e2e8f0;border-radius:10px;padding:16px;\">\n <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;\"><h3 style=\"margin:0;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#64748b;\">In Progress</h3><span style=\"background:#f59e0b;color:#fff;font-size:11px;padding:2px 8px;border-radius:10px;\">3</span></div>\n <div style=\"background:#fff;border-radius:8px;padding:14px;margin-bottom:10px;box-shadow:0 1px 3px rgba(0,0,0,.06);border-left:3px solid #4f46e5;\"><p style=\"margin:0 0 8px;font-size:13px;font-weight:500;\">Implement OAuth 2.0 login</p><div style=\"display:flex;justify-content:space-between;align-items:center;\"><span style=\"background:#fee2e2;color:#dc2626;font-size:11px;padding:2px 8px;border-radius:4px;\">\ud83d\udd34 High</span><span style=\"font-size:11px;color:#94a3b8;\">M</span></div></div>\n <div style=\"background:#fff;border-radius:8px;padding:14px;margin-bottom:10px;box-shadow:0 1px 3px rgba(0,0,0,.06);border-left:3px solid #4f46e5;\"><p style=\"margin:0 0 8px;font-size:13px;font-weight:500;\">Write API documentation</p><div style=\"display:flex;justify-content:space-between;align-items:center;\"><span style=\"background:#fef3c7;color:#d97706;font-size:11px;padding:2px 8px;border-radius:4px;\">Docs</span><span style=\"font-size:11px;color:#94a3b8;\">A</span></div></div>\n </div>\n <div style=\"min-width:260px;background:#e2e8f0;border-radius:10px;padding:16px;\">\n <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;\"><h3 style=\"margin:0;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#64748b;\">Review</h3><span style=\"background:#6366f1;color:#fff;font-size:11px;padding:2px 8px;border-radius:10px;\">2</span></div>\n <div style=\"background:#fff;border-radius:8px;padding:14px;margin-bottom:10px;box-shadow:0 1px 3px rgba(0,0,0,.06);\"><p style=\"margin:0 0 8px;font-size:13px;font-weight:500;\">Fix payment webhook bug</p><div style=\"display:flex;justify-content:space-between;align-items:center;\"><span style=\"background:#fee2e2;color:#dc2626;font-size:11px;padding:2px 8px;border-radius:4px;\">\ud83d\udd34 Critical</span><span style=\"font-size:11px;color:#94a3b8;\">P</span></div></div>\n </div>\n <div style=\"min-width:260px;background:#e2e8f0;border-radius:10px;padding:16px;\">\n <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;\"><h3 style=\"margin:0;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#64748b;\">Done</h3><span style=\"background:#16a34a;color:#fff;font-size:11px;padding:2px 8px;border-radius:10px;\">8</span></div>\n <div style=\"background:#fff;border-radius:8px;padding:14px;margin-bottom:10px;box-shadow:0 1px 3px rgba(0,0,0,.06);opacity:.7;\"><p style=\"margin:0 0 8px;font-size:13px;font-weight:500;text-decoration:line-through;color:#94a3b8;\">Setup CI/CD pipeline</p><div style=\"display:flex;justify-content:space-between;align-items:center;\"><span style=\"background:#dcfce7;color:#16a34a;font-size:11px;padding:2px 8px;border-radius:4px;\">DevOps</span><span style=\"font-size:11px;color:#94a3b8;\">M</span></div></div>\n <div style=\"background:#fff;border-radius:8px;padding:14px;box-shadow:0 1px 3px rgba(0,0,0,.06);opacity:.7;\"><p style=\"margin:0 0 8px;font-size:13px;font-weight:500;text-decoration:line-through;color:#94a3b8;\">Database schema migration</p><div style=\"display:flex;justify-content:space-between;align-items:center;\"><span style=\"background:#f1f5f9;color:#64748b;font-size:11px;padding:2px 8px;border-radius:4px;\">Backend</span><span style=\"font-size:11px;color:#94a3b8;\">A</span></div></div>\n </div>\n </div>\n</body>\n</html>\n", "variants": [{"name": "perfect", "rewards": {"format": 0.5, "validity": 1.0, "structural": 1.0, "text_block": 1.0, "position": 1.0, "color": 1.0, "clip": 1.0, "ssim": 1.0, "total": 0.9773}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/14/perfect.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Kanban</title></head>\n<body style=\"margin:0;font-family:sans-serif;background:#f1f5f9;color:#1e293b;min-height:100vh;\">\n <nav style=\"background:#fff;border-bottom:1px solid #e2e8f0;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;\">\n <div style=\"display:flex;align-items:center;gap:16px;\">\n <span style=\"font-weight:700;font-size:16px;\">\ud83d\uddc2 Sprint 24</span>\n <span style=\"font-size:13px;color:#94a3b8;\">Apr 1 \u2013 Apr 14</span>\n </div>\n <div style=\"display:flex;align-items:center;gap:10px;\">\n <div style=\"display:flex;\"><div style=\"width:28px;height:28px;border-radius:50%;background:#4f46e5;color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;border:2px solid #fff;\">A</div><div style=\"width:28px;height:28px;border-radius:50%;background:#34d399;color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;border:2px solid #fff;margin-left:-8px;\">M</div><div style=\"width:28px;height:28px;border-radius:50%;background:#fb923c;color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;border:2px solid #fff;margin-left:-8px;\">P</div></div>\n <button style=\"padding:7px 14px;background:#4f46e5;color:#fff;border:none;border-radius:6px;font-size:13px;cursor:pointer;\">+ Add Task</button>\n </div>\n </nav>\n <div style=\"display:flex;gap:16px;padding:24px;overflow-x:auto;\">\n <div style=\"min-width:260px;background:#e2e8f0;border-radius:10px;padding:16px;\">\n <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;\"><h3 style=\"margin:0;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#64748b;\">Backlog</h3><span style=\"background:#94a3b8;color:#fff;font-size:11px;padding:2px 8px;border-radius:10px;\">5</span></div>\n <div style=\"background:#fff;border-radius:8px;padding:14px;margin-bottom:10px;box-shadow:0 1px 3px rgba(0,0,0,.06);\"><p style=\"margin:0 0 8px;font-size:13px;font-weight:500;\">Redesign onboarding flow</p><div style=\"display:flex;justify-content:space-between;align-items:center;\"><span style=\"background:#ede9fe;color:#7c3aed;font-size:11px;padding:2px 8px;border-radius:4px;\">Design</span><span style=\"font-size:11px;color:#94a3b8;\">P</span></div></div>\n <div style=\"background:#fff;border-radius:8px;padding:14px;margin-bottom:10px;box-shadow:0 1px 3px rgba(0,0,0,.06);\"><p style=\"margin:0 0 8px;font-size:13px;font-weight:500;\">Add dark mode support</p><div style=\"display:flex;justify-content:space-between;align-items:center;\"><span style=\"background:#dcfce7;color:#16a34a;font-size:11px;padding:2px 8px;border-radius:4px;\">Frontend</span><span style=\"font-size:11px;color:#94a3b8;\">A</span></div></div>\n </div>\n <div style=\"min-width:260px;background:#e2e8f0;border-radius:10px;padding:16px;\">\n <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;\"><h3 style=\"margin:0;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#64748b;\">In Progress</h3><span style=\"background:#f59e0b;color:#fff;font-size:11px;padding:2px 8px;border-radius:10px;\">3</span></div>\n <div style=\"background:#fff;border-radius:8px;padding:14px;margin-bottom:10px;box-shadow:0 1px 3px rgba(0,0,0,.06);border-left:3px solid #4f46e5;\"><p style=\"margin:0 0 8px;font-size:13px;font-weight:500;\">Implement OAuth 2.0 login</p><div style=\"display:flex;justify-content:space-between;align-items:center;\"><span style=\"background:#fee2e2;color:#dc2626;font-size:11px;padding:2px 8px;border-radius:4px;\">\ud83d\udd34 High</span><span style=\"font-size:11px;color:#94a3b8;\">M</span></div></div>\n <div style=\"background:#fff;border-radius:8px;padding:14px;margin-bottom:10px;box-shadow:0 1px 3px rgba(0,0,0,.06);border-left:3px solid #4f46e5;\"><p style=\"margin:0 0 8px;font-size:13px;font-weight:500;\">Write API documentation</p><div style=\"display:flex;justify-content:space-between;align-items:center;\"><span style=\"background:#fef3c7;color:#d97706;font-size:11px;padding:2px 8px;border-radius:4px;\">Docs</span><span style=\"font-size:11px;color:#94a3b8;\">A</span></div></div>\n </div>\n <div style=\"min-width:260px;background:#e2e8f0;border-radius:10px;padding:16px;\">\n <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;\"><h3 style=\"margin:0;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#64748b;\">Review</h3><span style=\"background:#6366f1;color:#fff;font-size:11px;padding:2px 8px;border-radius:10px;\">2</span></div>\n <div style=\"background:#fff;border-radius:8px;padding:14px;margin-bottom:10px;box-shadow:0 1px 3px rgba(0,0,0,.06);\"><p style=\"margin:0 0 8px;font-size:13px;font-weight:500;\">Fix payment webhook bug</p><div style=\"display:flex;justify-content:space-between;align-items:center;\"><span style=\"background:#fee2e2;color:#dc2626;font-size:11px;padding:2px 8px;border-radius:4px;\">\ud83d\udd34 Critical</span><span style=\"font-size:11px;color:#94a3b8;\">P</span></div></div>\n </div>\n <div style=\"min-width:260px;background:#e2e8f0;border-radius:10px;padding:16px;\">\n <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;\"><h3 style=\"margin:0;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#64748b;\">Done</h3><span style=\"background:#16a34a;color:#fff;font-size:11px;padding:2px 8px;border-radius:10px;\">8</span></div>\n <div style=\"background:#fff;border-radius:8px;padding:14px;margin-bottom:10px;box-shadow:0 1px 3px rgba(0,0,0,.06);opacity:.7;\"><p style=\"margin:0 0 8px;font-size:13px;font-weight:500;text-decoration:line-through;color:#94a3b8;\">Setup CI/CD pipeline</p><div style=\"display:flex;justify-content:space-between;align-items:center;\"><span style=\"background:#dcfce7;color:#16a34a;font-size:11px;padding:2px 8px;border-radius:4px;\">DevOps</span><span style=\"font-size:11px;color:#94a3b8;\">M</span></div></div>\n <div style=\"background:#fff;border-radius:8px;padding:14px;box-shadow:0 1px 3px rgba(0,0,0,.06);opacity:.7;\"><p style=\"margin:0 0 8px;font-size:13px;font-weight:500;text-decoration:line-through;color:#94a3b8;\">Database schema migration</p><div style=\"display:flex;justify-content:space-between;align-items:center;\"><span style=\"background:#f1f5f9;color:#64748b;font-size:11px;padding:2px 8px;border-radius:4px;\">Backend</span><span style=\"font-size:11px;color:#94a3b8;\">A</span></div></div>\n </div>\n </div>\n</body>\n</html>\n"}, {"name": "minor_diff", "rewards": {"format": 0.5, "validity": 1.0, "structural": 1.0, "text_block": 1.0, "position": 0.9985, "color": 0.9486, "clip": 0.8853, "ssim": 0.7973, "total": 0.9164}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/14/minor_diff.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Kanban</title></head>\n<body style=\"margin:0;font-family:sans-serif;background:#888888;color:#1e293b;min-height:100vh;\">\n <nav style=\"background:#fff;border-bottom:1px solid #e2e8f0;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;\">\n <div style=\"display:flex;align-items:center;gap:16px;\">\n <span style=\"font-weight:700;font-size:12px;\">\ud83d\uddc2 Sprint 24</span>\n <span style=\"font-size:9px;color:#94a3b8;\">Apr 1 \u2013 Apr 14</span>\n </div>\n <div style=\"display:flex;align-items:center;gap:10px;\">\n <div style=\"display:flex;\"><div style=\"width:28px;height:28px;border-radius:50%;background:#4f46e5;color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;border:2px solid #fff;\">A</div><div style=\"width:28px;height:28px;border-radius:50%;background:#34d399;color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;border:2px solid #fff;margin-left:-8px;\">M</div><div style=\"width:28px;height:28px;border-radius:50%;background:#fb923c;color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;border:2px solid #fff;margin-left:-8px;\">P</div></div>\n <button style=\"padding:7px 14px;background:#4f46e5;color:#fff;border:none;border-radius:6px;font-size:13px;cursor:pointer;\">+ Add Task</button>\n </div>\n </nav>\n <div style=\"display:flex;gap:16px;padding:24px;overflow-x:auto;\">\n <div style=\"min-width:260px;background:#e2e8f0;border-radius:10px;padding:16px;\">\n <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;\"><h3 style=\"margin:0;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#64748b;\">Backlog</h3><span style=\"background:#94a3b8;color:#fff;font-size:11px;padding:2px 8px;border-radius:10px;\">5</span></div>\n <div style=\"background:#fff;border-radius:8px;padding:14px;margin-bottom:10px;box-shadow:0 1px 3px rgba(0,0,0,.06);\"><p style=\"margin:0 0 8px;font-size:13px;font-weight:500;\">Redesign onboarding flow</p><div style=\"display:flex;justify-content:space-between;align-items:center;\"><span style=\"background:#ede9fe;color:#7c3aed;font-size:11px;padding:2px 8px;border-radius:4px;\">Design</span><span style=\"font-size:11px;color:#94a3b8;\">P</span></div></div>\n <div style=\"background:#fff;border-radius:8px;padding:14px;margin-bottom:10px;box-shadow:0 1px 3px rgba(0,0,0,.06);\"><p style=\"margin:0 0 8px;font-size:13px;font-weight:500;\">Add dark mode support</p><div style=\"display:flex;justify-content:space-between;align-items:center;\"><span style=\"background:#dcfce7;color:#16a34a;font-size:11px;padding:2px 8px;border-radius:4px;\">Frontend</span><span style=\"font-size:11px;color:#94a3b8;\">A</span></div></div>\n </div>\n <div style=\"min-width:260px;background:#e2e8f0;border-radius:10px;padding:16px;\">\n <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;\"><h3 style=\"margin:0;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#64748b;\">In Progress</h3><span style=\"background:#f59e0b;color:#fff;font-size:11px;padding:2px 8px;border-radius:10px;\">3</span></div>\n <div style=\"background:#fff;border-radius:8px;padding:14px;margin-bottom:10px;box-shadow:0 1px 3px rgba(0,0,0,.06);border-left:3px solid #4f46e5;\"><p style=\"margin:0 0 8px;font-size:13px;font-weight:500;\">Implement OAuth 2.0 login</p><div style=\"display:flex;justify-content:space-between;align-items:center;\"><span style=\"background:#fee2e2;color:#dc2626;font-size:11px;padding:2px 8px;border-radius:4px;\">\ud83d\udd34 High</span><span style=\"font-size:11px;color:#94a3b8;\">M</span></div></div>\n <div style=\"background:#fff;border-radius:8px;padding:14px;margin-bottom:10px;box-shadow:0 1px 3px rgba(0,0,0,.06);border-left:3px solid #4f46e5;\"><p style=\"margin:0 0 8px;font-size:13px;font-weight:500;\">Write API documentation</p><div style=\"display:flex;justify-content:space-between;align-items:center;\"><span style=\"background:#fef3c7;color:#d97706;font-size:11px;padding:2px 8px;border-radius:4px;\">Docs</span><span style=\"font-size:11px;color:#94a3b8;\">A</span></div></div>\n </div>\n <div style=\"min-width:260px;background:#e2e8f0;border-radius:10px;padding:16px;\">\n <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;\"><h3 style=\"margin:0;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#64748b;\">Review</h3><span style=\"background:#6366f1;color:#fff;font-size:11px;padding:2px 8px;border-radius:10px;\">2</span></div>\n <div style=\"background:#fff;border-radius:8px;padding:14px;margin-bottom:10px;box-shadow:0 1px 3px rgba(0,0,0,.06);\"><p style=\"margin:0 0 8px;font-size:13px;font-weight:500;\">Fix payment webhook bug</p><div style=\"display:flex;justify-content:space-between;align-items:center;\"><span style=\"background:#fee2e2;color:#dc2626;font-size:11px;padding:2px 8px;border-radius:4px;\">\ud83d\udd34 Critical</span><span style=\"font-size:11px;color:#94a3b8;\">P</span></div></div>\n </div>\n <div style=\"min-width:260px;background:#e2e8f0;border-radius:10px;padding:16px;\">\n <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;\"><h3 style=\"margin:0;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#64748b;\">Done</h3><span style=\"background:#16a34a;color:#fff;font-size:11px;padding:2px 8px;border-radius:10px;\">8</span></div>\n <div style=\"background:#fff;border-radius:8px;padding:14px;margin-bottom:10px;box-shadow:0 1px 3px rgba(0,0,0,.06);opacity:.7;\"><p style=\"margin:0 0 8px;font-size:13px;font-weight:500;text-decoration:line-through;color:#94a3b8;\">Setup CI/CD pipeline</p><div style=\"display:flex;justify-content:space-between;align-items:center;\"><span style=\"background:#dcfce7;color:#16a34a;font-size:11px;padding:2px 8px;border-radius:4px;\">DevOps</span><span style=\"font-size:11px;color:#94a3b8;\">M</span></div></div>\n <div style=\"background:#fff;border-radius:8px;padding:14px;box-shadow:0 1px 3px rgba(0,0,0,.06);opacity:.7;\"><p style=\"margin:0 0 8px;font-size:13px;font-weight:500;text-decoration:line-through;color:#94a3b8;\">Database schema migration</p><div style=\"display:flex;justify-content:space-between;align-items:center;\"><span style=\"background:#f1f5f9;color:#64748b;font-size:11px;padding:2px 8px;border-radius:4px;\">Backend</span><span style=\"font-size:11px;color:#94a3b8;\">A</span></div></div>\n </div>\n </div>\n</body>\n</html>\n"}, {"name": "bad_colors", "rewards": {"format": 0.5, "validity": 1.0, "structural": 1.0, "text_block": 1.0, "position": 1.0, "color": 0.0, "clip": 0.3861, "ssim": 0.2743, "total": 0.6024}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/14/bad_colors.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Kanban</title></head>\n<body style=\"margin:0;font-family:sans-serif;background:#0e0a06;color:#e1d6c4;min-height:100vh;\">\n <nav style=\"background:#fff;border-bottom:1px solid #1d170f;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;\">\n <div style=\"display:flex;align-items:center;gap:16px;\">\n <span style=\"font-weight:700;font-size:16px;\">\ud83d\uddc2 Sprint 24</span>\n <span style=\"font-size:13px;color:#6b5c47;\">Apr 1 \u2013 Apr 14</span>\n </div>\n <div style=\"display:flex;align-items:center;gap:10px;\">\n <div style=\"display:flex;\"><div style=\"width:28px;height:28px;border-radius:50%;background:#b0b91a;color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;border:2px solid #fff;\">A</div><div style=\"width:28px;height:28px;border-radius:50%;background:#cb2c66;color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;border:2px solid #fff;margin-left:-8px;\">M</div><div style=\"width:28px;height:28px;border-radius:50%;background:#046dc3;color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;border:2px solid #fff;margin-left:-8px;\">P</div></div>\n <button style=\"padding:7px 14px;background:#b0b91a;color:#fff;border:none;border-radius:6px;font-size:13px;cursor:pointer;\">+ Add Task</button>\n </div>\n </nav>\n <div style=\"display:flex;gap:16px;padding:24px;overflow-x:auto;\">\n <div style=\"min-width:260px;background:#1d170f;border-radius:10px;padding:16px;\">\n <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;\"><h3 style=\"margin:0;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#9b8b74;\">Backlog</h3><span style=\"background:#6b5c47;color:#fff;font-size:11px;padding:2px 8px;border-radius:10px;\">5</span></div>\n <div style=\"background:#fff;border-radius:8px;padding:14px;margin-bottom:10px;box-shadow:0 1px 3px rgba(0,0,0,.06);\"><p style=\"margin:0 0 8px;font-size:13px;font-weight:500;\">Redesign onboarding flow</p><div style=\"display:flex;justify-content:space-between;align-items:center;\"><span style=\"background:#121601;color:#83c512;font-size:11px;padding:2px 8px;border-radius:4px;\">Design</span><span style=\"font-size:11px;color:#6b5c47;\">P</span></div></div>\n <div style=\"background:#fff;border-radius:8px;padding:14px;margin-bottom:10px;box-shadow:0 1px 3px rgba(0,0,0,.06);\"><p style=\"margin:0 0 8px;font-size:13px;font-weight:500;\">Add dark mode support</p><div style=\"display:flex;justify-content:space-between;align-items:center;\"><span style=\"background:#230318;color:#e95cb5;font-size:11px;padding:2px 8px;border-radius:4px;\">Frontend</span><span style=\"font-size:11px;color:#6b5c47;\">A</span></div></div>\n </div>\n <div style=\"min-width:260px;background:#1d170f;border-radius:10px;padding:16px;\">\n <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;\"><h3 style=\"margin:0;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#9b8b74;\">In Progress</h3><span style=\"background:#0a61f4;color:#fff;font-size:11px;padding:2px 8px;border-radius:10px;\">3</span></div>\n <div style=\"background:#fff;border-radius:8px;padding:14px;margin-bottom:10px;box-shadow:0 1px 3px rgba(0,0,0,.06);border-left:3px solid #b0b91a;\"><p style=\"margin:0 0 8px;font-size:13px;font-weight:500;\">Implement OAuth 2.0 login</p><div style=\"display:flex;justify-content:space-between;align-items:center;\"><span style=\"background:#011d1d;color:#23d9d9;font-size:11px;padding:2px 8px;border-radius:4px;\">\ud83d\udd34 High</span><span style=\"font-size:11px;color:#6b5c47;\">M</span></div></div>\n <div style=\"background:#fff;border-radius:8px;padding:14px;margin-bottom:10px;box-shadow:0 1px 3px rgba(0,0,0,.06);border-left:3px solid #b0b91a;\"><p style=\"margin:0 0 8px;font-size:13px;font-weight:500;\">Write API documentation</p><div style=\"display:flex;justify-content:space-between;align-items:center;\"><span style=\"background:#010c38;color:#2688f9;font-size:11px;padding:2px 8px;border-radius:4px;\">Docs</span><span style=\"font-size:11px;color:#6b5c47;\">A</span></div></div>\n </div>\n <div style=\"min-width:260px;background:#1d170f;border-radius:10px;padding:16px;\">\n <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;\"><h3 style=\"margin:0;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#9b8b74;\">Review</h3><span style=\"background:#9c990e;color:#fff;font-size:11px;padding:2px 8px;border-radius:10px;\">2</span></div>\n <div style=\"background:#fff;border-radius:8px;padding:14px;margin-bottom:10px;box-shadow:0 1px 3px rgba(0,0,0,.06);\"><p style=\"margin:0 0 8px;font-size:13px;font-weight:500;\">Fix payment webhook bug</p><div style=\"display:flex;justify-content:space-between;align-items:center;\"><span style=\"background:#011d1d;color:#23d9d9;font-size:11px;padding:2px 8px;border-radius:4px;\">\ud83d\udd34 Critical</span><span style=\"font-size:11px;color:#6b5c47;\">P</span></div></div>\n </div>\n <div style=\"min-width:260px;background:#1d170f;border-radius:10px;padding:16px;\">\n <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;\"><h3 style=\"margin:0;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#9b8b74;\">Done</h3><span style=\"background:#e95cb5;color:#fff;font-size:11px;padding:2px 8px;border-radius:10px;\">8</span></div>\n <div style=\"background:#fff;border-radius:8px;padding:14px;margin-bottom:10px;box-shadow:0 1px 3px rgba(0,0,0,.06);opacity:.7;\"><p style=\"margin:0 0 8px;font-size:13px;font-weight:500;text-decoration:line-through;color:#6b5c47;\">Setup CI/CD pipeline</p><div style=\"display:flex;justify-content:space-between;align-items:center;\"><span style=\"background:#230318;color:#e95cb5;font-size:11px;padding:2px 8px;border-radius:4px;\">DevOps</span><span style=\"font-size:11px;color:#6b5c47;\">M</span></div></div>\n <div style=\"background:#fff;border-radius:8px;padding:14px;box-shadow:0 1px 3px rgba(0,0,0,.06);opacity:.7;\"><p style=\"margin:0 0 8px;font-size:13px;font-weight:500;text-decoration:line-through;color:#6b5c47;\">Database schema migration</p><div style=\"display:flex;justify-content:space-between;align-items:center;\"><span style=\"background:#0e0a06;color:#9b8b74;font-size:11px;padding:2px 8px;border-radius:4px;\">Backend</span><span style=\"font-size:11px;color:#6b5c47;\">A</span></div></div>\n </div>\n </div>\n</body>\n</html>\n"}, {"name": "half_styled", "rewards": {"format": 0.5, "validity": 1.0, "structural": 0.8393, "text_block": 0.2321, "position": 0.7755, "color": 0.836, "clip": 0.23, "ssim": 0.7198, "total": 0.5046}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/14/half_styled.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Kanban</title></head>\n<body style=\"margin:0; background:#f1f5f9; min-height:100vh\">\n <nav style=\"background:#fff; padding:14px 24px; align-items:center\">\n <div style=\"display:flex; gap:16px\">\n <span style=\"font-weight:700\">\ud83d\uddc2 Sprint 24</span>\n <span style=\"font-size:13px\">Apr 1 \u2013 Apr 14</span>\n </div>\n <div style=\"display:flex; gap:10px\">\n <div style=\"display:flex\"><div style=\"width:28px; border-radius:50%; color:#fff; display:flex; justify-content:center\">A</div><div style=\"width:28px; border-radius:50%; color:#fff; display:flex; justify-content:center; margin-left:-8px\">M</div><div style=\"width:28px; border-radius:50%; color:#fff; display:flex; justify-content:center; margin-left:-8px\">P</div></div>\n <button style=\"padding:7px 14px; color:#fff; border-radius:6px; cursor:pointer\">+ Add Task</button>\n </div>\n </nav>\n <div style=\"display:flex; padding:24px\">\n <div style=\"min-width:260px; border-radius:10px\">\n <div style=\"display:flex; align-items:center\"><h3 style=\"margin:0; font-weight:700; letter-spacing:.05em\">Backlog</h3><span style=\"background:#94a3b8; font-size:11px; border-radius:10px\">5</span></div>\n <div style=\"background:#fff; padding:14px; box-shadow:0 1px 3px rgba(0,0,0,.06)\"><p style=\"margin:0 0 8px; font-weight:500\">Redesign onboarding flow</p><div style=\"display:flex; align-items:center\"><span style=\"background:#ede9fe; font-size:11px; border-radius:4px\">Design</span><span style=\"font-size:11px\">P</span></div></div>\n <div style=\"background:#fff; padding:14px; box-shadow:0 1px 3px rgba(0,0,0,.06)\"><p style=\"margin:0 0 8px; font-weight:500\">Add dark mode support</p><div style=\"display:flex; align-items:center\"><span style=\"background:#dcfce7; font-size:11px; border-radius:4px\">Frontend</span><span style=\"font-size:11px\">A</span></div></div>\n </div>\n <div style=\"min-width:260px; border-radius:10px\">\n <div style=\"display:flex; align-items:center\"><h3 style=\"margin:0; font-weight:700; letter-spacing:.05em\">In Progress</h3><span style=\"background:#f59e0b; font-size:11px; border-radius:10px\">3</span></div>\n <div style=\"background:#fff; padding:14px; box-shadow:0 1px 3px rgba(0,0,0,.06)\"><p style=\"margin:0 0 8px; font-weight:500\">Implement OAuth 2.0 login</p><div style=\"display:flex; align-items:center\"><span style=\"background:#fee2e2; font-size:11px; border-radius:4px\">\ud83d\udd34 High</span><span style=\"font-size:11px\">M</span></div></div>\n <div style=\"background:#fff; padding:14px; box-shadow:0 1px 3px rgba(0,0,0,.06)\"><p style=\"margin:0 0 8px; font-weight:500\">Write API documentation</p><div style=\"display:flex; align-items:center\"><span style=\"background:#fef3c7; font-size:11px; border-radius:4px\">Docs</span><span style=\"font-size:11px\">A</span></div></div>\n </div>\n <div style=\"min-width:260px; border-radius:10px\">\n <div style=\"display:flex; align-items:center\"><h3 style=\"margin:0; font-weight:700; letter-spacing:.05em\">Review</h3><span style=\"background:#6366f1; font-size:11px; border-radius:10px\">2</span></div>\n <div style=\"background:#fff; padding:14px; box-shadow:0 1px 3px rgba(0,0,0,.06)\"><p style=\"margin:0 0 8px; font-weight:500\">Fix payment webhook bug</p><div style=\"display:flex; align-items:center\"><span style=\"background:#fee2e2; font-size:11px; border-radius:4px\">\ud83d\udd34 Critical</span><span style=\"font-size:11px\">P</span></div></div>\n </div>\n <div style=\"min-width:260px; border-radius:10px\">\n <div style=\"display:flex; align-items:center\"><h3 style=\"margin:0; font-weight:700; letter-spacing:.05em\">Done</h3><span style=\"background:#16a34a; font-size:11px; border-radius:10px\">8</span></div>\n <div style=\"background:#fff; padding:14px; box-shadow:0 1px 3px rgba(0,0,0,.06)\"><p style=\"margin:0 0 8px; font-weight:500; color:#94a3b8\">Setup CI/CD pipeline</p><div style=\"display:flex; align-items:center\"><span style=\"background:#dcfce7; font-size:11px; border-radius:4px\">DevOps</span><span style=\"font-size:11px\">M</span></div></div>\n <div style=\"background:#fff; padding:14px; opacity:.7\"><p style=\"margin:0 0 8px; font-weight:500; color:#94a3b8\">Database schema migration</p><div style=\"display:flex; align-items:center\"><span style=\"background:#f1f5f9; font-size:11px; border-radius:4px\">Backend</span><span style=\"font-size:11px\">A</span></div></div>\n </div>\n </div>\n</body>\n</html>\n"}, {"name": "no_layout", "rewards": {"format": 0.5, "validity": 1.0, "structural": 0.75, "text_block": 0.121, "position": 0.3947, "color": 0.8401, "clip": 0.44, "ssim": 0.5561, "total": 0.4615}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/14/no_layout.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Kanban</title></head>\n<body style=\"font-family:sans-serif; background:#f1f5f9; color:#1e293b\">\n <nav style=\"background:#fff; border-bottom:1px solid #e2e8f0\">\n <div style=\"gap:16px\">\n <span style=\"font-weight:700; font-size:16px\">\ud83d\uddc2 Sprint 24</span>\n <span style=\"font-size:13px; color:#94a3b8\">Apr 1 \u2013 Apr 14</span>\n </div>\n <div style=\"gap:10px\">\n <div style=\"\"><div style=\"background:#4f46e5; color:#fff; font-size:11px; border:2px solid #fff\">A</div><div style=\"background:#34d399; color:#fff; font-size:11px; border:2px solid #fff\">M</div><div style=\"background:#fb923c; color:#fff; font-size:11px; border:2px solid #fff\">P</div></div>\n <button style=\"background:#4f46e5; color:#fff; border:none; font-size:13px; cursor:pointer\">+ Add Task</button>\n </div>\n </nav>\n <div style=\"gap:16px\">\n <div style=\"background:#e2e8f0\">\n <div style=\"\"><h3 style=\"font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#64748b\">Backlog</h3><span style=\"background:#94a3b8; color:#fff; font-size:11px\">5</span></div>\n <div style=\"background:#fff\"><p style=\"font-size:13px; font-weight:500\">Redesign onboarding flow</p><div style=\"\"><span style=\"background:#ede9fe; color:#7c3aed; font-size:11px\">Design</span><span style=\"font-size:11px; color:#94a3b8\">P</span></div></div>\n <div style=\"background:#fff\"><p style=\"font-size:13px; font-weight:500\">Add dark mode support</p><div style=\"\"><span style=\"background:#dcfce7; color:#16a34a; font-size:11px\">Frontend</span><span style=\"font-size:11px; color:#94a3b8\">A</span></div></div>\n </div>\n <div style=\"background:#e2e8f0\">\n <div style=\"\"><h3 style=\"font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#64748b\">In Progress</h3><span style=\"background:#f59e0b; color:#fff; font-size:11px\">3</span></div>\n <div style=\"background:#fff; border-left:3px solid #4f46e5\"><p style=\"font-size:13px; font-weight:500\">Implement OAuth 2.0 login</p><div style=\"\"><span style=\"background:#fee2e2; color:#dc2626; font-size:11px\">\ud83d\udd34 High</span><span style=\"font-size:11px; color:#94a3b8\">M</span></div></div>\n <div style=\"background:#fff; border-left:3px solid #4f46e5\"><p style=\"font-size:13px; font-weight:500\">Write API documentation</p><div style=\"\"><span style=\"background:#fef3c7; color:#d97706; font-size:11px\">Docs</span><span style=\"font-size:11px; color:#94a3b8\">A</span></div></div>\n </div>\n <div style=\"background:#e2e8f0\">\n <div style=\"\"><h3 style=\"font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#64748b\">Review</h3><span style=\"background:#6366f1; color:#fff; font-size:11px\">2</span></div>\n <div style=\"background:#fff\"><p style=\"font-size:13px; font-weight:500\">Fix payment webhook bug</p><div style=\"\"><span style=\"background:#fee2e2; color:#dc2626; font-size:11px\">\ud83d\udd34 Critical</span><span style=\"font-size:11px; color:#94a3b8\">P</span></div></div>\n </div>\n <div style=\"background:#e2e8f0\">\n <div style=\"\"><h3 style=\"font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#64748b\">Done</h3><span style=\"background:#16a34a; color:#fff; font-size:11px\">8</span></div>\n <div style=\"background:#fff; opacity:.7\"><p style=\"font-size:13px; font-weight:500; text-decoration:line-through; color:#94a3b8\">Setup CI/CD pipeline</p><div style=\"\"><span style=\"background:#dcfce7; color:#16a34a; font-size:11px\">DevOps</span><span style=\"font-size:11px; color:#94a3b8\">M</span></div></div>\n <div style=\"background:#fff; opacity:.7\"><p style=\"font-size:13px; font-weight:500; text-decoration:line-through; color:#94a3b8\">Database schema migration</p><div style=\"\"><span style=\"background:#f1f5f9; color:#64748b; font-size:11px\">Backend</span><span style=\"font-size:11px; color:#94a3b8\">A</span></div></div>\n </div>\n </div>\n</body>\n</html>\n"}, {"name": "no_style", "rewards": {"format": 0.5, "validity": 1.0, "structural": 0.5, "text_block": 0.0612, "position": 0.3542, "color": 0.8003, "clip": 0.0, "ssim": 0.6848, "total": 0.3423}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/14/no_style.png", "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"><title>Kanban</title></head>\n<body>\n <nav>\n <div>\n <span>\ud83d\uddc2 Sprint 24</span>\n <span>Apr 1 \u2013 Apr 14</span>\n </div>\n <div>\n <div><div>A</div><div>M</div><div>P</div></div>\n <button>+ Add Task</button>\n </div>\n </nav>\n <div>\n <div>\n <div><h3>Backlog</h3><span>5</span></div>\n <div><p>Redesign onboarding flow</p><div><span>Design</span><span>P</span></div></div>\n <div><p>Add dark mode support</p><div><span>Frontend</span><span>A</span></div></div>\n </div>\n <div>\n <div><h3>In Progress</h3><span>3</span></div>\n <div><p>Implement OAuth 2.0 login</p><div><span>\ud83d\udd34 High</span><span>M</span></div></div>\n <div><p>Write API documentation</p><div><span>Docs</span><span>A</span></div></div>\n </div>\n <div>\n <div><h3>Review</h3><span>2</span></div>\n <div><p>Fix payment webhook bug</p><div><span>\ud83d\udd34 Critical</span><span>P</span></div></div>\n </div>\n <div>\n <div><h3>Done</h3><span>8</span></div>\n <div><p>Setup CI/CD pipeline</p><div><span>DevOps</span><span>M</span></div></div>\n <div><p>Database schema migration</p><div><span>Backend</span><span>A</span></div></div>\n </div>\n </div>\n</body>\n</html>\n"}, {"name": "blank", "rewards": {"format": 0.5, "validity": 0.75, "structural": 0.0742, "text_block": 0.0, "position": 0.0, "color": 0.8017, "clip": 0.0, "ssim": 0.7909, "total": 0.0}, "image": "https://raw.githubusercontent.com/amaljoe/vision-coder-openenv/main/docs/images/tests/14/blank.png", "html": "<!DOCTYPE html><html><head><title>Page</title></head><body style=\"background:#fff;\"></body></html>"}]}] |