👏 I Created a React Component That Recognizes Finger Snaps! (feat. TensorFlow.js)

hm — Fri, 31 Jan 2025 08:41:51 +0000

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

You can easily use it in React like this:

import { WakeMe } from "wake-me";

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

🤔 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>

🤔 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

DEV Community: hm