From 6c91cf55201bf31590d27fc85b3a0f21e1da319c Mon Sep 17 00:00:00 2001
From: Naitian Zhou <naitian@naitian.org>
Date: Wed, 15 Nov 2023 02:07:37 -0800
Subject: [PATCH] Add lib

---
 website/.gitignore                 |   1 +
 website/src/lib/Dissection.svelte  |  77 ++++++++++++++++
 website/src/lib/Figure.svelte      |  30 ++++++
 website/src/lib/SemClusters.svelte |  41 +++++++++
 website/src/lib/SmallCaps.svelte   |   6 ++
 website/src/lib/Variation.svelte   | 143 +++++++++++++++++++++++++++++
 website/src/lib/Wide.svelte        |  13 +++
 website/src/lib/index.js           |   1 +
 8 files changed, 312 insertions(+)
 create mode 100644 website/src/lib/Dissection.svelte
 create mode 100644 website/src/lib/Figure.svelte
 create mode 100644 website/src/lib/SemClusters.svelte
 create mode 100644 website/src/lib/SmallCaps.svelte
 create mode 100644 website/src/lib/Variation.svelte
 create mode 100644 website/src/lib/Wide.svelte
 create mode 100644 website/src/lib/index.js

diff --git a/website/.gitignore b/website/.gitignore
index 6635cf5..fceadae 100644
--- a/website/.gitignore
+++ b/website/.gitignore
@@ -1,3 +1,4 @@
+!*/
 .DS_Store
 node_modules
 /build
