안경잡이개발자

728x90
반응형

다변인 선형회귀를 활용한 배추 가격 예측 AI 개발하기 7강 - 플라스크와 텐서플로우 연동하기

나동빈


  이번 시간에는 플라스크 웹 서버에서 텐서플로우(Tensorflow) 기반의 학습 모델을 이용해 '배추 가격을 예측'하는 서버 기능을 삽입해보도록 하겠습니다. 지난 시간에 이미 학습 모델을 파일 형태로 저장하는 방법에 대해서 알아보았으므로 수월하게 따라올 수 있을 겁니다.


※ 웹 클라이언트 소스코드 변경하기 ※


  가장 먼저 사용자로부터 '평균 온도', '최소 온도', '최대 온도', '강수량'을 입력 받을 수 있도록 웹 클라이언트 HTML 소스코드를 변경합니다. <form> 태그를 이용하면 플라스크 웹 서버에서 처리할 수 있도록 손쉽게 파라미터를 전달할 수 있습니다.


      <section>

        <h3 class="h3 text-center mb-5">배추 가격 예측하기</h3>

        <div class="row wow fadeIn">

          <div class="col-lg-6 col-md-12 px-4">

            <form action="/" method="post">

              <div class="form-group">

                <label for="formGroupExampleInput">평균 온도</label>

                <input type="text" name="avg_temp" class="form-control" placeholder="평균 온도를 입력하세요.">

              </div>

              <div class="form-group">

                <label for="formGroupExampleInput">최소 온도</label>

                <input type="text" name="min_temp" class="form-control" placeholder="최소 온도를 입력하세요.">

              </div>

              <div class="form-group">

                <label for="formGroupExampleInput">최대 온도</label>

                <input type="text" name="max_temp" class="form-control" placeholder="최대 온도를 입력하세요.">

              </div>

              <div class="form-group">

                <label for="formGroupExampleInput">강수량</label>

                <input type="text" name="rain_fall" class="form-control" placeholder="강수량을 입력하세요.">

              </div>

              <button type="submit" class="btn btn-primary btn-md pull-right">예측하기</button>

            </form>

          </div>

          <div class="col-lg-6 col-md-12">

            {% if price %}

              <h5 class="text-center mt-3">결과: {{ price }}</h5>

            {% endif %}

          </div>

        </div>

      </section>



  참고로 저는 아톰(Atom) 에디터를 이용하고 있습니다.



  이제 위와 같이 플라스크 웹 서버의 루트 폴더에 'model' 폴더를 생성하여 학습 모델이 담길 수 있도록 합시다.



  이제 사용자로부터 배추 가격 예측 요청(Request)이 들어오면 그 결과를 반환하도록 서버 소스코드를 수정합니다.


※ 플라스크 서버 소스코드 ※


# -*- coding: utf-8 -*-

from flask import Flask, render_template, request


import datetime

import tensorflow as tf

import numpy as np


app = Flask(__name__)


# 플레이스 홀더를 설정합니다.

X = tf.placeholder(tf.float32, shape=[None, 4])

Y = tf.placeholder(tf.float32, shape=[None, 1])


W = tf.Variable(tf.random_normal([4, 1]), name="weight")

b = tf.Variable(tf.random_normal([1]), name="bias")


# 가설을 설정합니다.

hypothesis = tf.matmul(X, W) + b


# 저장된 모델을 불러오는 객체를 선언합니다.

saver = tf.train.Saver()

model = tf.global_variables_initializer()


# 세션 객체를 생성합니다.

sess = tf.Session()

sess.run(model)


# 저장된 모델을 세션에 적용합니다.

save_path = "./model/saved.cpkt"

saver.restore(sess, save_path)


@app.route("/", methods=['GET', 'POST'])

