Breaking Barriers: Indian Sign Language Detection System

An interactive, web-based real-time Indian Sign Language (ISL) recognition system. The system translates hand gestures captured by a webcam into text labels dynamically using deep learning models executed on the client side.

---

🚀 What Has Been Done

This repository contains a lightweight, client-side web application designed to bridge the communication gap between sign language users and non-signers. Here is a breakdown of the components:

1. User Interface & Styling:

   • sundar.html: The main homepage serving as the central hub. It introduces the project and links to the explanation, guide, and detection page.
   • mini.css: A unified vanilla CSS stylesheet implementing responsive layouts, a modern theme, dynamic hover effects, and cards with fade-in animations.
   • about.html: Provides background context on the system, deep learning architecture, and the project's purpose.
   • guide.html: An interactive reference manual containing visual guides for alphanumeric signs.

2. Real-time Sign Language Recognition:

   • miniproject.html: The core detector page that implements real-time sign detection.
   • Roboflow Inference Integration: Integrates the inferencejs library via CDN to run computer vision predictions inside the browser.
   • Webcam Interface: Requests client-side camera access and streams video frames into the inference engine at regular intervals using requestAnimationFrame.
   • Dynamic Output Rendering: Displays detected signs on-screen instantly (e.g. letters and numbers) or displays "No Sign Detected" when no gesture is recognized.

3. Resources:

   • 09signs.png & azsigns.png: Reference guides for Indian Sign Language numbers (0-9) and alphabets (A-Z).
   • ResearchPaper.pdf: The detailed research paper outlining the training methodology, model architecture, custom dataset collection, and test results.

---

📁 Repository Structure

c:\Projects\sign_language\
├── .git/                 # Git repository configuration
├── .vscode/              # Editor configurations
├── 09signs.png           # Number signs reference image
├── azsigns.png           # Alphabet signs reference image
├── ResearchPaper.pdf     # Accompanying research/technical paper
├── about.html            # About/Background page
├── guide.html            # Gestures reference guide page
├── mini.css              # Main stylesheet
├── miniproject.html      # Real-time webcam detection page
└── sundar.html           # Main landing page (homepage)

---

🛠 How to Run & Test

Follow these steps to run and test the application on your local machine:

📋 Prerequisites

• A modern web browser (e.g., Google Chrome, Microsoft Edge, Mozilla Firefox).
• A working built-in or external webcam.
• An active internet connection (required to load the inferencejs CDN library and model metadata).

🖥 Step 1: Open the Application

You can run the project in one of the following ways:

Option A: Local Development Server (Recommended)

Running through a local web server avoids browser security warnings regarding webcam permissions and file system origins.

• Using Python:
  1. Open a terminal/command prompt.
  2. Navigate to the project folder.
  3. Run the following command:

     python -m http.server 8000

  4. Open your browser and navigate to http://localhost:8000/sundar.html.
• Using VS Code:
  • Install the Live Server extension, open the project directory, and click Go Live at the bottom status bar.

Option B: Directly Open HTML Files (Quick Test)

• Simply double-click the sundar.html file in your file explorer to open it directly in your web browser.

---

🔍 Step 2: Test the Real-time Detector

1. On the homepage, navigate to Detect Signs! by clicking the Click Here button under that card. This redirects you to miniproject.html.
2. When prompted by the browser, allow access to your webcam.
3. Wait a moment for the model to load:
   • The status text will change from Loading... to Model Loaded. Detecting....
4. Pose a sign from the Indian Sign Language alphabet or numbers in front of your camera.
5. The system will process your frames and output the prediction below the video stream in real-time.

---

📖 Step 3: Reference the Guide

If you are unsure of how to perform specific gestures:

1. From the homepage, click Click Here under the Guide card to open guide.html.
2. Review the standard hand gestures shown in the diagrams for letters A-Z and numbers 0-9.