Teachable Machine 활용하기

*Teachable Machine을 웹 서버에 옮겨서 사용해보자

1. AI 모델 추출해서 웹서버에 올리기

a. ai 모델 다운로드 및 예제 소스

AI 모델 내보내기

생성한 AI를 웹서버에 옮기기 위해 일단 내보내기로 모델을 다운받습니다. 
1. 모델 내보내기 클릭
2. 다운로드 방식으로 변경하여 다운로드 (#1)
3. 소스 코드 통째로 복사 (#2)

b. 예제 소스 적용하기

예제 소스 옮기기
1. my_model 이라는 폴더를 생성합니다.
2. 위 (#1)에서 다운로드 한 파일을 전부 my_model 안에 옮겨줍니다.
3. index.html 파일을 생성 혹은 기존 파일을 사용합니다.
4. index 파일 안에 내용은 전부 지운 뒤, 위 (#2)에서 복사한 소스코드를 붙여넣습니다.
5. index.html 안에 내용중에 
	"./my_model/";  -> "my_model/"; 
	위처럼 수정해줍니다.

c. 소스 분석

개발 언어 수업이 아니기 때문에 깊게 소스를 분석을 할 필요까지는 없지만, 목적에 맞게 수정 및 추가를 위해서는 위해서는 어느정도의 이해가 필요하다고 생각되어 간단하게 소스를 설명 드리려고 합니다.

위 부분은 html 언어로 텍스트, 이미지, 버튼 등으로 보여지는 부분을 추가/수정할수 있는 부분입니다. 
간단히 보시면 문구와 버튼과 웹캠, 라벨로 구성되어 있습니다.

부터 끝까지는 자바스크립트 언어로 동작 및 웹의 기능적인 부분을 담당하는 부분입니다.

위의 소스를 간단히 설명 드리자면,
1. html 언어 부분에서 button을 onclick (한번 클릭)하면 init()을 실행
2. init()은 아래의 자바스크립트의 init()을 실행하게됩니다.
3. init 안의 내용은 내려받은 ai 모델을 불러와서 준비 실행하겠다는 말이고,
4. 웹캠을 세팅해서 사용하겠다. 그리고 반복해서 예측을 하겠다입니다.

=> 스타트 버튼을 누르면 웹캠이 켜지고 웹캠에서 받은 이미지를 실시간으로 ai로 예측해서 결과값을 띄어주겠다.

d. 결과 화면

*기존에는 문제없이 작동했으나, 현재는 웹캠이 보안상의 이유로 ssl키를 필요로 합니다.
따라서 2가지 방법중 하나를 선택해서 수정해 주어야합니다.
1. 아파치 서버에 ssl을 추가해준다. 참고링크 (ssl 적용후 https로 접속해야함)
2. 웹캠이 아닌 이미지를 올리는 형태로 바꿔준다.

2. 마무리

위처럼 간단하게 google Teachable Machine에서 Ai 모델을 직접 학습시켜서 내려받아서 자신의 서버에 올려서 하나의 서비스를 만드는 프로젝트를 진행해 보았습니다.

이 방법은 개발 언어에 아직 미숙한 분들에게 추천드리는 방법입니다. 추후에는 직접 모델도 만들어서 ai를 만들어보시길 바랍니다.

다음 게시물에서는 위에서 만든 웹에 담긴 모델을 좀 더 다듬어 보도록 하겠습니다.