Add scripts for distillability modelling

heuristics/distillable/index.html

Index: heuristics/distillable/index.html
diff --git a/foo/test.html b/heuristics/distillable/index.html
similarity index 64%
rename from foo/test.html
rename to heuristics/distillable/index.html
index 1163c0cbc00b11742bae8d4b96f55b151ec9366d..a6b9fea11b3510d40f84e93104c059cd280392e3 100644
--- a/foo/test.html
+++ b/heuristics/distillable/index.html
@@ -12,19 +12,19 @@ table, tr, td {
   border: 1px solid black;
 }
 
-tr.error {
+.error {
   background-color: #aaaaaa;
 }
 
-tr.good {
+.good {
   background-color: #aaffaa;
 }
 
-tr.poor {
+.poor {
   background-color: #aaaaff;
 }
 
-tr.bad {
+.bad {
   background-color: #ffaaaa;
 }
 
@@ -38,7 +38,19 @@ tr.active {
 }
 
 #image-holder img {
-  width: 49%;
+  vertical-align: text-top;
+}
+
+#base-img {
+  width: 66%;
+}
+
+#distilled-img {
+  width: 33%;
+}
+
+.hidden {
+  display: none;
 }
 
 #image-holder.error {
@@ -62,6 +74,10 @@ tr.active {
   background-color: #e0e0e0;
 }
 
+#data-viewer {
+  background-color: white;
+}
+
 .content-holder {
   height: 100%;
   background-color: #e0e0e0;
@@ -135,20 +151,28 @@ button {
   </div>
   <div class="content-holder" id="image-viewer" style="width:75%">
     <div class="button-row">
-      <button id="bad" style="width:200px"><font style="color:red">bad</font></button>
-      <button id="good" style="width:200px"><font style="color:green">good</font></button>
-      <button id="poor" style="width:200px"><font style="color:blue">good w/mistakes</font></button>
-      <button id="error" style="width:200px"><font style="">error</font></button>
-      <button id="reset" style="width:200px"><font style="">reset</font></button>
-      <span style="float: right">
+      <button id="bad" class="bad" style="width:200px">Bad <br/>hotkey: -</button>
+      <button id="good" class="good" style="width:200px">Good <br/>hotkey: + or =</button>
+      <button id="poor" class="poor" style="width:200px">Good w/ mistakes <br/>hotkey: / or ]</button>
+      <button id="error" class="error" style="width:200px">Error <br/>hotkey: * or 0</button>
+      <button id="reset" style="width:200px">Reset</button>
+      <div style="float: right">
+        <input type="checkbox" id="auto-advance" checked="true"/>Jump to next unrated item<br>
+        Label stats:
+        <span class="bad"><span id="bad-count"></span> bad</span>,
+        <span class="good"><span id="good-count"></span> good</span>,
+        <span class="poor"><span id="poor-count"></span> poor</span>,
+        <span class="error"><span id="error-count""></span> error</span>
+      </div>
+      <div style="float: right">
         <span class="left-caret"><b></b></span>
-        <span id="position" style="float:left; position:relative; top:12px; width:100px">
+        <span id="position" style="float:left; position:relative; top:12px;">
           <span class="current-position"></span>
           /
           <span class="total-entries"></span>
         </span>
         <span class="right-caret"><b></b></span>
-      </span>
+      </div>
     </div>
 
     <h1><a id="url-holder" target="_blank"></a></h1>
@@ -156,9 +180,13 @@ button {
       <div>
         <img id="base-img"></img>
         <img id="distilled-img"></img>
+        <img id="base-img-next" class="hidden"></img>
+        <img id="distilled-img-next" class="hidden"></img>
+        <img id="base-img-next2" class="hidden"></img>
+        <img id="distilled-img-next2" class="hidden"></img>
       </div>
     </div>
   </div>
 </div>
-<script src="test.js"></script>
+<script src="index.js"></script>
 </html>