IT/개인프로젝트

Deeplearning flask로 구현하기

자진모리장단 2022. 1. 23. 23:49

custom 학습데이터를 가지고 flask 로 구현하기 전에 먼저 flask 를 활용해서

파이썬으로 만든 deep learning 모델을 웹구현하는 것을 진행해 볼 것입니다.

먼저 프로젝트를 진행할 폴더 아래 main.py 라는 파일을 생성해줍니다.

main.py 파일의 전체 코드는 아래와 같습니다.

from flask import Flask, request, Response, render_template
from flask_cors import CORS

from keras.preprocessing.image import load_img
from keras.preprocessing.image import img_to_array
from keras.applications.vgg16 import preprocess_input
from keras.applications.vgg16 import decode_predictions
from keras.applications.vgg16 import VGG16


app = Flask(__name__)
CORS(app)
model = VGG16()

@app.route('/', methods=['GET'])
def main():
    return render_template('index.html')

@app.route('/', methods=['POST'])
def predict():
    imagefile= request.files['imagefile']
    image_path = "./images/" + imagefile.filename
    imagefile.save(image_path)

    image = load_img(image_path, target_size=(224, 224))
    image = img_to_array(image)
    image = image.reshape((1, image.shape[0], image.shape[1], image.shape[2]))
    image = preprocess_input(image)
    yhat = model.predict(image)
    label = decode_predictions(yhat)
    label = label[0][0]

    classification = "%s (%.2f%%)" % (label[1], label[2]*100)

    return render_template('index.html', prediction=classification)

# start flask app
if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0')

필요한 라이브러리를 import해주고 app = Flask(__name__) 으로 flask 인스턴스를 생성해줍니다.

python에서 __name__은 모듈의 이름을 뜻하는데 잘 이해는 안가지만 app이라는 파이썬 파일을 만들었다고 생각하자.

 

CORS(app)

CORS 는 일종의 암호화인데 추후에 구글앱플랫폼에서 웹구현화할 생각이기 떄문에 CORS를 사용하였다.

 

라우팅설정으로 작성해둔 index.html 을 불러온다 ( 아래에 기록할 예정)

그리고 request로 post한 이미지파일을 불러오고 이미지폴더에 해당파일을 저장한다. (추후 서버를 운영할경우 올린파일의 검수가 필요함)

 

그리고 이미지를 분석할수 있도록 가공해주면 끝!

<!DOCTYPE html>
<html>
    <head>
        <title>DeepLearning_flask</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    </head>

    <body>
        <h1 class="text-center">Image Classification</h1>

        <form class="p-3 text-center" action='/', method="post" enctype="multipart/form-data">
            <input class="form-control" type="file" name="imagefile">
            <input class="btn btn-primary mt-3" type="submit" value="Predict Image">
        </form>

        
            <p class="text-center">이미지는 {{prediction}} 입니다. </p>
        
    </body>
</html>

부트스트랩의 cdn 형식을 가져와서 간단하게 html 파일을 만들어주었다.

간단히 main.py 는 일종의 뼈대이고 html 파일을 가져와서 페이지안을 만들어준다고 생각하면 될듯하다.

 

기본 HTML 구조에서 부트스트랩사이트에서 cdn 주소를 복붙해주고

http://bootstrapk.com/getting-started/

 

시작하기 · 부트스트랩

부트스트랩은 프레임워크와 함께 일하기 위해 편리한 방법으로 빌드시스템으로 Grunt 를 사용합니다. 그것은 우리의 코드를 컴파일하고, 테스트하고, 그 밖에 몇몇 처리를 도와줍니다. Grunt 설치

bootstrapk.com

아래 폼구조는

https://getbootstrap.com/docs/4.3/components/forms/

를 참고했다.

 

Forms

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.

getbootstrap.com

사모예드 사진을 넣었는데 잘 구현되는 모습을 볼수있다.

 

다음시간은 내가 파인튜닝한 VGG16 훈련 데이터로 FLASK로 구현화를 해볼 예정이다.