|
|
|
|
|
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'; |
|
|
|
|
|
|
|
|
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> |
|
|
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. |
|
|
</p> |
|
|
|
|
|
<p> |
|
|
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. |
|
|
</p> |
|
|
|
|
|
<p> |
|
|
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. |
|
|
</p> |
|
|
|
|
|
<p> |
|
|
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. |
|
|
</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(); |
|
|
} |
|
|
}; |
|
|
} |
|
|
|
|
|
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'; |
|
|
}); |
|
|
} |
|
|
|
