Teachable Machine 웹 활용2

이전 포스팅

1. 웹 AI 모델 고도화

*현재 웹캠인상태를 이미지 업로드로 변경합니다.

a. 현 버전의 카피본 만들기

이전에 만들었던 index.html 파일을 복사하여 
index2.html을 만듭니다.
index2.html을 서버에 올려서 정상작동하는지 확인합니다.

b. 이미지 업로드 기능 추가하기

	이미지 업로드 버튼을 직접 추가해도 되지만, 
    코드펜(https://codepen.io/)를 이용하여
    다른 개발자들이 공유한 오픈소스를 가져옵니다.
    

저는 2페이지의 'Image Upload with preview'가 깔끔하게
느껴져서 이걸로 선택해서 사용하기로 했습니다.

c. 소스 이식하기

빨간박스 안에 3개 (HTML, Less, Js)로 3개를 모두 현재
작업중인 웹페이지에 넣어줘야 정상작동합니다.

c-1. HTML / 소스는 일단 아래처럼 넣어줍니다.

c-2 Less / 소스는 디자인으로 소스 최상단에 style 로 묶어서 아래 넣어줍니다.

너무 길어서 저는 중간을 생략했습니다. 여러분들은 그대로 넣어주시면 됩니다.
<style> Less 소스 </style> 
이렇게 맨위에 추가하셔야합니다.

c-3 Js / 소스는 동작 소스로 소스 하단 script 부분맨 아래에 넣어줍니다.

프로젝트 보시면 predict()부분 아래에  </script> 위에 넣어주시면 됩니다.

c-3.1 Js를 제대로 사용해주시 위해서는 제이쿼리를 받아와주셔야 합니다.

</style> 아랫줄에 넣어주시면 됩니다.
*Js 사용에 있어서 편의성의 용도로 사용되는 제이쿼리라고 합니다.

d. 이미지 업로드 기능 확인

이렇게 나오시면 정상적으로 넣으신것입니다.
이미지 우측위의 버튼을 누르면 이미지 확인할수 있습니다.

2. 웹캠 제거 후 이미지 업로드 수정

a. 먼저 현재 있는 소스에서 웹캠 부분을 제거합니다.
(*캠 세팅 및 루프 부분 제거)

위 2개 부분 제거 (캠 세팅 / 루프 부분 )

b. 버튼 및 숨긴 이미지 추가 및 기능

이미지 업로드 이후 분석해야하므로 추가적인 버튼을 추가합니다.

이미지 프리뷰 아래에 이미지 숨김으로 추가

새로 만든 이미지에도 이미지 업로드

이미지 분석할때 새로 만든 이미지로 분석 

c. 실행화면

3. 마무리

이렇게 해서 웹캠으로 실시간 분석하던 서비스를 이미지 업로드로 결과를 볼수있게 하였습니다. 추가로 이미지를 바꿔가면서 결과값이 바뀌는 것을 확인 할수 있습니다.

그밖에도 웹서비스의 장점은 모바일로 접속해도 기능이 정상 작동하는 편입니다. 큰 무리없는 기능들만을 사용했으니 모바일에서도 작동하므로 한번 모바일로 접속해보는것도 추천드립니다.