source/ui/static/script.js

function compose() {

    // Get the value of the select with id selected_midi_program.
    var selected_music_style = document.getElementById("selected_music_style").value;
    var selected_density = document.getElementById("selected_density").value;
    var selected_temperature = document.getElementById("selected_temperature").value;

    var xhr = new XMLHttpRequest();
    xhr.open("POST", "compose", true);
    xhr.setRequestHeader("Content-Type", "application/json");
    xhr.send(JSON.stringify({
        music_style: selected_music_style,
        density: selected_density,
        temperature: selected_temperature
    }));

    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var response = JSON.parse(xhr.responseText);
            console.log(response);

            if (response.status == "OK") {

                // Replace the inner html of the div with id token_sequence with the token sequence.
                document.getElementById("token_sequence").innerHTML = response.tokens;

                // Replace the source of the audio element with id audio..
                var audio = document.getElementById("audio_id");
                audio.src = response.audio;

                // Replace the source of the image element with id image.
                var image = document.getElementById("image_id");
                image.src = response.image;
                
            }
            else {
                alert("Error: " + response.error);
            }
        }
    }
}


function post_command(command_name, command_parameters, reload) {
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "/command", true);
    xhr.setRequestHeader("Content-Type", "application/json");
    xhr.send(JSON.stringify({command_name: command_name, command_parameters: command_parameters}));

    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var response = JSON.parse(xhr.responseText);
            if (response.status == "OK") {

                // Reload the page if requested.
                if (reload) {
                    console.log("Reloading.");
                    load_cells();
                }
                
            }
            else {
                alert("Error: " + response.error);
            }
        }
    }
}