Skip to content
This repository has been archived by the owner on Apr 12, 2024. It is now read-only.

Sheng #1

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
131 changes: 131 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
<!DOCTYPE html>
<html>
<head>
<title>Audio Annotator</title>

<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/static/css/materialize.min.css">
<link rel="stylesheet" type="text/css" href="/static/css/audio-annotator.css">

<script type="text/javascript" src="/static/js/lib/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="/static/js/lib/materialize.min.js"></script>
<script type="text/javascript" src="/static/js/lib/wavesurfer.min.js"></script>
<script type="text/javascript" src="/static/js/lib/wavesurfer.spectrogram.min.js"></script>
<script type="text/javascript" src="/static/js/colormap/colormap.min.js"></script>

<script type="text/javascript" src="/static/js/src/message.js"></script>
<script type="text/javascript" src="/static/js/src/wavesurfer.regions.js"></script>
<script type="text/javascript" src="/static/js/src/wavesurfer.drawer.extended.js"></script>
<script type="text/javascript" src="/static/js/src/wavesurfer.labels.js"></script>
<script type="text/javascript" src="/static/js/src/hidden_image.js"></script>
<script type="text/javascript" src="/static/js/src/components.js"></script>
<script type="text/javascript" src="/static/js/src/annotation_stages.js"></script>
<script type="text/javascript" src="/static/js/src/main.js" defer></script>


<style type="text/css">
#waveform region{
border: 1px solid blue;
}
</style>


</head>
<body>
<div style="width:20%;float:left;background: #8e8e8e;color:white;height:1200px;;">

<select id="datasetSelector" onchange="loadDataset(this.value)" style="display:block;color:black;">
<option value="-">-</option>
<option value="dataset1">dataset1</option>
<option value="dataset2">dataset2</option>
</select>


</div>
<div style="width:80%;float:left;">



<div class="row header">
<div id="dataset" style="height: 100px; margin-bottom: 100px;"></div>
</div>
<!-- Modal Structure -->
<div id="waveform" onclick="clear();"></div>
<div class="annotation">
<div class="labels"></div>
<div class="audio_visual"></div>
<div class="play_bar"></div>
<div class="hidden_img"></div>
<div class="creation_stage_container"></div>
<div class="submit_container"></div>
</div>
</div>
<script>
var dataUrl = '/static/json/sample_data.json';
var postUrl = 'http://127.0.0.1:8887/'; // This is where data posts to
var json;
var waves = [];
var loadDataset = function(value){


if (json != null) {
for (var i = 1; i <= json[0].n; i++) {
$("#"+ i).remove();
}
}

if(value == "-") {return;}

$.ajax({
url: '/static/wav/' + value + '/info.json',
type: 'get',
dataType: 'json',
error: function(data){
alert("error")
},
success: function(data){
json = data;



for (var i = 1; i <= json[0].n; i++) {

var div = document.createElement("div");
var width = 100 / json[0].n;
div.style.width = width + "%";
div.style.float = "left";
div.setAttribute("onclick", "loadSound(this.id)")
div.setAttribute('id', i);
waves[i] = WaveSurfer.create({
container: div,
waveColor: 'grey',
progressColor: 'blue',
interact: false,
cursorWidth: 0

});
waves[i].load("/static/wav/" + value + "/" + i + ".wav");

document.getElementById("dataset").appendChild(div);
}
}
});



}
var wavesurferShow = WaveSurfer.create({
container: '#waveform',
waveColor: 'grey',
interact: false
});
wavesurferShow.on('ready', function () {

wavesurferShow.enableDragSelection({});});



