임연수 / FaceDetection

Go to a project
Toggle navigation Toggle navigation pinning
임연수
97ebb162 1 parent 9f3fd668

use angularJS to visualize data 

static directory change /public to /
add nodemodules angularjs
Inline Side-by-side
Showing 7 changed files with 76 additions and 66 deletions
......@@ -7,11 +7,11 @@ var http = require('http');
var app= express();
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.set('views','./views');
app.set('views', __dirname + '/views');
app.set('view engine', 'html');
app.engine('html', require('ejs').renderFile);
app.use(bodyParser.urlencoded({extended:false}));
var storage = multer.diskStorage({ //이 객체의 프로퍼티는 2개갖고 있다.
......@@ -25,15 +25,13 @@ var storage = multer.diskStorage({ //이 객체의 프로퍼티는 2개갖고
});
var upload = multer({ storage: storage});
// Replace <Subscription Key> with your valid subscription key.
var subscriptionKey = '61650f4a2941462ea2dba74eabefd114';
// 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
// westus, replace "westcentralus" in the URL below with "westus".
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.
var params = {
'returnFaceId': 'true',
......@@ -51,13 +49,18 @@ var options = {
}
};
app.get('/home', function(req,res){
console.log("home");
res.render('upload');
});
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) => {
if (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, ' ');
console.log('JSON Response\n');
console.log(jsonResponse);
res.send(jsonResponse);
});
});
})
app.listen(8080,function(){
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",
"dependencies": {
"angular": "^1.7.5",
"angular-route": "^1.7.5",
"body-parser": "^1.17.2",
"ejs": "^2.6.1",
"express": "^4.15.3",
......

243 KB | W: | H:

427 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
<!DOCTYPE html>
<html>
<html ng-app="mainApp">
<head>
<title>Age Detection</title>
<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="/app/app.js"></script>
<style>
.left-box {
float: left;
width: 50%;
}
.right-box {
float: right;
width: 50%;
}
</style>
</head>
<body>
<img src="http://54.180.159.73:8080/user/mypic.jpg"></img>
<button onclick="test()">완료</button>
<script type="text/javascript">
function test(){
<body ng-controller="mainAdminController">
<div class="left-box">
<img src="http://54.180.159.73:8080/user/mypic.jpg">
</div>
<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>
var params = {
// Request parameters <img src="http://54.180.159.73:8080/user/mypic.jpg"></img>
"returnFaceId": "true",
"returnFaceLandmarks": "false",
"returnFaceAttributes": "age,gender",
};
</div>
$.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>
</html>
......
......@@ -18,13 +18,13 @@
<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 -->
<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 태그 바로 앞에 배치하세요. -->
<script src="https://apis.google.com/js/platform.js" async defer>
......@@ -112,14 +112,14 @@
</footer>
<!-- 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>/*
document.getElementById('userfile').onchange = function(){
......
......@@ -96,7 +96,7 @@
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",
"returnFaceLandmarks": "false",
"returnFaceAttributes": "age,gender",
......