Skip to content
Snippets Groups Projects
Select Git revision
  • 76aea6e66dd12f36cd0ead7fa5aa7d44edeb79a6
  • main default protected
  • dev
3 results

index-glob.html

Blame
  • 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>