Hand Gesture Slider

---

This project is the Hand Gesture Slider web application. Control a beautiful, interactive slider with your hand gestures using your webcam!

· View Demo · Report Bug / Request Feature ·

---

📖 About

This project is a modern web-based slider that you can control with your hand gestures via webcam. It uses TensorFlow.js and the Handpose model to detect your hand and interpret gestures for slide navigation. The interface is clean, responsive, and user-friendly.

💡 Purpose

To provide an accessible, interactive demo of hand gesture recognition for UI control—no installation required, all running client-side in the browser.

🚀 Tech Stack

TensorFlow.js	Hand pose detection and gesture recognition
HTML5	Markup and structure
CSS3	Modern, responsive styling
JavaScript	Client-side logic

🧐 What's Inside?

• ✋ Hand Gesture Recognition: Control the slider with finger counting and swipe gestures
• 🎞️ Animated Slider: Smooth, modern transitions between slides
• 📷 Webcam Integration: Select and use your camera for gesture input
• 📱 Responsive UI: Works on desktop and mobile
• 📝 No Backend: All processing is done in the browser

📦 Prerequisites

• Modern web browser (Chrome, Firefox, Edge, Safari)
• No installation required for demo

⚡️ Getting Started

🚀 Local Usage

Just open index.html in your browser. No build step needed.

⚠️ Important: How to Run This Project

Note: You cannot simply double-click index.html to run this app because browser security restrictions will prevent the AI model from loading locally. You must serve the project with a local or remote web server.

🖥️ Recommended Ways to Run

1. VS Code (Recommended)

• Install the Live Server extension.
• Right-click index.html and select "Open with Live Server".
• The app will open in your browser and all features will work correctly.

2. JetBrains IDEs (WebStorm, PhpStorm, etc.)

• Right-click index.html and choose "Open in Browser" (JetBrains IDEs automatically serve files over HTTP).
• Alternatively, use the built-in web server feature.

3. Command Line (Windows, macOS, Linux)

• Python 3 (cross-platform):

  python -m http.server 8000
  # Then open http://localhost:8000 in your browser

• Node.js (http-server):

  npx http-server .
  # Then open the shown URL (usually http://localhost:8080)

• PHP (if installed):

  php -S localhost:8000
  # Then open http://localhost:8000

Do not use the file:// protocol (double-clicking the file) — the AI model will not load!

📚 Features

• Real-time hand gesture recognition
• Modern and clean UI
• No data leaves your device
• Responsive design for all devices

🔑 License

MIT License © 2025 Yasin Ateş

See LICENSE for more information.

---

✨ This README was generated by markdown-manager.

---