Permalink
Browse files

show progress in demo

  • Loading branch information...
1 parent efdcdd0 commit 284efca047229688ab0933e7b0d9f80b80249d04 @harthur committed Jun 7, 2012
View
@@ -25,12 +25,20 @@ Or grab the [browser file](http://github.com/harthur/kittydar/downloads)
Kittydar takes either a fully-loaded `Image` or a `canvas` element. In node you can use the `Image` or `Canvas` element from [node-canvas](https://github.com/LearnBoost/node-canvas).
-Kittydar with give an approximate rectangle around the cat's head. Each rectangle has an `x` and `y` for the top left corner, and a `width` and `height` of the rectangle.
+Kittydar will give an approximate rectangle around the cat's head. Each rectangle has an `x` and `y` for the top left corner, and a `width` and `height` of the rectangle.
Kittydar will miss cats sometimes, and sometimes classify non-cats as cats. It's best at detecting upright cats that are facing forward, but it can handle a small tilt or turn in the head.
+Kittydar isn't fast. This is just a first-pass attempt and will hopefully improve in the future.
+
# How it works
-Kittydar first chops the image up into many "windows" to test for the presences of a cat head. For each window, kittydar first extracts more tractable data from the image's data. Namely, it computes the [Histogram of Orient Gradients](en.wikipedia.org/wiki/Histogram_of_oriented_gradients) descriptor of the image. This data describes the directions of the edges in the image (where the image changes from light to dark and vice versa) and what strength they are. This data is a vector of numbers that is then fed into a [neural network](https://github.com/harthur/brain) which gives a number from `0` to `1` on how likely the histogram data represents a cat.
+Kittydar first chops the image up into many "windows" to test for the presences of a cat head. For each window, kittydar first extracts more tractable data from the image's data. Namely, it computes the [Histogram of Orient Gradients](http://en.wikipedia.org/wiki/Histogram_of_oriented_gradients) descriptor of the image, using the [hog-descriptor](http://github.com/harthur/hog-descriptor) library. This data describes the directions of the edges in the image (where the image changes from light to dark and vice versa) and what strength they are. This data is a vector of numbers that is then fed into a [neural network](https://github.com/harthur/brain) which gives a number from `0` to `1` on how likely the histogram data represents a cat.
The neural network (the JSON of which is located in this repo) has been pre-trained with thousands of photos of cat heads and their histograms, as well as thousands of non-cats. See the repo for the node training scripts.
+
+# Propers
+
+* This informative reasearch paper: [Cat Head Detection - How to Effectively Exploit Shape and Texture Features](http://research.microsoft.com/pubs/80582/ECCV_CAT_PROC.pdf) by Weiwei Zhang, Jian Sun, and Xiaoou Tang
+
+* This sent-from-the-heavens [dataset of cat images](http://137.189.35.203/WebUI/CatDatabase/catData.html) annotated with the locations of the cat heads.
View
@@ -46,6 +46,7 @@ function handleFiles(files) {
detector.abortCurrent();
detector.detectCats();
}
+ $("#progress").text("loading image...");
img.src = e.target.result;
};
@@ -86,6 +87,8 @@ var detector = {
},
detectCats: function() {
+ $("#progress").text("detecting cats...");
+
var canvas = $("#preview").get(0);
if (window.Worker) {
@@ -100,16 +103,30 @@ var detector = {
}
else {
var rects = kittydar.detectCats(canvas, network);
- this.paintRects(rects);
+ this.paintCats(rects);
}
},
- paintRects : function(rects) {
+ paintCats : function(rects) {
+ var noun = rects.length == 1 ? "cat" : "cats";
+ $("#progress").text(rects.length + " " + noun + " detected");
+
+ this.clearRects();
+ this.paintRects(rects, "red");
+ },
+
+ clearRects: function() {
+ var canvas = $("#annotations").get(0);
+ var ctx = canvas.getContext("2d");
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ },
+
+ paintRects : function(rects, color) {
var canvas = $("#annotations").get(0);
var ctx = canvas.getContext("2d");
ctx.lineWidth = 2;
- ctx.strokeStyle = "red";
+ ctx.strokeStyle = color || "red";
for (var i = 0; i < rects.length; i++) {
var rect = rects[i];
@@ -123,7 +140,7 @@ var detector = {
detector.showProgress(data);
}
else if (data.type == 'result') {
- detector.paintRects(data.cats);
+ detector.paintCats(data.cats);
}
},
@@ -132,10 +149,13 @@ var detector = {
},
showProgress : function(progress) {
- console.log(progress.scale);
+ console.log(progress);
+ this.paintRects(progress.rects, "orange");
+ $("#progress").text("detecting in " + progress.size + "px windows...");
+
/*
var completed = progress.iterations / trainer.iterations * 100;
$("#progress-completed").css("width", completed + "%");
*/
}
-}
+}
@@ -1,26 +1,24 @@
importScripts(
- "brain-0.6.0.js",
- "hog-0.4.0.js",
- "network.js",
- "kittydar-browser.js"
+ "bundle.js"
);
onmessage = function(event) {
var resizes = event.data;
var minWindow = 48;
- var cats = [];
-
- var net = new brain.NeuralNetwork().fromJSON(network)
-
- kittydar.setOptions({ network: net });
+ var cats = [];
resizes.forEach(function(resize) {
var detected = kittydar.detectAtFixed(resize.imagedata, resize.scale);
cats = cats.concat(detected);
- postProgress(resize);
+ postProgress({
+ size: resize.size,
+ rects: detected
+ });
});
+ cats = kittydar.combineOverlaps(cats);
+
postMessage({type: 'result', cats: cats});
}
View
@@ -19,13 +19,13 @@ body {
#container {
width: 900px;
- margin: 100px auto 0px auto;
+ margin: 60px auto 0px auto;
text-align: center;
}
#viewer {
position: relative;
- margin: 80px auto;
+ margin: 80px auto 40px auto;
width: 500px;
height: 240px;
border: 4px dashed #ccc;
@@ -61,6 +61,13 @@ body {
left: 0px;
}
+#progress {
+ font-size: 30px;
+ font-weight: bold;
+ text-align: center;
+ color: #aaa;
+}
+
#drawing {
font-family: CatsAlphabet;
font-size: 42px;
View
@@ -4,7 +4,7 @@
<script src="jquery.js"></script>
<script src="demo.js"></script>
- <script src="kittydar-browser.js"></script>
+ <script src="bundle.js"></script>
</head>
<body>
<div id="container">
@@ -18,15 +18,16 @@
</header>
<div id="viewer">
<div id="droparea-text">
- Drag an image here.
+ Drag an image here to find cats.
</div>
<canvas id="preview">
</canvas>
<canvas id="annotations">
</canvas>
</div>
</div>
-
+ <div id="progress">
+ </div>
<div id="drawing" hidden=true>1</div>
</body>
</html>
View
Oops, something went wrong.
@@ -4,7 +4,7 @@ var kittydar = {
detectCats: function(canvas, options) {
this.setOptions(options || {});
- var resizes = this.getAllSizes(canvas, min);
+ var resizes = this.getAllSizes(canvas, this.minWindow);
var cats = [];
resizes.forEach(function(resize) {
@@ -121,4 +121,4 @@ var kittydar = {
0, 0, width, height);
return resizeCanvas;
}
-}
+}
View
@@ -1,24 +1,19 @@
var hog = require("hog-descriptor"),
- hoog = require("hoog"),
utils = require("./utils");
-var defaultParams = require("./hog-params.json");
+var defaultParams = {
+ "cellSize": 4,
+ "blockSize": 2,
+ "blockStride": 1,
+ "bins": 6,
+ "norm": "L2"
+}
var size = 48;
exports.extractFeatures = function(canvas, params) {
canvas = utils.resizeCanvas(canvas, size, size);
var descriptor = hog.extractHOG(canvas, params || defaultParams);
-/*
- var haars = hoog.extractHOOG(canvas, 6, [{
- rect1: {
- channel: 0
- },
- rect2: {
- channel: 0
- }
- }]);
-*/
return descriptor;
}
Oops, something went wrong.

0 comments on commit 284efca

Please sign in to comment.