조코딩 AI.2 Teachable Machine 동물상 찾기

tm-my-image-model.zip

2.14MB

참고 : 크롤링한 사진에서 얼굴 전처리 작업하기

연예인 얼굴 인식 서비스를 만들어보자 #1 - 학습 데이타 준비하기

---

[조코딩] 완성형 서비스 만들기 - 2

1. Teachable Machine에 이미지를 올려서 학습시킨다.

Teachable Machine

2. 학습시킨 결과물

teachablemachine.withgoogle.com/models/V9poYecHi/

3. VSC에 index.html을 만든다.

여기에 앞에서 학습시킨 결과물 코드를 복사해서 body태그 사이에 넣는다.

https://teachablemachine.withgoogle.com/models/Dw1U23VZf/

최상단 빨간 박스(업로드)버튼을 누른 뒤 Copy를 눌러야 내 url이 반영됨

 

4. CopePen에서 양식을 가져온다

내가 올린 이미지를 비교하는 것이기 때문에

검색어 : image upload

사용할 코드 : https://codepen.io/aaronvanston/pen/yNYOXR

File upload input

주의사항! 

라이센스, 저작권에 나온 조건을 읽고 사용할 것!

현재 조건은 라이센스를 복사해서 코드에 삽입하면 OK

index.html의</body> </html> 사이에 넣고 주석처리해주자.

5. 이제 Codepen의 코드를 복사 + 복여넣기하자

작성한 index.html코드 중 start 버튼 태그 바로 뒤에 코드를 붙여넣기한다.

코드가 복잡할 때는 Shift + Alt + F 를 누르거나 코드위에서 우측마우스를 클릭해서 Code Formatting을 클릭

6. 이제 CSS, JS도 복붙해주자

style.css 파일에 CSS 코드를 그대로 복붙

JS코드는 여기에 script태그를 만든 뒤 복붙

7. 이제 코드를 수정해보자

영상의 09:20에서 설명함

8. 필요없는 코드 삭제하기

(왼) 부분 삭제 (오) 해당 부분 코드 지우고 지운 부분에 '이미지'라고 써둠

지워줌

이거도 삭제처리

9.. 이제 '이미지'라고 임시 지정 부분에 뭘 넣어야될까?

우선 이 코드는 teachable machine에서 가져온 것이므로

검색어 : teachable machine document

 

 

googlecreativelab/teachablemachine-community

좌우가 왜 다른거지? (왼) 검색했더니 나온거 (오) 실제 사용할 자료

READ.ME를 읽어보면 코드를 어떻게 써야하는지 나와있는데

이 함수안에 HTMLImageElement와 flipped됐는지 여부를 넣어주면 된다고 한다.

10. 이를 이미지라고 적어둔 곳에 사용하자

이 코드는 원래 삭제돼야 하는 코드임. 그냥 읽고 밑에서 활용하셈

이 코드는 원래 삭제돼야 하는 코드임. 그냥 읽고 밑에서 활용하셈

사진이 있는 태그의 클래스 네임확인

확인한 클래스 네임 태그가 있는 곳에 이 id를 넣을 것이다

확인한 클래스 네임 태그를 검색해서 위치확인

확인한 클래스 네임 태그가 있는 곳에 이 id를 넣는다.

12. init()의 start 버튼 처럼 predict() 버튼 만들기

코드 : https://github.com/youtube-jocoding/animal-face-1/blob/master/index.html

youtube-jocoding/animal-face-1