Skip to content

Commit

Permalink
🕸️ Add example
Browse files Browse the repository at this point in the history
  • Loading branch information
@asim-shrestha
asim-shrestha committed Sep 13, 2024
1 parent 78f0f05 commit f974132
Show file tree
Hide file tree
Showing 2 changed files with 238 additions and 4 deletions.
119 changes: 115 additions & 4 deletions static/examples.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39363,7 +39363,8 @@
},
"tags": [
"synthetic",
"pagination"
"pagination",
"regression"
],
"evals": [
{
Expand Down Expand Up @@ -39523,6 +39524,113 @@
}
]
},
{
"id": "f3Qm9tXk2pLgbJMwySHd7",
"url": "https://claude.site/artifacts/763bbd05-edcd-4309-a820-11e02111cbd2",
"source": "html",
"category": "synthetic",
"subcategory": "synthetic",
"type": "listing_detail",
"goal": "Extract all contact information",
"schema_": {
"first_name": {
"type": "string"
},
"last_name": {
"type": "string"
},
"phone": {
"type": "string"
}
},
"description": "Paginated data with only next and previous page buttons. The pagination occurs client side",
"tags": [
"synthetic",
"pagination"
],
"evals": [
{
"type": "json_match",
"expected": [
{
"first_name": "John",
"last_name": "Doe",
"phone": "123-456-7890"
},
{
"first_name": "Jane",
"last_name": "Smith",
"phone": "234-567-8901"
},
{
"first_name": "Alice",
"last_name": "Johnson",
"phone": "345-678-9012"
},
{
"first_name": "Bob",
"last_name": "Brown",
"phone": "456-789-0123"
},
{
"first_name": "Charlie",
"last_name": "Davis",
"phone": "567-890-1234"
},
{
"first_name": "Diana",
"last_name": "Wilson",
"phone": "678-901-2345"
},
{
"first_name": "Edward",
"last_name": "Moore",
"phone": "789-012-3456"
},
{
"first_name": "Fiona",
"last_name": "Taylor",
"phone": "890-123-4567"
},
{
"first_name": "George",
"last_name": "Anderson",
"phone": "901-234-5678"
},
{
"first_name": "Hannah",
"last_name": "Thomas",
"phone": "012-345-6789"
},
{
"first_name": "Ian",
"last_name": "Jackson",
"phone": "123-456-7890"
},
{
"first_name": "Julia",
"last_name": "White",
"phone": "234-567-8901"
},
{
"first_name": "Kevin",
"last_name": "Harris",
"phone": "345-678-9012"
},
{
"first_name": "Laura",
"last_name": "Martin",
"phone": "456-789-0123"
},
{
"first_name": "Michael",
"last_name": "Thompson",
"phone": "567-890-1234"
}
]
}
]
},
{
"id": "rWSVXdF4puP0VaRmMB1Sj",
"url": "https://claude.site/artifacts/13c937f7-2a43-406c-8369-e2d2852fea9b",
Expand Down Expand Up @@ -39565,13 +39673,16 @@
"goal": "Extract all the image src attributes and their alt text",
"schema_": {
"image_url": {
"type": "string"
"type": "string"
},
"alt_text": {
"type": "string"
"type": "string"
}
},
"tags": ["synthetic", "images"],
"tags": [
"synthetic",
"images"
],
"evals": [
{
"type": "json_match",
Expand Down
123 changes: 123 additions & 0 deletions static/f3Qm9tXk2pLgbJMwySHd7/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Paginated Contacts List</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.contact {
display: flex;
align-items: center;
margin-bottom: 10px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
.avatar {
width: 50px;
height: 50px;
margin-right: 10px;
background-color: #007bff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
.pagination {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
button {
padding: 5px 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
}
button:disabled {
background-color: #ccc;
cursor: not-allowed;
}
</style>
</head>
<body>
<h1>Contacts List</h1>
<div id="contacts-list"></div>
<div class="pagination">
<button id="prev-btn" onclick="changePage(-1)" disabled>Previous</button>
<button id="next-btn" onclick="changePage(1)">Next</button>
</div>

<script>
const contacts = [
{ firstName: "John", lastName: "Doe", phone: "123-456-7890" },
{ firstName: "Jane", lastName: "Smith", phone: "234-567-8901" },
{ firstName: "Alice", lastName: "Johnson", phone: "345-678-9012" },
{ firstName: "Bob", lastName: "Brown", phone: "456-789-0123" },
{ firstName: "Charlie", lastName: "Davis", phone: "567-890-1234" },
{ firstName: "Diana", lastName: "Wilson", phone: "678-901-2345" },
{ firstName: "Edward", lastName: "Moore", phone: "789-012-3456" },
{ firstName: "Fiona", lastName: "Taylor", phone: "890-123-4567" },
{ firstName: "George", lastName: "Anderson", phone: "901-234-5678" },
{ firstName: "Hannah", lastName: "Thomas", phone: "012-345-6789" },
{ firstName: "Ian", lastName: "Jackson", phone: "123-456-7890" },
{ firstName: "Julia", lastName: "White", phone: "234-567-8901" },
{ firstName: "Kevin", lastName: "Harris", phone: "345-678-9012" },
{ firstName: "Laura", lastName: "Martin", phone: "456-789-0123" },
{ firstName: "Michael", lastName: "Thompson", phone: "567-890-1234" }
];

const contactsPerPage = 5;
let currentPage = 1;

function displayContacts() {
const contactsList = document.getElementById('contacts-list');
contactsList.innerHTML = '';

const startIndex = (currentPage - 1) * contactsPerPage;
const endIndex = startIndex + contactsPerPage;
const pageContacts = contacts.slice(startIndex, endIndex);

pageContacts.forEach(contact => {
const contactElement = document.createElement('div');
contactElement.className = 'contact';
contactElement.innerHTML = `
<div class="avatar">${contact.firstName[0]}${contact.lastName[0]}</div>
<div>
<strong>${contact.firstName} ${contact.lastName}</strong><br>
${contact.phone}
</div>
`;
contactsList.appendChild(contactElement);
});

updatePaginationButtons();
}

function updatePaginationButtons() {
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');

prevBtn.disabled = currentPage === 1;
nextBtn.disabled = currentPage === Math.ceil(contacts.length / contactsPerPage);
}

function changePage(direction) {
currentPage += direction;
displayContacts();
}

displayContacts();
</script>
</body>
</html>

0 comments on commit f974132

Please sign in to comment.