|
|
<!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"> |
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="styles.css"> |
|
|
</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/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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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-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> |
|
|
|
|
|
<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> |
|
|
|
