|
|
|
|
|
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-4 text-center"> |
|
|
AI, ML, and Society |
|
|
</h3> |
|
|
|
|
|
<div class="space-y-4 text-gray-900 mb-10"> |
|
|
<div class="text-base"> |
|
|
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: |
|
|
</div> |
|
|
|
|
|
<!-- Compact, elegant list with strong visual identity --> |
|
|
<ul class="my-8 ml-12"> |
|
|
<li class="relative pl-12 py-3 border-l-2 border-green-200/60 hover:border-green-300 transition-colors"> |
|
|
<span class="absolute left-[-0.6rem] top-[1.1rem] w-4 h-4 rounded-full bg-white border-2 border-green-300 shadow-sm"></span> |
|
|
<div class="text-base leading-loose font-medium"> |
|
|
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. |
|
|
</div> |
|
|
</li> |
|
|
|
|
|
<li class="relative pl-12 py-3 border-l-2 border-purple-200/60 hover:border-purple-300 transition-colors"> |
|
|
<span class="absolute left-[-0.6rem] top-[1.1rem] w-4 h-4 rounded-full bg-white border-2 border-purple-300 shadow-sm"></span> |
|
|
<div class="text-base leading-loose font-medium"> |
|
|
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. |
|
|
</div> |
|
|
</li> |
|
|
|
|
|
<li class="relative pl-12 py-3 border-l-2 border-orange-200/60 hover:border-orange-300 transition-colors"> |
|
|
<span class="absolute left-[-0.6rem] top-[1.1rem] w-4 h-4 rounded-full bg-white border-2 border-orange-300 shadow-sm"></span> |
|
|
<div class="text-base leading-loose font-medium"> |
|
|
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. |
|
|
</div> |
|
|
</li> |
|
|
</ul> |
|
|
|
|
|
<div class="text-base pt-4"> |
|
|
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. |
|
|
</div> |
|
|
</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 text-base 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, |
|
|
<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 <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'; |
|
|
}); |
|
|
} |
|
|
|
