added one more demo

cazala · Mar 23, 2015 · e7fc9a8 · e7fc9a8
1 parent e459efa
commit e7fc9a8
Show file tree

Hide file tree

Showing 4 changed files with 173 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -52,6 +52,7 @@
                   <li><a href="#/dsr">Discrete Sequence Recall</a></li>
                   <li><a href="#/image-filters">Learn Image Filters</a></li>
                   <li><a href="#/paint-an-image">Paint An Image</a></li>
+                  <li><a href="#/self-organizing-map">Self Organizing Map</a></li>
                   <li><a href="#/wikipedia">Read From Wikipedia</a></li>
                 </ul>
               </li>
@@ -116,6 +117,7 @@
         <script src="scripts/controllers/dsr.js"></script>
         <script src="scripts/controllers/image-filters.js"></script>
         <script src="scripts/controllers/paint-an-image.js"></script>
+        <script src="scripts/controllers/self-organizing-map.js"></script>
         <!-- endbuild -->
 </body>
 </html>
diff --git a/scripts/app.js b/scripts/app.js
@@ -48,6 +48,10 @@ angular
         templateUrl: 'views/paint-an-image.html',
         controller: 'PaintAnImageCtrl'
       })
+      .when('/self-organizing-map', {
+        templateUrl: 'views/self-organizing-map.html',
+        controller: 'SelfOrganizingMapCtrl'
+      })
       .otherwise({
         redirectTo: '/'
       });

diff --git a/scripts/controllers/self-organizing-map.js b/scripts/controllers/self-organizing-map.js
@@ -0,0 +1,126 @@
+'use strict';
+
+/**
+ * @ngdoc function
+ * @name gitHubApp.controller:ImageFiltersCtrl
+ * @description
+ * # ImageFiltersCtrl
+ * Controller of the gitHubApp
+ */
+angular.module('gitHubApp')
+  .controller('SelfOrganizingMapCtrl', function ($scope, $rootScope, $timeout, $location) {
+    $rootScope.navbarActive = "demos";
+
+    $scope.word = "";
+    $scope.map = {};
+
+
+
+    var first = true;
+    var hopfield = new Architect.Hopfield(80);
+    var trainer = new Trainer(hopfield);
+
+    $scope.valid = function(){
+    	var valid = typeof $scope.word == 'string';
+    	for (var i in $scope.draw)
+    		for (var j in $scope.draw[i])
+    			if ($scope.draw[i][j] == $scope.word)
+    				return false;
+    	return valid;
+    }
+    $scope.keyup= function(evt){
+    	if (evt.which == 32 || evt.which == 13)
+    	{
+    		if ($scope.valid() && $scope.word.length > 0)
+    		{
+    			feed($scope.word.trim());
+    			$scope.word = "";
+    		}
+    	}
+    }
+
+
+
+    var feed = function(word){
+    	console.log(word);
+		var input = ascii2bin(word);
+		console.log(input.join(''));
+		var output = hopfield.feed(input);
+		var key = output.join('');
+
+		if (key in $scope.map)
+		{
+			$scope.map[key].push(word);
+		} else {
+			var learn = [];
+			$scope.map[key] = [word];
+
+			for (var i in $scope.map)
+			{
+				learn.push(i.split(''));
+			}
+
+			var set = [];
+			for (var p in learn)
+				set.push({
+				  input: learn[p],
+				  output: learn[p]
+				});
+
+			doTrain(set);
+		}
+		console.log(key);
+
+		preview();
+    }
+
+    var ascii2bin = function(ascii)
+    {
+    	var bin = "00000000000000000000000000000000000000000000000000000000000000000000000000000000";
+    	for (var i = 0; i < ascii.length; i++)
+    	{
+    		var code = ascii.charCodeAt(i);
+    		bin += ('00000000' + code.toString(2)).slice(-8);
+    	}
+    	return bin.slice(-10 * 8).split('').reverse();
+    }
+
+    var bin2dec = function(bin){
+    	return parseInt(bin.join(''), 2);
+    }
+
+    var doTrain = function(set){
+    	trainer.train(set, {
+			iterations: 100,
+			error: .5,
+			rate: .05
+		});
+    }
+
+    $scope.map[ascii2bin("cat").join('')] = ["cat"];
+    $scope.map[ascii2bin("dog").join('')] = ["dog"];
+    $scope.map[ascii2bin("john").join('')] = ["john"];
+    var learn = [ascii2bin("john"), ascii2bin("dog"), ascii2bin("cat")];
+    var set = [];
+	for (var p in learn)
+		set.push({
+		  input: learn[p],
+		  output: learn[p]
+		});
+
+	doTrain(set);
+
+	var preview = function(){
+		var draw = []
+		for (var i in $scope.map)
+		{
+			var row = draw.push([]) - 1;
+			for (var j in $scope.map[i])
+				draw[row].push($scope.map[i][j]);
+		}
+		$scope.draw = draw;
+	}
+
+	preview();
+
+  });
diff --git a/views/self-organizing-map.html b/views/self-organizing-map.html
@@ -0,0 +1,41 @@
+<div class="container demo-page">
+	<div class="row">
+		<div class="col-md-12">
+			<h1 class="page-header">Self Organizing Map</h1>
+			<div>
+				<p class="text-justify">In this demo, a <a href="http://en.wikipedia.org/wiki/Hopfield_network" target="_blank">hopfield network<a/> will be fed with patterns (words) and the outputs will be used as a key to store the patterns in a map. The patterns that the network finds similiar will be recognized and grouped under the same key. Try typing <strong>sat</strong>, <strong>mat</strong>, <strong>juan</strong>, <strong>browser</strong> to see what I'm talking about.</p>
+			</div>
+		</div>
+	</div>
+	<div class="row text-center" style="margin-top: 30px;">
+		<div class="col-md-8 col-md-offset-2">
+			<form name="wordForm">
+				<div class="form-group" ng-class="{ 'has-error': !valid() }">
+		          <input 
+		          	name="word"
+		          	type="text" 
+		          	class="form-control text-lowercase" 
+		          	placeholder="Type a word and press Enter..."
+		          	ng-keyup="keyup($event)"
+		          	ng-model="word"
+		          	ng-pattern="/^[a-z]{0,10}$/">
+		        </div>
+			</form>
+		</div>
+	</div>
+
+
+	<hr>
+		<div class="row text-center" ng-repeat="row in draw" style="margin-top: 20px;">
+			<h4><span ng-repeat="item in row" class="label" style="margin-right: 10px;"
+			ng-class="{
+			'label-default': $parent.$index % 6 == 0,
+			'label-primary': $parent.$index % 6 == 1,
+			'label-success': $parent.$index % 6 == 2,
+			'label-info': $parent.$index % 6 == 3,
+			'label-warning': $parent.$index % 6 == 4,
+			'label-danger': $parent.$index % 6 == 5,
+			}">{{ item }}</span></h4>
+		</div>
+	<hr>
+</div>