def index():

    if request.method == 'GET':

        return render_template('index.html')

    if request.method == 'POST':

        # 파라미터를 전달 받습니다.

        avg_temp = float(request.form['avg_temp'])

        min_temp = float(request.form['min_temp'])

        max_temp = float(request.form['max_temp'])

        rain_fall = float(request.form['rain_fall'])


        # 배추 가격 변수를 선언합니다.

        price = 0


        # 입력된 파라미터를 배열 형태로 준비합니다.

        data = ((avg_temp, min_temp, max_temp, rain_fall), (0, 0, 0, 0))

        arr = np.array(data, dtype=np.float32)


        # 입력 값을 토대로 예측 값을 찾아냅니다.

        x_data = arr[0:4]

        dict = sess.run(hypothesis, feed_dict={X: x_data})

            

        # 결과 배추 가격을 저장합니다.

        price = dict[0]


        return render_template('index.html', price=price)


if __name__ == '__main__':

   app.run(debug = True)



  서버 소스코드를 수정한 이후에는 다시 서버를 재구동하시면 됩니다. 다만 혹시 위와 같이 'UTF-8' 인코딩 관련 오류가 발생한다면 다음과 같이 서버 소스코드 파일을 'UTF-8' 인코딩으로 저장해주도록 하세요.



※ 테스트 하기 ※


  이제 완성된 프로젝트를 테스트 하기 위해 먼저 서버를 구동시킵니다.



  웹 사이트를 새로고침 해서 임의의 온도 및 강수량 정보를 넣어 보겠습니다.



  예측 결과는 다음과 같이 정상적으로 잘 출력됩니다.



  이상으로 미니 프로젝트를 마치도록 하겠습니다.


728x90
반응형

728x90
반응형

다변인 선형회귀를 활용한 배추 가격 예측 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">


※ JS 파일 불러오는 소스코드 ※

  <!-- 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>


  이후에 다음과 같이 재접속을 하면 웹 디자인이 안정적으로 출력되는 것을 알 수 있습니다.




다음 시간에는 위와 같은 '배추 가격 예측하기' 서버 기능을 작업해보도록 하겠습니다.


728x90
반응형

728x90
반응형

다변인 선형회귀를 활용한 배추 가격 예측 AI 개발하기 5강 - 기초 데이터 시각화하기

나동빈


  지난 시간에는 간단히 저장된 학습 모델을 이용해 바로 결과를 예측해보는 방법에 대해 알아보는 시간을 가졌습니다. 이번 시간에는 엑셀(Excel)을 이용해서 기초 데이터를 시각화하는 방법에 대해 알아보는 시간을 가져보도록 하겠습니다.


※ 기초 데이터 시각화의 필요성 ※


  다양한 데이터를 수집해서 인공지능 모델을 돌려 보아도 입력 값과 결과 값의 상관 관계를 찾아내는 것은 쉽지 않을 수 있습니다. 그래서 만약에 많은 시행 착오를 거치고 있는 상황이라면 다양한 데이터를 수집해 보고, 데이터 시각화를 통해서 상관 관계를 유추하는 방법이 사용될 수도 있습니다. 특히 데이터의 개수가 많을 때는 한 눈에 데이터가 보이지 않을 수 있으므로 유용한 방법이 될 수 있습니다.


※ 엑셀로 시각화 해보기 ※


  우리가 학습 데이터로 사용했던 엑셀 파일을 열어 봅시다.



  저는 데이터 정제 과정에서 연도(Year) 정보를 단순한 숫자 형태로 넣었는데요, 엑셀 내에서 시간에 따른 데이터 시각화를 위해서는 '텍스트 나누기' 과정이 필요합니다.



  기본적인 설정대로 따르면 됩니다.





  위와 같이 '날짜'로 서식을 설정해주시면 자동으로 날짜 형태로 변환되는 것을 알 수 있습니다.



  이제 날짜(Year)와 평균 온도(Average Temp)를 설정해서 '데이터' -> '꺾은선 그래프'를 만들어 봅시다.



  그럼 위와 같이 날짜에 따라서 기온이 왔다갔다 하는 것을 시각화해서 확인할 수 있습니다.



  이후에 날짜와 가격을 기준으로 시각화를 진행해 봅시다.



  그럼 위와 같이 가격 그래프도 왔다갔다 봉우리 형태로 존재하는 것을 알 수 있습니다.



  위 그래프는 날짜에 따른 '강수량' 그래프입니다.


  위와 같은 그래프의 형태들을 확인했을 때 저는 온도 및 강수량이 배추 가격에 영향을 미치는 요인이 될 수 있다는 직감을 얻을 수 있었습니다. 이와 같이 기초 데이터를 시각화 하는 과정에서 다양한 인사이트를 얻을 수도 있다는 점을 유의해 주세요. 특정한 결과(Result)에 영향을 미치는 변인을 분석하는 과정에서 이러한 시각화는 큰 도움을 줄 수 있습니다.

