Skip to content
This repository has been archived by the owner on Dec 7, 2021. It is now read-only.

Commit

Permalink
Merge pull request #105 from CatalystCode/yolo_ui
Browse files Browse the repository at this point in the history 
Object Detection Modular Support
- Organized Code
- Added modular support for additional object detection algorithms including YOLO
- Added some UI improvements for the home page and tagging job configuration plage
  • Loading branch information
@aribornstein
aribornstein authored Apr 5, 2017
2 parents 20160eb + 1e1ec33 commit f36f744
Show file tree
Hide file tree
Showing 39 changed files with 1,230 additions and 344 deletions.
23 changes: 12 additions & 11 deletions main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,14 +54,15 @@ function createWindow () {

// do this independently for each object
ipcMain.on('show-popup', function(event, arg) {
var popup = new BrowserWindow({
let popup = new BrowserWindow({
parent: mainWindow,
modal: true,
show: false,
frame: false,
autoHideMenuBar : true
});
switch (arg) {

switch (arg.type) {
case "export":
popup.setSize(359, 300);
popup.loadURL(url.format({
Expand All @@ -84,17 +85,19 @@ function createWindow () {
}

popup.once('ready-to-show', () => {
popup.send('configs', arg);
popup.show();
// child.webContents.toggleDevTools();
//popup.webContents.toggleDevTools();
});

ipcMain.on('export-tags', (event, arg) => {
mainWindow.send('export-tags', arg);
});
});

ipcMain.on('review-model', (event, arg) => {
mainWindow.send('review-model', arg);
});
ipcMain.on('export-tags', (event, arg) => {
mainWindow.send('export-tags', arg);
});

ipcMain.on('review-model', (event, arg) => {
mainWindow.send('review-model', arg);
});

mainWindow.on('ready-to-show', function() {
Expand Down Expand Up @@ -205,8 +208,6 @@ if (process.platform === 'darwin') {
const menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);



}

// This method will be called when Electron has finished
Expand Down
8 changes: 4 additions & 4 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,17 +13,17 @@
"Deep-Learning",
"Object-Detection"
],
"readme":"README.md",
"readme": "README.md",
"author": "aribornstein",
"license": "MIT",
"devDependencies": {
"bower": "^1.7.2"
},
"dependencies": {
"electron": "^1.4.1",
"async": "^2.1.5",
"cntk-fastrcnn": "^0.2.2",
"electron": "^1.4.1",
"electron-window-state": "^4.0.2",
"remote": "^0.2.6",
"rimraf": "^2.6.1"
"remote": "^0.2.6"
}
}
6 changes: 3 additions & 3 deletions src/bower_components/video-tagging/video-tagging.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -629,7 +629,7 @@
//reset tag buttons to not selected
this.optionalTags.resetSelected();
//hide region number
self.regionLabelDiv.style.display = "none";
this.regionLabelDiv.style.display = "none";
//Clears the empty frame icon
this.indicateEmptyFrame(false);
},
Expand Down Expand Up @@ -741,8 +741,8 @@
if(fireEvents)$('#video-tagging').trigger('stepFwdClicked-BeforeStep');
//if there are no unlabled tags move to next frame

this.video.currentTime += this.frameTime;
this.playingCallback();
this.video.currentTime += this.frameTime;
this.playingCallback();

//raise after next frame
if(fireEvents)$('#video-tagging').trigger('stepFwdClicked-AfterStep');
Expand Down
35 changes: 17 additions & 18 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,11 @@
<script src="./bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="./bower_components/video-tagging/video-tagging.html">

<script src="./public/js/bootstrap.min.js"></script>
<script src="./bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="./public/js/bootstrap-tagsinput.min.js"></script>
<script src="./public/js/videotagging-ctnk-extension.js"></script>
<script src="./public/js/camshift.js"></script>
<script src="./public/js/scene-change-detector.js"></script>
<script src="./public/js/videotagging-tracking-extension.js"></script>
<script src="./lib/tracking_algorithms/camshift/camshift.js"></script>
<script src="./lib/tracking_algorithms/camshift/scene-change-detector.js"></script>
<script src="./lib/tracking_algorithms/videotagging-tracking-extension.js"></script>

<script src="./index.js"></script>

Expand All @@ -28,21 +27,21 @@
</head>
<body>
<div id="container">

<div id ='load-message' onclick="fileSelected();">
<div id = "load-text"><h2>Please <b>Drag in</b> or <b>Click</b> to load a video for tagging.</h2></div>
<img id="vidImage" src ="./public/images/Wikiversity-Mooc-Icon-Video.svg.png" ></img>
<div id ='load-message' onclick="fileSelected();">
<img id="vidImage" src ="./public/images/Load-Video.png" ></img>
<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>
<input id="framerate" type="number" min="1" max="60" value="1" maxlength="3" size="3" class="form-control" />
<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>
<select id="regiontype" class="form-control" id="text" onchange="checkPointRegion();">
<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-->
<option>Square</option>
Expand All @@ -51,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* (Comma Seperated)</label>
<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>
Expand Down
107 changes: 56 additions & 51 deletions src/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,25 @@
const remote = require('electron').remote;
const basepath = remote.app.getAppPath();
const dialog = remote.require('electron').dialog;
const pathJS = require('path');
const path = require('path');
const fs = require('fs');
const rimraf = require('rimraf');
const cntkModel= require('cntk-fastrcnn');
const cntkConfig = require(`${basepath}/cntk-config.json`);
const DetectionExtension = require('./lib/videotagging_extensions').Detection;
const ipcRenderer = require('electron').ipcRenderer;
const testSetSize = .20;
var trackingEnabled = true;
var visitedFrames, //keep track of the visited frames
videotagging,
CNTKExtension,
trackingExtension;
detection,
trackingExtension,
assetFolder;

$(document).ready(() => {//init confirm keys figure out why this doesn't work
$('#inputtags').tagsinput({confirmKeys: [13, 32, 44, 45, 46, 59, 188]});

// hover support
$('#load-message').hover(() => {$("#vidImage").attr('src', './public/images/Load-Video-Active.png')},
() => {$("#vidImage").attr('src', './public/images/Load-Video.png')});

});

//ipc rendering
Expand All @@ -31,56 +35,44 @@ ipcRenderer.on('saveVideo', (event, message) => {
});

ipcRenderer.on('export', (event, message) => {
ipcRenderer.send('show-popup', 'export');
var args = {
type : "export",
supportedFormats : detection.detectionAlgorithmManager.getAvailbleAlgorthims(),
assetFolder : assetFolder
};

ipcRenderer.send('show-popup', args);
});

ipcRenderer.on('export-tags', (event, exportConfig) => {
//add logic for supporting alternate export methods besides cntk

//init cntk extensions
CNTKExtension = new VideoTaggingCNTKExtension({
videotagging: videotagging,
cntkPath: cntkConfig.cntkPath,
visitedFrames: visitedFrames,
exportUntil: exportConfig.exportUntil,
exportPath: exportConfig.exportPath
});

addLoader();
CNTKExtension.exportCNTK(testSetSize, () => {
detection.export(exportConfig.exportFormat, exportConfig.exportUntil, exportConfig.exportPath, testSetSize, () => {
videotagging.video.oncanplay = updateVisitedFrames;
$(".loader").remove();
});
});

ipcRenderer.on('review', (event, message) => {
ipcRenderer.send('show-popup', 'review');
var args = {
type: 'review',
supportedFormats : detection.detectionAlgorithmManager.getAvailbleAlgorthims(),
assetFolder : assetFolder
};
ipcRenderer.send('show-popup', args);
});

ipcRenderer.on('review-model', (event, reviewModelConfig) => {
//add logic for supporting alternate review model methods besides cntk

//init cntk extensions
CNTKExtension = new VideoTaggingCNTKExtension({
videotagging: videotagging,
cntkPath: cntkConfig.cntkPath,
visitedFrames: visitedFrames,
exportPath: reviewModelConfig.exportPath
});

if (fs.existsSync(cntkConfig.cntkPath)) {
var modelLocation = reviewModelConfig.modelPath;
if (fs.existsSync(modelLocation)) {
addLoader();
CNTKExtension.reviewCNTK(modelLocation, () => {
$(".loader").remove();
});
} else {
alert(`No model found! Please make sure you put your model in the following directory: ${modelLocation}`)
}

var modelLocation = reviewModelConfig.modelPath;
if (fs.existsSync(modelLocation)) {
addLoader();
detection.review( reviewModelConfig.modelFormat, modelLocation, reviewModelConfig.output, () => {
$(".loader").remove();
videotagging.video.oncanplay = updateVisitedFrames;
});
} else {
alert("This feature isn't supported by your system please check your CNTK configuration and try again later.");
alert(`No model found! Please make sure you put your model in the following directory: ${modelLocation}`)
}

});

ipcRenderer.on('toggleTracking', (event, message) => {
Expand All @@ -100,17 +92,26 @@ document.addEventListener('drop', (e) => {
if (e.dataTransfer.files[0].type == "video/mp4") {
fileSelected(e.dataTransfer.files[0]);
}
$("#vidImage").attr('src', './public/images/Load-Video.png');
return false;
});

document.addEventListener('dragover', (e) => {
e.preventDefault();
if (e.dataTransfer.files[0].type == "video/mp4") {
e.dataTransfer.dropEffect = "copy";
$("#vidImage").attr('src', './public/images/Load-Video-Active.png');

}
e.stopPropagation();
});

document.addEventListener('dragleave', (e) => {
e.preventDefault();
$("#vidImage").attr('src', './public/images/Load-Video.png');
e.stopPropagation();
});

document.addEventListener('dragstart', (e) => {
e.preventDefault();
let file = e.dataTransfer.files[0];
Expand Down Expand Up @@ -148,11 +149,11 @@ function checkPointRegion() {
}

//load logic
function fileSelected(path) {
function fileSelected(filepath) {
$('#load-message').hide();

if (path) { //checking if a video is dropped
let pathName = path.path;
if (filepath) { //checking if a video is dropped
let pathName = filepath.path;
openPath(pathName);
} else { // showing system open dialog
dialog.showOpenDialog({
Expand All @@ -166,7 +167,6 @@ function fileSelected(path) {
}

function openPath(pathName) {
var config;

// show configuration
$('#load-message').hide();
Expand All @@ -175,10 +175,12 @@ function fileSelected(path) {
$('#framerateGroup').show();

//set title indicator
$('title').text(`Video Tagging Job Configuration: ${pathJS.basename(pathName, pathJS.extname(pathName))}`);
$('title').text(`Video Tagging Job Configuration: ${path.basename(pathName, path.extname(pathName))}`);
$('#inputtags').tagsinput('removeAll');//remove all previous tag labels
$('#model').val(`${basepath}/cntk/Fast-RCNN.model`);

assetFolder = path.join(path.dirname(pathName), `${path.basename(pathName, path.extname(pathName))}_output`);

var config;
try {
config = require(`${pathName}.json`);
//restore tags
Expand All @@ -190,13 +192,14 @@ function fileSelected(path) {
console.log(`Error loading save file ${e.message}`);
}


document.getElementById('loadButton').onclick = loadTagger;

function loadTagger (e) {
if(framerate.validity.valid && inputtags.validity.valid) {
$('.bootstrap-tagsinput').last().removeClass( "invalid" );

$('title').text(`Video Tagging Job: ${pathJS.basename(pathName, pathJS.extname(pathName))}`); //set title indicator
$('title').text(`Video Tagging Job: ${path.basename(pathName, path.extname(pathName))}`); //set title indicator

videotagging = document.getElementById('video-tagging'); //find out why jquery doesn't play nice with polymer
videotagging.regiontype = $('#regiontype').val();
Expand Down Expand Up @@ -224,8 +227,7 @@ function fileSelected(path) {
}

//track visited frames
videotagging.video.removeEventListener("canplay", updateVisitedFrames); //remove old listener
videotagging.video.addEventListener("canplay",updateVisitedFrames);
videotagging.video.oncanplay = updateVisitedFrames; //remove old listener

//init region tracking
trackingExtension = new VideoTaggingTrackingExtension({
Expand All @@ -235,6 +237,9 @@ function fileSelected(path) {
});
trackingExtension.startTracking();

//init detection
detection = new DetectionExtension(videotagging, visitedFrames);

$('#load-form-container').hide();
$('#video-tagging-container').show();

Expand Down
Loading

0 comments on commit f36f744

Please sign in to comment.