-
Notifications
You must be signed in to change notification settings - Fork 1
/
grailed.html
121 lines (114 loc) · 9.3 KB
/
grailed.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Grailed Scraper - Yikai Kuo</title>
<meta charset="utf-8">
<meta name="description" content="Grailed-Scraper is a web scraper for scraping images off of Grailed.com. Download thousands of images
of designer clothing at whatever dimensions you want." />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</meta>
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<!-- scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap"
rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</link>
<link type="text/css" href="./style/grailedCss.css" rel="stylesheet">
</link>
<script>
$(document).ready(function () {
$("#content").hide().removeClass("hidden").fadeIn(300);
});
</script>
</head>
<body>
<div class="container">
<div id="headDiv" class="row">
<div class="col-xs-12 col-xl-12">
<a href="https://kwhoakai.github.io/">
<svg id="svgSvg" viewBox="0 0 111.852 67.001" x="0px" y="0px">
<g id="svgGroup" stroke-linecap="round" fill-rule="evenodd" font-size="9pt" stroke="#000"
stroke-width="0.25mm" fill="none" style="stroke:#000;stroke-width:0.25mm;fill:none">
<path
d="M 82.67 24.045 L 77.959 29.345 L 86.891 42.595 Q 88.625 45.277 90.342 46.684 A 6.09 6.09 0 0 0 94.317 48.091 L 94.513 48.091 L 94.513 50.904 L 93.564 50.904 A 52.075 52.075 0 0 1 88.772 50.724 A 9.434 9.434 0 0 1 85.517 49.874 Q 84.143 49.203 82.998 47.911 A 27.853 27.853 0 0 1 80.446 44.394 L 73.739 33.893 L 68.799 37.557 L 68.799 43.609 Q 68.799 45.081 69.241 45.981 Q 69.683 46.88 70.435 47.338 A 4.627 4.627 0 0 0 72.185 47.944 Q 73.183 48.091 74.295 48.091 L 74.492 48.091 L 74.492 50.904 L 56.466 50.904 L 56.466 48.091 L 56.989 48.091 Q 58.134 48.091 59.132 47.927 Q 60.13 47.764 60.866 47.257 A 3.518 3.518 0 0 0 62.044 45.801 Q 62.485 44.852 62.485 43.282 L 62.485 7.361 Q 62.485 5.889 62.044 4.989 A 3.404 3.404 0 0 0 60.85 3.599 A 4.313 4.313 0 0 0 59.099 2.961 Q 58.102 2.813 56.989 2.813 L 56.466 2.813 L 56.466 0 L 68.799 0 L 68.799 25.845 A 105.547 105.547 0 0 1 68.767 28.184 A 113.804 113.804 0 0 1 68.668 30.981 A 844.122 844.122 0 0 0 68.538 34.285 L 76.913 25.125 A 38.584 38.584 0 0 0 78.696 22.999 Q 79.399 22.083 79.824 21.396 A 5.354 5.354 0 0 0 80.413 20.169 A 3.553 3.553 0 0 0 80.577 19.138 Q 80.577 18.288 79.775 18.042 Q 78.974 17.797 77.305 17.797 L 77.305 14.983 L 92.092 14.983 L 92.092 17.797 A 7.676 7.676 0 0 0 87.529 19.433 Q 85.288 21.068 82.67 24.045 Z M 41.319 14.983 L 55.255 14.983 L 55.255 17.797 L 55.059 17.797 Q 54.078 17.797 53.374 18.01 A 2.97 2.97 0 0 0 52.098 18.811 A 6.1 6.1 0 0 0 51.035 20.414 Q 50.544 21.428 49.956 23.031 L 39.781 51.166 Q 38.604 54.405 37.557 56.858 A 27.214 27.214 0 0 1 35.365 61.062 A 13.202 13.202 0 0 1 32.862 63.958 A 11.094 11.094 0 0 1 29.771 65.79 A 15.762 15.762 0 0 1 25.779 66.738 A 46.017 46.017 0 0 1 20.545 67 L 19.956 67 L 19.956 63.827 Q 23.358 63.827 25.812 62.813 Q 28.266 61.798 30.049 60.032 Q 31.832 58.265 33.026 55.861 A 31.439 31.439 0 0 0 35.038 50.643 L 22.639 21.363 A 12.956 12.956 0 0 0 21.755 19.645 A 4.323 4.323 0 0 0 20.79 18.549 A 3.124 3.124 0 0 0 19.547 17.96 Q 18.844 17.797 17.862 17.797 L 17.666 17.797 L 17.666 14.983 L 33.762 14.983 L 33.762 17.797 L 33.565 17.797 A 4.85 4.85 0 0 0 30.539 18.582 A 2.93 2.93 0 0 0 29.542 21.036 A 5.745 5.745 0 0 0 29.656 22.164 A 8.05 8.05 0 0 0 30.065 23.489 L 34.972 35.43 A 116.905 116.905 0 0 1 35.937 37.933 A 79.725 79.725 0 0 1 36.886 40.615 A 104.57 104.57 0 0 1 37.687 43.118 A 14.849 14.849 0 0 1 38.178 45.146 L 38.375 45.146 Q 38.734 43.674 39.372 41.564 A 108.146 108.146 0 0 1 40.861 37.033 L 45.343 23.98 Q 45.637 23.162 45.784 22.41 Q 45.932 21.657 45.932 21.101 Q 45.932 19.367 44.836 18.582 A 5.716 5.716 0 0 0 41.515 17.797 L 41.319 17.797 L 41.319 14.983 Z M 14.951 59.476 L 0 59.476 L 0 0 L 14.951 0 L 14.951 2.813 L 12.039 2.813 Q 10.927 2.813 9.929 2.977 A 4.347 4.347 0 0 0 8.179 3.648 Q 7.426 4.155 7.001 5.104 Q 6.576 6.052 6.576 7.623 L 6.576 51.853 Q 6.576 53.423 7.001 54.372 Q 7.426 55.321 8.179 55.828 A 4.347 4.347 0 0 0 9.929 56.499 A 13.04 13.04 0 0 0 12.039 56.662 L 14.951 56.662 L 14.951 59.476 Z M 111.852 59.476 L 96.934 59.476 L 96.934 56.662 L 99.813 56.662 Q 100.958 56.662 101.956 56.499 Q 102.954 56.335 103.69 55.828 A 3.518 3.518 0 0 0 104.867 54.372 Q 105.309 53.423 105.309 51.853 L 105.309 7.623 Q 105.309 6.052 104.867 5.104 A 3.518 3.518 0 0 0 103.69 3.648 A 4.214 4.214 0 0 0 101.956 2.977 Q 100.958 2.813 99.813 2.813 L 96.934 2.813 L 96.934 0 L 111.852 0 L 111.852 59.476 Z"
vector-effect="non-scaling-stroke" />
</g>
</svg>
</a>
</div>
</div>
<div id="content" class="hidden">
<!-- Page headers -->
<div id="title">
<h1 id="subtitle">Grailed Scraper</h1>
<h5 class="subhead">"I wanted sweaters"</h5>
</div>
<!-- Closet video -->
<div id="vidDiv">
<video playsinline preload="auto" autoplay muted loop id="closetVideo">
<source src="/Animation-Gifs/sweater_matrix.mp4" type="video/mp4">
</video>
<p class="imgDescrp">Tour of my virtual closet (p5js)</p>
</div>
<div class="row">
<div class="col-xs-hidden col-md-2 col-xl-2"></div>
<div id="descrp" class="col-xl-8 col-md-8 col-xs-12">
<p>
<strong>Grailed.com</strong> is a website where users trade designer and
vintage apparel. Due to the sheer volume of listings, the website can be
viewed as the largest archive of high fashion clothing in existence,
curated by the internet.
</p>
<p>
This collection offers a wealth of data
about the market value of certain brands, insight into current clothing trends,
as well as a peek into the absurdity that is high fashion.
</p>
<p>
Unfortunately, Grailed does not offer a public API.
</p>
<p>
To tap into this unique collection of data, a few
<a class="underline" href="https://www.grailed.com/acceptable">unsanctioned scrapers</a>
have been created that are able to retrieve meta-data, including price, list date,
and brand name. However, there are currently no scrapers that download images.
</p>
<p>
In order to aggregate a large collection of outerwear clothing, I created
<a class="underline" href="https://github.com/KwhoaKai/Grailed-Scraper">Grailed-Scraper</a>.
There are a number of technologies
that exist for web scraping such as Beautiful Soup, Scrapy, and Selenium. I ultimately settled
on Selenium because Grailed delivers content through JavaScript and lazyloads their images,
and Selenium allows for interaction with the DOM. The URL for every listing image includes
parameters for width, height, and fit, so <a class="underline"
href="https://github.com/KwhoaKai/Grailed-Scraper">Grailed-Scraper</a> uses this to download
images at user specified dimensions.
</p>
<p>
For ease of use, I parameterized the search term, number of images, and image
dimensions as arguments to the script.
</p>
<p>
Now, getting six thousand vintage sweaters
with a dimension of 200px by 200px is as easy as:
</p>
<div id="codesnip">
<code>python grailed_scraper.py "vintage sweater" --num 6000 --width 200 --height 200</code>
</div>
<p><a class="underline" href="https://github.com/KwhoaKai/Grailed-Scraper">Check out the project
here</a></p>
</div>
<div class="col-xs-hidden col-md-2 col-xl-2"></div>
</div>
</div>
<footer id="footer" class="fixed-bottom">
<div class="footer-copyright text-center">Yikai Kuo © 2022</div>
</footer>
</div>
</body>
</html>