Teachable Machine - 활용해보기

<먼저 이글을 읽기전 글쓴이는 TeachableMachine을 공부하기 위해 다음과 같은 사이트를 참고 하였습니다.>

https://www.youtube.com/watch?v=USQGTW34lO8&list=LLUSGPObgIu-SWJrA2wP0zDA&index=11&t=0s

 

인공지능 개발이 너무 쉬워서 6살짜리의 교육에도 이용한다는 

구글사의 Teachable Machine! 그 간단한 활용을 해보겠습니다.

 

먼저 사이트 주소입니다.

https://teachablemachine.withgoogle.com/

Teachable Machine

사이트에 들어가서 Get start 버튼을 눌러주면 3가지 방식이 나옵니다.

이중에 오늘은 Image Project를 간단히 활용해 볼것이지만 후에는 Pose Project로 간단한 체조 프로그램을 만들어 보겠습니다.

 

Image Project를 누르면 

두가지 방식의 이미지 학습 방법이 나옵니다.

Webcam, Upload 

저는 간편하게 노트북의 Webcam을 사용하는 방식을 골라보겠습니다.

 

이미지를 학습시키는 방법은 매우 간단합니다.

이미지를 비춘다음, Hold to Record를 누르고 있으면 Add Image Samples에서 이미지를 캡쳐해

Test 모집단을 만듭니다. 그리고 Class이름을 학습시킨 물체로 만들어 줍니다.

 

저는 어패류를 구분하는 프로그램을 만들어 보겠습니다.

image samples를 마련하셨다면  이제 Training Model 버튼을 눌러 학습을 시켜줍니다.

이때 탭을 바꾸면 안됩니다.

 

이제 학습이 완료되었다면 Test를 해봅시다.

이렇게 구분이 됩니다. 또 그냥 기존 이미지로도 구분할 수있습니다.

choose images from your files, or drag & drop here 

버튼을 누르고 이미지를 넣으면 

 

신기하네요 5분도 안되서 이미지 학습이 완료되었습니다.

이제 이렇게 학습한 모델 코드를 써먹어야 겠죠?

 

위의 export model 버튼을 누르면 3가지 버전으로 코드를 딸 수 있습니다.

Tensorflow 버전이 3가지가 있는데요. 상황에 맞게 쓰시면 되는데 

이 Tensorflow란 머신러닝을 쉽게 해주는 라이브러리 입니다. 머신러닝을 코드로 치지 않아도

이러한 라이브러리를 사용하면 쉽게 머신러닝을 사용할 수 있습니다.

 

이렇게 다운로드를 받아서 압축을 풀어 주면 위와 같이 3가지 파일이 나오게 됩니다.

이파일들은 아까학습한 이미지파일들이 아니라 이미지들을 구분할 수 있는 모델입니다.

이제 이 모델을 가지고 어패류도감 웹사이트를 만들어 보겠습니다.

 

먼저 index.html을 만들어줍니다.

편집을 위해서 연결프로그램을 sublime text로 바꿨습니다.

HTML기본양식을 입력해주면되는데 sublimetext에서는 html타이핑후 Tab키를 누르면 기본양식이 뜨며

나머지는 위코드를 참고해주시면 됩니다.

 

이제 JS코드를 복사해봅시다. 오른쪽의 Copy 버튼을 누르고 html 파일의 body부분에 ctrl + v를 하면

내용을 살펴보면

 

./my_model/이라는 폴더로 들어가서 model.json, metadat.json이라는 파일을 받고 있습니다.

이파일들은 아까 다운로드 받은 파일들 입니다.

 

const URL = 부분을 보면 ./my_model/ 이라고 되어 있습니다.

이것은  /파일폴더/ 형식이므로 이와 같이 파일명을 맞춰주겠습니다.

html파일을 저장하고 이제 html파일을 열어줍시다.

위와 같은 화면이 뜨지만 아직 실행되진 않습니다.

F12를 눌러 개발자 도구화면을 띄우면

이러한 에러가 뜨는 것을 볼수 있는데, 메세지를 보면 URL이 http나 https가 되어야 한다

고합니다.

(html, css관련 강의를 추후 듣고 블로그에 올릴 예정입니다. 기본 개념을 알고 추후 블로그 내용을 수정하겠습니다.)

해서 외부서버를 이용하여 웹사이트를 공개를 해봅시다.

 

netlify

- 무료

- 매우쉽다!

 

https://www.netlify.com/

Netlify: All-in-one platform for automating modern web projects

회원가입을 하고 로그인을 하면 (로그인은 github로 하는 것을 추천합니다.)

아래와 같은 화면이 뜨는데요 여기에 아까 만들어 놓았던 사이트를 업로드 해봅시다.

index.html과 my_model폴더가 들어있는 폴더를 단순히 드래그 해서 옮겨놓는것 만으로도 웹사이트 공개가 됩니다.

jolly-cori-545225이 명칭대로 deploy(웹사이트가 공개됨)이 올라간것을 알수 있습니다.

사이트 명이 맘에 안들면 site settings에 들어가면

이렇게 웹사이트 주소가 바뀌고 해당 웹사이트로 들어가면

start 버튼을 누르고 조금 기다린다면 다음과 같은 팝업창이 뜨고 허용을 누르면

이렇게 정상적으로 작동이 됩니다.

추후 css를 잘 배운후 위사이트를 좀더 예쁘게 꾸며 보겠습니다.

 

이제 이미지를 띄웠으니 이미지를 구분해서 설명을 붙여봅시다.

위코드를 보면 

본래 붙여져 있던 코드입니다.

계속해서 루프를 돌며 

const classPrediction = prediction[i].className + ": " + prediction[i].probability.toFixed(2);

을 표시하는데 이것이 

이 부분이고 실제 html 안에서 표현을

labelContainer.childNodes[i].innerHTML = classPrediction;

이렇게 한다는 것이므로

prediction[0]는 순서대로 conch, prediction[1]는 clam

 

prediction[0].probability.toFixed(2)가 1.00 이면 conch이므로

labelContainer.childNodes[i].innerHTML = "소라설명" 이런식으로 들어가면됩니다.

 

따라서 if else구문으로 완성을 하면

이제 웹페이지의 수정사항을 반영하기 위해서 다시 netlify를 들어가면

deploy 페이지를 찾아 다시 폴더를 업로드 해줍니다.

 반영이 완료되었다고 합니다.

 

다시 사이트를 열어보면

짠! 이렇게 훌륭하게 동작을 하는 것을 볼 수 있다.

 

https://doodream-seafood-illustration.netlify.app/

Document

위 과정대로 만든 사이트 입니다.