👏 핑거스냅을 인식하는 React 컴포넌트를 만들었어요! (feat. TensorFlow.js)

안녕하세요! 웹에서 손뼉이나 손가락을 튕기는 소리를 인식할 수 있는 "wake-up" 이라는 React 오픈소스 컴포넌트를 개발해서 소개해드려요 👏

• MIT 라이센스 (상업적 이용가능) 즉시 테스트 가능, 모델 용량 단 5MB...!

🎮 바로 체험해보세요!

👉 데모 페이지 바로가기
🔍 GitHub 레포지스토리

⚠️ 더 정확한 인식을 위한 팁!

외부 마이크를 사용하면 가장 잘 동작해요
이어폰/에어팟은 인식이 잘 안될 수 있어요
데스크톱이랑 모바일 모두 사용 가능해요!

💻 어떻게 사용하나요?

먼저 설치부터 할게요:

npm install wake-me
# 또는
yarn add wake-me

React에서 이렇게 간단하게 사용할 수 있어요:

import { WakeMe } from "wake-me";

function App() {
  return <WakeMe onSnap={() => console.log("짝짝!")} />;
}

🤔 어디에 쓸 수 있나요?

• 🎙️ AI 시스템: "시리야~" 처럼 핑거스냅으로 AI를 깨울 수 있어요
• 🎭 발표할 때: 프레젠테이션 슬라이드 넘기기
• 🖥️ 화상회의: 발언권 얻기나 주목 끌기
• 🎨 디지털 아트: 관객과 작품이 상호작용하는 전시
• 🤖 스마트홈: 손뼉이나 핑거스냅으로 IoT 기기 온오프 제어

✨ 라이브러리 특징

• 🚀 TensorFlow.js로 구현한 고성능 AI 모델
• ⚡ 실시간 소리 감지와 분석
• 🪶 가볍고 사용하기 간단한 구조

바닐라 자바스크립트로도 사용 가능해요:

<script src="https://cdn.jsdelivr.net/npm/wake-me@latest/dist/vanilla/vanilla.global.js"></script>
<script>
  const wakeMe = new WakeMe({
    onSnap: () => console.log("짝짝!"),
    onNoise: (score) => console.log("잡음 크기:", score)
  });

  wakeMe.init();
</script>

🤔 상업적으로 사용 가능한가요?

네! 이 프로젝트는 LLAMI Team에서 제공하는 오픈소스 프로젝트예요. MIT 라이선스로 제공되니 자유롭게 사용하실 수 있어요!

😭 해당 라이브러리 한계점

현재 버전은 태블릿 시연용으로 준비된 모델로, 맥북에서 키보드를 타이핑 하는 소리나, 책상을 두드리는 소리, 의자를 뒤로 젖히는 소리 등도 같이 인식하는 문제가 있어요. (곧 해결해볼게요.)

🔍 GitHub 레포 링크

https://github.com/llami-team/wake-me