Teachable Machine을 이용하면 워낙 간편하게 기계학습모델을 생성하고 활용할 수 있기 떄문에 아이디어만 있으면 즉각 원하는 기능을 개발할 수 있다. 따라서 AI에 대한 지식이 없는 사람들도 일상의 아이디어를 부담없이 AI화 시켜보는 프로젝트들을 만드어 내고는 하는데 이 중 재미있는 몇가지 사례들을 살펴 본다.  

 

1. Tiny Sorter

 

    Teachable Machine으로 종류별 이미지들을 학습시켜 종류를 구분해 내는 것은 쉬우므로 여기에다 간단한 아두이노 기계장치를 부착하여 구분해낸 동류별로 각기 다른 접시에 나누어 담는 기능을 가진 Sorter 개발 사례.    

 

 

노트북 카메라에서 촬영한 이미지를 분류하고 분류된 결과값을 가지고 아두이노를 통해 서보모터를 오른쪽 또는 왼쪽으로 작동시켜 현재 촬영되는 물체를 각기 다른 방향으로 떨어트려 분류하는 기계.

 

 

상세한 제작 밥법 및 설계도면등은 다음 링크를 참조하면 된다.  

 

 

Tiny Sorter

Meet Tiny Sorter, a fun starter project that teaches you about machine learning and physical computing — together, in a hands-on DIY way. See how well you've trained your model by dropping in cereal and seeing if it goes into the right bucket. Align the

experiments.withgoogle.com

 

2. Teachable Snake 

 

Snake 게임을 키보드나 마우스 조작없이 카메라 앞에서 방향을 표시하는 종이를 가지고 회전시켜 움직이게하는 방식으로 변형시켜 보는 프로젝트  

 

 

화살표 방향을 그린 종이를 가지고 상하좌우 방향을 바꿔가며 학습시킨 후

Snake 게임을 할 때 카메라앞에서 방향표시 종이판의 방향을 판정하여 Snake가 움직이도록 React.js로 개발한 프로젝트

 

 

 

Teachable Snake by Vince MingPu Shao | Experiments with Google

Classic snake game controlled by webcam image using pre-trained neural network models.

experiments.withgoogle.com

 

 

3. Semi-Conductor

 

카메리 앞에서 손동작으로 오케스트라를 지휘하는 경험을 가능하게 하는 프로젝트

 

 

Teachable Machine에는 카메라앞 사람의 포즈를 인식하는 학습모델을 개발할 수 있기 때문에

이를 이용해 오케스트라 지휘자 처럼 웹캠 앞 사람의 손동작을 인식해서 악기선택,템포,볼륨 등을 조정하여 소리가 출력되도록 하는 프로젝트로서Teachable Machine PoseNet과 Tensorflow.js 를 이용해 개발되어 있다.      

 

구글Lab에서 개발하여 공개하는 프로젝트로서 다음 링크에서 공개된 소스코드를 볼 수 있다 

 

googlecreativelab/semi-conductor

Semi-Conductor allows you to conduct a virtual orchestra using only your web browser & webcam. - googlecreativelab/semi-conductor

github.com

 

 

 

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

 

 

1. 알리익스프레스 앱

 

 통상 알리익스프레스 검색이나 쇼핑은 화면이 큰 PC로 하는 것이 편리하지만 스마트폰 앱으로도 쇼핑할 수도 있는데 앱버전을 이용하게 되면 아주 편리한 기능이 있다.

 

스마트폰에 장착된 카메라를 이용하여 바로 상품을 검색할 수 있다는 것인데, 예를 들어 실물을 볼 수 있는데 이름을 몰라 뭐라고 검색해야 해당 물건을 찾아 구매할 수 있는지 몰라 난감할 때 즉석에서 아주 간편하게 해당 상품을 검색하고 구매할 수 있는 아주 편리한 기능이다. 

 

2. 알리 앱 설치 

  구글 Play스토어에서 "AliExpress"를 검색하여 설치한다.    

 

 

 

3. 사진촬영으로 물건 검색하기 

 

 

 

화면 상단 검색창 오른쪽에 있는 카메라모양의 아이콘을 선택하면 다음과 같이  사진을 촬영할 수 있는화면으로 전환되는데 여기에서 아래 붉은색 버튼을 클릭하여 원하는 물건의 사진을 찍기만 하면 된다. 

 

사진이 활영되면 즉시 해당 사진과 동일 모양의 상품들이 검색되어 다음과 같이 목록이 표시된다. 

 

 

4. 최초 사용자 할인 받기 

 

만약 알리익스프레스 앱을 최초로 사용하는 사용자라면 3만원 이상의 쿠폰을 받을 수 방법이 있다. 

 

 

홈화면에서 "초대코드 확인"이라는 메뉴를 선택하면 다음과 같은 화면이 표시되는데  

여기에서 초대코드 "ING3VIMD"를 입력하면 추가로 32,000원 상당의 쿠폰을 바로 발급받을 수 있다. 

 

 

 

 

+ Recent posts