| <!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> |
|
|
