Teachable Machine을 활용한 웹페이지만들기

URL: aishindan-sakakb.netlify.app/

나와 인연인 사카미치AKB 멤버 찾기

 

개요

 

구글의 Teachable Machine으로 사카미치 그룹(노기자카46, 사쿠라자카46, 히나타자카46)과 AKB48 멤버들중,

졸업자 포함, 멤버 43명의 얼굴 데이터셋을 학습시킨 후, 그 결과를 웹페이지 형식으로 출력하는 작업을 해봤다.

 

멤버 얼굴 데이터셋은 각각 300장으로 해서 학습을 진행했다.

 

웹페이지는 HTML/CSS를 사용해서 만들었고 JavaScript, JQuery 요소도 포함되어있다.

 

원래는 학습시킨 데이터와 사용자가 업로드한 사진을 비교하여 사진과 가장 닮은 멤버를 알려주는 컨셉의 사이트였지만

결과가 부정확한것도 있고, 재미를 위해서 가장 닮은 멤버 => 나와 가장 잘 어울리는 멤버 라는 애정도 진단 컨셉으로 바꿨다.

 

 

어려웠던 점

 

1. 학습 결과의 부정확함

데이터셋은 Selenium을 활용한 구글 이미지 크롤링 프로그램으로 다운을 받았는데, 43명 중에서는 비인기 멤버들이 상당수 존재해서 구글 이미지 검색결과에 제대로 나오지 않는 경우가 많았다.

얼굴 데이터를 학습하기 위해선 얼굴만 나온 사진이 필요했는데, 그런 사진은 별로 없었다.

이건 차라리 멤버들의 인스타그램을 크롤링해서 사진을 가져오는 게 나았을지도 모르겠다.

 

각 멤버당 학습 정확도가 별로 좋지않다

 

2. 일본어 버전 웹페이지 만들기

아무래도 일본 아이돌이기 때문에 일본어 버전의 웹페이지도 만들면 좋겠다고 생각했다.

그런데 어떤 방식으로 인덱스 페이지와 연결 할 수 있을지 고민이 되었다.

 

맨처음엔 언어별로 웹페이지를 만든 후, href 태그를 사용하여 각각 따로 메인페이지에서 리다이렉트 하는 방법을

생각했지만, 언어별로 웹페이지를 따로 만들어서 각각 호스팅한다는 것이 비효율적일 것 같아서 포기했다.

 

두번째로 생각한 방법이 국가코드명으로 서브디렉토리를 만들어서 사용하는 방법이었고, 생각한대로 언어별 웹페이지를 제공할 수 있었다.

 

 

한국어 버전

일본어 버전

 

 

 

홍보하기

 

일본어 버전 웹사이트 홍보를 위해 트위터 봇을 만들어 홍보하도록 했다.

 

눈물의 홍보

트위터 봇까지 만들어서 홍보한 것 치고는 일본 접속자는 많지않다

 

 

결론

 

그동안 HTML/CSS를 제대로 다뤄본 적은 없었지만, 이번 프로젝트를 진행하며 많은 공부를 할 수 있었다.

특히 조코딩님의 유튜브 채널에서 많은 도움을 받았다.

앞으로 사이트를 하나하나 개선하는것도 많은 공부가 될 것 같다.

 

Github: github.com/Uoaki/AIshindan

Uoaki/AIshindan

 

 

조코딩님의 유튜브 채널: www.youtube.com/channel/UCQNE2JmbasNYbjGAcuBiRRg