수화 인식 프로그램 <2> Web (Python, mediapipe, sklearn, flask)

** 딥러닝 기반 AI 수화인식 프로그램  (Flask 활용, Web 구현 부분) 

1) 개발 목적: 수화인식+Web으로 구현 

 

2) 사용 모듈: cv2(opencv)-웹캠 제어, mediapipe-손 인식, sklearn(머신러닝)-학습 + Flask 

- 모듈 설치 (flask) 

#pip 활용한 flask 설치 

!pip install flask 

요약: 

1. 지난번 수화 인식 프로그램 <1> 은 window로 구현되는 부분이며, 
이번 <2> 에서는 Flask 활용하여, Web으로 구현될 예정이다. 

 

2. 저번 <1>에서는 Jupyter Notebook 을 활용했으나, 이번에는 vs code 를 활용했다. 

Jupyter Notebook과 Flask가 호환성이 좋지 않기 때문이다. 

 

3. Flask 사용 시에는 폴더와 파일 경로 설정이 중요하다. 
(아래 경로 참고-templates 폴더와 파일이 같은 위치에 있어야 한다)

templates 폴더와 파일 위치 ★★매우 중요

 

필요한 모듈 - from flask import Flask, Response, render_template 

from flask import Flask, Response, render_template # flask

import cv2 # 웹캠 제어 및 ML 사용

import numpy as np # 배열

import keyboard

import time

import mediapipe as mp # 손 인식

from sklearn import neighbors # knn

 

 

우선, 플라스크 사용할때, app = Flask(__name__) 로 시작한다.

이 의미는 플라스크 객체를 생성한다는 의미로, __name__은 현재 실행 중인 모듈 이름을 전달하는 것을 의미한다.  

 

다음으로, @app.route('/주소명') 로 서버 뒤에 주소를 적어준다.

기본적으로 '/'를 설정한 다음, return 값을 정해준다.

return "hello world"  >> 주소 랜딩하면 "hello world"라는 텍스트가 나온다. 
return render_template('경로값.html') >> 폴더에 저장된 html을 불러올 수 있다. 

(참고로, html 활용한 것들은 첨부파일에 넣어놨다.) 

index.html

0.00MB

template.html

0.00MB

마지막으로, name 변수 값이 main 일 경우, 코드를 실행하라는 부분을 넣어주면 된다. 
if __name__ == '__main__':
    app.run(host='1270.0.1', debug=True)

보통 이와 같이 host와 debug 정도만 넣어도 된다. (debug는 필수 요소는 아닌데, 사용하면 편하다!) 
나의 경우는, port 값 변경을 해서 port값을 기억하기 쉽게 했고, threaded로 멀티 플롯 활용을 써서 간편하게 했다. 

 

소스 정리: 

app = Flask(__name__) # 플라스크 객체를 생성한다. __name__은 현재 실행 중인 모듈 이름을 전달하는 것이다.

# Home(처음 페이지) 랜딩

# 기본서버 127.0.0.1:5000 뒤에 붙는 주소를 적어준다.

@app.route('/')

def index():

    return render_template('/templates/index.html')

 

# name이라는 변수의 값이 main이라면 아래의 코드를 실행하라

# 즉, 메인 함수의 선언, 시작을 의미

if __name__ == '__main__':

    app.run(host='localhost', port=8572, threaded=True, debug=True)

    # host='localhost' 혹은 '127.0.0.1' 등으로 가능

    # port='5000'이 플라스크에서는 기본으로 사용, 해당 소스에서는 그냥 '8572'로 임의 제정

    # threaded=True >> multiple plot이 가능해짐

    # debug=True >> 디버그하면 자동으로 업데이트 가능