File size: 16,325 Bytes
b83101c 72be969 b83101c 8ed13f7 35c7332 8ed13f7 35c7332 8ed13f7 35c7332 8ed13f7 35c7332 50d87da 186bc23 b83101c 50d87da 72be969 50d87da 72be969 50d87da 72be969 b83101c 5daef86 35c7332 8ed13f7 0ad2b04 35c7332 72be969 35c7332 b83101c 35c7332 8ed13f7 35c7332 8ed13f7 35c7332 8ed13f7 72be969 8ed13f7 35c7332 72be969 35c7332 8ed13f7 72be969 35c7332 5daef86 b83101c 35c7332 b83101c 35c7332 b83101c 35c7332 b83101c 35c7332 b83101c 50d87da b83101c 72be969 35c7332 f982d69 35c7332 f982d69 b83101c 72be969 b83101c 72be969 b83101c 8ed13f7 72be969 8ed13f7 50d87da 72be969 50d87da 72be969 50d87da 8ed13f7 50d87da 72be969 50d87da 72be969 50d87da 8ed13f7 50d87da b83101c 72be969 b83101c f982d69 72be969 f982d69 50d87da 8ed13f7 35c7332 8ed13f7 b83101c f982d69 |
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 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Machine Learning and Society at Hugging Face</title>
<!-- SEO Meta Tags -->
<meta name="description" content="The Machine Learning and Society team at Hugging Face works on the sustainability, agency, and ecosystems of AI systems through open research and collaborative development.">
<meta name="keywords" content="machine learning, AI ethics, AI sustainability, AI agency, AI ecosystems, open source AI, Hugging Face">
<meta name="author" content="Hugging Face - Machine Learning and Society Team">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://huggingface.co/">
<meta property="og:title" content="Machine Learning and Society at Hugging Face">
<meta property="og:description" content="Research on the sustainability, agency, and ecosystems of AI systems through open and collaborative development.">
<meta property="og:image" content="/images/background_ai.png">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://huggingface.co/">
<meta property="twitter:title" content="Machine Learning and Society at Hugging Face">
<meta property="twitter:description" content="Research on the sustainability, agency, and ecosystems of AI systems through open and collaborative development.">
<meta property="twitter:image" content="/images/background_ai.png">
<!-- Performance: Preconnect to CDN origins -->
<link rel="preconnect" href="https://cdn.tailwindcss.com">
<link rel="preconnect" href="https://cdn.jsdelivr.net">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<script src="https://cdn.tailwindcss.com"></script>
<!-- Import map for lit-html -->
<script type="importmap">
{
"imports": {
"lit-html": "https://cdn.jsdelivr.net/npm/lit-html@3/+esm"
}
}
</script>
<!-- Load areas data synchronously FIRST (before Alpine.js) -->
<script type="module">
import { areasData, getNavigationData, homeBackgroundImage, overallBackgroundImage } from './js/data/areas.js';
window.areasData = areasData;
window.navigationAreas = getNavigationData();
window.homeBackgroundImage = homeBackgroundImage;
window.overallBackgroundImage = overallBackgroundImage;
</script>
<!-- Alpine.js can now safely use window.navigationAreas -->
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
<!-- Google Fonts Import -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Source+Sans+Pro:wght@400;600&display=swap" rel="stylesheet">
<!-- Custom Styles -->
<link rel="stylesheet" href="styles.css">
</head>
<body class="bg-gray-50 text-gray-800">
<!-- Overall Background Image - Only for header and sidebars -->
<div id="overall-background" class="fixed opacity-100 z-40 pointer-events-none" style="top: 0; left: 0; right: 0; height: var(--header-height);">
<img src="/images/background_ai.png" alt="" class="w-full h-full object-cover object-left-top" loading="eager">
</div>
<!-- Right Sidebar Background (when open) -->
<div id="right-sidebar-background" class="fixed opacity-60 z-0 pointer-events-none hidden" style="top: var(--header-height); right: 0; width: 320px; bottom: 0;">
<img src="/images/background_ai.png" alt="" class="w-full h-full object-cover object-right" loading="lazy">
</div>
<!-- Skip to main content link for accessibility -->
<a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 focus:z-50 focus:px-4 focus:py-2 focus:bg-blue-600 focus:text-white focus:rounded">
Skip to main content
</a>
<!-- Top Navigation -->
<header role="banner" aria-label="Main navigation" class="bg-white/80 shadow-md border-b border-gray-300 fixed top-0 left-0 right-0 z-50" style="height: var(--header-height);" x-data="{
mobileMenuOpen: false,
areas: window.navigationAreas || [],
currentArea: null,
init() {
// Listen for navigation changes
window.addEventListener('navigation-changed', (e) => {
this.currentArea = e.detail.currentArea;
});
// Get initial current area from Alpine store if available
if (window.Alpine && window.Alpine.store('navigation')) {
this.currentArea = window.Alpine.store('navigation').currentArea;
}
},
isActiveArea(areaId) {
return this.currentArea === areaId;
}
}">
<div class="h-full flex items-stretch">
<!-- Left: Title as Home Link (always two lines) -->
<div class="flex items-center justify-between flex-1 xl:flex-initial border-r-0 xl:border-r border-gray-300 px-4 xl:px-6">
<a href="/" class="text-xl xl:text-2xl font-bold text-gray-800 leading-tight hover:text-blue-600 transition-colors">
<span class="block">Machine Learning</span>
<span class="block">and Society at 🤗</span>
</a>
<!-- Mobile menu button -->
<button @click="mobileMenuOpen = !mobileMenuOpen"
class="xl:hidden p-2 text-gray-600"
aria-label="Toggle mobile menu"
aria-expanded="false"
:aria-expanded="mobileMenuOpen.toString()">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path x-show="!mobileMenuOpen" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
<path x-show="mobileMenuOpen" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<!-- Spacer between title and navigation -->
<div class="hidden xl:block flex-1"></div>
<!-- Right: Two-column Navigation Menu -->
<div class="hidden xl:flex items-stretch ml-auto" style="padding-right: 2rem;">
<!-- Left Column: Three Area Titles (horizontal, larger text) -->
<div class="flex items-center border-r border-gray-200">
<a :href="areas[0] ? `/${areas[0].id}` : '#'"
class="flex items-center justify-center px-8 py-2 text-xl font-semibold transition-colors border-r border-gray-200"
:class="isActiveArea(areas[0]?.id) ? 'text-blue-600 bg-blue-50' : 'text-gray-700 hover:text-blue-600 hover:bg-blue-50/50'"
x-text="areas[0]?.navTitle || 'Area 1'"></a>
<a :href="areas[1] ? `/${areas[1].id}` : '#'"
class="flex items-center justify-center px-8 py-2 text-xl font-semibold transition-colors border-r border-gray-200"
:class="isActiveArea(areas[1]?.id) ? 'text-blue-600 bg-blue-50' : 'text-gray-700 hover:text-blue-600 hover:bg-blue-50/50'"
x-text="areas[1]?.navTitle || 'Area 2'"></a>
<a :href="areas[2] ? `/${areas[2].id}` : '#'"
class="flex items-center justify-center px-8 py-2 text-xl font-semibold transition-colors"
:class="isActiveArea(areas[2]?.id) ? 'text-blue-600 bg-blue-50' : 'text-gray-700 hover:text-blue-600 hover:bg-blue-50/50'"
x-text="areas[2]?.navTitle || 'Area 3'"></a>
</div>
<!-- Right Column: Press and Search (stacked vertically) -->
<div class="flex flex-col">
<a href="/about"
class="flex items-center justify-center px-8 py-2 text-lg font-medium text-gray-700 hover:text-blue-600 hover:bg-blue-50/50 transition-colors border-b border-gray-200 flex-1">Press</a>
<button id="search-toggle"
class="flex items-center justify-center px-8 py-2 text-gray-700 hover:text-blue-600 hover:bg-blue-50/50 transition-colors flex-1"
aria-label="Open search"
aria-controls="search-sidebar">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
</svg>
</button>
</div>
</div>
</div>
<!-- Mobile Menu (Dropdown) -->
<nav x-show="mobileMenuOpen"
x-transition
@click.away="mobileMenuOpen = false"
class="xl:hidden absolute top-full left-0 right-0 bg-white shadow-lg border-b border-gray-200 z-40"
x-data="mobileTopicNav()"
role="navigation"
aria-label="Mobile navigation menu">
<div class="px-4 py-3 space-y-2 max-h-[70vh] overflow-y-auto">
<!-- Areas with Topics -->
<div>
<p class="px-3 text-sm font-semibold text-gray-500 uppercase tracking-wide mb-2">Research Areas</p>
<template x-for="area in areas" :key="area.id">
<div class="mb-2">
<a :href="`/${area.id}`"
class="block px-3 py-2 text-sm font-semibold text-gray-800 hover:bg-blue-50 hover:text-blue-600 rounded transition-colors"
x-text="area.title"></a>
<!-- Topics for this area -->
<div class="ml-4 mt-1 space-y-1">
<template x-for="topic in area.topics" :key="topic.id">
<a :href="`/${area.id}/${topic.id}`"
class="block px-3 py-1.5 text-xs text-gray-600 hover:bg-blue-50 hover:text-blue-600 rounded transition-colors"
x-text="topic.name"></a>
</template>
</div>
</div>
</template>
</div>
<!-- Press -->
<div class="border-t border-gray-200 pt-2">
<a href="/about" class="block px-3 py-2 text-base font-medium text-gray-700 hover:bg-blue-50 hover:text-blue-600 rounded transition-colors">Press</a>
</div>
</div>
</div>
</header>
<!-- Main Layout -->
<div id="main-layout" class="flex" style="padding-top: var(--header-height);">
<!-- Main Content -->
<main role="main" class="flex-1 transition-all duration-300 overflow-x-hidden" id="main-content">
<div class="w-full py-8">
<!-- Content will be loaded dynamically by the SPA router -->
<div class="bg-white rounded-lg shadow-sm p-8 mx-4 sm:mx-6 lg:mx-8" style="max-width: min(90%, 1400px); margin-left: auto; margin-right: auto;">
<div class="text-center py-8">
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto mb-4"></div>
<p class="text-gray-600">Loading...</p>
</div>
</div>
</div>
</main>
<!-- Right Sidebar - Search (Collapsible) -->
<aside id="search-sidebar"
role="search"
aria-label="Search sidebar"
class="fixed right-0 h-full w-80 bg-white/85 backdrop-blur-sm shadow-sm border-l border-gray-200 transform translate-x-full z-40 transition-transform duration-300"
style="top: var(--header-height);">
<div class="p-6">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-semibold text-gray-900">Search</h3>
<button id="search-close"
class="p-1 rounded-md text-gray-400 hover:text-gray-500 transition-colors"
aria-label="Close search">
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<!-- Search Description -->
<div class="mb-4">
<p class="text-sm text-gray-600" style="line-height: var(--leading-relaxed);">We have produced or collaborated on a fair amount of papers, writings, and technical artifacts over the years. Use the search functionality here to navigate those!</p>
</div>
<!-- Search Input -->
<div class="mb-4">
<label for="search-input" class="sr-only">Search works by the ML & Society team</label>
<input
type="search"
id="search-input"
placeholder="Search works by the ML & Society team"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
aria-describedby="search-description"
>
</div>
<!-- Search Results - Fixed height with proper scrolling -->
<div id="search-results"
class="overflow-y-auto"
style="height: calc(100vh - 193px);"
role="region"
aria-live="polite"
aria-label="Search results">
<div class="text-gray-500 text-center py-8">
<p>Enter a search term to find related works by the ML & Society team.</p>
</div>
</div>
</div>
</aside>
</div>
<!-- Overlay for mobile (darker on mobile for better visibility) -->
<div id="sidebar-overlay"
class="fixed inset-0 bg-black bg-opacity-30 md:bg-opacity-30 z-30 hidden"
aria-hidden="true"></div>
<!-- Scroll to Top Button -->
<button id="scroll-to-top"
class="fixed bottom-6 right-6 w-12 h-12 bg-blue-600 hover:bg-blue-700 text-white rounded-full shadow-lg hover:shadow-xl transition-all duration-300 opacity-0 invisible z-50 flex items-center justify-center group"
aria-label="Scroll to top">
<svg class="w-5 h-5 transform group-hover:scale-110 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path>
</svg>
<span class="sr-only">Scroll to top</span>
</button>
<script src="https://cdn.jsdelivr.net/npm/minisearch@6.0.1/dist/umd/index.js"></script>
<!-- Alpine.js component definitions (uses window.navigationAreas loaded in head) -->
<script src="js/alpine-init.js"></script>
<!-- SINGLE ENTRY POINT - orchestrates all initialization -->
<script type="module" src="js/bootstrap.js"></script>
</body>
</html>
|