이 글은 Hacktoberfest Open-Source AI Challenge Week 1: Touch Grass에 제출하는 내용입니다.

제가 만든 것 (What I Built)

Walking Challenge AI는 평범한 산책을 게임으로 바꿔주는 작은 웹 애플리케이션(web app)입니다.

사용자는 세 가지를 선택합니다: 얼마나 오래 걸을지(10분에서 60분), 어디서 걸을지(공원, 도시, 대학 또는 동네), 그리고 어느 정도의 난이도로 할지(쉬움, 보통, 어려움). 그러면 앱이 "서로 다른 종류의 나무 3가지 찾기" 또는 "하늘만 관찰하는 데 2분 보내기"와 같은 실제 세계 기반 도전 과제 목록을 제공합니다.

화면은 경험 중 가장 짧은 부분입니다. 휴대폰으로 약 20초를 보내고, 주머니에 넣은 다음 밖에 나갑니다. 돌아오면 완료한 항목에 체크하고, "산책 완료!" 화면이 이 과정을 마무리해 줍니다.

저는 하루 대부분을 스크린 앞에서 보내는 저와 같은 학생들을 위해, 외출할 수 있는 작고 재미있는 이유가 필요해서 이것을 만들었습니다.

데모 (Demo)

실시간 데모: https://walking-challenge-ai.vercel.app/

첫 실행 시 모델을 다운로드하므로(약 1.2 GB), Chrome 또는 Edge를 사용하고 1분 정도 시간을 주세요. 그 후에는 브라우저에 캐시됩니다.

흐름은 간단합니다: 시간, 장소 및 난이도를 선택하고, 도전 과제를 받고, 산책하고, 체크하며, 완료합니다.

코드 (Code)

GitHub logo Tamimshaikh / walking-challenge-ai

🚶 Walking Challenge AI

야외로 나가게 만드는 오픈 소스 AI입니다. 걷기 시간, 장소, 난이도를 선택하면 실제 세계의 도전 과제 목록을 받게 됩니다. 화면은 이 경험 중 가장 짧은 부분일 뿐입니다.

Hacktoberfest Open-Source AI Challenge Week 1: Touch Grass를 위해 제작되었습니다.

실시간 데모: https://walking-challenge-ai.vercel.app

작동 방식

1. 걷기 시간(10분~60분), 장소(공원, 도시, 대학, 동네) 및 난이도를 선택합니다.
2. 오픈 가중치 모델(Qwen2.5 Instruct)이 Transformers.js를 이용해 브라우저에서 실행되며 도전 과제를 작성합니다.
3. 만약 모델의 출력이 사용 불가능하면, 앱은 내장된 도전 과제로 대체됩니다.
4. 걷고, 도전 과제에 체크하며, 완료합니다.

로컬 실행하기

npm install
npm run dev

Chrome 또는 Edge에서 https://walking-challenge-ai.vercel.app을 엽니다. 첫 실행 시 모델이 다운로드됩니다(약 1.2 GB). 이후 브라우저에 캐시됩니다.

기술 스택 (Tech)

React, Vite, Tailwind CSS, Transformers.js (WebGPU 또는 WASM).

오픈 소스

모델은 src/ai.js의 한 줄입니다. 이것을 다음으로 교체할 수 있습니다…

GitHub에서 보기

제작 과정 (How I Built It)

• 프론트엔드: React, Vite 및 Tailwind CSS
• AI: Transformers.js를 이용해 브라우저에서 직접 실행되는 오픈 가중치 Qwen2.5 Instruct 모델 (사용 가능한 경우 WebGPU, 그렇지 않으면 WASM)
• 안전장치: 수작업으로 작성된 도전 과제 목록을 갖추어 앱이 절대 멈추지 않게 합니다.

앱은 걷기 시간, 장소 및 난이도를 기반으로 프롬프트를 구성하여 브라우저에서 로컬로 실행되는 모델에 전송합니다. 그런 다음 출력을 검증합니다. 만약 모델이 사용 불가능한 것을 반환하면, 앱은 내장된 도전 과제로 대체되어 걷는 사람이 항상 작동하는 목록을 얻게 됩니다.

배운 점: 제가 처음 시도했을 때는 0.5B 모델을 사용했는데, 프롬프트를 따라가기보다는 단순히 그대로 되돌려주는(echoed) 결과만 나왔습니다. 작은 모델들은 구조화된 출력을 요청받았을 때 예측하기 어렵습니다. 이것이 바로 앱이 결과를 보여주기 전에 모델의 출력을 확인하는 이유이며, 제가 더 큰 오픈 모델로 전환한 이유입니다. 다음으로 개선하고 싶은 부분은 작은 모델의 출력을 더욱 신뢰성 있게 만드는 것입니다.

오픈 혁신(Open Innovation)이 중요한 이유?

• 로컬 실행, 서버 불필요: 한 번 모델을 다운로드하면 모든 것이 브라우저 내에서 처리됩니다. API 키가 필요 없고, 백엔드도 없으며, 요청당 비용도 없습니다.
• 개인 정보 보호(Privacy): 걷는 사람의 시간, 장소, 활동은 절대 기기를 벗어나지 않습니다. 이는 사람들이 실제로 어디를 가는지에 관한 앱에게 매우 중요한 요소입니다.
• 교체 가능한 모델: 모델은 코드의 한 줄로 되어 있습니다. 누구나 이를 더 작거나, 더 크거나, 혹은 자신만의 도시나 캠퍼스에 맞게 미세 조정된(fine-tuned) 모델로 교체할 수 있습니다.
• 무료 실행 및 포크(fork): 학생이라도 이것을 무료로 호스팅하고 자신의 주변 환경에 맞게 적용할 수 있는데, 이는 폐쇄적인 API로는 하기 어려운 일입니다.

오픈 모델 덕분에 예산 없이 이것을 구축할 수 있었고, 바로 이런 종류의 프로젝트가 사람들을 밖으로 나가게 만듭니다.