728x90
반응형

728x90
반응형

다변인 선형회귀를 활용한 배추 가격 예측 AI 개발하기 4강 - 저장된 학습 모델로 배추 가격 예측하기

나동빈


  지난 시간에는 다변인 선형회귀 기본 예제를 이용해 배추 가격을 예측하는 학습 모델을 만들어 보았습니다. 이번 시간에는 그렇게 저장된 학습 모델을 필요할 때 불러와서 즉시 배추 가격을 예측할 수 있도록 해보겠습니다.


※ 학습 모델을 저장하는 이유 ※


  학습 모델을 저장하는 이유는 간단합니다. 만약 학습 모델을 저장하지 않고 사용자로부터 배추 가격 예측 요청(Request)이 발생할 때마다 매 번 학습을 해서 결과를 돌려준다면 시간이 오래 걸리고 많은 리소스가 소모 될 것입니다.


  따라서 오프라인(Offline)에서 주기적으로 데이터를 이용해 학습을 진행한 뒤에, 그 결과를 저장해서 서버에서는 실시간 요청에 따라 이미 저장된 학습 모델로 배추 가격을 예측하는 것이 효율적입니다.


※ 배추 가격 예측 테스트 소스코드 ※


  따라서 실제 웹 서버의 기능을 구현하기 전에 간단히 배추 가격을 예측하는 테스트 소스코드를 작성해봅시다.


import tensorflow as tf

import numpy as np


# 플레이스 홀더를 설정합니다.

X = tf.placeholder(tf.float32, shape=[None, 4])

Y = tf.placeholder(tf.float32, shape=[None, 1])


W = tf.Variable(tf.random_normal([4, 1]), name="weight")

b = tf.Variable(tf.random_normal([1]), name="bias")


# 가설을 설정합니다.

hypothesis = tf.matmul(X, W) + b


# 저장된 모델을 불러오는 객체를 선언합니다.

saver = tf.train.Saver()

model = tf.global_variables_initializer()


# 4가지 변수를 입력 받습니다.

avg_temp = float(input('평균 온도: '))

min_temp = float(input('최저 온도: '))

max_temp = float(input('최고 온도: '))

rain_fall = float(input('강수량: '))


with tf.Session() as sess:

    sess.run(model)


    # 저장된 학습 모델을 파일로부터 불러옵니다.

    save_path = "./saved.cpkt"

    saver.restore(sess, save_path)


    # 사용자의 입력 값을 이용해 배열을 만듭니다.

    data = ((avg_temp, min_temp, max_temp, rain_fall), )

    arr = np.array(data, dtype=np.float32)


    # 예측을 수행한 뒤에 그 결과를 출력합니다.

    x_data = arr[0:4]

    dict = sess.run(hypothesis, feed_dict={X: x_data})

    print(dict[0])



  이후에 파일을 위와 같이 저장된 학습 모델 파일과 동일한 경로에 두고 실행하시면 됩니다.



  위와 같의 임의로 넣어 본 데이터에서 학습 결과를 정상적으로 출력한 것을 알 수 있습니다.


- 평균 온도: 10

- 최저 온도: -5

- 최고 온도: 20

- 강수량: 0.8


예측된 배추 가격: 5946원

728x90
반응형