AI 웹개발 취업캠프 - 28일차 [NIPA/정보통신산업진흥원]

📝과제 - 이미지를 가지고 티처블 머신에서 예측모델을 생성한 후 테스트한 결과를 소스와 같이 문서로 작성하여 제출

Teachable Machine

구글에서 제공하는 웹 기반의 머신러닝 서비스이다. 이미지, 사운드, 자세를 학습 시킬 수 있으며 학습한 모델을 내보내서 사이트, 앱과 같은 프로젝트에 사용이 가능하다.

SUV, 세단 분류 모델 만들기

이번 과제로 머신러닝을 통해 차를 SUV와 세단으로 분류해보려고 한다. Teachable Machine에 접속해서 이미지 프로젝트를 생성했다.

이미지 수집

이미지들은 현대자동차와 기아 공식 사이트에서 수집하였다. SUV, 세단 각각 20장의 이미지를 다운받았다.

모델 학습

class명을 SUV, 세단으로 등록을 하였고 그에 맞는 이미지들을 업로드하여 모델을 학습시켰다.

대형 세단인 제네시스 G90의 이미지를 넣어 분류했을 때 세단이 64%로 나왔다.

소스

<div>Teachable Machine Image Model</div>
<button type="button" onclick="init()">Start</button>
<div id="webcam-container"></div>
<div id="label-container"></div>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@teachablemachine/image@latest/dist/teachablemachine-image.min.js"></script>
<script type="text/javascript">
    // More API functions here:
    // https://github.com/googlecreativelab/teachablemachine-community/tree/master/libraries/image

    // the link to your model provided by Teachable Machine export panel
    const URL = "./my_model/";

    let model, webcam, labelContainer, maxPredictions;

    // Load the image model and setup the webcam
    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();

        // Convenience function to setup a webcam
        const flip = true; // whether to flip the webcam
        webcam = new tmImage.Webcam(200, 200, flip); // width, height, flip
        await webcam.setup(); // request access to the webcam
        await webcam.play();
        window.requestAnimationFrame(loop);

        // append elements to the DOM
        document.getElementById("webcam-container").appendChild(webcam.canvas);
        labelContainer = document.getElementById("label-container");
        for (let i = 0; i < maxPredictions; i++) { // and class labels
            labelContainer.appendChild(document.createElement("div"));
        }
    }

    async function loop() {
        webcam.update(); // update the webcam frame
        await predict();
        window.requestAnimationFrame(loop);
    }

    // run the webcam image through the image model
    async function predict() {
        // predict can take in an image, video or canvas html element
        const prediction = await model.predict(webcam.canvas);
        for (let i = 0; i < maxPredictions; i++) {
            const classPrediction =
                prediction[i].className + ": " + prediction[i].probability.toFixed(2);
            labelContainer.childNodes[i].innerHTML = classPrediction;
        }
    }
</script>

본 후기는 정보통신산업진흥원(NIPA)에서 주관하는 <AI 서비스 완성! AI+웹개발 취업캠프 - 프론트엔드&백엔드> 과정 학습/프로젝트/과제 기록으로 작성 되었습니다.