Artificial Intelligence has evolved rapidly over the last five years from a hidden foundation of digital infrastructure to a ubiquitous consumer-facing technology, expanding its societal roles and interactions;
and with it, the need for structures that enable all concerned parties to understand, verify, and broadly participate in its design, including notably when looking to:
-
The ${createInlineLink('Sustainability', '/sustainability', areasData.sustainability.color, areasData.sustainability.description.short)} of the technology, through better
${createInlineLink('measurement', '/sustainability#measuring', areasData.sustainability.topics.measuring.color, areasData.sustainability.topics.measuring.description.short)} and
${createInlineLink('efficiency', '/sustainability#efficiency', areasData.sustainability.topics.efficiency.color, areasData.sustainability.topics.efficiency.description.short)} techniques.
-
The ${createInlineLink('Agency', '/agency', areasData.agency.color, areasData.agency.description.short)} of
${createInlineLink('individuals', '/agency#personal', areasData.agency.topics.personal.color, areasData.agency.topics.personal.description.short)} and
${createInlineLink('communities', '/agency#community', areasData.agency.topics.community.color, areasData.agency.topics.community.description.short)} in their interactions with AI.
-
The ${createInlineLink('Ecosystems', '/ecosystems', areasData.ecosystems.color, areasData.ecosystems.description.short)} that shape AI,
including ${createInlineLink('economic', '/ecosystems#economy', areasData.ecosystems.topics.economy.color, areasData.ecosystems.topics.economy.description.short)} and
${createInlineLink('regulatory', '/ecosystems#regulation', areasData.ecosystems.topics.regulation.color, areasData.ecosystems.topics.regulation.description.short)} and the impact of
${createInlineLink('concentrations of resources', '/ecosystems#power', areasData.ecosystems.topics.power.color, areasData.ecosystems.topics.power.description.short)} on these.
This website presents the work of the ${createInlineLink('Machine Learning and Society', 'https://huggingface.co/hfmlsoc', 'bg-blue-100 text-blue-800')} team at Hugging Face on these topics.
Our approach is rooted in open production of research and tools and in leveraging the unique contributions of open models, datasets, and research.
We actively invite partners from all areas of expertise to reach out and collaborate.
We also work closely with
Irene Solaiman (Chief Policy Officer),
Avijit Ghosh (Applied Policy Researcher) in the policy team,
Meg Mitchell (Chief Ethics Scientist),
and Bruna Trevelin (Legal Counsel)!
`)}
`;
return {
content,
init: () => {
initializeTeamMembers();
initializeHomeAreaCards();
initializeArtifactCarousels();
initializeBackgroundAttribution();
initializeStickyNavigation('nav-container');
}
};
}
function initializeTeamMembers() {
const teamContainer = document.getElementById('team-grid');
if (!teamContainer) {
return;
}
teamContainer.innerHTML = teamMembers.map(member =>
createTeamMember(member.name, member.role, member.username, member.tags)
).join('');
}
function initializeHomeAreaCards() {
const areasContainer = document.getElementById('research-areas-grid');
if (!areasContainer) return;
const areas = Object.values(areasData);
areasContainer.innerHTML = areas.map(area => createResearchAreaCard(area)).join('');
}
function createResearchAreaCard(area) {
// Use the unified Card component
return renderAreaCard(area);
}
function initializeArtifactCarousels() {
const carouselContainer = document.getElementById('featured-artifacts-carousel');
if (!carouselContainer) return;
// Get featured artifacts dynamically from the loaded JSON data
const featuredArtifacts = getFeaturedArtifacts();
createArtifactCarousel(featuredArtifacts, 'featured-artifacts-carousel');
}
function initializeBackgroundAttribution() {
const backgroundContainer = document.getElementById('home-background-container');
const attribution = document.getElementById('home-bg-attribution');
if (!backgroundContainer || !attribution) {
return;
}
// Show attribution on hover over the background container
backgroundContainer.addEventListener('mouseenter', () => {
attribution.style.opacity = '1';
});
backgroundContainer.addEventListener('mouseleave', () => {
attribution.style.opacity = '0';
});
}