use angularJS to visualize data

static directory change /public to /
add nodemodules angularjs

@@ -7,11 +7,11 @@ var http = require('http');
 var app= express();
 var app= express();
 
 
 app.locals.pretty = true;
 app.locals.pretty = true;
-app.engine('html', require('ejs').renderFile);
-app.use(express.static('public'));
+app.use(express.static(__dirname));
 app.use('/user',express.static('uploads'));
 app.use('/user',express.static('uploads'));
-app.set('views','./views');
+app.set('views', __dirname + '/views');
 app.set('view engine', 'html');
 app.set('view engine', 'html');
+app.engine('html', require('ejs').renderFile);
 app.use(bodyParser.urlencoded({extended:false}));
 app.use(bodyParser.urlencoded({extended:false}));
 
 
 var storage = multer.diskStorage({ //이 객체의 프로퍼티는 2개갖고 있다.
 var storage = multer.diskStorage({ //이 객체의 프로퍼티는 2개갖고 있다.
@@ -25,15 +25,13 @@ var storage = multer.diskStorage({ //이 객체의 프로퍼티는 2개갖고
 });
 });
 var upload = multer({ storage: storage});
 var upload = multer({ storage: storage});
 
 
-
-
 // Replace <Subscription Key> with your valid subscription key.
 // Replace <Subscription Key> with your valid subscription key.
 var subscriptionKey = '61650f4a2941462ea2dba74eabefd114';
 var subscriptionKey = '61650f4a2941462ea2dba74eabefd114';
 // You must use the same location in your REST call as you used to get your
 // You must use the same location in your REST call as you used to get your
 // subscription keys. For example, if you got your subscription keys from
 // subscription keys. For example, if you got your subscription keys from
 // westus, replace "westcentralus" in the URL below with "westus".
 // westus, replace "westcentralus" in the URL below with "westus".
 var uriBase = 'https://eastasia.api.cognitive.microsoft.com/face/v1.0/detect';
 var uriBase = 'https://eastasia.api.cognitive.microsoft.com/face/v1.0/detect';
-var imageUrl = 'http://54.180.159.73:8080/user/mypic.jpg';
+var imageUrl = 'http://54.180.159.73/user/mypic.jpg';
 // Request parameters.
 // Request parameters.
 var params = {
 var params = {
     'returnFaceId': 'true',
     'returnFaceId': 'true',
@@ -51,13 +49,18 @@ var options = {
     }
     }
 };
 };
 
 
+
 app.get('/home', function(req,res){
 app.get('/home', function(req,res){
     console.log("home");
     console.log("home");
     res.render('upload');
     res.render('upload');
 });
 });
+
 app.post('/uploads', upload.single('userfile'),function(req,res){
 app.post('/uploads', upload.single('userfile'),function(req,res){
-    res.render("facedetection")
-    console.log(req.file.path)
+    res.render("facedetection");
+
+});
+app.get('/send2api', function (req, res) {
+    console.log("aa")
     request.post(options, (error, response, body) => {
     request.post(options, (error, response, body) => {
         if (error) {
         if (error) {
             console.log('Error: ', error);
             console.log('Error: ', error);
@@ -65,9 +68,9 @@ app.post('/uploads', upload.single('userfile'),function(req,res){
         }
         }
         let jsonResponse = JSON.stringify(JSON.parse(body), null, '  ');
         let jsonResponse = JSON.stringify(JSON.parse(body), null, '  ');
         console.log('JSON Response\n');
         console.log('JSON Response\n');
-        console.log(jsonResponse);
+        res.send(jsonResponse);
     });
     });
-});
+})
 
 
 app.listen(8080,function(){
 app.listen(8080,function(){
 	console.log("connect 8080");
 	console.log("connect 8080");

+var mainApp = angular.module('mainApp',[
+    'ngRoute'
+]);
+
+mainApp.controller('mainAdminController', ['$scope', '$http',
+    function ($scope, $http, angularTable) {
+        $http({
+            method: 'GET',
+            url: 'send2api'
+        })
+            .then(function (response) {
+                $scope.data = response.data;
+                $scope.age = response.data[0].faceAttributes.age;
+                $scope.emotion = response.data[0].faceAttributes.emotion;
+                $scope.gender = response.data[0].faceAttributes.gender;
+                $scope.hair = response.data[0].faceAttributes.hair.bald;
+                console.log(response.data[0])
+            });
+    }
+]);
\ No newline at end of file

@@ -20,6 +20,8 @@
   },
   },
   "homepage": "https://github.com/jun-hu/Facestimation_using_nodejs#readme",
   "homepage": "https://github.com/jun-hu/Facestimation_using_nodejs#readme",
   "dependencies": {
   "dependencies": {
+    "angular": "^1.7.5",
+    "angular-route": "^1.7.5",
     "body-parser": "^1.17.2",
     "body-parser": "^1.17.2",
     "ejs": "^2.6.1",
     "ejs": "^2.6.1",
     "express": "^4.15.3",
     "express": "^4.15.3",

 <!DOCTYPE html>
 <!DOCTYPE html>
-<html>
+<html ng-app="mainApp">
 <head>
 <head>
     <title>Age Detection</title>
     <title>Age Detection</title>
     <meta charset="utf-8" />
     <meta charset="utf-8" />
+    <script src="/node_modules/angular/angular.js"></script>
+    <script src="/node_modules/angular-route/angular-route.js"></script>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
+    <script src="/app/app.js"></script>
+    <style>
+        .left-box {
+            float: left;
+            width: 50%;
+        }
+        .right-box {
+            float: right;
+            width: 50%;
+        }
+    </style>
 </head>
 </head>
-<body>
-   <img src="http://54.180.159.73:8080/user/mypic.jpg"></img>
-   <button onclick="test()">완료</button>
+<body ng-controller="mainAdminController">
+    <div class="left-box">
+        <img src="http://54.180.159.73:8080/user/mypic.jpg">
+    </div>
 
 
-<script type="text/javascript">
+    <div class="right-box">
+        <div ng-repeat="row in data">
+            <p>age : {{ row.faceAttributes.age }}</p>
+            <p>emotion : {{ row.faceAttributes.emotion }}</p>
+            <p>gender : {{ row.faceAttributes.gender }}</p>
+            <p>bald : {{ row.faceAttributes.hair.bald }}</p>
+        </div>
 
 
-    function test(){
+    </div>
 
 
-
-
-        var params = {
-            // Request parameters <img src="http://54.180.159.73:8080/user/mypic.jpg"></img>
-            "returnFaceId": "true",
-            "returnFaceLandmarks": "false",
-            "returnFaceAttributes": "age,gender",
-        };
-
-        $.ajax({
-            // NOTE: You must use the same location in your REST call as you used to obtain your subscription keys.
-            //   For example, if you obtained your subscription keys from westus, replace "westcentralus" in the
-            //   URL below with "westus".
-            url: "https://eastasia.api.cognitive.microsoft.com/face/v1.0/detect?" + $.param(params),
-            beforeSend: function(xhrObj){
-                // Request headers
-                xhrObj.setRequestHeader("Content-Type","application/json");
-
-                // NOTE: Replace the "Ocp-Apim-Subscription-Key" value with a valid subscription key.
-                xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key","61650f4a2941462ea2dba74eabefd114");
-            },
-            type: "POST",
-
-
-            // Request body.
-            data: '{"url":"http://localhost:8080/user/mypic.jpg"}',
-        })
-        .done(function(data) {
-            alert(JSON.stringify(data));
-        })
-        .fail(function(data) {
-            alert(JSON.stringify(data));
-        });
-    }
-</script>
 </body>
 </body>
 </html>
 </html>

@@ -18,13 +18,13 @@
 
 
 <title>Age Detection</title>
 <title>Age Detection</title>
 
 
-<link rel ="stylesheet" href="http://54.180.159.73:8080/assets/css/upload.css">
-<link rel="stylesheet" href="http://54.180.159.73:8080/assets/css/bootstrap.min.css">
-<link rel="stylesheet" href="http://54.180.159.73:8080/assets/css/animate.css">
-<link rel="stylesheet" href="http://54.180.159.73:8080/assets/css/magnific-popup.css">
-<link rel="stylesheet" href="http://54.180.159.73:8080/assets/css/font-awesome.min.css">
+<link rel ="stylesheet" href="http://54.180.159.73:8080/public/assets/css/upload.css">
+<link rel="stylesheet" href="http://54.180.159.73:8080/public/assets/css/bootstrap.min.css">
+<link rel="stylesheet" href="http://54.180.159.73:8080/public/assets/css/animate.css">
+<link rel="stylesheet" href="http://54.180.159.73:8080/public/assets/css/magnific-popup.css">
+<link rel="stylesheet" href="http://54.180.159.73:8080/public/assets/css/font-awesome.min.css">
 <!-- MAIN CSS -->
 <!-- MAIN CSS -->
-<link rel="stylesheet" href="http://54.180.159.73:8080/assets/css/tooplate-style.css">
+<link rel="stylesheet" href="http://54.180.159.73:8080/public/assets/css/tooplate-style.css">
 
 
 <!-- 이 태그를 head 태그에 배치하거나 닫는 body 태그 바로 앞에 배치하세요. -->
 <!-- 이 태그를 head 태그에 배치하거나 닫는 body 태그 바로 앞에 배치하세요. -->
 <script src="https://apis.google.com/js/platform.js" async defer>
 <script src="https://apis.google.com/js/platform.js" async defer>
@@ -112,14 +112,14 @@
 </footer>
 </footer>
 
 
 <!-- SCRIPTS -->
 <!-- SCRIPTS -->
-<script src="http://54.180.159.73:8080/assets/js/jquery.js"></script>
-<script src="http://54.180.159.73:8080/assets/js/bootstrap.min.js"></script>
-<script src="http://54.180.159.73:8080/assets/js/jquery.parallax.js"></script>
-<script src="http://54.180.159.73:8080/assets/js/smoothscroll.js"></script>
-<script src="http://54.180.159.73:8080/assets/js/jquery.magnific-popup.min.js"></script>
-<script src="http://54.180.159.73:8080/assets/js/magnific-popup-options.js"></script>
-<script src="http://54.180.159.73:8080/assets/js/wow.min.js"></script>
-<script src="http://54.180.159.73:8080/assets/js/custom.js"></script>
+<script src="http://54.180.159.73:8080/public/assets/js/jquery.js"></script>
+<script src="http://54.180.159.73:8080/public/assets/js/bootstrap.min.js"></script>
+<script src="http://54.180.159.73:8080/public/assets/js/jquery.parallax.js"></script>
+<script src="http://54.180.159.73:8080/public/assets/js/smoothscroll.js"></script>
+<script src="http://54.180.159.73:8080/public/assets/js/jquery.magnific-popup.min.js"></script>
+<script src="http://54.180.159.73:8080/public/assets/js/magnific-popup-options.js"></script>
+<script src="http://54.180.159.73:8080/public/assets/js/wow.min.js"></script>
+<script src="http://54.180.159.73:8080/public/assets/js/custom.js"></script>
 
 
 <script>/*
 <script>/*
 document.getElementById('userfile').onchange = function(){
 document.getElementById('userfile').onchange = function(){

@@ -96,7 +96,7 @@
 
 
 
 
         var params = {
         var params = {
-            // Request parameters <img src="http://localhost:8080/user/mypic.jpg"></img>
+            // Request parameters <img src="http://54.180.159.73:8080/user/mypic.jpg"></img>
             "returnFaceId": "true",
             "returnFaceId": "true",
             "returnFaceLandmarks": "false",
             "returnFaceLandmarks": "false",
             "returnFaceAttributes": "age,gender",
             "returnFaceAttributes": "age,gender",