Teachable Machine을 이용하면 워낙 간편하게 기계학습모델을 생성하고 활용할 수 있기 떄문에 아이디어만 있으면 즉각 원하는 기능을 개발할 수 있다. 따라서 AI에 대한 지식이 없는 사람들도 일상의 아이디어를 부담없이 AI화 시켜보는 프로젝트들을 만드어 내고는 하는데 이 중 재미있는 몇가지 사례들을 살펴 본다.
1. Tiny Sorter
Teachable Machine으로 종류별 이미지들을 학습시켜 종류를 구분해 내는 것은 쉬우므로 여기에다 간단한 아두이노 기계장치를 부착하여 구분해낸 동류별로 각기 다른 접시에 나누어 담는 기능을 가진 Sorter 개발 사례.
노트북 카메라에서 촬영한 이미지를 분류하고 분류된 결과값을 가지고 아두이노를 통해 서보모터를 오른쪽 또는 왼쪽으로 작동시켜 현재 촬영되는 물체를 각기 다른 방향으로 떨어트려 분류하는 기계.
이전 포스팅 글에서 실습 제적된 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 에서는 학습된 모델로 웹카메라 촬영 프레임에 대해 판정하고
통상 알리익스프레스 검색이나 쇼핑은 화면이 큰 PC로 하는 것이 편리하지만 스마트폰 앱으로도 쇼핑할 수도 있는데 앱버전을 이용하게 되면 아주 편리한 기능이 있다.
스마트폰에 장착된 카메라를 이용하여 바로 상품을 검색할 수 있다는 것인데, 예를 들어 실물을 볼 수 있는데 이름을 몰라 뭐라고 검색해야 해당 물건을 찾아 구매할 수 있는지 몰라 난감할 때 즉석에서 아주 간편하게 해당 상품을 검색하고 구매할 수 있는 아주 편리한 기능이다.
2. 알리 앱 설치
구글 Play스토어에서 "AliExpress"를 검색하여 설치한다.
3. 사진촬영으로 물건 검색하기
화면 상단 검색창 오른쪽에 있는 카메라모양의 아이콘을 선택하면 다음과 같이 사진을 촬영할 수 있는화면으로 전환되는데 여기에서 아래 붉은색 버튼을 클릭하여 원하는 물건의 사진을 찍기만 하면 된다.
사진이 활영되면 즉시 해당 사진과 동일 모양의 상품들이 검색되어 다음과 같이 목록이 표시된다.
4. 최초 사용자 할인 받기
만약 알리익스프레스 앱을 최초로 사용하는 사용자라면 3만원 이상의 쿠폰을 받을 수 방법이 있다.
홈화면에서 "초대코드 확인"이라는 메뉴를 선택하면 다음과 같은 화면이 표시되는데
여기에서 초대코드 "ING3VIMD"를 입력하면 추가로 32,000원 상당의 쿠폰을 바로 발급받을 수 있다.
