Eat Well AI: 모든 식단을 위한 레스토랑을 찾아주는 브라우저 기반 AI

Hacktoberfest Weekend Challenge: Build for a Friend에 제출하는 글입니다.

전 세계 제작자들이 자신이 아끼는 사람들을 위해 실제 문제를 해결하는 Hacktoberfest Weekend Challenge: Build for a Friend에 참여하게 되어 기쁩니다.

제가 만든 것 (What I Built)

Eat Well AI는 식단 제한이 있는 사람들이 실제로 자신을 환영해 주는 레스토랑을 발견할 수 있도록 돕습니다. 복잡한 필터링은 잊으세요. 원하는 것을 자신의 말로 표현하기만 하면, Eat Well AI가 나머지를 처리합니다. 단순히 식단을 맞추는 곳이 아니라, 당신의 삶에 맞는 음식을 찾아보세요.

"시카고 비건 피자"
"마이애미 코셔(kosher)"
"글루텐 프리 타코"

브라우저에서 실행되는 오픈 소스 알고리즘입니다. 사용자의 문장을 검색 필터로 변환합니다. 정말 멋지지 않나요? 문장이 기기에 남아있기 때문에 서버나 API 키가 필요하지 않습니다.

저는 코셔(kosher) 식단을 지키는 친구 Miriam을 위해 Eat Well AI를 만들었습니다. 저희가 여행할 때마다 먹을 곳을 찾는 것이 항상 힘든 일이었습니다. 저 역시 비건이기 때문에, 우리의 외출은 늘 두 사람의 요구 사항 모두를 만족시키는 장소를 찾기 위한 고된 검색이었습니다. Eat Well AI는 마침내 그 질문에 답합니다. "우리 둘 다 쉽고 자신감 있게 식사할 수 있는 곳은 어디일까?"

이제 이 검색 기능은 37개 도시, 1,000개가 넘는 레스토랑을 아우르며, 각 장소는 비건(vegan), 채식주의자(vegetarian), 글루텐 프리(gluten-free), 코셔(kosher), 할랄(halal) 옵션으로 세심하게 라벨링되어 있습니다. 결과는 풍부하고 인터랙티브한 카드 형태로 나타나며—길 안내까지 포함되어—사용자는 검색어 입력부터 테이블에 앉기까지 순식간에 이동할 수 있습니다.

데모 (Demo)

실시간으로 사용해 보세요: https://eat-well-ai.view.fast/

WebGPU를 지원하는 장치에서 Chrome 또는 Edge를 사용하는 경우, 모델이 한 번 다운로드(약 340MB)되면 이후 모든 기능은 기기 자체에서 작동합니다.

55초 분량의 데모 영상을 시청하세요:

URL:

명확한 영어로 입력해 보세요:

Query typing demo

지도 QR 코드가 포함된 결과:

Results demo

관리자 측에서 리스팅 추가하기:

Admin demo

1,017 restaurants across 37 cities

코드

https://github.com/Mike-Demo/eat-well-ai — MIT 라이선스.

구축 과정

이 스택은 순수 HTML, CSS, JavaScript로 구성되어 있으며 정적 파일로 제공됩니다. 레스토랑 데이터베이스는 단일 data.js 파일에 포함되어 있고 검색 스크립트가 이를 필터링합니다.

Alibaba의 오픈 웨이트(open-weight) Qwen3-0.6B 모델은 WebLLM과 WebGPU를 통해 브라우저에서 실행될 수 있습니다. 저는 이 모델 가중치(model weights)를 동일한 정적 호스팅에 올렸기 때문에, 페이지가 런타임 시 HuggingFace나 다른 API로 호출을 하지 않습니다.

사용자가 검색어를 입력하면, 시스템이 이를 해석하여 식단 정보, 도시, 요리 키워드 등의 정보를 포함하는 형식화된 필터로 변환합니다. 모델의 출력은 JSON 문법(WebLLM의 response_format을 통해)을 사용하여 제약되므로, 잘못된 형태의 출력이 발생할 수 없습니다. 0.6B 크기의 모델만으로는 스스로

Eat Well AI는 제가 Pimoroni Tufty 2350 마이크로컨트롤러 배지를 위해 만들었던 버전인 Eat Well에서 진화했습니다. 이 초기 버전은 557개의 레스토랑과 물리적 버튼을 가지고 있었으며, AI를 사용할 가능성은 없었습니다. 해당 배지에 사용된 앱은 검색창 아래 패널에서 작동하며 동일한 코드와 픽셀 아트를 사용합니다.

오픈 이노베이션이 중요한 이유

호스팅된(hosted) AI API는 명백히 가장 빠르고 쉬운 방법이었지만, 저는 세 가지 이유로 이를 사용하지 않기로 결정했습니다.

가장 중요한 고려 사항은 개인 정보 보호(Privacy)입니다. 개별적인 식단 요구사항은 해당 개인의 문제입니다. 만약 "near me 코셔(kosher)"와 같은 쿼리를 입력하면, 사용자의 종교와 위치에 대한 정보를 모두 제공하는 것이 됩니다. 모델이 장치(device)에서 작동하기 때문에, 해당 문장은 서버로 전송되지 않습니다.

비용(cost)은 그 다음으로 중요한 문제입니다. 호스팅된 모델을 사용하면 쿼리당 요금이 부과됩니다. 이 모델은 쿼리당 비용이 없습니다. 전체 비용은 정적 파일 호스팅(static file hosting)에 기인합니다.

세 번째는 제어권(Control)입니다. 오픈 웨이트(open weights)를 사용하면 모델을 직접 호스팅(self-host)하고, 나중에 교체하며, 프롬프트(prompt)를 조정할 수 있습니다. 작은 모델이 저의 JSON 지침을 무시했기 때문에, 지원 요청을 제출하는 대신 문법(grammar)을 사용하여 출력을 제한했습니다. 배포하기 전에 동일한 웨이트(weights)를 제 자신의 기계에서 실행하여 프롬프트를 확인했습니다.

웨이트를 오픈(open)으로 전환함으로써, 주말 프로젝트였던 것이 제가 친구에게 제 데이터를 전혀 넘겨주지 않고도 줄 수 있는 결과물이 되었습니다.

AI 사용 공개 (AI Disclosure)

이 프로젝트와 작성에 사용된 AI 도구 및 방법:

• Grammarly: 문법 및 철자 수정, 인간화 도구(Naturalist 프로필)를 사용한 톤 조정, AI 구문 감지 및 재작성, 그리고 '더 임팩트 있게 만들기' 제안 기능을 활용했습니다. 모든 제안은 적용하기 전에 작성자에 의해 검토되고 승인되었습니다.
• GPTZero: 편집 과정에서 초안의 AI 유사성을 점수화하는 데 사용되었으며, 이는 판결이라기보다는 대략적인 신호로 활용되었습니다.
• Pexo: 프로젝트 개요(4K, 음성 해설 없음)를 바탕으로 55초 분량의 데모 비디오를 생성했습니다.
• Adobe Firefly: 앱 및 배지 UI에 사용된 픽셀 아트를 생성하는 데 활용되었습니다.
• Qwen3-0.6B (Alibaba): WebLLM과 WebGPU를 통해 로컬에서 실행되는, 앱의 인브라우저 자연어 검색 기능을 구동하는 오픈 웨이트 모델입니다.

나머지 모든 것—코드, 데이터셋, MapQuest 통합, 그리고 최종적인 문구들—은 작성자 본인의 작업물입니다.