[Machine Learning] REST API를 이용해 손글씨 숫자 예측 웹 만들기

이 글은 2021.02.15 에 진행된 코어멤버 세령님의 ‘REST API를 이용해 손글씨 숫자 예측 웹 만들기’ 세션을 바탕으로 작성된 블로그 포스팅입니다.

새 창에서 열기  (발표자 노트를 참고하실 수 있습니다)

 

1. RESTful API

 

REST API란?

HTTP URI를 통해 자원을 명시 HTTP Method(POST, GET, PUT, DELETE)를 통해 해당 자원에 대한 Operation을 적용

 

---

REST API 호출

---

머신러닝이랑 무슨 상관?

---

REST API 장점

• REST API 메시지를 읽는 것 만으로도 메시지가 의도하는 바를 명확하게 파악
• 해당 URI와 원하는 메소드 자체만 독립적으로 이해
• client와 server 각자의 역할이 명확하게 분리

- REST API에 대해 더 자세히 알고 싶다면 다음 링크 참고 
gmlwjd9405.github.io/2018/09/21/rest-and-restful.html

 

---

 

2. AJAX

비동기 방식 클라이언트에서 서버로 데이터를 request, 그에 대한 결과 response 받음 HTML 페이지 전체가 아닌 일부분만 갱신 가능 서버의 처리가 완료될 때까지 기다리지 않고 처리가 가능

 

---

 

3. 손글씨 숫자 예측 페이지 만들기

MNIST란?

손으로 쓴 숫자들 60,000개의 트레이닝 이미지+ 10,000개의 테스트 이미지 28x28 픽셀

---

전체 흐름

전체 흐름

---

REST API 서버

@app.route('/predict', methods=['GET'])
def ajax():
    image = ajaxImage((28,28))
    model = keras.models.load_model("tf-model.h5")
    prediction = model.predict(image)[0]
    return {'answer': int(np.argmax(prediction))}

 

- Method view를 사용하고 싶다면 다음 링크 참고
https://flask.palletsprojects.com/en/1.1.x/views/

---

웹서버 - API 서버 통신

$.ajax({
        url: "http://localhost:5000/predict", // 클라이언트가 요청을 보낼 서버의 URL 주소
        type: "GET",
        data:{
            image: canvas.toDataURL()
        }
    })
    // HTTP 요청이 성공하면 요청한 데이터가 done() 메소드로 전달됨.
    .done(function(json) {
        console.log(json); 
        var answer = document.querySelector("#answer");
        answer.innerHTML = json["answer"];      
    })
    // HTTP 요청이 실패하면 오류와 상태에 관한 정보가 fail() 메소드로 전달됨.
    .fail(function(xhr, status, errorThrown) {
        console.log("error");
    })

 

위 실습에서 사용되는 코드는 https://github.com/dsc-sookmyung/2021-deploy-ML-Model-to-the-Web-Session 해당 링크에서 참고 가능합니다.

실습을 완료하고나면 다음 영상과 같은 결과물을 얻으실 수 있습니다.

---

 

번외

AWS sagemaker로 머신러닝 모델 배포해서(+AWS Lambda) 사용할 수도 있음 (다음 링크 참고)
** 프리티어 여부 잘 확인하고 할 것!

- AWS SageMaker로 머신러닝 맛보기 1탄
https://theserverside.tistory.com/224

- SAGEMAKER ENDPOINT 호출 LAMBDA 함수 개발하기
https://www.sagemaker-workshop-kr.com/kr/apps/internet_facing_app/_module_4.html

- [rest api 외 다른 방법] WEB : tensorflow.js / Android : tensorflow Lite