[AI] 간단한 딥러닝 웹서비스 - 마스크 착용 감지 프로젝트 (w/ Teachable Machine)

마스크가 일상화된지 1년이 넘어갑니다. 공공장소에 입장할 때, 마스크 착용과 온도체크가 필수입니다. 레스토랑이나 카페에서 음식물 섭취시를 제외하고는 마스크를 착용하고 있어야 하는데, 관리하기가 쉽지 않죠. 옆 테이블에서 마스크 착용을 안한채 큰 목소리로 대화를 하면 눈살은 찌푸려지지만 '마스크 착용하고 말씀하세요~'라는 말을 하긴 어렵죠.

이러한 문제를 해결할 수 있는 마스크 착용 감지 AI서비스를 만들어 보았습니다.

[구현 순서]

구현 순서는 아래와 같습니다.

Google Teachable Machine으로 마스크 착용 감지 모델을 만들고,

Goorm IDE로 AI서비스를 만들어보겠습니다.

[최종 결과]

마스크 착용 여부를 판단하는 AI서비스 입니다.

2. 사전 준비

2-1) Groom IDE 회원가입

2-2) Groom IDE 컨테이너 생성

2-3) 학습 데이터 수집

2-1) Groom IDE 회원 가입

> 링크 : www.goorm.io/

우측 상단에 [회원가입] 버튼을 클릭합니다.

이미 사용중인 서비스의 ID를 사용해서 간편하게 회원가입을 해보세요.

2-2) Goorm IDE 컨테이너 생성

좌측 상단에 [IDE] 버튼을 클릭하세요.

[대시보드] 버튼을 눌러 프로젝트들이 관리되고 있는 화면으로 진입합니다.

[+새 컨테이너] 버튼을 클릭합니다.

컨테이너 생성에서 [이름]과 [설명]을 입력하고, [소프트웨어 스택]을 HTML/CSS/JS 로 설정합니다. 그리고 나머지 설정은 기본으로 둡니다. 제일 하단에 [생성 (Ctrl+M)] 버튼을 클릭하여 컨테이너를 생성합니다.

이렇게 프로젝트가 생성되었습니다.

기본 작성되어 있는 코드는 어떻게 화면상에 보여질까요? [Open Preview]를 클릭해보세요.

화면에 보이는 모습이 연출됩니다.

이렇게 쉽게 소스코드를 수행해 볼 수 있는 툴입니다.

2-3) 학습 데이터 수집

Google Teachable Machine으로 마스크 착용 여부를 감지하는 모델을 만들기 위해서는 학습 데이터가 필요합니다.

※ Google Teachable Machine이란? 3-2)에서 설명합니다.

마스크를 착용한 데이터와 마스크를 미착용한 데이터 모두 필요 한데요, 어떻게 데이터를 수집해야 할까요?

여러분 얼굴을 직접 촬영할 수도 있지만, 이미 만들어진 데이터를 활용할 수도 있습니다.

> 링크 : github.com/prajnasb/observations/tree/master/experiements/data

해당 링크를 클릭해보면, 아래와 같은 그림을 확인할 수 있습니다.

마스크가 없는 사진과 마스크를 착용한 사진입니다. 마스크는 가짜이미지를 합성한 것이지만, 학습 데이터로 용도로는 손색이 없습니다.

> 링크 : github.com/prajnasb/observations해당 링크로 이동하여, [Code] > [Download ZIP] 버튼을 클릭하여 압축 파일을 다운로드 받습니다.

자! 이제 데이터를 이용해서 모델을 만들어보겠습니다.

3. 사전 지식 쌓기

프로젝트 진행에 앞서 필요한 사전지식을 학습해보겠습니다.

3-1) AI가 학습을 한다?

3-2) Google Teachable Machine이란?

3-1) AI 가 학습을 한다?

'AI가 학습을 해서 사람의 능력을 뛰어넘었다' 라는 뉴스를 많이 본 적 있으시죠? AI가 학습을 한다?는게 어떤 의미일까요?

AI도 사람과 동일하게 학습 합니다. 유아들이 단어를 '학습'하는 모습을 상상해 봅시다. 부모님들은 아래와 같은 그림 카드를 보여주고 단어를 알려줍니다.

'이렇게 생긴 건 수박이고, 저렇게 생긴건 참외야'를 반복해서 말해주죠. 여러번 반복 합니다. 이런 과정을 학습(train)이라고 합니다. 학습이 완료 되었다고 생각하면 그 다음엔 어떻게하죠? 그림만 보여주고 '이게 뭐야?'라고 물어봅니다. 이때 '수박' 또는 '참외'라고 추측한 대답(inference)을 합니다. 그 후 맞으면 칭찬하고, 틀리면 다시 알려주죠.

AI도 동일한 과정을 거칩니다. 먼저 학습(train)을 합니다. 수박이 그려진 이미지를 준비하고, 수박이라고 알려줍니다. 참외도 마찬가지로요. 반복문을 사용하여 여러 차례 반복해서 알려줍니다. 그리고 어느 정도 학습이 되었다고 생각이 될 때, '수박'/'참외'를 구별할 수 있는지 물어봅니다. 이런 과정을 추론(inference)이라고 합니다.

유아의 단어 학습과정과 AI의 단어 학습 과정이 동일하죠? AI라고 칭하는 것들은 '기계'로 만들어져 있죠. 즉 기계가 학습한다고 하여 Machine-Learning 이라는 단어를 사용하기도 합니다. AI , 머신러닝, 딥러닝 차이를 모호하게 느껴졌을텐데요. 3가지가 비슷하다라고 생각해도 상관은 없습니다.

