참고 : 조코딩 - 웹캠 없이 Teachable Machine으로 나와 닮은 동물상 찾기 | 수익형 웹, 앱 만들기 2강
https://www.youtube.com/watch?v=OI3fZJHQF8Y&list=PLU9-uwewPMe2-vtJAgWB6SNhHcTjJDgEO&index=2
웹캠 사용하지 않고 이미지를 업로드 하거나 촬영해서 사용하는 서비스 만들기.
동물상 예측 모델 만들기 - Teacherable machine
!! 클로링 한 대표 동물상 연예인 사진 필요.
이걸로 이미지 학습 시킴
get started > image project
- 다운 받은 사진 데이터 동물상 별로 분류 후 학습
동물별로 클래스 만들구 해당 사진 학습
- 데이터 클랜징(얼굴 인식에 적합하지 않은 이미지 등 삭제)
ex) Dog 클래스 만들고 업로드 버튼 > 클롤링한 강아지상 사진 올리기
나머지도 같은 방식으로.
- Train model 로 학습시키기 + 검증
버튼 누르면 model trained.
검증 -> preview 창에서 웹캠 대신 file로 바꾸고 다른 사진 넣어서 테스트
++ 정확한 결과를 얻으려면 얼굴만 인식하는 이미지 사용하는게 좋음.
- 모델 사용하기
모델을 외부로 반출하기 - 업로드하면 클라우드 상에 올라가서 링크타고 가면 언제든 접근 가능함. 다운로드 보다 속도가 빠름
Export model > upload > 주소 받기
- 구름 IDE 로그인 > 새컨테이너 생성
컨테이너: 웹을 만들거니까 스텍은 hmtl css js
코드 작성하기
만든 모델 아래 예시 코드를 <body> 에 복붙
open preview > 외부로 열기 누르면 웹캠으로 보임.
사진 업로드 방식으로 바꾸기 (사진 첨부 기능 구현)
-
Codepen 사용 : 코드 가져다 쓸 수 있게 해주는 사이트
codepen.ioimage upload 검색 > 적당한 것 찾아라(file upload input)
-
코드 그대로 가져오기 (comment에 lisence 확인해야해.)
라이센스 복사해서 바디 뒤에 주석으로 달기
html 전체 코드 복사해서 원 코드 start 버튼 아리애 붙이기
++ 지저분한 코드 정렬 : 마우스 오른> 코드 포메팅> html 포맷
or Alt+shift+P : 자동정렬 -
css도 복사 > style.css 파일 비우고 붙이기
-
js 코드는 html 하단에 다른 스크립트랑 넣어주기
<script> </script>요거로 감싸서->> 페이지를 보면 웹캠 위에 이미지 첨부할 수 있는 파트가
있는걸 알 수 있음.
웹캠이 업로드한 이미지를 인식하도록 하기
-
F12 를 통해서 업로드 한 이미지 코드를 확인하고
-
코드로 돌아와서 웹캠 부분에 업로드이미지 코드로 바꿔주기
코드 에서 webcame 부분은 "이미지"로 바꾸고 웹캠을 업데이트 해주는 loop함수는 필요 없음. > 필요없는 코드 정리하기 -
predic 함수에 이미지 넣기 > 구글링
"teachable machine document" 검색해서 공식 깃허브 찾기
코드 어케 사용하는지 설명 나옴.
이 중 MOdel - predict 부분 설명 보기
변수를 만들고 이미지 코드를 가져옴
var image = document.getElecmentByID("face-image")이르케 하고 face-image 를 복사하고 아까 찾은 업로드 이미지 부분(class = "file-upload-image" )을 찾기 (ctrl + F)
클래스 뒤에 아이디 추가
<img class = "file-upload-image" id = "face-image">->> 이러면 id를 통해서 hmtl 엘리번트를 선택해서 가져올 수 있음.
이제 변수 image를 predict 함수 안쪽에 넣어줌
4. 다큐먼트에서 flipped 여부가 있었는데
안뒤집혔으니까 함수의 두번째 인자로 flipped 가 있었는데 false로 하고 저장
const predicton = await model.predict(image, false);-
화면에 웹캠을 표시하는 코드도 지워주고 저장.
-
predict를 실행해 줄 버튼 따로 만들기
-- 원래는 루프 돌면서 계쏙 실행하는 거였는데 루프가 없으니까.
init 하는 스타트 버튼 복사해서 밑에 복붙하고
init 대신 predict() 넣어줌. Start라는 이름 대신 Predict로 바꿔줌.
확인
- 스타트 버튼 - 모델 불러오기
- 이미지 첨부
- predict 버튼
++ 스마트 폰으로도 가능.
