mary_tts/templates/index.html

<!doctype html>
<html>
<head>
<title>STRANDS Speak Client</title>
<link rel=stylesheet type=text/css href="{{ url_for('static', filename='style.css') }}">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
{% for line in lines %}
    $('#{{ line.id }}').click(function() {
        text_value = $('input[name="{{ line.id }}"]').val();
        $('#status').html('<font color="red">started saying <i>' + text_value+'</i></font>');
        id_value = '{{ line.id }}'
        $.getJSON('speak',{text_value:text_value, id_value:id_value})
        .done(function( json ) {
	        $('#status').html('<font color="green">ready</font>');
  		})
    });
{% endfor %}
	$('#status').html('<font color="green">ready</font>');
});
</script>

<h1>STRANDS Speak client</h1>
<h3>Status:</h3> <div id="status">Status</div>
<h3>Utterances</h3>
<ul>
{% for line in lines %}
  <li>
	<form action="/speak" method="post">
 	<input size="80" value="{{ line.value }}" type="text" name="{{ line.id }}"></input>
 	<input class="speak-button" type="button" id="{{ line.id }}" value="speak" />
	</form><br/>
  </li>
{% endfor %}
</ul>
</body>
</html>