File size: 20,241 Bytes
4713958 9c68311 4713958 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 |
<!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 = "H4sIAFefGWcC/+2YX4hcVx3Hb5o/TWKqEdtQxNLDIrZVN39ESKgPOrs7u9k4m0x2JkmjlOTMnTMzJ3vvPbfnnru7tyGKQgWhD32wVKxC64NKEFoQfRDji0WL+JJCxYegUFChmIIgioWon3PvnZndgE/62Fk+8+ece875/c7v+/ude7exunrmwrEg+Dev0T1BcDDwr/3B+4M9we5gL9947dg1aT/A+666/W87/He6wbfv5d337eX7b+q+G3xendFJX21eCk2Ux0k287j44tWZNdr4NmNlMlQznxQziYwVDUkeRfzKnLSOn0fL7ybl67Hj1Q9V/rj2JD+qGS+V06t64u3zDLSK+pe2t6Uy6cvskitS3ziTJzo0/cqGPE6LSYfpXVGh8+2xcrIvnaT16oxKuFwnQ3/Jue7i7ImZa1uM2W7FzMisK3vJqc1ynm3W3NX3P1nlPauMsEo6Y0tDI92z0hZ+UFpIa82GH8WamTaJbz12/PDRw0dnrk1X39L5qcP8zVwjhnug6q9ifX/gdXI/cd4T3FtG/mCtjx27/acIqthXigmCqZ++fVfZ5/X2zXquoNTPoVpxB8oZg527ggf5ePW+YDLTg7W+/JytoNLq9WD62hn899cP76k+X60//7l/2rfjrnnGrwfgYZit1+sBLgRfhhfh5/BruAX/8vpnog/BI3ACTsEqXAQFT0EBz8AL8CK8DD+GX8Eb8Ht4B+7AIWx9GB6DT8Pn4CQ8AUPYgGfhO/ADeAVeg9/CLfgTvA134H1szkfgMJyAU3AWLsEAMngWvg8/g9fhd/AOvLuzDEfwAfg4nIDzICEGB1+CZ+Hb8D24Ab+AN+A2/BXuwAd3B8FDcBxa8AUIIYZNeA6+BT+C1+FN+AO8DX+HvYjxEHwMjsFnoQUXQcNX4Xl4Ga7DT+Am3IZ3Yd+9QfBh+AQchzb0wMJX4CX4JfwZ/gH7KGYPwaPQgA5o+Bq8AN+Fn8JNeAv+AvftIwdgDs7Ck1DA1+F5uA6vwU24BW/BbbgDO9HlAzALn4HzsAbPwDfgFbgBb8If90913EhE042UVXksFtS6ikyqbKd5RrStiVPX0km+KbrKxjqRUTMZRjobiS7FN4t8vRCkt1iOU+tT9XJqMu0oA5fFcuKUXddqQ9lTcl12QqtTJ+ZNkplINTdDFYnOSCk3npHVkjwJtfTDxUkVeStSs6Ywb7yokiGGblsRQzBZLOW6r9qRHGppdRaL+ZEK15SdH0krQwwRA5wRKwaDjswZs3akkRRuRClu9JnE6YzFcKZwKoqUXTTG9WQUYW4cq8R5PzuOZWfz1LepvpbJinF6vbRW+gsxjR78V3ZB9aQbf1RduK9UsmE17aexG39caY2Yp02Hqyoqp8pGOq1GtI1yqzJlF7Yt1EmVxLH2SEcmM+moGO/KpIUB0k02q7EsLvgVkqHo5rhx7okj55ancZ4vemxOR4U5FxV+diLgjVtVoc29tS09qH1ouiI2kRnSO94XS7hW2HQGJfMSFy2X5knG5LatnJhTI7muDSFxbc6H0gMiphOM9OMjAi0jrCUMPgar/BJNTnD2rTHkila5XDn/Aj/5fkH1MD/Tw6QUUx4RF4eXjSyjV/XFggnxs3pvhCHm+CsQxKDBBsSmpyMlVlQ4kpyTDR97Vy1v7CIS9xKMRANLi8wtJ+sqc95VsSITOURvSs52JQvZUuD4hjWhsV4ii1HpaUdFg1kvYOGVtpSYmMZGOjKlMn1blwNNzMkMa73+EpdbJZY42/GjawsfLGfYh1CmSpCbDNpcxDKCrR3WLyk2sBalG+9Pla7TvuUkczb3uyB0IqTohCNjos7ZlnB1Mi9o5ZAGQ7OCziq0nZjbJzYxJkriNDZNZ+yyaWJVVUn9+ERDYiJeEU4jEsq+ikvDlruiYcMRYgpdK0+4NFySWaSHIwxZJM0kji36OzF7yuTWa2S8yMLyRdHcZA3XMWVcVnzqUVsGUc7NFElrQkyr3nVItxuZfrOfh9PEJEyEb766u7mIj80sk0WZFeX46bR1iJuRCXM/3O9GqL3sBsy9wP2SOK+znPx4msyRlu1Z18OqYHVQi4pPFmlifDGVKYNPAkGXSYNI+O3FXR3FdcrPRxLJhn71nE8xrh71HjB2QQ+1zxFEijp8YSrqQpf3IkaUtcCLpUzPFeoC5alS9JzsFVRip6qgVc42slDr+oI25Q+ztRdxapXfiiIxSRGLQRmJSbp2RsYXIUpivzb8vLaOTagTbXKhz7CWGnp7q2yaTuGKst5hJJkvWkraxJtNXee3snPau1OVhvpU6ZxfEv0yy0m0bq0BVsgyQZUvKB+6f8VvlCrE3cJf5I6WEhKuiY4ZuA3K0rTe+dKoYlllzKoaqs0t8taIfet5soBm4uogq7aoK6NSS367VwUH0NDKOPaubLmo45c+w6kyiMyGaJvMNWNzRW9xrn2yvXVAM1aWWkcSrKosJYOUd2mAr6WEkUzkM7isA5FM1sQFY9cyf3ZmWyrB2NWzXp+UcuphzoohLilfrro6pHCBqUpNG/VtGNufTnFabYgWz1Q5STDOF19t57j99+ejSny1W7RlRvW33CuYyB8hkhyvQ9rxj2Bocbmv5BYT8W2oeqb3SCbKQ8MnJ2O4DYiiycILytcJrmavs7SUkD9tNBWYHfFXTCacH2k1QBvKp+u6EmcG5ClFQ0sfl+l10yOMjCEdZieLtZFDXffEo51W+7Gx5WXWtORG4TduW8kVA/AHOZsgUq1ClREtKs7kiFiwOUGq1D/Vmz/rynowObE7bAchD8uzlJSb9/czZMc4axNvWVHpZsD9mT2X+PrqyvOTk2NZxDzmkYeN00uca2u5SMvUwBwzIHxMOZf3+yNJfYl0LHQsY1IoLm2h3+/yoqW+9etisEWT3Di5pXbXa9zn1nDs/QW9ptOyWKa4ekrycKfQ6+dlgsKfyvXTIq6ynDKoZl1VnmR5NHMoXI7qjb8sWr4g8YhZ15Q6h5vJyEuW5ZVMx7mIctfU5Iwuy3BdljNHLRnmSpgB+4aR/XF5IJOc9Pp34swGtk8OINqiupzUz2r+eTKonwkP8FS5p3ySPFg9S/LUeIL3jwbT/1ds1s+BL9Xjp8+Z7/2f473/c/z//s/xHDprlP9j+w8RrjezahMAAA==";
const hoverDataBuffer = fflate.strToU8(atob(hoverDataBase64), true);
const unzippedHoverData = fflate.gunzipSync(hoverDataBuffer);
const hoverData = await loaders.parse(unzippedHoverData, ArrowLoader);
const labelDataBase64 = "H4sIAFefGWcC/2WSwY7TMBCGXyXyOWt57PHYzm3FIkDaAxKVOBAOadcbLAW7ckK1BfHuOAltynKyNIf5vv/3fPnFXlhzRxwkaeeMtaZm5zJR3DirkRSgrNnQ7f3AGvYmdYdvIfZVF5/a+NHnMcVuaOODP/khHb/7OLGajeGnZ42UHFAY63RZW7PMGleevjyqZnvWqELqWEP4u14lkCsJIGQhqlVCcmc0KiJr9I1E9t0UTr76nMNUZNq4S8dwGK9kcJwECSs04gIGJRfyvGW/evxDVtwKJCmcBbmSNUeQ6EypRG3kty9Hn6fqk8+ncPAbUCInktqUDUgLUdECBAELEcTrsMBJCTJSAuElrLZoXRHHjfjOR5/XtLuUhrGNzylXj13sf3S9L1+QUxEZSwubjOJaWUvGCKHX+PPGYkNulQH6r3mt0CEKPTd0XibCGquVE/am+fdhnFI+V+m5ekx9OLSx3MHVZuvfcrGA7d8WpFzA8/LXvRMUtFXKXc8O0GrthLvpfZe7cl/z0VX3H9p4/3QKY/HYIl+AQLCe2CWpuxC//gGv3+Yk6gIAAA==";
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,
// CollideExtension options
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: -3.8677602,
longitude: -3.799325,
zoom: 6.299414970719322
},
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> |