File size: 8,290 Bytes
930894d af4f87f 8ed13f7 930894d 8ed13f7 f07b5d3 8ed13f7 5daef86 8ed13f7 5daef86 8ed13f7 930894d cddcbaf 930894d 8ed13f7 cddcbaf 8ed13f7 5daef86 8ed13f7 0ad2b04 8ed13f7 cddcbaf 8ed13f7 fb85a41 0ad2b04 8ed13f7 cddcbaf 8ed13f7 930894d 8ed13f7 930894d 8ed13f7 cddcbaf 8ed13f7 cddcbaf 8ed13f7 930894d f07b5d3 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 138 139 140 141 142 143 144 145 146 147 148 149 150 |
// 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';
import { initializeStickyNavigation } from '../utils/stickyNavigation.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.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 `<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) {
// 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';
});
}
|