Made suggested changes

- Added display name to detection algorithm extensions

- Deprecated config file so that all detection algorithm extensions are self contained

- Optimized fisherYates shuffle

- Small ui tweaks with font

src/index.html

@@ -33,14 +33,14 @@
              <div id = "load-text"><h2>Please <b>Drag in</b> or <b>Click</b> to load a video for tagging.</h2></div>
         </div>
         <div id ='load-form-container' style ="display: none">
-          <h2>Tagging Job Configuration</h2>
+          <h2>Tagging Job Configuration</h2> <hr>
 
           <div class="form-group" id="framerateGroup">
-            <label for="exampleTextarea" title="(How many frames to extract per a second of video!)">Frame Extraction Rate (frames per a video second)</label>
+            <label title="(How many frames to extract per a second of video!)">Frame Extraction Rate (frames per a video second)</label>
             <input id="framerate" type="number" min="1" max="60" value="1" maxlength="3" size="3" class="form-control" style ="max-width: 5em"/>
           </div>
           <div class="form-group">
-            <label for="exampleTextarea" title="(Type of region selector to tag frames)">Region Type</label>
+            <label title="(Type of region selector to tag frames)">Region Type</label>
             <select id="regiontype" class="form-control" id="text" onchange="checkPointRegion();" style ="max-width: 8em">
                   <option selected="selected">Rectangle</option>
                   <!--option>Point</option-->
@@ -50,17 +50,17 @@ <h2>Tagging Job Configuration</h2>
 
           <div class="regionGroup">
             <div class="form-group" id="regionPointGroup" style ="display: none">
-              <label for="exampleTextarea" title="(Region Size for point selector!)">Point Region Size</label>
+              <label title="(Region Size for point selector!)">Point Region Size</label>
               <input class="form-control" type="text" value="25" id="regionsize"/>
             </div>
           </div>
 
           <div class="form-group">
             <label for="Tags"> Labels<div id="required">*</div> (Comma Seperated)</label>
             <input id="inputtags" class="form-control" type="text"  data-role="tagsinput" required/>
-          </div>
+          </div> 
 
-          <div id="loadButton" class="btn btn-primary">Continue</div>
+            <div id="loadButton" class="btn btn-primary">Continue</div>
         </div>
         <div id='video-tagging-container' style="display: none">
             <video-tagging id='video-tagging' ></video-tagging>

src/lib/detection_algorithm_manager/main.js

@@ -1,26 +1,28 @@
 //read from config to find detection algorthims and paths
 const path = require('path');
-const config_path = path.join(__dirname, 'config.json')
-const config = require(config_path);
+const fs = require('fs');
+const detection_algorithms_path = path.join(__dirname,'../detection_algorithms');
+const detection_algorithms_dirs = fs.readdirSync(detection_algorithms_path)
+                                    .filter(file => (fs.statSync(path.join(detection_algorithms_path, file)).isDirectory()));
 
