머신러닝 이미지 탐색 (Coco SSD 활용)

카메라 앞에 여러 가지 물건이나 생물체를 가져다 놓으면 컴퓨터가 그것의 이름을 말해 줍니다. 만약 기기에 카메라가 없다면 실행되지 않습니다.

• 웹브라우저가 카메라의 접근을 물어오면 허용해 주시기 바랍니다. (개인정보는 보호되며, 서버에 저장되지 않습니다.)
• 모바일 기기는 CPU 성능이 좋은 것으로 접속해 주시기 바랍니다. (이미지 처리에 상당한 부하가 걸리네요. 가급적 PC 또는 노트북으로 접속바랍니다.)

프로그램 코드는 제가 짠 것이 아니구요, ml5 강좌(https://youtu.be/QEzRxnuaZCk)에 있던 것을 옮겨 온 다음, 제 서버에 맞게 조절만 했습니다.

<div id="myContainer"></div>
<div style="display: none;">
    <script src="https://github.com/processing/p5.js/releases/download/v1.5.0/p5.min.js"></script>
    <script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
    <script>
        let video;
        let detector;
        let myCanvas;
        let flippedVideo;
        function preload()
        {
            detector = ml5.objectDetector('cocossd');
        }
        function setup()
        {
            pixelDensity(1);
            frameRate(10);
            video = createCapture(VIDEO);
            video.size(640, 480);
            video.hide();
            //video = loadImage("Dsc02357.jpg");
            myCanvas = createCanvas(640, 480);
            myCanvas.parent("myContainer");
            textAlign(LEFT, TOP);
            textSize(20);
            strokeWeight(2);
            stroke(0);
            fill(255, 255, 0);
        }
        function draw()
        {
            flippedVideo = ml5.flipImage(video);
            detector.detect(flippedVideo, gotResult);
        }
        function gotResult(error, results)
        {
            image(flippedVideo, 0, 0, width, height);

            if(error)
            {
                text(error, 20, 400);
            }

            for (let i = 0; i < results.length; i++)
            {
                let object = results[i];

                noFill();
                stroke(0, 255, 0);
                rect(object.x, object.y, object.width, object.height);

                fill(255);
                stroke(0);
                text(object.label, object.x + 8, object.y + 8);
            }
        }
    </script>
</div>