DP - 10번일지 - 업로드 자동화

1.업로드 자동화 - init()

목표

1. 이미지를 업로드 하면 자동으로 인공지능에게 학습시킨 model을 load
2. 로드가 정상적으로 끝나면 Predict 메서드까지 실행하도록

async function init() {
            const modelURL = URL + "model.json";
            const metadataURL = URL + "metadata.json";

            // load the model and metadata
            // Refer to tmImage.loadFromFiles() in the API to support files from a file picker
            // or files from your local hard drive
            // Note: the pose library adds "tmImage" object to your window (window.tmImage)
            model = await tmImage.load(modelURL, metadataURL);
            maxPredictions = model.getTotalClasses();
            // append elements to the DOM
            labelContainer = document.getElementById("label-container");
            for (let i = 0; i < maxPredictions; i++) { // and class labels
                labelContainer.appendChild(document.createElement("div"));
            }
        }

async await로 model load 끝나는걸 확인하기 위해 로그찍어봄.

function readURL(input) {
            if (input.files && input.files[0]) {

                var reader = new FileReader();

                reader.onload = function (e) {
                    $('.image-upload-wrap').hide();

                    $('.file-upload-image').attr('src', e.target.result);
                    $('.file-upload-content').show();

                    $('.image-title').html(input.files[0].name);
                };

                reader.readAsDataURL(input.files[0]);
                init().then(() => {
                    console.log("init이 끝날떄까지 기다리는중");
                    predict();
                })
                // predict();
            } else {
                removeUpload();
            }
        }

위에서 console.log("init이 끝날떄까지 기다리는중") 이라고 로그 찍은거 확인.
들어온 object 형식에 맞게 아래 predict 메서드에서 로직 작성.
key : value 형태
key : className probability

key : className probability 사용해서 작성.

async function predict() {
            // predict can take in an image, video or canvas html element

            var image = document.getElementById("face-image")
            const prediction = await model.predict(image, false);
            prediction.sort((a,b) => parseFloat(b.probability) - parseFloat(a.probability));
            console.log(prediction);
            var resultMessege;
            switch(prediction[0].className){
                case "" :
                    resultMessege = ''
                    break;
                case "" :
                    resultMessege = ''
                    break;
                case "" :
                    resultMessege = ''
                    break;                
                default:
                    resultMessege = '알 수 없음'       
            }
            $('.result-messege').html(resultMessege);
            for (let i = 0; i < maxPredictions; i++) {
                const classPrediction =
                    prediction[i].className + ": " + prediction[i].probability.toFixed(2);
                labelContainer.childNodes[i].innerHTML = classPrediction;
            }
        }