-
Notifications
You must be signed in to change notification settings - Fork 1
/
eliot.html
159 lines (152 loc) · 8.27 KB
/
eliot.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
<!doctype html>
<html>
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Local Styles -->
<link rel="stylesheet" href="css/style.css">
<!-- Ajax Link -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<title>Eliot</title>
</head>
<body class="bg-light" id="top">
<!--
####################################################
N A V B A R
####################################################
-->
<!-- If you need sticky-top to work in lower versions of IE https://github.com/filamentgroup/fixed-sticky -->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark sticky-top ">
<div class="navbar-toggler-right">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<!-- Important - make sure to have the toggler button outside of the container -->
<a class="navbar-brand" href="home.html">
<span class="">IMDB Learning</span>
</a>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav justify-content-end w-100">
<li class="nav-item">
<a class="nav-link" href="home.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="eliot.html">Eliot</a>
</li>
<li class="nav-item">
<a class="nav-link" href="sean.html">Sean</a>
</li>
<li class="nav-item">
<a class="nav-link" href="ian.html">Ian</a>
</li>
<li class="nav-item">
<a class="nav-link" href="cora.html">Cora</a>
</li>
</ul>
</div>
</nav>
<!--
####################################################
B O D Y
####################################################
-->
<div class ="row">
<div class="col-md-12 jumbotron text-center">
<h1>Welcome to IMDB Genre Tags Analysis & Prediction Page</h1>
<!-- maybe we can use home page as the dashboard? -->
<p>These page illustrates the movie genre prediction using Multi-Label Classification based on the movie title and plot description</p>
</div>
</div>
<div class="box">
<div class="container">
<div class="row">
<div class="col-md-12 text-left">
<h2>Multi-Label Classification</h2>
<p><br></p>
<p>My portion of the project is to build a model that takes the movie titles and descriptions as feature, and spit out the genre for that movie.</p>
<p>The reason I am interested in doing this is that when I worked on project 2 with a similar movie dataset scrapped from IMDB, I had a hard time dealing with multiple genre tags given in the genre column. It same with no specific number of tags and no specific sequence between tags.</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<!-- gotta play around with the bootstrap -->
<div class="col-md-12 text-left">
<img src="Images/screenshot_Eliot.jpg" alt="screenshot of IMDB page">
<p>This had made plotting visualizations super difficult for me.</p>
<br>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6 text-left">
<p>In my model, I used TF-IDF function to vectorize my feature, which score each word based on how frequently it appear in the bag of words of movie titles and descriptions. </p>
</div>
</div>
<div class="row">
<div class="col-md-6 text-left">
<img src="Images/genre_count_bar_Eliot.jpg" alt="test">
<p>There are 21 tags in genre.</p>
</div>
<div class="col-md-6 text-left">
<img src="Images/freq_word_bar_Eliot.jpg" alt="test">
<p>This is a bar chart for the top 100 most frequent words in the bag of words.</p>
<p><br></p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12 text-left">
<h2>Logistic Regression</h2>
<p><br></p>
<p>With the help of MultiLabelBinarizer(), I was able to assign these tags to outcome in arrays of array with binary information, and fit the data to a logistic regression model in a one vs. all fashion. This can be seen as the foundation of a serviceable movie recommendation system.</p>
<p>I adapted a function to sample the features and spit out the predicted genre and the actual genre of the movies.</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6 text-left">
<img src="Images/Sample_display_Eliot.jpg" alt="predictions">
<p><br></p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12 text-left">
<h2>Evaluations of The Predictions</h2>
<p><br></p>
<p>The challenge of this is that many classification studies focus on single-labeled classification. Therefore, even though the result of my prediction doesn't seem to be good, I had a hard time figuring out how to fit this multi-labeled data into other models and create good visualizations.</p>
<p><br>This is the classification report. The numbers aren't that great.</p>
<img src="Images/classification_report_Eliot.jpg" alt="classification_report">
<p><br></p>
<p>This is a confusion matrix plot for each of the 21 labels</p>
<img src="Images/LR_MultiLabel_ConfusionMatrix_Eliot.jpg" alt="classification_report">
</div>
</div>
<div class="row">
<p><br></p>
</div>
</div>
</div>
<!--
####################################################
F O O T E R
####################################################
-->
<div id="footer">
<div class="container text-center">
<p>© Copyright 2021 by Eliot Chern, Sean Galloway, Cora Micsunescu, and Ian Koenes.</p>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>