DEV Community

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

Posted on

8 2 2 2 3

๐Ÿ‘ 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

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

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!

The best way to debug slow web pages cover image

The best way to debug slow web pages

Tools like Page Speed Insights and Google Lighthouse are great for providing advice for front end performance issues. But what these tools canโ€™t do, is evaluate performance across your entire stack of distributed services and applications.

Watch video

๐Ÿ‘‹ Kindness is contagious

Please leave a โค๏ธ or a friendly comment on this post if you found it helpful!

Okay