안녕하세요. 소심비형입니다. 1부에 이어 2부에서는 티처블머신으로 만든 모델을 활용하기 위한 시스템을 구축합니다. 사실, OpenCV의 HAAR는 엔지엠에 이미 시스템이 구축되어 있습니다. 이미지 분류, 학습, 테스트가 한세트로 포함되어 있죠. 하지만, 텐서플로우는 테스트만 할 수 있습니다. 이미지 분류와 학습은 사용자가 직접해야 합니다. 그래서 관련 지식이 없다면 적용하기가 무척 어렵다는 단점이 존재합니다. 그래서~ 최대한 간단하게 할 수 있는 방법으로 이 내용을 진행합니다.

1부에서 다운로드 받은 모델을 사용하려면 웹 환경이 구축되어 있어야 합니다. 이미 구축되어 있을수도 있으니 크롬을 실행한 후 localhost를 입력해보세요. 아래와 같은 그림이 나타나면 웹이 로컬 컴퓨터에 구축되어 있는겁니다. 만약, 페이지를 찾을 수 없다고 나온다면 아래 절차대로 설치해야 합니다.

윈도우에 IIS(Internet Information Service) 설치하기

제어판을 실행하고, 아래 그림과 같이 ①프로그램 제거를 클릭하세요.

프로그램 및 기능창에서 ①Windows 기능 켜기/끄기를 클릭하세요.

①인터넷 정보 서비스에 체크하고 ②확인을 클릭하세요.

설치가 완료되었다면, 크롬에서 localhost를 입력하고 사이트가 정상적으로 표시되는지 확인하세요. 아마도... 로컬 사이트가 표시될겁니다. 이제부터는 비동기 호출할 수 있도록 권한을 추가해야 합니다. 첨부되어 있는 파일을 아래 경로에 복사하세요.

C:\inetpub\wwwroot

첨부 파일의 내용은 아래와 같습니다.

<?xml version="1.0" encoding="utf-8" ?>
<configuration>
  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>
</configuration>

1부에서 만든 모델의 압축을 해제하고, 위와 동일한 폴더에 복사하세요. 아래 그림과 같이 폴더안에 파일들이 있을겁니다.

노트패드(메모장) 또는 비주얼 스튜디오를 실행하고 아래와 같이 코딩한 다음 바탕화면에 index.html로 저장하세요.

<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>

간단한 테스트를 위해 바탕화면에 index.html로 저장했습니다. 위 코드에서 다운로드 받은 모델을 추가해야 하는데요. 아래와 같이 12라인의 코드를 수정하세요.

<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 = "http://localhost/tm-my-image-model/";

위에서 설치한 로컬 웹서버에 모델을 참조할 수 있도록 변경했습니다. 이제 바탕화면에 있는 index.html을 더블 클릭해서 실행하세요. 웹캠이 실행되고, 검출할 이미지를 웹캠에 보여주면, 결과 값을 확인할 수 있습니다. 아직 노트북을 수리하지 못해서 웹캠으로 테스트를 해보진 못했습니다-_-; 다음에는 웹캠이 아닌 이미지를 넣어서 검출하는 방법을 알아보도록 할께요~

감사합니다.