|
|
|
|
|
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'; |
|
|
import { initializeStickyNavigation } from '../utils/stickyNavigation.js'; |
|
|
|
|
|
|
|
|
const areasData = window.areasData; |
|
|
const homeBackgroundImage = window.homeBackgroundImage; |
|
|
|
|
|
|
|
|
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}"` : ''; |
|
|
|
|
|
|
|
|
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 `<a href="${href}" class="${baseClass} ${enhancedColorClass}"${titleAttr}>${text}</a>`; |
|
|
} |
|
|
|
|
|
export function renderHomePage() { |
|
|
const content = ` |
|
|
<!-- Top spacing --> |
|
|
<div class="mb-8"></div> |
|
|
|
|
|
${renderHomeNavigation()} |
|
|
|
|
|
${renderContentSection('about-and-works', ` |
|
|
<h3 id="about" class="text-xl md:text-2xl font-bold text-gray-900 mb-8 text-center">About</h3> |
|
|
|
|
|
<div class="space-y-2 text-gray-900 leading-relaxed mb-8"> |
|
|
<p> |
|
|
Artificial Intelligence has evolved rapidly over the past five years: from a largely hidden infrastructure to a visible, consumer-facing force driven by generative systems that now shape everyday interactions. This change has expanded how AI interacts with society, making shared understanding and collaborative engagement – outside of the control of a limited set of developers who control data flows – more critical. Openly accessible models, documented datasets, and reproducible workflows support broader investigation, informed dialogue, and iterative improvement across diverse stakeholders with different interests. |
|
|
</p> |
|
|
|
|
|
<p> |
|
|
In the broader context of ${createInlineLink('Hugging Face', 'https://huggingface.co', 'bg-yellow-100 text-yellow-800')} efforts to support the open sharing and development of AI systems, |
|
|
the ${createInlineLink('Machine Learning and Society Team', 'https://huggingface.co/hfmlsoc', 'bg-blue-100 text-blue-800')} works on projects targeting topics at the boundary between technology and society. |
|
|
These include measuring and improving the ${createInlineLink('Sustainability', '/sustainability', areasData.sustainability.color, areasData.sustainability.description.short)} of the technology, |
|
|
characterizing and supporting the ${createInlineLink('Agency', '/agency', areasData.agency.color, areasData.agency.description.short)} of individual and communities in their interactions with AI, |
|
|
and understanding the economic and regulatory ${createInlineLink('Ecosystems of AI', '/ecosystems', areasData.ecosystems.color, areasData.ecosystems.description.short)} that shape who benefits from the technology. |
|
|
Our approach is rooted in open production of research and tools, and we actively invite partners from all areas of expertise to reach out and collaborate. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<h3 id="recent-works" class="text-xl md:text-2xl font-bold text-gray-900 mb-8 text-center mt-8 pt-8 border-t border-gray-200">Recent & Featured Works</h3> |
|
|
<div id="featured-artifacts-carousel" class="overflow-x-auto -mx-2"> |
|
|
<!-- Carousel will be inserted here --> |
|
|
</div> |
|
|
`)} |
|
|
|
|
|
${renderContentSection('areas-and-team', ` |
|
|
<h3 id="research-areas" class="text-xl md:text-2xl font-bold text-gray-900 mb-8 text-center">Research Areas</h3> |
|
|
<div id="research-areas-grid" class="grid grid-cols-1 md:grid-cols-3 gap-4 sm:gap-6 mb-8"> |
|
|
<!-- Area cards will be inserted here by JavaScript --> |
|
|
</div> |
|
|
|
|
|
<h3 id="team" class="text-xl md:text-2xl font-bold text-gray-900 mb-8 text-center mt-8 pt-8 border-t border-gray-200">Team Members</h3> |
|
|
<div id="team-grid" class="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6 mb-6"> |
|
|
<!-- Team members will be inserted here by JavaScript --> |
|
|
</div> |
|
|
<div class="prose max-w-none text-gray-700 pt-4 border-t border-gray-200"> |
|
|
<p>We also work closely with |
|
|
<a href="https://huggingface.co/irenesolaiman" class="text-blue-600 hover:text-blue-800 transition-colors" target="_blank">Irene Solaiman</a> (Chief Policy Officer), |
|
|
<a href="https://huggingface.co/evijit" class="text-blue-600 hover:text-blue-800 transition-colors" target="_blank">Avijit Ghosh</a> (Applied Policy Researcher) in the policy team, |
|
|
and with <a href="https://huggingface.co/meg" class="text-blue-600 hover:text-blue-800 transition-colors" target="_blank">Meg Mitchell</a> (Chief Ethics Scientist), |
|
|
and with <a href="https://huggingface.co/brunatrevelin" class="text-blue-600 hover:text-blue-800 transition-colors" target="_blank">Bruna Trevelin</a> (Legal Counsel)! |
|
|
</p> |
|
|
</div> |
|
|
`)} |
|
|
`; |
|
|
|
|
|
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) { |
|
|
|
|
|
return renderAreaCard(area); |
|
|
} |
|
|
|
|
|
function initializeArtifactCarousels() { |
|
|
const carouselContainer = document.getElementById('featured-artifacts-carousel'); |
|
|
if (!carouselContainer) return; |
|
|
|
|
|
|
|
|
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; |
|
|
} |
|
|
|
|
|
|
|
|
backgroundContainer.addEventListener('mouseenter', () => { |
|
|
attribution.style.opacity = '1'; |
|
|
}); |
|
|
|
|
|
backgroundContainer.addEventListener('mouseleave', () => { |
|
|
attribution.style.opacity = '0'; |
|
|
}); |
|
|
} |
|
|
|
