on
사시도와 학습 가능한 기계를 이용한 포켓몬 카드 채점 웹사이트
사시도와 학습 가능한 기계를 이용한 포켓몬 카드 채점 웹사이트
저는 평생 포켓몬에 대해 열정을 가지고 있었기 때문에 수백 달러를 주고 큰 회사에 카드를 보내는 대신 개인들이 가지고 있는 카드의 상태와 품질을 평가할 수 있는 프로젝트를 하기로 결심했습니다. 이 프로젝트는 구글의 티처블 머신과 사치도를 사용하는 웹사이트이다.io의 백엔드는 카드를 카메라에 갖다 대기만 해도 사용자가 카드를 평가할 수 있는 사이트를 만드는 기능을 제공합니다. 이후 기능에서는 사진을 업로드할 수 있지만 베타 단계에서는 웹캠을 사용하여 카드의 등급을 매길 수 있습니다.
목차.
학습 가능한 기계
프런트엔드
사시도
이미지 모델 내보내기
정리하다
다음 단계/결론
자원.
학습 가능한 기계
이 프로젝트를 시작하기 위해 저는 처음에 학습 가능한 기계를 사용하여 카드 품질의 4등급을 설정했습니다. 집에서 이미 가지고 있는 카드를 사용하여 가장 낮은 점수에서 가장 좋은 점수인 4점까지 점수를 매겼습니다. 저는 현재 등급 시스템에 대해 비교적 정확한 이미지 모델을 설정하기 위해 비슷한 등급의 여러 카드를 사용했습니다.
프런트엔드
사이트가 어떤 모습이었으면 하는 기본적인 생각을 가지고 HTML, CSS, 부트스트랩을 사용하여 깨끗한 버튼과 경고를 얻는 데 도움이 되는 프런트엔드 골격을 빠르게 개발했습니다. 매우 접근 가능하고 이해하기 쉬운 문서가 있는 부트스트랩을 사용하여 나머지 앱의 기능을 신속하게 파악할 수 있었습니다.
js Click to start Web Cam: Start Web Cam
```js if (bestClass == "Grade 4" || bestClass == "Grade 3" ) { newlabel.className = "alert alert-info"; } else { newlabel.className = "alert alert-warning"; } ``` #### 사시도 사시도의 잘 작성된 문서를 사용한 후에 나는 그것을 내 사이트의 나머지 부분에 쉽게 연결할 수 있었다. 제가 자바스크립트를 사용하고 있었지만, SashiDo의 설명서에는 사용자의 용도에 따라 여러 언어에 대한 단계별 지침이 포함되어 있습니다.  ```js Parse.initialize( "l0nk4cQ8dQPGMJvXRVbu3QuC8D4QmSqVNJGfRbQP", "GQGu6n32obuLduR9QwG5PkYWRNQ5PKpS8CmTbMQf" ); Parse.serverURL = 'https://pg-app-ji0j5566g3pgtzkb4ptq68lts1q3dy.scalabl.cloud/1/'; ``` #### 이미지 모델 내보내기 일단 데이터베이스가 연결되면, 내 목표는 이미지 모델을 내가 만든 모델을 내보내서 내가 만든 사이트에 연결하는 것이었다. 클라우드 모델 업로드를 클릭하면 모델을 사이트에 연결하는 데 사용할 수 있는 공유 가능한 링크가 제공됩니다.  ```js const URL = "https://teachablemachine.withgoogle.com/models/AkFBx6T6U/"; ``` #### 정리하다 이 모든 작업이 완료되면 대시보드를 정리하고 표시되는 작은 오류를 관리하는 것이 주요 목표였습니다. 저는 사이트를 좀 더 낫고 접근하기 쉽도록 하기 위해 인터넷에서 찾은 몇 가지 구배와 사진을 사용했습니다. 결국, 이것은 저에게 1부터 4까지 카드를 채점할 수 있는 프로젝트가 있었습니다.  ```js * { margin: 0; box-sizing: border-box; font-weight: 600; } .title { padding-left: 10px; } #brand { font-weight: 700; } #detect { font-weight: 600; } body { background: url(Images/mat2.jpg) no-repeat center fixed; background-size: cover; } nav { background: rgb(22, 0, 152); background: linear-gradient( 90deg, rgba(22, 0, 152, 1) 24%, rgba(255, 0, 0, 1) 100% ); } .card-body { background: rgb(0, 121, 152); background: linear-gradient( 90deg, rgba(0, 121, 152, 0.4096989137451855) 24%, rgba(255, 0, 0, 0.23322832550989148) 100% ); } ``` #### 다음 단계/결론 앞으로는 훨씬 더 깔끔하고 전문적인 UI를 만들 계획입니다. 이와 함께 채점 대상 카드 모음에 대한 입력 정보를 더 많이 받아 정확성과 전반적으로 더 나은 채점 시스템을 제공할 계획입니다. 전반적으로 이것은 제가 계속해서 천천히 정확한 트레이딩 카드 등급 시스템으로 발전하기를 바라는 재미있는 작은 프로젝트였습니다. 웹캠을 연결하는 것에서부터 프런트엔드 개발에 이르기까지 이 프로젝트의 많은 부분이 더 부드럽게 진행될 수 있었습니다. 지금 돌이켜보면, 제가 실수를 통해 끊임없이 배우고 개선할 수 있었던 만큼 이 학습 경험을 훨씬 더 낫게 만든 것은 이러한 도전과 작은 차이점들 때문이었습니다. 이 튜토리얼로 독자들이 프로젝트를 하면서 더 쉽게 시간을 보낼 수 있기를 바라며 댓글로 여러분의 경험에 대해 자유롭게 이야기 할 수 있기를 바랍니다. #### 자원. SashiDo 튜토리얼 - https://blog.sashido.io/sashidos-getting-started-guide/ https://blog.sashido.io/sashidos-getting-started-guide-part-2/ 학습 가능한 시스템 - https://teachable 시스템.withgoogle.com/ 학습 가능한 기계 라이브러리 - https://github.com/googlecreativelab/teachablemachine-community/tree/master/libraries/image 부트스트랩 - https://getbootstrap.com/docs/4.0/components/buttons/ Github - https://github.com/VishnudevP/Pokemon-Card-Grader
from http://gong-tech.tistory.com/8 by ccl(A) rewrite - 2021-09-22 04:27:27