먼저 Quick, Draw! 는 구글에서 위와 같은 낙서 데이터 셋을 학습하여 345개의 주제 중 하나를 그리면 머신 러닝 모델을 통해 정답을 맞추는 게임이다. 그리고 이 데이터셋을 오픈소스로 공유했다.목표 설정시계열 데이터를 Online 으로 처리하는 RNN 모델을 다루고 싶었고 최종적으로는 브라우저에서 돌아가도록 포팅하는 것이 목표였으나, 아래 서술될 이유로 개발 방향을 잠시 수정하였다.345개의 클래스로 적지 않은 클래스를 분류하는 모델이지만 각 클래스당 최소 1만개 이상의 Dataset이 있으므로 학습에는 어려움이 없을 것이라고 판단하였다.목표 수정간단한 RNN 모델을 만들었는데 학습이 잘 되지 않았었고, 이를 해결하는 과정에서 RNN 구조의 문제인지 데이터 전처리의 문제인지 파악하기가 어려워, ..

눈코입 맞추기 게임 만들기 1편 예전부터 만들어보고 싶었는데 미루고 미루다가 이번에 만들만한 이유가 생겨서 구현해보기로 했다. 회사 티타임 내기용 게임을 준비하는데, 아래와 같이 눈코입을 보고 누구인지 맞추는 게임 blog.joonas.io 문제점 1편에서는, 사진에서 얼굴 부분의 비율이 작으면 얼굴을 제대로 찾지 못한다는 문제가 있었다. 1편의 마지막에 얼굴 부분만 잘라낸 이미지에서 face landmark를 찾도록 했더니 결과가 개선되는 것을 확인했으니, 이 작업을 그대로 코드로 작성했다. 해결 먼저 이미지에서 얼굴을 찾는 API로 faceapi.detectAllFaces 를 사용할 수 있다. 한 번의 호출로 이미지에서 찾은 모든 얼굴들의 bounding box 배열을 반환한다. const optio..

예전부터 만들어보고 싶었는데 미루고 미루다가 이번에 만들만한 이유가 생겨서 구현해보기로 했다. 회사 티타임 내기용 게임을 준비하는데, 아래와 같이 눈코입을 보고 누구인지 맞추는 게임을 쉽게 만들 수 있지 않을까했다. 얼굴에서 특징점을 추출하는 솔루션은 꽤 오래 전부터 있었기때문에, 어렵지 않게 찾을수 있을거라 생각했고 실제로도 그랬다. 우선은 이미지를 업로드하고 결과를 바로 보기에 웹이 편할 것 같고, 문제를 만드는 것을 포함해서 게임 UI 까지 구현하는 것도 고려해서 javascript 라이브러리로 찾아보았다. 처음에는 OpenCV-javascript 를 사용해보려고 했는데, 생각만큼 얼굴 사진에서 face landmark 를 잘 찾아내지 못했었다. 얼추 찾기는 하는데 만족스럽지는 못했다. 그래서 ML..

1. 실제로 현재 git config 에 origin 이 없어서 발생하는 오류일 수 있다. 아래 명령어로 remote.origin 주소가 올바르게 설정되어있는 지 확인하고, git remote -v 없다면 아래와 같이 배포하고자 하는 git repository의 주소를 추가한다. git remote set-url origin https://.... 2. origin 설정은 분명 잘 되어있는데 안되는 경우 Failed to get remote.origin.url (task must either be run in a git repository with a configured origin remote or must be configured with the "repo" option). npm 과 관련한 모듈과 ..

Context BOJ Extended의 일부 기능을 성능 최적화 하는 중에 생긴 일이다. 확장 프로그램의 특성상, 로드되는 DOM 을 조작하는 일이 많다. 그 중에서 불필요하게 DOM을 조작하느라 속도가 느린 부분이 보여서, 렌더링 단계를 생략할 수 있도록 CSSOM으로 역할을 넘기는 작업을 하고 있었다. 그런데 페이지 로드가 평소보다 심하게 느려져서 확인해보니, 아래와 같은 상황이 발생했다. 해결 무슨 일인지 확인하기 위해서 MDN 문서를 확인했는데, 다음과 같은 문장이 있었다. innerText는 Node.textContent와 혼동하기 쉬우나 중요한 차이점을 가지고 있습니다. 기본적으로, innerText는 텍스트의 렌더링 후 모습을 인식할 수 있지만 textContent는 그렇지 않습니다. 말 그..

vscode의 확장 프로그램(extension)은 javascript 베이스이기 때문에, javascript/ES6/Typescript 로 개발해야한다. (vscode가 electron 프레임워크로 개발한 웹 애플리케이션이기 때문에 그럴 것이라고 추측한다) 간단하게 작성하기에는 package.json 이라던 지 node 세팅이라던 지 귀찮은 환경 세팅들이 많아서 python으로 만들 수 없는 지 찾다가 이런 프로젝트를 찾았다. GitHub - CodeWithSwastik/vscode-ext: Create VSCode Extensions with python Create VSCode Extensions with python. Contribute to CodeWithSwastik/vscode-ext deve..

오늘은 기존에 개발했던 게임의 로그 제공을 업데이트하면서 있었던 일을 정리하고자 한다. 배경 https://www.joonas.io/buffalo-chess/ Buffalo Chess Try to keep your village from the herd of rampaging buffalo www.joonas.io 기존에 만든 버팔로 체스는 Replay와 Share Replay 기능을 제공한다. 턴제 게임으로, 각 턴마다 어떤 타일이 움직였는지와 그 상태를 로그로 기록하고 있다. 그리고 replay 기능에서 이를 다시 읽어서 그대로 시뮬레이션한다. 문제는 Share 기능인데, 서버가 없어서 로그를 URL 파라미터로 아래처럼 직접 전달하고 있었다. https://www.joonas.io/buffalo-ch..

2018년 말에, Semantic-UI 에서 제공하는 progress bar를 살짝 바꾸어서 CSS의 overflow: hidden 속성으로 무한 로딩을 구현한 적이 있다. https://jsfiddle.net/J00nas/xpvt214o/970756/ 위 링크에서도 동작하는 모습을 볼 수 있다. 기존의 progess bar의 인터페이스는 그대로 유지하고 기능만 추가하였기에, 코드도 나름 깔끔한 편이다. 문제는 기존에 제공되는 placement text는 안된다. 당시에 이걸 유지해보려고 많은 삽질을 해봤다가 실패했다. 사실 이 기능은 Semantic-UI에 PR을 날렸으나 무산되었다. [Progress] Add properties for infinite loop as loader style #6691(..