Spaces:
Running
Running
File size: 3,448 Bytes
8ad38af |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
// Sample database of items
const items = [
{
title: 'EvalEval Workshop',
tags: ['privacy', 'bias', 'environment', 'measuring', 'society'],
image: 'images/hf-logo.png',
link: 'projects.html#Evaluation',
description: 'The EvalEval workshop is organized by our collaborative Social Impact Evaluation project.'
},
{
title: 'Legal Hackathons',
tags: ['regulation', 'education', 'privacy', 'labor', 'society'],
image: 'images/hf-logo.png',
link: 'projects.html#Legal',
description: 'The Legal Hackathons produce reports analyzing existing and proposed regulation.'
},
{
title: 'AI Energy Scores',
tags: ['environment', 'measuring', 'society'],
image: 'images/hf-logo.png',
link: 'projects.html#Energy',
description: 'This project works toward standardized reporting of energy costs of AI systems.'
},
{
title: 'Topic Card: Social Systems',
tags: ['education', 'journalism', 'labor', 'society'],
image: 'images/hf-logo.png',
link: 'topics.html#Systems',
description: 'This topic card on the Impact of AI on Social Systems provides descriptions and resources.'
},
{
title: '🤗 Policy Writings',
tags: ['regulation', 'openness', 'privacy', 'society'],
image: 'images/hf-logo.png',
link: 'projects.html#Policy',
description: 'Policy-relevant writings, including comments on regulation, responses from RFIs, etc.'
},
];
// Populate the tag list in the sidebar
const tagList = document.getElementById('tagList');
const uniqueTags = [...new Set(items.flatMap(item => item.tags))];
uniqueTags.forEach(tag => {
const li = document.createElement('li');
li.textContent = tag;
li.className = 'tagListItem'
li.id = `li-${tag}`
li.addEventListener('click', () => displayItemsByTag(tag));
tagList.appendChild(li);
});
// Function to display items based on selected tag
function displayItemsByTag(selectedTag) {
localStorage.setItem("gallery-tag", selectedTag)
const itemContainer = document.getElementById('itemGallery');
itemContainer.innerHTML = '';
const filteredItems = items.filter(item => item.tags.includes(selectedTag));
let itemCount = 0;
filteredItems.forEach(item => {
itemCount = itemCount + 1;
const itemDiv = document.createElement('div');
itemDiv.className = 'item';
itemDiv.id = `item-${itemCount}`;
itemDiv.style.backgroundImage = `url(${item.image})`;
itemDiv.innerHTML = `
<h3><a href="${item.link}">${item.title}</a></h3>
<p>${item.description}</p>
`;
itemContainer.appendChild(itemDiv);
});
const allTagListItems = document.getElementsByClassName('tagListItem')
for (const tli of allTagListItems) {
if (tli.id === `li-${selectedTag}`) {
tli.style.backgroundColor = "#cbf5e1";
} else {
tli.style.backgroundColor = "White";
}
}
const showing = document.getElementById('sidebarShowing');
showing.innerHTML = `Showing projects relevant to: <strong>${selectedTag}</strong>`
}
// Start with society
if (!localStorage.getItem("gallery-tag")) {
displayItemsByTag("society");
} else {
const selectedTag = localStorage.getItem("gallery-tag");
displayItemsByTag(selectedTag);
}
|