DEV Community

Cover image for ๐Ÿ‘ I Created a React Component That Recognizes Finger Snaps! (feat. TensorFlow.js)
hm
hm

Posted on

๐Ÿ‘ I Created a React Component That Recognizes Finger Snaps! (feat. TensorFlow.js)

Hello! I'm excited to introduce "Wake-Up," an open-source React component that can recognize the sound of clapping or finger snapping on the web. ๐ŸŽ‰

  • MIT License (commercial use allowed): Ready to test with a model size of just 5MB!

๐ŸŽฎ Try It Out Now!

๐Ÿ‘‰ Visit the Demo Page
๐Ÿ” GitHub Repository

โš ๏ธ Tips for Better Recognition:

Use an external microphone for the best results.
Earphones or Airpods may not work as well.
Works on both desktop and mobile!

๐Ÿ’ป How to Use It?

First, install it:

npm install wake-me
# or
yarn add wake-me
Enter fullscreen mode Exit fullscreen mode

You can easily use it in React like this:

import { WakeMe } from "wake-me";

function App() {
  return <WakeMe onSnap={() => console.log("Snap!")} />;
}
Enter fullscreen mode Exit fullscreen mode

๐Ÿค” Potential Use Cases

  • ๐ŸŽ™๏ธ AI Systems: Wake up AI assistants with a finger snap, just like saying "Hey Siri."
  • ๐ŸŽญ Presentations: Advance slides with a snap.
  • ๐Ÿ–ฅ๏ธ Video Conferences: Get attention or a turn to speak.
  • ๐ŸŽจ Digital Art: Interactive exhibitions responding to audience sounds.
  • ๐Ÿค– Smart Homes: Control IoT devices with claps or finger snaps.

โœจ Features of the Library

  • ๐Ÿš€ High-performance AI model implemented with TensorFlow.js.
  • โšก Real-time sound detection and analysis.
  • ๐Ÿชถ Lightweight and easy-to-use structure.

You can also use it with vanilla JavaScript:

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

  wakeMe.init();
</script>
Enter fullscreen mode Exit fullscreen mode

๐Ÿค” Can It Be Used Commercially?

Yes! This project is provided by the LLAMI Team and is available under the MIT license, so feel free to use it as you like!

๐Ÿ˜ญ Limitations of the Library

The current version is designed for tablet demonstrations, and on devices like MacBooks, it may also pick up sounds such as keyboard typing, tapping on a desk, or chair squeaks. We're working to improve this!

๐Ÿ” GitHub Repo Link

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

Top comments (5)

Collapse
 
moondaeseung profile image
Meursyphus

great!

Collapse
 
un_known_00 profile image
First name Last name

I admire your project and have reviewed your profile and the languages you've used. I've noticed you don't have a background in Python. As a web developer interested in learning TensorFlow.js, could you share how you studied TensorFlow and built your foundational knowledge in AI/ML?

Collapse
 
ryokuman profile image
Ryokuman

best

Collapse
 
mehmetakar profile image
mehmet akar

Congrats!

Collapse
 
kimkaekae profile image
kimkaekae

good project!