-
Notifications
You must be signed in to change notification settings - Fork 45
/
index.html
252 lines (214 loc) · 9.75 KB
/
index.html
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
<!doctype html>
<html lang="en">
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-143894998-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-143894998-1');
</script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="favicon.ico">
<title>Reformulating Unsupervised Style Transfer as Paraphrase Generation</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"
integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<style>
/* Show it is fixed to the top */
@font-face {
font-family: 'jdfont';
src: URL('j.d.ttf') format('truetype');
}
body {
padding-top: 4.5rem;
position: relative;
}
.anchor-target:target::before {
display: block;
content: " ";
margin-top: -60px;
padding-top: 60px;
visibility: hidden;
pointer-events: none;
}
/*https://stackoverflow.com/questions/35647044/boostrap-how-to-stick-a-button-over-an-image-when-re-sizing*/
.img-wrapper {
position: relative;
}
.img-overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: left;
}
.img-overlay:before {
content: ' ';
display: block;
/* adjust 'height' to position overlay content vertically */
height: 40%;
}
.jumbotron {
margin-bottom: .5rem;
padding: 2rem 2rem;
}
.headshot {
width: 9rem;
margin: 0.4rem;
}
.card-body {
padding: 0.5rem;
}
.citation {
display: block;
padding: 9.5px;
margin: 0 0 10px;
font-size: 13px;
line-height: 1.42857143;
word-break: break-all;
word-wrap: break-word;
color: #333;
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 4px;
}
.answerbutton {
white-space:normal !important;
word-wrap: break-word;
text-align: left;
}
/*.answergroup {*/
/*display: inline-grid;*/
/*}*/
.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }
.fig-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .15); }
.clicked-correct:hover {
background-color: #218838;
border-color: #1e7e34;
}
.clicked-correct {
color: #fff;
background-color: #28a745;
border-color: #28a745;
}
.clicked-wrong:hover {
background-color: #c82333;
border-color: #bd2130;
}
.clicked-wrong {
color: #fff;
background-color: #dc3545;
border-color: #dc3545;
}
.navbar-brand {
font-family: courier,arial,helvetica;;
font-size:1.5rem;
}
.squashtitleemph {
font-family: 'jdfont', cursive;
}
.msg {
margin-bottom: 0;
}
</style>
</head>
<body data-spy="scroll" data-target="#navbarCollapse" data-offset="200">
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">style</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#paper">Paper</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#authors">Authors</a>
</li>
</ul>
</div>
</nav>
<main role="main" class="container">
<div class="jumbotron">
<h2>Reformulating Unsupervised Style Transfer as Paraphrase Generation<br>(EMNLP 2020)</h2>
<a class="btn btn-lg btn-info" role="button" title="Paper" href="https://arxiv.org/abs/2010.05700">Paper »</a>
<a class="btn btn-lg btn-secondary" href="https://github.com/martiansideofthemoon/style-transfer-paraphrase" role="button" title="Project Code">Project Code »</a>
<a class="btn btn-lg btn-success" href="http://arkham.cs.umass.edu:8553" role="button" title="Demo">Demo »</a>
<a class="btn btn-lg btn-primary" href="https://drive.google.com/drive/folders/12ImHH2kJKw1Vs3rDUSRytP3DZYcHdsZw?usp=sharing" role="button" title="Dataset">Dataset & Models »</a>
<a class="btn btn-lg btn-warning" href="https://github.com/martiansideofthemoon/style-transfer-paraphrase/tree/master/web-demo" role="button" title="Demo Code">Demo Code »</a>
<a class="btn btn-lg btn-dark" href="https://slideslive.com/38938942/reformulating-unsupervised-style-transfer-as-paraphrase-generation" role="button" title="Talk">Talk »</a>
<a class="btn btn-lg btn-info" href="https://docs.google.com/presentation/d/1gh4lvzmEn1Hw4_FE1rlqNYMjsAeQFmBf8V6NPoCB-L0/edit?usp=sharing" role="button" title="Slides">Slides »</a>
</div>
<div id="about" class="anchor-target" style="margin-top: 1rem;">
<h3>Style transfer of text is controlled paraphrase generation.</h3>
<p>Modern NLP defines the task of <i>style transfer</i> as modifying the style of a given sentence without appreciably changing its semantics, which implies that the outputs of style transfer systems should be paraphrases of their inputs. However, many existing systems purportedly designed for style transfer inherently warp the input's meaning through <i>attribute transfer</i>, which changes semantic properties such as attribute-specific content words or sentiment. In this paper, we reformulate unsupervised style transfer as a paraphrase generation problem, and present a simple methodology based on fine-tuning pretrained language models on automatically generated paraphrase data. Despite its simplicity, our method significantly outperforms state-of-the-art style transfer systems on both human and automatic evaluations. We also survey 23 style transfer papers and discover that existing automatic metrics can be easily gamed and propose fixed variants. Finally, we pivot to a more real-world style transfer setting by collecting a large dataset of 15M sentences in 11 diverse styles, which we use for an in-depth analysis of our system.</p>
<div id="demo" class="anchor-target">
<div id="paper" class="anchor-target">
<h3>Paper</h3>
<div class="img-wrapper">
<a href="https://arxiv.org/abs/2010.05700"><img class="img-fluid" src="thumb.png">
<div class="img-overlay">
<button class="btn btn-info">Read the paper»</button>
</div>
</a>
</div>
<br />
If you find this paper relevant, please cite us:
<pre class="citation">@inproceedings{style20,
author={Kalpesh Krishna and John Wieting and Mohit Iyyer},
Booktitle = {Empirical Methods in Natural Language Processing},
Year = "2020",
Title={Reformulating Unsupervised Style Transfer as Paraphrase Generation},
}
</pre></div>
<div id="authors" class="anchor-target">
<h3>Contact</h3>
<div class="row" style="margin: 0 auto;">
<div class="card headshot box-shadow">
<img class="card-img-top" src="kalpesh.jpg" alt="kalpesh">
<div class="card-body">
<p class="card-text"><a href="https://martiansideofthemoon.github.io/">Kalpesh Krishna</a></p>
</div>
</div>
<div class="card headshot box-shadow">
<img class="card-img-top" src="john.jpg" alt="kalpesh">
<div class="card-body">
<p class="card-text"><a href="https://www.cs.cmu.edu/~jwieting/">John Wieting</a></p>
</div>
</div>
<div class="card headshot box-shadow">
<img class="card-img-top" src="mohit.png" alt="mohit">
<div class="card-body">
<p class="card-text"><a href="https://people.cs.umass.edu/~miyyer/">Mohit Iyyer</a></p>
</div>
</div>
</div>
</div>
<div id="contact" class="anchor-target">
<p><a href='mailto:[email protected]'>[email protected]</a>, <a href='mailto:[email protected]'>[email protected]</a>, <a href='mailto:[email protected]'>[email protected]</a></p>
</div>
<hr>
<div id="contact" class="anchor-target">
<p>website credits - <a href="https://rowanzellers.com">Rowan Zellers</a>' website on <a href="https://rowanzellers.com/hellaswag/">HellaSwag</a>.</p>
</div>
</div>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"
integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
</body>
</html>