최종_개인 프로젝트_AI를 이용한 스쿼트 자세 보정 서비스 - seungyongjee/raspi-report GitHub Wiki

과정

    1. teachablemachine을 이용하여 모델 만들기
    1. 동작에 따라 실행할 mp3 파일 만들기
    1. 서비스를 제공할 웹사이트 제작
    1. 오류 수정
    1. raspberry pi에 실행하는지 확인

1. teachablemachine을 이용하여 모델 만들기

teachablemachine에 접속

  • teachablemachine.withgoogle.com 주소로 접속한다.
image
  • 포즈 프로젝트 - class 3개 생성
  • 각 class 이름을 변경합니다.
  • stand (서있는 자세)
  • squat (스퀴트 자세)
  • bent (잘못된 자세)
  • 웹캠으로 해당 자세(포즈)를 조금씩 움직여가며 촬영합니다.
  • 오른쪽 창에 [모델 학습시키기]를 눌러 촬영한 사진 학습시키기. (시간이 좀 걸립니다.)
  • 학습이 완료되면 미리보기를 통해 잘 출력되는지 확인하고 [모델 내보내기]를 누릅니다.
image
  • Tenserflow.js - 다운로드 로 모델을 다운받습니다.
image
  • 다운로드한 파일을 압축을 풀고
  • my_model 파일을 만들어 넣어 줍니다. (이유는 뒤에서 설명)
image
  • 웹서비스를 만들어야 하므로 HTML파일을 만들어야 합니다.
  • 자주 사용하는 vscode를 실행하여 새 파일 'index.html'을 만들어 줍니다.
  • 코드창에 ! , enter 를 입력하여 기본 HTML 창을 열고
  • 위 모델 다운로드 아래에 있는 예시 코드를 복사하여 칸에 붙여넣습니다.
image image

(모델들을 "./my_model/" 파일에서 불러들이는 코드이므로 같은 명의 파일을 생성한 것입니다.) image

2. 동작에 따라 실행할 mp3 파일 만들기

  • 서비스에 들어갈 음성(mp3)파일을 생성하기 위해
  • naver CLOVA volce를 이용 ( https://clova.ai/voice )
image
  • 네이버에 로그인하고 들어가 새 프로젝트를 만들면 아래 창이 나옵니다.
image
  • 더빙 추가로 음성을 선택할 수 있으며 [전체 보이스]에서 더 많은 음성을 선택 가능
image
  • 아래 칸에 원하는 음성의 대사를 입력하고 더빙을 추가한다. (미리 듣기로 들어볼 수 있습니다.)
  • 음성 확인 후, [다운로드]로 mp3파일로 저장합니다.
  • 1 ~ 10 까지 음성을 저장하고 ("10"파일은 이름을 "0"으로 작성)
  • 자세가 틀렸을 때 나오는 음성(다시)을 저장한다.
image
  • 저장한 mp3 파일들의 이름을 해당 번호로 바꾸고
  • my_model 폴더와 index.html 파일과 mp3 파일을 모두 한 폴더에 담는다.
image

3. 서비스를 제공할 웹사이트 제작

  • 먼저 우리가 만든 모델이 잘 작동하는지 확인하기 위해 index.html 파일을 실행하면 실행되지 않습니다.
  • 확인을 위해 F12를 눌러 콘솔창을 확인하게 되면 에러를 볼 수 있는데
  • 에러의 내용은 쉽게 말해 URL이 HTTP, HTTPS 형식으로 되어야 읽을수 있다는 오류가 있어서 해결하기 위해서 파일을 인터넷에 올려 사이트로 만들겠습니다.
image

netlify.com 가입하기

인터넷에 공개하기 위한 서버는 많이 있지만 저는 그 중 netlify.com를 이용하겠습니다.

https://app.netlify.com/

image
  • netlify.com에 접속, 가입 후에 Deploys에 들어가서
  • 우리가 만든 my_model 폴더와 index.html 파일과 mp3 파일을 담은 폴더를 아래 사진처럼 끌어 당겨서 넣어줍니다.
image image
  • 잘 작동합니다.

기능

  • 서비스의 주 목적은 스쿼트 자세 교정과 갯수를 음성으로 세어 주는 것입니다.

  • index.html을 vsCode로 실행하고 예제코드 중에 predict() 함수에 아래 코드를 입력합니다.

    if (prediction[0].probability.toFixed(2) > 0.90)
  {
      if(status == "squat"){
          count++;
          var audio = new Audio(count%10 + '.mp3');
          audio.load();
          audio.play();
      }
      status = "stand";
  } else if(prediction[1].probability.toFixed(2) == 1.00)
  {
      status = "squat";
  } else if(prediction[2].probability.toFixed(2) == 1.00)
  {
      if(status == "squat" || status == "stand"){
          var audio = new Audio('again.mp3');
          audio.load();
          audio.play();
      }
      status = "bent";
  }

  • 위 코드를 간단히 설명하면 webcam과 predict() 함수는 loop 함수를 통해 계속 실행하여 새로 고침되는데

  • predict() 함수가 실행될 마다 함수 밖에 작성한 두 변수를 상태에 따라 바꾸어주고

    var status = "stand"; var count = 0;

  • status가 "squat"일때, count를 1 올려주고 count에 맞는 음성을 실행합니다.

  • status가 "stand"나 "squat"일때, "bent"로 바뀔때, 'again.mp3' 파일이 실행되게 됩니다.

  • 수정한 파일을 다시 netlify.com에 Deploys하고 실행합니다.

5. raspberry pi에 실행하는지 확인

image
  • (동작은 잘 되지만 반응 속도가 약간 느립니다.)

마치며..

  • 웹 개발에 대한 지식도 옅은 관계로 하고 싶었지만 못하였던 서비스도 많았고 최종 결과물도 완벽하지 않다고 생각합니다. 부족한 점은 다시 보완하여 군더더기 없는 서비스를 만들어야겠다 생각합니다.

처음 진행하는 프로젝트인 만큼 부족한 점도 많았다고 생각합니다. 원하는 데로 동작하지 않을때, 수정에 수정을 거듭해도 오류가 잡히지 않을때의 심정은 이루어 말할 수 없습니다. 하지만 이 끝에 정상적으로 동작하는 서비스를 보았을 때의 심정도 이루어 말할 수 없습니다. 편하지 않은 인내 끝에 달콤함이 무엇인지 알게 되는 프로젝트였습니다.

⚠️ **GitHub.com Fallback** ⚠️