Hugging Face's logo

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

App Files Community
asoria commited on
Commit
5d1ad6f
·
verified ·
1 Parent(s): 9fc4ee6

Upload index.html with huggingface_hub

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