|
|
|
|
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> |
|
|
<title>infinite-dataset-hub/CultureInspiredPrompts</title> |
|
|
|
|
|
<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=Roboto&display=swap" rel="stylesheet"> |
|
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" /> |
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" /> |
|
|
<script src="https://unpkg.com/deck.gl@latest/dist.min.js"></script> |
|
|
|
|
|
<script src="https://unpkg.com/fflate@0.8.0"></script> |
|
|
|
|
|
<style> |
|
|
body { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
overflow: hidden; |
|
|
background: #ffffff; |
|
|
} |
|
|
|
|
|
#deck-container { |
|
|
width: 100vw; |
|
|
height: 100vh; |
|
|
} |
|
|
|
|
|
#deck-container canvas { |
|
|
z-index: 1; |
|
|
background: #ffffff; |
|
|
} |
|
|
|
|
|
.deck-tooltip { |
|
|
|
|
|
font-size: 0.8em; |
|
|
font-family: Roboto; |
|
|
font-weight: 300; |
|
|
color: #000000 !important; |
|
|
background-color: #ffffffaa !important; |
|
|
border-radius: 12px; |
|
|
box-shadow: 2px 3px 10px #aaaaaa44; |
|
|
max-width: 25%; |
|
|
} |
|
|
|
|
|
#loading { |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
top: 0px; |
|
|
left: 0px; |
|
|
position: absolute; |
|
|
display: block; |
|
|
z-index: 99 |
|
|
} |
|
|
|
|
|
#loading-image { |
|
|
position: absolute; |
|
|
top: 45%; |
|
|
left: 47.5%; |
|
|
z-index: 100 |
|
|
} |
|
|
|
|
|
#title-container { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
margin: 16px; |
|
|
padding: 12px; |
|
|
border-radius: 16px; |
|
|
line-height: 0.95; |
|
|
z-index: 2; |
|
|
font-family: Roboto; |
|
|
color: #000000; |
|
|
background: #ffffffaa; |
|
|
box-shadow: 2px 3px 10px #aaaaaa44; |
|
|
} |
|
|
|
|
|
|
|
|
#search-container{ |
|
|
position: absolute; |
|
|
left: -16px; |
|
|
margin: 16px; |
|
|
padding: 12px; |
|
|
border-radius: 16px; |
|
|
z-index: 2; |
|
|
font-family: Roboto; |
|
|
color: #000000; |
|
|
background: #ffffffaa; |
|
|
width: fit-content; |
|
|
box-shadow: 2px 3px 10px #aaaaaa44; |
|
|
} |
|
|
input { |
|
|
margin: 2px; |
|
|
padding: 4px; |
|
|
border-radius: 8px; |
|
|
color: #000000; |
|
|
background: #ffffffdd; |
|
|
border: 1px solid #ddddddff; |
|
|
transition: 0.5s; |
|
|
outline: none; |
|
|
} |
|
|
input:focus { |
|
|
border: 2px solid #555; |
|
|
} |
|
|
|
|
|
|
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div id="loading"> |
|
|
<img id="loading-image" src="https://i.gifer.com/ZKZg.gif" alt="Loading..." width="5%"/> |
|
|
</div> |
|
|
|
|
|
<div id="title-container"> |
|
|
<span style="font-family:Roboto;font-size:36pt;color:#000000"> |
|
|
infinite-dataset-hub/CultureInspiredPrompts |
|
|
</span><br/> |
|
|
<span style="font-family:Roboto;font-size:18pt;color:#777777"> |
|
|
Data map for the entire <a href='https://huggingface.co/datasets/infinite-dataset-hub/CultureInspiredPrompts/viewer/default/train' target='_blank'>dataset</a> (100 rows) using the column 'prompt' |
|
|
</span> |
|
|
|
|
|
<div id="search-container"> |
|
|
<input autocomplete="off" type="search" id="search" placeholder="🔍"> |
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="deck-container"> |
|
|
</div> |
|
|
|
|
|
</body> |
|
|
<script type="module"> |
|
|
import { ArrowLoader } from 'https://cdn.jsdelivr.net/npm/@loaders.gl/arrow@4.1.0-alpha.10/+esm' |
|
|
import { JSONLoader } from 'https://cdn.jsdelivr.net/npm/@loaders.gl/json@4.0.5/+esm' |
|
|
|
|
|
|
|
|
|
|
|
const pointDataBase64 = "QVJST1cxAAD/////0AUAABAAAAAAAAoADgAGAAUACAAKAAAAAAEEABAAAAAAAAoADAAAAAQACAAKAAAASAQAAAQAAAABAAAADAAAAAgADAAEAAgACAAAACAEAAAEAAAAEAQAAHsiaW5kZXhfY29sdW1ucyI6IFt7ImtpbmQiOiAicmFuZ2UiLCAibmFtZSI6IG51bGwsICJzdGFydCI6IDAsICJzdG9wIjogMTAwLCAic3RlcCI6IDF9XSwgImNvbHVtbl9pbmRleGVzIjogW3sibmFtZSI6IG51bGwsICJmaWVsZF9uYW1lIjogbnVsbCwgInBhbmRhc190eXBlIjogInVuaWNvZGUiLCAibnVtcHlfdHlwZSI6ICJvYmplY3QiLCAibWV0YWRhdGEiOiB7ImVuY29kaW5nIjogIlVURi04In19XSwgImNvbHVtbnMiOiBbeyJuYW1lIjogIngiLCAiZmllbGRfbmFtZSI6ICJ4IiwgInBhbmRhc190eXBlIjogImZsb2F0MzIiLCAibnVtcHlfdHlwZSI6ICJmbG9hdDMyIiwgIm1ldGFkYXRhIjogbnVsbH0sIHsibmFtZSI6ICJ5IiwgImZpZWxkX25hbWUiOiAieSIsICJwYW5kYXNfdHlwZSI6ICJmbG9hdDMyIiwgIm51bXB5X3R5cGUiOiAiZmxvYXQzMiIsICJtZXRhZGF0YSI6IG51bGx9LCB7Im5hbWUiOiAiciIsICJmaWVsZF9uYW1lIjogInIiLCAicGFuZGFzX3R5cGUiOiAidWludDgiLCAibnVtcHlfdHlwZSI6ICJ1aW50OCIsICJtZXRhZGF0YSI6IG51bGx9LCB7Im5hbWUiOiAiZyIsICJmaWVsZF9uYW1lIjogImciLCAicGFuZGFzX3R5cGUiOiAidWludDgiLCAibnVtcHlfdHlwZSI6ICJ1aW50OCIsICJtZXRhZGF0YSI6IG51bGx9LCB7Im5hbWUiOiAiYiIsICJmaWVsZF9uYW1lIjogImIiLCAicGFuZGFzX3R5cGUiOiAidWludDgiLCAibnVtcHlfdHlwZSI6ICJ1aW50OCIsICJtZXRhZGF0YSI6IG51bGx9LCB7Im5hbWUiOiAiYSIsICJmaWVsZF9uYW1lIjogImEiLCAicGFuZGFzX3R5cGUiOiAidWludDgi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bmNvZGluZyI6ICJVVEYtOCJ9fV0sICJjb2x1bW5zIjogW3sibmFtZSI6ICJ4IiwgImZpZWxkX25hbWUiOiAieCIsICJwYW5kYXNfdHlwZSI6ICJmbG9hdDMyIiwgIm51bXB5X3R5cGUiOiAiZmxvYXQzMiIsICJtZXRhZGF0YSI6IG51bGx9LCB7Im5hbWUiOiAieSIsICJmaWVsZF9uYW1lIjogInkiLCAicGFuZGFzX3R5cGUiOiAiZmxvYXQzMiIsICJudW1weV90eXBlIjogImZsb2F0MzIiLCAibWV0YWRhdGEiOiBudWxsfSwgeyJuYW1lIjogInIiLCAiZmllbGRfbmFtZSI6ICJyIiwgInBhbmRhc190eXBlIjogInVpbnQ4IiwgIm51bXB5X3R5cGUiOiAidWludDgiLCAibWV0YWRhdGEiOiBudWxsfSwgeyJuYW1lIjogImciLCAiZmllbGRfbmFtZSI6ICJnIiwgInBhbmRhc190eXBlIjogInVpbnQ4IiwgIm51bXB5X3R5cGUiOiAidWludDgiLCAibWV0YWRhdGEiOiBudWxsfSwgeyJuYW1lIjogImIiLCAiZmllbGRfbmFtZSI6ICJiIiwgInBhbmRhc190eXBlIjogInVpbnQ4IiwgIm51bXB5X3R5cGUiOiAidWludDgiLCAibWV0YWRhdGEiOiBudWxsfSwgeyJuYW1lIjogImEiLCAiZmllbGRfbmFtZSI6ICJhIiwgInBhbmRhc190eXBlIjogInVpbnQ4IiwgIm51bXB5X3R5cGUiOiAidWludDgiLCAibWV0YWRhdGEiOiBudWxsfSwgeyJuYW1lIjogInNlbGVjdGVkIiwgImZpZWxkX25hbWUiOiAic2VsZWN0ZWQiLCAicGFuZGFzX3R5cGUiOiAidWludDgiLCAibnVtcHlfdHlwZSI6ICJ1aW50OCIsICJtZXRhZGF0YSI6IG51bGx9XSwgImNyZWF0b3IiOiB7ImxpYnJhcnkiOiAicHlhcnJvdyIsICJ2ZXJzaW9uIjogIjE3LjAuMCJ9LCAicGFuZGFzX3ZlcnNpb24iOiAiMi4yLjIifQAAAAAGAAAAcGFuZGFzAAAHAAAAKAEAAOwAAAC8AAAAkAAAAGQAAAA4AAAABAAAAAT///8AAAECEAAAABwAAAAEAAAAAAAAAAgAAABzZWxlY3RlZAAAAABi////CAAAADT///8AAAECEAAAABQAAAAEAAAAAAAAAAEAAABhAAAAiv///wgAAABc////AAABAhAAAAAUAAAABAAAAAAAAAABAAAAYgAAALL///8IAAAAhP///wAAAQIQAAAAFAAAAAQAAAAAAAAAAQAAAGcAAADa////CAAAAKz///8AAAECEAAAABgAAAAEAAAAAAAAAAEAAAByAAYACAAEAAYAAAAIAAAA2P///wAAAQMQAAAAFAAAAAQAAAAAAAAAAQAAAHkAAADK////AAABABAAFAAIAAYABwAMAAAAEAAQAAAAAAABAxAAAAAYAAAABAAAAAAAAAABAAAAeAAGAAgABgAGAAAAAAABAPgFAABBUlJPVzE="; |
|
|
const pointDataBuffer = fflate.strToU8(atob(pointDataBase64), true); |
|
|
const pointData = await loaders.parse(pointDataBuffer, ArrowLoader); |
|
|
const hoverDataBase64 = "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"; |
|
|
const hoverDataBuffer = fflate.strToU8(atob(hoverDataBase64), true); |
|
|
const unzippedHoverData = fflate.gunzipSync(hoverDataBuffer); |
|
|
const hoverData = await loaders.parse(unzippedHoverData, ArrowLoader); |
|
|
const labelDataBase64 = "H4sIAGu8G2cC/13QwWrDMAyA4XfR2TWWZMlyXmX04LJ0C4QO6nRsHXv3mbhrup2Ewejz76cv+IAh+GyiEiRnB58woBdCiqRo6mAuh3GGAcp5AQd1uo7thvng4AxDauOlnVkcHNrE6KDAoPHb3VYrUyIJettMKTISp7QtPpb6Or2d7stJvKhZytHIVsWoK5S7IuG/giFKTBYUV2cXPDMyMelDwXGsy/Re5k36zUBOXUBeBdG/wK49vGVgFsNeQh5Vc2wKPqTU5fI8npa6CdEnIxFTjtgp6l8mvcXuKfsfI/RSx40BAAA="; |
|
|
const labelDataBuffer = fflate.strToU8(atob(labelDataBase64), true); |
|
|
const unzippedLabelData = fflate.gunzipSync(labelDataBuffer); |
|
|
const labelData = await loaders.parse(unzippedLabelData, JSONLoader); |
|
|
|
|
|
|
|
|
const DATA = {src: pointData.data, length: pointData.data.x.length} |
|
|
|
|
|
const container = document.getElementById('deck-container'); |
|
|
const pointLayer = new deck.ScatterplotLayer({ |
|
|
id: 'dataPointLayer', |
|
|
data: DATA, |
|
|
getPosition: (object, {index, data}) => { |
|
|
return [data.src.x[index], data.src.y[index]]; |
|
|
}, |
|
|
|
|
|
getRadius: 0.1, |
|
|
|
|
|
getFillColor: (object, {index, data}) => { |
|
|
return [ |
|
|
data.src.r[index], |
|
|
data.src.g[index], |
|
|
data.src.b[index], |
|
|
180 |
|
|
] |
|
|
}, |
|
|
getLineColor: (object, {index, data}) => { |
|
|
return [ |
|
|
data.src.r[index], |
|
|
data.src.g[index], |
|
|
data.src.b[index], |
|
|
32 |
|
|
] |
|
|
}, |
|
|
getLineColor: [250, 250, 250, 128], |
|
|
getLineWidth: 0.001, |
|
|
highlightColor: [170, 0, 0, 187], |
|
|
lineWidthMaxPixels: 8, |
|
|
lineWidthMinPixels: 0.1, |
|
|
radiusMaxPixels: 24, |
|
|
radiusMinPixels: 0.01, |
|
|
radiusUnits: "common", |
|
|
lineWidthUnits: "common", |
|
|
autoHighlight: true, |
|
|
pickable: true, |
|
|
stroked: true |
|
|
}); |
|
|
const labelLayer = new deck.TextLayer({ |
|
|
id: "textLabelLayer", |
|
|
data: labelData, |
|
|
pickable: false, |
|
|
getPosition: d => [d.x, d.y], |
|
|
getText: d => d.label, |
|
|
getColor: d => [d.r, d.g, d.b], |
|
|
getSize: d => d.size, |
|
|
sizeScale: 1, |
|
|
sizeMinPixels: 18, |
|
|
sizeMaxPixels: 36, |
|
|
outlineWidth: 8, |
|
|
outlineColor: [238, 238, 238, 221], |
|
|
getBackgroundColor: [255, 255, 255, 64], |
|
|
getBackgroundPadding: [15, 15, 15, 15], |
|
|
background: true, |
|
|
characterSet: "auto", |
|
|
fontFamily: "Roboto", |
|
|
fontWeight: 900, |
|
|
lineHeight: 0.95, |
|
|
fontSettings: {"sdf": true}, |
|
|
getTextAnchor: "middle", |
|
|
getAlignmentBaseline: "center", |
|
|
lineHeight: 0.95, |
|
|
elevation: 100, |
|
|
|
|
|
collisionEnabled: true, |
|
|
getCollisionPriority: d => d.size, |
|
|
collisionTestProps: { |
|
|
sizeScale: 3, |
|
|
sizeMaxPixels: 36 * 2, |
|
|
sizeMinPixels: 18 * 2 |
|
|
}, |
|
|
extensions: [new deck.CollisionFilterExtension()], |
|
|
}); |
|
|
|
|
|
|
|
|
const deckgl = new deck.DeckGL({ |
|
|
container: container, |
|
|
initialViewState: { |
|
|
latitude: 0.8910266, |
|
|
longitude: -0.010016212, |
|
|
zoom: 6.582650759064659 |
|
|
}, |
|
|
controller: true, |
|
|
|
|
|
layers: [pointLayer, labelLayer], |
|
|
|
|
|
|
|
|
getTooltip: ({index}) => hoverData.data.hover_text[index] |
|
|
}); |
|
|
|
|
|
document.getElementById("loading").style.display = "none"; |
|
|
|
|
|
|
|
|
function selectPoints(item, conditional) { |
|
|
var layerId; |
|
|
if (item) { |
|
|
for (var i = 0; i < DATA.length; i++) { |
|
|
if (conditional(i)) { |
|
|
DATA.src.selected[i] = 1; |
|
|
} else { |
|
|
DATA.src.selected[i] = 0; |
|
|
} |
|
|
} |
|
|
layerId = 'selectedPointLayer' + item; |
|
|
} else { |
|
|
for (var i = 0; i < DATA.length; i++) { |
|
|
DATA.src.selected[i] = 1; |
|
|
} |
|
|
layerId = 'dataPointLayer'; |
|
|
} |
|
|
const selectedPointLayer = pointLayer.clone( |
|
|
{ |
|
|
id: layerId, |
|
|
data: DATA, |
|
|
getFilterValue: (object, {index, data}) => data.src.selected[index], |
|
|
filterRange: [1, 2], |
|
|
extensions: [new deck.DataFilterExtension({filterSize: 1})] |
|
|
} |
|
|
); |
|
|
deckgl.setProps( |
|
|
{layers: |
|
|
[selectedPointLayer].concat(deckgl.props.layers.slice(1,)) |
|
|
} |
|
|
); |
|
|
} |
|
|
|
|
|
const search = document.getElementById("search"); |
|
|
search.addEventListener("input", (event) => { |
|
|
const search_term = event.target.value.toLowerCase(); |
|
|
selectPoints(search_term, (i) => hoverData.data.hover_text[i].toLowerCase().includes(search_term)); |
|
|
} |
|
|
); |
|
|
|
|
|
|
|
|
</script> |
|
|
</html> |
