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);
 }
 }
 }
}