File size: 8,007 Bytes
930894d 8ed13f7 930894d 8ed13f7 930894d cddcbaf 930894d 8ed13f7 cddcbaf 8ed13f7 cddcbaf 8ed13f7 cddcbaf 8ed13f7 930894d 8ed13f7 930894d 8ed13f7 cddcbaf 8ed13f7 cddcbaf 8ed13f7 930894d cddcbaf 930894d cddcbaf 8ed13f7 930894d 8ed13f7 930894d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 |
// pages/HomePage.js - Home page functionality for SPA
import { createTeamMember } from '../main.js';
import { createArtifactCarousel } from '../cards/ArtifactSummaryCard.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 <head>)
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 py-0.5 mx-0.5 text-sm font-medium rounded hover:opacity-80 transition-opacity no-underline';
const titleAttr = tooltip ? ` title="${tooltip}"` : '';
return `<a href="${href}" class="${baseClass} ${colorClass}"${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-700 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', '/', '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) {
// 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';
});
}
|