YouTube 동영상 강좌 리뷰

YouTube 조코딩 동물상 테스트 만들기 3강 리뷰

Software for Digital Joy~ 2020. 12. 3. 19:21
반응형

www.youtube.com/watch?v=OI3fZJHQF8Y&list=PLU9-uwewPMe2-vtJAgWB6SNhHcTjJDgEO&index=3

  • Step 1. 동물상 예측 모델 만들기 : Teachable Machine 사용

https://teachablemachine.withgoogle.com/
Image Project 선택
강아지 상 이미지 업로드
이미지 업로드 결과. 데이터 클린징 작업 필요(관련없는 사진인 경우 삭제 처리)
동물상 분류
1.이미지 업로드 -> 2. 훈련(Traning)-> 3.Export your model
Export 모델 -> Upload 방식 선택
https://teachablemachine.withgoogle.com/models/IPa5eyD5H/
구름IDE -> HTML/CSS/JS 컨테이너 생성
컨테이너 생성. html/css 샘플 소스코드가 있다.
<body> 태그에 teachable machine에서 생성한 소스코드를 붙여 넣는다.
Webcam 실행 모습. 저는 강아지 상 이네요.

  • Step 2. Step 1에서는 웹켐으로 동물상을 판별 기능을 구현하였습니다. 다음은 웹켐이 아닌 이미지 업로드 방식으로 구현해 볼 예정입니다. codepen이라는 사이트에서 맞는 예제를 찾아서 구현해 봅니다.

codepen사이트에서 image upload로 검색. File upload input - Aaron Vanston 예제 선택 
HTML/CSS/JS 코드가 나옵니다.
코드 사용시 License 정보를 꼭 확인하세요. 

 

License 입력 후 주석처리
"Start" 버튼 밑에 HTML 소스코드 복사. 코드가 지저분할 때에는 Alt+Shift+P 로 정렬할 수 있습니다.
style.css 파일 복사
predict() 함수에 이미지를 넘겨야 함. 이미지를 넘기는 방법은 다음 구글 내용 참조
teachablemachine github 참조. 
이미지 엘리먼트 가져오는 소스
"예측" 버튼 이미지 추가. id="face-image" 추가함
다음과 같이 예측이 잘 되는 것을 볼수 있습니다.

여기까지 3강 강의 전체 입니다.

인공지능(ai) 기능을 일부 구현해 보고 웹 개발을 해보았습니다.

아직 유저 사용성이 매우 낮은 웹 페이지이기 때문에 다음에는 사용성을 높이는 기능을 중점적으로 구현하겠습니다.

 

아래 주소로 접속하시면 해당 페이지를 테스트 할 수 있습니다.

animal-face-fsyxd.run.goorm.io/animal-face/index.html

 

https://animal-face-fsyxd.run.goorm.io/animal-face/index.html

 

animal-face-fsyxd.run.goorm.io

 

728x90
반응형