Skip to content

Commit

Permalink
Rudi Kershaw - Prettify the html example.
Browse files Browse the repository at this point in the history
  • Loading branch information
@rudikershaw
rudikershaw committed Jun 4, 2016
1 parent 250cd1c commit b85c6d2
Showing 1 changed file with 69 additions and 48 deletions.
117 changes: 69 additions & 48 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,74 +4,95 @@
<title>Which Pet - Naive Bayes Classifier</title>
<script src="whichpet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Noto+Serif:400,400italic,700,700italic" rel="stylesheet" type="text/css" />
<script>
$(document).ready(function(){
// Create the Whichpet object.
var whichpet = new Whichpet();
// Set up inputs to take description and label.
$('#input input[type=button]').click(function(){
// Define details of popup. If classifier guesses right, re-inforce data,
// otherwise ask while label to add description to.
$('#input input[type="button"]').click(function(){
var label = $('#input').find('select option:selected').val();
var description = $('#input').find('input[type=text]').val();
var description = $('#which-pet').find('textarea').val();
whichpet.addData(label, description);
alert('Your description has been added to '+label);
$('div.popup').fadeOut(function(){
$('div.buttons').show();
$('#input').hide();
});
});
// Set up which pet to try and guess animal label.
$('#which-pet input[type=button]').click(function(){
var description = $('#which-pet').find('input[type=text]').val();
alert('Is it a '+whichpet.classify(description)+'?');
$('input[name="yes"]').click(function(){
$('div.popup').fadeOut();
var description = $('#which-pet').find('textarea').val();
whichpet.addData(whichpet.classify(description), description);
});
$('input[name="no"]').click(function(){
$('div.buttons').hide();
$('#input').show();
});
// Set up Whichpet to try and guess animal label.
$('#which-pet input[type="button"]').click(function(){
var description = $('#which-pet').find('textarea').val();
$('div.popup h2').text('Are you describing a '+whichpet.classify(description)+'?');
$('div.popup').fadeIn();
});
// Load labels into data set.
var labels = ["cat","dog","fish","horse","bird","reptile"];
whichpet.addLabels(labels);
// Load JSON training set and input training set into data map.
// Please note - getJSON over local file protocol doesn't work well.
// Note - getJSON over local file protocol doesn't work well.
$.getJSON("training-set.json", function(data) {
for(var i = 0; i < data.pets.length; i++){
whichpet.addData(data.pets[i].label, data.pets[i].description);
}
});
});
</script>
<style>
body { font-family: 'Noto Serif', Helvetica, Arial, sans-serif; background: #222222; position: relative; padding: 0px; margin: 0px;}
h1, h2 { font-weight: normal; }
div.content { padding: 80px; }
select { font-size: 20px; }
div.container { width: 600px; margin: auto; background: white; padding: 20px 10px; text-align: center;}
input[type="button"] { background: #ED5900; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 26px; }
input[type="button"]:hover { background: #222222; cursor: pointer; color: #ED5900; }
textarea { font-size: 18px; resize: none; width: 500px; padding: 5px 4px 5px 10px;}
div.popup { display: none; background: rgba(34,34,34,0.9); position: absolute; width: 100%; height:100%; padding-top: 100px;}
</style>
</head>
<body>

<hr />

<h2>Input</h2>
<p>
Input the type of pet in the label field and your description in the
description field and hit submit to add your description to the map of
learned pet descriptions.
</p>
<form id="input">
<p>
Label:
<select name="label">
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="fish">Fish</option>
<option value="bird">Bird</option>
<option value="reptile">Reptile</option>
</select>
</p>
<p>Description: <input type="text" name="description" maxlength="140" /></p>
<p><input type="button" value="Submit" /></p>
</form>

<hr />

<h2>Try Me</h2>
<p>
Put the description of your pet in the description field and hit the
'Which Pet' button to see which type of pet the description will be
classified as.
</p>
<form id="which-pet">
<p>Description: <input type="text" name="description" maxlength="140" /></p>
<p><input type="button" value="Which Pet" /></p>
</form>

<hr />

<div class="popup">
<div class="container box">
<h2>Are your describing a </h2>
<div class="buttons">
<input type="button" value="Yes" name="yes"/> <input type="button" value="No" name="no"/>
</div>
<form style="display:none" id="input">
<p>
Looks like I guessed wrong. What was it, by the way? <br /><br />
<select name="label">
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="fish">Fish</option>
<option value="horse">Horse</option>
<option value="bird">Bird</option>
<option value="reptile">Reptile</option>
</select>
</p>
<p><input type="button" value="This Pet" /></p>
</form>
</div>
</div>
<div class="content">
<div class="container">
<h1>Which Pet?</h1>
<h2>
Describe your pet in the field below and hit the 'Which Pet' button to see if I can work out which type of pet it is.
</h2>
<form id="which-pet">
<p><textarea name="description" rows="3" maxlength="200" ></textarea></p>
<p><input type="button" value="Which Pet" /></p>
</form>
</div>
</div>
</body>
</html>

0 comments on commit b85c6d2

Please sign in to comment.