{"id":23964334,"url":"https://github.com/neilblaze/atmx","last_synced_at":"2026-05-18T15:34:01.181Z","repository":{"id":195357385,"uuid":"692758632","full_name":"Neilblaze/ATMx","owner":"Neilblaze","description":"Revolutionizing Interactions, Redefining Possibilities! 🚀","archived":false,"fork":false,"pushed_at":"2023-09-18T12:04:19.000Z","size":262386,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-06T21:03:49.607Z","etag":null,"topics":["accessibility","computer-vision","deep-learning","demo","mediapipe","web"],"latest_commit_sha":null,"homepage":"https://atmx.neilblaze.live","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Neilblaze.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-09-17T13:54:22.000Z","updated_at":"2023-09-17T15:46:35.000Z","dependencies_parsed_at":"2023-09-17T16:37:54.957Z","dependency_job_id":"77efb33b-0425-4e82-bdd1-abffa42ddfbd","html_url":"https://github.com/Neilblaze/ATMx","commit_stats":{"total_commits":34,"total_committers":2,"mean_commits":17.0,"dds":0.05882352941176472,"last_synced_commit":"d33b6fa43c3ffabde311638222e072842af19c30"},"previous_names":["neilblaze/atmx"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Neilblaze%2FATMx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Neilblaze%2FATMx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Neilblaze%2FATMx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Neilblaze%2FATMx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Neilblaze","download_url":"https://codeload.github.com/Neilblaze/ATMx/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240483759,"owners_count":19808636,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["accessibility","computer-vision","deep-learning","demo","mediapipe","web"],"created_at":"2025-01-06T21:03:56.947Z","updated_at":"2026-05-18T15:34:01.108Z","avatar_url":"https://github.com/Neilblaze.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ATMx 🏧 \n\nAn Interactive (Proof of Concept) Web Demo showcasing **Touchless Interactions** using the [MediaPipe](https://developers.google.com/mediapipe/) Machine Learning Library ✨\n\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://user-images.githubusercontent.com/48355572/263637727-4f15f4cf-3786-4914-8734-7dcf258f0429.png\" alt=\"cover-img\"\u003e\n\u003c/p\u003e\n\nTouchless gesture-based systems hold the potential to reshape public spaces, workplaces, and industries as it's seamless and convenient nature aligns with the post-pandemic landscape. This innovative webapp harnesses the power of the MediaPipe Handlandmarker Task, featuring an \u003cins\u003eaugmented transaction panel that enables users to interact effortlessly through intuitive hand gestures\u003c/ins\u003e, detected from the input video feed. Notably, user data collected from the video feed is promptly deleted after inference, ensuring [GDPR](https://gdpr-info.eu) compliance as all computations occur client-side. Users can seamlessly perform essential operations via the on-screen interactive panel, utilizing straightforward custom gestures to navigate the checkout process without the need for physical touch, and it can even run offline! I was able to pioneer a novel method by leveraging custom logic to detect hand gestures directly via the HandLandmarker task, eliminating the reliance on heavyweight dependencies like the GestureRecognizer Task. This optimization not only streamlined the project but also contributed to enhancing the core MediaPipe framework's efficiency. The process involves segmenting the video stream to identify hands, localizing the palm area, and subsequently tracking specific hand keypoints for precise gesture recognition. This comprehensive approach significantly enhances performance, seamlessly integrating with the default Handlandmarker API. This project is a symbol of my commitment to embracing the future, harnessing innovation, and crafting a more hygienic, efficient, and enchanting way to connect with technology!\n\n\u003e This project aims to test and demonstrate the capabilities of the new MediaPipe [Hand Landmarker](https://developers.google.com/mediapipe/api/solutions/js/tasks-vision.handlandmarker) task from MediaPipe Solutions, which outputs 21 hand landmarks. The task provides precise and accurate hand landmark detection, generating [21](https://developers.google.com/mediapipe/solutions/vision/hand_landmarker#models) key points on the hand. These landmarks are utilized in this interactive web app which enables users to perform contactless interactions with the interface using simple human gestures. Best experienced in well-lit environments. Ideal on larger screens.\n\n\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eShortened Version \u003cimg src=\"https://user-images.githubusercontent.com/48355572/234978665-08b7d16e-dace-479a-a061-478972c43f6b.gif\" width=\"14px\" height=\"14px\"\u003e\u003c/b\u003e\u003c/summary\u003e\u003cbr/\u003eIn a rapidly evolving technological landscape, the aftermath of the COVID-19 pandemic has amplified concerns regarding hygiene and touch-based interactions. With \u003cb\u003e80%\u003c/b\u003e of individuals deeming public touchscreens \u003cem\u003eunhygienic\u003c/em\u003e, there is a compelling need for innovative solutions. Enter touchless gesture-based systems, poised to reshape industries and public spaces. Seamlessly aligning with the post-pandemic era, this technology offers intuitive and convenient interactions. From \u003cb\u003eATMs\u003c/b\u003e and airports to healthcare and retail, touchless interactions are on the brink of becoming ubiquitous. This project directly addresses these changing expectations by harnessing the power of the MediaPipe \u003ca href=\"https://developers.google.com/mediapipe/api/solutions/js/tasks-vision.handlandmarker\"\u003eHand Landmarker\u003c/a\u003e task from MediaPipe Solutions. By precisely detecting \u003ca href=\"https://developers.google.com/mediapipe/solutions/vision/hand_landmarker#models\"\u003e21\u003c/a\u003e key hand landmarks, this technology powers an interactive web application enabling users to effortlessly engage with interfaces through contactless gestures. Designed for optimal performance in well-lit environments and on larger screens, this project embodies the future of safer, more advanced interactions.\u003c/details\u003e\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://user-images.githubusercontent.com/48355572/260842692-34bcee72-228a-4b24-84be-146c4973bd18.gif\" alt=\"demo-gif\"\u003e\n\u003c/p\u003e\n\n\n\u003cp align='center'\u003e\n\u003ca href=\"https://github.com/Neilblaze/ATMx/actions/workflows/testing.yml\"\u003e\u003cimg height=\"20\" src=\"https://github.com/Neilblaze/ATMx/actions/workflows/testing.yml/badge.svg\"\u003e\u003c/a\u003e \u0026nbsp; \u003ca href=\"https://github.com/Neilblaze/ATMx/actions/workflows/node.js.yml\"\u003e\u003cimg height=\"20\" src=\"https://github.com/Neilblaze/ATMx/actions/workflows/node.js.yml/badge.svg\"\u003e\u003c/a\u003e \u0026nbsp; \u003ca href=\"https://github.com/Neilblaze/ATMx/actions/workflows/testing.yml\"\u003e\u003cimg height=\"20\" src=\"https://user-images.githubusercontent.com/48355572/268592369-40eba7e1-38ab-4665-a80a-f0315c7f6b89.svg\"\u003e\u003c/a\u003e \u0026nbsp; \u003ca href=\"https://atmx.neilblaze.live\"\u003e\u003cimg height=\"20\" src=\"https://user-images.githubusercontent.com/48355572/263659103-363b80e1-89f1-485b-b2d4-2d010458c1a5.png\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cbr/\u003e\n\n\n## Prerequisites\nThis project requires [Node.js](https://nodejs.org/en/download) to be installed on your local machine.\n\n\u003e ⚠️ Webcam required for hand detection and gesture recognition. Please ensure your device has a functioning webcam.\n\n\n\u003cbr/\u003e\n\n\n## Installation\n\n1. Clone the repository on your local machine:\n    ```sh\n    git clone https://github.com/Neilblaze/ATMx.git\n    ```\n\n2. Navigate into the project directory:\n    ```sh\n    cd ATMx\n    ```\n\n3. Install the necessary dependencies:\n    ```sh\n    npm install\n    ```\n\n4. Start the development server:\n    ```sh\n    npm start\n    ```\n\n5. Open the project in your browser at [`http://localhost:3000`](http://localhost:3000) to view your project.\n\n\n\u003cbr/\u003e\n\n\n\u003e 🚀 View a _live demo_ in your browser [**here.**](https://atmx.neilblaze.live) \n\n\n\u003cbr/\u003e\n\n\n## Built With\nThis project was created using:\n\u003cimg align=\"right\" style=\"padding-top: 20px;\" src=\"https://user-images.githubusercontent.com/48355572/268604224-c22e8fb5-43f0-4009-b2f3-a5336085d977.png\" alt=\"QR-Code\" width=\"337\" /\u003e\n\n- [React](https://react.dev/)\n- [Tailwind CSS](https://tailwindcss.com/)\n- [MediaPipe Hand Landmarker](https://developers.google.com/mediapipe/api/solutions/js/tasks-vision.handlandmarker)\n- [Redux](https://redux.js.org/)\n- [React Redux](https://react-redux.js.org/)\n- [PostCSS](https://postcss.org/)\n- [React Toastify](https://github.com/fkhadra/react-toastify/)\n- [React Confetti](https://github.com/alampros/react-confetti/)\n- [Figma](https://www.figma.com/)\n\n\n\u003cbr/\u003e\n\n### Case Study\nThis project is part of my [contribution](https://github.com/Neilblaze/GSOC-23) as a mentee in Google Summer of Code 2023, working under the TensorFlow org, \u0026 is a symbol of my commitment to embracing the future, harnessing innovation, and crafting a more hygienic, efficient, and enchanting way to connect with technology! \n\nI wrote a comprehensive article on this project, which you can read [**here**](https://blog.neilblaze.live/interactive-web-demo). \u003cimg src=\"https://user-images.githubusercontent.com/48355572/263672801-5929885f-9227-4be3-a686-ea3fbeff13d2.gif\" width=\"12.5px\" height=\"12.5px\"\u003e\n\n\u003e ⓘ This is intended to assist other developers in utilizing the MediaPipe library and implementing similar touchless interaction features in their projects.\n\n## Architecture Overview 🔻\n\n![AppArchitecture](https://user-images.githubusercontent.com/48355572/263662302-c6f096a8-01dd-4b38-ab61-04b85e8c91fb.png)\n\n\u003e **ⓘ** If you want to delve deep into the specs of the model, feel free to explore the official docs, which can be found [`here`](https://developers.google.com/mediapipe/solutions/vision/hand_landmarker#models). You can access the official `model card` for MediaPipe Hands (Lite/Full) [here](https://drive.google.com/file/d/1-rmIgTfuCbBPW_IFHkh3f0-U_lnGrWpg/view). It provides detailed information about the model.\n\n\u003cbr/\u003e\n\n\n\n## References\n\n[1] MediaPipe Hands Official Paper: \u0026nbsp; ([**LINK**🔗](https://arxiv.org/pdf/2006.10214.pdf))\n\n[2] Applying Hand Gesture Recognition for User Guide Application Using MediaPipe (Paper): \u0026nbsp; ([**LINK**🔗](https://www.researchgate.net/publication/357216549_Applying_Hand_Gesture_Recognition_for_User_Guide_Application_Using_MediaPipe))\n\n[3] MediaPipe Solutions API Docs: \u0026nbsp; ([**LINK**🔗](https://developers.google.com/mediapipe/api/solutions/js/tasks-vision.handlandmarker))\n\n\n\n\u003cbr/\u003e\n\n![dotted-bar-long](https://user-images.githubusercontent.com/48355572/263612162-32246a50-238b-48d7-aa6d-f1562b04ce3a.png)\n\n### Update (v0.1.1)\nPrecaching is enabled! Hence, the app will work offline after the first load. 🎉\n\n## Contact\nPratyay Banerjee — [dev@neilblaze.live](mailto:pratyaybanerjeex@gmail.com)\n\n## License\nDistributed under the Apache License 2.0. See [`LICENSE`](./LICENSE) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fneilblaze%2Fatmx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fneilblaze%2Fatmx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fneilblaze%2Fatmx/lists"}