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 (4)

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
 
mehmetakar profile image
mehmet akar

Congrats!

Collapse
 
kimkaekae profile image
HAJIN LEE

good project!