diff --git a/website/src/lib/Dissection.svelte b/website/src/lib/Dissection.svelte
new file mode 100644
index 0000000..cc49cc2
--- /dev/null
+++ b/website/src/lib/Dissection.svelte
@@ -0,0 +1,77 @@
+<script>
+  let toptext = "Keras";
+  let bottomtext = "​"
+
+	const timeout = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+	const backspace = async (length) => {
+		for (let i = 0; i < length; ++i) {
+			bottomtext = bottomtext.slice(0, bottomtext.length - 1);
+			await timeout(60);
+		}
+	};
+
+	const type = async (append) => {
+		for (let i = 0, len = append.length; i < len; i++) {
+			bottomtext = bottomtext + append[i];
+			await timeout(70);
+		}
+	};
+
+	const intro = async () => {
+    while (true) {
+      await type("Pytorch");
+      await timeout(7000);
+      await backspace(7);
+      await timeout(3000);
+      await type("Numpy");
+      await timeout(7000);
+      await backspace(5);
+      await timeout(3000);
+    }
+		// await type(' and I feel fine...');
+		/* await timeout(500); */
+		/* dark = false; */
+	};
+  intro()
+</script>
+
+<svg viewBox="0 0 216 107" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2">
+    <path style="fill:none" d="M0 0h216v106.575H0z"/>
+    <use xlink:href="#a" width="1200" height="1200" transform="translate(18.348 .772) scale(.99831)"/>
+    <path style="fill:none;stroke:#e69138;stroke-width:1px" d="M18.348.772h104.823v104.823H18.348z"/>
+    <path style="fill:#fff" d="M122.016 79.671h3.27v5.53h-3.27zM122.016 22.311h3.27v5.53h-3.27z"/>
+    <path d="M121.006 73.648a2.416 2.416 0 0 0-2.415-2.415H77.409a2.416 2.416 0 0 0-2.414 2.415v19.319a2.416 2.416 0 0 0 2.414 2.415h41.182a2.416 2.416 0 0 0 2.415-2.415V73.648Z" style="fill:#3c78d8;fill-opacity:.31;stroke:#3c78d8;stroke-width:1px;stroke-linecap:round;stroke-miterlimit:1.5"/>
+    <text x="76.997" y="85.784" style="font-family:'RobotoMono-Bold','Roboto Mono',monospace;font-size:10px">{bottomtext}</text>
+    <text x="82.518" y="28.904" style="font-family:'RobotoMono-Bold','Roboto Mono',monospace;font-size:10px">{toptext}</text>
+    <path d="M120.526 15.244a2.462 2.462 0 0 0-2.46-2.461H76.975a2.462 2.462 0 0 0-2.46 2.461v19.227a2.462 2.462 0 0 0 2.46 2.461h41.091a2.462 2.462 0 0 0 2.46-2.461V15.244Z" style="fill:#3c78d8;fill-opacity:.31;stroke:#3c78d8;stroke-width:1px;stroke-linecap:round;stroke-miterlimit:1.5"/>
+    <path d="m126.826 22.757-6.3 2.1 6.3 2.1v-4.2Z" style="fill:#3c78d8"/>
+    <path d="M125.566 24.857h2.165a5.397 5.397 0 0 1 5.4 5.4v32.372c0 1.433.569 2.806 1.581 3.819a5.405 5.405 0 0 0 3.819 1.581h4.09" style="fill:none;stroke:#3c78d8;stroke-width:1px;stroke-linecap:round;stroke-miterlimit:1.5"/>
+    <path d="m126.826 80.106-6.3 2.1 6.3 2.1v-4.2Z" style="fill:#3c78d8"/>
+    <path d="M125.566 82.206h2.165a5.397 5.397 0 0 0 5.4-5.4v-3.389a5.387 5.387 0 0 1 5.388-5.388h4.102" style="fill:none;stroke:#3c78d8;stroke-width:1px;stroke-linecap:round;stroke-miterlimit:1.5"/>
+    <text x="143.961" y="16.72" style="font-family:'OpenSans-Bold','Open Sans',sans-serif;font-weight:700;font-size:12px;fill:#e69138">T<tspan x="150.072px 157.162px" y="16.72px 16.72px">em</tspan>plate</text>
+    <text x="145.622" y="72.588" style="font-family:'OpenSans-Bold','Open Sans',sans-serif;font-weight:700;font-size:12px;fill:#3c78d8">Fill</text>
+    <path d="m129.951 15.503-6.3-2.1 6.3-2.1v4.2Z" style="fill:#e69138"/>
+    <path d="M142.621 13.403h-13.93" style="fill:none;stroke:#e69138;stroke-width:1px;stroke-linecap:round;stroke-miterlimit:1.5"/>
+    <defs>
+        <image id="a" width="105" height="105" xlink:href="/drake.jpeg"/>
+    </defs>
+</svg>
+<div class="translation">"I prefer <span class="fill">{bottomtext}</span> to <span class="fill">{toptext}</span>"</div>
+
+<style>
+svg {
+  width: 80%;
+  display: block;
+  margin: 0 auto;
+}
+
+.fill {
+  background-color: #C3D6F3;
+  border-radius: 3px;
+  border: 1px solid #3c78d8;
+  padding: 1px 3px;
+}
+.translation {
+  text-align: center;
+}
+</style>
diff --git a/website/src/lib/Figure.svelte b/website/src/lib/Figure.svelte
new file mode 100644
index 0000000..c071ea2
--- /dev/null
+++ b/website/src/lib/Figure.svelte
@@ -0,0 +1,30 @@
+<script>
+export let caption;
+export let title;
+
+import { balancer } from "svelte-action-balancer";
+</script>
+
+<figure>
+  {#if title}
+  <h3>{title}</h3>
+  {/if}
+  <slot></slot>
+  {#if caption}
+  <figcaption class="caption" use:balancer={{enabled: true, ratio: 0.7}}>{@html caption}</figcaption>
+  {/if}
+</figure>
+
+<style>
+  figure {
+    margin: 2em 0;
+    font-family: Open Sans, sans-serif;
+  }
+  .caption {
+    font-size: 0.8em;
+    font-style: italic;
+    text-align: center;
+    margin: auto;
+    margin-top: 0.5em;
+  }
+</style>
diff --git a/website/src/lib/SemClusters.svelte b/website/src/lib/SemClusters.svelte
new file mode 100644
index 0000000..82a5d06
--- /dev/null
+++ b/website/src/lib/SemClusters.svelte
@@ -0,0 +1,41 @@
+<script> 
+  const clusters = [
+    {name: "Declaration", path: "/semclusters/declare.png"},
+    {name: "Scalar increase", path: "/semclusters/scalar.png"},
+    {name: "Similarity / parts of a whole", path: "/semclusters/similarity.png"},
+    {name: "Surprise narrative", path: "/semclusters/surprise.png"},
+  ]
+
+  let selectedCluster = 0;
+</script>
+
+<div class="cluster-selector">
+  {#each clusters as cluster, i}
+    <button class:active={selectedCluster == i} on:click={() => selectedCluster = i}>
+      {#if selectedCluster == i}
+        <b>{cluster.name}</b>
+      {:else}
+      {cluster.name}
+      {/if}
+    </button>
+  {/each}
+</div>
+<div>
+  {#each clusters as cluster, i}
+    {#if  selectedCluster == i}
+      <img src={cluster.path} />
+    {/if}
+  {/each}
+</div>
+
+
+<style>
+
+div {
+  position: relative;
+  text-align: center;
+}
+img {
+  width: 80%;
+}
+</style>
diff --git a/website/src/lib/SmallCaps.svelte b/website/src/lib/SmallCaps.svelte
new file mode 100644
index 0000000..d56f192
--- /dev/null
+++ b/website/src/lib/SmallCaps.svelte
@@ -0,0 +1,6 @@
+<span><slot></slot></span>
+<style>
+  span {
+    font-variant-caps: small-caps;
+  }
+</style>
diff --git a/website/src/lib/Variation.svelte b/website/src/lib/Variation.svelte
new file mode 100644
index 0000000..731770b
--- /dev/null
+++ b/website/src/lib/Variation.svelte
@@ -0,0 +1,143 @@
+<script>
+let selectedCluster = -1;
+const clusters = [
+  {
+    name: "Declarative",
+    memes: [
+      {
+        subreddit: "r/Animemes",
+        path: "/variation/declare/anime.png"
+      },
+      {
+        subreddit: "r/memes",
+        path: "/variation/declare/lisa.png"
+      },
+    ]
+  },
+  {
+    name: "Comparison",
+    memes: [
+      {
+        subreddit: "r/Animemes",
+        path: "/variation/compare/anime.png"
+      },
+      {
+        subreddit: "r/dndmemes",
+        path: "/variation/compare/dnd.png"
+      },
+      {
+        subreddit: "r/PrequelMemes",
+        path: "/variation/compare/prequel.png"
+      },
+      {
+        subreddit: "r/startrekmemes",
+        path: "/variation/compare/startrek.png"
+      },
+      {
+        subreddit: "r/memes",
+        path: "/variation/compare/drake.png"
+      },
+    ]
+  },
+{
+    name: "Scalar increase",
+    memes: [
+      {
+        subreddit: "r/MinecraftMemes",
+        path: "/variation/scalar/minecraft.png"
+      },
+      {
+        subreddit: "r/dndmemes",
+        path: "/variation/scalar/dnd.png"
+      },
+      {
+        subreddit: "r/memes",
+        path: "/variation/scalar/pooh.png"
+      },
+    ]
+  },
+]
+
+</script>
+
+<div class="clusters">
+  {#each clusters as cluster, i}
+    <div class="cluster" on:click={() => selectedCluster == i ? selectedCluster = -1 : selectedCluster = i}
+    >
+      <div class="memes">
+        {#each cluster.memes as meme, j}
+          <div class="meme"
+            style:transform={
+            selectedCluster == i ?
+              `perspective(50px) translate3D(${j * 160}px, 0, 1px)`
+              : `perspective(50px) translate3D(0, ${-(cluster.memes.length - j) * 2}px, ${-(cluster.memes.length - j)}px)`
+            }
+            style:z-index={selectedCluster == i ? 10 : -1}
+            style:background-color={selectedCluster == i ? "transparent" : "white"}
+          >
+            <div class="overlay" style:opacity={(selectedCluster == i || selectedCluster == -1) ? 0 : 0.5}></div>
+            <img src={meme.path}
+            />
+            <span class="subreddit"
+              style:opacity={selectedCluster == i ? 1 : 0}
+            >{meme.subreddit}</span>
+          </div>
+        {/each}
+      </div>
+      <div class="description"
+            style:opacity={selectedCluster == -1 ? 1 : 0}
+      >{cluster.name}</div>
+    </div>
+  {/each}
+</div>
+
+
+<style>
+
+.caption {
+  font-family: Open Sans, sans-serif;
+}
+img {
+  width: 150px;
+  border: 1px solid black;
+  box-shadow: 0 0 10px #8884;
+}
+
+.overlay {
+  pointer-events: none;
+  position: absolute;
+  width: 150px;
+  height: 150px;
+  background-color: white;
+}
+
+.clusters {
+  display: flex;
+  flex-direction: row;
+  gap: 1em;
+  font-family: Open Sans, sans-serif;
+  overflow-x: scroll;
+  padding: 2px;
+  height: 190px;
+}
+
+.cluster {
+  width: 150px;
+}
+
+.memes {
+  position: relative;
+  height: 150px;
+}
+
+.meme {
+  position: absolute;
+  transition: all 0.2s ease-in-out;
+}
+
+.description {
+  width: 100%;
+  text-align: center;
+}
+
+</style>
diff --git a/website/src/lib/Wide.svelte b/website/src/lib/Wide.svelte
new file mode 100644
index 0000000..1ed1914
--- /dev/null
+++ b/website/src/lib/Wide.svelte
@@ -0,0 +1,13 @@
+<div>
+<slot></slot>
+</div>
+
+<style>
+  div {
+    max-width: 90vw;
+    width: 130%;
+    position: relative;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+</style>
diff --git a/website/src/lib/index.js b/website/src/lib/index.js
new file mode 100644
index 0000000..856f2b6
--- /dev/null
+++ b/website/src/lib/index.js
@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.