Hugging Face's logo

Spaces:
datasets-topics
/
infinite-dataset-hub-ArtificialIntelligenceEthics
Running

App Files Community
asoria commited on
Commit
0f0e560
·
verified ·
1 Parent(s): 1cf6467

Upload index.html with huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +293 -18
index.html CHANGED
@@ -1,19 +1,294 @@
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
+
2
+ <!DOCTYPE html>
3
  <html>
4
+ <head>
5
+ <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
6
+ <title>infinite-dataset-hub/ArtificialIntelligenceEthics</title>
7
+
8
+ <link rel="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
11
+
12
+
13
+
14
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" />
15
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
16
+ <script src="https://unpkg.com/deck.gl@latest/dist.min.js"></script>
17
+
18
+ <script src="https://unpkg.com/[email protected]"></script>
19
+
20
+ <style>
21
+ body {
22
+ margin: 0;
23
+ padding: 0;
24
+ overflow: hidden;
25
+ background: #ffffff;
26
+ }
27
+
28
+ #deck-container {
29
+ width: 100vw;
30
+ height: 100vh;
31
+ }
32
+
33
+ #deck-container canvas {
34
+ z-index: 1;
35
+ background: #ffffff;
36
+ }
37
+
38
+ .deck-tooltip {
39
+
40
+ font-size: 0.8em;
41
+ font-family: Roboto;
42
+ font-weight: 300;
43
+ color: #000000 !important;
44
+ background-color: #ffffffaa !important;
45
+ border-radius: 12px;
46
+ box-shadow: 2px 3px 10px #aaaaaa44;
47
+ max-width: 25%;
48
+ }
49
+
50
+ #loading {
51
+ width: 100%;
52
+ height: 100%;
53
+ top: 0px;
54
+ left: 0px;
55
+ position: absolute;
56
+ display: block;
57
+ z-index: 99
58
+ }
59
+
60
+ #loading-image {
61
+ position: absolute;
62
+ top: 45%;
63
+ left: 47.5%;
64
+ z-index: 100
65
+ }
66
+
67
+ #title-container {
68
+ position: absolute;
69
+ top: 0;
70
+ left: 0;
71
+ margin: 16px;
72
+ padding: 12px;
73
+ border-radius: 16px;
74
+ line-height: 0.95;
75
+ z-index: 2;
76
+ font-family: Roboto;
77
+ color: #000000;
78
+ background: #ffffffaa;
79
+ box-shadow: 2px 3px 10px #aaaaaa44;
80
+ }
81
+
82
+
83
+ #search-container{
84
+ position: absolute;
85
+ left: -16px;
86
+ margin: 16px;
87
+ padding: 12px;
88
+ border-radius: 16px;
89
+ z-index: 2;
90
+ font-family: Roboto;
91
+ color: #000000;
92
+ background: #ffffffaa;
93
+ width: fit-content;
94
+ box-shadow: 2px 3px 10px #aaaaaa44;
95
+ }
96
+ input {
97
+ margin: 2px;
98
+ padding: 4px;
99
+ border-radius: 8px;
100
+ color: #000000;
101
+ background: #ffffffdd;
102
+ border: 1px solid #ddddddff;
103
+ transition: 0.5s;
104
+ outline: none;
105
+ }
106
+ input:focus {
107
+ border: 2px solid #555;
108
+ }
109
+
110
+
111
+ </style>
112
+ </head>
113
+ <body>
114
+ <div id="loading">
115
+ <img id="loading-image" src="https://i.gifer.com/ZKZg.gif" alt="Loading..." width="5%"/>
116
+ </div>
117
+
118
+ <div id="title-container">
119
+ <span style="font-family:Roboto;font-size:36pt;color:#000000">
120
+ infinite-dataset-hub/ArtificialIntelligenceEthics
121
+ </span><br/>
122
+ <span style="font-family:Roboto;font-size:18pt;color:#777777">
123
+ Data map for the entire <a href='https://huggingface.co/datasets/infinite-dataset-hub/ArtificialIntelligenceEthics/viewer/default/train' target='_blank'>dataset</a> (100 rows) using the column 'text'
124
+ </span>
125
+
126
+ <div id="search-container">
127
+ <input autocomplete="off" type="search" id="search" placeholder="🔍">
128
+ </div>
129
+
130
+ </div>
131
+
132
+
133
+ <div id="deck-container">
134
+ </div>
135
+
136
+ </body>
137
+ <script type="module">
138
+ import { ArrowLoader } from 'https://cdn.jsdelivr.net/npm/@loaders.gl/[email protected]/+esm'
139
+ import { JSONLoader } from 'https://cdn.jsdelivr.net/npm/@loaders.gl/[email protected]/+esm'
140
+
141
+
142
+
143
+ const pointDataBase64 = "QVJST1cxAAD/////0AUAABAAAAAAAAoADgAGAAUACAAKAAAAAAEEABAAAAAAAAoADAAAAAQACAAKAAAASAQAAAQAAAABAAAADAAAAAgADAAEAAgACAAAACAEAAAEAAAAEAQAAHsiaW5kZXhfY29sdW1ucyI6IFt7ImtpbmQiOiAicmFuZ2UiLCAibmFtZSI6IG51bGwsICJzdGFydCI6IDAsICJzdG9wIjogMTAwLCAic3RlcCI6IDF9XSwgImNvbHVtbl9pbmRleGVzIjogW3sibmFtZSI6IG51bGwsICJmaWVsZF9uYW1lIjogbnVsbCwgInBhbmRhc190eXBlIjogInVuaWNvZGUiLCAibnVtcHlfdHlwZSI6ICJvYmplY3QiLCAibWV0YWRhdGEiOiB7ImVuY29kaW5nIjogIlVURi04In19XSwgImNvbHVtbnMiOiBbeyJuYW1lIjogIngiLCAiZmllbGRfbmFtZSI6ICJ4IiwgInBhbmRhc190eXBlIjogImZsb2F0MzIiLCAibnVtcHlfdHlwZSI6ICJmbG9hdDMyIiwgIm1ldGFkYXRhIjogbnVsbH0sIHsibmFtZSI6ICJ5IiwgImZpZWxkX25hbWUiOiAieSIsICJwYW5kYXNfdHlwZSI6ICJmbG9hdDMyIiwgIm51bXB5X3R5cGUiOiAiZmxvYXQzMiIsICJtZXRhZGF0YSI6IG51bGx9LCB7Im5hbWUiOiAiciIsICJmaWVsZF9uYW1lIjogInIiLCAicGFuZGFzX3R5cGUiOiAidWludDgiLCAibnVtcHlfdHlwZSI6ICJ1aW50OCIsICJtZXRhZGF0YSI6IG51bGx9LCB7Im5hbWUiOiAiZyIsICJmaWVsZF9uYW1lIjogImciLCAicGFuZGFzX3R5cGUiOiAidWludDgiLCAibnVtcHlfdHlwZSI6ICJ1aW50OCIsICJtZXRhZGF0YSI6IG51bGx9LCB7Im5hbWUiOiAiYiIsICJmaWVsZF9uYW1lIjogImIiLCAicGFuZGFzX3R5cGUiOiAidWludDgiLCAibnVtcHlfdHlwZSI6ICJ1aW50OCIsICJtZXRhZGF0YSI6IG51bGx9LCB7Im5hbWUiOiAiYSIsICJmaWVsZF9uYW1lIjogImEiLCAicGFuZGFzX3R5cGUiOiAidWludDgi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bmNvZGluZyI6ICJVVEYtOCJ9fV0sICJjb2x1bW5zIjogW3sibmFtZSI6ICJ4IiwgImZpZWxkX25hbWUiOiAieCIsICJwYW5kYXNfdHlwZSI6ICJmbG9hdDMyIiwgIm51bXB5X3R5cGUiOiAiZmxvYXQzMiIsICJtZXRhZGF0YSI6IG51bGx9LCB7Im5hbWUiOiAieSIsICJmaWVsZF9uYW1lIjogInkiLCAicGFuZGFzX3R5cGUiOiAiZmxvYXQzMiIsICJudW1weV90eXBlIjogImZsb2F0MzIiLCAibWV0YWRhdGEiOiBudWxsfSwgeyJuYW1lIjogInIiLCAiZmllbGRfbmFtZSI6ICJyIiwgInBhbmRhc190eXBlIjogInVpbnQ4IiwgIm51bXB5X3R5cGUiOiAidWludDgiLCAibWV0YWRhdGEiOiBudWxsfSwgeyJuYW1lIjogImciLCAiZmllbGRfbmFtZSI6ICJnIiwgInBhbmRhc190eXBlIjogInVpbnQ4IiwgIm51bXB5X3R5cGUiOiAidWludDgiLCAibWV0YWRhdGEiOiBudWxsfSwgeyJuYW1lIjogImIiLCAiZmllbGRfbmFtZSI6ICJiIiwgInBhbmRhc190eXBlIjogInVpbnQ4IiwgIm51bXB5X3R5cGUiOiAidWludDgiLCAibWV0YWRhdGEiOiBudWxsfSwgeyJuYW1lIjogImEiLCAiZmllbGRfbmFtZSI6ICJhIiwgInBhbmRhc190eXBlIjogInVpbnQ4IiwgIm51bXB5X3R5cGUiOiAidWludDgiLCAibWV0YWRhdGEiOiBudWxsfSwgeyJuYW1lIjogInNlbGVjdGVkIiwgImZpZWxkX25hbWUiOiAic2VsZWN0ZWQiLCAicGFuZGFzX3R5cGUiOiAidWludDgiLCAibnVtcHlfdHlwZSI6ICJ1aW50OCIsICJtZXRhZGF0YSI6IG51bGx9XSwgImNyZWF0b3IiOiB7ImxpYnJhcnkiOiAicHlhcnJvdyIsICJ2ZXJzaW9uIjogIjE3LjAuMCJ9LCAicGFuZGFzX3ZlcnNpb24iOiAiMi4yLjIifQAAAAAGAAAAcGFuZGFzAAAHAAAAKAEAAOwAAAC8AAAAkAAAAGQAAAA4AAAABAAAAAT///8AAAECEAAAABwAAAAEAAAAAAAAAAgAAABzZWxlY3RlZAAAAABi////CAAAADT///8AAAECEAAAABQAAAAEAAAAAAAAAAEAAABhAAAAiv///wgAAABc////AAABAhAAAAAUAAAABAAAAAAAAAABAAAAYgAAALL///8IAAAAhP///wAAAQIQAAAAFAAAAAQAAAAAAAAAAQAAAGcAAADa////CAAAAKz///8AAAECEAAAABgAAAAEAAAAAAAAAAEAAAByAAYACAAEAAYAAAAIAAAA2P///wAAAQMQAAAAFAAAAAQAAAAAAAAAAQAAAHkAAADK////AAABABAAFAAIAAYABwAMAAAAEAAQAAAAAAABAxAAAAAYAAAABAAAAAAAAAABAAAAeAAGAAgABgAGAAAAAAABAPgFAABBUlJPVzE=";
144
+ const pointDataBuffer = fflate.strToU8(atob(pointDataBase64), true);
145
+ const pointData = await loaders.parse(pointDataBuffer, ArrowLoader);
146
+ const hoverDataBase64 = "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";
147
+ const hoverDataBuffer = fflate.strToU8(atob(hoverDataBase64), true);
148
+ const unzippedHoverData = fflate.gunzipSync(hoverDataBuffer);
149
+ const hoverData = await loaders.parse(unzippedHoverData, ArrowLoader);
150
+ const labelDataBase64 = "H4sIAKW8G2cC/12Q0WrDMAxF/0XPrpFkWbL9K6MPTgkjULKR9GHd2L/XuMuS7UlwEefo6uULPqCcgmelJGQmDu5Q0FswQUyck4NrHcYrFKgTOFinzxEKJ48OFijE5uC1TWIHQ5va8gpF5dttbOSYcgzRqMNP2BKhjBKz7PRhqusvn3Y+d75Kxyf5SyfPSIE1GPITTl6ZWkCiB/jlbV7H+bbf39aUM3Hbsi7SrknPFin/K0G+GYK2n1jaPK1DpIiCB89tqfP6XpdxvtyPZSQxa5IQ9KeVdJ1Z10nYdOcH02l0kZEBAAA=";
151
+ const labelDataBuffer = fflate.strToU8(atob(labelDataBase64), true);
152
+ const unzippedLabelData = fflate.gunzipSync(labelDataBuffer);
153
+ const labelData = await loaders.parse(unzippedLabelData, JSONLoader);
154
+
155
+
156
+ const DATA = {src: pointData.data, length: pointData.data.x.length}
157
+
158
+ const container = document.getElementById('deck-container');
159
+ const pointLayer = new deck.ScatterplotLayer({
160
+ id: 'dataPointLayer',
161
+ data: DATA,
162
+ getPosition: (object, {index, data}) => {
163
+ return [data.src.x[index], data.src.y[index]];
164
+ },
165
+
166
+ getRadius: 0.1,
167
+
168
+ getFillColor: (object, {index, data}) => {
169
+ return [
170
+ data.src.r[index],
171
+ data.src.g[index],
172
+ data.src.b[index],
173
+ 180
174
+ ]
175
+ },
176
+ getLineColor: (object, {index, data}) => {
177
+ return [
178
+ data.src.r[index],
179
+ data.src.g[index],
180
+ data.src.b[index],
181
+ 32
182
+ ]
183
+ },
184
+ getLineColor: [250, 250, 250, 128],
185
+ getLineWidth: 0.001,
186
+ highlightColor: [170, 0, 0, 187],
187
+ lineWidthMaxPixels: 8,
188
+ lineWidthMinPixels: 0.1,
189
+ radiusMaxPixels: 24,
190
+ radiusMinPixels: 0.01,
191
+ radiusUnits: "common",
192
+ lineWidthUnits: "common",
193
+ autoHighlight: true,
194
+ pickable: true,
195
+ stroked: true
196
+ });
197
+ const labelLayer = new deck.TextLayer({
198
+ id: "textLabelLayer",
199
+ data: labelData,
200
+ pickable: false,
201
+ getPosition: d => [d.x, d.y],
202
+ getText: d => d.label,
203
+ getColor: d => [d.r, d.g, d.b],
204
+ getSize: d => d.size,
205
+ sizeScale: 1,
206
+ sizeMinPixels: 18,
207
+ sizeMaxPixels: 36,
208
+ outlineWidth: 8,
209
+ outlineColor: [238, 238, 238, 221],
210
+ getBackgroundColor: [255, 255, 255, 64],
211
+ getBackgroundPadding: [15, 15, 15, 15],
212
+ background: true,
213
+ characterSet: "auto",
214
+ fontFamily: "Roboto",
215
+ fontWeight: 900,
216
+ lineHeight: 0.95,
217
+ fontSettings: {"sdf": true},
218
+ getTextAnchor: "middle",
219
+ getAlignmentBaseline: "center",
220
+ lineHeight: 0.95,
221
+ elevation: 100,
222
+ // CollideExtension options
223
+ collisionEnabled: true,
224
+ getCollisionPriority: d => d.size,
225
+ collisionTestProps: {
226
+ sizeScale: 3,
227
+ sizeMaxPixels: 36 * 2,
228
+ sizeMinPixels: 18 * 2
229
+ },
230
+ extensions: [new deck.CollisionFilterExtension()],
231
+ });
232
+
233
+
234
+ const deckgl = new deck.DeckGL({
235
+ container: container,
236
+ initialViewState: {
237
+ latitude: -0.2085521,
238
+ longitude: -1.9185594,
239
+ zoom: 5.972738602005943
240
+ },
241
+ controller: true,
242
+
243
+ layers: [pointLayer, labelLayer],
244
+
245
+
246
+ getTooltip: ({index}) => hoverData.data.hover_text[index]
247
+ });
248
+
249
+ document.getElementById("loading").style.display = "none";
250
+
251
+
252
+ function selectPoints(item, conditional) {
253
+ var layerId;
254
+ if (item) {
255
+ for (var i = 0; i < DATA.length; i++) {
256
+ if (conditional(i)) {
257
+ DATA.src.selected[i] = 1;
258
+ } else {
259
+ DATA.src.selected[i] = 0;
260
+ }
261
+ }
262
+ layerId = 'selectedPointLayer' + item;
263
+ } else {
264
+ for (var i = 0; i < DATA.length; i++) {
265
+ DATA.src.selected[i] = 1;
266
+ }
267
+ layerId = 'dataPointLayer';
268
+ }
269
+ const selectedPointLayer = pointLayer.clone(
270
+ {
271
+ id: layerId,
272
+ data: DATA,
273
+ getFilterValue: (object, {index, data}) => data.src.selected[index],
274
+ filterRange: [1, 2],
275
+ extensions: [new deck.DataFilterExtension({filterSize: 1})]
276
+ }
277
+ );
278
+ deckgl.setProps(
279
+ {layers:
280
+ [selectedPointLayer].concat(deckgl.props.layers.slice(1,))
281
+ }
282
+ );
283
+ }
284
+
285
+ const search = document.getElementById("search");
286
+ search.addEventListener("input", (event) => {
287
+ const search_term = event.target.value.toLowerCase();
288
+ selectPoints(search_term, (i) => hoverData.data.hover_text[i].toLowerCase().includes(search_term));
289
+ }
290
+ );
291
+
292
+
293
+ </script>
294
+ </html>