Select Git revision
index-glob.html
-
Simon Majorczyk authoredSimon Majorczyk authored
index-glob.html 8.94 KiB
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prédiction de Popularité</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
display: flex;
background-color: #121212;
color: white;
}
/* Sidebar */
.sidebar {
width: 220px;
background-color: #181818;
height: 100vh;
padding-top: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.sidebar img {
width: 120px;
margin-bottom: 20px;
}
.sidebar button {
width: 80%;
padding: 10px;
margin: 10px 0;
border: none;
background: #1DB954;
color: black;
cursor: pointer;
font-size: 16px;
text-align: center;
border-radius: 20px;
}
.sidebar button:hover {
background: #1ed760;
}
.content {
flex-grow: 1;
padding: 20px;
}
.tab-content {
display: none;
}
.active {
display: block;
}
form {
max-width: 600px;
margin: auto;
background: #282828;
padding: 20px;
border-radius: 10px;
}
label {
display: block;
margin-top: 10px;
font-weight: bold;
}
input[type="text"], input[type="number"] {
width: 100%;
padding: 8px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #333;
color: white;
}
button {
margin-top: 20px;
padding: 10px 20px;
background-color: #1DB954;
color: black;
border: none;
border-radius: 20px;
cursor: pointer;
}
button:hover {
background-color: #1ed760;
}
#result {
margin-top: 20px;
font-size: 1.2em;
color: #1DB954;
}
</style>
</head>
<body>
<!-- Sidebar pour naviguer entre les onglets -->
<div class="sidebar">
<img src="https://upload.wikimedia.org/wikipedia/commons/2/26/Spotify_logo_with_text.svg" alt="Spotify Logo">
<button onclick="showTab('tab1')">Prédiction Standard</button>
<button onclick="showTab('tab2')">Prédiction (>0)</button>
</div>
<!-- Contenu principal -->
<div class="content">
<h1>Prédire la Popularité</h1>
<!-- Formulaire 1 : Prédiction Standard -->
<div id="tab1" class="tab-content active">
<form id="predictionForm">
<label for="name">Titre de la chanson :</label>
<input type="text" id="name" name="name" required>
<label for="year">Année (Sous format YYYY):</label>
<input type="number" step="0.0001" id="year" name="year" required>
<label for="acousticness">Acousticness (0 à 1 jusqu'à 4 chiffres après la virgule):</label>
<input type="number" step="0.0001" id="acousticness" name="acousticness" required>
<label for="danceability">Danceability (0 à 1 jusqu'à 4 chiffres après la virgule):</label>
<input type="number" step="0.0001" id="danceability" name="danceability" required>
<label for="energy">Energy (0 à 1 jusqu'à 4 chiffres après la virgule):</label>
<input type="number" step="0.0001" id="energy" name="energy" required>
<label for="explicit">Explicit (0 ou 1 en entier):</label>
<input type="number" id="explicit" name="explicit" required>
<label for="instrumentalness">Instrumentalness (0 à 1 jusqu'à 4 chiffres après la virgule):</label>
<input type="number" step="0.0001" id="instrumentalness" name="instrumentalness" required>
<label for="key">Key (0 à 11 en chiffre entier):</label>
<input type="number" id="key" name="key" required>
<label for="liveness">Liveness (0 à 1 jusqu'à 4 chiffres après la virgule):</label>
<input type="number" step="0.0001" id="liveness" name="liveness" required>
<label for="loudness">Loudness (0 à 1 jusqu'à 4 chiffres après la virgule):</label>
<input type="number" step="0.0001" id="loudness" name="loudness" required>
<label for="mode">Mode (0 ou 1 en entier):</label>
<input type="number" id="mode" name="mode" required>
<label for="speechiness">Speechiness (0 à 1 jusqu'à 4 chiffres après la virgule):</label>
<input type="number" step="0.0001" id="speechiness" name="speechiness" required>
<label for="tempo">Tempo (Sous format d'un nombre décimal jusqu'à 4 chiffres après la virgule):</label>
<input type="number" step="0.0001" id="tempo" name="tempo" required>
<label for="valence">Valence (0 à 1 jusqu'à 4 chiffres après la virgule):</label>
<input type="number" step="0.0001" id="valence" name="valence" required>
<button type="button" onclick="sendPrediction('/predict')">Prédire</button>
</form>
</div>
<!-- Formulaire 2 : Prédiction (>0) -->
<div id="tab2" class="tab-content">
<form id="predictionFormSup0">
<label for="name">Titre de la chanson :</label>
<input type="text" id="name" name="name" required>
<label for="year">Année :</label>
<input type="number" id="year" name="year" required>
<label for="acousticness">Acousticness :</label>
<input type="number" step="0.0001" id="acousticness" name="acousticness" required>
<label for="danceability">Danceability :</label>
<input type="number" step="0.0001" id="danceability" name="danceability" required>
<label for="energy">Energy :</label>
<input type="number" step="0.0001" id="energy" name="energy" required>
<label for="explicit">Explicit (0 ou 1) :</label>
<input type="number" id="explicit" name="explicit" required>
<label for="instrumentalness">Instrumentalness :</label>
<input type="number" step="0.0001" id="instrumentalness" name="instrumentalness" required>
<label for="key">Key :</label>
<input type="number" id="key" name="key" required>
<label for="liveness">Liveness :</label>
<input type="number" step="0.0001" id="liveness" name="liveness" required>
<label for="loudness">Loudness :</label>
<input type="number" step="0.0001" id="loudness" name="loudness" required>
<label for="mode">Mode :</label>
<input type="number" id="mode" name="mode" required>
<label for="speechiness">Speechiness :</label>
<input type="number" step="0.0001" id="speechiness" name="speechiness" required>
<label for="tempo">Tempo :</label>
<input type="number" step="0.0001" id="tempo" name="tempo" required>
<label for="valence">Valence :</label>
<input type="number" step="0.0001" id="valence" name="valence" required>
<button type="button" onclick="sendPrediction('/predict_sup0', 'predictionFormSup0')">Prédire (>0)</button>
</form>
</div>
<div id="result"></div>
</div>
<script>
// Fonction pour afficher un onglet et cacher l'autre
function showTab(tabId) {
document.querySelectorAll('.tab-content').forEach(tab => {
tab.style.display = "none";
});
document.getElementById(tabId).style.display = "block";
}
// Fonction pour envoyer la requête au bon endpoint
async function sendPrediction(endpoint, formId = "predictionForm") {
const form = document.getElementById(formId);
const formData = new FormData(form);
const response = await fetch(endpoint, {
method: "POST",
body: formData
});
const result = await response.json();
document.getElementById("result").innerText = `Prédiction: ${result.predictions}`;
}
// Afficher l'onglet par défaut
showTab('tab1');
</script>
</body>
</html>