2022년 8월 29일
•
신우승 : 실습 참여, 노션 작성, 자료 수집
•
김원준 :
프로젝트 계획
1.
구글 티처블 머신을 활용한 AI 구축
•
기본 웹캠으로 AI 구축
•
데이터 취득 후 AI 구축
2.
Replit을 활용한 웹 구축
•
AI 탑재를 위한 기본 HTML 웹 뼈대 구축 및 AI(구글 티처블 머신 제작) 탑재
3.
자바 스크립트를 활용한 AI 출력 코드 변경
•
출력 문자 바꾸기
4.
TTS(Test to Speak) 자바 스크립트 코드를 활용한 AI 음성 지원
Teachable Machine
Teachable Machine이란 무엇인가?
티처블 머신은 웹캠이나 파일로 AI를 구축해서 간단하게 머신러닝 모델의 학습 과정을 쉽게 이해하고 직접 모델을 생성해 활용할 수 있다.
구글 티처블 머신을 활용한 AI 구축
기본 웹캠으로 AI 구축
티처블 머신을 사용해 핸드폰과 지갑, 그리고 아무것도 없음을 녹화하고 그걸 감지하게 만들었더니 잘 작동했다.
데이터 취득 후 AI 구축
이번엔 검색을 통해서 강아지와 고양이의 얼굴 데이터를 가져와보자
일단 검색을 통해서 많은 사진들을 가져왔다.
이번엔 녹화가 아닌 아까 모아둔 자료를 업로드해서 대상이 강아지상인지 고양이상인지 구별하게 만들어봤다.
이번에도 역시 잘 작동했다.
Replit을 활용한 웹 구축
이번엔 방금 만든 동물상 판독기를 사이트에 적용시켜보자.
일단 Replit을 이용해 사이트를 구축해보자.
정말 오랜만에 보는 화면이지만 그만큼 익숙하기도 하다.
예전에 했던 대로 코드를 적어 내려갔다.
일단 메인으로 보일 부분을 만들어주고
아까 만든 판독기에서 코드를 복사해서
넣어주면 아주 간단하게 판독기를 만들 수 있다.
만든 웹에 TTS 넣어보기
방금까지는 웹에다가 동물상 판독기를 넣어서 무슨 동물상에 가까운지 수치로 보여줬었다.
이번엔 수치 대신 어떤 동물상인지 나오게 만들어보자.
일단 방금까지 사용하던 수치로 나오게 해주는 코드를 주석으로 바꿔서 사용되지 못하게 만들어 주자.
그리고 따로 코드를 적어서
이런 식으로 어떤 동물상인지 70%가 넘어가면
메세지가 뜨게 만들고 그게 아니라면 둘 다
닮았다고 나오게 만들었다.
정확한 수치를 알 수는 없지만 확실히 보기 편해졌다.
여기까진 쉬웠으니 이제 TTS를 넣어보자
일단 인터넷에 TTS HTML을 검색해서 거기 있는 코드를 가져와봤다.
대충 이런 식으로 생겼다.
우리는 밑에 있는 이 부분이 필요하기 때문에 이걸 복사해서
Script.js에다가 붙여 넣어 주자.
이렇게 하면 이제 TTS 사용 준비가 끝난거다.
이제 우리는 코드 하나를 추가해야 하는데
이런 식으로 key라는 변수를 만들어서
총 3가지가 인식이 되도록 해주자.
이제 Key1 = 2 이런 식으로 해줘서 2가 되면 발동이 되지만 한 번만 작동이 되도록 해주자
이렇게 해줘야 연속으로 출력 되는 걸 막아준다.
