앱인벤터 AIDance 앱-설계편
앱인벤터 홈페이지에 나와 있는 튜터리얼을 참고해서 작성한 것이다. 튜터리얼의 목적은 앱인벤터의 많은 블록은 이해하고 활용할 수 있도록 도와주는 프로그램들로 구성되어 있다.
춤처럼 유기적이고 복잡한 것이 AI의 도움으로 정량화되고 측정되고 수학적으로 연구될 수 있을까? 이 프로젝트에서 당신은 댄서의 움직임을 추적하고 몇 가지 기본적인 춤 동작을 인식할 수 있는 AI 기반 앱을 만들 것이다.
춤추는거 좋아해?
\그걸 잘하세요?
개선하고 싶으십니까?
놀라운 춤을 설명하고 식별하거나 측정할 수 있는 알고리즘이 있나요?
춤 동작을 정량화하고 측정할 수 있습니까?
인공지능이 당신의 춤 실력을 향상시키는 데 도움이 될 수 있나요?
이 프로젝트에서는 새로운 AI 기술 포즈넷을 사용하여 골격 모델을 만들기 위해 신체의 핵심 포인트를 추적하고 일부 춤 동작을 정량화, 측정 및 식별하는 몇 가지 기본 방법을 개발하는 방법을 배울 것이다.
자, 이제 시작해보자...
AIDance 앱 디자인
사용자 인터페이스는 다음과 같습니다.
'Swap Camera' 버튼은 사용자가 원하는 대로 카메라 보기를 전면에서 후면으로 전환한다.
'Canvas Live' 버튼은 캔버스 배경을 검은색 실시간 카메라 보기로 전환한다.
'Reset Score' 버튼은 댄스 점수를 다시 0으로 설정한다.
WebViewer 컴포넌트는 카메라 뷰를 캐스팅할 위치이고,
Canvas 컴포넌트는 검은색 배경 또는 라이브 카메라 뷰 배경에 대해 신체의 골격 모델을 생성할 위치이다.
WebViewer 컴포넌트와 캔버스 컴포넌트의 치수가 일치해야 신체 추적이 용이하다.
PosenetExtension 컴포넌트는 신체의 주요 지점을 추적하는 데 사용할 AI 컴포넌트로 신체의 골격 버전을 구축하는 데 도움이 될 것이다.
PoseNet 핵심 기술 요소
포즈넷이 추적하는 신체의 핵심 포인트는 눈, 귀, 코, 어깨, 팔꿈치, 손목, 엉덩이, 무릎, 발목이다.
PoseNet은 신체 키 포인트를 추적할 수 있을 때마다 키 포인트의 x와 y 좌표를 나타내는 두 요소의 목록을 반환한다. PoseNet이 본문 키 포인트를 추적할 수 없는 경우 빈 목록을 반환한다.
AIDance 앱 기본 설계
카메라를 통해 비춰지는 사람의 동작을 인색해서 점수를 매기는 앱이다. PostNet Extension은 카메라을 통해 수집한 사람의 동작들을 크게 눈동자, 어깨, 팔뚝, 주먹, 힙, 무릎 그리고 발목 등의 포인트를 인지하고 각 지점별로 선과 점을 그린다.
AIDance 앱 컴포넌트
앱인벤터 구성 요소는 디자이너 창의 왼쪽 팔레트 제목에 있다. 컴포넌트는 안드로이드 폰이나 아이폰에서 앱을 만들 때 사용하는 기본 요소이다. 가장 핵심적인 컴포넌트는 PosNet Extension과 카메라 그리고 웹뷰 컴포넌트이다. 나머지는 화면에 사용자에게 안내하는 이미지나 표시 문구등이다.
컴포넌트 리스트
. 3개 이미지 컴포넌트 : 3개의 춤 동작 관련 이미지를 표시한다.
. 수평배치 컴포넌트 : 3개의 이미지 컴포넌트를 수평배치한다.
레이블 컴포넌트 : 'Status'를 표시한다.
레이블 컴포넌트 : status 값을 표시한다. 예로 'waiting', 'Ready', 'errorMessage' 등이 표시된다.
버튼 컴포넌트 : 'Canvas Live'로 검은색 배경 또는 라이브 카메라 뷰 배경에 대해 신체의 골격 모델을 생성할 위치를 설정하는 버튼 컴포넌트이다.
버튼 컴포넌트 : 'Swap Camera' 가 표시되고, 카메라의 전면 혹은 후면을 설정한다.
수평배치 컴포넌트 : 상기 레이블 2, 버튼 2개의 컴포넌트를 수평배치한다.
버튼 컴포넌트 : 'Reset Score'가 표시되고, DanceScore의 텍스트값을 0으로 초기화한다.
레이블 컴포넌트 : 'Dance Score =' 을 표시한다.
레이블 컴포넌트 : DanceScore 레이블로 댄스 점수값을 저장하며 화면에 표시한다.
수평배치 컴포넌트 : 버튼, 레이블 2개의 컴포넌트를 수평배치한다.
캔버스 컴포넌트 : 카메로를 통해 PosNet Extension을 거쳐 화면에 움직임 동작을 표시한다.
웹뷰 컴포넌트 : 컴포넌트와 캔버스 컴포넌트의 치수가 일치해야 신체 추적이 용이하다.
아래 그림은 AIDance 앱의 컴포넌트 그림이다.
이미지 컴포넌트 설정값 설정하기
"DanceImage1.png"를 파일을 화면에 표시한다.
높이 : 85픽셀
너비 : 85픽셀
이미지 : DanceImage1.png
이미지 컴포넌트 설정값 설정하기
"DanceImage2.png"를 파일을 화면에 표시한다.
높이 : 85픽셀
너비 : 85픽셀
이미지 : DanceImage2.png
이미지 컴포넌트 설정값 설정하기
"DanceImage3.png"를 파일을 화면에 표시한다.
높이 : 85픽셀
너비 : 85픽셀
이미지 : DanceImage3.png
수평배치 컴포넌트 설정값 설정하기
수직정렬 : 가운데
레이블 컴포넌트 설정값 설정하기
'Status : '를 표시한다.
텍스트 : Status :
텍스트색상 : 빨강색
레이블 컴포넌트 설정값 설정하기
status 값을 표시한다.
텍스트 : waiting
텍스트색상 : 빨강색
버튼 컴포넌트 설정값 설정하기
'Canvas Live' 를 표시하고 카메라를 통한 동영상을 Canvas에 표시한다.
배경색 : 초록
텍스트 : Canvas Live
텍스트정렬 : 가운데
버튼 컴포넌트 설정값 설정하기
'Swap Camera' 를 표시하고 전면, 후면 카메라를 설정한다.
배경색 : 자홍색
텍스트 : Swap Camera
텍스트정렬 : 가운데
수평배치 컴포넌트 설정값 설정하기
레이블2개, 버튼 2개 컴포넌트를 수평배치한다.
수직정렬 : 가운데
버튼 컴포넌트 설정값 설정하기
'Reset Score' 를 표시하고 DanceScore 레이블의 텍스트를 0으로 초기화한다.
배경색 : 청록색
텍스트 : Reset Score
텍스트정렬 : 가운데
텍스트색상 : 파랑
레이블 컴포넌트 설정값 설정하기
'Dance Score = '을 표시한다.
글꼴크기 : 30
텍스트 : Dance Score =
텍스트색상 : 빨강색
레이블 컴포넌트 설정값 설정하기
점수를 표시한다.
글꼴크기 : 30
텍스트 : 0
텍스트색상 : 빨강색
수평배치 컴포넌트 설정값 설정하기
버튼 1개, 레이블2개를 수평배치한다.
수평정렬 : 가운데
수직정렬 : 가운데
배경색 : 파랑
캔버스 컴포넌트 설정값 설정하기
높이 : 250픽셀
너비 : 300픽셀
웹뷰 컴포넌트 설정값 설정하기
높이 : 250픽셀
너비 : 300픽셀
PosNet 컴포넌트 설정값 설정하기
MinPartConfidence : 0.5
MinPoseConfidence : 0.1
MinSkeletonConfidence : 0.5
UseCamera : Front
WebViewr : WebViewer1
지금까지 AIDance 앱의 설계편을 작성하였다. 실제로 PoseNet AI엔진을 통해 관절과 마디 등을 추출하고 원하는 포즈를 확인하고 댄스 포인트를 추가하는 설계 작업을 완료하였다. 실제로 코딩을 어떻게 하는지 앱인벤터 AIDance 앱-코딩편을 꼭 블록을 쌓으면서 확인하고 테스트 해볼 것을 추천한다.
눈으로 보는 것과 직접 실행하며 하는 것은 완전히 달라요.
간단하지만 직접 해보면 이해하고 자신감이 생길거에요...
Just Do It!!!
Just Drag&Drop It!!!
감사합니다.
'앱인벤터 > 앱인벤터 코딩따라하기' 카테고리의 다른 글
| 앱인벤터 GPS 정확도 기록 앱 (0) | 2022.12.16 |
|---|---|
| 앱인벤터 클라우드DB 채팅 앱 (0) | 2022.12.15 |
| 앱인벤터 북클럽 앱-설계편 (0) | 2022.12.07 |
| 앱인벤터 OpinionPoll 앱-설계편 (0) | 2022.12.02 |
| 앱인벤터에서 자바스크립트를 사용하여 Firebase 인증-설계편 (0) | 2022.11.17 |
댓글