MWD / 2020-02-OSS-TermProject

Go to a project
Toggle navigation Toggle navigation pinning
김태영
0ef066f6 1 parent 69d4b4a8

style apply css 

 - 가운데 컨텐츠들 css 수정.
 - header, footer 추가.
Inline Side-by-side
Showing 3 changed files with 109 additions and 30 deletions
body {
padding: 50px;
padding-top: 5px;
padding-bottom: 20px;
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}
a {
color: #00B7FF;
}
/* 헤더 */
header{
height:70px;
background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
-webkit-box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
}
.header_name{
margin: 15px;
margin-left : 30px;
float: left;
font-size: 30px ;
color: white;
}
/* footer */
footer{
padding: 40px 0;
color: #999;
text-align: center;
background-color: #f9f9f9;
border-top: 1px solid #e5e5e5;
}
/* 메인 div를 나누기 위한 것. */
.box1{
float: left;
width: 550px;
padding:10px;
margin:10px;
}
.box2{
display: inline-block;
width: 35%;
padding:10px;
margin:10px;
margin-left: 30px;
}
/* box2안의 이미지와 입력폼에 관한 css */
.alert_image{
width:100%;
}
.col-lg-6{
margin-top: 10px;
width:100%
}
\ No newline at end of file
......
......@@ -14,7 +14,7 @@ router.get('/data', function(req, res, next){
data = {
image : "/images/"+id+".jpg",
audio : "/audio/"+id+".mp3"
audio : "/audio"+id+".mp3"
}
//데이터 확인
console.log(data);
......
......@@ -2,43 +2,69 @@
<html>
<head>
<title><%= title %></title>
<!-- Bootstrap -->
<!-- 합쳐지고 최소화된 최신 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
<!--https://teachablemachine.withgoogle.com/ 를 통해 학습시키고 얻은 스켈레톤 코드 -->
<div>Teachable Machine Image Model</div>
<button type="button" onclick="init()">Start</button>
<!-- header -->
<header>
<p class="header_name">MWD</p>
</header>
<!-- main contents -->
<div class="container" style="margin-top: 30px">
<div class="box1">
<div id="webcam-container"></div>
<div id="label-container"></div>
<div id="check_image">
<img src="/images/1.jpg">
<div id="label-container" ></div>
</div>
<div id = "check_audio">
<!--초기값으로 '시작'이라는 음성을 사용 -->
<!--auto play 기능을 위해 iframe 사용 -->
<iframe src="/audios/4.mp3" allow="autoplay" id="audio" style="display:none"></iframe>
<div class="box2">
<div id="check_image">
<img class="alert_image" src="/images/1.jpg">
</div>
<!-- 인풋 폼 나중에 합치기 -->
<div class="col-lg-6">
<form>
<fieldset style = "width:600px">
<legend>방문자 인적 사항</legend>
이름:
<input type='text' name='name' style="width:70px" required/>&nbsp;
전화번호:
<input type='text' name='number' style="width:250px" placeholder="XXX-XXXX-XXXX 형식으로 입력하세요." required/>&nbsp;
<div style="display:inline">신분:</div>
<select name = "id" style="width: 50;">
<p>이름: <input class="form-control" type='text' name='name' placeholder="고길동">
</p>
<p>전화번호: <input class="form-control" type='text' name='number' placeholder="010-1234-1234." ></input></p>
<p>신분:
<select name = "id" class="form-control">
<option value = "재학생">재학생</option>
<option value = "휴학생">휴학생</option>
<option value = "직원">직원</option>
<option value = "외부인">외부인</option>
</select><br><br>
<input type = "submit" value = "제출"/>&nbsp;
<input type = "reset" value = "다시입력"/>
</fieldset>
</select>
</p>
<p>
<input type = "reset" style="float:right; margin-left:5px; background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%); border: 0;" class="btn btn-warning"value = "다시입력"/>
<input type = "submit" style="float:right; background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%); border: 0; " class="btn btn-success" value = "제출"/>
</p>
</form>
</div>
<!-- 인풋 폼 종료 -->
</div>
</div>
<span id = "check_audio">
<!--초기값으로 '시작'이라는 음성을 사용 -->
<!--auto play 기능을 위해 iframe 사용 -->
<iframe src="/audios/4.mp3" allow="autoplay" id="audio" style="display:none"></iframe>
</span>
<!-- footer -->
<footer>
<p>Mask-Wearing Discriminate Program Using Teachable Machine 2.0</p>
<p>Using teachable machine 2.0 provided by Google, a model was created that learned the type of mask wearing.</p>
<p>2017103978김태영 20174015이재호</p>
<p>contact us <a href="http://khuhub.khu.ac.kr/MWD/2020-02-OSS-TermProject">khuhub.khu.ac.kr/MWD/2020-02-OSS-TermProject</a></p>
</footer>
<!--https://teachablemachine.withgoogle.com/ 를 통해 학습시키고 얻은 스켈레톤 코드 -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.3.1/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@teachablemachine/image@0.8/dist/teachablemachine-image.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
......@@ -55,7 +81,7 @@
var last_result_predict=-999;
// Load the image model and setup the webcam
async function init() {
window.onload = async function init() {
const modelURL = URL + "model.json";
const metadataURL = URL + "metadata.json";
......@@ -68,7 +94,7 @@
// Convenience function to setup a webcam
const flip = true; // whether to flip the webcam
webcam = new tmImage.Webcam(200, 200, flip); // width, height, flip
webcam = new tmImage.Webcam(550, 550, flip); // width, height, flip
await webcam.setup(); // request access to the webcam
await webcam.play();
window.requestAnimationFrame(loop);
......@@ -126,7 +152,7 @@
//ajax로 서버에 그 id에 해당하는 이미지의 주소와 음성파일을 달라고 요청한다.
if(predict_id > 0){
//last_result_predict값을 지금 결과로 나옴 predict로 초기화해준다.
//last_result_predict값을 지금 결과로 나온 predict로 초기화해준다.
last_result_predict = predict_id;
$(function() {
$.ajax({
......@@ -152,7 +178,7 @@
var audio = json_data.audio;
var audioName = "";
//이미지 태그 생성
strDOM += '<img src="'+images+'">';
strDOM += '<img class="alert_image" src="'+images+'">';
//오디오 태그 생성
audioName += '<iframe src="' + audio + '" allow="autoplay" id="audio" style="display:none"></iframe>';
//#cehck_image div의 이미지 교체
......