Hugging Face's logo

Spaces:
hfmlsoc
/
overview
Running

App Files Community
yjernite HF Staff commited on
Commit
b83101c
·
verified ·
1 Parent(s): c272027

Upload index.html

Browse files
Files changed (1) hide show
  1. index.html +254 -19
index.html CHANGED
@@ -1,19 +1,254 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Machine Learning and Society at 🤗</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <style>
9
+ /* Only essential custom styles for dropdowns */
10
+ .dropdown-hover:hover .dropdown-content {
11
+ opacity: 1;
12
+ visibility: visible;
13
+ transform: translateY(0);
14
+ }
15
+ .dropdown-content {
16
+ opacity: 0;
17
+ visibility: hidden;
18
+ transform: translateY(8px);
19
+ transition: all 0.2s ease;
20
+ position: absolute;
21
+ z-index: 50;
22
+ }
23
+
24
+ </style>
25
+ </head>
26
+ <body class="bg-gray-50">
27
+ <!-- Top Navigation -->
28
+ <header class="bg-white shadow-sm border-b border-gray-200 fixed top-0 left-0 right-0 z-50">
29
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
30
+ <!-- First Line: Main Title -->
31
+ <div class="text-center py-4 border-b border-gray-100">
32
+ <h1 class="text-2xl font-bold text-gray-900">Machine Learning and Society at 🤗</h1>
33
+ </div>
34
+
35
+ <!-- Second Line: Navigation -->
36
+ <nav class="flex justify-between items-center h-12">
37
+ <div class="flex items-center">
38
+ <button id="sidebar-toggle" class="p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 transition-colors">
39
+ <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
40
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
41
+ </svg>
42
+ </button>
43
+ <a href="/" class="text-blue-600 bg-blue-50 px-4 py-2 rounded-md text-sm font-medium ml-3">Home</a>
44
+
45
+ <!-- Visual separator -->
46
+ <div class="mx-6 h-6 w-px bg-gray-300"></div>
47
+
48
+ <!-- Research Areas -->
49
+ <div class="flex items-center space-x-4">
50
+ <div class="relative dropdown-hover">
51
+ <a href="/efficiency" class="text-sm text-gray-700 hover:text-blue-600 font-medium px-3 py-2 rounded-md transition-colors hover:bg-gray-50">Efficiency & Environment</a>
52
+ <div class="dropdown-content bg-white shadow-lg rounded-lg p-4 min-w-48 top-full left-0">
53
+ <a href="/efficiency#environmental" class="block text-xs text-gray-600 hover:text-blue-600 py-1 transition-colors">Environmental impact</a>
54
+ <a href="/efficiency#costs" class="block text-xs text-gray-600 hover:text-blue-600 py-1 transition-colors">Energy & financial costs</a>
55
+ <a href="/efficiency#compute" class="block text-xs text-gray-600 hover:text-blue-600 py-1 transition-colors">Compute efficiency</a>
56
+ </div>
57
+ </div>
58
+
59
+ <div class="relative dropdown-hover">
60
+ <a href="/personal" class="text-sm text-gray-700 hover:text-blue-600 font-medium px-3 py-2 rounded-md transition-colors hover:bg-gray-50">Consent & Personal Interactions</a>
61
+ <div class="dropdown-content bg-white shadow-lg rounded-lg p-4 min-w-48 top-full left-0">
62
+ <a href="/personal#interactions" class="block text-xs text-gray-600 hover:text-blue-600 py-1 transition-colors">Personal interactions</a>
63
+ <a href="/personal#privacy" class="block text-xs text-gray-600 hover:text-blue-600 py-1 transition-colors">Consent & privacy</a>
64
+ </div>
65
+ </div>
66
+
67
+ <div class="relative dropdown-hover">
68
+ <a href="/rights" class="text-sm text-gray-700 hover:text-blue-600 font-medium px-3 py-2 rounded-md transition-colors hover:bg-gray-50">Rights & Regulation</a>
69
+ <div class="dropdown-content bg-white shadow-lg rounded-lg p-4 min-w-48 top-full left-0">
70
+ <a href="/rights#existing" class="block text-xs text-gray-600 hover:text-blue-600 py-1 transition-colors">Existing regulation</a>
71
+ <a href="/rights#new" class="block text-xs text-gray-600 hover:text-blue-600 py-1 transition-colors">AI-specific regulation</a>
72
+ <a href="/rights#opensource" class="block text-xs text-gray-600 hover:text-blue-600 py-1 transition-colors">Open-source in regulation</a>
73
+ </div>
74
+ </div>
75
+
76
+ <div class="relative dropdown-hover">
77
+ <a href="/ecosystems" class="text-sm text-gray-700 hover:text-blue-600 font-medium px-3 py-2 rounded-md transition-colors hover:bg-gray-50">Socio-economic & Technical Ecosystems</a>
78
+ <div class="dropdown-content bg-white shadow-lg rounded-lg p-4 min-w-48 top-full left-0">
79
+ <a href="/ecosystems#labor" class="block text-xs text-gray-600 hover:text-blue-600 py-1 transition-colors">Labor impacts</a>
80
+ <a href="/ecosystems#power" class="block text-xs text-gray-600 hover:text-blue-600 py-1 transition-colors">Power & monopolies</a>
81
+ <a href="/ecosystems#usage" class="block text-xs text-gray-600 hover:text-blue-600 py-1 transition-colors">AI usage patterns</a>
82
+ </div>
83
+ </div>
84
+ </div>
85
+ </div>
86
+
87
+ <div class="flex items-center">
88
+ <!-- Visual separator -->
89
+ <div class="mx-6 h-6 w-px bg-gray-300"></div>
90
+
91
+ <a href="/about" class="text-gray-700 hover:text-blue-600 px-4 py-2 rounded-md text-sm font-medium transition-colors hover:bg-gray-50">About</a>
92
+ <button id="search-toggle" class="p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 transition-colors ml-3">
93
+ <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
94
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
95
+ </svg>
96
+ </button>
97
+ </div>
98
+ </nav>
99
+ </div>
100
+ </header>
101
+
102
+ <!-- Main Layout -->
103
+ <div class="flex" style="padding-top: 104px;">
104
+ <!-- Left Sidebar - Page Navigation -->
105
+ <aside id="left-sidebar" class="fixed left-0 h-full w-64 bg-white shadow-sm border-r border-gray-200 overflow-y-auto transition-transform duration-300" style="top: 104px;">
106
+ <nav class="p-4">
107
+ <h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-3">On This Page</h3>
108
+ <ul class="space-y-1">
109
+ <li><a href="#intro" class="page-nav-link block px-3 py-2 text-sm text-blue-600 bg-blue-50 rounded-md">Team Introduction</a></li>
110
+ <li class="ml-4">
111
+ <ul class="space-y-1">
112
+ <li><a href="#recent-featured-works" class="page-nav-link block px-3 py-2 text-xs text-blue-600 bg-blue-50 rounded-md">Recent & Featured Works</a></li>
113
+ <li><a href="#team-members" class="page-nav-link block px-3 py-2 text-xs text-blue-600 bg-blue-50 rounded-md">Team Members</a></li>
114
+ </ul>
115
+ </li>
116
+ <li><a href="#research-areas-header" class="page-nav-link block px-3 py-2 text-sm text-gray-700 hover:text-gray-900 hover:bg-gray-50 rounded-md transition-colors">Research Areas</a></li>
117
+ <li class="ml-4">
118
+ <ul class="space-y-1">
119
+ <li><a href="#efficiency" class="page-nav-link block px-3 py-2 text-xs text-gray-600 hover:text-gray-800 hover:bg-gray-50 rounded-md transition-colors">Efficiency & Environment</a></li>
120
+ <li><a href="#personal" class="page-nav-link block px-3 py-2 text-xs text-gray-600 hover:text-gray-800 hover:bg-gray-50 rounded-md transition-colors">Consent & Personal Interactions</a></li>
121
+ <li><a href="#rights" class="page-nav-link block px-3 py-2 text-xs text-gray-600 hover:text-gray-800 hover:bg-gray-50 rounded-md transition-colors">Rights & Regulation</a></li>
122
+ <li><a href="#ecosystems" class="page-nav-link block px-3 py-2 text-xs text-gray-600 hover:text-gray-800 hover:bg-gray-50 rounded-md transition-colors">Socio-Economic & Technical Ecosystems</a></li>
123
+ </ul>
124
+ </li>
125
+ </ul>
126
+ </nav>
127
+ </aside>
128
+
129
+ <!-- Main Content -->
130
+ <main class="flex-1 transition-all duration-300" id="main-content" style="margin-left: 256px;">
131
+ <div class="max-w-4xl mx-auto px-6 py-8">
132
+ <!-- Team Introduction Section -->
133
+ <section id="intro" class="mb-12">
134
+ <!-- Part 1: Team Introduction and Research Areas -->
135
+ <div class="bg-white rounded-lg shadow-sm p-8 mb-6">
136
+ <h3 class="text-3xl font-bold text-gray-900 mb-6">Team Introduction</h3>
137
+
138
+ <!-- Research Areas Introduction -->
139
+ <div class="mb-8">
140
+ <p class="text-gray-700 leading-relaxed mb-6">We're a multidisciplinary team working on research and regulatory questions related to AI systems &mdash; their (open) development, governance, and impact on society at large. Our work spans four key inter-connected areas where AI technology intersects with society:</p>
141
+
142
+ <!-- Research Areas Navigation -->
143
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
144
+ <button
145
+ onclick="scrollToSection('efficiency')"
146
+ class="group p-4 bg-gradient-to-br from-blue-50 to-blue-100 hover:from-blue-100 hover:to-blue-200 rounded-lg border border-blue-200 hover:border-blue-300 transition-all duration-200 text-left"
147
+ >
148
+ <h4 class="font-semibold text-blue-900 group-hover:text-blue-800 text-sm mb-1">Efficiency & Environment</h4>
149
+ <p class="text-xs text-blue-700 group-hover:text-blue-600">Costs, energy, sustainability</p>
150
+ </button>
151
+
152
+ <button
153
+ onclick="scrollToSection('personal')"
154
+ class="group p-4 bg-gradient-to-br from-green-50 to-green-100 hover:from-green-100 hover:to-green-200 rounded-lg border border-green-200 hover:border-green-300 transition-all duration-200 text-left"
155
+ >
156
+ <h4 class="font-semibold text-green-900 group-hover:text-green-800 text-sm mb-1">Consent & Personal Interactions</h4>
157
+ <p class="text-xs text-green-700 group-hover:text-green-600">Personal interactions, agency</p>
158
+ </button>
159
+
160
+ <button
161
+ onclick="scrollToSection('rights')"
162
+ class="group p-4 bg-gradient-to-br from-purple-50 to-purple-100 hover:from-purple-100 hover:to-purple-200 rounded-lg border border-purple-200 hover:border-purple-300 transition-all duration-200 text-left"
163
+ >
164
+ <h4 class="font-semibold text-purple-900 group-hover:text-purple-800 text-sm mb-1">Rights & Regulation</h4>
165
+ <p class="text-xs text-purple-700 group-hover:text-purple-600">Legal frameworks, compliance</p>
166
+ </button>
167
+
168
+ <button
169
+ onclick="scrollToSection('ecosystems')"
170
+ class="group p-4 bg-gradient-to-br from-orange-50 to-orange-100 hover:from-orange-100 hover:to-orange-200 rounded-lg border border-orange-200 hover:border-orange-300 transition-all duration-200 text-left"
171
+ >
172
+ <h4 class="font-semibold text-orange-900 group-hover:text-orange-800 text-sm mb-1">Socio-Economic & Technical Ecosystems</h4>
173
+ <p class="text-xs text-orange-700 group-hover:text-orange-600">Markets, labor, power dynamics</p>
174
+ </button>
175
+ </div>
176
+
177
+ <!-- Perspective and Positionality -->
178
+ <div class="mt-8 px-4 py-4 bg-gradient-to-r from-orange-50 to-yellow-50 border-l-4 border-orange-300 rounded-r-lg">
179
+ <p class="font-bold text-center text-orange-900 mb-2">🤗 Perspective and Positionality</p>
180
+ <p class="text-orange-800 italic leading-relaxed">
181
+ Our work on these topics is shaped by the context of our work at Hugging Face, which is the main platform for open and collaborative development and sharing of Artificial Intelligence artifacts. As a result, much of our work discusses the specific roles of openness and transparency in shaping AI technology into a more equitable and better-governed category of technology.
182
+ </p>
183
+ </div>
184
+ </div>
185
+
186
+
187
+
188
+ <!-- Recent & Featured Works -->
189
+ <div id="recent-featured-works" class="mb-12 border-t border-gray-200 pt-6">
190
+ <h4 class="text-lg font-semibold text-gray-900 mb-4">Recent & Featured Works</h4>
191
+ <div class="mb-8">
192
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
193
+ <p>TODO: add a carousel of recent and featured works</p>
194
+ </div>
195
+ </div>
196
+ </div>
197
+
198
+
199
+ <!-- Team and Collaborators -->
200
+ <div id="team-members" class="border-t border-gray-200 pt-6">
201
+ <h4 class="text-lg font-semibold text-gray-900 mb-4">Team Members</h4>
202
+ <div class="mb-4">
203
+ <div id="team-grid" class="grid grid-cols-1 md:grid-cols-2 gap-4">
204
+ <!-- Team members will be inserted here by JavaScript -->
205
+ </div>
206
+ </div>
207
+ <div class="prose text-gray-700">
208
+ <p>We also work closely with
209
+ <a href="https://huggingface.co/irenesolaiman" class="text-blue-600 hover:text-blue-800 transition-colors" target="_blank">Irene Solaiman</a> (Chief Policy Officer),
210
+ <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,
211
+ and with <a href="https://huggingface.co/meg" class="text-blue-600 hover:text-blue-800 transition-colors" target="_blank">Meg Mitchell</a> (Chief Ethics Scientist),
212
+ and <a href="https://huggingface.co/brunatrevelin" class="text-blue-600 hover:text-blue-800 transition-colors" target="_blank">Bruna Trevelin</a> (Legal Counsel)!
213
+ </p>
214
+ </div>
215
+ </div>
216
+ </div>
217
+ </section>
218
+
219
+ <!-- Research Areas Header -->
220
+ <div id="research-areas-header" class="text-center mb-12">
221
+ <h2 class="text-3xl font-bold text-gray-900">Research Areas</h2>
222
+ </div>
223
+
224
+ <!-- Research Areas -->
225
+ <section id="research-areas" class="space-y-8">
226
+ <!-- Area cards will be inserted here by JavaScript -->
227
+ </section>
228
+ </div>
229
+ </main>
230
+
231
+ <!-- Right Sidebar - Search (Collapsible) -->
232
+ <aside id="search-sidebar" class="fixed right-0 h-full w-80 bg-white shadow-sm border-l border-gray-200 transform translate-x-full z-40 transition-transform duration-300" style="top: 104px;">
233
+ <div class="p-4">
234
+ <div class="flex items-center justify-between mb-4">
235
+ <h3 class="text-lg font-semibold text-gray-900">Search</h3>
236
+ <button id="search-close" class="p-1 rounded-md text-gray-400 hover:text-gray-500 transition-colors">
237
+ <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
238
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
239
+ </svg>
240
+ </button>
241
+ </div>
242
+ <div class="text-gray-500 text-center py-8">
243
+ <p>Search functionality coming soon...</p>
244
+ </div>
245
+ </div>
246
+ </aside>
247
+ </div>
248
+
249
+ <!-- Overlay for mobile -->
250
+ <div id="sidebar-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-30 hidden"></div>
251
+
252
+ <script src="js/main.js"></script>
253
+ </body>
254
+ </html>