-
Notifications
You must be signed in to change notification settings - Fork 1
/
about.html
226 lines (226 loc) · 8.82 KB
/
about.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
<!DOCTYPE html>
<html lang="en">
<head>
<link
rel="apple-touch-icon"
sizes="180x180"
href="assets/favicon/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="assets/favicon/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="assets/favicon/favicon-16x16.png"
/>
<meta property="og:title" content="Generate Kanye West Quotes" />
<meta property="og:image" content="assets/screenshot.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="627" />
<meta name="author" content="Allison Colyer" />
<meta
property="og:description"
content="Kanye.fun generates fake Kanye West quotes using a Markov chain."
/>
<meta property="og:url" content="http://www.kanye.fun" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" type="text/css" href="./style/main.css" />
<script type="module" src="./scripts/main.js"></script>
<title>Kanye Quotes</title>
</head>
<body>
<header>
<nav>
<a class="mx-2" href="/">
<img id="logo" src="assets/kanye.png" />
</a>
<div class="nav-container mx-2">
<a class="nav-link mr-2" href="/about.html">About</a>
<a
class="nav-link"
target="_blank"
href="https://github.com/Allicolyer/markov-kanye"
>Github</a
>
</div>
</nav>
</header>
<div class="content my-3 vertical-center">
<h1 class="title my-3">About Kanye.fun</h1>
<div class="my-3">
This site uses Markov chains to generate quotes that sound like Kanye
West.
</div>
<h3 class="title my-3">Markov Chains Explained</h3>
<div class="mb-3">
A ‘Markov Process’ is a process for which the probability of the next
thing that will happen only depends on the last thing that happened, and
not everything before it. Let’s say you wanted to make a prediction
about whether a sports team will win their next game. Instead of looking
at the team’s winning history, you look only at the last one or two
games and decide based on that. This is the idea behind Markov chains.
</div>
<div class="mb-3">
Markov chains are frequently used to generate text that mimics the style
or sound of some other text. For example, let’s create a Markov chain to
generate sentences that sounds like Dr. Suess. Our input sentence is:
“One fish two fish red fish blue fish”. To create the Markov chain, we
first go through each word in the sentence and write down the word that
comes next. So, the word ‘fish’ comes after ‘one’, and the word ‘two’
comes after ‘fish’. We do this until we’re finished with our input.
</div>
<ul class="mb-3">
<li>one: fish</li>
<li>fish: two, red, blue</li>
<li>two: fish</li>
<li>red: fish</li>
<li>blue: fish</li>
</ul>
<div class="mb-3">
We now have a Markov chain that can be used to generate a new Dr. Suess
sentence. To do that, first, pick a word to start with, let’s say ‘two’.
Pick one word that comes after ‘two’ and add it to the sentence. Here it
would be ‘fish’.
</div>
<div class="mb-3">
“Two fish”
</div>
<div class="mb-3">
The last word in our sentence is fish, so now pick a word from the
Markov chain that comes after ‘fish’ and add it to the sentence. Let’s
say we pick ‘blue’.
</div>
<div class="mb-3">
“Two fish blue”
</div>
<div class="mb-3">
Now ‘blue’ is the last word, so pick a word that comes after ‘blue’ in
our Markov chain and add it to the sentence. After a few more
iterations, we’ll get something that sounds like Dr. Suess.
</div>
<div class="mb-3">
“Two fish blue fish red fish two”
</div>
<h3 class="title my-3">How Kanye.fun works</h3>
<div class="mb-3">
This site builds a Markov chain from two-hundred different Kanye West
quotes and uses that chain to generate quotes in a similar style to
Kanye. The Markov chain weights word differently based on how often they
appear next to each other. So for instance, if six quotes have the
combination ‘I am’ and only one has the combination ‘I have’, ‘I am’ is
six times more likely to appear in a generated quote than ‘I have’. Just
like with any Markov chain, there is always a chance that the generated
Kanye West quote is actually a real Kanye West quote.
</div>
<div class="mb-3">
Switching between ‘more random’ and ‘less random’ lets you choose
between using a first-order Markov chain and a second-order Markov
chain. First-order Markov chains use only on the last word to pick the
next word in a sentence. Second-order Markov chains use the last two
words in a sentence to predict the next one. The second-order chain
generates quotes that sound more like Kanye, while the first-order chain
generates sentences that are more jumbled and random.
</div>
<h3 class="title my-3">Contributors</h3>
<div class="contributors">
<div class="bio mb-3">
<img
class="mb-3 vertical-center"
src="https://avatars1.githubusercontent.com/u/11083917?s=460&v=4"
/>
Kanye.fun was created by
<a href="https://twitter.com/AlliColyer" target="_blank"
>Allison Colyer</a
>.
</div>
<div class="bio mb-3">
<img
class="mb-3 vertical-center"
src="https://avatars1.githubusercontent.com/u/9114194?s=460&v=4"
/>
Thanks to
<a href="https://github.com/michaelwlu" target="_blank">Michael Lu</a>
for being a contributing programmer.
</div>
<div class="bio mb-3">
<img
class="mb-3 vertical-center"
src="https://media-exp1.licdn.com/dms/image/C5603AQFKfGxEaciQ8A/profile-displayphoto-shrink_200_200/0?e=1585785600&v=beta&t=kp8MkFGuxXcLItZJNigLpLUb34PkQqSP3qkPR_hvuj0"
/>
Thanks to
<a href="https://www.linkedin.com/in/sethaklein/" target="_blank"
>Seth Klein</a
>
for creating the Kanye graphic.
</div>
<div class="bio mb-3">
<img
class="mb-3 vertical-center"
src="https://avatars3.githubusercontent.com/u/6632604?s=460&v=4"
/>
Thanks to
<a href="https://github.com/chloerevery" target="_blank"
>Chloe Revery</a
>
for her explanation of Markov chains.
</div>
<div class="bio mb-3">
<img
class="mb-3 vertical-center"
src="https://d29xw0ra2h4o4u.cloudfront.net/assets/logo_square-051508b5ecf8868635aea567bb86f423f4d1786776e5dfce4adf2bc7edf05804.png"
/>
Thanks to
<a href="https://www.recurse.com/" target="_blank">Recurse Center</a>
for supporting this project.
</div>
</div>
<h3 class="title my-3">API Endpoints</h3>
<div class="mb-3">
If you want to use generated Kanye West quotes in your own project, here
is how you can use Kanye as a Service.
</div>
<div class="api-div">
<div class="api-description mx-2 mb-3">
Generate Kanye West quotes. Include a number at the end of the URL to
specify the order Markov chain you want to use.
</div>
<a
class="mx-2 mb-3"
href="https://kanyefun.now.sh/quote/2"
target="_blank"
>https://kanyefun.now.sh/quote/2</a
>
</div>
<div class="api-div">
<div class="api-description mx-2 mb-3">
Generate a Markov Chain from the quotes used in this project. Specify
the order by putting a number to the end of the URL.
</div>
<a
class="mx-2 mb-3"
href="https://kanyefun.now.sh/markov/1"
target="_blank"
>https://kanyefun.now.sh/markov/1</a
>
</div>
<div class="api-div">
<div class="api-description mx-2 mb-3">
Fetch all of the Kanye West quotes used for this project.
</div>
<a
class="mx-2 mb-3"
href="https://kanyefun.now.sh/kanyequotes"
target="_blank"
>https://kanyefun.now.sh/kanyequotes</a
>
</div>
</div>
</body>
</html>