Add website

naitian · Nov 15, 2023 · 674fee3 · 674fee3
1 parent cc4d782
commit 674fee3
Show file tree

Hide file tree

Showing 29 changed files with 873 additions and 0 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -0,0 +1,62 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches: 'main'
+
+jobs:
+  build_site:
+    runs-on: ubuntu-latest
+    defaults:
+      - run:
+        - working-directory: ./website/
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      # If you're using pnpm, add this step then change the commands and cache key below to use `pnpm`
+      # - name: Install pnpm
+      #   uses: pnpm/action-setup@v2
+      #   with:
+      #     version: 8
+
+      - name: Install Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: npm
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: build
+        env:
+          BASE_PATH: '/${{ github.event.repository.name }}'
+        run: |
+          npm run build
+
+      - name: Upload Artifacts
+        uses: actions/upload-pages-artifact@v2
+        with:
+          # this should match the `pages` option in your adapter-static options
+          path: 'build/'
+
+  deploy:
+    needs: build_site
+    runs-on: ubuntu-latest
+
+    permissions:
+      pages: write
+      id-token: write
+
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    steps:
+      - name: Deploy
+        id: deployment
+        uses: actions/deploy-pages@v2
+
+
+
diff --git a/website/.gitignore b/website/.gitignore
@@ -0,0 +1,10 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
diff --git a/website/.npmrc b/website/.npmrc
@@ -0,0 +1 @@
+engine-strict=true
diff --git a/website/README.md b/website/README.md
@@ -0,0 +1,38 @@
+# create-svelte
+
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npm create svelte@latest
+
+# create a new project in my-app
+npm create svelte@latest my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
diff --git a/website/dissection.svg b/website/dissection.svg
diff --git a/website/package.json b/website/package.json
@@ -0,0 +1,21 @@
+{
+	"name": "website",
+	"version": "0.0.1",
+	"private": true,
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^2.0.0",
+		"@sveltejs/adapter-static": "^2.0.3",
+		"@sveltejs/kit": "^1.27.4",
+		"svelte": "^4.0.5",
+		"vite": "^4.4.2"
+	},
+	"type": "module",
+	"dependencies": {
+		"svelte-action-balancer": "^1.0.4"
+	}
+}
diff --git a/website/src/app.html b/website/src/app.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>
diff --git a/website/src/routes/+layout.svelte b/website/src/routes/+layout.svelte
@@ -0,0 +1,48 @@
+<script>
+export const prerender = true;
+
+import { dev } from '$app/environment';
+</script>
+
+<svelte:head>
+  <meta http-equiv="content-type" content="text/html; charset=utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    {#if !dev}
+      <!-- Global site tag (gtag.js) - Google Analytics -->
+      <script async src="https://www.googletagmanager.com/gtag/js?id=UA-89717266-1"></script>
+      <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'UA-89717266-1');
+        </script>
+    {/if}
+
+  <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=Merriweather:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" rel="stylesheet">
+</svelte:head>
+
+<div class="content"><slot></slot></div>
+
+
+<style global>
+
+* {
+  font-family: Merriweather;
+}
+
+.content {
+  max-width: 600px;
+  width: 80vw;
+  line-height: 1.7;
+  margin: 3rem auto;
+}
+
+h1, h2 {
+  font-weight: 400;
+}
+</style>
diff --git a/website/src/routes/+page.svelte b/website/src/routes/+page.svelte
@@ -0,0 +1,137 @@
+<script>
+import SmallCaps from '$lib/SmallCaps.svelte';
+import Wide from '../lib/Wide.svelte';
+import Figure from '../lib/Figure.svelte';
+import Variation from '$lib/Variation.svelte';
+import Dissection from '../lib/Dissection.svelte';
+import SemClusters from '../lib/SemClusters.svelte';
+
+import { balancer } from "svelte-action-balancer";
+
+</script>
+
+
+<header>
+  <Wide><h1 class="title" use:balancer={{ enabled: true, ratio: .5 }}>
+    Social meme-ing: Measuring linguistic variation in memes
+  </h1></Wide>
+
+  <div class="authors">
+    <span class="author">Naitian Zhou<sup>1</sup></span>,
+    <span class="author">David Jurgens<sup>2</sup></span> and
+    <span class="author">David Bamman<sup>1</sup></span>
+  </div>
+  <div class="affiliations">
+    <span class="affiliation"> <sup>1</sup> University of California, Berkeley</span>
+    <span class="affiliation"> <sup>2</sup> University of Michigan</span>
+  </div>
+
+  <div class="links">
+    <a href="#">📝 Read the Paper</a>
+    <a href="https://github.com/naitian/semantic-memes">💻 View the Code</a>
+  </div>
+
+</header>
+
+<div class="content">
+
+  <h2>Introduction</h2>
+  <p>
+    Much work in the space of NLP has used computational methods to explore
+    sociolinguistic variation in text. In this paper, we argue that memes, as
+    multimodal forms of language comprised of visual templates and text, also
+    exhibit meaningful social variation.
+  </p>
+  <h2>Highlights</h2>
+
+  <p>
+  <b>We learn the semantics of meme templates.</b> We take advantage of the
+    multimodal structure of memes to develop a method that learns template
+    semantics without supervision (section 2).
+  <Figure caption="Memes are multimodal constructions where the base image <span style='font-weight: bold; color: #E69138'>template</span> and additional text <span style='font-weight: bold; color: #3C78D8'>fills</span> both have semantic value."> <Dissection/> </Figure>
+  </p>
+
+  <p> 
+  <b>We create the <SmallCaps>SemanticMemes</SmallCaps> dataset.</b> We use
+    this method to construct and make available a dataset of 3.8M Reddit memes
+    grouped into semantic clusters (section 3).
+    <Figure caption="Visually diverse clusters emerge even for complex semantic functions like a surprise narrative."> 
+      <SemClusters/>
+    </Figure>
+  </p>
+
+  <p>
+    <b>Memes have socially meaningful linguistic variation.</b>
+    We find that, not only do subreddits prefer certain variants of a template
+    over others, but they choose templates that index into a localized cultural
+    knowledge, making cultural allusions to characters or celebrities (section 5). Click
+    below to see examples.
+  <Wide>
+    <Figure 
+      caption="Different subreddits systematically prefer some meme
+      templates over other semantically equivalent ones. <b>Click on a cluster</b> to see the different variants. All examples here are statistically significantly overrepresented in their respective subreddits, p < 0.05.">
+      <Variation/>
+    </Figure>
+  </Wide>
+
+  </p>
+
+  <p> 
+    What's more, we find that the patterns of linguistic innovation (section 6) and
+    acculturation (section 7) that has been observed in text also occurs with memes!
+  </p>
+
+  <h2>Conclusion</h2>
+  <p>
+    We hope that this work will encourage more research into the social
+    language of memes, and that the <SmallCaps>SemanticMemes</SmallCaps>
+    dataset will be a useful resource for future work.
+  </p>
+
+</div>
+
+
+<style>
+
+header {
+  margin-bottom: 1em;
+  text-align: center;
+}
+
+.title {
+  font-size: 1.8em;
+  line-height: 1.2em;
+  text-align: center;
+  margin: auto;
+}
+
+h2 {
+  font-size: 1.2em;
+}
+
+.author {
+  font-weight: bold;
+}
+.affiliations {
+  font-style: italic;
+}
+.affiliation {
+  margin-right: 0.5em;
+}
+
+.abstract {
+  font-size: 0.8em;
+}
+
+.links a {
+  font-size: 0.8em;
+  color: white;
+  margin-right: 1em;
+  border: 1px solid #ccc;
+  background-color: #333;
+  border-radius: 5px;
+  padding: 5px 10px;
+  text-decoration: none;
+  font-family: Open Sans, sans-serif;
+}
+</style>
diff --git a/website/static/drake.jpeg b/website/static/drake.jpeg
diff --git a/website/static/favicon.png b/website/static/favicon.png
diff --git a/website/static/semclusters/declare.png b/website/static/semclusters/declare.png
diff --git a/website/static/semclusters/scalar.png b/website/static/semclusters/scalar.png
diff --git a/website/static/semclusters/similarity.png b/website/static/semclusters/similarity.png
diff --git a/website/static/semclusters/surprise.png b/website/static/semclusters/surprise.png
diff --git a/website/static/semclusters/unpopular.png b/website/static/semclusters/unpopular.png
diff --git a/website/static/variation/compare/anime.png b/website/static/variation/compare/anime.png
diff --git a/website/static/variation/compare/dnd.png b/website/static/variation/compare/dnd.png
diff --git a/website/static/variation/compare/drake.png b/website/static/variation/compare/drake.png
diff --git a/website/static/variation/compare/prequel.png b/website/static/variation/compare/prequel.png
diff --git a/website/static/variation/compare/startrek.png b/website/static/variation/compare/startrek.png
diff --git a/website/static/variation/declare/anime.png b/website/static/variation/declare/anime.png
diff --git a/website/static/variation/declare/lisa.png b/website/static/variation/declare/lisa.png
diff --git a/website/static/variation/scalar/dnd.png b/website/static/variation/scalar/dnd.png
diff --git a/website/static/variation/scalar/minecraft.png b/website/static/variation/scalar/minecraft.png
diff --git a/website/static/variation/scalar/pooh.png b/website/static/variation/scalar/pooh.png
diff --git a/website/svelte.config.js b/website/svelte.config.js
@@ -0,0 +1,18 @@
+import adapter from '@sveltejs/adapter-static';
+
+export default {
+	kit: {
+		adapter: adapter({
+			// default options are shown. On some platforms
+			// these options are set automatically — see below
+			pages: 'build',
+			assets: 'build',
+			fallback: undefined,
+			precompress: false,
+			strict: true
+		}),
+		paths: {
+			base: process.argv.includes('dev') ? '' : "semantic-memes"
+		}
+	}
+};
diff --git a/website/vite.config.js b/website/vite.config.js
@@ -0,0 +1,6 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [sveltekit()]
+});