1. 우리는 사진을 업로드하자마자 우리의 App모델을 불러오는 start버튼을 눌렀을때의 init()함수를 실행하게 하고 싶다
(1) - 따라서 기존 start버튼을 지우고 안에있는 init()함수를 복사
*init()함수는 우리의 인공지능으로 학습시킨 모듈을 불러와서 동물상%를 기억하고 저장해둔다
(2) - 사진을 업로드하여 실행되는 input태그 안의 readURL()함수안에
(3) - init()함수를 집어 넣는다
*readURL함수는 이미지를 업로드할때 image-upload-wrap(이미지업로드화면)을 .hide로 숨기고
file-upload-content 즉 업로드한 이미지를 show()로 보여준다
2. 사진을 업로드하자마자 init()으로 모듈을 불러오고 바로 예측까지 하게 만들어보자
(1) - 예측 버튼을 지우고 predict()함수를 가져온다
(2) - readURL()함수안에 init()함수 실행이 끝나면 predict()함수가 실행되도록한다
*그러나 init()함수는 모듈을 불러오는데 일정시간이 걸리는 함수기 때문에 이런식으로 코드를 작성하면
모듈을 불러오지도 않았는데 predict()로 예측을 시작하여 오류가 난다
(3) - 이를 해결하기위해 init()함수의 구현내용을 보면 async 그리고 모듈을 불러오는 부분에 await가 있는 것을 확인할 수 있다 이것은 init()함수가 실행되는데 일정 시간이 소요되기때문에 이 시간을 기다려줄 수있는 .then이라는 메소드를 사용할 수 있게 해주는 키워드이다
(4) - 따라서 init().then(콜백함수)의 형태로 init()함수의 실행이 끝난 이후에 then안의 콜백함수가 실행되도록
predict()함수를 넣어주면 사진을 업로드 한 후 모듈을 불러오는 작업이 끝나고 바로 예측을 수행하여
우리가 원하는 결과를 얻을 수 있다.
(5) - 결과
3. 예측결과를 나타내는 <div id="label-container">를 이미지 아래로 옮기기
