파이썬 web-app UFO만들어 보기

ML 모델 사용하여 Web App 만들기

해당 포스트는 https://github.com/microsoft/ML-For-Beginners/tree/main/3-Web-App를 참조했습니다.

데이터셋은 Kaggle에서 가져왔습니다.

도구

작업에서, 2가지 도구가 필요합니다

1. Flask는 무엇일까요? 작성자가 ‘micro-framework’로 정의한, Flask는 Python으로 웹 프레임워크의 기본적인 기능과 웹 페이지를 만드는 템플릿 엔진을 제공합니다. this Learn module을 보고 Flask로 만드는 것을 연습합니다.
2. Pickle은 무엇일까요? Pickle 🥒은 Python 객체 구조를 serializes와 de-serializes하는 Python 모듈입니다. 모델을 ‘pickle’하게 되면, 웹에서 쓰기 위해서 serialize 또는 flatten합니다. 주의합시다: pickle은 원래 안전하지 않아서, 파일을 ‘un-pickle’한다고 나오면 조심합니다. pickled 파일은 접미사 .pkl로 있습니다.

데이터 정리하기

NUFORC (The National UFO Reporting Center)에서 모아둔, 80,000 UFO 목격 데이터를 이 강의에서 사용합니다. 데이터에 UFO 목격 관련한 몇 흥미로운 설명이 있습니다, 예시로 들어봅니다:

• 긴 예시를 설명합니다.“A man emerges from a beam of light that shines on a grassy field at night and he runs towards the Texas Instruments parking lot”.
• 짧은 예시를 설명합니다. “the lights chased us”.

ufos.csv 스프레드시트에는 목격된 city, state 와 country, 오브젝트의 shape 와 latitude 및 longitude 열이 포함되어 있습니다.

강의에 있는 빈 notebook에서 진행합니다:

1. pandas, matplotlib, 와 numpy를 import하고 ufos 스프레드시트도 import합니다. 샘플 데이터셋을 출력한다:

import pandas as pd
import numpy as np
    
ufos = pd.read_csv('./data/ufos.csv')
ufos.head()

1. ufos 데이터를 새로운 제목의 작은 데이터프레임으로 변환합니다. Country 필드가 유니크 값인지 확인합니다.

ufos = pd.DataFrame({'Seconds': ufos['duration (seconds)'], 'Country': ufos['country'],'Latitude': ufos['latitude'],'Longitude': ufos['longitude']})
    
ufos.Country.unique()

1. 지금부터, 모든 null 값을 드랍하고 1-60초 사이 목격만 가져와서 처리할 데이터의 수량을 줄일 수 있습니다:

ufos.dropna(inplace=True)
    
ufos = ufos[(ufos['Seconds'] >= 1) & (ufos['Seconds'] <= 60)]
    
ufos.info()

1. Scikit-learn의 LabelEncoder 라이브러리를 Import해서 국가의 텍스트 값을 숫자로 변환합니다:

   LabelEncoder는 데이터를 알파벳 순서로 인코드합니다.

from sklearn.preprocessing import LabelEncoder
    
ufos['Country'] = LabelEncoder().fit_transform(ufos['Country'])
    
ufos.head()

모델 만들기

지금부터 데이터를 훈련하고 테스트할 그룹으로 나누어서 모델을 훈련할 준비가 되었습니다.

1. X 백터로 훈련할 3가지 features를 선택하면, y 백터는 Country로 됩니다. Seconds, Latitude 와 Longitude를 입력하면 국가 id로 반환되기를 원합니다.

    from sklearn.model_selection import train_test_split
           
    Selected_features = ['Seconds','Latitude','Longitude']
           
    X = ufos[Selected_features]
    y = ufos['Country']
           
    X_train, X_test, y_train, y_test = train_test_split(X, y, test_size=0.2, random_state=0)
   

2. logistic regression을 사용해서 모델을 훈련합니다

    from sklearn.preprocessing import LabelEncoder
           
    ufos['Country'] = LabelEncoder().fit_transform(ufos['Country'])
           
    ufos.head()
   

당연하게, Country 와 Latitude/Longitude가 상관 관계있어서, 정확도 (around 95%) 가 나쁘지 않습니다.

모델 ‘pickle’하기

모델을 pickle 할 시간이 되었습니다! 코드 몇 줄로 할 수 있습니다. pickled 되면, pickled 모델을 불러와서 초, 위도와 경도 값이 포함된 샘플 데이터 배열을 대상으로 테스트합니다.

import pickle
model_filename = 'ufo-model.pkl'
pickle.dump(model, open(model_filename,'wb'))

model = pickle.load(open('ufo-model.pkl','rb'))
print(model.predict([[50,44,-12]]))

