임연수 / FaceDetection

Go to a project
Toggle navigation Toggle navigation pinning
임연수
d5db4369 1 parent 887c2e92

connect to api at app.js, 

debug upload button upload.html
Inline Side-by-side
Showing 4 changed files with 99 additions and 98 deletions
node_modules/
.idea/
package-lock.json
uploads/mypic.jpg
\ No newline at end of file
package-lock.json
\ No newline at end of file
......
......@@ -2,20 +2,16 @@ var express = require('express');
var bodyParser= require('body-parser');//post할때 필요
var multer = require('multer'); //업로드할 때 필요
var request = require('request');
var app=express();
var _storage = multer.diskStorage({ //이 객체의 프로퍼티는 2개갖고 있다.
destination: function (req, file, cb) {
cb(null, 'uploads/');//업로드 위치를 저장하는 path함수
},
filename: function (req, file, cb) {
// cb(null, file.originalname); //저장할 파일명
cb(null, 'mypic.jpg');
}
})
var upload = multer({ storage: _storage})
app.locals.pretty = true;
var http = require('http');
var vhost = 'nodejsapp.local';
var port = process.env.PORT || 8080;
var ip = process.env.IP || "localhost";
var app= express();
app.set('port', port);
app.locals.pretty = true;
app.engine('html', require('ejs').renderFile);
app.use(express.static('public'));
app.use('/user',express.static('uploads'));
......@@ -23,33 +19,61 @@ app.set('views','./views');
app.set('view engine', 'html');
app.use(bodyParser.urlencoded({extended:false}));
app.get('/home', function(req,res){
console.log("home");
res.render('upload');
var storage = multer.diskStorage({ //이 객체의 프로퍼티는 2개갖고 있다.
destination: function (req, file, cb) {
cb(null, 'uploads/');//업로드 위치를 저장하는 path함수
},
filename: function (req, file, cb) {
// cb(null, file.originalname); //저장할 파일명
cb(null, 'mypic.jpg');
}
});
var upload = multer({ storage: storage});
/*app.post('/uploads',upload.single('userfile'),function(req,res){
upload(req,res,function(err) {
if(err) {
return res.end("Error uploading file.");
}
res.end("File is uploaded");
});
console.log(req.file);
res.render('facedetection');
})*/
app.post('/uploads', upload.single('userfile'),function(req,res){
// 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://localhost:8080/user/mypic.jpg';
// Request parameters.
var params = {
'returnFaceId': 'true',
'returnFaceLandmarks': 'false',
'returnFaceAttributes': 'age,gender,emotion,hair'
//'headPose,smile,facialHair,glasses, emotion,hair,makeup,occlusion,accessories,blur,exposure,noise'
};
var options = {
uri: uriBase,
qs: params,
body: '{"url": ' + '"' + imageUrl + '"}',
headers: {
'Content-Type': 'application/json',
'Ocp-Apim-Subscription-Key' : subscriptionKey
}
};
console.log("uploads");
console.log(req.file);
res.render('facedetection');
app.get('/home', function(req,res){
console.log("home");
res.render('upload');
});
app.listen(8080, function(){
console.log("connnected, 8080 port!");
app.post('/uploads', upload.single('userfile'),function(req,res){
res.render("result")
console.log(req.file.path)
request.post(options, (error, response, body) => {
if (error) {
console.log('Error: ', error);
return;
}
let jsonResponse = JSON.stringify(JSON.parse(body), null, ' ');
console.log('JSON Response\n');
console.log(jsonResponse);
});
});
var server = http.createServer(app).listen(app.get('port'), function () {
console.log('Express server listening on port ' + vhost + ":" + server.address().port);
});
\ No newline at end of file
......
......@@ -18,7 +18,7 @@
<title>Age Detection</title>
<link rel = "stylesheet" href="http://localhost:8080/assets/css/upload.css">
<link rel ="stylesheet" href="http://localhost:8080/assets/css/upload.css">
<link rel="stylesheet" href="http://localhost:8080/assets/css/bootstrap.min.css">
<link rel="stylesheet" href="http://localhost:8080/assets/css/animate.css">
<link rel="stylesheet" href="http://localhost:8080/assets/css/magnific-popup.css">
......@@ -30,14 +30,10 @@
<script src="https://apis.google.com/js/platform.js" async defer>
{lang: 'ko'}
</script>
</head>
<body>
<!-- PRE LOADER -->
<div class="preloader">
<div class="spinner">
......@@ -45,7 +41,6 @@
</div>
</div>
<!-- HOME SECTION -->
<section id="home" class="parallax-section">
<div class="container">
......@@ -64,71 +59,56 @@
</div>
</section>
<!-- SERVICE SECTION -->
<section id="service" class="parallax-section">
<div class="container">
<div class="row">
<div class="wow fadeInUp section-title" data-wow-delay="0.2s">
<!-- SECTION TITLE -->
<h2>자, 이제 나이를 측정하고 싶은 사람의 사진을 <br/>업로드 해주세요!</h2>
</div>
<div>
<ul class="actions">
<form action="/uploads" method="post" enctype="multipart/form-data">
<input type="submit" value="완료" class= "button">
</form>
<br>
</ul>
</div>
<div id="wrapper">
<div class = "filebox">
<br>
<br>
<br>
<ul class="actions">
<form action="/uploads" method="post" enctype="multipart/form-data">
<label for="userfile">업로드</label>
<input type="file" id="userfile" class="upload" value="업로드"></input>
</form>
</ul>
</div>
</div>
<div class="container">
<div class="row">
<div class="wow fadeInUp section-title" data-wow-delay="0.2s">
<!-- SECTION TITLE -->
<h2>자, 이제 나이를 측정하고 싶은 사람의 사진을 <br/>업로드 해주세요!</h2>
</div>
<div>
<ul class="actions">
<form action="/uploads" method="post" enctype="multipart/form-data">
<input type="file" name="userfile" class="upload" value="업로드">
<input type="submit" value="완료" class= "button">
</form>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- FOOTER SECTION -->
<footer>
<div class="container">
<div class="row">
<div class="wow fadeInUp col-md-12 col-sm-12" data-wow-delay="0.8s">
<p class="white-color"> Opensource software programming 2018 RETURN</p>
<div class="wow fadeInUp col-md-12 col-sm-12" data-wow-delay="0.8s">
<p class="white-color"> Opensource software programming 2018 RETURN</p>
<div class="wow fadeInUp" data-wow-delay="1s">
<ul class="social-icon">
<li><a href="#" onclick="javascript:window.open('https://www.facebook.com/sharer/sharer.php?u='
<ul class="social-icon">
<li><a href="#" onclick="javascript:window.open('https://www.facebook.com/sharer/sharer.php?u='
+encodeURIComponent(document.URL)+'&t='+encodeURIComponent(document.title), 'facebooksharedialog',
'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" target="_blank"
alt="Share on Facebook" class = "fa fa-facebook"></a></li>
&nbsp;&nbsp; <!--스페이스바 두 개 ^^7-->
<li><a href="#" onclick="javascript:window.open('https://twitter.com/intent/tweet?text=[%EA%B3%B5%EC%9C%A0]%20'
alt="Share on Facebook" class = "fa fa-facebook"></a>
</li>
<!--스페이스바 두 개 ^^7-->
<li><a href="#" onclick="javascript:window.open('https://twitter.com/intent/tweet?text=[%EA%B3%B5%EC%9C%A0]%20'
+encodeURIComponent(document.URL)+'%20-%20'+encodeURIComponent(document.title), 'twittersharedialog',
'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" target="_blank" alt="Share on Twitter" class="fa fa-twitter"></a></li>
&nbsp;&nbsp; <!--스페이스바 두 개 ^^7-->
<li><a href="#" onclick="javascript:window.open('https://plus.google.com/share?url='
'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" target="_blank" alt="Share on Twitter" class="fa fa-twitter"></a>
</li>
<!--스페이스바 두 개 ^^7-->
<li><a href="#" onclick="javascript:window.open('https://plus.google.com/share?url='
+encodeURIComponent(document.URL), 'googleplussharedialog','menubar=no,toolbar=no,resizable=yes, scrollbars=yes,height=300,width=600');return false;"
target="_blank" alt="Share on Google+" class="fa fa-google-plus"></a></li>
target="_blank" alt="Share on Google+" class="fa fa-google-plus"></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- SCRIPTS -->
......@@ -141,14 +121,12 @@
<script src="http://localhost:8080/assets/js/wow.min.js"></script>
<script src="http://localhost:8080/assets/js/custom.js"></script>
<script>
<script>/*
document.getElementById('userfile').onchange = function(){
alert(this.value+' Upload Ok!');
}
}*/
</script>
</body>
</script>
</html>
......