diff --git a/static/examples.json b/static/examples.json
index a90c0f3..2ef7b5c 100644
--- a/static/examples.json
+++ b/static/examples.json
@@ -39554,5 +39554,54 @@
         ]
       }
     ]
+  },
+  {
+    "id": "rZxVXdF4puP0VaRmMB1Sj",
+    "url": "https://claude.site/artifacts/1d1446ca-3e29-4000-b9d2-fdd5605061a9",
+    "source": "html",
+    "category": "synthetic",
+    "subcategory": "synthetic",
+    "type": "detail",
+    "goal": "Extract all the image src attributes and their alt text",
+    "schema_": {
+      "image_url": {
+          "type": "string"
+      },
+      "alt_text": {
+          "type": "string"
+      }
+    },
+    "tags": ["synthetic", "images"],
+    "evals": [
+      {
+        "type": "json_match",
+        "expected": [
+          {
+            "image_url": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 150'%3E%3Crect width='200' height='150' fill='%233498db'/%3E%3Ctext x='100' y='75' font-family='Arial' font-size='18' fill='white' text-anchor='middle' dominant-baseline='middle'%3EImage 1%3C/text%3E%3C/svg%3E",
+            "alt_text": "Blue Rectangle"
+          },
+          {
+            "image_url": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 150'%3E%3Ccircle cx='100' cy='75' r='70' fill='%23e74c3c'/%3E%3Ctext x='100' y='75' font-family='Arial' font-size='18' fill='white' text-anchor='middle' dominant-baseline='middle'%3EImage 2%3C/text%3E%3C/svg%3E",
+            "alt_text": "Red Circle"
+          },
+          {
+            "image_url": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 150'%3E%3Cpolygon points='100,20 180,130 20,130' fill='%232ecc71'/%3E%3Ctext x='100' y='95' font-family='Arial' font-size='18' fill='white' text-anchor='middle' dominant-baseline='middle'%3EImage 3%3C/text%3E%3C/svg%3E",
+            "alt_text": "Green Triangle"
+          },
+          {
+            "image_url": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 150'%3E%3Cellipse cx='100' cy='75' rx='90' ry='60' fill='%23f39c12'/%3E%3Ctext x='100' y='75' font-family='Arial' font-size='18' fill='white' text-anchor='middle' dominant-baseline='middle'%3EImage 4%3C/text%3E%3C/svg%3E",
+            "alt_text": "Orange Ellipse"
+          },
+          {
+            "image_url": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 150'%3E%3Crect x='25' y='25' width='150' height='100' fill='%239b59b6'/%3E%3Ctext x='100' y='75' font-family='Arial' font-size='18' fill='white' text-anchor='middle' dominant-baseline='middle'%3EImage 5%3C/text%3E%3C/svg%3E",
+            "alt_text": "Purple Rectangle"
+          },
+          {
+            "image_url": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 150'%3E%3Cpath d='M100 20 L180 130 H20 Z' fill='%231abc9c'/%3E%3Ctext x='100' y='95' font-family='Arial' font-size='18' fill='white' text-anchor='middle' dominant-baseline='middle'%3EImage 6%3C/text%3E%3C/svg%3E",
+            "alt_text": "Teal Triangle"
+          }
+        ]
+      }
+    ]
   }
 ]
diff --git a/static/rZxVXdF4puP0VaRmMB1Sj/index.html b/static/rZxVXdF4puP0VaRmMB1Sj/index.html
new file mode 100644
index 0000000..18c6905
--- /dev/null
+++ b/static/rZxVXdF4puP0VaRmMB1Sj/index.html
@@ -0,0 +1,90 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Multiple Images Webpage</title>
+        <style>
+            body {
+                font-family: Arial, sans-serif;
+                margin: 0;
+                padding: 20px;
+                background-color: #f0f0f0;
+            }
+            h1 {
+                text-align: center;
+                color: #333;
+            }
+            .image-grid {
+                display: grid;
+                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+                gap: 20px;
+                padding: 20px;
+            }
+            .image-item {
+                background-color: white;
+                border-radius: 8px;
+                overflow: hidden;
+                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            }
+            .image-item img {
+                width: 100%;
+                height: 200px;
+                object-fit: cover;
+            }
+            .image-caption {
+                padding: 10px;
+                text-align: center;
+                font-size: 14px;
+                color: #666;
+            }
+        </style>
+    </head>
+    <body>
+        <h1>A Page with Multiple Images</h1>
+        <div class="image-grid">
+            <div class="image-item">
+                <img
+                    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 150'%3E%3Crect width='200' height='150' fill='%233498db'/%3E%3Ctext x='100' y='75' font-family='Arial' font-size='18' fill='white' text-anchor='middle' dominant-baseline='middle'%3EImage 1%3C/text%3E%3C/svg%3E"
+                    alt="Blue Rectangle"
+                />
+                <div class="image-caption">Image 1: Blue Rectangle</div>
+            </div>
+            <div class="image-item">
+                <img
+                    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 150'%3E%3Ccircle cx='100' cy='75' r='70' fill='%23e74c3c'/%3E%3Ctext x='100' y='75' font-family='Arial' font-size='18' fill='white' text-anchor='middle' dominant-baseline='middle'%3EImage 2%3C/text%3E%3C/svg%3E"
+                    alt="Red Circle"
+                />
+                <div class="image-caption">Image 2: Red Circle</div>
+            </div>
+            <div class="image-item">
+                <img
+                    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 150'%3E%3Cpolygon points='100,20 180,130 20,130' fill='%232ecc71'/%3E%3Ctext x='100' y='95' font-family='Arial' font-size='18' fill='white' text-anchor='middle' dominant-baseline='middle'%3EImage 3%3C/text%3E%3C/svg%3E"
+                    alt="Green Triangle"
+                />
+                <div class="image-caption">Image 3: Green Triangle</div>
+            </div>
+            <div class="image-item">
+                <img
+                    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 150'%3E%3Cellipse cx='100' cy='75' rx='90' ry='60' fill='%23f39c12'/%3E%3Ctext x='100' y='75' font-family='Arial' font-size='18' fill='white' text-anchor='middle' dominant-baseline='middle'%3EImage 4%3C/text%3E%3C/svg%3E"
+                    alt="Orange Ellipse"
+                />
+                <div class="image-caption">Image 4: Orange Ellipse</div>
+            </div>
+            <div class="image-item">
+                <img
+                    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 150'%3E%3Crect x='25' y='25' width='150' height='100' fill='%239b59b6'/%3E%3Ctext x='100' y='75' font-family='Arial' font-size='18' fill='white' text-anchor='middle' dominant-baseline='middle'%3EImage 5%3C/text%3E%3C/svg%3E"
+                    alt="Purple Rectangle"
+                />
+                <div class="image-caption">Image 5: Purple Rectangle</div>
+            </div>
+            <div class="image-item">
+                <img
+                    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 150'%3E%3Cpath d='M100 20 L180 130 H20 Z' fill='%231abc9c'/%3E%3Ctext x='100' y='95' font-family='Arial' font-size='18' fill='white' text-anchor='middle' dominant-baseline='middle'%3EImage 6%3C/text%3E%3C/svg%3E"
+                    alt="Teal Triangle"
+                />
+                <div class="image-caption">Image 6: Teal Triangle</div>
+            </div>
+        </div>
+    </body>
+</html>