이 세가지 용어가 이와 같은 포함관계를 가지거든요.

3-2) Google Teachable Machine 이란?

'기계 학습(Machine-Learning)'이라는 의미는 이해가 되었는데, 그래서 어떻게 시작하라고?

그래서 우리는 'Machine learning 시작하기' 를 검색해봅니다.

R / Python / Keras / Tensorflow 이런 용어들이 튀어 나오면서 더 알고 싶지 않습니다. 다 때려쳐~~!!! ㅎㅎ

이런 분들을 위해 Google Teachable Machine이 있습니다.

> Google Teachable Machine 공식 홈페이지 : https://teachablemachine.withgoogle.com/

Google Teachable Machine은 기계학습을 쉽게 해주는 '툴'입니다. 사용법이 매우 간단합니다.

1단계 Gather : 컴퓨터가 학습을 하기 위한 데이터를 모읍니다.

2단계 Train : 컴퓨터가 학습을 합니다.

3단계 Export : 기계 학습이 완료된 결과(이하 모델, model)을 다운로드합니다.

요약해보면 '클릭 몇번으로 기계가 학습한 결과를 다운로드 받는다' 입니다.

4. 구현

Google Teachable Machine으로 마스크 착용 감지 모델을 만들고,

Goorm IDE로 AI서비스를 만들어보겠습니다.

[구현 순서]

Step by Step 으로 서비스를 완성해봅시다.

Step1	Google Teachable Machine으로 마스크 착용 감지 모델 생성하기
Step2	Goorm IDE로 AI서비스 만들기

Step1) Google Teachable Machine으로 마스크 착용 감지 모델 생성하기

Google Teachable Machine을 이용하여 마스크 착용을 학습한 '모델(model)'을 다운로드 받아보겠습니다.

아래 링크를 클릭합니다.

> Google Teachable Machine 공식 홈페이지 : https://teachablemachine.withgoogle.com/

먼저, 공식 홈페이지 (teachablemachine.withgoogle.com/)에 접속하여 [Get Started] 버튼을 클릭합니다.

Image, Audio, Pose 3가지 종류의 프로젝트를 지원합니다. 그중에서 Image Project를 선택합니다.

1단계 Gather -> 2단계 Train -> 3단계 Export 로 진행합니다.

1단계 Gather

AI가 학습(train)할 수 있는 데이터를 업로드 합니다.

2-3) 학습 데이터 수집 에서 다운로드(링크) 파일을 업로드하세요.

Class1에 마스크 착용 사진을 업로드 하고, 'with mask' 로 이름을 변경합니다.

Class2에 마스크 미착용 사진을 업로드 하고, 'without mask' 로 이름을 변경합니다.

2단계 Train

[Train Model] 버튼을 클릭하여 학습을 진행합니다.

점점 진행이 되면서(progress bar 확인) 조금 기다리면 학습이 완료됩니다.

3단계 Export

학습이 잘 되었는지 먼저 확인합니다.

펭수가 마스크를 착용하고 있는 사진으로 테스트를 해보겠습니다.

학습때 사용하지 않는 데이터로 테스트하는 것을 권장합니다.

잘 동작하네요. 100% 확률로 with mask임을 구별하는 모델이 만들어졌습니다.

이제 이 모델을 사용해서 서비스를 만들겁니다. 모델을 google cloud로 올리고, 올려진 모델을 사용해서 서비스를 만드는거지요.

[Export Model]을 클릭하고, upload(shareable link)를 선택 후 [Update my model] 을 클릭하세요.

link와 JavaScript를 복사해둡니다.

https://teachablemachine.withgoogle.com/models/DvF0PKkq6/

java script 소스 입니다.

<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@1.3.1/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@teachablemachine/image@0.8/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 = "https://teachablemachine.withgoogle.com/models/DvF0PKkq6/";

    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>

몇 번의 클릭만으로 마스크 착용여부를 판별하는 AI가 만들어졌습니다.

Step2) Groom IDE로 AI서비스 만들기

자, 이제 Groom IDE로 이동해보시죠.

Groom에 있는 Java Script와 Step1)에서 복사해둔 Java Script를 합치면 됩니다.

Groom에서 보이는 7~9라인을 복사해둔 Step1)의 내용으로 변경합니다.

그 후 [Open Preview] 버튼을 클릭하여, 웹화면에 보여지는 페이지가 만들어집니다.

빨간색으로 표기된 부분을 클릭하면, 웹 서비스가 시작됩니다.

[start]버튼을 누르면 카메라 허용여부를 묻는데요. [허용]버튼을 누릅니다.

카메라가 켜지면서 촬영이 시작됩니다.

사람이 마스크를 썼는지 안썼는지를 판단하는 AI서비스가 완성 되었습니다.

5. 요약정리

이번 장에서는 AI로 마스크 착용을 감지하는 프로젝트 를 진행했습니다.

AI가 '학습'하고 '추론' 이라는 개념에 대해서 학습해보았습니다. 사람이나, 기계나 학습하는 방법은 동일했죠?

Google Teachable Machine으로 학습을 시키고, 모델을 생성하여

Groom IDE를 통해 AI서비스를 만들어 보았습니다.

코딩 한줄 없이 클릭 몇번 만으로 AI서비스를 만들었습니다. 어떠세요? 재밌었나요?

ㅁ 참조

www.youtube.com/watch?v=OI3fZJHQF8Y

도움이 되셨다면, 좋아요 / 구독 버튼 눌러주세요~

저작자표시 비영리 변경금지

Comments

ai-creator