Teachable Machine 에서 제작된 AI학습모델로 웹서비스 만들기

2021. 3. 10. 09:06

Teachable Machine으로 AI머신러닝 실습

1. AI학습모델 실습의 범위 여기에서는 사자,호랑이 두가지 동물들의 이미지를 학습시킨 후 비슷한 동물들의 사진을 주었을 때 어떤 동물인지 AI가 판정하도록 하는 간단한 AI 모델을 만들어 보

makernambo.com

이전 포스팅 글에서 실습 제적된 AI학습 모델을 Preview 등으로 검증한 후에는 이 모델을 이용하는 웹서비스를 간편한 방법으로 웹서비스 형태로 제작,배포할 수 있다.

1. 학습된 모델 Export

"Export Model"메뉴를 클릭하면 제작된 학습모델을 추출할 수 있는 화면으로 연결된다.

추출할 수 있는 형태는 용도별로 Tensorflow.js, Tensorflow,Tensorflow Lite 세가지 인데

- Tensorflow.js 는 Web Page제작시 사용할 있는 Java Script형태로 추출한다.

- Tensorflowsms 는 Pyton 등 언어에서 직접 사용할 수 있는 Native Tensor flow현태로 추출된다

- Tensorflow Lite는 Mobile환경에서 사용할 수 있는 형태의 학습모델이다.

제작된 학습모델을 사용하는 방법은 Download 받아 직접 서비스를 제작하는 방법도 있고 구글 클라우드 서비스에 올려 놓고 이를 호출해서 사용하는 방법이 있다.

2. 구글 클라우드 서비스 이용방법

"Upload"를 선택하고 "Upload my cloud model"을 클릭하면 잠시 후에 하단에 Link주소가 표시된다.

이 링크를 웹브러우저에 복사해서 접속하면 제작된 AI학습모델 서비스로 바로 연결된다. 또 스마트폰에서도 웹브라우저를 기동시켜 이 주소로 접속하면 웹서비스를 사용할 수 있고 스마트폰 카메라나 이미지갤러리와도 연결되어 작동도 된다.

2. Download 받아 직접 웹서비스를 제작하는 방법

"Download"를 선택하고 "Download my cloud"를 클릭하면 압축파일 형태로 AI학습모델이 PC로 다운로드된다.

다운로드된 압축파일에는 다음과 같이 3개의 파일이 포함되어 있다

압축을 해제하여 생성된 파일들을 웹서비스 홈 디렉토리 아래에 /my_model 이라는 디렉토리를 만들어 넣어 준다.

그리고 원하는 웹 페이지를 Teachable Machine에서 제공하는 다음의 sample code를 참조하여 제작하면 되는데,

이 sample 코드를 표시하고자 하는 html파일의 <Body> Tag에 넣어 주어 테스트 해 볼 수 있다.

<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 = "./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>

-25 라인 : 다운로드 받아 설치한 AI 학습모델을 웹페이지에 로드한다.

-33번쨰 라인에 의해 지정된 loop function에서 웹카메라 촬영 프레임을 읽고 predict function을 호출 한다.

-predict function 에서는 학습된 모델로 웹카메라 촬영 프레임에 대해 판정하고

그 결과를 innerHTML에 연결하여 웹페이지에 Display되도록 한다.

위 샘플 코드에 대한 상세 설명은 다음 링크 페이지에서 참조할 수 있다

googlecreativelab/teachablemachine-community

Example code snippets and machine learning code for Teachable Machine - googlecreativelab/teachablemachine-community

github.com

'메이킹프로젝트 > AI 툴과 프로젝트' 카테고리의 다른 글

미디어파이프(MediaPipe)로 AI python프로그램 개발하기 (0)	2021.08.19
구글 AI 프레임워크 미디어파이프(MediaPipe) 소개 (1)	2021.08.02
Teachable Machine 재미있는 개발 프로젝트들 (0)	2021.03.12
Teachable Machine으로 AI머신러닝 실습 (0)	2021.03.01
Teachable Machine : 초간편 AI웹서비스 (0)	2021.02.28

남보공방