Spaces:

datasets-topics
/

fka-awesome-chatgpt-prompts

Running

App Files Files Community

asoria HF staff commited on Oct 24, 2024

Commit

4713958

verified ·

1 Parent(s): 5603be7

Upload index.html with huggingface_hub

Browse files

Files changed (1) hide show

index.html +293 -18

index.html CHANGED Viewed

@@ -1,19 +1,294 @@
-<!doctype html>
 <html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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 = "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>