codrizsain/MotionControlledLighting

An interactive web app to control a virtual smart night lamp using real-time hand gesture recognition

โ˜… 2Forks 1HTMLGitHub โ†—Compare

Project website โ†—

aicontrol-systemshuggingfacehuggingface-spaces

README

๐Ÿ–๏ธ Motion Controlled Lighting

Repositori ini berisi source code untuk aplikasi web interaktif yang memungkinkan pengguna mengontrol saklar lampu secara virtual dan mengubah suasana ruangan hanya dengan menggunakan deteksi pose tangan (hand gesture) melalui kamera.

Untuk mencoba langsung aplikasi ini, klik tombol di bawah ini:

Try it on Hugging Face

๐Ÿ› ๏ธ Bahasa Pemrograman & Tools

HTML5 CSS3 Java Python Hugging Face Docker

  • Bahasa Markup & Desain: HTML, CSS (untuk efek glassmorphism dan pendaran lampu neon).
  • Bahasa Pemrograman Logika: Java dan Python untuk mengelola interaksi, logika deteksi, serta pemrosesan data.
  • Platform & Deployment: Hugging Face Spaces sebagai lingkungan hosting dan integrasi model pendeteksi pose.
  • Containerization: Docker digunakan untuk membungkus aplikasi agar dapat berjalan dengan konsisten di berbagai lingkungan pengembangan secara lokal.

๐Ÿ“ธ Pratinjau Antarmuka

Berikut adalah tampilan aplikasi Via HugginFace

1. Halaman Utama (Landing Page)

Tampilan awal yang bersih dengan nuansa dark mode. Kamu dapat memulai interaksi dengan menekan tombol "AKTIFKAN SMART LAMP" yang memiliki efek pendaran blue neon. image

2. Mematikan Lampu (Gesture: Peace / V)

Saat kamera mendeteksi gestur tangan "Peace" (โœŒ๏ธ), sistem akan mengenali perintah tersebut untuk mematikan lampu.

  • Status: Lampu Mati (OFF)
  • Visual: Ruangan menjadi gelap dan bingkai deteksi kamera berubah menjadi warna Pink Neon.
foto hugg

3. Menghidupkan Lampu (Gesture: Open Palm / Lima Jari Terbuka)

Saat kamera mendeteksi gestur tangan terbuka (โœ‹), sistem akan memicu lampu untuk menyala.

  • Status: Lampu Menyala (ON)
  • Visual: Latar belakang ruangan berubah menjadi terang, grafis lampu menyala, dan bingkai deteksi kamera berubah menjadi warna Kuning Neon.
foto  face hugg

๐Ÿš€ Cara Menjalankan Aplikasi

Aplikasi ini didesain dan dikonfigurasi secara khusus agar berjalan optimal di environment Hugging Face. Repositori GitHub ini difungsikan murni sebagai etalase portofolio source code.

Pilihan 1: Melalui Hugging Face (Rekomendasi Utama)

Kamu tidak perlu mengunduh atau menginstal perangkat lunak apa pun.

  1. Kunjungi tautan peluncuran ini: Motion Controlled Lighting di Hugging Face
  2. Berikan izin akses webcam (kamera) pada browser yang muncul di layar.
  3. Klik tombol "AKTIFKAN SMART LAMP" dan mulailah menggunakan gestur tangan.

Pilihan 2: Menjalankan Secara Lokal (Untuk Developer)

Jika kamu ingin menguji source code ini secara lokal di komputermu:

  1. Lakukan clone repositori ini:
    git clone [https://github.com/username-github-kamu/MotionControlledLighting.git](https://github.com/username-github-kamu/MotionControlledLighting.git)
    
    

โœจ Fitur Utama

  • Real-time Hand Tracking: Mendeteksi titik-titik kerangka tangan (landmarks) secara akurat dan langsung.
  • Dynamic Environment: Perubahan gambar latar belakang ruangan secara dinamis (terang/gelap) yang merespons aksi pengguna.
  • Neon UI Indicators: Umpan balik visual interaktif berupa perubahan warna bingkai di sekitar webcam (Pink/Kuning) untuk menandakan status mode.
  • Optimasi Performa: Antarmuka menggunakan teks statis agar kinerja memori dapat difokuskan sepenuhnya pada pemrosesan deteksi kamera tanpa lag.

๐Ÿ“œ Kebijakan Penggunaan Data Pengguna

Aplikasi ini memproses data kamera sepenuhnya secara lokal (client-side) di perangkat pengguna. Tidak ada data rekaman video, gambar, atau titik koordinat pose tangan yang disimpan ke database atau dikirimkan ke server eksternal, sehingga privasi pengguna terjamin aman 100%.

๐Ÿค Kerja Sama

Tertarik untuk berkolaborasi atau berdiskusi lebih lanjut mengenai project ini? Mari terhubung melalui Instagram:

Instagram

Kunjungi profil Instagram saya di @codrizsain.

Contributors

codrizsain

Issues