모델은 영국 국가 코드인, ‘3’ 이 반환됩니다

Flask 앱 만들기

지금부터 Flask 앱을 만들어서 모델을 부르고 비슷한 결과를 반환하지만, 시각적으로 만족할 방식으로도 가능합니다.

1. ufo-model.pkl 파일과 notebook.ipynb 파일 옆에 web-app 이라고 불리는 폴더를 만들면서 시작합니다.
2. 폴더에서 3가지 폴더를 만듭니다: static, 내부에 css 폴더가 있으며, templates` 도 있습니다. 지금부터 다음 파일과 디렉토리들이 있어야 한다.
   • web-app/
   • static/
   • css/
   • templates/
   • notebook.ipynb
   • ufo-model.pkl

3. web-app 폴더에서 만들 첫 파일은 requirements.txt 파일입니다. JavaScript 앱의 package.json 처럼, 앱에 필요한 의존성을 리스트한 파일입니다. requirements.txt 에 해당 라인을 추가합니다:

    scikit-learn
    pandas
    numpy
    flask
   

4. web-app 으로 이동해서 파일을 하면 된다.

    cd web-app
   

5. 터미널에서 pip install을 타이핑해서, requirements.txt 에 나열된 라이브러리를 설치합니다:

    pip install -r requirements.txt
   

6. 지금부터, 앱을 완성하기 위해서 3가지 파일을 더 만든다.
   1. 최상단에 app.py를 만듭니다.
   2. templates 디렉토리에 index.html을 만듭니다.
   3. static/css 디렉토리에 styles.css를 만듭니다.

7. 몇 스타일로 styles.css 파일을 만듭니다:

    body {
    	width: 100%;
    	height: 100%;
    	font-family: 'Helvetica';
    	background: black;
    	color: #fff;
    	text-align: center;
    	letter-spacing: 1.4px;
    	font-size: 30px;
    }
       
    input {
    	min-width: 150px;
    }
       
    .grid {
    	width: 300px;
    	border: 1px solid #2d2d2d;
    	display: grid;
    	justify-content: center;
    	margin: 20px auto;
    }
       
    .box {
    	color: #fff;
    	background: #2d2d2d;
    	padding: 12px;
    	display: inline-block;
    }
   

8. 다음으로 index.html 파일을 만듭니다:

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>🛸 UFO Appearance Prediction! 👽</title>
      <link rel="stylesheet" href=""> 
    </head>
       
    <body>
     <div class="grid">
       
      <div class="box">
       
      <p>According to the number of seconds, latitude and longitude, which country is likely to have reported seeing a UFO?</p>
       
        <form action="" method="post">
        	<input type="number" name="seconds" placeholder="Seconds" required="required" min="0" max="60" />
          <input type="text" name="latitude" placeholder="Latitude" required="required" />
    		  <input type="text" name="longitude" placeholder="Longitude" required="required" />
          <button type="submit" class="btn">Predict country where the UFO is seen</button>
        </form>
       
         
       <p></p>
       
     </div>
    </div>
       
    </body>
    </html>
   

9. app.py 에 아래 코드를 입력해준다.

    import numpy as np
    from flask import Flask, request, render_template
    import pickle
       
    app = Flask(__name__)
       
    model = pickle.load(open("./ufo-model.pkl", "rb"))
       
    @app.route("/")
    def home():
        return render_template("index.html")
       
    @app.route("/predict", methods=["POST"])
    def predict():
       
        int_features = [int(x) for x in request.form.values()]
        final_features = [np.array(int_features)]
        prediction = model.predict(final_features)
       
        output = prediction[0]
       
        countries = ["Australia", "Canada", "Germany", "UK", "US"]
       
        return render_template(
            "index.html", prediction_text="Likely country: {}".format(countries[output])
        )
       
    if __name__ == "__main__":
        app.run(debug=True)
   

만들어진 web-app을 동작시켜보기

vscode를 기반으로 동작시켰다 다양한 방법으로 동작이 가능하나 다른 방법으로 해도 상관은 없다.

1. app.py의 터미널을 실행시킨다.

1. 미리 만들어둔 requirements.txt 파일에 동작시키기 위해 필요한 모듈의 정보가 들어있다. 이 파일을 이용해서 모듈을 다운받는다. 아래 코드를 터미널에 입력하면 된다.

    pip install -r requirements.txt
   

2. 이후 만들어진 app.py를 가동시키기 위해 아래 코드를 터미널에 입력한다.

    python app.py
   

   

   위 사진과 같이 뜨면 성공이다.

3. http://127.0.0.1:5000링크에 들어가면 된다.

4. 아래 사진처럼 값을 입력하면 위성의 위치를 알 수 있다.