Skip to content
Snippets Groups Projects
Commit 261bddfe authored by Aaron Cheung's avatar Aaron Cheung
Browse files

added responsive text size, tables move down, and zoomed in images are responsive

parent 65008a42
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
DataVis.ipynb
+ 0
− 12
View file @ 261bddfe
...@@ -404,18 +404,6 @@ ...@@ -404,18 +404,6 @@
"display_name": "Python 3 (ipykernel)", "display_name": "Python 3 (ipykernel)",
"language": "python", "language": "python",
"name": "python3" "name": "python3"
},
"language_info": {
"codemirror_mode": {
"name": "ipython",
"version": 3
},
"file_extension": ".py",
"mimetype": "text/x-python",
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython3",
"version": "3.9.12"
} }
}, },
"nbformat": 4, "nbformat": 4,
......
static/style.css
+ 152
− 95
View file @ 261bddfe
...@@ -14,44 +14,45 @@ body { ...@@ -14,44 +14,45 @@ body {
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
} }
.navbar a { .navbar a {
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
font-size: 25px; font-size: 25px;
position: relative; position: relative;
} }
.navbar a::after { /* this and a:hover::after is for navbar line effect */ .navbar a::after { /* this and a:hover::after is for navbar line effect */
content: ""; content: "";
position: absolute; position: absolute;
width: 0; width: 0;
height: 2px; height: 2px;
bottom: 0; bottom: 0;
left: 50%; left: 50%;
background-color: #1db954; /* adjust this as needed */ background-color: #1db954; /* adjust this as needed */
transition: width 0.3s ease-in-out, left 0.3s ease-in-out; transition: width 0.3s ease-in-out, left 0.3s ease-in-out;
} }
.navbar a:hover::after { .navbar a:hover::after {
width: 100%; width: 100%;
left: 0; left: 0;
} }
.nav-description {
transform: translateY(-250%); /* hides the description initially */
transition: transform 0.3s ease-in-out;
color: #ffffff;
width: 100%;
text-align: center;
font-size: 15px;
}
.navbar:hover {
height: 100px;
}
.navbar:hover .nav-description {
transform: translateY(20%); /* moves the text description down */
}
.nav-description {
transform: translateY(-250%); /* hides the description initially */
transition: transform 0.3s ease-in-out;
color: #ffffff;
width: 100%;
text-align: center;
font-size: 15px;
}
.navbar:hover {
height: 100px;
}
.navbar:hover .nav-description {
transform: translateY(20%); /* moves the text description down */
}
.container { .container {
padding-top: 20px; padding-top: 20px;
...@@ -95,30 +96,30 @@ hr.gradient { ...@@ -95,30 +96,30 @@ hr.gradient {
); );
} }
#dataset-desc {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
.menu-container { .menu-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 20px; gap: 20px;
} }
#dataset-options { #dataset-desc {
width: 150px; text-align: center;
height: 35px; font-family: Arial, Helvetica, sans-serif;
font-size: 16px; }
background-color: #1db954;
border-radius: 5px;
border-width: 0;
}
#dataset-options:hover { #dataset-options {
background-color: #1db954; width: 150px;
cursor: pointer; height: 35px;
} font-size: 16px;
background-color: #1db954;
border-radius: 5px;
border-width: 0;
}
#dataset-options:hover {
background-color: #1db954;
cursor: pointer;
}
.spotify-embed { .spotify-embed {
margin-bottom: 20px; margin-bottom: 20px;
...@@ -186,6 +187,12 @@ hr.gradient { ...@@ -186,6 +187,12 @@ hr.gradient {
transform: scale(1.3); transform: scale(1.3);
} }
@media (max-width: 992px) {
.image-container > img:hover {
transform: scale(1.7)
}
}
#text-1 { #text-1 {
font-size: 20px; font-size: 20px;
padding-top: 5%; padding-top: 5%;
...@@ -208,8 +215,19 @@ hr.gradient { ...@@ -208,8 +215,19 @@ hr.gradient {
text-align: right; text-align: right;
} }
@media (max-width: 992px) { /* responsive text sizes */
#text-1, #text-2, #text-3, #text-4, body, .nav-description, .btn-primary, #dataset-options {
font-size: 14px;
}
.navbar a {
font-size: 16px;
}
}
/* ------------------------------------------------------------ */ /* ------------------------------------------------------------ */
/* machinelearning.html page */ /* machinelearning.html page */
.subheading { .subheading {
text-align: center; text-align: center;
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
...@@ -222,7 +240,13 @@ hr.gradient { ...@@ -222,7 +240,13 @@ hr.gradient {
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
} }
.confusion-matrix { @media (max-width: 992px) { /* responsive text sizes */
.subheading {
font-size: 16px;
}
}
.confusion-matrix-container {
display: flex; display: flex;
justify-content: center; justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
...@@ -239,10 +263,16 @@ hr.gradient { ...@@ -239,10 +263,16 @@ hr.gradient {
border-radius: 2px; border-radius: 2px;
} }
.confusion-matrix > img:hover { .confusion-matrix-container > img:hover {
transform: scale(1.6); transform: scale(1.6);
} }
@media (max-width: 992px) {
.confusion-matrix-container > img:hover {
transform: scale(2.4)
}
}
.accuracy-chart { .accuracy-chart {
display: flex; display: flex;
justify-content: center; justify-content: center;
...@@ -262,6 +292,12 @@ hr.gradient { ...@@ -262,6 +292,12 @@ hr.gradient {
transform: scale(1.6); transform: scale(1.6);
} }
@media (max-width: 992px) {
.accuracy-chart > img:hover {
transform: scale(1.5)
}
}
.table-container { .table-container {
display: flex; display: flex;
justify-content: center; justify-content: center;
...@@ -269,36 +305,51 @@ hr.gradient { ...@@ -269,36 +305,51 @@ hr.gradient {
width: 100%; width: 100%;
} }
.table { .table {
width: 25%; width: 100%;
height: auto; height: auto;
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
font-size: 10px; font-size: 10px;
margin-top: 25px; margin-top: 25px;
margin-bottom: 5%; margin-bottom: 5%;
} overflow-x: auto;
}
.table1, .table2, .table3, .table4 {
background-color: #EEEEEE; @media (min-width: 992px) { /* large devices (desktops, 992px and up) */
color: #000000; .table-container { /*for moving tables underneath when screen is small */
} max-width: 25%;
float: left;
.table th, .table td:first-child { }
background-color: #1DB954; }
}
.table1, .table2, .table3, .table4 {
.table td, .table th { background-color: #EEEEEE;
padding: 5px; color: #000000;
} }
.table th:first-child { /* only name of model is in bold text */ .table th, .table td:first-child {
font-weight: bold; background-color: #1DB954;
text-align: center; }
}
.table td, .table th {
.table th:not(:first-child) { padding: 6px;
font-weight: normal; }
}
.table th:first-child { /* only name of model is in bold text */
font-weight: bold;
text-align: center;
}
.table th:not(:first-child) {
font-weight: normal;
}
@media (max-width: 992px) {
.image-container > img:hover {
transform: scale(1.7)
}
}
/* -------------------------------------------------- */ /* -------------------------------------------------- */
/* sentimentanalysis.html page */ /* sentimentanalysis.html page */
...@@ -310,20 +361,26 @@ hr.gradient { ...@@ -310,20 +361,26 @@ hr.gradient {
transition:transform 0.25s ease; transition:transform 0.25s ease;
} }
.img-valence-sentiment-mood2 { .img-valence-sentiment-mood2 {
width: 60%; width: 60%;
height: auto; height: auto;
transition:transform 0.25s ease; transition:transform 0.25s ease;
border: 3px solid #1db954; border: 3px solid #1db954;
border-radius: 3px; border-radius: 3px;
margin-top: 25px; margin-top: 25px;
margin-bottom: 25px; margin-bottom: 25px;
} }
.sentiment-analysis-img > img:hover { .sentiment-analysis-img > img:hover {
transform: scale(1.4); transform: scale(1.4);
} }
@media (max-width: 992px) {
.sentiment-analysis-img > img:hover {
transform: scale(1.6)
}
}
.spotify-container { .spotify-container {
margin-top: 25px; margin-top: 25px;
margin-bottom: 25px; margin-bottom: 25px;
......
templates/machinelearning.html
+ 300
− 282
View file @ 261bddfe
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<div class="description">In this project, I tested four different machine learning classification models to predict the mood of the songs in a given playlist, which was trained using a dataset I created: Gaussian Naive Bayes, Support Vector Classifier, Decision Tree, and Logistic Regression. By using different measures to test which was the most accurate (precision, recall, F1-score), I decided to use logistic regression for the final implementation as it had the best results.</div> <div class="description">In this project, I tested four different machine learning classification models to predict the mood of the songs in a given playlist, which was trained using a dataset I created: Gaussian Naive Bayes, Support Vector Classifier, Decision Tree, and Logistic Regression. By using different measures to test which was the most accurate (precision, recall, F1-score), I decided to use logistic regression for the final implementation as it had the best results.</div>
<div class="confusion-matrix"> <div class="confusion-matrix-container">
<img src="{{ url_for('static', filename='images/gnb_confusion_matrix.png') }}" alt="Gaussian Naive Bayes Confusion Matrix" class="confusion-matrix-image"> <img src="{{ url_for('static', filename='images/gnb_confusion_matrix.png') }}" alt="Gaussian Naive Bayes Confusion Matrix" class="confusion-matrix-image">
<img src="{{ url_for('static', filename='images/svc_confusion_matrix.png') }}" alt="Support Vector Classifier Confusion Matrix" class="confusion-matrix-image"> <img src="{{ url_for('static', filename='images/svc_confusion_matrix.png') }}" alt="Support Vector Classifier Confusion Matrix" class="confusion-matrix-image">
<img src="{{ url_for('static', filename='images/dtree_confusion_matrix.png') }}" alt="Decision Tree Confusion Matrix" class="confusion-matrix-image"> <img src="{{ url_for('static', filename='images/dtree_confusion_matrix.png') }}" alt="Decision Tree Confusion Matrix" class="confusion-matrix-image">
...@@ -20,294 +20,312 @@ ...@@ -20,294 +20,312 @@
<div class="description">In the confusion matrices, we can see how logistic regression has the greatest number of predicted moods matching the true moods for all except "Calm". When we compare the accuracies we see that logistic regression performs the best, where the accuracy is the number of correctly classified instances over the total number of instances. However, this may not always be the best measure if the dataset is not completely balanced (there are slight differences in number of songs per mood in the dataset). So, we can look at other metrics to compare the models:</div> <div class="description">In the confusion matrices, we can see how logistic regression has the greatest number of predicted moods matching the true moods for all except "Calm". When we compare the accuracies we see that logistic regression performs the best, where the accuracy is the number of correctly classified instances over the total number of instances. However, this may not always be the best measure if the dataset is not completely balanced (there are slight differences in number of songs per mood in the dataset). So, we can look at other metrics to compare the models:</div>
<div class="table-container"> <!-- <div class="table-container"> -->
<div class="table"> <div class="row">
<table class="table1"> <div class="col-12 table-container">
<thead> <div class="table-responsive">
<tr> <div class="table">
<th>Gaussian NB</th> <table class="table1">
<th>Precision</th> <thead>
<th>Recall</th> <tr>
<th>F1-Score</th> <th>Gaussian NB</th>
<th>Support</th> <th>Precision</th>
</tr> <th>Recall</th>
</thead> <th>F1-Score</th>
<tbody> <th>Support</th>
<tr> </tr>
<td>Calm</td> </thead>
<td>0.48</td> <tbody>
<td>0.68</td> <tr>
<td>0.57</td> <td>Calm</td>
<td>47</td> <td>0.48</td>
</tr> <td>0.68</td>
<tr> <td>0.57</td>
<td>Excited</td> <td>47</td>
<td>0.76</td> </tr>
<td>0.69</td> <tr>
<td>0.72</td> <td>Excited</td>
<td>51</td> <td>0.76</td>
</tr> <td>0.69</td>
<tr> <td>0.72</td>
<td>Happy</td> <td>51</td>
<td>0.49</td> </tr>
<td>0.63</td> <tr>
<td>0.55</td> <td>Happy</td>
<td>35</td> <td>0.49</td>
</tr> <td>0.63</td>
<tr> <td>0.55</td>
<td>Sad</td> <td>35</td>
<td>0.95</td> </tr>
<td>0.59</td> <tr>
<td>0.73</td> <td>Sad</td>
<td>64</td> <td>0.95</td>
</tr> <td>0.59</td>
<tr> <td>0.73</td>
<td>&nbsp;</td> <td>64</td>
<td>&nbsp;</td> </tr>
<td>&nbsp;</td> <tr>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
</tr> <td>&nbsp;</td>
<tr> <td>&nbsp;</td>
<td>Accuracy</td> <td>&nbsp;</td>
<td>&nbsp;</td> </tr>
<td>&nbsp;</td> <tr>
<td>0.64</td> <td>Accuracy</td>
<td>197</td> <td>&nbsp;</td>
</tr> <td>&nbsp;</td>
<tr> <td>0.64</td>
<td>Macro Avg</td> <td>197</td>
<td>0.67</td> </tr>
<td>0.65</td> <tr>
<td>0.64</td> <td>Macro Avg</td>
<td>197</td> <td>0.67</td>
</tr> <td>0.65</td>
<tr> <td>0.64</td>
<td>Weighted Avg</td> <td>197</td>
<td>0.71</td> </tr>
<td>0.64</td> <tr>
<td>0.66</td> <td>Weighted Avg</td>
<td>197&nbsp;</td> <td>0.71</td>
</tr> <td>0.64</td>
</tbody> <td>0.66</td>
</table> <td>197&nbsp;</td>
</tr>
</tbody>
</table>
</div>
</div>
</div> </div>
<div class="table"> <div class="col-12 table-container">
<table class="table2"> <div class="table-responsive">
<thead> <div class="table">
<tr> <table class="table2">
<th>SVC</th> <thead>
<th>Precision</th> <tr>
<th>Recall</th> <th>SVC</th>
<th>F1-Score</th> <th>Precision</th>
<th>Support</th> <th>Recall</th>
</tr> <th>F1-Score</th>
</thead> <th>Support</th>
<tbody> </tr>
<tr> </thead>
<td>Calm</td> <tbody>
<td>0.57</td> <tr>
<td>0.53</td> <td>Calm</td>
<td>0.55</td> <td>0.57</td>
<td>47</td> <td>0.53</td>
</tr> <td>0.55</td>
<tr> <td>47</td>
<td>Excited</td> </tr>
<td>0.73</td> <tr>
<td>0.65</td> <td>Excited</td>
<td>0.69</td> <td>0.73</td>
<td>51</td> <td>0.65</td>
</tr> <td>0.69</td>
<tr> <td>51</td>
<td>Happy</td> </tr>
<td>0.46</td> <tr>
<td>0.74</td> <td>Happy</td>
<td>0.57</td> <td>0.46</td>
<td>35</td> <td>0.74</td>
</tr> <td>0.57</td>
<tr> <td>35</td>
<td>Sad</td> </tr>
<td>0.88</td> <tr>
<td>0.72</td> <td>Sad</td>
<td>0.79</td> <td>0.88</td>
<td>64</td> <td>0.72</td>
</tr> <td>0.79</td>
<tr> <td>64</td>
<td>&nbsp;</td> </tr>
<td>&nbsp;</td> <tr>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
</tr> <td>&nbsp;</td>
<tr> <td>&nbsp;</td>
<td>Accuracy</td> </tr>
<td>&nbsp;</td> <tr>
<td>&nbsp;</td> <td>Accuracy</td>
<td>0.66</td> <td>&nbsp;</td>
<td>197</td> <td>&nbsp;</td>
</tr> <td>0.66</td>
<tr> <td>197</td>
<td>Macro Avg</td> </tr>
<td>0.66</td> <tr>
<td>0.66</td> <td>Macro Avg</td>
<td>0.65</td> <td>0.66</td>
<td>197</td> <td>0.66</td>
</tr> <td>0.65</td>
<tr> <td>197</td>
<td>Weighted Avg</td> </tr>
<td>0.70</td> <tr>
<td>0.66</td> <td>Weighted Avg</td>
<td>0.67</td> <td>0.70</td>
<td>197&nbsp;</td> <td>0.66</td>
</tr> <td>0.67</td>
</tbody> <td>197&nbsp;</td>
</table> </tr>
</tbody>
</table>
</div>
</div>
</div> </div>
<div class="table"> <div class="col-12 table-container">
<table class="table3"> <div class="table-responsive">
<thead> <div class="table">
<tr> <table class="table3">
<th>Decision Tree</th> <thead>
<th>Precision</th> <tr>
<th>Recall</th> <th>Decision Tree</th>
<th>F1-Score</th> <th>Precision</th>
<th>Support</th> <th>Recall</th>
</tr> <th>F1-Score</th>
</thead> <th>Support</th>
<tbody> </tr>
<tr> </thead>
<td>Calm</td> <tbody>
<td>0.50</td> <tr>
<td>0.60</td> <td>Calm</td>
<td>0.54</td> <td>0.50</td>
<td>47</td> <td>0.60</td>
</tr> <td>0.54</td>
<tr> <td>47</td>
<td>Excited</td> </tr>
<td>0.64</td> <tr>
<td>0.55</td> <td>Excited</td>
<td>0.59</td> <td>0.64</td>
<td>51</td> <td>0.55</td>
</tr> <td>0.59</td>
<tr> <td>51</td>
<td>Happy</td> </tr>
<td>0.40</td> <tr>
<td>0.54</td> <td>Happy</td>
<td>0.46</td> <td>0.40</td>
<td>35</td> <td>0.54</td>
</tr> <td>0.46</td>
<tr> <td>35</td>
<td>Sad</td> </tr>
<td>0.88</td> <tr>
<td>0.67</td> <td>Sad</td>
<td>0.76</td> <td>0.88</td>
<td>64</td> <td>0.67</td>
</tr> <td>0.76</td>
<tr> <td>64</td>
<td>&nbsp;</td> </tr>
<td>&nbsp;</td> <tr>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
</tr> <td>&nbsp;</td>
<tr> <td>&nbsp;</td>
<td>Accuracy</td> </tr>
<td>&nbsp;</td> <tr>
<td>&nbsp;</td> <td>Accuracy</td>
<td>0.60</td> <td>&nbsp;</td>
<td>197</td> <td>&nbsp;</td>
</tr> <td>0.60</td>
<tr> <td>197</td>
<td>Macro Avg</td> </tr>
<td>0.60</td> <tr>
<td>0.59</td> <td>Macro Avg</td>
<td>0.59</td> <td>0.60</td>
<td>197</td> <td>0.59</td>
</tr> <td>0.59</td>
<tr> <td>197</td>
<td>Weighted Avg</td> </tr>
<td>0.64</td> <tr>
<td>0.60</td> <td>Weighted Avg</td>
<td>0.61</td> <td>0.64</td>
<td>197&nbsp;</td> <td>0.60</td>
</tr> <td>0.61</td>
</tbody> <td>197&nbsp;</td>
</table> </tr>
</tbody>
</table>
</div>
</div>
</div> </div>
<div class="table"> <div class="col-12 table-container">
<table class="table4"> <div class="table-responsive">
<thead> <div class="table">
<tr> <table class="table4">
<th>Log Regr.</th> <thead>
<th>Precision</th> <tr>
<th>Recall</th> <th>Log Regr.</th>
<th>F1-Score</th> <th>Precision</th>
<th>Support</th> <th>Recall</th>
</tr> <th>F1-Score</th>
</thead> <th>Support</th>
<tbody> </tr>
<tr> </thead>
<td>Calm</td> <tbody>
<td>0.66</td> <tr>
<td>0.49</td> <td>Calm</td>
<td>0.56</td> <td>0.66</td>
<td>47</td> <td>0.49</td>
</tr> <td>0.56</td>
<tr> <td>47</td>
<td>Excited</td> </tr>
<td>0.74</td> <tr>
<td>0.73</td> <td>Excited</td>
<td>0.73</td> <td>0.74</td>
<td>51</td> <td>0.73</td>
</tr> <td>0.73</td>
<tr> <td>51</td>
<td>Happy</td> </tr>
<td>0.46</td> <tr>
<td>0.74</td> <td>Happy</td>
<td>0.57</td> <td>0.46</td>
<td>35</td> <td>0.74</td>
</tr> <td>0.57</td>
<tr> <td>35</td>
<td>Sad</td> </tr>
<td>0.88</td> <tr>
<td>0.77</td> <td>Sad</td>
<td>0.82</td> <td>0.88</td>
<td>64</td> <td>0.77</td>
</tr> <td>0.82</td>
<tr> <td>64</td>
<td>&nbsp;</td> </tr>
<td>&nbsp;</td> <tr>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
</tr> <td>&nbsp;</td>
<tr> <td>&nbsp;</td>
<td>Accuracy</td> </tr>
<td>&nbsp;</td> <tr>
<td>&nbsp;</td> <td>Accuracy</td>
<td>0.69</td> <td>&nbsp;</td>
<td>197</td> <td>&nbsp;</td>
</tr> <td>0.69</td>
<tr> <td>197</td>
<td>Macro Avg</td> </tr>
<td>0.68</td> <tr>
<td>0.68</td> <td>Macro Avg</td>
<td>0.67</td> <td>0.68</td>
<td>197</td> <td>0.68</td>
</tr> <td>0.67</td>
<tr> <td>197</td>
<td>Weighted Avg</td> </tr>
<td>0.72</td> <tr>
<td>0.69</td> <td>Weighted Avg</td>
<td>0.69</td> <td>0.72</td>
<td>197&nbsp;</td> <td>0.69</td>
</tr> <td>0.69</td>
</tbody> <td>197&nbsp;</td>
</table> </tr>
</tbody>
</table>
</div>
</div>
</div> </div>
</div> </div>
<!-- </div> -->
{% endblock %} {% endblock %}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment