|
|
|
|
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> |
|
|
<title>fka/awesome-chatgpt-prompts</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/[email protected]"></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"> |
|
|
fka/awesome-chatgpt-prompts |
|
|
</span><br/> |
|
|
<span style="font-family:Roboto;font-size:18pt;color:#777777"> |
|
|
Data map for the entire <a href='https://huggingface.co/datasets/fka/awesome-chatgpt-prompts/viewer/default/train' target='_blank'>dataset</a> (170 rows) using the column 'act' |
|
|
</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/[email protected]/+esm' |
|
|
import { JSONLoader } from 'https://cdn.jsdelivr.net/npm/@loaders.gl/[email protected]/+esm' |
|
|
|
|
|
|
|
|
|
|
|
const pointDataBase64 = "QVJST1cxAAD/////0AUAABAAAAAAAAoADgAGAAUACAAKAAAAAAEEABAAAAAAAAoADAAAAAQACAAKAAAASAQAAAQAAAABAAAADAAAAAgADAAEAAgACAAAACAEAAAEAAAAEAQAAHsiaW5kZXhfY29sdW1ucyI6IFt7ImtpbmQiOiAicmFuZ2UiLCAibmFtZSI6IG51bGwsICJzdGFydCI6IDAsICJzdG9wIjogMTcwLCAic3RlcCI6IDF9XSwgImNvbHVtbl9pbmRleGVzIjogW3sibmFtZSI6IG51bGwsICJmaWVsZF9uYW1lIjogbnVsbCwgInBhbmRhc190eXBlIjogInVuaWNvZGUiLCAibnVtcHlfdHlwZSI6ICJvYmplY3QiLCAibWV0YWRhdGEiOiB7ImVuY29kaW5nIjogIlVURi04In19XSwgImNvbHVtbnMiOiBbeyJuYW1lIjogIngiLCAiZmllbGRfbmFtZSI6ICJ4IiwgInBhbmRhc190eXBlIjogImZsb2F0MzIiLCAibnVtcHlfdHlwZSI6ICJmbG9hdDMyIiwgIm1ldGFkYXRhIjogbnVsbH0sIHsibmFtZSI6ICJ5IiwgImZpZWxkX25hbWUiOiAieSIsICJwYW5kYXNfdHlwZSI6ICJmbG9hdDMyIiwgIm51bXB5X3R5cGUiOiAiZmxvYXQzMiIsICJtZXRhZGF0YSI6IG51bGx9LCB7Im5hbWUiOiAiciIsICJmaWVsZF9uYW1lIjogInIiLCAicGFuZGFzX3R5cGUiOiAidWludDgiLCAibnVtcHlfdHlwZSI6ICJ1aW50OCIsICJtZXRhZGF0YSI6IG51bGx9LCB7Im5hbWUiOiAiZyIsICJmaWVsZF9uYW1lIjogImciLCAicGFuZGFzX3R5cGUiOiAidWludDgiLCAibnVtcHlfdHlwZSI6ICJ1aW50OCIsICJtZXRhZGF0YSI6IG51bGx9LCB7Im5hbWUiOiAiYiIsICJmaWVsZF9uYW1lIjogImIiLCAicGFuZGFzX3R5cGUiOiAidWludDgiLCAibnVtcHlfdHlwZSI6ICJ1aW50OCIsICJtZXRhZGF0YSI6IG51bGx9LCB7Im5hbWUiOiAiYSIsICJmaWVsZF9uYW1lIjogImEiLCAicGFuZGFzX3R5cGUiOiAidWludDgi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Y3QiLCAibWV0YWRhdGEiOiB7ImVuY29kaW5nIjogIlVURi04In19XSwgImNvbHVtbnMiOiBbeyJuYW1lIjogIngiLCAiZmllbGRfbmFtZSI6ICJ4IiwgInBhbmRhc190eXBlIjogImZsb2F0MzIiLCAibnVtcHlfdHlwZSI6ICJmbG9hdDMyIiwgIm1ldGFkYXRhIjogbnVsbH0sIHsibmFtZSI6ICJ5IiwgImZpZWxkX25hbWUiOiAieSIsICJwYW5kYXNfdHlwZSI6ICJmbG9hdDMyIiwgIm51bXB5X3R5cGUiOiAiZmxvYXQzMiIsICJtZXRhZGF0YSI6IG51bGx9LCB7Im5hbWUiOiAiciIsICJmaWVsZF9uYW1lIjogInIiLCAicGFuZGFzX3R5cGUiOiAidWludDgiLCAibnVtcHlfdHlwZSI6ICJ1aW50OCIsICJtZXRhZGF0YSI6IG51bGx9LCB7Im5hbWUiOiAiZyIsICJmaWVsZF9uYW1lIjogImciLCAicGFuZGFzX3R5cGUiOiAidWludDgiLCAibnVtcHlfdHlwZSI6ICJ1aW50OCIsICJtZXRhZGF0YSI6IG51bGx9LCB7Im5hbWUiOiAiYiIsICJmaWVsZF9uYW1lIjogImIiLCAicGFuZGFzX3R5cGUiOiAidWludDgiLCAibnVtcHlfdHlwZSI6ICJ1aW50OCIsICJtZXRhZGF0YSI6IG51bGx9LCB7Im5hbWUiOiAiYSIsICJmaWVsZF9uYW1lIjogImEiLCAicGFuZGFzX3R5cGUiOiAidWludDgiLCAibnVtcHlfdHlwZSI6ICJ1aW50OCIsICJtZXRhZGF0YSI6IG51bGx9LCB7Im5hbWUiOiAic2VsZWN0ZWQiLCAiZmllbGRfbmFtZSI6ICJzZWxlY3RlZCIsICJwYW5kYXNfdHlwZSI6ICJ1aW50OCIsICJudW1weV90eXBlIjogInVpbnQ4IiwgIm1ldGFkYXRhIjogbnVsbH1dLCAiY3JlYXRvciI6IHsibGlicmFyeSI6ICJweWFycm93IiwgInZlcnNpb24iOiAiMTcuMC4wIn0sICJwYW5kYXNfdmVyc2lvbiI6ICIyLjIuMiJ9AAAAAAYAAABwYW5kYXMAAAcAAAAoAQAA7AAAALwAAACQAAAAZAAAADgAAAAEAAAABP///wAAAQIQAAAAHAAAAAQAAAAAAAAACAAAAHNlbGVjdGVkAAAAAGL///8IAAAANP///wAAAQIQAAAAFAAAAAQAAAAAAAAAAQAAAGEAAACK////CAAAAFz///8AAAECEAAAABQAAAAEAAAAAAAAAAEAAABiAAAAsv///wgAAACE////AAABAhAAAAAUAAAABAAAAAAAAAABAAAAZwAAANr///8IAAAArP///wAAAQIQAAAAGAAAAAQAAAAAAAAAAQAAAHIABgAIAAQABgAAAAgAAADY////AAABAxAAAAAUAAAABAAAAAAAAAABAAAAeQAAAMr///8AAAEAEAAUAAgABgAHAAwAAAAQABAAAAAAAAEDEAAAABgAAAAEAAAAAAAAAAEAAAB4AAYACAAGAAYAAAAAAAEA+AUAAEFSUk9XMQ=="; |
|
|
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 = "H4sIAJ3XGmcC/1WRW2vCMBiG/0rJ1Qa15Jx8vRvbEEGkF8Iu5i6izbTQpZK2Hjb235e2audVyPF53jfvP+iEUpJQLQED40TH6IxSnnBCiSRMYBaj0qxtiVL0NJtk1dF6m0fTtsjtyn1WPsqsrytnyuLb5iu39OZgy5V7Pe2tL6zb2BrFqA6bKKU6wTHyKNXh0W3AEojROoxcxcigVPLf+OIjOSgKhFF18aGKYwwKczn6PHtrmuJgozdfNIXb3kDkCiKY9yS4gvg9aEISrLAEyRUjPYklWlBOgCnJR9LCNK03ZTQ3btuabUie+SpEqwM1eljMs8cxZPdkkCcSQ+8AuFdQfFCg9wY00SEr1SDxUH1YAKBEcAF6FLiWHE19dWx2K2dcHr3YUHW1/7Ku+R9dydAcVUyrnt8FC/xu1vG7D73vWoDoDkstewGZENAaY9zduPKXdrOLZi5v68afL7/bFLUdY7NEca2UEIoO1dOBK0XP1bfmP/4Ap6dsv3QCAAA="; |
|
|
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: 4.5145063, |
|
|
longitude: 1.2024777, |
|
|
zoom: 6.44722423776339 |
|
|
}, |
|
|
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> |
