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

Created machine-learning html page, with corresponding style changes in the styles.css

parent 69d4d898
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
predict_Mood.py
+ 1
− 1
View file @ 22432f63
...@@ -130,5 +130,5 @@ def predict_mood(playlist_uri, pl_name): ...@@ -130,5 +130,5 @@ def predict_mood(playlist_uri, pl_name):
#predict_mood('spotify:playlist:37i9dQZF1DWVRSukIED0e9', '2019') #predict_mood('spotify:playlist:37i9dQZF1DWVRSukIED0e9', '2019')
#predict_mood('spotify:playlist:2fmTTbBkXi8pewbUvG3CeZ', '2020') #predict_mood('spotify:playlist:2fmTTbBkXi8pewbUvG3CeZ', '2020')
#predict_mood('spotify:playlist:5GhQiRkGuqzpWZSE7OU4Se', '2021') #predict_mood('spotify:playlist:5GhQiRkGuqzpWZSE7OU4Se', '2021')
predict_mood('spotify:playlist:56r5qRUv3jSxADdmBkhcz7', '2022') #predict_mood('spotify:playlist:56r5qRUv3jSxADdmBkhcz7', '2022')
static/style.css
+ 87
− 1
View file @ 22432f63
...@@ -37,13 +37,14 @@ body { ...@@ -37,13 +37,14 @@ body {
} }
.container { .container {
padding-top: 50px; padding-top: 20px;
color: #ffffff; color: #ffffff;
} }
#intro { #intro {
text-align: center; text-align: center;
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
margin-top: 30px;
} }
.col-12 { .col-12 {
...@@ -186,4 +187,89 @@ hr.gradient { ...@@ -186,4 +187,89 @@ hr.gradient {
font-size: 20px; font-size: 20px;
padding-top: 15%; padding-top: 15%;
text-align: right; text-align: right;
}
/* ------------------------------------------------------------ */
/* machinelearning.html page */
.subheading {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
padding-bottom: 10px;
}
.description {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
.confusion-matrix {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 4px;
margin-top: 25px;
margin-bottom: 25px;
}
.confusion-matrix-image {
width: 24%;
height: auto;
transition:transform 0.25s ease;
border: 2px solid #1db954;
border-radius: 2px;
}
.confusion-matrix > img:hover {
transform: scale(1.6);
}
.accuracy-chart {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 25px;
}
.accuracy-chart-image {
width: 50%;
height: auto;
transition:transform 0.25s ease;
border: 2px solid #1db954;
border-radius: 2px;
}
.accuracy-chart > img:hover {
transform: scale(1.6);
}
.table {
width: 25%;
height: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
margin-top: 25px;
margin-bottom: 5%;
}
.table1, .table2, .table3, .table4 {
background-color: #EEEEEE;
color: #000000;
}
.table th, .table td:first-child {
background-color: #1DB954;
}
.table td, .table th {
padding: 5px;
}
.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;
} }
\ No newline at end of file
templates/index.html
+ 1
− 1
View file @ 22432f63
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
{% block content %} {% block content %}
<p id="intro">Welcome to the website of my dissertation project. This project aims to predict the moods of songs in a Spotify playlist by using both Spotify's track audio features and sentiment analysis of song lyrics, and feeding this data into a machine learning model. <p id="intro">Welcome to the website of my dissertation project. This project aims to predict the moods of songs in a Spotify playlist by using both Spotify's track audio features and sentiment analysis of song lyrics, and feeding this data into a machine learning model.
<br><br> <br><br>
For my project, it will be used to analyse the Top Songs of 2019 - 2022 to look at the listening habits of people during the COVID-19 pandemic, and how they may have been affected. Here you will be able to see the results of my analysis - for example, the most common moods, how useful sentiment analysis of lyrics is in mood prediction, and my justification of choice in machine learning model. A logistic regression model was used to predict the moods - all charts shown are therefore based on this model. For my project, it will be used to analyse the Top Songs of 2019 - 2022 to look at the listening habits of people during the COVID-19 pandemic, and how they may have been affected. Here you will be able to see the results of my analysis - for example, the most common moods - how useful sentiment analysis of lyrics is in mood prediction, and my justification of choice in machine learning model. A logistic regression model was used to predict the moods - all charts shown are therefore based on this model.
</p> </p>
<div class="button-container"> <div class="button-container">
......
templates/machinelearning.html
+ 304
− 1
View file @ 22432f63
{% extends 'base.html' %} {% extends 'base.html' %}
{% block title %} Choosing a machine learning model {% endblock %} {% block title %} Choosing a machine learning model {% endblock %}
{% block content %} {% block content %}
<p>Machine learning models page</p> <div class="subheading">Choosing a Machine Learning Model</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 scores.</div>
<div class="confusion-matrix">
<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/dtree_confusion_matrix.png') }}" alt="Decision Tree Confusion Matrix" class="confusion-matrix-image">
<img src="{{ url_for('static', filename='images/lr_confusion_matrix.png') }}" alt="Logistic Regression Confusion Matrix" class="confusion-matrix-image">
</div>
<div class="accuracy-chart">
<img src="{{ url_for('static', filename='images/models_accuracy.png') }}" alt="Accuracy of Each Model" class="accuracy-chart-image">
</div>
<div class="description">In these 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 how many correctly classified instances there are 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">
<table class="table1">
<thead>
<tr>
<th>Gaussian NB</th>
<th>Precision</th>
<th>Recall</th>
<th>F1-Score</th>
<th>Support</th>
</tr>
</thead>
<tbody>
<tr>
<td>Calm</td>
<td>0.48</td>
<td>0.68</td>
<td>0.57</td>
<td>47</td>
</tr>
<tr>
<td>Excited</td>
<td>0.76</td>
<td>0.69</td>
<td>0.72</td>
<td>51</td>
</tr>
<tr>
<td>Happy</td>
<td>0.49</td>
<td>0.63</td>
<td>0.55</td>
<td>35</td>
</tr>
<tr>
<td>Sad</td>
<td>0.95</td>
<td>0.59</td>
<td>0.73</td>
<td>64</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Accuracy</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>0.64</td>
<td>197</td>
</tr>
<tr>
<td>Macro Avg</td>
<td>0.67</td>
<td>0.65</td>
<td>0.64</td>
<td>197</td>
</tr>
<tr>
<td>Weighted Avg</td>
<td>0.71</td>
<td>0.64</td>
<td>0.66</td>
<td>197&nbsp;</td>
</tr>
</tbody>
</table>
</div>
<div class="table">
<table class="table2">
<thead>
<tr>
<th>SVC</th>
<th>Precision</th>
<th>Recall</th>
<th>F1-Score</th>
<th>Support</th>
</tr>
</thead>
<tbody>
<tr>
<td>Calm</td>
<td>0.57</td>
<td>0.53</td>
<td>0.55</td>
<td>47</td>
</tr>
<tr>
<td>Excited</td>
<td>0.73</td>
<td>0.65</td>
<td>0.69</td>
<td>51</td>
</tr>
<tr>
<td>Happy</td>
<td>0.46</td>
<td>0.74</td>
<td>0.57</td>
<td>35</td>
</tr>
<tr>
<td>Sad</td>
<td>0.88</td>
<td>0.72</td>
<td>0.79</td>
<td>64</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Accuracy</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>0.66</td>
<td>197</td>
</tr>
<tr>
<td>Macro Avg</td>
<td>0.66</td>
<td>0.66</td>
<td>0.65</td>
<td>197</td>
</tr>
<tr>
<td>Weighted Avg</td>
<td>0.70</td>
<td>0.66</td>
<td>0.67</td>
<td>197&nbsp;</td>
</tr>
</tbody>
</table>
</div>
<div class="table">
<table class="table3">
<thead>
<tr>
<th>Decision Tree</th>
<th>Precision</th>
<th>Recall</th>
<th>F1-Score</th>
<th>Support</th>
</tr>
</thead>
<tbody>
<tr>
<td>Calm</td>
<td>0.50</td>
<td>0.60</td>
<td>0.54</td>
<td>47</td>
</tr>
<tr>
<td>Excited</td>
<td>0.64</td>
<td>0.55</td>
<td>0.59</td>
<td>51</td>
</tr>
<tr>
<td>Happy</td>
<td>0.40</td>
<td>0.54</td>
<td>0.46</td>
<td>35</td>
</tr>
<tr>
<td>Sad</td>
<td>0.88</td>
<td>0.67</td>
<td>0.76</td>
<td>64</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Accuracy</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>0.60</td>
<td>197</td>
</tr>
<tr>
<td>Macro Avg</td>
<td>0.60</td>
<td>0.59</td>
<td>0.59</td>
<td>197</td>
</tr>
<tr>
<td>Weighted Avg</td>
<td>0.64</td>
<td>0.60</td>
<td>0.61</td>
<td>197&nbsp;</td>
</tr>
</tbody>
</table>
</div>
<div class="table">
<table class="table4">
<thead>
<tr>
<th>Log Regr.</th>
<th>Precision</th>
<th>Recall</th>
<th>F1-Score</th>
<th>Support</th>
</tr>
</thead>
<tbody>
<tr>
<td>Calm</td>
<td>0.66</td>
<td>0.49</td>
<td>0.56</td>
<td>47</td>
</tr>
<tr>
<td>Excited</td>
<td>0.74</td>
<td>0.73</td>
<td>0.73</td>
<td>51</td>
</tr>
<tr>
<td>Happy</td>
<td>0.46</td>
<td>0.74</td>
<td>0.57</td>
<td>35</td>
</tr>
<tr>
<td>Sad</td>
<td>0.88</td>
<td>0.77</td>
<td>0.82</td>
<td>64</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Accuracy</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>0.69</td>
<td>197</td>
</tr>
<tr>
<td>Macro Avg</td>
<td>0.68</td>
<td>0.68</td>
<td>0.67</td>
<td>197</td>
</tr>
<tr>
<td>Weighted Avg</td>
<td>0.72</td>
<td>0.69</td>
<td>0.69</td>
<td>197&nbsp;</td>
</tr>
</tbody>
</table>
</div>
{% endblock %} {% endblock %}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment