|
|
<!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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
<script type="importmap"> |
|
|
{ |
|
|
"imports": { |
|
|
"lit-html": "https://cdn.jsdelivr.net/npm/lit-html@3/+esm" |
|
|
} |
|
|
} |
|
|
</script> |
|
|
|
|
|
<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> |
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script> |
|
|
|
|
|
<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"> |
|
|
|
|
|
<style> |
|
|
|
|
|
html, body { |
|
|
overflow-x: hidden; |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
|
|
|
body { |
|
|
font-family: 'Source Sans Pro', sans-serif; |
|
|
--header-height: 100px; |
|
|
|
|
|
|
|
|
--text-xs: 0.75rem; |
|
|
--text-sm: 0.875rem; |
|
|
--text-base: 1rem; |
|
|
--text-lg: 1.125rem; |
|
|
--text-xl: 1.25rem; |
|
|
--text-2xl: 1.5rem; |
|
|
--text-3xl: 1.875rem; |
|
|
--text-4xl: 2.25rem; |
|
|
|
|
|
|
|
|
--leading-tight: 1.25; |
|
|
--leading-normal: 1.5; |
|
|
--leading-relaxed: 1.625; |
|
|
--leading-loose: 1.75; |
|
|
} |
|
|
|
|
|
|
|
|
@media (max-width: 767px) { |
|
|
body { |
|
|
font-size: 14px; |
|
|
} |
|
|
|
|
|
|
|
|
h1 { |
|
|
font-size: var(--text-2xl); |
|
|
} |
|
|
|
|
|
h2 { |
|
|
font-size: var(--text-xl); |
|
|
} |
|
|
|
|
|
h3 { |
|
|
font-size: var(--text-lg); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@media (max-width: 1023px) { |
|
|
body { |
|
|
--header-height: 80px; |
|
|
} |
|
|
} |
|
|
|
|
|
@media (max-width: 767px) { |
|
|
body { |
|
|
--header-height: 70px; |
|
|
} |
|
|
} |
|
|
|
|
|
h1, h2, h3, h4, h5, h6 { |
|
|
font-family: 'Montserrat', sans-serif; |
|
|
line-height: var(--leading-tight); |
|
|
} |
|
|
|
|
|
|
|
|
p { |
|
|
line-height: var(--leading-relaxed); |
|
|
} |
|
|
|
|
|
|
|
|
.prose p { |
|
|
line-height: var(--leading-loose); |
|
|
margin-bottom: 1em; |
|
|
} |
|
|
|
|
|
|
|
|
#main-layout, #main-content { |
|
|
max-width: 100vw; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
@media (max-width: 1023px) { |
|
|
.mobile-menu-hidden { |
|
|
display: none; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@media (max-width: 767px) { |
|
|
#search-sidebar { |
|
|
width: 100vw !important; |
|
|
right: 0; |
|
|
} |
|
|
|
|
|
#search-sidebar > div { |
|
|
padding: 1rem; |
|
|
} |
|
|
|
|
|
|
|
|
#search-results { |
|
|
height: calc(100vh - 180px) !important; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@media (min-width: 769px) { |
|
|
.nav-line-scroll { |
|
|
overflow-x: auto; |
|
|
overflow-y: hidden; |
|
|
white-space: nowrap; |
|
|
} |
|
|
|
|
|
.nav-line-scroll::-webkit-scrollbar { |
|
|
height: 4px; |
|
|
} |
|
|
|
|
|
.nav-line-scroll::-webkit-scrollbar-track { |
|
|
background: #f1f1f1; |
|
|
} |
|
|
|
|
|
.nav-line-scroll::-webkit-scrollbar-thumb { |
|
|
background: #888; |
|
|
border-radius: 2px; |
|
|
} |
|
|
} |
|
|
|
|
|
.backdrop-blur-md { |
|
|
backdrop-filter: blur(12px); |
|
|
-webkit-backdrop-filter: blur(12px); |
|
|
} |
|
|
|
|
|
.backdrop-blur-sm { |
|
|
backdrop-filter: blur(8px); |
|
|
-webkit-backdrop-filter: blur(8px); |
|
|
} |
|
|
|
|
|
|
|
|
.line-clamp-2 { |
|
|
display: -webkit-box; |
|
|
-webkit-line-clamp: 2; |
|
|
-webkit-box-orient: vertical; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.line-clamp-3 { |
|
|
display: -webkit-box; |
|
|
-webkit-line-clamp: 3; |
|
|
-webkit-box-orient: vertical; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.drop-shadow-lg { |
|
|
filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3)); |
|
|
} |
|
|
|
|
|
.scrollbar-hide { |
|
|
-ms-overflow-style: none; |
|
|
scrollbar-width: none; |
|
|
} |
|
|
|
|
|
.scrollbar-hide::-webkit-scrollbar { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
|
|
|
.sr-only { |
|
|
position: absolute; |
|
|
width: 1px; |
|
|
height: 1px; |
|
|
padding: 0; |
|
|
margin: -1px; |
|
|
overflow: hidden; |
|
|
clip: rect(0, 0, 0, 0); |
|
|
white-space: nowrap; |
|
|
border-width: 0; |
|
|
} |
|
|
|
|
|
.sr-only:focus { |
|
|
position: static; |
|
|
width: auto; |
|
|
height: auto; |
|
|
padding: inherit; |
|
|
margin: inherit; |
|
|
overflow: visible; |
|
|
clip: auto; |
|
|
white-space: normal; |
|
|
} |
|
|
|
|
|
|
|
|
@media (max-width: 767px) { |
|
|
|
|
|
.carousel-arrow { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
|
|
|
.carousel-scroll { |
|
|
-webkit-overflow-scrolling: touch; |
|
|
scroll-behavior: smooth; |
|
|
} |
|
|
|
|
|
|
|
|
.carousel-scroll > * { |
|
|
scroll-snap-align: start; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.carousel-arrow { |
|
|
transition: opacity 0.2s, transform 0.2s; |
|
|
} |
|
|
|
|
|
.carousel-arrow:hover { |
|
|
transform: scale(1.1); |
|
|
} |
|
|
|
|
|
.carousel-arrow:active { |
|
|
transform: scale(0.95); |
|
|
} |
|
|
|
|
|
|
|
|
.overflow-y-auto::-webkit-scrollbar { |
|
|
width: 4px; |
|
|
} |
|
|
|
|
|
.overflow-y-auto::-webkit-scrollbar-track { |
|
|
background: transparent; |
|
|
} |
|
|
|
|
|
.overflow-y-auto::-webkit-scrollbar-thumb { |
|
|
background: #cbd5e0; |
|
|
border-radius: 2px; |
|
|
} |
|
|
|
|
|
.overflow-y-auto::-webkit-scrollbar-thumb:hover { |
|
|
background: #a0aec0; |
|
|
} |
|
|
|
|
|
|
|
|
#search-results { |
|
|
scrollbar-width: thin; |
|
|
scrollbar-color: #cbd5e0 #f7fafc; |
|
|
} |
|
|
|
|
|
#search-results::-webkit-scrollbar { |
|
|
width: 6px; |
|
|
} |
|
|
|
|
|
#search-results::-webkit-scrollbar-track { |
|
|
background: #f7fafc; |
|
|
} |
|
|
|
|
|
#search-results::-webkit-scrollbar-thumb { |
|
|
background: #cbd5e0; |
|
|
border-radius: 3px; |
|
|
} |
|
|
|
|
|
#search-results::-webkit-scrollbar-thumb:hover { |
|
|
background: #a0aec0; |
|
|
} |
|
|
|
|
|
|
|
|
#overall-background { |
|
|
background-attachment: fixed; |
|
|
} |
|
|
|
|
|
#overall-background img { |
|
|
object-fit: cover; |
|
|
object-position: left top; |
|
|
} |
|
|
|
|
|
#page-background { |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
#page-background img { |
|
|
height: 100%; |
|
|
width: auto; |
|
|
min-width: 100%; |
|
|
object-fit: cover; |
|
|
object-position: left top; |
|
|
} |
|
|
|
|
|
|
|
|
header, #search-sidebar { |
|
|
background: rgba(255, 255, 255, 0.6); |
|
|
} |
|
|
|
|
|
|
|
|
header *, #search-sidebar * { |
|
|
position: relative; |
|
|
z-index: 1; |
|
|
} |
|
|
|
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 text-gray-800"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<header role="banner" aria-label="Main navigation" class="bg-white/60 shadow-sm border-b border-gray-200 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"> |
|
|
|
|
|
<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-lg xl:text-xl 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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<div class="hidden xl:block flex-1"></div> |
|
|
|
|
|
|
|
|
<div class="hidden xl:flex items-stretch ml-auto" style="padding-right: 2rem;"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
<div> |
|
|
<p class="px-3 text-xs 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> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<div id="main-layout" class="flex" style="padding-top: var(--header-height);"> |
|
|
|
|
|
<main role="main" class="flex-1 transition-all duration-300 overflow-x-hidden" id="main-content"> |
|
|
<div class="w-full py-8"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<div id="sidebar-overlay" |
|
|
class="fixed inset-0 bg-black bg-opacity-30 md:bg-opacity-30 z-30 hidden" |
|
|
aria-hidden="true"></div> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
<script src="js/alpine-init.js"></script> |
|
|
|
|
|
<script type="module" src="js/bootstrap.js"></script> |
|
|
</body> |
|
|
</html> |
|
|
|
