experiments/STT
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix #13; Fix #14; Reporting of WERs by index.htm

Browse Source
This commit is contained in:
Tilman Kamp 2016-10-14 18:32:13 +02:00
parent c8b7cbaa9b
commit b731877368
9 changed files with 300 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

254
index.htm Normal file
View File

@ -0,0 +1,254 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>DeepSpeech reports</title>
<link rel="stylesheet" href="resources/bootstrap.min.css">
<link rel="stylesheet" href="resources/jquery-ui.min.css">
<link rel="stylesheet" href="resources/rickshaw.min.css">
<script src="resources/jquery-3.1.1.min.js"></script>
<script src="resources/jquery-ui.min.js"></script>
<script src="resources/d3.v3.min.js"></script>
<script src="resources/rickshaw.min.js"></script>
<script src="logs/hyper.js"></script>
<style type="text/css">
.rickshaw_legend {
color: black;
background: transparent;
}
.rickshaw_legend .line {
display: inline;
}
</style>
</head>
<body>
<!-- Static navbar -->
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">DeepSpeech</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#overall_wer">Overall WER</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Parameter WER <span class="caret"></span></a>
<ul id="parameter_menu" class="dropdown-menu">
</ul>
</li>
<!-- <li><a href="#contact">Runs</a></li> -->
</ul>
<!-- <ul class="nav navbar-nav navbar-right">
<li><a href="../navbar/">Default</a></li>
<li class="active"><a href="./">Static top <span class="sr-only">(current)</span></a></li>
<li><a href="../navbar-fixed-top/">Fixed top</a></li>
</ul> -->
</div>
</div>
</nav>
<div id="panels" class="container"></div>
<script src="resources/bootstrap.min.js"></script>
<script type="text/javascript">
const createChart = (id, title, fineprint, series, isTimeBased) => {
var panelRoot = $('#panels');
var panel = $('<div/>').attr('id', id); panelRoot.append(panel);
panel.append('<h1>' + title + '</h1>');
panel.append('<p>' + fineprint + '</p>');
var cContainer = $('<div/>'); panel.append(cContainer);
var cChart = $('<div/>'); cContainer.append(cChart);
var cPreview = $('<div/>'); cContainer.append(cPreview);
var cLegend = $('<div/>'); cContainer.append(cLegend);
var graph = new Rickshaw.Graph({
element: cChart[0],
height: 500,
renderer: 'area',
unstack: 'true',
stroke: true,
preserve: true,
max: 105,
series: series
});
graph.render();
var preview = new Rickshaw.Graph.RangeSlider({
graph: graph,
element: cPreview[0]
});
var hoverDetail = new Rickshaw.Graph.HoverDetail({
graph: graph,
xFormatter: function(x) {
if (isTimeBased)
return new Date(x * 1000.0).toString();
else
return x;
}
});
var legend = new Rickshaw.Graph.Legend({
graph: graph,
element: cLegend[0]
});
var shelving = new Rickshaw.Graph.Behavior.Series.Toggle({
graph: graph,
legend: legend
});
var order = new Rickshaw.Graph.Behavior.Series.Order({
graph: graph,
legend: legend
});
var highlighter = new Rickshaw.Graph.Behavior.Series.Highlight({
graph: graph,
legend: legend
});
var ticksTreatment = 'glow';
if (isTimeBased) {
var xAxis = new Rickshaw.Graph.Axis.Time({
graph: graph,
ticksTreatment: ticksTreatment,
timeFixture: new Rickshaw.Fixtures.Time.Local()
});
xAxis.render();
}
var yAxis = new Rickshaw.Graph.Axis.Y({
graph: graph,
tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
ticksTreatment: ticksTreatment
});
yAxis.render();
};
const groupBy = (array, getProperties) => {
var groups = {};
array.forEach(o => {
var group = JSON.stringify(getProperties(o));
(groups[group] = groups[group] || []).push(o);
});
return Object.keys(groups).map(group => groups[group]);
};
var ds = window.ALL_THE_DATA,
i,
reports = {},
overall_test_wer = [],
overall_validation_wer = [],
overall_train_wer = [];
ds.forEach(item => {
var time = item.context.time_started =
new Date(item.context.time_started).getTime() / 1000.0;
item.context.time_finished =
new Date(item.context.time_finished).getTime() / 1000.0;
var test_wer =
100.0 - 100.0 / (1.0 + item.results.test_wer);
var validation_wer =
100.0 - 100.0 / (1.0 + item.results.last_validation_wer);
var train_wer =
100.0 - 100.0 / (1.0 + item.results.last_train_wer);
overall_test_wer .push({ x: time, y: test_wer });
overall_validation_wer .push({ x: time, y: validation_wer });
overall_train_wer .push({ x: time, y: train_wer });
});
const stdtext = 'Lower is better. Please use the legend to turn and and off data series.';
createChart(
'overall_wer',
'DeepSpeech Word Error Rate over time',
stdtext,
[
{ color: 'rgba(100,100,255,0.5)', data: overall_validation_wer, name: 'Train WER' },
{ color: 'rgba(255,100,100,0.5)', data: overall_train_wer, name: 'Validate WER' },
{ color: 'rgba(100,255,100,0.5)', data: overall_test_wer, name: 'Test WER' }
],
true
);
var params = Object.keys(keys = ds[0].parameters);
var parameterGroups = {};
params.forEach(param => {
// We group by the other parameters to find series of values that don't differ by other parameters
var others = params.filter(p => p !== param);
var groups = parameterGroups[param] = groupBy(ds, item => others.map(p => item.parameters[p]));
// Remove single values
groups = groups.filter(g => g.length > 1);
// Produce { x, y } objects with x being unique and y being the validation WER
groups = groups.map(group => {
var o = {};
group.forEach(item => o[item.parameters[param]] = item.results.last_validation_wer);
return {
values: Object.keys(o).map(k => ({ x: k * 1.0, y: o[k] })),
parameters: group[0].parameters,
context: group[0].context
};
});
// Exclude singular values
groups = groups.filter(g => g.values.length > 1);
// If there is more than one group, we produce a chart
if (groups.length > 0) {
var id = 'parameter_' + param;
var title = param.split('_').map(p => p[0].toUpperCase() + p.slice(1)).join(' ');
$('#parameter_menu').append('<li><a href="#' + id + '">' + title + '</a></li>');
var series = [],
cc1 = 150, cc2 = 50;
groups.forEach(group => {
// Color cycling
cc1 = (cc1 + 40) % 255; cc2 = (cc2 + 200) % 255;
series.push({
color: 'rgba(100,' + cc1 + ',' + cc2 + ',0.75)',
data: group.values,
name: 'WER from ' + new Date(group.context.time_finished * 1000.0).toString(),
meta: group.context
});
});
createChart(id, title, stdtext, series, false);
}
});
jQuery(document).ready(function ($) {
$('#tabs').tab();
});
</script>
</body>
</html>

6
resources/bootstrap.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

7
resources/bootstrap.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

5
resources/d3.v3.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

4
resources/jquery-3.1.1.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

7
resources/jquery-ui.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

13
resources/jquery-ui.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
resources/rickshaw.min.css vendored Executable file
View File

File diff suppressed because one or more lines are too long

3
resources/rickshaw.min.js vendored Executable file
View File

File diff suppressed because one or more lines are too long