다변인 선형회귀를 활용한 배추 가격 예측 AI 개발하기 6강 - 플라스크 웹 서버와 웹 디자인 구현하기
다변인 선형회귀를 활용한 배추 가격 예측 AI 개발하기 6강 - 플라스크 웹 서버와 웹 디자인 구현하기
나동빈
이번 시간에는 지난 번에 만들었던 학습 모델을 이용하기 위해 가장 먼저 플라스크(Flask) 웹 서버를 구축하고 웹 디자인 작업을 해주도록 하겠습니다. 그러므로 웹 디자인 프레임워크부터 다운로드를 받아주도록 하겠습니다.
MDBootstrap의 무료 디자인 템플릿을 사용하도록 하겠습니다.
MDBoostrap 무료 템플릿: https://mdbootstrap.com/freebies/
저는 위와 같이 'Full Page Video Carousel' 템플릿을 선택했습니다.
다운로드를 받으시면 'Full Page Video Carousel'이 존재합니다.
위에 존재하는 모든 폴더 및 파일들을 우리의 프로젝트 폴더로 옮겨줍시다.
이제 index.html 파일을 웹 브라우저로 실행해 보시면 예쁜 웹 사이트가 등장하는 것을 알 수 있습니다.
이후에 자신이 원하는 웹 서비스에 맞게 디자인을 자유롭게 꾸며주시면 됩니다. 저는 웹 사이트의 불필요한 부분을 쳐내고 필요한 부분만 넣었습니다.
※ 필요한 부분만 남겨서 간단히 웹 디자인 하기 ※
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>VEGITA</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="css/mdb.min.css" rel="stylesheet">
<!-- Your custom styles (optional) -->
<link href="css/style.min.css" rel="stylesheet">
<style type="text/css">
html,
body,
header,
.carousel {
height: 100%;
}
@media (min-width: 800px) and (max-width: 850px) {
.navbar:not(.top-nav-collapse) {
background: #1C2331!important;
}
}
</style>
</head>
<body>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark scrolling-navbar">
<div class="container">
<a class="navbar-brand" href="https://mdbootstrap.com/material-design-for-bootstrap/" target="_blank">
<strong>VEGITA</strong>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">HOME
<span class="sr-only">(current)</span>
</a>
</li>
</ul>
<ul class="navbar-nav nav-flex-icons">
<li class="nav-item">
<a href="#" class="nav-link border border-light rounded"
target="_blank">
<i class="fa fa-github mr-2"></i>GITHUB
</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="carousel-example-1z" class="carousel slide carousel-fade" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-1z" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-1z" data-slide-to="1"></li>
<li data-target="#carousel-example-1z" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<div class="view">
<video class="video-intro" autoplay loop>
<source src="https://mdbootstrap.com/img/video/city.mp4" type="video/mp4" >
</video>
<div class="mask rgba-black-light d-flex justify-content-center align-items-center">
<div class="text-center white-text mx-5 wow fadeIn">
<h1 class="mb-4">
<strong>배추 가격 예측 AI 로봇</strong>
</h1>
<p>
<strong>빠르고 정확하게 향후 배추 가격을 예측합니다.</strong>
</p>
<p class="mb-4 d-none d-md-block">
<strong>기상청 전국 기온 및 강수량 데이터와 전국 월별 배추 가격 빅 데이터를 분석하여 시계열 수치 예측을 수행합니다</strong>
</p>
<a target="_blank" href="#" class="btn btn-outline-white btn-lg">START
<i class="fa fa-graduation-cap ml-2"></i>
</a>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="view">
<video class="video-intro" autoplay loop>
<source src="https://mdbootstrap.com/img/video/forest.mp4" type="video/mp4">
</video>
<div class="mask rgba-black-light d-flex justify-content-center align-items-center">
<div class="text-center white-text mx-5 wow fadeIn">
<h1 class="mb-4">
<strong>배추 가격 예측 AI 로봇</strong>
</h1>
<p>
<strong>빠르고 정확하게 향후 배추 가격을 예측합니다.</strong>
</p>
<p class="mb-4 d-none d-md-block">
<strong>기상청 전국 기온 및 강수량 데이터와 전국 월별 배추 가격 빅 데이터를 분석하여 시계열 수치 예측을 수행합니다</strong>
</p>
<a target="_blank" href="#" class="btn btn-outline-white btn-lg">START
<i class="fa fa-graduation-cap ml-2"></i>
</a>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="view">
<video class="video-intro" autoplay loop>
<source src="https://mdbootstrap.com/img/video/Tropical.mp4" type="video/mp4">
</video>
<div class="mask rgba-black-light d-flex justify-content-center align-items-center">
<div class="text-center white-text mx-5 wow fadeIn">
<h1 class="mb-4">
<strong>배추 가격 예측 AI 로봇</strong>
</h1>
<p>
<strong>빠르고 정확하게 향후 배추 가격을 예측합니다.</strong>
</p>
<p class="mb-4 d-none d-md-block">
<strong>기상청 전국 기온 및 강수량 데이터와 전국 월별 배추 가격 빅 데이터를 분석하여 시계열 수치 예측을 수행합니다</strong>
</p>
<a target="_blank" href="#" class="btn btn-outline-white btn-lg">START
<i class="fa fa-graduation-cap ml-2"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carousel-example-1z" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-example-1z" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<main>
<div class="container">
<section class="mt-5 wow fadeIn">
<div class="row">
<div class="col-md-6 mb-4">
<img src="https://mdbootstrap.com/img/Marketing/mdb-press-pack/mdb-main.jpg" class="img-fluid z-depth-1-half" alt="">
</div>
<div class="col-md-6 mb-4">
<h3 class="h3 mb-3">배추 가격 예측 결과</h3>
<p>머신 러닝 선형 회귀(Linear Regression) 모델을 확장하여 시계열에 따른 배추 가격을 예측하고 학습 결과를 확인했습니다. 미래의 배추 가격을 효과적으로 예측할 수 있습니다.</p>
<hr>
<p>2,900개 이상의 데이터를 활용하여 1.8% 미만의 데이터 오차율을 보이는 배추 가격 예측 모델을 개발했습니다.
</p>
<a target="_blank" href="#" class="btn btn-grey btn-md">Download
<i class="fa fa-download ml-1"></i>
</a>
</div>
</div>
</section>
<hr class="my-5">
<section>
<h3 class="h3 text-center mb-5">배추 가격 예측하기</h3>
<div class="row wow fadeIn">
<div class="col-lg-6 col-md-12 px-4">
평균 기온:
<br>
최저 기온:
<br>
최고 기온:
<br>
강수량:
</div>
<div class="col-lg-6 col-md-12">
결과:
</div>
</div>
</section>
</div>
</main>
<footer class="page-footer text-center font-small mt-4 wow fadeIn">
<div class="footer-copyright py-3">
© 2018 Copyright:
<a href="#" target="_blank"> 나동빈 </a>
</div>
</footer>
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<!-- Initializations -->
<script type="text/javascript">
// Animations initialization
new WOW().init();
</script>
</body>
</html>
※ 플라스크 웹 서버 구현하기 ※
이제 다른 사용자들이 우리가 만든 웹 사이트를 볼 수 있도록 하기 위해서 플라스크(Flask) 웹 서버를 만들어 봅시다. 플라스크는 파이썬 기반의 웹 서버 프레임워크입니다. 따라서 server.py 소스코드를 생성해 줍시다.
※ 플라스크 웹 서버 기초 소스코드 ※
# -*- coding: utf-8 -*-
from flask import Flask, render_template, request
app = Flask(__name__)
@app.route("/", methods=['GET', 'POST'])
def index():
return render_template('index.html')
if __name__ == '__main__':
app.run(debug = True)
기본적으로 플라스크(Flask)는 static 폴더와 templates 폴더 안에 웹 문서 파일을 넣도록 되어 있습니다. 따라서 templates 폴더 안에 index.html 파일을 넣고, 기타 디자인 파일은 static 폴더 안에 넣어줍시다. 이후에 다음과 같이 서버를 실행해 봅시다.
이후에 플라스크의 기본 포트인 5000번 포트로 접속했을 때 위와 같이 디자인이 깨지는 것을 알 수 있습니다. 이것은 플라스크 내부의 웹 문서의 CSS 파일 및 JS 파일의 링크를 바르게 설정하면 해결됩니다. 바로 static 폴더의 상대 경로를 이용하는 방식입니다.
※ CSS 파일 불러오는 소스코드 ※
<!-- Bootstrap core CSS -->
<link href="{{url_for('static', filename='css/bootstrap.min.css')}}" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="{{url_for('static', filename='css/mdb.min.css')}}" rel="stylesheet">
<!-- Your custom styles (optional) -->
<link href="{{url_for('static', filename='css/style.min.css')}}" rel="stylesheet">
<!-- JQuery -->
<script type="text/javascript" src="{{url_for('static', filename='js/jquery-3.3.1.min.js')}}"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="{{url_for('static', filename='js/popper.min.js')}}"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="{{url_for('static', filename='js/bootstrap.min.js')}}"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="{{url_for('static', filename='js/mdb.min.js')}}"></script>
이후에 다음과 같이 재접속을 하면 웹 디자인이 안정적으로 출력되는 것을 알 수 있습니다.
다음 시간에는 위와 같은 '배추 가격 예측하기' 서버 기능을 작업해보도록 하겠습니다.
'선형회귀 AI 활용 프로젝트' 카테고리의 다른 글
| 다변인 선형회귀를 활용한 배추 가격 예측 AI 개발하기 7강 - 플라스크와 텐서플로우 연동하기 (1) | 2018.08.25 |
|---|---|
| 다변인 선형회귀를 활용한 배추 가격 예측 AI 개발하기 5강 - 기초 데이터 시각화하기 (0) | 2018.08.25 |
| 다변인 선형회귀를 활용한 배추 가격 예측 AI 개발하기 4강 - 저장된 학습 모델로 배추 가격 예측하기 (6) | 2018.08.25 |
| 다변인 선형회귀를 활용한 배추 가격 예측 AI 개발하기 3강 - 다변인 선형회귀 모델 개발하기 (2) | 2018.08.23 |
| 다변인 선형회귀를 활용한 배추 가격 예측 AI 개발하기 2강 - 프로젝트 아이디어 및 데이터 수집 (1) | 2018.08.23 |