</script>
</body>
</html>
4 changes: 3 additions & 1 deletion static/js/src/annotation_stages.js
Original file line number Diff line number Diff line change
Expand Up @@ -214,13 +214,15 @@ StageThreeView.prototype = {
$('.custom_tag input', this.dom).val('');
$('.annotation_tag', this.dom).removeClass('disabled');
$('.proximity_tag', this.dom).removeClass('disabled');


if (region.annotation) {
var selectedTags = $('.annotation_tag', this.dom).filter(function () {
return this.innerHTML === region.annotation;
});
if (selectedTags.length > 0) {
selectedTags.addClass('selected');
selectedTags.addClass('selected');

} else {
$('.custom_tag input', this.dom).val(region.annotation);
}
Expand Down
84 changes: 47 additions & 37 deletions static/js/src/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,9 @@
* magma // color scheme array that maps 0 - 255 to rgb values
*
*/



function Annotator() {
this.wavesurfer;
this.playBar;
Expand Down Expand Up @@ -123,7 +126,7 @@ Annotator.prototype = {
},

// Update the task specific data of the interfaces components
update: function() {
update: function(url) {
var my = this;
var mainUpdate = function(annotationSolutions) {

Expand All @@ -141,43 +144,13 @@ Annotator.prototype = {
alwaysShowTags
);

// set video url
$('#tutorial-video').attr('src', tutorialVideoURL);

// add instructions
var instructionsContainer = $('#instructions-container');
instructionsContainer.empty();
if (typeof instructions !== "undefined"){
$('.modal-trigger').leanModal();
instructions.forEach(function (instruction, index) {
if (index==0) {
// first instruction is the header
var instr = $('<h4>', {
html: instruction
});
} else {
var instr = $('<h6>', {
"class": "instruction",
html: instruction
});
}
instructionsContainer.append(instr);
});
if (!my.instructionsViewed) {
$('#instructions-modal').openModal();
my.instructionsViewed = true;
}
}
else
{
$('#instructions-container').hide();
$('#trigger').hide();
}

// Update the visualization type and the feedback type and load in the new audio clip
my.wavesurfer.params.visualization = my.currentTask.visualization; // invisible, spectrogram, waveform
my.wavesurfer.params.feedback = my.currentTask.feedback; // hiddenImage, silent, notify, none
my.wavesurfer.load(my.currentTask.url);
if (url != undefined){
my.wavesurfer.load(url);
}
};

if (this.currentTask.feedback !== 'none') {
Expand All @@ -199,11 +172,23 @@ Annotator.prototype = {
// Update the interface with the next task's data
loadNextTask: function() {
var my = this;
$.getJSON(dataUrl)
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
var response = JSON.parse(xmlHttp.responseText);
console.log(response.task);
//alert(response.task[0]);
my.currentTask = response.task;
my.update();
}
}
xmlHttp.open("GET", dataUrl, true); // true for asynchronous
xmlHttp.send(null);
/* $.getJSON(dataUrl)
.done(function(data) {
my.currentTask = data.task;
my.update();
});
}); */
},

// Collect data about users annotations and submit it to the backend
Expand Down Expand Up @@ -271,10 +256,35 @@ Annotator.prototype = {

};



var annotator;
function main() {
// Create all the components
var annotator = new Annotator();
annotator = new Annotator();
// Load the first audio annotation task
annotator.loadNextTask();
}
main();


var currentURL;
var loadSound = function(id){

wavesurferShow.empty();
annotator.wavesurfer.empty();
wavesurferShow.clearRegions();
currentURL = "/static/wav/dataset1/" + id + ".wav";
wavesurferShow.load("/static/wav/dataset1/" + id + ".wav");

}
var waveform = document.getElementById("waveform")

waveform.addEventListener('mousedown', function(e) {
wavesurferShow.clearRegions();
});
waveform.addEventListener('mouseup', function(e) {
annotator.update(currentURL);

});

Binary file added static/wav/dataset1/1.wav
Binary file not shown.
Binary file added static/wav/dataset1/10.wav
Binary file not shown.
Binary file added static/wav/dataset1/11.wav
Binary file not shown.
Binary file added static/wav/dataset1/12.wav
Binary file not shown.
Binary file added static/wav/dataset1/2.wav
Binary file not shown.
Binary file added static/wav/dataset1/3.wav
Binary file not shown.
Binary file added static/wav/dataset1/4.wav
Binary file not shown.
Binary file added static/wav/dataset1/5.wav
Binary file not shown.
Binary file added static/wav/dataset1/6.wav
Binary file not shown.
Binary file added static/wav/dataset1/7.wav
Binary file not shown.
Binary file added static/wav/dataset1/8.wav
Binary file not shown.
Binary file added static/wav/dataset1/9.wav
Binary file not shown.
1 change: 1 addition & 0 deletions static/wav/dataset1/groccat.json
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
[{"Id":22,"Name":"15 jours chrono - Prod","Bindings":["*:80:15jours-chronobmw.fr","*:6767:","*:80:bmw-blackfriday.fr","*:80:www.15jours-chronobmw.fr","*:80:www.bmw-blackfriday.fr"],"State":1},{"Id":34,"Name":"Acora Patrimoine","Bindings":["*:80:acorapatrimoine.com","*:80:www.acorapatrimoine.com"],"State":1},{"Id":25,"Name":"Aloha - Prod","Bindings":["*:80:aloha-attitude.fr","*:80:www.aloha-attitude.fr","*:3512:"],"State":1},{"Id":33,"Name":"Arbre en tête - PROD","Bindings":["*:2976:","*:80:arbre.id3i.fr","*:80:larbre-en-tete.com","*:80:www.larbre-en-tete.com"],"State":1},{"Id":27,"Name":"Arkea Capital - Prod (Wordpress)","Bindings":["*:81:localhost","*:80:www.arkea-capital.com","*:80:arkea-capital.com"],"State":1},{"Id":8,"Name":"Brest S\u0027envole","Bindings":["*:80:brestsenvole.fr","*:80:www.brestsenvole.fr"],"State":1},{"Id":48,"Name":"BrestNautic - SiteWeb - PROD","Bindings":["*:80:bnv3.id3i.fr"],"State":1},{"Id":50,"Name":"Culture Foil - Coaching","Bindings":["*:80:coaching.id3i.fr"],"State":1},{"Id":16,"Name":"Culture Foil - Site Vitrine","Bindings":["*:80:culturefoil.com"],"State":1},{"Id":43,"Name":"Damen - Dach - PROD","Bindings":["*:80:dach.id3i.fr"],"State":1},{"Id":1,"Name":"Default Web Site","Bindings":["*:80:"],"State":3},{"Id":2,"Name":"duduh-o","Bindings":["*:80:duduh-o.fr","*:80:www.duduh-o.fr","*:80:duduh-o.com","*:80:www.duduh-o.com"],"State":1},{"Id":46,"Name":"Eau du Ponant - Site Web","Bindings":["*:80:eauduponant.fr","*:80:www.eauduponant.fr","*:443:www.eauduponant.fr","*:443:eauduponant.fr"],"State":1},{"Id":59,"Name":"ECollaboratrice - API - PROD","Bindings":["*:80:ecollaboratrice-api.id3i.fr","*:8043:"],"State":1},{"Id":58,"Name":"ECollaboratrice - Site - PROD","Bindings":["*:80:ecollaboratrice.id3i.fr","*:8064:","*:443:ecollaboratrice.id3i.fr"],"State":1},{"Id":51,"Name":"ECollaboratrice - Site provisoire","Bindings":["*:80:ecollaboratrice.com","*:1337:"],"State":1},{"Id":55,"Name":"ETT - Portail (demo)","Bindings":["*:80:portail-ett.id3i.fr"],"State":1},{"Id":17,"Name":"ETT - Site vitrine (WordPress)","Bindings":["*:80:www.ett.fr","*:80:ett.fr","*:80:www.energie-transfert-thermique.fr","*:80:energie-transfert-thermique.fr"],"State":1},{"Id":20,"Name":"ETT - Toolbox Admin","Bindings":["*:80:toolbox-admin.id3i.fr"],"State":1},{"Id":23,"Name":"Finistair Sailing - Prod","Bindings":["*:80:finistairsailing.fr","*:9999:"],"State":1},{"Id":10,"Name":"FOB - Site vitrine (WordPress)","Bindings":["*:80:fob.id3i.fr","*:80:fobweb.id3i.fr"],"State":1},{"Id":28,"Name":"FOBLOG - Gestion Entrepot","Bindings":["*:80:fobloggs.id3i.fr"],"State":1},{"Id":30,"Name":"FOBLOG - Gestion Entrepot Admin","Bindings":["*:80:fobloggsadmin.id3i.fr"],"State":1},{"Id":7,"Name":"FOBLOG - Site vitrine","Bindings":["*:80:foblog.fr","*:80:www.foblog.fr"],"State":1},{"Id":6,"Name":"FOBLOG - Stock","Bindings":["*:80:stock.foblog.fr"],"State":1},{"Id":54,"Name":"FOBLOG - TechNature","Bindings":["*:1339:","*:80:technature.foblog.fr"],"State":1},{"Id":14,"Name":"Geode - WebApp - Prod","Bindings":["*:80:appli.geode-environnement.com"],"State":1},{"Id":15,"Name":"GoFast - GestionInterventions","Bindings":["*:80:gofast-brest.fr","*:80:www.gofast-brest.fr"],"State":1},{"Id":49,"Name":"iD3i - Flying","Bindings":["*:80:flying.id3i.fr"],"State":1},{"Id":52,"Name":"iD3i - Mantis","Bindings":["*:80:mantis.id3i.fr"],"State":3},{"Id":19,"Name":"iD3i - Monitoring","Bindings":["*:80:groccat.id3i.fr"],"State":1},{"Id":57,"Name":"iD3i - RAM Usage","Bindings":["*:80:groccat-ram.id3i.fr"],"State":1},{"Id":42,"Name":"Jaime - Osmia SiteWeb - PROD","Bindings":["*:80:jaime-store.com"],"State":1},{"Id":41,"Name":"Jaime - Osmia WebService - PROD","Bindings":["*:80:jaime-brest-ws.id3i.fr"],"State":1},{"Id":44,"Name":"Kartell - SiteWeb - Prod","Bindings":["*:80:kartell-boutique.fr","*:80:www.kartell-boutique.fr","*:80:kartellflagbrest.com","*:80:www.kartellflagbrest.com","*:80:kartellflagcaen.com","*:80:www.kartellflagcaen.com","*:80:kartellflaglille.com","*:80:www.kartellflaglille.com","*:80:kartellflagquimper.com","*:80:www.kartellflagquimper.com","*:80:kartellflagnice.com","*:80:www.kartellflagnice.com","*:80:kartellflaglyon.com","*:80:www.kartellflaglyon.com","*:80:kartelldeauville.fr","*:80:www.kartelldeauville.fr","*:80:kartellcaen.fr","*:80:www.kartellcaen.fr","*:80:kartellflagsaintbrieuc.com","*:80:www.kartellflagsaintbrieuc.com","*:80:kartellflagamiens.com","*:80:www.kartellflagamiens.com","*:80:kartellflagrennes.com","*:80:www.kartellflagrennes.com"],"State":1},{"Id":40,"Name":"Kohler - PSC - AdminData","Bindings":["*:80:quicksizeadmindata.id3i.fr","*:9993:"],"State":1},{"Id":36,"Name":"Kohler - PSC - AdminUsers","Bindings":["*:80:powersolution-users.id3i.fr"],"State":1},{"Id":37,"Name":"Kohler - PSC - UpdateDeployer","Bindings":["*:80:quicksize-update-deploy.id3i.fr"],"State":1},{"Id":38,"Name":"Kohler - PSC - WebApi","Bindings":["*:80:quicksize-webapi.id3i.fr"],"State":1},{"Id":39,"Name":"Kohler - PSC - WebService","Bindings":["*:80:quicksize-wcf-new.id3i.fr"],"State":1},{"Id":53,"Name":"Maison et Travaux - Site vitrine","Bindings":["*:1338:","*:80:maisonettravaux.net","*:80:www.maisonettravaux.net"],"State":1},{"Id":5,"Name":"MDL Avocats","Bindings":["*:80:mdlavocats.fr","*:80:www.mdlavocats.fr"],"State":1},{"Id":13,"Name":"Medphone - Site vitrine","Bindings":["*:80:medphoneweb.id3i.fr"],"State":1},{"Id":3,"Name":"MEFP - RH TPE - Outil","Bindings":["*:80:outil.rhtpe.fr"],"State":1},{"Id":18,"Name":"MEFP - RH TPE - Site vitrine","Bindings":["*:80:rhtpe.fr","*:80:www.rhtpe.fr"],"State":1},{"Id":56,"Name":"MEFP - RH TPE - Site vitrine - Cherbourg","Bindings":["*:80:cherbourg.rhtpe.fr","*:80:cotentin.rhtpe.fr"],"State":1},{"Id":31,"Name":"MEFP - Site Vitrine","Bindings":["*:80:mefpbrest.fr","*:5694:"],"State":1},{"Id":9,"Name":"MEFP PLIE - Accueil commun","Bindings":["*:80:emploibrest.fr","*:80:www.emploibrest.fr","*:80:emploibrest.bzh","*:80:www.emploibrest.bzh","*:80:paysdebrest-mefp-plie.fr"],"State":1},{"Id":4,"Name":"Pilotage Brest","Bindings":["*:80:pilotagebrest.com","*:80:www.pilotagebrest.com"],"State":1},{"Id":47,"Name":"Pixiva - PilotageProV2 - PROD","Bindings":["*:80:pro.pilotagepro.fr"],"State":1},{"Id":32,"Name":"PLIE - Site Vitrine","Bindings":["*:80:pliebrest.fr","*:4953:"],"State":1},{"Id":12,"Name":"QuidArt - API","Bindings":["*:80:api.quidart.com"],"State":1},{"Id":11,"Name":"QuidArt - Site Web","Bindings":["*:80:quidart.com","*:80:www.quidart.com"],"State":1},{"Id":29,"Name":"SOFT - SuiviAffaire - PROD","Bindings":["*:80:soft.id3i.fr"],"State":1},{"Id":26,"Name":"SPRD Transouest Site Vitrine - Prod (Joomla)","Bindings":["*:7305:","*:80:www.sprd-dem.com","*:80:sprd-dem.com"],"State":1},{"Id":21,"Name":"Tourduf - Site Vitrine","Bindings":["*:80:tourduf.id3i.fr","*:4356:","*:80:tourdufwindsurf.fr","*:80:www.tourdufwindsurf.fr"],"State":1},{"Id":35,"Name":"TRACES TPi - OLSNA","Bindings":["*:80:olsna.id3i.fr","*:80:www.observatoire-outdoor.com"],"State":1},{"Id":61,"Name":"Wave-Games - PROD","Bindings":["*:80:wavegames.fr","*:80:www.wavegames.fr","*:8054:"],"State":1},{"Id":60,"Name":"WYSIWYG - Site","Bindings":["*:80:wysyg.care","*:443:wysyg.care","*:80:www.wysyg.care"],"State":1},{"Id":45,"Name":"Xavier - Test","Bindings":["*:9337:"],"State":1},{"Id":24,"Name":"Xtrem Gliss Festival - Prod","Bindings":["*:80:xtremglissfestival.fr","*:8076:"],"State":1}]
1 change: 1 addition & 0 deletions static/wav/dataset1/info.json
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
[{"n":12}]
Binary file added static/wav/dataset2/1.wav
Binary file not shown.
Binary file added static/wav/dataset2/2.wav
Binary file not shown.
Binary file added static/wav/dataset2/3.wav
Binary file not shown.
Binary file added static/wav/dataset2/4.wav
Binary file not shown.
Binary file added static/wav/dataset2/5.wav
Binary file not shown.
1 change: 1 addition & 0 deletions static/wav/dataset2/info.json
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
[{"n":5}]