<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bandcamp Dance Librarian</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
        integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <link rel="stylesheet" href="static/css/styles.css">
</head>

<body>


   <div class="homepage-container">

        <h1>Bandcamp Dance Librarian</h1>
        <br>
        <h3>The Dance Librarian's main task is to detect stylistic tendencies in the Bandcamp libraries of</h3>
        <h3>electronic dance music labels and identify the music subgenres associated with these trends (clusters)</h3>
        <br>
        <p></p>
        <br>
        <p class="classifier-text">Select a Bandcamp library/label for clustering and classification according to Beatport's taxonomy composed of 32 subgenres (as of Jan 2021).</p>
        <p class="classifier-text">Select the number of subgenre clusters into which the libraries/labels will be distributed.</p>
        <p class="classifier-text">The default number of clusters is 4, but you can also try out other values. Use 1 cluster for analysing the overall sound of the label/library.</p>
        <p class="classifier-text">Use "Auto" for automatic cluster number recommendation (note: this option will take more time to process).</p>
        
        <form id="inputform" action="/classifier" onsubmit="clickmessage()">
            <label for="labels"><b>Bandcamp library/label:</b></label>
            <select name="labels" id="labels">
                {% for label in labels %}
                <option>{{ label }}</option>
                {% endfor %}
            </select>

            <label for="clusternum"><b>Number of clusters:</b></label>
            <select name="clusternum" id="clusternum">
                <option>Auto</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option selected="selected">4</option>
                <option>5</option>
                <option>6</option>
            </select>
            <br>
            <br>
            <p class="button-container">
            <input type="submit" id="button1" name="submit" value="Submit" class="btn btn-primary btn-lg">
            </p>
        </form>
        
        <p class="description">Note: the K-means clustering algorithm used in this project may give different results every time.</p>
        <p class="description">The classification relies on audio features extracted individually from each label's tracks.</p>                
        <p class="description">You will receive the results in a PDF file with links to up to three representative Bandcamp tracks (if possible, from different artists) in each group.</p>
        <p class="description">The document will also show the tags (folksonomies) added by the artists/labels to the Bandcamp pages, enabling comparison with Beatport's subgenre taxonomy.</p>
        <p class="description">You can add additional libraries to the project on the <a href="/admin" target="_blank">Admin interface</a>.
        <p class="description">For more info please refer to the <a href="https://github.com/bvitos/bandcamp_dance_librarian" target="_blank">Github site of the project</a>.

        <br>

        <p class="warning" id="wrn"></p>
    </div>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
        integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"
        integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s"
        crossorigin="anonymous"></script>
    <script src="static/js/script.js"></script>

</body>
</html>
