File size: 10,680 Bytes
930894d af4f87f 8ed13f7 930894d 8ed13f7 f07b5d3 8ed13f7 5daef86 8ed13f7 5daef86 8ed13f7 930894d cddcbaf 930894d 8ed13f7 cddcbaf 8ed13f7 9639a64 8ed13f7 91f482a cddcbaf 91f482a 9639a64 91f482a 9639a64 91f482a cddcbaf 8ed13f7 930894d 8ed13f7 930894d 8ed13f7 cddcbaf 8ed13f7 cddcbaf 91f482a 8ed13f7 0832b23 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 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 |
// 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-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) {
// 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';
});
}
|