Difference between original avg and rec song
energy: ${denergy}, valence: ${dvalence}
`;
detailDiv.insertAdjacentHTML('beforeend', html);
},
resetRecDetail() {
this.inputField().recDetail.innerHTML = '';
},
resetRecs() {
this.inputField().recs.innerHTML = '';
this.inputField().recDownload.innerHTML = '';
}
}
})();
const APPController = (function(UICtrl) {
const DOMInputs = UICtrl.inputField();
var deltaFeatures = {
energy: 0.15,
valence: 0.15
}
const songData1 = {
name: '',
id: '',
artist: '',
origFeatures: {},
adjustFeatures: {},
confirm: false
}
DOMInputs.login.addEventListener('click', async (event) => {
event.preventDefault();
console.log("tryna log rn");
window.location.href = "/login";
})
//function(string, string): data
async function checkSongArtist(songInput, artistInput) {
var response = await fetch('/api/checkSongArtist', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
song: songInput,
artist: artistInput
})
})
return response.json();
}
//button check valid song and artist
DOMInputs.check.addEventListener('click', async (event) => {
event.preventDefault();
const songInput = UICtrl.inputField(1).song.value;
const artistInput = UICtrl.inputField(1).artist.value;
const data = await checkSongArtist(songInput, artistInput);
songData1.name = data.tracks.items[0].name;
songData1.id = data.tracks.items[0].id;
songData1.artist = data.tracks.items[0].artists[0].name;
const userConfirmed = confirm(`Your song is ${songData1.name} by ${songData1.artist}}. Do you want to proceed?`);
if (userConfirmed) {
songData1.confirm = true;
}
})
//upload file ("returns" responseData in object type)
DOMInputs.formUpload.addEventListener('click', async(e) => {
e.preventDefault();
const formData = new FormData();
formData.append('fileInput', UICtrl.inputField(1).file.files[0]);
try {
const response = await fetch('/upload', {
method: 'POST',
body: formData
});
if (!response.ok) throw new Error('File upload failed.');
const responseData = await response.json();
const data = await checkSongArtist(responseData.data[0].name, responseData.data[0].artist);
songData1.name = data.tracks.items[0].name;
songData1.id = data.tracks.items[0].id;
songData1.artist = data.tracks.items[0].artists[0].name;
const userConfirmed = confirm(`Your song is ${songDat
[truncated — 4168 more characters]
```
### spotifeels/backend/server.js
```javascript
const express = require('express');
const multer = require('multer');
const fs = require('fs');
const querystring = require('querystring');
var request = require('request');
const Papa = require('papaparse');
//const Excel = require('excel.js');
const { type } = require('os');
const app = express();
app.use(express.json());
const port = 8000;
const path = require('path');
const storage = multer.diskStorage({
destination: (req, file, cb) => {
cb(null, './uploads/');
},
filename: (req, file, cb) => {
cb(null, Date.now() + '-' + file.originalname);
}
})
app.post('/api/endpoint1', (req, res) => {
const data = 0.632;
res.json({result: data});
});
app.use(express.static(path.join(__dirname, '../frontend')));
app.listen(port, () => {
console.log(`Server is running on http://localhost:${port}`)
});
const upload = multer({ storage: storage});
app.post('/upload', upload.single('fileInput'), (req, res) => {
if (!req.file) {
return res.json({success: false, message: 'No file uploaded. '});
}
csvFilePath = req.file.path;
// Convert CSV to JSON using papaparse
const csvFile = fs.readFileSync(csvFilePath, 'utf8');
Papa.parse(csvFile, {
header: true,
skipEmptyLines: true,
complete: (results) => {
const formattedData = results.data.map(row => ({
name: row.song,
artist: row.artist,
energy: row.energy,
valence: row.valence
}));
// Remember to delete the file after processing to save storage space
fs.unlinkSync(csvFilePath);
res.json({ success: true, message: 'File processed!', data: formattedData });
}
});
});
var token;
const clientID = 'e6f9d062524b4bbc91e48d1f62f5bee7';
const clientSecret = 'aa0701813c2044e8a208361f2b6eb12b';
var redirect_uri = 'http://localhost:8000/callback';
function generateRandomString(length) {
const possibleChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
let randomString = '';
for (let i = 0; i < length; i++) {
randomString += possibleChars.charAt(Math.floor(Math.random() * possibleChars.length));
}
return randomString;
}
app.get('/login', function(req, res) {
var state = generateRandomString(16);
var scope = 'user-read-private user-read-email';
console.log("i am in /login");
res.redirect('https://accounts.spotify.com/authorize?' +
querystring.stringify({
response_type: 'code',
client_id: clientID,
scope: scope,
redirect_uri: redirect_uri,
state: state
})
);
});
app.get('/callback', function(req, res) {
console.log("calling back");
var code = req.query.code || null;
var state = req.query.state || null;
if (state === null) {
res.redirect('/#' +
querystring.stringify({
error: 'state_mismatch'
})
);
} else {
console.log("starting some authOption shit");
var authOptions = {
url: 'https://accounts.spotify.com/api/token',
form: {
code: code,
redirect_uri: redirect_uri,
grant_type: 'authorization_code'
},
headers: {
'Authorization': 'Basic ' + (new Buffer.from(clientID + ':' + clientSecret).toString('base64'))
},
json: true
};
console.log("done setting up auth");
request.post(authOptions, function(error, response, body) {
if (!error && response.statusCode === 200) {
var access_token = body.access_token;
token = access_token;
console.log(token);
var refresh_token = body.refresh_token;
var options = {
url: 'https://api.spotify.com/v1/me',
headers: { 'Authorization': 'Bearer ' + access_token },
json: true
};
// use the access token to access the Spotify Web API
request.get(options, function(error, response, body) {
console.log(body);
res.redirect('/');
}) ;
/*
// we can also pass the token to the browser to make requests from there
res.redirect('/#' +
querystring.stringify({
access_token: access_token,
refresh_token: refresh_token
}));
*/
} else {
res.redirect('/#' +
querystring.stringify({
error: 'invalid_token'
}));
}
});
console.log("got thru everything");
}
});
const getToken = async () => {
const result = await fetch(`https://accounts.spotify.com/api/token`, {
method: 'POST',
headers: {
'Content-Type' : 'application/x-www-form-urlencoded',
'Authorization' : 'Basic ' + btoa(clientID + ':' + clientSecret)
},
body: 'grant_type=client_credentials'
});
const data = await result.json();
return data.access_token;
}
app.get('/api/getToken', async (req, res) => {
const token = await getToken();
res.json(token)
})
app.post('/humepoint', (req, res) => {
res.json({ message: 'Hello from project!' });
});
const checkSongArtist = async(token, song, artist) => {
console.log("in check song artist");
console.log("token: ");
console.log(token);
const result = await fetch(`https://api.spotify.com/v1/search?q=track:${song}%20artist:${artist}&type=track&limit=1`, {
method: 'GET',
headers: {'Authorization' : `Bearer ${token}`}
});
const data = aw
[truncated — 5809 more characters]
```
### spotifeels/frontend/styles.css
```css
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: #333
}
p {
color: #666
}
button {
background-color: #0099ff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.btn.dropdown-toggle {
width:150px;
text-align:left;
}
span.caret {
position: absolute;
left: 90%;
top: 45%;
}
label {
padding-top:5px;
}
.form-label {
padding-left:0px !important;
}
img {
width:140px;
height:140px;
}
.btn-success {
background-color: #3b7d4a!important;
}
.btn-success:hover {
background-color: #4daf64!important;
}
img.track {
border: 1px solid #8a8a8a;
}
```
### spotifeels/frontend/index.html
```html