-//load detection modules
-var detection_modules = {}
-Object.keys(config).forEach((key) => {
-    detection_modules[key] =  require(path.join(__dirname, config[key]));
+var detection_modules = {};
+
+detection_algorithms_dirs.forEach((dir) => {
+    var dm = require(path.join(detection_algorithms_path, dir));
+    if (dm.displayName) {
+        detection_modules[dm.displayName] = dm;
+    }
 });
 
 function DetectionAlgorithmManager() {
     var self = this;
     //this returns a list of the availble detection modules
     this.getAvailbleAlgorthims = function getAvailbleAlgorthims() {
-        return Object.keys(config);
+        return Object.keys(detection_modules);
     },
 
     //Set the  exporter to the specified detection module
     this.initExporter = function(algorithm, exportDirPath, classes, posFramesCount, frameWidth, frameHeight, testSplit, cb) {
-         if (!Object.keys(config).includes(algorithm)){
-             throw (`Error ${algorithm} module is not recognized`);
-         }
          var exporter = new detection_modules[algorithm].Exporter(exportDirPath, classes, posFramesCount, frameWidth, frameHeight, testSplit);
          exporter.init().then(()=> {
              return cb(null, exporter.exportFrame);         
@@ -30,9 +32,6 @@ function DetectionAlgorithmManager() {
     },
 
     this.initReviewer = function (algorithm, modelPath, cb) {
-        if (!Object.values(config).includes(algorithm)){
-             throw (`Error ${algorithm} module is not recognized`);
-        }
         var reviewer = new detection_modules[algorithm].Reviewer(modelPath);
         return cb(reviewer.reviewImagesFolder);
     }

src/lib/detection_algorithms/cntkfastrcnn/main.js

@@ -1,2 +1,3 @@
 module.exports.Exporter = require('./exporter.js').Exporter
-module.exports.Reviewer = require('./reviewer.js').Reviewer
+module.exports.Reviewer = require('./reviewer.js').Reviewer
+module.exports.displayName = 'CNTK Fast-RCNN'

src/lib/detection_algorithms/detectionUtils.js

@@ -1,15 +1,18 @@
 //fisherYates http://stackoverflow.com/questions/2380019/generate-unique-random-numbers-between-1-and-100 
 module.exports.generateTestIndecies = function(percent, taggedFramesCount) {
+    var splitSize = Math.ceil(percent * taggedFramesCount),
+        testIndecies = [];
     //range call http://stackoverflow.com/questions/3895478/does-javascript-have-a-method-like-range-to-generate-an-array-based-on-suppl
     taggedFrameIndecies = Array.apply(null, Array(taggedFramesCount)).map(function (_, i) {return i;});
-    for (i = taggedFrameIndecies.length-1; i > 1  ; i--){
-        var r = Math.floor(Math.random()*i);
+    for (i = taggedFrameIndecies.length-1; i > splitSize; i--){
         var t = taggedFrameIndecies[i];
-        taggedFrameIndecies[i] = taggedFrameIndecies[r];
+        var r = Math.floor(Math.random() * i);
+        testIndecies.push(r);
         taggedFrameIndecies[r] = t;
     }
-    return taggedFrameIndecies.slice(0, Math.ceil(percent * taggedFramesCount));
+    return testIndecies;
 }
+
 // http://stackoverflow.com/questions/21194934/node-how-to-create-a-directory-if-doesnt-exist
 module.exports.ensureDirExists = function(path, cb) {
     fs.mkdir(path, 0777, (err) => {

src/lib/detection_algorithms/interface/main.js

@@ -1,2 +1,3 @@
 module.exports.Exporter = require('./exporter.js').Exporter
-module.exports.Reviewer = require('./reviewer.js').Reviewer
+module.exports.Reviewer = require('./reviewer.js').Reviewer
+module.exports.hide = true

src/lib/detection_algorithms/yolo/main.js

@@ -1,2 +1,3 @@
 module.exports.Exporter = require('./exporter.js').Exporter
-module.exports.Reviewer = require('./reviewer.js').Reviewer
+module.exports.Reviewer = require('./reviewer.js').Reviewer
+module.exports.displayName = 'YOLO'

src/public/css/styles.css

@@ -3,6 +3,10 @@ html, body {
     padding: 0;
 }
 
+label {
+    font-size: 16px;
+}
+
 #load-form-container {
     padding: 0 20px;
 }
@@ -38,7 +42,7 @@ html, body {
 }
 
 #vidImage{
-  width:480px;
+  width:400px;
   display:block;
   position:absolute;
   left:0;
@@ -67,6 +71,7 @@ html, body {
 
 .bootstrap-tagsinput {
     display: block;
+    min-height: 34px;
     max-width: 500px;
 }
 
@@ -100,6 +105,11 @@ html, body {
   border-radius: 5px;
   }
 
+  #loadButton {
+      margin-top: 5px;
+
+  }
+
   #loadButton:hover {
   color: #3c3c3c;
   background-color: #a2a5a3;

src/public/js/export-configuration.js

@@ -17,7 +17,7 @@ ipcRenderer.on('configs', (event, configs) => {
 
 function getExportConfiguration() {
     var exportConfig = {
-        exportUntil:   $('#exportTo').val(),
+        exportUntil: $('#exportTo').val(),
         exportPath: $('#output').val(),
         exportFormat: $('#format').val()
     };