GrassLock: 풀기 위해 잔디를 만지도록 강제하는 브라우저 기반 오픈 가중치 AI

내가 만든 것
Hacktoberfest 2026 Week 1의 '잔디에 손대기(Touch Grass)' 챌린지를 위해, 나는 GrassLock을 만들었다. 이 유틸리티는 화면 사용 시간을 의도적으로 짧게 하도록 설계된 미니멀리스트 웹 애플리케이션이다.

개념은 간단하다: 무한 스크롤링에 빠지는 대신, 휴대폰이나 노트북에서 GrassLock을 열면 접근이 차단된다. 이 잠금 기능은 사용자가 실제로 밖에 나가서 카메라를 살아있는 잔디, 실내 식물 또는 나무에 겨냥할 때까지 보상 상태(reward states)에 대한 접근을 막는다. 자연 물체가 인식되면 잠금이 해제되고 야외 휴식을 완료했음이 기록된다.

데모 및 코드
실시간 데모: https://web-pixar01.github.io/-The-Offline-Touch-Grass-Verifier/
GitHub 레포: https://github.com/web-pixar01/-The-Offline-Touch-Grass-Verifier

여기서 오픈 소스 AI가 중요한 이유
나는 닫힌 상용 API(예: OpenAI 또는 Claude)를 호출하는 대신, 클라이언트 런타임에서 오픈 가중치 모델을 직접 실행하기로 결정했는데, 여기에는 세 가지 주요 이유가 있다:

완벽한 데이터 프라이버시: 카메라 피드는 사용자의 장치를 벗어나지 않습니다. 이미지 프레임이나 GPS 좌표가 외부 서버로 전송되지 않습니다. 모든 것은 오픈 소스 MobileNet을 통해 브라우저의 JavaScript 엔진에서 직접 평가됩니다.
제로 호스팅 및 API 비용: 오픈 소스 가중치(weights)를 로컬에서 실행한다는 것은 서버 요금 제로, 토큰 가격 책정 제로, 그리고 유료 API 키에 대한 의존성이 없다는 것을 의미합니다.
어디서든 작동: 추론(inference)이 WebGL을 사용하여 클라이언트 측에서 실행되기 때문에, 사용자는 고속 모바일 데이터가 필요하지 않은 상태로 웹 앱을 로드하여 트레일이나 외딴 공원으로 나갈 수 있습니다.

작동 방식 (How I Built It)
모델: TensorFlow.js를 통해 로드된 오픈 가중치 MobileNet 비전 모델.
프론트엔드: 1.2초마다 실시간 프레임 분류가 이루어지는 바닐라 HTML/JS.
탐지 논리: 앱은 식물학적 및 자연 관련 키워드(잔디, 나뭇잎, 꽃, 식생, 나무)에 대한 상위 분류 확률을 스캔하고 확인 즉시 상태를 전환합니다.

[

](https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Ftnrj8gfs2n70jbcxlowo.jpeg