// pages/HomePage.js - Home page functionality for SPA import { createTeamMember } from '../main.js'; import { createArtifactCarousel } from '../components/Carousel.js'; import { getFeaturedArtifacts } from '../init.js'; import { teamMembers } from '../data/team.js'; import { renderAreaCard } from '../components/Card.js'; import { renderHomeNavigation } from '../components/PageNavigation.js'; import { renderContentSection, renderOpennessCallout } from '../components/ContentSection.js'; // Use global areasData and backgrounds (loaded in index.html ) const areasData = window.areasData; const homeBackgroundImage = window.homeBackgroundImage; // Helper function to create inline styled links function createInlineLink(text, href, colorClass = '', tooltip = '') { const baseClass = 'inline-block px-2.5 py-1 mx-0.5 text-sm font-semibold rounded hover:opacity-90 transition-opacity no-underline border'; const titleAttr = tooltip ? ` title="${tooltip}"` : ''; // Map color classes to darker variants and add border colors const enhancedColorClass = colorClass .replace('bg-yellow-100', 'bg-yellow-200 border-yellow-300') .replace('bg-blue-100', 'bg-blue-200 border-blue-300') .replace('bg-green-100', 'bg-green-200 border-green-300') .replace('bg-purple-100', 'bg-purple-200 border-purple-300') .replace('bg-orange-100', 'bg-orange-200 border-orange-300') .replace('text-yellow-800', 'text-yellow-900') .replace('text-blue-800', 'text-blue-900') .replace('text-green-800', 'text-green-900') .replace('text-purple-800', 'text-purple-900') .replace('text-orange-800', 'text-orange-900'); return `${text}`; } export function renderHomePage() { const content = `

${renderHomeNavigation()} ${renderContentSection('about-and-works', `

About

With the rapid evolution of Artificial Intelligence over the last five years – and particularly its shift from Machine Learning as a behind-the-scenes organizing principle of our digital infrastructure to the more visible "generative AI" systems sold as consumer products – the interaction modes between the technology and its social contexts have expanded drastically.

Technology developers have a role to play in fostering more positive outcomes for these interactions; but they cannot be the sole deciders. However, for co-development to occur in meaningful ways between different kinds of stakeholders – with potentially diverging interests – it needs to be grounded in a common understanding of the technology and ability to investigate and modify technical systems. This is greatly facilitated by artificial intelligence models, datasets, and systems that are openly and collaboratively developed.

In addition to the work of the entire ${createInlineLink('Hugging Face', 'https://huggingface.co', 'bg-yellow-100 text-yellow-800')} team to support the development and sharing of such systems, the ${createInlineLink('Machine Learning and Society Team', 'https://huggingface.co/hfmlsoc', 'bg-blue-100 text-blue-800')} works on projects targeting the boundaries between technology and society more specifically. This includes work on the ${createInlineLink('Sustainability', '/sustainability', areasData.sustainability.color, areasData.sustainability.description.short)} of the technology, addressing its financial and environmental costs and investigating methods to manage its footprint, work on how ${createInlineLink('Agency', '/agency', areasData.agency.color, areasData.agency.description.short)} over artificial intelligence systems (or lack thereof) plays out for individual and communities, and work on how the economic and regulatory ${createInlineLink('Ecosystems of AI', '/ecosystems', areasData.ecosystems.color, areasData.ecosystems.description.short)} shape who benefits most or least from the technology.

This work is shaped by different aspects of openness, from transparency to collaboration to ease of access. Beyond producing research and tools that we hope will support more distributed development of the technology, we strongly invite collaborations on shared resources with all categories of expertise.

Recent & Featured Works

`)} ${renderContentSection('areas-and-team', `

Research Areas

Team Members

We also work closely with Irene Solaiman (Chief Policy Officer), Avijit Ghosh (Applied Policy Researcher) in the policy team, and with Meg Mitchell (Chief Ethics Scientist), and with Bruna Trevelin (Legal Counsel)!

`)} `; return { content, init: () => { initializeTeamMembers(); initializeHomeAreaCards(); initializeArtifactCarousels(); initializeBackgroundAttribution(); } }; } 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'; }); }