Skip to content

Commit

Permalink
Reorganize
Browse files Browse the repository at this point in the history
  • Loading branch information
@naitian
naitian committed Nov 15, 2023
1 parent bdf65df commit 415beaa
Show file tree
Hide file tree
Showing 5 changed files with 78 additions and 43 deletions.
1 change: 0 additions & 1 deletion website/src/lib/Dissection.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,6 @@

<style>
svg {
width: 80%;
display: block;
margin: 0 auto;
}
Expand Down
4 changes: 3 additions & 1 deletion website/src/lib/Figure.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,12 @@
export let caption;
export let title;
export let width = "100%";
import { balancer } from "svelte-action-balancer";
</script>

<figure>
<figure style:width={width}>
{#if title}
<h3>{title}</h3>
{/if}
Expand Down
26 changes: 15 additions & 11 deletions website/src/lib/SemClusters.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,19 +7,23 @@
{name: "Surprise narrative", path: `${base}/semclusters/surprise.png`},
]
let selectedCluster = 0;
let selectedCluster = 3;
</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}
Semantic cluster: <select bind:value={selectedCluster}>
{#each clusters as cluster, i}
<option value={i}>{cluster.name}</option>
{/each}
<!-- {#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}
Expand All @@ -37,6 +41,6 @@ div {
text-align: center;
}
img {
width: 80%;
width: 100%;
}
</style>
2 changes: 1 addition & 1 deletion website/src/lib/Variation.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ img {
font-family: Open Sans, sans-serif;
overflow-x: scroll;
padding: 2px;
height: 190px;
height: 210px;
}
.cluster {
Expand Down
88 changes: 59 additions & 29 deletions website/src/routes/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { balancer } from "svelte-action-balancer";

<header>
<Wide><h1 class="title" use:balancer={{ enabled: true, ratio: .5 }}>
Social meme-ing: Measuring linguistic variation in memes
Social Meme-ing: Measuring Linguistic Variation in Memes
</h1></Wide>

<div class="authors">
Expand All @@ -28,7 +28,8 @@ import { balancer } from "svelte-action-balancer";

<div class="links">
<a href="#">📝 Read the Paper</a>
<a href="https://github.com/naitian/semantic-memes">💻 View the Code</a>
<a href="https://github.com/naitian/social-memeing">💻 View the Code</a>
<a href="#data">📊 Get the data</a>
</div>

</header>
Expand All @@ -44,50 +45,75 @@ import { balancer } from "svelte-action-balancer";
</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>
<div style:display="flex">

<div style:width="60%">

<p>
<b>We learn the semantics of meme templates without supervision.</b> We
take advantage of the multimodal structure to learn how fill text
aligns with the template by fine-tuning a RoBERTa model, giving
semantic embeddings for templates which we can then cluster.
</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 semantically coherent clusters.
</p>

<p>
<b>We find memes with socially meaningful variation.</b>
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. Click below to see examples.

</p>

</div>

<div style:float="right" style:display="inline" style:width="40%">
<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>
</div>
</div>
</Wide>
<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!
What's more, we find that patterns of linguistic innovation and
acculturation that have been previously observed in text also occur with
memes! Read the paper for more details about these experiments, as well as
our experiments with using CLIP to train a multimodal model and more
information about the evaluation process.
</p>

<h2 id="data">Explore the data</h2>
<p>You can download the dataset with Reddit post ID, image URL, RoBERTa semantic cluster label, and template visual cluster label <a href="https://ischool.berkeley.edu/~naitian/social-memeing/semantic_memes_roberta.tar.gz">at this link</a> (63MB gzipped).</p>

<Figure title="Semantic clusters" caption="Visually diverse clusters emerge even for complex semantic functions like a surprise narrative.">
<SemClusters/>
</Figure>
<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>

<p>
To cite this work:

</p>
<pre>
TBD
</pre>
</div>


Expand All @@ -105,6 +131,10 @@ header {
margin: auto;
}
.content {
font-family: Open Sans, sans-serif;
}
h2 {
font-size: 1.2em;
}
Expand Down

0 comments on commit 415beaa

Please sign in to comment.