fresh clean upload

.gitattributes

@@ -0,0 +1,35 @@
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,168 @@
+
+#images
+images/
+
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+*$py.class
+
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+share/python-wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+
+# PyInstaller
+#  Usually these files are written by a python script from a template
+#  before PyInstaller builds the exe, so as to inject date/other infos into it.
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.nox/
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*.cover
+*.py,cover
+.hypothesis/
+.pytest_cache/
+cover/
+
+# Translations
+*.mo
+*.pot
+
+# Django stuff:
+*.log
+local_settings.py
+db.sqlite3
+db.sqlite3-journal
+
+# Flask stuff:
+instance/
+.webassets-cache
+
+# Scrapy stuff:
+.scrapy
+
+# Sphinx documentation
+docs/_build/
+
+# PyBuilder
+.pybuilder/
+target/
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# IPython
+profile_default/
+ipython_config.py
+
+# pyenv
+#   For a library or package, you might want to ignore these files since the code is
+#   intended to run in multiple environments; otherwise, check them in:
+# .python-version
+
+# pipenv
+#   According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
+#   However, in case of collaboration, if having platform-specific dependencies or dependencies
+#   having no cross-platform support, pipenv may install dependencies that don't work, or not
+#   install all needed dependencies.
+#Pipfile.lock
+
+# poetry
+#   Similar to Pipfile.lock, it is generally recommended to include poetry.lock in version control.
+#   This is especially recommended for binary packages to ensure reproducibility, and is more
+#   commonly ignored for libraries.
+#   https://python-poetry.org/docs/basic-usage/#commit-your-poetrylock-file-to-version-control
+#poetry.lock
+
+# pdm
+#   Similar to Pipfile.lock, it is generally recommended to include pdm.lock in version control.
+#pdm.lock
+#   pdm stores project-wide configurations in .pdm.toml, but it is recommended to not include it
+#   in version control.
+#   https://pdm.fming.dev/#use-with-ide
+.pdm.toml
+
+# PEP 582; used by e.g. github.com/David-OConnor/pyflow and github.com/pdm-project/pdm
+__pypackages__/
+
+# Celery stuff
+celerybeat-schedule
+celerybeat.pid
+
+# SageMath parsed files
+*.sage.py
+
+# Environments
+.env
+.venv
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+mp_env/
+
+# Spyder project settings
+.spyderproject
+.spyproject
+
+# Rope project settings
+.ropeproject
+
+# mkdocs documentation
+/site
+
+# mypy
+.mypy_cache/
+.dmypy.json
+dmypy.json
+
+# Pyre type checker
+.pyre/
+
+# pytype static type analyzer
+.pytype/
+
+# Cython debug symbols
+cython_debug/
+
+# PyCharm
+#  JetBrains specific template is maintained in a separate JetBrains.gitignore that can
+#  be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore
+#  and can be added to the global gitignore or merged into this file.  For a more nuclear
+#  option (not recommended) you can uncomment the following to ignore the entire idea folder.
+#.idea/
+voice_*.mp3
+tmp_audio/
+*.mp3

Dockerfile

@@ -0,0 +1,67 @@
+# ============================================================
+#  Dockerfile — Hugging Face Spaces (Docker SDK)
+#  Free tier: 16GB RAM, 2 vCPU
+#  HF exposes only port 7860 — nginx routes both Flask apps
+#
+#  /          → Flask 5000 (gesture + emotion)
+#  /avatar/   → Flask 5001 (speech-to-sign)
+# ============================================================
+
+FROM python:3.10-slim
+
+# HF Spaces runs as non-root user 1000
+RUN useradd -m -u 1000 user
+USER root
+
+# ── System deps ───────────────────────────────────────────────
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    libgl1 \
+    libglib2.0-0 \
+    libsm6 \
+    libxext6 \
+    libxrender-dev \
+    libgomp1 \
+    nginx \
+    supervisor \
+    curl \
+    git-lfs \
+    && rm -rf /var/lib/apt/lists/*
+
+WORKDIR /app
+
+# ── Python deps ───────────────────────────────────────────────
+COPY requirements.txt .
+RUN pip install --no-cache-dir --upgrade pip && \
+    pip install --no-cache-dir -r requirements.txt
+
+# ── App files ─────────────────────────────────────────────────
+COPY isl_detection.py .
+COPY isl_ui_dashboard.py .
+COPY launcher.py .
+COPY speech_to_sign_avatar.py .
+COPY translation.py .
+COPY unified_launcher.py .
+COPY model.h5 .
+COPY templates/ templates/
+
+# ── Configs ───────────────────────────────────────────────────
+COPY nginx.conf /etc/nginx/nginx.conf
+COPY supervisord.conf /etc/supervisor/conf.d/supervisord.conf
+
+# ── Nginx log dir permissions ─────────────────────────────────
+RUN mkdir -p /var/log/nginx /var/log/supervisor /var/run \
+    && chmod -R 777 /var/log/nginx /var/log/supervisor /var/run \
+    && chown -R user:user /app
+
+# ── Environment ───────────────────────────────────────────────
+ENV RUN_MODE=CLOUD
+ENV PYTHONUNBUFFERED=1
+ENV TF_CPP_MIN_LOG_LEVEL=3
+ENV CUDA_VISIBLE_DEVICES=-1
+
+# HF Spaces MUST use port 7860
+EXPOSE 7860
+
+# ── Start supervisor as root (nginx needs it) ─────────────────
+USER root
+CMD ["/usr/bin/supervisord", "-n", "-c", "/etc/supervisor/conf.d/supervisord.conf"]

README.md

@@ -0,0 +1,29 @@
+---
+title: ISL Indian Sign Language Detection
+emoji: "🤟"
+colorFrom: yellow
+colorTo: green
+sdk: docker
+pinned: false
+license: mit
+app_port: 7860
+---
+
+# 🤟 ISL Indian Sign Language Detection System
+
+Real-time Indian Sign Language detection with emotion recognition and speech-to-sign avatar.
+
+## Features
+- Gesture Recognition — Real-time ISL A-Z letter detection via MediaPipe + TensorFlow
+- Emotion Detection — Happy, Sad, Angry, Surprise, Neutral via facial landmarks
+- Speech-to-Sign Avatar — 3D animated hand avatar for fingerspelling
+
+## Usage
+- Main dashboard: `/`
+- Speech-to-Sign avatar: `/avatar/`
+
+## Built with
+- Flask + Socket.IO
+- TensorFlow CNN model
+- MediaPipe Hand Tracking
+- Three.js 3D Avatar

isl_detection.py

@@ -0,0 +1,918 @@
+# isl_detection.py — CLOUD PRODUCTION VERSION
+#
+# ════════════════════════════════════════════════════════════════════════════
+#  CLOUD FIXES APPLIED (3 changes only — everything else identical):
+#
+#  FIX 1 — pygame TTS: init only in LOCAL mode (crashes on headless server)
+#  FIX 2 — cv2.CAP_DSHOW: Windows-only flag removed for Linux cloud server
+#  FIX 3 — SharedMemory cleanup on startup (prevents crash on restart)
+#
+#  LOCAL CAMERA FIXES (built-in laptop webcam static/noise):
+#  FIX 4 — MJPG codec + 30-frame flush to clear DirectShow buffer on Windows
+#  FIX 5 — CAP_PROP_BUFFERSIZE set before flush (not after)
+#
+#  ALL original features preserved:
+#  ✅ Emotion detection v3 (happy/sad/angry/surprise/neutral)
+#  ✅ Letter hold timer, same-letter cooldown, confidence buffer
+#  ✅ SharedMemory zero-copy frame transfer
+#  ✅ CLOUD mode browser frame ingestion (_cloud_frame)
+#  ✅ gTTS speak button (disabled silently in cloud — browser TTS handles it)
+#  ✅ Word suggestions, auto-TTS, reset, backspace, accept_suggestion
+#  ✅ Oracle Free Tier safe: TARGET_FPS=15, EMOTION_PROCESS_INTERVAL=5
+# ════════════════════════════════════════════════════════════════════════════
+
+import cv2
+import mediapipe as mp
+import numpy as np
+import string
+import time
+import copy
+import itertools
+import os
+import base64
+import platform
+import threading
+from collections import deque, defaultdict, Counter
+from multiprocessing import Manager, Value, shared_memory
+import ctypes
+
+os.environ["CUDA_VISIBLE_DEVICES"] = "-1"
+os.environ["TF_CPP_MIN_LOG_LEVEL"] = "3"
+
+from tensorflow.keras.models import load_model
+from gtts import gTTS
+import pygame
+
+try:
+    import translation
+    TRANSLATION_AVAILABLE = True
+except ImportError:
+    TRANSLATION_AVAILABLE = False
+
+# ─────────────────────────────────────────────────────────────
+#  CONFIG
+# ─────────────────────────────────────────────────────────────
+RUN_MODE          = os.getenv("RUN_MODE", "LOCAL")
+ISL_MODEL_PATH    = "model.h5"
+CAM_INDEX         = 0
+
+# ── Letter timing ──────────────────────────────────────────────────────────
+LETTER_HOLD_SEC          = 0.9
+SAME_LETTER_COOLDOWN_SEC = 1.2
+
+# ── Emotion thresholds ────────────────────────────────────────────────────
+SMOOTHING_FRAMES         = 2
+MIN_CONF_TO_SHOW         = 0.06
+EMOTIONS                 = ["happy", "sad", "angry", "surprise", "neutral"]
+
+CONF_THRESHOLD           = 0.32
+SPACE_THRESHOLD          = 18
+ENABLE_AUTO_TTS          = True
+TTS_LANGUAGE             = "en"
+
+SHOW_LETTER_OVERLAY      = True
+OVERLAY_COLOR_LETTER     = (0, 255, 255)
+OVERLAY_COLOR_CONF       = (255, 255, 0)
+OVERLAY_POSITION         = (20, 50)
+OVERLAY_FONT_SCALE       = 1.5
+OVERLAY_THICKNESS        = 3
+
+COMMON_WORDS = [
+    "HELLO", "HELP", "PLEASE", "THANK", "YOU", "YES", "NO", "GOOD", "BAD",
+    "MORNING", "AFTERNOON", "EVENING", "NIGHT", "TODAY", "TOMORROW", "WATER",
+    "FOOD", "HOME", "SCHOOL", "WORK", "HAPPY", "SAD", "SORRY", "WELCOME"
+]
+
+TARGET_FPS               = 15
+CAMERA_RESOLUTION        = (640, 480)
+EMOTION_PROCESS_INTERVAL = 5
+FRAME_W, FRAME_H         = 640, 480
+
+
+# ─────────────────────────────────────────────────────────────
+#  SHARED STATE
+# ─────────────────────────────────────────────────────────────
+class SharedState:
+    def __init__(self):
+        manager = Manager()
+        self.ui_queue       = manager.Queue(200)
+        self.command_queue  = manager.Queue(20)
+        self.processing_fps = Value(ctypes.c_double, 0.0)
+
+
+# ─────────────────────────────────────────────────────────────
+#  TTS ENGINE
+#  FIX 1: pygame.mixer.init() only runs in LOCAL mode.
+#          On cloud (headless Linux) there is no audio device —
+#          init() would crash the entire process at import time.
+#          In CLOUD mode TTS is silently disabled here; the browser
+#          handles speech via the Web Speech API on the client side.
+# ─────────────────────────────────────────────────────────────
+TTS_ENABLED = False
+if RUN_MODE == "LOCAL":
+    try:
+        pygame.mixer.init()
+        TTS_ENABLED = True
+        print("✅ TTS engine initialized")
+    except Exception as e:
+        print(f"⚠️  TTS init warning: {e}")
+else:
+    print("ℹ️  TTS disabled (CLOUD/headless mode) — browser handles speech")
+
+speaking_word = ""
+pause_audio   = False
+
+
+def speak_text(text, lang=TTS_LANGUAGE):
+    global speaking_word
+
+    # FIX 1 continued: guard every call — silently skip on cloud
+    if not TTS_ENABLED or not text or not text.strip():
+        return
+
+    def _speak():
+        global pause_audio, speaking_word
+        try:
+            fname = f"voice_{int(time.time()*1000)}.mp3"
+            gTTS(text=text, lang=lang).save(fname)
+            speaking_word = text
+            pygame.mixer.music.load(fname)
+            pygame.mixer.music.play()
+            while pygame.mixer.music.get_busy():
+                if pause_audio:
+                    pygame.mixer.music.pause()
+                    while pause_audio:
+                        time.sleep(0.1)
+                    pygame.mixer.music.unpause()
+                pygame.time.Clock().tick(10)
+            speaking_word = ""
+            pygame.mixer.music.stop()
+            pygame.mixer.music.unload()
+            time.sleep(0.15)
+            for _ in range(3):
+                try:
+                    if os.path.exists(fname):
+                        os.remove(fname)
+                    break
+                except PermissionError:
+                    time.sleep(0.2)
+        except Exception as e:
+            print(f"TTS error: {e}")
+            speaking_word = ""
+
+    threading.Thread(target=_speak, daemon=True).start()
+
+
+# ─────────────────────────────────────────────────────────────
+#  LANDMARK UTILITIES
+# ─────────────────────────────────────────────────────────────
+def calc_landmark_list(image, landmarks):
+    w, h = image.shape[1], image.shape[0]
+    return [
+        [min(int(lm.x * w), w - 1), min(int(lm.y * h), h - 1)]
+        for lm in landmarks.landmark
+    ]
+
+
+def pre_process_landmark(landmark_list):
+    temp = copy.deepcopy(landmark_list)
+    bx, by = temp[0]
+    for i in range(len(temp)):
+        temp[i][0] -= bx
+        temp[i][1] -= by
+    flat = list(itertools.chain.from_iterable(temp))
+    mv   = max(map(abs, flat)) if flat else 1
+    return [n / mv for n in flat]
+
+
+def apply_clahe(frame):
+    """Enhance low-light / low-contrast frames for mobile cameras."""
+    try:
+        lab     = cv2.cvtColor(frame, cv2.COLOR_BGR2LAB)
+        l, a, b = cv2.split(lab)
+        clahe   = cv2.createCLAHE(clipLimit=2.5, tileGridSize=(8, 8))
+        return cv2.cvtColor(cv2.merge((clahe.apply(l), a, b)), cv2.COLOR_LAB2BGR)
+    except Exception:
+        return frame
+
+
+# ─────────────────────────────────────────────────────────────
+#  EMOTION DETECTION — v3
+#  Redesigned SAD / ANGRY / SURPRISE with external facial cues.
+#  HAPPY unchanged.
+# ─────────────────────────────────────────────────────────────
+
+def _dist(a, b):
+    """Euclidean distance between two 2-D landmark points."""
+    return float(np.linalg.norm(
+        np.array(a, dtype=np.float32) - np.array(b, dtype=np.float32)
+    ))
+
+
+def detect_emotion_from_landmarks(face_landmarks, img_shape):
+    """
+    Derive emotion scores from 468 MediaPipe Face Mesh landmarks.
+    Returns {emotion: float} summing to 1.0.
+
+    Key landmark reference:
+      Mouth corners : 61 (L), 291 (R)
+      Lip inner     : 13 (top), 14 (bottom)
+      Lip outer     : 0 (top), 17 (bottom)
+      L eye lids    : 159 (upper), 145 (lower)
+      R eye lids    : 386 (upper), 374 (lower)
+      L eye corners : 33 (outer), 133 (inner)
+      R eye corners : 362 (outer), 263 (inner)
+      L brow        : 70 (inner), 105 (outer), 52 (arch)
+      R brow        : 300 (inner), 334 (outer), 282 (arch)
+      Nose tip      : 4
+      Nostrils      : 129 (L ala), 358 (R ala)
+      Cheeks        : 50 (L), 280 (R)
+    """
+    try:
+        pts    = np.array(face_landmarks, dtype=np.float32)
+        face_w = max(float(np.max(pts[:, 0]) - np.min(pts[:, 0])), 1.0)
+        face_h = max(float(np.max(pts[:, 1]) - np.min(pts[:, 1])), 1.0)
+
+        def p(i):
+            return pts[i]
+
+        def nw(a, b):
+            return _dist(p(a), p(b)) / face_w
+
+        def nh(a, b):
+            return _dist(p(a), p(b)) / face_h
+
+        def clamp01(v):
+            return max(0.0, min(1.0, float(v)))
+
+        # ── Mouth ────────────────────────────────────────
+        lc, rc = p(61),  p(291)
+        tl, bl = p(13),  p(14)
+        ut, lb = p(0),   p(17)
+
+        mid_y       = (tl[1] + bl[1]) / 2.0
+        mouth_curve = ((lc[1] - mid_y) + (rc[1] - mid_y)) / (2.0 * face_h)
+        mouth_open  = _dist(ut, lb) / face_h
+        inner_gap   = _dist(tl, bl) / face_h
+        mouth_w     = _dist(lc, rc) / face_w
+        o_ratio     = (mouth_open / (mouth_w + 1e-6)) if mouth_w > 0.05 else 0.0
+
+        # ── Eyes ─────────────────────────────────────────
+        leu, led = p(159), p(145)
+        reu, red = p(386), p(374)
+        lel, ler = p(33),  p(133)
+        rel, rer = p(362), p(263)
+
+        l_eye_h = _dist(leu, led)
+        r_eye_h = _dist(reu, red)
+        l_eye_w = _dist(lel, ler)
+        r_eye_w = _dist(rel, rer)
+
+        l_ear   = l_eye_h / (l_eye_w + 1e-6)
+        r_ear   = r_eye_h / (r_eye_w + 1e-6)
+        avg_ear = (l_ear + r_ear) / 2.0
+        eye_open = ((l_eye_h + r_eye_h) / 2.0) / face_h
+
+        # ── Eyebrows ──────────────────────────────────────
+        lib, rib = p(70),  p(300)
+        lob, rob = p(105), p(334)
+        lab, rab = p(52),  p(282)
+
+        l_brow_in_h  = (leu[1] - lib[1]) / face_h
+        r_brow_in_h  = (reu[1] - rib[1]) / face_h
+        avg_brow_in_h = (l_brow_in_h + r_brow_in_h) / 2.0
+
+        l_brow_out_h  = (leu[1] - lob[1]) / face_h
+        r_brow_out_h  = (reu[1] - rob[1]) / face_h
+        avg_brow_out_h = (l_brow_out_h + r_brow_out_h) / 2.0
+
+        brow_inner_gap = nw(70, 300)
+        brow_oblique   = avg_brow_in_h - avg_brow_out_h
+
+        l_arch_h   = (leu[1] - lab[1]) / face_h
+        r_arch_h   = (reu[1] - rab[1]) / face_h
+        avg_arch_h = (l_arch_h + r_arch_h) / 2.0
+
+        # ── Nose ─────────────────────────────────────────
+        nostril_w  = nw(129, 358)
+        nose_flare = max(0.0, nostril_w - 0.26)
+
+        # ── Cheeks ───────────────────────────────────────
+        lch, rch, nb = p(50), p(280), p(4)
+        cheek_raise  = ((nb[1] - lch[1]) + (nb[1] - rch[1])) / (2.0 * face_h)
+
+        # ── HAPPY ────────────────────────────────────────
+        happy = 0.0
+        if mouth_curve < -0.003:
+            happy += clamp01(abs(mouth_curve) / 0.018) * 0.55
+        if mouth_w > 0.36:
+            happy += clamp01((mouth_w - 0.36) / 0.07) * 0.28
+        if cheek_raise > 0.007:
+            happy += clamp01(cheek_raise / 0.018) * 0.26
+        if avg_ear < 0.27 and eye_open > 0.04:
+            happy += 0.12
+        if mouth_curve > 0.004:         happy *= 0.15
+        if avg_brow_in_h < -0.05:       happy *= 0.40
+        if mouth_open > 0.08:           happy *= 0.55
+        happy = clamp01(happy * 1.30)
+
+        # ── SAD — v3 ──────────────────────────────────────
+        sad = 0.0
+        if brow_oblique > 0.02:
+            sad += clamp01((brow_oblique - 0.02) / 0.055) * 0.45
+        if 0.08 < avg_ear < 0.23:
+            peak_dist = abs(avg_ear - 0.16)
+            sad += clamp01(1.0 - peak_dist / 0.08) * 0.30
+        if 0.02 < eye_open < 0.065:
+            sad += clamp01((0.065 - eye_open) / 0.025) * 0.18
+        if mouth_curve > 0.002:
+            sad += clamp01(mouth_curve / 0.020) * 0.40
+        if mouth_w < 0.36:
+            sad += clamp01((0.36 - mouth_w) / 0.055) * 0.18
+        if avg_brow_in_h > 0.04:
+            sad += clamp01((avg_brow_in_h - 0.04) / 0.040) * 0.20
+        if mouth_curve < -0.004:                            sad *= 0.08
+        if cheek_raise > 0.014:                             sad *= 0.20
+        if avg_ear > 0.30:                                  sad *= 0.25
+        if avg_brow_in_h < -0.06 and brow_inner_gap < 0.14: sad *= 0.15
+        sad = clamp01(sad * 1.50)
+
+        # ── ANGRY — v3 ────────────────────────────────────
+        angry = 0.0
+        if nose_flare > 0.005:
+            angry += clamp01(nose_flare / 0.055) * 0.35
+        if avg_brow_in_h < -0.04:
+            angry += clamp01(abs(avg_brow_in_h + 0.04) / 0.045) * 0.40
+        if brow_inner_gap < 0.155:
+            angry += clamp01((0.155 - brow_inner_gap) / 0.045) * 0.35
+        if avg_brow_out_h < -0.03:
+            angry += clamp01(abs(avg_brow_out_h + 0.03) / 0.040) * 0.20
+        if avg_ear < 0.20 and eye_open < 0.055:
+            angry += clamp01((0.055 - eye_open) / 0.025) * 0.25
+        if inner_gap < 0.030:
+            angry += clamp01((0.030 - inner_gap) / 0.025) * 0.22
+        if brow_oblique < 0.015:
+            angry += 0.08
+        if mouth_curve < -0.005:        angry *= 0.15
+        if cheek_raise > 0.014:         angry *= 0.20
+        if avg_brow_in_h > -0.01:       angry *= 0.20
+        if mouth_open > 0.07:           angry *= 0.40
+        if brow_oblique > 0.04:         angry *= 0.35
+        angry = clamp01(angry * 1.45)
+
+        # ── SURPRISE — v3 ─────────────────────────────────
+        surprise = 0.0
+        if 0.40 < o_ratio < 1.60:
+            peak_dist = abs(o_ratio - 0.90)
+            surprise += clamp01(1.0 - peak_dist / 0.55) * 0.50
+        if 0.03 < mouth_open < 0.11:
+            surprise += clamp01((mouth_open - 0.03) / 0.06) * 0.25
+        if mouth_w > 0.40:
+            surprise *= max(0.10, 1.0 - (mouth_w - 0.40) / 0.10)
+        if avg_ear > 0.27:
+            surprise += clamp01((avg_ear - 0.27) / 0.10) * 0.40
+        if eye_open > 0.07:
+            surprise += clamp01((eye_open - 0.07) / 0.055) * 0.28
+        if avg_arch_h > 0.05:
+            surprise += clamp01((avg_arch_h - 0.05) / 0.055) * 0.35
+        if avg_brow_in_h > 0.04 and avg_brow_out_h > 0.02:
+            surprise += 0.15
+        if abs(brow_oblique) < 0.025:
+            surprise += 0.08
+        if mouth_curve < -0.005:        surprise *= 0.30
+        if avg_brow_in_h < -0.03:       surprise *= 0.20
+        if avg_ear < 0.18:              surprise *= 0.25
+        if brow_inner_gap < 0.13:       surprise *= 0.25
+        if mouth_w > 0.44:              surprise *= 0.25
+        if mouth_open > 0.12 and o_ratio < 0.40:
+            surprise *= 0.30
+        surprise = clamp01(surprise * 1.35)
+
+        # ── NEUTRAL ───────────────────────────────────────
+        neutral = max(0.0, 1.0 - (happy + sad + angry + surprise) * 1.05)
+
+        total = happy + sad + angry + surprise + neutral
+        if total > 1e-6:
+            happy    /= total
+            sad      /= total
+            angry    /= total
+            surprise /= total
+            neutral  /= total
+
+        return {k: round(float(v), 4)
+                for k, v in zip(EMOTIONS, [happy, sad, angry, surprise, neutral])}
+
+    except Exception as ex:
+        print(f"⚠️  Emotion detection error: {ex}")
+        return {e: (1.0 if e == "neutral" else 0.0) for e in EMOTIONS}
+
+
+# ─────────────────────────────────────────────────────────────
+#  DISPLAY HELPERS
+# ─────────────────────────────────────────────────────────────
+def get_word_suggestions(partial, word_freq):
+    if not partial:
+        return []
+    p_up = partial.upper()
+    seen = {}
+    out  = []
+    for word, freq in word_freq.most_common(20):
+        if word.startswith(p_up) and word != p_up:
+            out.append((word, freq)); seen[word] = True
+    for word in COMMON_WORDS:
+        if word.startswith(p_up) and word not in seen:
+            out.append((word, 0))
+    out.sort(key=lambda x: (-x[1], x[0]))
+    return [m[0] for m in out[:3]]
+
+
+def draw_hand_landmarks(frame, hand_landmarks):
+    mp.solutions.drawing_utils.draw_landmarks(
+        frame, hand_landmarks, mp.solutions.hands.HAND_CONNECTIONS,
+        mp.solutions.drawing_utils.DrawingSpec(
+            color=(0, 255, 0), thickness=2, circle_radius=3),
+        mp.solutions.drawing_utils.DrawingSpec(
+            color=(0, 255, 255), thickness=2),
+    )
+
+
+def draw_letter_overlay(frame, letter, confidence):
+    if not SHOW_LETTER_OVERLAY or not letter or confidence <= 0:
+        return frame
+    x, y    = OVERLAY_POSITION
+    overlay = frame.copy()
+    cv2.rectangle(overlay, (x - 10, y - 40), (x + 220, y + 20), (0, 0, 0), -1)
+    frame = cv2.addWeighted(overlay, 0.5, frame, 0.5, 0)
+    cv2.putText(frame, letter, (x, y),
+                cv2.FONT_HERSHEY_SIMPLEX, OVERLAY_FONT_SCALE,
+                OVERLAY_COLOR_LETTER, OVERLAY_THICKNESS, cv2.LINE_AA)
+    tw = cv2.getTextSize(letter, cv2.FONT_HERSHEY_SIMPLEX,
+                         OVERLAY_FONT_SCALE, OVERLAY_THICKNESS)[0][0]
+    cv2.putText(frame, f"({confidence:.2f})", (x + tw + 10, y),
+                cv2.FONT_HERSHEY_SIMPLEX, OVERLAY_FONT_SCALE * 0.7,
+                OVERLAY_COLOR_CONF, OVERLAY_THICKNESS - 1, cv2.LINE_AA)
+    return frame
+
+
+# ─────────────────────────────────────────────────────────────
+#  CORE PROCESSING ENGINE
+# ──────────────────────────���──────────────────────────────────
+def core_processing_engine(shared_state, shm_name=None, frame_lock_val=None, frame_seq=None):
+    print("=" * 70)
+    print("🚀 ISL Detection System Starting…  (emotion engine v3)")
+    print(f"   RUN_MODE         = {RUN_MODE}")
+    print(f"   CONF_THRESHOLD   = {CONF_THRESHOLD}")
+    print(f"   LETTER_HOLD_SEC  = {LETTER_HOLD_SEC}s")
+    print(f"   SharedMemory     = {'enabled' if shm_name else 'disabled (base64 fallback)'}")
+    print("=" * 70)
+
+    # ── SharedMemory init ──────────────────────────────────────────────────
+    shm       = None
+    shm_array = None
+
+    if shm_name is not None:
+        try:
+            shm       = shared_memory.SharedMemory(name=shm_name)
+            shm_array = np.ndarray((480, 640, 3), dtype=np.uint8, buffer=shm.buf)
+            print("✅ SharedMemory connected (Zero-copy mode)")
+        except Exception as e:
+            print(f"❌ SharedMemory init failed: {e}")
+            return
+
+    # ── Load ISL model ─────────────────────────────────────────────────────
+    try:
+        model = load_model(ISL_MODEL_PATH)
+        print("✅ ISL model loaded")
+        print(f"   Input  shape : {model.input_shape}")
+        print(f"   Output shape : {model.output_shape}")
+    except Exception as e:
+        print(f"❌ Failed to load model: {e}")
+        if shm:
+            shm.close()
+        return
+
+    try:
+        model.predict(np.zeros((1, 42), np.float32), verbose=0)
+        print("✅ Model warmed up")
+    except Exception as e:
+        print(f"⚠️  Warmup: {e}")
+
+    alphabet = list(string.ascii_uppercase) + [str(i) for i in range(1, 10)]
+    print(f"   Alphabet : {len(alphabet)} classes  (model outputs {model.output_shape[1]})")
+
+    # ── Detection state ────────────────────────────────────────────────────
+    current_word             = []
+    sentence                 = []
+    no_hand_frames           = 0
+
+    candidate_letter         = ""
+    candidate_since          = 0.0
+    last_accepted_letter     = ""
+    last_accepted_time       = 0.0
+
+    letter_confidence_buffer = deque(maxlen=4)
+    word_frequency           = Counter()
+    current_detected_letter  = ""
+    current_confidence       = 0.0
+
+    emotion_history          = deque(maxlen=SMOOTHING_FRAMES)
+    current_emotion          = "neutral"
+    emotion_scores           = {e: (1.0 if e == "neutral" else 0.0) for e in EMOTIONS}
+    emotion_timeline         = deque(maxlen=100)
+    emotion_frame_counter    = 0
+
+    frame_count     = 0
+    fps_frame_times = deque(maxlen=30)
+
+    stats = {
+        "letters_detected": 0,
+        "words_formed":     0,
+        "sentences_formed": 0,
+        "emotion_changes":  0,
+        "session_start":    time.time(),
+    }
+
+    cmd_queue = shared_state.command_queue
+    ui_queue  = shared_state.ui_queue
+
+    # ── Camera init ────────────────────────────────────────────────────────
+    print("🎥 Initializing camera…")
+    if RUN_MODE == "LOCAL":
+        # FIX 2: cv2.CAP_DSHOW is Windows-only — use platform check
+        if platform.system() == "Windows":
+            cap = cv2.VideoCapture(CAM_INDEX, cv2.CAP_DSHOW)
+        else:
+            cap = cv2.VideoCapture(CAM_INDEX)   # Linux/Mac — no CAP_DSHOW
+
+        if not cap.isOpened():
+            cap = cv2.VideoCapture(CAM_INDEX)   # fallback without backend flag
+        if not cap.isOpened():
+            print("❌ Camera not found — is another app using it?")
+            if shm:
+                shm.close()
+            return
+
+        # FIX 4: Set MJPG codec BEFORE resolution — forces hardware MJPEG path
+        # on built-in laptop webcams, avoiding the raw uncompressed buffer that
+        # causes the horizontal static/noise stripes seen in the MJPEG stream.
+        # Must be set before width/height or it has no effect on some drivers.
+        if platform.system() == "Windows":
+            cap.set(cv2.CAP_PROP_FOURCC, cv2.VideoWriter_fourcc('M', 'J', 'P', 'G'))
+
+        cap.set(cv2.CAP_PROP_FRAME_WIDTH,  CAMERA_RESOLUTION[0])
+        cap.set(cv2.CAP_PROP_FRAME_HEIGHT, CAMERA_RESOLUTION[1])
+        cap.set(cv2.CAP_PROP_FPS,          TARGET_FPS)
+
+        # FIX 5: Buffer size must be 1 to prevent stale frame accumulation.
+        # Set AFTER resolution so the driver doesn't reset it.
+        cap.set(cv2.CAP_PROP_BUFFERSIZE, 1)
+
+        # FIX 4 continued: Flush 30 frames (was 10) to drain the DirectShow
+        # ring buffer. Built-in webcams pre-fill ~20 frames before stabilizing.
+        print("���� Flushing camera buffer (30 frames)…")
+        for _ in range(30):
+            cap.read()
+
+        # Verify the camera is actually producing valid frames
+        ret, test_frame = cap.read()
+        if not ret or test_frame is None:
+            print("❌ Camera flush failed — no valid frame received")
+            cap.release()
+            if shm:
+                shm.close()
+            return
+
+        actual_w = int(cap.get(cv2.CAP_PROP_FRAME_WIDTH))
+        actual_h = int(cap.get(cv2.CAP_PROP_FRAME_HEIGHT))
+        print(f"✅ Camera: {actual_w}x{actual_h}")
+        print("✅ Camera ready!")
+    else:
+        cap = None
+        print("☁️  CLOUD mode — waiting for browser frames via socket")
+
+    print("=" * 70)
+
+    mp_hands = mp.solutions.hands
+    mp_face  = mp.solutions.face_mesh
+
+    with mp_hands.Hands(
+            static_image_mode=False,
+            model_complexity=0,
+            max_num_hands=1,
+            min_detection_confidence=0.6,
+            min_tracking_confidence=0.6,
+        ) as hands, \
+         mp_face.FaceMesh(
+            static_image_mode=False,
+            max_num_faces=1,
+            refine_landmarks=True,
+            min_detection_confidence=0.6,
+            min_tracking_confidence=0.6,
+        ) as face_mesh:
+
+        print("✅ MediaPipe initialized — entering main loop")
+
+        while True:
+            t0  = time.time()
+            now = t0
+
+            # ── Commands ───────────────────────────────────────────────────
+            try:
+                while not cmd_queue.empty():
+                    cmd    = cmd_queue.get_nowait()
+                    action = cmd.get("action", "")
+
+                    if action == "reset":
+                        current_word         = []
+                        sentence             = []
+                        no_hand_frames       = 0
+                        candidate_letter     = ""
+                        candidate_since      = 0.0
+                        last_accepted_letter = ""
+                        last_accepted_time   = 0.0
+                        letter_confidence_buffer.clear()
+                        current_detected_letter = ""
+                        current_confidence      = 0.0
+                        print("🔄 Reset")
+
+                    elif action == "backspace":
+                        if current_word:
+                            current_word.pop()
+                        elif sentence:
+                            sentence.pop()
+
+                    elif action == "accept_suggestion":
+                        w = cmd.get("word", "")
+                        if w:
+                            current_word = list(w)
+
+                    elif action == "speak":
+                        txt = (cmd.get("text", "")
+                               or (" ".join(sentence) if sentence
+                                   else "".join(current_word)))
+                        if txt:
+                            speak_text(txt)  # silently skipped in CLOUD mode
+
+                    elif action == "stop":
+                        if cap:
+                            cap.release()
+                        if shm:
+                            shm.close()
+                        return
+            except Exception:
+                pass
+
+            # ── Capture ────────────────────────────────────────────────────
+            if RUN_MODE == "LOCAL":
+                ret, raw = cap.read()
+                if not ret or raw is None:
+                    print("⚠️  Camera read failed — retrying")
+                    time.sleep(0.02)
+                    continue
+            else:
+                fd = getattr(shared_state, "_cloud_frame", None)
+                if fd is None:
+                    time.sleep(0.03)
+                    continue
+                shared_state._cloud_frame = None
+                try:
+                    raw = cv2.imdecode(
+                        np.frombuffer(base64.b64decode(fd), np.uint8),
+                        cv2.IMREAD_COLOR)
+                    if raw is None:
+                        continue
+                except Exception:
+                    continue
+
+            frame     = cv2.resize(raw, (FRAME_W, FRAME_H))
+            frame     = cv2.flip(frame, 1)
+            frame_rgb = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)
+            frame_rgb.flags.writeable = False
+
+            # ── Hand detection ─────────────────────────────────────────────
+            hand_results = hands.process(frame_rgb)
+            frame_rgb.flags.writeable = True
+
+            detected_letter = ""
+            hand_detected   = False
+
+            if hand_results and hand_results.multi_hand_landmarks:
+                hand_detected  = True
+                no_hand_frames = 0
+
+                for hlm in hand_results.multi_hand_landmarks:
+                    draw_hand_landmarks(frame, hlm)
+                    try:
+                        lm_list  = calc_landmark_list(frame, hlm)
+                        pre_list = pre_process_landmark(lm_list)
+
+                        if model is not None and len(pre_list) == 42:
+                            features   = np.array(pre_list, dtype=np.float32).reshape(1, 42)
+                            pred       = model.predict(features, verbose=0)
+                            prob       = float(np.max(pred))
+                            raw_letter = alphabet[int(np.argmax(pred))]
+
+                            current_detected_letter = raw_letter
+                            current_confidence      = prob
+
+                            print(f"DEBUG → {raw_letter} {prob:.4f}")
+
+                            if prob >= CONF_THRESHOLD:
+                                if raw_letter == candidate_letter:
+                                    letter_confidence_buffer.append(prob)
+                                else:
+                                    candidate_letter = raw_letter
+                                    candidate_since  = now
+                                    letter_confidence_buffer.clear()
+                                    letter_confidence_buffer.append(prob)
+
+                                avg_conf  = float(np.mean(letter_confidence_buffer))
+                                hold_time = now - candidate_since
+
+                                if hold_time >= LETTER_HOLD_SEC and avg_conf >= CONF_THRESHOLD:
+                                    same_letter_ok = (
+                                        raw_letter != last_accepted_letter or
+                                        (now - last_accepted_time) >= SAME_LETTER_COOLDOWN_SEC
+                                    )
+                                    if same_letter_ok:
+                                        detected_letter      = raw_letter
+                                        last_accepted_letter = raw_letter
+                                        last_accepted_time   = now
+                                        current_word.append(raw_letter)
+                                        stats["letters_detected"] += 1
+                                        print(f"✍️  Letter: {raw_letter}  "
+                                              f"(held {hold_time:.2f}s, conf {avg_conf:.3f})")
+                                        candidate_letter = ""
+                                        candidate_since  = 0.0
+                                        letter_confidence_buffer.clear()
+                            else:
+                                candidate_letter = ""
+                                candidate_since  = 0.0
+                                letter_confidence_buffer.clear()
+
+                    except Exception as e:
+                        print(f"⚠️  Prediction error: {e}")
+
+            else:
+                no_hand_frames += 1
+                letter_confidence_buffer.clear()
+                candidate_letter        = ""
+                candidate_since         = 0.0
+                current_detected_letter = ""
+                current_confidence      = 0.0
+
+                if no_hand_frames >= SPACE_THRESHOLD and current_word:
+                    word = "".join(current_word)
+                    sentence.append(word)
+                    word_frequency[word] += 1
+                    stats["words_formed"] += 1
+                    print(f"📝 Word committed: {word}")
+                    if ENABLE_AUTO_TTS:
+                        speak_text(word)   # silently skipped in CLOUD mode
+                    current_word         = []
+                    last_accepted_letter = ""
+                    last_accepted_time   = 0.0
+                    no_hand_frames       = 0
+
+            frame = draw_letter_overlay(frame, current_detected_letter, current_confidence)
+
+            # ── Emotion (every N frames) ───────────────────────────────────
+            emotion_frame_counter += 1
+            if emotion_frame_counter % EMOTION_PROCESS_INTERVAL == 0:
+                ns = {e: (1.0 if e == "neutral" else 0.0) for e in EMOTIONS}
+                try:
+                    cr = cv2.cvtColor(apply_clahe(frame), cv2.COLOR_BGR2RGB)
+                    cr.flags.writeable = False
+                    mr = face_mesh.process(cr)
+                    cr.flags.writeable = True
+                    if mr and mr.multi_face_landmarks:
+                        ns = detect_emotion_from_landmarks(
+                            calc_landmark_list(frame, mr.multi_face_landmarks[0]),
+                            frame.shape)
+                except Exception:
+                    pass
+
+                emotion_history.append(ns)
+                avg_e = defaultdict(float)
+                for d in emotion_history:
+                    for k, v in d.items():
+                        avg_e[k] += v
+                for k in avg_e:
+                    avg_e[k] /= len(emotion_history)
+
+                dominant = (max(avg_e, key=avg_e.get)
+                            if avg_e and max(avg_e.values()) >= MIN_CONF_TO_SHOW
+                            else "neutral")
+
+                if current_emotion != dominant:
+                    stats["emotion_changes"] += 1
+                    scores_str = " | ".join(
+                        [f"{k.upper()}:{avg_e[k]:.3f}" for k in EMOTIONS]
+                    )
+                    print(f"😊 Emotion: {current_emotion.upper()} → {dominant.upper()}")
+                    print(f"   Scores  : {scores_str}")
+
+                current_emotion = dominant
+                emotion_scores  = dict(avg_e)
+                emotion_timeline.append({
+                    "time":    time.time(),
+                    "emotion": dominant,
+                    "scores":  dict(avg_e),
+                })
+
+            # ── FPS ────────────────────────────────────────────────────────
+            frame_count += 1
+            fps_frame_times.append(time.time())
+            if len(fps_frame_times) > 1:
+                td = fps_frame_times[-1] - fps_frame_times[0]
+                if td > 0:
+                    shared_state.processing_fps.value = (len(fps_frame_times) - 1) / td
+
+            # ── Frame output ───────────────────────────────────────────────
+            if shm_array is not None:
+                shm_array[:] = frame
+                if frame_lock_val is not None:
+                    frame_lock_val.value = 1
+                if frame_seq is not None:
+                    frame_seq.value += 1
+                frame_base64 = None
+            else:
+                _, buffer_img = cv2.imencode(
+                    ".jpg", frame, [cv2.IMWRITE_JPEG_QUALITY, 65])
+                frame_base64 = base64.b64encode(buffer_img.tobytes()).decode("utf-8")
+
+            # ── State packet ───────────────────────────────────────────────
+            state_packet = {
+                "frame":              frame_base64 if frame_base64 else "",
+                "current_word":       "".join(current_word),
+                "sentence":           " ".join(sentence),
+                "suggestions":        get_word_suggestions(
+                                          "".join(current_word), word_frequency),
+                "emotion":            current_emotion,
+                "emotion_scores":     emotion_scores,
+                "emotion_timeline":   list(emotion_timeline)[-20:],
+                "stats":              stats.copy(),
+                "detected_letter":    detected_letter,
+                "hand_detected":      hand_detected,
+                "fps":                shared_state.processing_fps.value,
+                "timestamp":          time.time(),
+                "speaking":           speaking_word,
+                "overlay_letter":     current_detected_letter,
+                "overlay_confidence": current_confidence,
+                "hold_progress":      min(1.0,
+                                          (now - candidate_since) / LETTER_HOLD_SEC)
+                                      if candidate_letter else 0.0,
+            }
+
+            try:
+                ui_queue.put_nowait(state_packet)
+            except Exception:
+                try:
+                    ui_queue.get_nowait()
+                    ui_queue.put_nowait(state_packet)
+                except Exception:
+                    pass
+
+            if frame_count == 1:
+                print("📤 First frame sent — dashboard can read now")
+                if shm_array is not None:
+                    print("📤 SharedMemory active — zero-copy mode")
+
+            # ── Frame-rate limiter ─────────────────────────────────────────
+            wait = (1.0 / TARGET_FPS) - (time.time() - t0)
+            if wait > 0:
+                time.sleep(wait)
+
+    if cap:
+        cap.release()
+    if shm is not None:
+        shm.close()
+
+    print("✅ System stopped")
+
+
+# ─────────────────────────────────────────────────────────────
+#  STANDALONE ENTRY POINT
+# ─────────────────────────────────────────────────────────────
+if __name__ == "__main__":
+    FRAME_BYTES = FRAME_W * FRAME_H * 3
+
+    # FIX 3: Clean up leftover shared memory from a previous crash
+    # Without this, restarting after a crash raises FileExistsError
+    try:
+        _old_shm = shared_memory.SharedMemory(name="isl_frame_shm")
+        _old_shm.close()
+        _old_shm.unlink()
+        print("🧹 Cleaned up leftover shared memory from previous run")
+    except FileNotFoundError:
+        pass  # normal — no leftover
+
+    shm  = shared_memory.SharedMemory(create=True, size=FRAME_BYTES, name="isl_frame_shm")
+    seq  = Value(ctypes.c_uint64, 0)
+    lock = Value(ctypes.c_bool, False)
+    ss   = SharedState()
+    try:
+        core_processing_engine(ss, shm_name=shm.name, frame_lock_val=lock, frame_seq=seq)
+    finally:
+        shm.close()
+        shm.unlink()

isl_ui_dashboard.py

@@ -0,0 +1,941 @@
+# isl_ui_dashboard.py — CLOUD PRODUCTION VERSION
+#
+# ════════════════════════════════════════════════════════════════════════════
+#  CLOUD FIXES APPLIED (4 changes only — everything else identical):
+#
+#  FIX 1 — Browser camera: HTML now captures + emits browser_frame via socket
+#  FIX 2 — Nav links: localhost:5000/5001 → dynamic window.location URLs
+#  FIX 3 — _cloud_frame scope: shared_state stored as module-level variable
+#  FIX 4 — /avatar route added
+#
+#  LOCAL CAMERA FIX:
+#  FIX 5 — generate_frames() now waits for frame_seq > 0 before streaming.
+#           Without this, the MJPEG client receives raw uninitialized
+#           SharedMemory bytes (all zeros or garbage) before the detection
+#           engine writes the first valid frame — causing static/noise on
+#           the built-in laptop webcam display.
+#           Also removed unreachable `return` after infinite fallback loop.
+#
+#  TRANSPORT FIX:
+#  FIX 6 — transports updated to ['websocket', 'polling'] with upgrade:true
+#           in the embedded HTML Socket.IO client. Polling-only breaks camera
+#           streaming on HuggingFace Spaces (HTTPS) and other cloud hosts.
+#           WebSocket is tried first; polling is the automatic fallback.
+#
+#  ALL original features preserved:
+#  ✅ MJPEG /video_feed from SharedMemory (zero-copy)
+#  ✅ Socket.IO state_update events (emotion, word, suggestions, stats)
+#  ✅ Speak, Backspace, Reset commands
+#  ✅ Emotion bars, Chart.js timeline, word suggestions
+#  ✅ async_mode='threading', transports=['websocket','polling']
+# ════════════════════════════════════════════════════════════════════════════
+
+import time
+import threading
+import numpy as np
+import cv2
+import multiprocessing.shared_memory
+
+from queue import Queue, Empty
+from flask import Flask, render_template_string, Response, jsonify, request
+from flask_socketio import SocketIO
+
+# ── App & SocketIO ────────────────────────────────────────────────────────────
+app = Flask(__name__)
+app.config["SECRET_KEY"] = "isl_secret_2024"
+
+socketio = SocketIO(
+    app,
+    async_mode="threading",
+    cors_allowed_origins="*",
+    ping_timeout=60,
+    ping_interval=25,
+    logger=False,
+    engineio_logger=False,
+)
+
+# ── Module-level state ────────────────────────────────────────────────────────
+_local_state_q: Queue = Queue(100)
+FRAME_W, FRAME_H      = 640, 480
+_shm_name   = None
+_frame_seq  = None
+
+# FIX 3: shared_state stored at module level so on_browser_frame() can
+#         set _cloud_frame without being inside dashboard_process() scope.
+_shared_state = None
+
+# ── HTML ──────────────────────────────────────────────────────────────────────
+HTML = r"""
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"/>
+<title>ISL Gesture Recognition — AI Sign Language</title>
+<link rel="preconnect" href="https://fonts.googleapis.com"/>
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
+<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet"/>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.2/socket.io.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
+<style>
+:root {
+  --bg:    #0d1117;
+  --surf:  #131922;
+  --card:  #1a2233;
+  --bdr:   rgba(212,168,83,.13);
+  --bdrm:  rgba(212,168,83,.30);
+  --bdrh:  rgba(212,168,83,.58);
+  --gold:  #d4a853;
+  --goldb: #f0c76a;
+  --goldd: #a07c3a;
+  --sage:  #7eb89a;
+  --saged: #4e7d66;
+  --txt:   #f0ede6;
+  --txtm:  #a8a096;
+  --txtl:  #5a5650;
+  --red:   #c0614a;
+  --r8:    8px;
+  --r14:   14px;
+  --fD:    'Playfair Display', Georgia, serif;
+  --fB:    'DM Sans', system-ui, sans-serif;
+  --fM:    'DM Mono', monospace;
+}
+*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
+html, body { height:100%; overflow:hidden; }
+body {
+  font-family: var(--fB);
+  background: var(--bg);
+  color: var(--txt);
+  -webkit-font-smoothing: antialiased;
+  display: flex;
+  flex-direction: column;
+}
+
+#app { display:flex; flex:1; overflow:hidden; height:100%; }
+
+/* ── Camera pane ── */
+#cam-pane {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  background: var(--bg);
+  position: relative;
+  overflow: hidden;
+}
+.topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 16px 0;
+  flex-shrink: 0;
+  position: relative;
+  z-index: 5;
+}
+.brand { display:flex; align-items:baseline; gap:8px; }
+.brand-t { font-family:var(--fD); font-size:1.1rem; font-weight:700; color:var(--gold); }
+.brand-s { font-size:.65rem; color:var(--txtl); text-transform:uppercase; letter-spacing:.07em; }
+.live-badge {
+  font-size:.65rem; font-family:var(--fM); color:var(--sage);
+  background:rgba(126,184,154,.10); border:1px solid rgba(126,184,154,.25);
+  padding:3px 9px; border-radius:20px; transition:all .3s;
+}
+.live-badge.rec { color:var(--gold); background:rgba(212,168,83,.1); border-color:var(--bdrm); animation:pd .9s infinite; }
+.live-badge.err { color:var(--red); background:rgba(192,97,74,.1); border-color:rgba(192,97,74,.3); }
+@keyframes pd { 0%,100%{opacity:1} 50%{opacity:.55} }
+
+#camera-feed {
+  flex: 1; width:100%; display:block; object-fit:cover; background:#000;
+}
+.cam-overlay {
+  position:absolute; bottom:0; left:0; right:0;
+  padding:12px 18px 14px;
+  background: linear-gradient(to top, rgba(13,17,23,1) 55%, transparent);
+  display:flex; align-items:flex-end; justify-content:space-between;
+  gap:10px; pointer-events:none; z-index:5;
+}
+.co-letter {
+  font-family:var(--fD); font-size:clamp(2rem,5vw,3.2rem);
+  font-weight:700; color:var(--goldb); line-height:1;
+}
+.co-word {
+  font-size:.85rem; font-weight:600; color:var(--gold);
+  font-family:var(--fM); letter-spacing:.05em;
+}
+.co-desc { font-size:.72rem; color:var(--txtm); text-align:right; max-width:200px; line-height:1.45; }
+.co-progress { position:absolute; bottom:0; left:0; right:0; height:3px; background:rgba(212,168,83,.08); }
+.co-bar {
+  height:100%; width:0%;
+  background:linear-gradient(90deg, var(--goldd), var(--goldb));
+  transition:width .3s ease; position:relative; overflow:hidden;
+}
+.co-bar::after {
+  content:''; position:absolute; inset:0;
+  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
+  animation:shimmer 1.8s infinite;
+}
+@keyframes shimmer { from{transform:translateX(-100%)} to{transform:translateX(200%)} }
+.cam-placeholder {
+  position:absolute; inset:0;
+  display:flex; flex-direction:column;
+  align-items:center; justify-content:center;
+  gap:10px; color:var(--txtl); font-size:.8rem; z-index:2; pointer-events:none;
+}
+.cam-placeholder .ph-icon { font-size:2.8rem; opacity:.25; }
+
+/* ── Control pane ── */
+#ctrl-pane {
+  width:340px; flex-shrink:0; display:flex; flex-direction:column;
+  background:var(--surf); border-left:1px solid var(--bdr);
+  overflow-y:auto; overflow-x:hidden;
+}
+#ctrl-pane::-webkit-scrollbar { width:4px; }
+#ctrl-pane::-webkit-scrollbar-thumb { background:var(--bdrm); border-radius:4px; }
+
+@media (max-width:720px) {
+  html,body { overflow:hidden; }
+  #app { flex-direction:column; height:100%; }
+  #cam-pane { flex:0 0 46vh; min-height:260px; max-height:46vh; width:100%; }
+  #ctrl-pane { width:100%; flex:1; border-left:none; border-top:1px solid var(--bdr); overflow-y:auto; }
+  .topbar { padding:8px 12px 0; }
+  .brand-t { font-size:.95rem; }
+}
+
+.cpanel { padding:14px 16px; display:flex; flex-direction:column; gap:12px; }
+
+.sec-label {
+  font-size:.65rem; font-weight:600; text-transform:uppercase;
+  letter-spacing:.08em; color:var(--txtl);
+  display:flex; align-items:center; gap:6px; font-family:var(--fM);
+}
+
+/* ── Status pill ── */
+.status {
+  display:flex; align-items:center; gap:7px; padding:7px 13px;
+  border-radius:30px; font-size:.73rem; font-weight:500;
+  border:1px solid var(--bdr); background:var(--card); color:var(--txtm);
+  transition:all .3s; min-height:34px; font-family:var(--fM);
+}
+.sdot { width:7px; height:7px; border-radius:50%; background:var(--txtl); flex-shrink:0; transition:all .3s; }
+.status.act .sdot { background:var(--sage); box-shadow:0 0 8px var(--sage); animation:pd 1.4s infinite; }
+.status.act { border-color:rgba(126,184,154,.3); color:var(--sage); }
+.status.err .sdot { background:var(--red); }
+.status.err { border-color:rgba(192,97,74,.3); color:var(--red); }
+
+/* ── Text display ── */
+.text-display {
+  background:var(--card); border:1px solid var(--bdr);
+  border-radius:var(--r14); padding:10px 13px; min-height:52px;
+}
+.cur-word {
+  font-size:1.15rem; font-weight:700; color:var(--goldb);
+  font-family:var(--fD); line-height:1.2; margin-bottom:4px;
+}
+.cur-sentence { font-size:.75rem; color:var(--txtm); line-height:1.5; font-family:var(--fM); }
+
+/* ── Buttons ── */
+.btn-row { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
+.btn {
+  display:flex; align-items:center; justify-content:center; gap:5px;
+  padding:9px 6px; border:1px solid transparent; border-radius:var(--r14);
+  font-family:var(--fB); font-size:.76rem; font-weight:600;
+  cursor:pointer; transition:all .22s; white-space:nowrap; overflow:hidden;
+}
+.btn:active { transform:scale(.96); }
+.btn:disabled { opacity:.4; cursor:not-allowed; }
+.btn-speak {
+  background:linear-gradient(135deg,#4e7d66,#7eb89a);
+  color:#0d1117; border-color:rgba(126,184,154,.35);
+}
+.btn-speak:hover { box-shadow:0 4px 16px rgba(126,184,154,.3); }
+.btn-back { background:transparent; color:var(--txtm); border-color:var(--bdr); }
+.btn-back:hover { border-color:var(--bdrm); color:var(--txt); }
+.btn-reset { background:transparent; color:var(--red); border-color:rgba(192,97,74,.3); }
+.btn-reset:hover { background:rgba(192,97,74,.08); border-color:rgba(192,97,74,.55); }
+
+.divider { height:1px; background:var(--bdr); margin:0 -16px; }
+
+/* ── Emotion ── */
+.emotion-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
+.emotion-big { font-family:var(--fD); font-size:1.1rem; font-weight:700; color:var(--goldb); }
+.emotion-icon { font-size:1.5rem; animation:emojiPop 2.2s ease infinite; }
+@keyframes emojiPop { 0%,100%{transform:scale(1)} 50%{transform:scale(1.12)} }
+
+.emo-bars { display:flex; flex-direction:column; gap:5px; }
+.emo-bar { display:flex; align-items:center; gap:8px; }
+.ebo-label { width:78px; font-size:.72rem; color:var(--txtm); flex-shrink:0; font-family:var(--fB); }
+.ebo-track {
+  flex:1; height:20px; background:rgba(26,34,51,.8);
+  border-radius:10px; overflow:hidden; border:1px solid var(--bdr);
+}
+.ebo-fill {
+  height:100%; transition:width .5s cubic-bezier(.4,0,.2,1);
+  display:flex; align-items:center; justify-content:flex-end;
+  padding-right:6px; font-size:.62rem; font-weight:700;
+  font-family:var(--fM); color:rgba(0,0,0,.75); min-width:28px;
+}
+
+/* ── Suggestions ── */
+.sug-detected {
+  font-size:.65rem; font-family:var(--fM); color:var(--gold);
+  background:rgba(212,168,83,.07); border:1px solid var(--bdr);
+  border-radius:var(--r8); padding:4px 10px; margin-bottom:5px; letter-spacing:.04em;
+}
+.sug-list { display:flex; flex-direction:column; gap:4px; }
+.sug-item {
+  display:flex; align-items:center; gap:9px; padding:7px 11px;
+  border-radius:var(--r8); background:var(--card); border:1px solid var(--bdr);
+  cursor:pointer; transition:all .2s; font-size:.82rem; color:var(--txt);
+}
+.sug-item:hover {
+  background:rgba(212,168,83,.08); border-color:var(--bdrm);
+  transform:translateX(3px); color:var(--goldb);
+}
+.sug-n {
+  font-family:var(--fM); font-size:.65rem; font-weight:700; color:var(--gold);
+  background:rgba(212,168,83,.12); border:1px solid rgba(212,168,83,.2);
+  width:20px; height:20px; display:flex; align-items:center; justify-content:center;
+  border-radius:5px; flex-shrink:0;
+}
+.sug-empty { text-align:center; padding:16px 0; color:var(--txtl); font-size:.75rem; line-height:1.7; }
+
+/* ── Chart ── */
+#emotionChart { height:160px !important; }
+
+/* ── Stats ── */
+.stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
+.stat-tile {
+  background:var(--card); border:1px solid var(--bdr);
+  border-radius:var(--r8); padding:9px 10px; text-align:center; transition:border-color .25s;
+}
+.stat-tile:hover { border-color:var(--bdrm); }
+.sl { font-size:.55rem; text-transform:uppercase; letter-spacing:.07em; color:var(--txtl); font-weight:600; margin-bottom:3px; font-family:var(--fM); }
+.sv { font-family:var(--fD); font-size:1.3rem; font-weight:700; color:var(--gold); line-height:1; }
+
+/* ── About ── */
+.about-txt { font-size:.75rem; color:var(--txtm); line-height:1.75; }
+.about-txt p { margin-bottom:7px; }
+.alist { list-style:none; margin-bottom:7px; }
+.alist li { padding-left:13px; position:relative; font-size:.73rem; padding-bottom:2px; }
+.alist li::before { content:'›'; position:absolute; left:0; color:var(--gold); font-weight:700; }
+.acredit { margin-top:10px; padding-top:10px; border-top:1px solid var(--bdr); }
+.aname { font-family:var(--fD); color:var(--gold); font-weight:600; font-size:.88rem; }
+.arole { font-size:.65rem; color:var(--txtl); margin:2px 0 3px; font-family:var(--fM); }
+.aemail { color:var(--sage); font-size:.66px; font-family:var(--fM); }
+
+/* ── Nav ── */
+.nav-row { display:flex; gap:7px; padding:0 16px 20px; }
+.nav-a {
+  flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
+  padding:12px 8px; border-radius:var(--r14); border:1px solid var(--bdr);
+  background:var(--card); color:var(--txtm); text-decoration:none;
+  font-size:.76rem; font-weight:600; transition:all .25s;
+}
+.nav-a:hover { border-color:var(--bdrm); color:var(--txt); }
+.nav-a.on { background:rgba(212,168,83,.10); border-color:var(--bdrh); color:var(--gold); }
+</style>
+</head>
+<body>
+
+<div id="app">
+
+  <!-- ── Camera pane ── -->
+  <div id="cam-pane">
+    <div class="topbar">
+      <div class="brand">
+        <span class="brand-t">ISL Gesture Recognition</span>
+        <span class="brand-s">Gesture · Emotion · AI</span>
+      </div>
+      <span class="live-badge" id="live-badge">● Ready</span>
+    </div>
+
+    <!-- MJPEG feed — displays processed frame from server SharedMemory -->
+    <img id="camera-feed"
+         src="/video_feed"
+         alt="Camera Feed"
+         style="display:none;flex:1;width:100%;object-fit:cover;"
+         onload="onVidLoad()"
+         onerror="document.getElementById('cam-ph').style.display='flex'"/>
+
+    <div class="cam-placeholder" id="cam-ph">
+      <span class="ph-icon">📷</span>
+      <span style="font-family:var(--fM);font-size:.75rem">Connecting to camera…</span>
+    </div>
+
+    <div class="cam-overlay">
+      <div>
+        <div style="display:flex;align-items:baseline;gap:8px">
+          <span id="co-letter" class="co-letter">🤟</span>
+          <span id="co-word"   class="co-word"></span>
+        </div>
+      </div>
+      <div id="co-desc" class="co-desc">Point camera at your hand</div>
+      <div class="co-progress"><div class="co-bar" id="co-bar"></div></div>
+    </div>
+  </div>
+
+  <!-- ── Control pane ── -->
+  <div id="ctrl-pane">
+    <div class="cpanel">
+
+      <!-- Status -->
+      <div class="status" id="status">
+        <div class="sdot"></div>
+        <span id="stxt">Ready for detection</span>
+      </div>
+
+      <!-- Current word -->
+      <div class="text-display">
+        <div class="cur-word"     id="cur-word">—</div>
+        <div class="cur-sentence" id="cur-sentence"></div>
+      </div>
+
+      <!-- Buttons -->
+      <div class="btn-row">
+        <button class="btn btn-speak" onclick="sendCmd('speak')">🔊 Speak</button>
+        <button class="btn btn-back"  onclick="sendCmd('backspace')">⌫ Back</button>
+        <button class="btn btn-reset" onclick="sendCmd('reset')">🔄 Reset</button>
+      </div>
+
+      <div class="divider"></div>
+
+      <!-- Emotion -->
+      <div class="sec-label">😊 Emotion Detection</div>
+      <div class="emotion-header">
+        <span class="emotion-big" id="emo-label">Neutral</span>
+        <span class="emotion-icon" id="emo-icon">😐</span>
+      </div>
+      <div class="emo-bars">
+        <div class="emo-bar">
+          <div class="ebo-label">😊 Happy</div>
+          <div class="ebo-track"><div class="ebo-fill" id="bar-happy" style="width:0%;background:linear-gradient(90deg,#3a8a5c,#7eb89a)">0%</div></div>
+        </div>
+        <div class="emo-bar">
+          <div class="ebo-label">😢 Sad</div>
+          <div class="ebo-track"><div class="ebo-fill" id="bar-sad" style="width:0%;background:linear-gradient(90deg,#3a5a8a,#6090c8)">0%</div></div>
+        </div>
+        <div class="emo-bar">
+          <div class="ebo-label">😠 Angry</div>
+          <div class="ebo-track"><div class="ebo-fill" id="bar-angry" style="width:0%;background:linear-gradient(90deg,#8a3a3a,#c06060)">0%</div></div>
+        </div>
+        <div class="emo-bar">
+          <div class="ebo-label">😲 Surprise</div>
+          <div class="ebo-track"><div class="ebo-fill" id="bar-surprise" style="width:0%;background:linear-gradient(90deg,#8a6a1a,#d4a853)">0%</div></div>
+        </div>
+        <div class="emo-bar">
+          <div class="ebo-label">😐 Neutral</div>
+          <div class="ebo-track"><div class="ebo-fill" id="bar-neutral" style="width:100%;background:linear-gradient(90deg,#3a4455,#5a6878)">100%</div></div>
+        </div>
+      </div>
+
+      <div class="divider"></div>
+
+      <!-- Word Suggestions -->
+      <div class="sec-label">💡 Word Suggestions</div>
+      <div id="sug-area">
+        <div class="sug-empty">Detected letters will appear<br>here with word suggestions</div>
+      </div>
+
+      <div class="divider"></div>
+
+      <!-- Emotion Timeline Chart -->
+      <div class="sec-label">📈 Emotion Timeline</div>
+      <canvas id="emotionChart"></canvas>
+
+      <div class="divider"></div>
+
+      <!-- Statistics -->
+      <div class="sec-label">📊 Statistics</div>
+      <div class="stat-grid">
+        <div class="stat-tile"><div class="sl">FPS</div><div class="sv" id="s-fps">0</div></div>
+        <div class="stat-tile"><div class="sl">Letters</div><div class="sv" id="s-letters">0</div></div>
+        <div class="stat-tile"><div class="sl">Words</div><div class="sv" id="s-words">0</div></div>
+        <div class="stat-tile"><div class="sl">Sentences</div><div class="sv" id="s-sentences">0</div></div>
+        <div class="stat-tile"><div class="sl">Emotions</div><div class="sv" id="s-emotions">0</div></div>
+        <div class="stat-tile"><div class="sl">Conf.</div><div class="sv" id="s-conf">—</div></div>
+      </div>
+
+      <div class="divider"></div>
+
+      <!-- About -->
+      <div class="sec-label">ℹ️ About</div>
+      <div class="about-txt">
+        <p>AI Powered ISL Detection is an assistive AI system designed to improve communication between hearing and deaf individuals.</p>
+        <p>This module focuses on real-time gesture and facial emotion recognition using computer vision.</p>
+        <p>Useful for:</p>
+        <ul class="alist">
+          <li>Deaf individuals</li>
+          <li>Inclusive classrooms</li>
+          <li>Assistive communication systems</li>
+          <li>Accessibility and AI research</li>
+        </ul>
+        <div class="acredit">
+          <div class="aname">Deepak Roshan</div>
+          <div class="arole">AI Engineer</div>
+          <div class="aemail">deepakroshan380@gmail.com</div>
+        </div>
+      </div>
+
+    </div><!-- cpanel -->
+
+    <!-- FIX 2: Nav links now built dynamically from window.location -->
+    <div class="nav-row">
+      <a href="/" class="nav-a on" id="nav-gesture">😊 Gesture Recognition</a>
+      <a href="#"  class="nav-a"   id="nav-avatar">🤟 Speech-to-Sign</a>
+    </div>
+  </div><!-- ctrl-pane -->
+
+</div><!-- app -->
+
+<script>
+document.addEventListener('DOMContentLoaded', function () {
+
+  // FIX 2: Build nav URLs dynamically so they work on any host/domain
+  (function() {
+    const proto = location.protocol;
+    const host  = location.hostname;
+    const port  = location.port;
+    if (port && port !== '80' && port !== '443') {
+      document.getElementById('nav-gesture').href = proto + '//' + host + ':5000/';
+      document.getElementById('nav-avatar').href  = proto + '//' + host + ':5001/';
+    } else {
+      document.getElementById('nav-gesture').href = proto + '//' + host + '/';
+      document.getElementById('nav-avatar').href  = proto + '//' + host + '/avatar/';
+    }
+  })();
+
+  const EMO_ICONS = { happy:'😊', sad:'😢', angry:'😠', surprise:'😲', neutral:'😐' };
+  const EMO_KEYS  = ['happy','sad','angry','surprise','neutral'];
+
+  /* ── Chart.js Emotion Timeline ─────────────────────────── */
+  const chartCtx = document.getElementById('emotionChart').getContext('2d');
+  const chart = new Chart(chartCtx, {
+    type: 'line',
+    data: {
+      labels: [],
+      datasets: [
+        { label:'Happy',    data:[], borderColor:'#7eb89a', borderWidth:1.5, tension:.4, fill:false, pointRadius:0 },
+        { label:'Sad',      data:[], borderColor:'#6090c8', borderWidth:1.5, tension:.4, fill:false, pointRadius:0 },
+        { label:'Angry',    data:[], borderColor:'#c06060', borderWidth:1.5, tension:.4, fill:false, pointRadius:0 },
+        { label:'Surprise', data:[], borderColor:'#d4a853', borderWidth:1.5, tension:.4, fill:false, pointRadius:0 },
+        { label:'Neutral',  data:[], borderColor:'#5a6878', borderWidth:1.5, tension:.4, fill:false, pointRadius:0 },
+      ]
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        legend: { labels: { color:'#5a5650', font:{ size:9, family:"'DM Mono'" }, boxWidth:10 } }
+      },
+      scales: {
+        y: {
+          beginAtZero:true, max:1,
+          ticks: { color:'#5a5650', font:{ size:8 } },
+          grid:  { color:'rgba(212,168,83,.05)' }
+        },
+        x: { ticks: { display:false }, grid: { color:'rgba(212,168,83,.03)' } }
+      },
+      animation: false
+    }
+  });
+
+  /* ── Browser Camera (FIX 1) ─────────────────────────────── */
+  let _camStream   = null;
+  let _camInterval = null;
+  const _capCanvas = document.createElement('canvas');
+  const _capCtx    = _capCanvas.getContext('2d');
+
+  async function startBrowserCamera() {
+    if (_camStream) return;
+    if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+      console.warn('Camera API not available — HTTP or unsupported browser');
+      return;
+    }
+    try {
+      _camStream = await navigator.mediaDevices.getUserMedia({
+        video: { width:{ ideal:640 }, height:{ ideal:480 }, facingMode:'user' },
+        audio: false
+      });
+      const video = document.createElement('video');
+      video.srcObject  = _camStream;
+      video.autoplay   = true;
+      video.playsInline = true;
+      video.addEventListener('loadeddata', () => {
+        _capCanvas.width  = 320;
+        _capCanvas.height = 240;
+        _camInterval = setInterval(() => {
+          if (document.visibilityState === 'visible' && socket && socket.connected) {
+            _capCtx.drawImage(video, 0, 0, 320, 240);
+            const frame = _capCanvas.toDataURL('image/jpeg', 0.6);
+            socket.emit('browser_frame', { frame: frame.split(',')[1] });
+          }
+        }, 65); // ~15 fps
+      });
+    } catch (err) {
+      console.error('Camera access error:', err);
+    }
+  }
+
+  function stopBrowserCamera() {
+    if (_camStream) { _camStream.getTracks().forEach(t => t.stop()); _camStream = null; }
+    if (_camInterval) { clearInterval(_camInterval); _camInterval = null; }
+  }
+
+  /* ── Socket.IO ───────────────────────────────────────────── */
+  // ✅ FIX 6: transports updated to prefer WebSocket with polling fallback.
+  //    upgrade:true lets Socket.IO automatically upgrade from polling → websocket
+  //    once the connection is established. This is required for camera streaming
+  //    to work reliably on HuggingFace Spaces (HTTPS) and other cloud deployments.
+  let socket;
+  try {
+    socket = io({
+      transports: ['websocket', 'polling'],
+      upgrade: true,
+      reconnectionDelay: 1000
+    });
+
+    socket.on('connect', () => {
+      setStat('act', 'Connected — detecting…');
+      document.getElementById('cam-ph').style.display = 'none';
+      setBadge('● Live', 'rec');
+      startBrowserCamera();
+    });
+
+    socket.on('disconnect', () => {
+      setStat('err', 'Disconnected');
+      document.getElementById('cam-ph').style.display = 'flex';
+      setBadge('● Offline', 'err');
+      stopBrowserCamera();
+    });
+
+    socket.on('state_update', updateUI);
+
+  } catch (e) {
+    console.warn('Socket.IO unavailable — demo mode');
+  }
+
+  /* ── Video load callback ──────────────────────────────── */
+  window.onVidLoad = function () {
+    document.getElementById('cam-ph').style.display    = 'none';
+    document.getElementById('camera-feed').style.display = 'block';
+    setBadge('● Live', 'rec');
+  };
+
+  /* ── Main UI update ───────────────────────────────────── */
+  function updateUI(d) {
+    if (d.overlay_letter) {
+      document.getElementById('co-letter').textContent = d.overlay_letter.toUpperCase();
+    }
+    if (d.current_word !== undefined) {
+      const w = d.current_word || '—';
+      document.getElementById('co-word').textContent  = w;
+      document.getElementById('cur-word').textContent = w;
+    }
+    if (d.sentence !== undefined) {
+      document.getElementById('cur-sentence').textContent = d.sentence || '';
+    }
+    if (d.overlay_confidence !== undefined) {
+      const pct = Math.round(d.overlay_confidence * 100);
+      document.getElementById('co-desc').textContent = 'Confidence: ' + pct + '%';
+      document.getElementById('s-conf').textContent  = pct + '%';
+      document.getElementById('co-bar').style.width  = pct + '%';
+    }
+    if (d.hand_detected) {
+      setStat('act', d.overlay_letter
+        ? 'Detecting: ' + d.overlay_letter + '  (' + Math.round((d.overlay_confidence||0)*100) + '%)'
+        : 'Hand in frame — signing…');
+    } else {
+      setStat('', d.current_word ? 'Word so far: ' + d.current_word : 'Ready for detection');
+    }
+    if (d.fps !== undefined) {
+      document.getElementById('s-fps').textContent = Math.round(d.fps);
+    }
+    if (d.stats) {
+      document.getElementById('s-letters').textContent   = d.stats.letters_detected  || 0;
+      document.getElementById('s-words').textContent     = d.stats.words_formed       || 0;
+      document.getElementById('s-sentences').textContent = d.stats.sentences_formed   || 0;
+      document.getElementById('s-emotions').textContent  = d.stats.emotion_changes    || 0;
+    }
+    if (Array.isArray(d.suggestions)) {
+      updateSuggestions(d.suggestions, d.current_word);
+    }
+    if (d.emotion_scores) {
+      updateEmotion(d.emotion || 'neutral', d.emotion_scores);
+    }
+    if (d.emotion_timeline && d.emotion_timeline.length > 0) {
+      updateChart(d.emotion_timeline);
+    }
+  }
+
+  function updateEmotion(emotion, scores) {
+    document.getElementById('emo-label').textContent = emotion.charAt(0).toUpperCase() + emotion.slice(1);
+    document.getElementById('emo-icon').textContent  = EMO_ICONS[emotion] || '😐';
+    EMO_KEYS.forEach(k => {
+      const bar = document.getElementById('bar-' + k);
+      if (!bar) return;
+      const pct = Math.round(Math.max(0, Math.min(1, scores[k] || 0)) * 100);
+      bar.style.width = pct + '%';
+      bar.textContent = pct + '%';
+    });
+  }
+
+  function updateSuggestions(suggestions, currentWord) {
+    const area = document.getElementById('sug-area');
+    if (!suggestions || !suggestions.length) {
+      area.innerHTML = '<div class="sug-empty">Detected letters will appear<br>here with word suggestions</div>';
+      return;
+    }
+    const detectedRow = currentWord
+      ? '<div class="sug-detected">Detected: ' + currentWord.toUpperCase() + '</div>' : '';
+    area.innerHTML = detectedRow + '<div class="sug-list">' +
+      suggestions.map((w, i) =>
+        '<div class="sug-item" onclick="window.acceptSug(\'' + w + '\')">' +
+        '<span class="sug-n">' + (i+1) + '</span>' + w + '</div>'
+      ).join('') + '</div>';
+  }
+
+  function updateChart(timeline) {
+    if (!timeline || !timeline.length) return;
+    const collected = Object.fromEntries(EMO_KEYS.map(k => [k, []]));
+    timeline.forEach(tp => {
+      const s = tp.scores || {};
+      EMO_KEYS.forEach(k => collected[k].push(s[k] || 0));
+    });
+    chart.data.labels = timeline.map((_, i) => i);
+    chart.data.datasets.forEach((ds, i) => ds.data = collected[EMO_KEYS[i]]);
+    chart.update('none');
+  }
+
+  function setStat(cls, msg) {
+    document.getElementById('stxt').textContent = msg;
+    document.getElementById('status').className = 'status' + (cls ? ' ' + cls : '');
+  }
+  function setBadge(msg, cls) {
+    const b = document.getElementById('live-badge');
+    b.textContent = msg;
+    b.className   = 'live-badge' + (cls ? ' ' + cls : '');
+  }
+
+  window.sendCmd = function (action) {
+    if (action === 'speak') {
+      const sentence = document.getElementById('cur-sentence').textContent.trim();
+      const word     = document.getElementById('cur-word').textContent.trim();
+      const text     = sentence || (word !== '—' ? word : '');
+      if (text && socket) socket.emit('command', { action:'speak', text });
+    } else {
+      if (socket) socket.emit('command', { action });
+    }
+  };
+
+  window.acceptSug = function (word) {
+    if (socket) socket.emit('command', { action:'accept_suggestion', word });
+  };
+
+  document.addEventListener('keydown', e => {
+    if (e.ctrlKey && e.key === 's')         { e.preventDefault(); window.sendCmd('speak'); }
+    if (e.ctrlKey && e.key === 'r')         { e.preventDefault(); window.sendCmd('reset'); }
+    if (e.ctrlKey && e.key === 'Backspace') { e.preventDefault(); window.sendCmd('backspace'); }
+    if (['1','2','3'].includes(e.key)) {
+      const items = document.querySelectorAll('.sug-item');
+      const item  = items[parseInt(e.key) - 1];
+      if (item) item.click();
+    }
+  });
+
+});
+</script>
+</body>
+</html>
+"""
+
+
+# ── MJPEG generator reads directly from SharedMemory ──────────────────────────
+def generate_frames():
+    # FIX 5 (part A): If SharedMemory is not configured, stream a blank frame
+    # continuously. Removed unreachable `return` after the infinite loop —
+    # the original code had `return` after `while True` which is dead code and
+    # caused a StopIteration on some Python/Flask versions.
+    if _shm_name is None or _frame_seq is None:
+        blank = np.zeros((FRAME_H, FRAME_W, 3), np.uint8)
+        _, enc = cv2.imencode(".jpg", blank)
+        chunk  = enc.tobytes()
+        while True:
+            yield (b"--frame\r\nContent-Type: image/jpeg\r\n\r\n" + chunk + b"\r\n")
+            time.sleep(0.1)
+
+    try:
+        shm       = multiprocessing.shared_memory.SharedMemory(name=_shm_name)
+        frame_buf = np.ndarray((FRAME_H, FRAME_W, 3), dtype=np.uint8, buffer=shm.buf)
+    except Exception as e:
+        print(f"⚠️  MJPEG generator: SharedMemory attach failed: {e}")
+        return
+
+    # FIX 5 (part B): Wait for the detection engine to write the first valid
+    # frame before we start streaming. Without this wait, the MJPEG client
+    # receives raw uninitialized SharedMemory bytes immediately, which renders
+    # as horizontal static/noise stripes on the browser camera feed.
+    # Timeout after 15 seconds (150 × 0.1s) to avoid hanging indefinitely.
+    print("⏳ MJPEG: waiting for first valid frame from detection engine…")
+    timeout_count = 0
+    while _frame_seq.value == 0 and timeout_count < 150:
+        time.sleep(0.1)
+        timeout_count += 1
+
+    if _frame_seq.value == 0:
+        print("⚠️  MJPEG: timed out waiting for first frame — streaming anyway")
+    else:
+        print(f"✅ MJPEG: first frame ready (seq={_frame_seq.value}) — streaming started")
+
+    last_seq = 0
+    try:
+        while True:
+            if _frame_seq.value != last_seq:
+                last_seq = _frame_seq.value
+                frame = frame_buf.copy()
+                _, buffer = cv2.imencode(".jpg", frame, [cv2.IMWRITE_JPEG_QUALITY, 80])
+                frame_bytes = buffer.tobytes()
+                yield (b"--frame\r\n"
+                       b"Content-Type: image/jpeg\r\n\r\n" +
+                       frame_bytes + b"\r\n")
+            else:
+                time.sleep(0.005)
+    finally:
+        shm.close()
+
+
+# ── Routes ────────────────────────────────────────────────────────────────────
+@app.route("/")
+def index():
+    return render_template_string(HTML)
+
+
+@app.route("/video_feed")
+def video_feed():
+    return Response(
+        generate_frames(),
+        mimetype="multipart/x-mixed-replace; boundary=frame"
+    )
+
+
+@app.route("/cmd", methods=["POST"])
+def cmd_route():
+    data = request.get_json(force=True, silent=True) or {}
+    _local_state_q.put(data)
+    return jsonify({"ok": True})
+
+
+@app.route("/health")
+def health():
+    return jsonify({"ok": True, "ts": time.time()})
+
+
+# FIX 4: /avatar route — redirects to the speech-to-sign service
+@app.route("/avatar")
+@app.route("/avatar/")
+def avatar_redirect():
+    from flask import redirect
+    proto = request.headers.get('X-Forwarded-Proto', 'http')
+    host  = request.host.split(':')[0]
+    return redirect(proto + '://' + host + '/avatar/', code=302)
+
+
+# ── Socket.IO events ──────────────────────────────────────────────────────────
+@socketio.on("connect")
+def on_connect():
+    print("🔌 Browser connected")
+
+
+@socketio.on("disconnect")
+def on_disconnect():
+    print("🔌 Browser disconnected")
+
+
+@socketio.on("command")
+def on_cmd(data):
+    if data:
+        _local_state_q.put(data)
+
+
+# FIX 1 + FIX 3: browser_frame handler
+@socketio.on("browser_frame")
+def on_browser_frame(data):
+    global _shared_state
+    if _shared_state is not None and data and "frame" in data:
+        _shared_state._cloud_frame = data["frame"]
+
+
+# ── Dashboard process entry point ─────────────────────────────────────────────
+def dashboard_process(shared_state, shm_name, frame_lock_val, frame_seq):
+    global _shm_name, _frame_seq, _shared_state
+
+    _shm_name     = shm_name
+    _frame_seq    = frame_seq
+    _shared_state = shared_state
+
+    print("=" * 60)
+    print("🌐 ISL Web Dashboard Starting...")
+    print("=" * 60)
+    print("📊 URL          : http://localhost:5000")
+    print("📹 Video stream : http://localhost:5000/video_feed")
+    print("   (MJPEG from SharedMemory — no WebSocket for video)")
+    print("=" * 60)
+
+    ui_queue  = shared_state.ui_queue
+    cmd_queue = shared_state.command_queue
+
+    def state_drain():
+        print("📥 State drain thread started")
+        while True:
+            try:
+                packet = ui_queue.get(timeout=1.0)
+                try:
+                    _local_state_q.put_nowait(packet)
+                except Exception:
+                    pass
+            except Exception:
+                pass
+
+    threading.Thread(target=state_drain, daemon=True, name="StateDrain").start()
+
+    def state_emit():
+        print("📡 State emitter started")
+        while True:
+            try:
+                packet = _local_state_q.get(timeout=1.0)
+            except Empty:
+                continue
+            except Exception:
+                continue
+
+            if "action" in packet:
+                try:
+                    cmd_queue.put_nowait(packet)
+                except Exception:
+                    pass
+                continue
+
+            try:
+                socketio.emit("state_update", packet)
+            except Exception:
+                pass
+
+    threading.Thread(target=state_emit, daemon=True, name="StateEmit").start()
+
+    socketio.run(
+        app,
+        host="0.0.0.0",
+        port=5000,
+        debug=False,
+        use_reloader=False,
+        log_output=False,
+    )
+
+
+# ── Compatibility aliases ─────────────────────────────────────────────────────
+def start_ui_server(shared_state_obj, port: int = 5000):
+    dashboard_process(shared_state_obj, shm_name=None, frame_lock_val=None, frame_seq=None)
+
+
+# ── Stand-alone test ──────────────────────────────────────────────────────────
+if __name__ == "__main__":
+    socketio.run(app, host="0.0.0.0", port=5000, debug=True, use_reloader=False) 

launcher.py

@@ -0,0 +1,138 @@
+# launcher.py — CLOUD PRODUCTION VERSION
+#
+# ════════════════════════════════════════════════════════════════════════════
+#  CLOUD FIX APPLIED (1 change only — everything else identical):
+#
+#  FIX 1 — SharedMemory cleanup on startup:
+#           If the previous run crashed without cleanup, "isl_frame_shm"
+#           still exists in /dev/shm on Linux. SharedMemory(create=True)
+#           then raises FileExistsError and the entire launcher fails.
+#           Fixed by attempting to unlink the old block before creating new.
+#
+#  ALL original features preserved:
+#  ✅ Shared memory block (640×480 BGR, zero-copy frame transfer)
+#  ✅ frame_seq counter for dashboard to detect new frames
+#  ✅ Auto-restart of crashed child processes (every 2s watch loop)
+#  ✅ Clean shutdown with shm.close() + shm.unlink() on Ctrl+C
+#  ✅ Core Processor + Web Dashboard spawned as separate processes
+# ════════════════════════════════════════════════════════════════════════════
+
+import multiprocessing
+import multiprocessing.shared_memory
+import ctypes
+import time
+import sys
+
+from isl_detection    import core_processing_engine, SharedState
+from isl_ui_dashboard import dashboard_process
+
+FRAME_W, FRAME_H = 640, 480
+FRAME_BYTES      = FRAME_W * FRAME_H * 3   # 921 600 bytes for one BGR frame
+
+
+def _run_core(shared_state, shm_name, frame_lock_val, frame_seq):
+    core_processing_engine(shared_state, shm_name, frame_lock_val, frame_seq)
+
+
+def _run_dashboard(shared_state, shm_name, frame_lock_val, frame_seq):
+    dashboard_process(shared_state, shm_name, frame_lock_val, frame_seq)
+
+
+if __name__ == "__main__":
+    multiprocessing.freeze_support()   # required on Windows
+
+    print("=" * 70)
+    print(" 🤟 ISL EMOTION TRANSLATOR - MULTI-PROCESS SYSTEM")
+    print("=" * 70)
+    print()
+    print("🎯 Architecture:")
+    print("   📹 Core Processor  → Camera · MediaPipe · TF model")
+    print("   🌐 Web Dashboard   → MJPEG video · Socket.IO state")
+    print("   🔗 SharedMemory    → Zero-copy frame transfer (no base64 queue)")
+    print()
+    print("=" * 70)
+
+    # FIX 1: Clean up leftover shared memory from a previous crash.
+    # On Linux, named shared memory persists in /dev/shm until explicitly
+    # unlinked. If the previous run crashed, creating the same name fails.
+    try:
+        _old_shm = multiprocessing.shared_memory.SharedMemory(name="isl_frame_shm")
+        _old_shm.close()
+        _old_shm.unlink()
+        print("🧹 Cleaned up leftover shared memory from previous run")
+    except FileNotFoundError:
+        pass  # normal — no leftover, continue
+
+    # ── Shared memory block ──────────────────────────────────────────────────
+    shm        = multiprocessing.shared_memory.SharedMemory(
+                     create=True, size=FRAME_BYTES, name="isl_frame_shm")
+    frame_seq  = multiprocessing.Value(ctypes.c_uint64, 0)
+    frame_lock = multiprocessing.Value(ctypes.c_bool,   False)
+
+    shared_state = SharedState()
+
+    # ── Spawn processes ──────────────────────────────────────────────────────
+    core_args = (shared_state, shm.name, frame_lock, frame_seq)
+    web_args  = (shared_state, shm.name, frame_lock, frame_seq)
+
+    core_proc = multiprocessing.Process(
+        target=_run_core, args=core_args, name="CoreProcessor", daemon=True)
+    web_proc  = multiprocessing.Process(
+        target=_run_dashboard, args=web_args, name="WebDashboard",  daemon=True)
+
+    print("🚀 Starting Core Processor…")
+    core_proc.start()
+
+    # Give core a moment to open the camera before the dashboard opens
+    time.sleep(1.5)
+
+    print("🚀 Starting Web Dashboard on port 5000…")
+    web_proc.start()
+
+    print()
+    print("=" * 70)
+    print("✅ SYSTEM READY!")
+    print("=" * 70)
+    print()
+    print("📊 Dashboard    → http://localhost:5000")
+    print("📹 Video stream → http://localhost:5000/video_feed")
+    print()
+    print("⌨️  Keyboard shortcuts (in dashboard):")
+    print("   Ctrl+R          → Reset")
+    print("   Ctrl+Backspace  → Backspace")
+    print("   1 / 2 / 3       → Accept suggestion")
+    print()
+    print("🛑 Press Ctrl+C to stop all processes")
+    print("=" * 70)
+
+    try:
+        while True:
+            # Auto-restart crashed processes
+            if not core_proc.is_alive():
+                print("⚠️  Core Processor crashed — restarting…")
+                core_proc = multiprocessing.Process(
+                    target=_run_core, args=core_args, name="CoreProcessor", daemon=True)
+                core_proc.start()
+
+            if not web_proc.is_alive():
+                print("⚠️  Web Dashboard crashed — restarting…")
+                web_proc = multiprocessing.Process(
+                    target=_run_dashboard, args=web_args, name="WebDashboard", daemon=True)
+                web_proc.start()
+
+            time.sleep(2)
+
+    except KeyboardInterrupt:
+        print("\n🛑 Shutting down…")
+        core_proc.terminate()
+        web_proc.terminate()
+        core_proc.join(timeout=5)
+        web_proc.join(timeout=5)
+        try:
+            shm.close()
+            shm.unlink()
+        except Exception:
+            pass
+        print("✅ All processes stopped")
+        print("=" * 70)
+        sys.exit(0)

model.h5

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a695177089550ea37eec9e54be2631c28e64ac4e03d666c0e6b86582bfe6a80b
+size 11510976

nginx.conf

@@ -0,0 +1,107 @@
+# ============================================================
+#  nginx.conf — Hugging Face Spaces
+#  Single port: 7860 (HF requirement)
+#  Routes to Flask 5000 and Flask 5001 internally
+# ============================================================
+
+worker_processes 1;
+error_log stderr warn;
+pid /tmp/nginx.pid;
+
+events {
+    worker_connections 256;
+}
+
+http {
+    include       /etc/nginx/mime.types;
+    default_type  application/octet-stream;
+
+    # Use /tmp for temp files (HF non-root friendly)
+    client_body_temp_path /tmp/nginx_client_body;
+    proxy_temp_path       /tmp/nginx_proxy;
+    fastcgi_temp_path     /tmp/nginx_fastcgi;
+    uwsgi_temp_path       /tmp/nginx_uwsgi;
+    scgi_temp_path        /tmp/nginx_scgi;
+
+    sendfile on;
+    keepalive_timeout 65;
+
+    gzip on;
+    gzip_types text/plain text/css application/json application/javascript;
+
+    upstream gesture_app {
+        server 127.0.0.1:5000;
+    }
+
+    upstream avatar_app {
+        server 127.0.0.1:5001;
+    }
+
+    server {
+        listen 7860;
+        server_name _;
+        client_max_body_size 5M;
+
+        # ── Health check ──────────────────────────────────────
+        location /health {
+            proxy_pass http://gesture_app/health;
+            proxy_set_header Host $host;
+        }
+
+        # ── Socket.IO — gesture app ───────────────────────────
+        location /socket.io/ {
+            proxy_pass http://gesture_app/socket.io/;
+            proxy_http_version 1.1;
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header Connection "upgrade";
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-Proto $scheme;
+            proxy_read_timeout 86400;
+            proxy_buffering off;
+            proxy_cache off;
+        }
+
+        # ── MJPEG video stream ────────────────────────────────
+        location /video_feed {
+            proxy_pass http://gesture_app/video_feed;
+            proxy_http_version 1.1;
+            proxy_set_header Host $host;
+            proxy_buffering off;
+            proxy_cache off;
+            proxy_read_timeout 3600;
+            chunked_transfer_encoding on;
+        }
+
+        # ── Avatar Socket.IO ──────────────────────────────────
+        location /avatar/socket.io/ {
+            proxy_pass http://avatar_app/socket.io/;
+            proxy_http_version 1.1;
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header Connection "upgrade";
+            proxy_set_header Host $host;
+            proxy_set_header X-Forwarded-Proto $scheme;
+            proxy_read_timeout 86400;
+            proxy_buffering off;
+        }
+
+        # ── Avatar app ────────────────────────────────────────
+        location /avatar/ {
+            rewrite ^/avatar/(.*) /$1 break;
+            proxy_pass http://avatar_app/;
+            proxy_http_version 1.1;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-Proto $scheme;
+        }
+
+        # ── Gesture app (root) ────────────────────────────────
+        location / {
+            proxy_pass http://gesture_app/;
+            proxy_http_version 1.1;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-Proto $scheme;
+        }
+    }
+}

speech_to_sign_avatar.py

@@ -0,0 +1,343 @@
+"""
+ISL Fingerspelling System - Backend Server
+Full A-Z Letter-by-Letter Speech-to-Sign Conversion
+
+Install dependencies:
+pip install SpeechRecognition flask flask-socketio eventlet
+
+Usage:
+python speech_to_sign_avatar_fixed.py
+
+Then open: http://localhost:5001
+"""
+
+import eventlet
+eventlet.monkey_patch()
+
+import os
+import json
+import time
+import threading
+from datetime import datetime
+from flask import Flask, render_template, request, jsonify, send_from_directory
+from flask_socketio import SocketIO, emit
+import speech_recognition as sr
+
+# ======================================
+# RUN MODE CONFIG (LOCAL or CLOUD)
+# ======================================
+
+RUN_MODE = os.getenv("RUN_MODE", "LOCAL")
+
+# Disable microphone loading in cloud environment
+if RUN_MODE == "CLOUD":
+    sr.Microphone = None
+
+os.environ["EVENTLET_NO_GREENDNS"] = "yes"
+
+# ==================== ISL ALPHABET LIBRARY (A-Z) ====================
+
+print("Loading ISL gesture database...")
+
+ISL_LIBRARY = {
+    'a': {'name': 'A', 'fingers': {'thumb': 0, 'index': 1.5, 'middle': 1.5, 'ring': 1.5, 'pinky': 1.5}, 'rot': [0, 0, 0], 'desc': 'Fist with thumb out'},
+    'b': {'name': 'B', 'fingers': {'thumb': 1.2, 'index': 0, 'middle': 0, 'ring': 0, 'pinky': 0}, 'rot': [0, 0, 0], 'desc': 'All fingers straight up'},
+    'c': {'name': 'C', 'fingers': {'thumb': 0.3, 'index': 0.5, 'middle': 0.5, 'ring': 0.5, 'pinky': 0.5}, 'rot': [0, 0, 0], 'desc': 'Curved C shape'},
+    'd': {'name': 'D', 'fingers': {'thumb': 1.2, 'index': 0, 'middle': 1.5, 'ring': 1.5, 'pinky': 1.5}, 'rot': [0, 0, 0], 'desc': 'Index up, others closed'},
+    'e': {'name': 'E', 'fingers': {'thumb': 0.8, 'index': 1.2, 'middle': 1.2, 'ring': 1.2, 'pinky': 1.2}, 'rot': [0, 0, 0], 'desc': 'All fingers curled'},
+    'f': {'name': 'F', 'fingers': {'thumb': 0.8, 'index': 0.8, 'middle': 0, 'ring': 0, 'pinky': 0}, 'rot': [0, 0, 0], 'desc': 'OK sign variant'},
+    'g': {'name': 'G', 'fingers': {'thumb': 0, 'index': 0, 'middle': 1.5, 'ring': 1.5, 'pinky': 1.5}, 'rot': [0, 0, 90], 'desc': 'Index and thumb point sideways'},
+    'h': {'name': 'H', 'fingers': {'thumb': 1.5, 'index': 0, 'middle': 0, 'ring': 1.5, 'pinky': 1.5}, 'rot': [0, 0, 90], 'desc': 'Two fingers horizontal'},
+    'i': {'name': 'I', 'fingers': {'thumb': 1.5, 'index': 1.5, 'middle': 1.5, 'ring': 1.5, 'pinky': 0}, 'rot': [0, 0, 0], 'desc': 'Pinky up'},
+    'j': {'name': 'J', 'fingers': {'thumb': 1.5, 'index': 1.5, 'middle': 1.5, 'ring': 1.5, 'pinky': 0}, 'rot': [0, 0, 0], 'desc': 'Pinky draws J'},
+    'k': {'name': 'K', 'fingers': {'thumb': 0.5, 'index': 0, 'middle': 0, 'ring': 1.5, 'pinky': 1.5}, 'rot': [0, 0, 45], 'desc': 'Index and middle V shape'},
+    'l': {'name': 'L', 'fingers': {'thumb': 0, 'index': 0, 'middle': 1.5, 'ring': 1.5, 'pinky': 1.5}, 'rot': [0, 0, 0], 'desc': 'L shape'},
+    'm': {'name': 'M', 'fingers': {'thumb': 0.8, 'index': 1.5, 'middle': 1.5, 'ring': 1.5, 'pinky': 1.5}, 'rot': [0, 0, 0], 'desc': 'Three fingers tucked under thumb'},
+    'n': {'name': 'N', 'fingers': {'thumb': 0.8, 'index': 1.5, 'middle': 1.5, 'ring': 1.5, 'pinky': 1.5}, 'rot': [0, 0, 0], 'desc': 'Two fingers tucked'},
+    'o': {'name': 'O', 'fingers': {'thumb': 0.5, 'index': 0.8, 'middle': 0.8, 'ring': 0.8, 'pinky': 0.8}, 'rot': [0, 0, 0], 'desc': 'All fingers form O'},
+    'p': {'name': 'P', 'fingers': {'thumb': 0.5, 'index': 0, 'middle': 0, 'ring': 1.5, 'pinky': 1.5}, 'rot': [0, 0, -45], 'desc': 'K pointing down'},
+    'q': {'name': 'Q', 'fingers': {'thumb': 0, 'index': 0, 'middle': 1.5, 'ring': 1.5, 'pinky': 1.5}, 'rot': [0, 0, -90], 'desc': 'G pointing down'},
+    'r': {'name': 'R', 'fingers': {'thumb': 1.2, 'index': 0, 'middle': 0, 'ring': 1.5, 'pinky': 1.5}, 'rot': [0, 0, 0], 'desc': 'Index and middle crossed'},
+    's': {'name': 'S', 'fingers': {'thumb': 0.5, 'index': 1.5, 'middle': 1.5, 'ring': 1.5, 'pinky': 1.5}, 'rot': [0, 0, 0], 'desc': 'Fist with thumb across'},
+    't': {'name': 'T', 'fingers': {'thumb': 0.8, 'index': 1.5, 'middle': 1.5, 'ring': 1.5, 'pinky': 1.5}, 'rot': [0, 0, 0], 'desc': 'Thumb between index and middle'},
+    'u': {'name': 'U', 'fingers': {'thumb': 1.2, 'index': 0, 'middle': 0, 'ring': 1.5, 'pinky': 1.5}, 'rot': [0, 0, 0], 'desc': 'Two fingers together'},
+    'v': {'name': 'V', 'fingers': {'thumb': 1.2, 'index': 0, 'middle': 0, 'ring': 1.5, 'pinky': 1.5}, 'rot': [0, 0, 0], 'desc': 'Victory/Peace sign'},
+    'w': {'name': 'W', 'fingers': {'thumb': 1.2, 'index': 0, 'middle': 0, 'ring': 0, 'pinky': 1.5}, 'rot': [0, 0, 0], 'desc': 'Three fingers up'},
+    'x': {'name': 'X', 'fingers': {'thumb': 1.5, 'index': 0.8, 'middle': 1.5, 'ring': 1.5, 'pinky': 1.5}, 'rot': [0, 0, 0], 'desc': 'Index bent like hook'},
+    'y': {'name': 'Y', 'fingers': {'thumb': 0, 'index': 1.5, 'middle': 1.5, 'ring': 1.5, 'pinky': 0}, 'rot': [0, 0, 0], 'desc': 'Thumb and pinky out (hang loose)'},
+    'z': {'name': 'Z', 'fingers': {'thumb': 1.5, 'index': 0, 'middle': 1.5, 'ring': 1.5, 'pinky': 1.5}, 'rot': [0, 0, 0], 'desc': 'Index draws Z'}
+}
+
+print(f"Loaded {len(ISL_LIBRARY)} gestures")
+
+# ==================== Flask Setup ====================
+app = Flask(__name__)
+app.config['SECRET_KEY'] = 'isl-fingerspelling-2024'
+socketio = SocketIO(
+    app,
+    cors_allowed_origins="*",
+    async_mode="eventlet",
+    ping_timeout=60,
+    ping_interval=25
+)
+
+print("=" * 60)
+print("ISL SPEECH TO SIGN AVATAR SYSTEM")
+print("RUN MODE:", RUN_MODE)
+print("=" * 60)
+
+# Speech recognizer
+recognizer = sr.Recognizer()
+recognizer.energy_threshold = 3000
+recognizer.dynamic_energy_threshold = True
+recognizer.pause_threshold = 0.8
+recognizer.non_speaking_duration = 0.5
+
+# System statistics
+stats = {
+    "total_conversions": 0,
+    "total_gestures": 0,
+    "speech_recognitions": 0,
+    "errors": 0,
+    "start_time": datetime.now()
+}
+
+# ==================== Text to Letter Sequence ====================
+def text_to_letter_sequence(text):
+    """Convert text to letter-by-letter fingerspelling sequence"""
+    clean_text = text.lower().replace(",", "").replace(".", "").replace("!", "").replace("?", "").replace("-", " ")
+    chars = list(clean_text)
+
+    sequence = []
+
+    for i, char in enumerate(chars):
+        if char == ' ':
+            sequence.append({
+                'name': 'SPACE',
+                'desc': 'Word space - pause between words',
+                'duration': 0.6,
+                'isSpace': True,
+                'keyframes': [
+                    {
+                        'time': 0,
+                        'hand': 'right',
+                        'pos': [0, 0, 0],
+                        'rot': [0, 0, 0],
+                        'fingers': {'thumb': 0, 'index': 0, 'middle': 0, 'ring': 0, 'pinky': 0}
+                    },
+                    {
+                        'time': 0.6,
+                        'hand': 'right',
+                        'pos': [0.2, 0, 0],
+                        'rot': [0, 0, 0],
+                        'fingers': {'thumb': 0, 'index': 0, 'middle': 0, 'ring': 0, 'pinky': 0}
+                    }
+                ]
+            })
+            continue
+
+        if char in ISL_LIBRARY:
+            letter_data = ISL_LIBRARY[char]
+            rot_rad = [r * 3.14159 / 180 for r in letter_data['rot']]
+
+            sequence.append({
+                'name': letter_data['name'],
+                'letter': char,
+                'desc': letter_data['desc'],
+                'duration': 0.7,
+                'keyframes': [
+                    {
+                        'time': 0,
+                        'hand': 'right',
+                        'pos': [0, 0, 0],
+                        'rot': rot_rad,
+                        'fingers': letter_data['fingers']
+                    },
+                    {
+                        'time': 0.3,
+                        'hand': 'right',
+                        'pos': [0, 0.15, 0],
+                        'rot': rot_rad,
+                        'fingers': letter_data['fingers']
+                    },
+                    {
+                        'time': 0.7,
+                        'hand': 'right',
+                        'pos': [0, 0.15, 0],
+                        'rot': rot_rad,
+                        'fingers': letter_data['fingers']
+                    }
+                ]
+            })
+
+    return sequence
+
+# ==================== Routes ====================
+@app.route('/')
+def index():
+    """Serve main interface"""
+    try:
+        return send_from_directory(os.path.join(os.getcwd(), 'templates'), 'avatar_interface.html')
+    except Exception:
+        return "Avatar UI Loaded. Frontend missing."
+
+@app.route('/health')
+def health():
+    """Health check endpoint for cloud platforms"""
+    return jsonify({"status": "running"})
+
+@app.route('/static/<path:filename>')
+def serve_static(filename):
+    """Serve static files for cloud platforms"""
+    return send_from_directory('static', filename)
+
+@app.route('/api/text-to-signs', methods=['POST'])
+def text_to_signs_api():
+    """Convert text to letter sequence"""
+    try:
+        data = request.json
+        text = data.get('text', '')
+
+        if not text:
+            return jsonify({"success": False, "error": "No text provided"}), 400
+
+        print(f'📝 Converting text: "{text}"')
+
+        sequence = text_to_letter_sequence(text)
+
+        stats["total_conversions"] += 1
+        stats["total_gestures"] += len(sequence)
+
+        return jsonify({
+            "success": True,
+            "text": text,
+            "sequence": sequence,
+            "stats": get_stats()
+        })
+
+    except Exception as e:
+        stats["errors"] += 1
+        print(f"❌ Error: {e}")
+        return jsonify({"success": False, "error": str(e)}), 500
+
+@app.route('/api/stats')
+def get_stats_api():
+    """Get system statistics"""
+    return jsonify(get_stats())
+
+def get_stats():
+    """Calculate current statistics"""
+    uptime = (datetime.now() - stats["start_time"]).total_seconds()
+
+    return {
+        "total_conversions": stats["total_conversions"],
+        "total_gestures": stats["total_gestures"],
+        "speech_recognitions": stats["speech_recognitions"],
+        "errors": stats["errors"],
+        "uptime_seconds": int(uptime),
+        "alphabet_letters": len(ISL_LIBRARY)
+    }
+
+# ==================== Socket.IO Events ====================
+@socketio.on('connect')
+def handle_connect():
+    """Client connected"""
+    print('✅ Client connected')
+    emit('status', {'message': 'Connected', 'stats': get_stats()})
+
+@socketio.on('disconnect')
+def handle_disconnect():
+    """Client disconnected"""
+    print('👋 Client disconnected')
+
+@socketio.on('record_speech')
+def handle_record_speech():
+    """Record speech and convert to fingerspelling"""
+
+    # Disable microphone in cloud environment
+    if RUN_MODE == "CLOUD":
+        emit("error", {"message": "Microphone recording not supported in cloud deployment"})
+        return
+
+    def record_and_convert():
+        try:
+            print('🎤 Starting speech recognition...')
+
+            with sr.Microphone() as source:
+                print('🎤 Listening... Speak now!')
+                socketio.emit('recording_status', {'status': 'listening'})
+
+                recognizer.adjust_for_ambient_noise(source, duration=0.5)
+                audio = recognizer.listen(source, timeout=5, phrase_time_limit=10)
+
+                print('🔄 Processing speech...')
+                socketio.emit('recording_status', {'status': 'processing'})
+
+                try:
+                    text = recognizer.recognize_google(audio, language='en-IN')
+                    print(f'✅ Recognized: "{text}"')
+
+                    stats["speech_recognitions"] += 1
+                    stats["total_conversions"] += 1
+
+                    sequence = text_to_letter_sequence(text)
+                    stats["total_gestures"] += len(sequence)
+
+                    socketio.emit('play_signs', {
+                        'text': text,
+                        'sequence': sequence,
+                        'stats': get_stats()
+                    })
+
+                except sr.UnknownValueError:
+                    print('❌ Could not understand speech')
+                    stats["errors"] += 1
+                    socketio.emit('error', {
+                        'message': 'Could not understand speech. Please speak clearly and try again.'
+                    })
+
+                except sr.RequestError as e:
+                    print(f'❌ Speech recognition API error: {e}')
+                    stats["errors"] += 1
+                    socketio.emit('error', {
+                        'message': 'Speech recognition service error. Please check your internet connection.'
+                    })
+
+        except sr.WaitTimeoutError:
+            print('⏱️ No speech detected (timeout)')
+            stats["errors"] += 1
+            socketio.emit('error', {
+                'message': 'No speech detected. Please try again.'
+            })
+
+        except Exception as e:
+            print(f'❌ Recording error: {e}')
+            stats["errors"] += 1
+            socketio.emit('error', {
+                'message': f'Recording error: {str(e)}'
+            })
+
+    threading.Thread(target=record_and_convert, daemon=True).start()
+
+# ==================== Main ====================
+if __name__ == '__main__':
+
+    print("\n" + "="*60)
+    print("ISL SPEECH TO SIGN AVATAR SYSTEM STARTING")
+    print("RUN MODE:", RUN_MODE)
+    print("="*60)
+
+    os.makedirs('templates', exist_ok=True)
+
+    PORT = int(os.environ.get("PORT", 5001))
+
+    print("Server starting on port:", PORT)
+    print("Health check endpoint: /health")
+
+    socketio.run(
+        app,
+        host="0.0.0.0",
+        port=PORT,
+        debug=False,
+        use_reloader=False
+    )

supervisord.conf

@@ -0,0 +1,88 @@
+# ============================================================
+#  supervisord.conf — Hugging Face Spaces
+#  Manages 4 processes in one container:
+#    1. detection_engine  — MediaPipe + TF inference
+#    2. gesture_app       — Flask dashboard, port 5000
+#    3. avatar_app        — Flask avatar,    port 5001
+#    4. nginx             — Reverse proxy,   port 7860
+# ============================================================
+
+[supervisord]
+nodaemon=true
+logfile=/tmp/supervisord.log
+loglevel=info
+pidfile=/tmp/supervisord.pid
+
+[unix_http_server]
+file=/tmp/supervisor.sock
+
+[rpcinterface:supervisor]
+supervisor.rpcinterface_factory = supervisor.rpcinterface:make_main_rpcinterface
+
+[supervisorctl]
+serverurl=unix:///tmp/supervisor.sock
+
+# ── 1. ISL Detection Engine (starts first — loads TF model) ──
+[program:detection_engine]
+command=python /app/isl_detection.py
+directory=/app
+autostart=true
+autorestart=true
+priority=1
+startretries=5
+startsecs=20
+stdout_logfile=/tmp/detection.log
+stderr_logfile=/tmp/detection_err.log
+stdout_logfile_maxbytes=5MB
+environment=
+    RUN_MODE="CLOUD",
+    PYTHONUNBUFFERED="1",
+    TF_CPP_MIN_LOG_LEVEL="3",
+    CUDA_VISIBLE_DEVICES="-1"
+
+# ── 2. Gesture Dashboard (Flask + Socket.IO, port 5000) ───────
+[program:gesture_app]
+command=python /app/isl_ui_dashboard.py
+directory=/app
+autostart=true
+autorestart=true
+priority=10
+startretries=5
+startsecs=15
+stdout_logfile=/tmp/gesture.log
+stderr_logfile=/tmp/gesture_err.log
+stdout_logfile_maxbytes=5MB
+environment=
+    RUN_MODE="CLOUD",
+    PYTHONUNBUFFERED="1",
+    TF_CPP_MIN_LOG_LEVEL="3",
+    CUDA_VISIBLE_DEVICES="-1"
+
+# ── 3. Avatar App (Flask + eventlet, port 5001) ───────────────
+[program:avatar_app]
+command=python /app/speech_to_sign_avatar.py
+directory=/app
+autostart=true
+autorestart=true
+priority=10
+startretries=5
+startsecs=10
+stdout_logfile=/tmp/avatar.log
+stderr_logfile=/tmp/avatar_err.log
+stdout_logfile_maxbytes=5MB
+environment=
+    RUN_MODE="CLOUD",
+    PYTHONUNBUFFERED="1",
+    PORT="5001"
+
+# ── 4. nginx (starts after Flask apps are up) ─────────────────
+[program:nginx]
+command=/usr/sbin/nginx -g "daemon off;" -c /etc/nginx/nginx.conf
+autostart=true
+autorestart=true
+priority=30
+startretries=3
+startsecs=5
+stdout_logfile=/tmp/nginx.log
+stderr_logfile=/tmp/nginx_err.log
+stdout_logfile_maxbytes=5MB

templates/avatar_interface.html

@@ -0,0 +1,653 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"/>
+<title>ISL Fingerspelling — AI Sign Language</title>
+<link rel="preconnect" href="https://fonts.googleapis.com"/>
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
+<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet"/>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+<style>
+:root{
+  --bg:#0d1117;--surf:#131922;--card:#1a2233;
+  --bdr:rgba(212,168,83,.13);--bdrm:rgba(212,168,83,.30);--bdrh:rgba(212,168,83,.58);
+  --gold:#d4a853;--goldb:#f0c76a;--goldd:#a07c3a;
+  --sage:#7eb89a;--txt:#f0ede6;--txtm:#a8a096;--txtl:#5a5650;--red:#c0614a;
+  --r8:8px;--r14:14px;
+  --fD:'Playfair Display',Georgia,serif;
+  --fB:'DM Sans',system-ui,sans-serif;
+  --fM:'DM Mono',monospace;
+}
+*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
+html,body{height:100%;overflow:hidden}
+body{font-family:var(--fB);background:var(--bg);color:var(--txt);-webkit-font-smoothing:antialiased;display:flex;flex-direction:column}
+#app{display:flex;flex:1;overflow:hidden}
+
+/* ── Canvas pane ── */
+#cvp{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--bg);position:relative}
+#hc{flex:1;width:100%;display:block;touch-action:none}
+.topbar{display:flex;align-items:center;justify-content:space-between;padding:10px 16px 0;flex-shrink:0}
+.brand{display:flex;align-items:baseline;gap:8px}
+.brand-t{font-family:var(--fD);font-size:1.1rem;font-weight:700;color:var(--gold)}
+.brand-s{font-size:.65rem;color:var(--txtl);text-transform:uppercase;letter-spacing:.07em}
+.badge{font-size:.65rem;font-family:var(--fM);color:var(--sage);background:rgba(126,184,154,.1);border:1px solid rgba(126,184,154,.25);padding:3px 9px;border-radius:20px;transition:all .3s}
+.vrow{display:flex;gap:4px;padding:6px 16px 0;flex-shrink:0}
+.vb{padding:4px 10px;font-size:.63rem;font-family:var(--fM);background:transparent;border:1px solid var(--bdr);color:var(--txtl);border-radius:6px;cursor:pointer;transition:all .2s;text-transform:uppercase;letter-spacing:.03em}
+.vb:hover{color:var(--txt);border-color:var(--bdrm)}
+.vb.on{background:rgba(212,168,83,.18);color:var(--gold);border-color:var(--bdrm)}
+.gov{position:absolute;bottom:0;left:0;right:0;padding:12px 18px 14px;background:linear-gradient(to top,rgba(13,17,23,1) 55%,transparent);display:flex;align-items:flex-end;justify-content:space-between;gap:10px;pointer-events:none}
+.gl{font-family:var(--fD);font-size:clamp(2rem,5vw,3.2rem);font-weight:700;color:var(--goldb);line-height:1}
+.gd{font-size:.72rem;color:var(--txtm);text-align:right;max-width:180px;line-height:1.45}
+.gp{position:absolute;bottom:0;left:0;right:0;height:3px;background:rgba(212,168,83,.1)}
+.gb{height:100%;width:0%;background:linear-gradient(90deg,var(--goldd),var(--goldb));transition:width .12s linear;position:relative;overflow:hidden}
+.gb::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:sh 1.8s infinite}
+@keyframes sh{from{transform:translateX(-100%)}to{transform:translateX(200%)}}
+
+/* ── Control pane ── */
+#cp{width:340px;flex-shrink:0;display:flex;flex-direction:column;background:var(--surf);border-left:1px solid var(--bdr);overflow-y:auto}
+#cp::-webkit-scrollbar{width:4px}
+#cp::-webkit-scrollbar-thumb{background:var(--bdrm);border-radius:4px}
+@media(max-width:720px){
+  #app{flex-direction:column;height:100%}
+  #cvp{flex:0 0 46vh;min-height:260px;max-height:46vh}
+  #cp{width:100%;flex:1;border-left:none;border-top:1px solid var(--bdr);overflow-y:auto}
+}
+.pan{padding:14px 16px;display:flex;flex-direction:column;gap:12px}
+.slbl{font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--txtl);display:flex;align-items:center;gap:6px}
+textarea{width:100%;height:82px;resize:none;background:var(--card);border:1px solid var(--bdr);border-radius:var(--r14);color:var(--txt);font-family:var(--fB);font-size:.92rem;line-height:1.5;padding:11px 13px 26px;outline:none;transition:border-color .25s}
+textarea::placeholder{color:var(--txtl)}
+textarea:focus{border-color:var(--bdrh)}
+.iwrap{position:relative}
+.cc{position:absolute;bottom:8px;right:10px;font-size:.62rem;font-family:var(--fM);color:var(--txtl)}
+
+/* ── Speech warning banner ── */
+.mic-warn{background:rgba(212,168,83,.07);border:1px solid rgba(212,168,83,.25);border-radius:var(--r8);padding:10px 13px;font-size:.72rem;color:var(--txtm);line-height:1.7;display:none}
+.mic-warn.show{display:block}
+.mic-warn strong{color:var(--gold)}
+.mic-warn code{background:rgba(212,168,83,.12);border:1px solid rgba(212,168,83,.2);border-radius:4px;padding:1px 5px;font-family:var(--fM);font-size:.68rem;color:var(--goldb)}
+
+/* ── Mic status inline ── */
+.mic-status{display:none;align-items:center;gap:7px;padding:6px 11px;border-radius:var(--r8);background:rgba(126,184,154,.07);border:1px solid rgba(126,184,154,.2);font-size:.72rem;color:var(--sage);font-family:var(--fM)}
+.mic-status.show{display:flex}
+.mic-status.listening{background:rgba(192,97,74,.08);border-color:rgba(192,97,74,.3);color:#e07060}
+.mic-dot{width:7px;height:7px;border-radius:50%;background:var(--sage);animation:pd .9s infinite;flex-shrink:0}
+.mic-status.listening .mic-dot{background:#e07060}
+@keyframes pd{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.75)}}
+
+/* ── Buttons ── */
+.bg4{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
+.btn{display:flex;align-items:center;justify-content:center;gap:4px;padding:10px 6px;border:1px solid transparent;border-radius:var(--r14);font-family:var(--fB);font-size:.76rem;font-weight:600;cursor:pointer;transition:all .22s;white-space:nowrap;overflow:hidden}
+.btn:active{transform:scale(.96)}
+.btn:disabled{opacity:.38;cursor:not-allowed}
+.btn:disabled:active{transform:none}
+.bc{background:linear-gradient(135deg,#c49a3a,#d4a853,#e8c06a);color:#0d1117;border-color:rgba(212,168,83,.4);box-shadow:0 2px 10px rgba(212,168,83,.2)}
+.bc:not(:disabled):hover{box-shadow:0 4px 18px rgba(212,168,83,.38)}
+.bm{background:linear-gradient(135deg,#4e7d66,#7eb89a);color:#0d1117;border-color:rgba(126,184,154,.35)}
+.bm:not(:disabled):hover{box-shadow:0 4px 16px rgba(126,184,154,.3)}
+.bm.listening{background:linear-gradient(135deg,#8a3a2a,#c0614a)!important;color:#fff!important;border-color:rgba(192,97,74,.4)!important;animation:pulse .8s infinite}
+@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(192,97,74,.4)}50%{box-shadow:0 0 0 8px rgba(192,97,74,0)}}
+.bs{background:transparent;color:var(--red);border-color:rgba(192,97,74,.3)}
+.bs:hover{background:rgba(192,97,74,.08);border-color:rgba(192,97,74,.55)}
+.bg2{background:transparent;color:var(--txtm);border-color:var(--bdr)}
+.bg2:hover{border-color:var(--bdrm);color:var(--txt)}
+
+/* ── Status pill ── */
+.st{display:flex;align-items:center;gap:7px;padding:7px 13px;border-radius:30px;font-size:.73rem;font-weight:500;border:1px solid var(--bdr);background:var(--card);color:var(--txtm);transition:all .3s;min-height:34px}
+.dot{width:7px;height:7px;border-radius:50%;background:var(--txtl);flex-shrink:0;transition:all .3s}
+.st.act .dot{background:var(--sage);box-shadow:0 0 8px var(--sage);animation:pd 1.4s infinite}
+.st.act{border-color:rgba(126,184,154,.3);color:var(--sage)}
+.st.rec .dot{background:var(--gold);box-shadow:0 0 8px var(--gold);animation:pd .9s infinite}
+.st.rec{border-color:var(--bdrm);color:var(--gold)}
+.st.err .dot{background:var(--red)}
+.st.err{border-color:rgba(192,97,74,.3);color:var(--red)}
+
+.div{height:1px;background:var(--bdr);margin:0 -16px}
+.sh{display:flex;align-items:center;justify-content:space-between}
+.sbadge{font-family:var(--fM);font-size:.62rem;background:rgba(212,168,83,.12);color:var(--gold);border:1px solid rgba(212,168,83,.2);padding:2px 8px;border-radius:20px}
+.ll{max-height:180px;overflow-y:auto;display:flex;flex-direction:column;gap:4px;padding-right:2px}
+.ll::-webkit-scrollbar{width:3px}
+.ll::-webkit-scrollbar-thumb{background:var(--bdrm);border-radius:3px}
+.li{display:flex;align-items:center;gap:9px;padding:7px 11px;border-radius:var(--r8);background:var(--card);border:1px solid var(--bdr);transition:all .25s;flex-shrink:0}
+.li.on{background:rgba(212,168,83,.1);border-color:var(--bdrh);box-shadow:0 0 14px rgba(212,168,83,.1)}
+.li.sp{background:rgba(126,184,154,.05);border-color:rgba(126,184,154,.15)}
+.lc{font-family:var(--fD);font-size:1.05rem;font-weight:700;color:var(--gold);width:22px;text-align:center;flex-shrink:0}
+.li.on .lc{color:var(--goldb)}
+.li.sp .lc{color:var(--sage);font-size:.75rem}
+.lh{font-size:.68rem;color:var(--txtl);flex:1}
+.li.on .lh{color:var(--txtm)}
+.es{text-align:center;padding:24px 0;color:var(--txtl);font-size:.78rem;line-height:1.7}
+.sg{display:grid;grid-template-columns:1fr 1fr;gap:7px}
+.st2{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r14);padding:11px 13px;transition:border-color .25s}
+.st2:hover{border-color:var(--bdrm)}
+.sl2{font-size:.6rem;text-transform:uppercase;letter-spacing:.07em;color:var(--txtl);font-weight:600;margin-bottom:3px}
+.sv{font-family:var(--fD);font-size:1.6rem;font-weight:700;color:var(--gold);line-height:1}
+.abt{font-size:.77rem;color:var(--txtm);line-height:1.7}
+.abt p{margin-bottom:8px}
+.al{list-style:none;margin-bottom:8px}
+.al li{padding-left:12px;position:relative;font-size:.75rem;padding-bottom:2px}
+.al li::before{content:'›';position:absolute;left:0;color:var(--gold);font-weight:700}
+.acr{margin-top:12px;padding-top:10px;border-top:1px solid var(--bdr)}
+.an{font-family:var(--fD);color:var(--gold);font-weight:600;font-size:.88rem}
+.ar{font-size:.67rem;color:var(--txtl);margin:2px 0 3px}
+.ae{color:var(--sage);font-size:.68rem;font-family:var(--fM)}
+.nav{display:flex;gap:7px;padding:0 16px 20px}
+.na{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:12px 8px;border-radius:var(--r14);border:1px solid var(--bdr);background:var(--card);color:var(--txtm);text-decoration:none;font-size:.76rem;font-weight:600;transition:all .25s}
+.na:hover{border-color:var(--bdrm);color:var(--txt)}
+.na.on{background:rgba(212,168,83,.1);border-color:var(--bdrh);color:var(--gold)}
+</style>
+</head>
+<body>
+<div id="app">
+
+  <!-- Canvas side -->
+  <div id="cvp">
+    <div class="topbar">
+      <div class="brand">
+        <span class="brand-t">ISL Fingerspelling</span>
+        <span class="brand-s">Speech · Sign · AI</span>
+      </div>
+      <span class="badge" id="badge">● Ready</span>
+    </div>
+    <div class="vrow">
+      <button class="vb on"  onclick="setView('front',this)">Front</button>
+      <button class="vb"     onclick="setView('side',this)">Side</button>
+      <button class="vb"     onclick="setView('top',this)">Top</button>
+      <button class="vb"     onclick="setView('spin',this)">Spin</button>
+    </div>
+    <canvas id="hc"></canvas>
+    <div class="gov">
+      <div id="gl" class="gl">🤟</div>
+      <div id="gd" class="gd">Type or speak to begin</div>
+      <div class="gp"><div class="gb" id="gb"></div></div>
+    </div>
+  </div>
+
+  <!-- Control side -->
+  <div id="cp">
+    <div class="pan">
+
+      <div class="slbl">✍️ Enter Text</div>
+      <div class="iwrap">
+        <textarea id="txt" placeholder="Type your message here…" maxlength="200"></textarea>
+        <span class="cc" id="cc">0/200</span>
+      </div>
+
+      <div class="mic-warn" id="mwarn"></div>
+      <div class="mic-status" id="mstat">
+        <div class="mic-dot"></div>
+        <span id="mstxt">Listening…</span>
+      </div>
+
+      <div class="bg4">
+        <button class="btn bc"  onclick="doConvert()">✨ Convert</button>
+        <button class="btn bm"  onclick="doSpeak()" id="bspk">🎤 Speak</button>
+        <button class="btn bs"  onclick="doStop()">⏹ Stop</button>
+        <button class="btn bg2" onclick="doClear()">✕ Clear</button>
+      </div>
+
+      <div class="st" id="st"><div class="dot"></div><span id="stxt">Ready to translate</span></div>
+
+      <div class="div"></div>
+
+      <div class="sh">
+        <div class="slbl">📋 Letter Sequence</div>
+        <span class="sbadge" id="scnt">0 letters</span>
+      </div>
+      <div class="ll" id="ll">
+        <div class="es">Type text or speak<br>to see the sequence</div>
+      </div>
+
+      <div class="div"></div>
+
+      <div class="slbl">📊 Session Stats</div>
+      <div class="sg">
+        <div class="st2"><div class="sl2">Conversions</div><div class="sv" id="s0">0</div></div>
+        <div class="st2"><div class="sl2">Letters Signed</div><div class="sv" id="s1">0</div></div>
+        <div class="st2"><div class="sl2">Speech Uses</div><div class="sv" id="s2">0</div></div>
+        <div class="st2"><div class="sl2">Words</div><div class="sv" id="s3">0</div></div>
+      </div>
+
+      <div class="div"></div>
+
+      <div class="slbl">ℹ️ About</div>
+      <div class="abt">
+        <p>AI Powered ISL converts typed or spoken language into Indian Sign Language 3D animation, letter by letter.</p>
+        <ul class="al">
+          <li>Deaf &amp; hard-of-hearing individuals</li>
+          <li>Inclusive education environments</li>
+          <li>Public service &amp; assistive AI</li>
+        </ul>
+        <div class="acr">
+          <div class="an">Deepak Roshan</div>
+          <div class="ar">AI Engineer</div>
+          <div class="ae">deepakroshan380@gmail.com</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- FIX: Nav links built dynamically — works on localhost AND cloud domain -->
+    <div class="nav">
+      <a href="#" class="na" id="nav-gesture">😊 Gesture Recognition</a>
+      <a href="#" class="na on" id="nav-avatar">🤟 Speech-to-Sign</a>
+    </div>
+  </div>
+</div>
+
+<script>
+// ══════════════════════════════════════════════════════════
+//  ISL POSE TABLE  A–Z  (unchanged)
+// ══════════════════════════════════════════════════════════
+const ISL={
+  a:{thumb:.1, index:1.5,middle:1.5,ring:1.5,pinky:1.5,rz:0},
+  b:{thumb:1.2,index:0,  middle:0,  ring:0,  pinky:0,  rz:0},
+  c:{thumb:.3, index:.5, middle:.5, ring:.5, pinky:.5, rz:0},
+  d:{thumb:1.2,index:0,  middle:1.5,ring:1.5,pinky:1.5,rz:0},
+  e:{thumb:.8, index:1.2,middle:1.2,ring:1.2,pinky:1.2,rz:0},
+  f:{thumb:.8, index:.8, middle:0,  ring:0,  pinky:0,  rz:0},
+  g:{thumb:0,  index:0,  middle:1.5,ring:1.5,pinky:1.5,rz:1.57},
+  h:{thumb:1.5,index:0,  middle:0,  ring:1.5,pinky:1.5,rz:1.57},
+  i:{thumb:1.5,index:1.5,middle:1.5,ring:1.5,pinky:0,  rz:0},
+  j:{thumb:1.5,index:1.5,middle:1.5,ring:1.5,pinky:0,  rz:0},
+  k:{thumb:.5, index:0,  middle:0,  ring:1.5,pinky:1.5,rz:.78},
+  l:{thumb:0,  index:0,  middle:1.5,ring:1.5,pinky:1.5,rz:0},
+  m:{thumb:.8, index:1.5,middle:1.5,ring:1.5,pinky:1.5,rz:0},
+  n:{thumb:.8, index:1.5,middle:1.5,ring:1.5,pinky:1.5,rz:0},
+  o:{thumb:.5, index:.8, middle:.8, ring:.8, pinky:.8, rz:0},
+  p:{thumb:.5, index:0,  middle:0,  ring:1.5,pinky:1.5,rz:-.78},
+  q:{thumb:0,  index:0,  middle:1.5,ring:1.5,pinky:1.5,rz:-1.57},
+  r:{thumb:1.2,index:0,  middle:0,  ring:1.5,pinky:1.5,rz:0},
+  s:{thumb:.5, index:1.5,middle:1.5,ring:1.5,pinky:1.5,rz:0},
+  t:{thumb:.8, index:1.5,middle:1.5,ring:1.5,pinky:1.5,rz:0},
+  u:{thumb:1.2,index:0,  middle:0,  ring:1.5,pinky:1.5,rz:0},
+  v:{thumb:1.2,index:0,  middle:0,  ring:1.5,pinky:1.5,rz:0},
+  w:{thumb:1.2,index:0,  middle:0,  ring:0,  pinky:1.5,rz:0},
+  x:{thumb:1.5,index:.8, middle:1.5,ring:1.5,pinky:1.5,rz:0},
+  y:{thumb:0,  index:1.5,middle:1.5,ring:1.5,pinky:0,  rz:0},
+  z:{thumb:1.5,index:0,  middle:1.5,ring:1.5,pinky:1.5,rz:0},
+};
+const DESC={
+  a:'Fist with thumb at side',b:'Four fingers straight up',c:'Curved C shape',
+  d:'Index pointing up',e:'All fingers curled',f:'OK sign variant',
+  g:'Index + thumb sideways',h:'Two fingers horizontal',i:'Pinky raised',
+  j:'Pinky traces J',k:'V with thumb between',l:'L shape',
+  m:'Three fingers over thumb',n:'Two fingers over thumb',o:'O ring shape',
+  p:'K pointing down',q:'G pointing down',r:'Fingers crossed',
+  s:'Fist thumb across',t:'Thumb between fingers',u:'Two fingers together',
+  v:'Peace sign',w:'Three fingers wide',x:'Index hooked',
+  y:'Hang loose',z:'Index traces Z'
+};
+const REST={thumb:.05,index:.05,middle:.05,ring:.05,pinky:.05,rz:0};
+const SKIN=0xfdb4c4,JOINT=0xf5a3b5;
+
+// ══════════════════════════════════════════════════════════
+//  THREE.JS  (unchanged)
+// ══════════════════════════════════════════════════════════
+let scene,cam,ren,hg,fing={};
+let autoSpin=false;
+let cC={thumb:.05,index:.05,middle:.05,ring:.05,pinky:.05};
+let tC={...cC},cRZ=0,tRZ=0;
+let aRun=false,aCan=false;
+
+function initThree(){
+  const cv=document.getElementById('hc');
+  const cp=document.getElementById('cvp');
+  scene=new THREE.Scene();
+  scene.background=new THREE.Color(0x0d1117);
+  scene.fog=new THREE.FogExp2(0x0d1117,.022);
+  const W=cp.clientWidth,H=cp.clientHeight;
+  cam=new THREE.PerspectiveCamera(50,W/H,.1,1000);
+  cam.position.set(0,0,8);cam.lookAt(0,0,0);
+  ren=new THREE.WebGLRenderer({canvas:cv,antialias:true,powerPreference:'low-power'});
+  ren.setSize(W,H,false);ren.setPixelRatio(Math.min(devicePixelRatio,1.5));
+  ren.shadowMap.enabled=true;ren.info.autoReset=false;
+  scene.add(new THREE.AmbientLight(0xffffff,.65));
+  const kl=new THREE.DirectionalLight(0xfff4e0,.85);kl.position.set(5,10,7);kl.castShadow=true;scene.add(kl);
+  const fl=new THREE.DirectionalLight(0xd0e8ff,.3);fl.position.set(-6,2,4);scene.add(fl);
+  const rl=new THREE.DirectionalLight(0xffddbb,.2);rl.position.set(1,-4,-5);scene.add(rl);
+  buildHand();loop();
+}
+function mkFinger(cfg){
+  const fg=new THREE.Group();fg.userData={segs:[]};
+  const sl=cfg.length/3;let cy=0;
+  for(let i=0;i<3;i++){
+    const sg=new THREE.Group();const r=cfg.thickness*(1-i*.15);
+    const seg=new THREE.Mesh(new THREE.CylinderGeometry(r,r*.9,sl,12),new THREE.MeshStandardMaterial({color:SKIN,roughness:.7}));
+    seg.position.y=sl/2;seg.castShadow=true;sg.add(seg);
+    if(i<2){const jt=new THREE.Mesh(new THREE.SphereGeometry(r*.7,10,10),new THREE.MeshStandardMaterial({color:JOINT}));jt.position.y=sl;sg.add(jt);}
+    sg.position.y=cy;cy+=sl;
+    i===0?fg.add(sg):fg.userData.segs[i-1].add(sg);
+    fg.userData.segs.push(sg);
+  }
+  return fg;
+}
+function buildHand(){
+  hg=new THREE.Group();
+  hg.add(new THREE.Mesh(new THREE.BoxGeometry(1.8,2.5,.6),new THREE.MeshStandardMaterial({color:SKIN,roughness:.7})));
+  [{name:'thumb',pos:[-1.1,.5,.15],rot:[0,0,-.5],length:1.2,thickness:.35},
+   {name:'index',pos:[-.7,1.4,0],rot:[0,0,.1],length:1.8,thickness:.28},
+   {name:'middle',pos:[0,1.5,0],rot:[0,0,0],length:2.0,thickness:.28},
+   {name:'ring',pos:[.7,1.4,0],rot:[0,0,-.1],length:1.7,thickness:.26},
+   {name:'pinky',pos:[1.1,1.0,0],rot:[0,0,-.3],length:1.3,thickness:.24}].forEach(d=>{
+    const f=mkFinger(d);f.position.set(...d.pos);f.rotation.set(...d.rot);hg.add(f);fing[d.name]=f;
+  });
+  scene.add(hg);
+}
+function bend(name,amt){
+  const f=fing[name];if(!f)return;
+  f.userData.segs.forEach((s,i)=>{if(s)s.rotation.x=[amt*.4,amt*.6,amt*.8][i];});
+}
+function setPose(p){
+  ['thumb','index','middle','ring','pinky'].forEach(k=>{tC[k]=p[k]??0.05;});
+  tRZ=p.rz||0;
+}
+function loop(){
+  requestAnimationFrame(loop);
+  const t=Date.now()*.001;
+  if(!aRun){hg.position.y=Math.sin(t*.45)*.18;hg.rotation.y=Math.sin(t*.18)*.05;}
+  else{hg.rotation.y=0;}
+  ['thumb','index','middle','ring','pinky'].forEach(k=>{cC[k]+=(tC[k]-cC[k])*.13;bend(k,cC[k]);});
+  cRZ+=(tRZ-cRZ)*.13;hg.rotation.z=cRZ;
+  if(autoSpin){cam.position.x=Math.sin(t*.45)*8;cam.position.z=Math.cos(t*.45)*8;cam.lookAt(0,0,0);}
+  ren.render(scene,cam);
+}
+function setView(v,btn){
+  document.querySelectorAll('.vb').forEach(b=>b.classList.remove('on'));btn.classList.add('on');
+  autoSpin=(v==='spin');if(autoSpin)return;
+  const tp={front:[0,0,8],side:[8,0,0],top:[0,8,3]}[v]||[0,0,8];
+  animCam(...tp);
+}
+function animCam(tx,ty,tz){
+  const sx=cam.position.x,sy=cam.position.y,sz=cam.position.z;
+  const s0=performance.now();
+  function f(n){const e=ease(Math.min((n-s0)/900,1));cam.position.set(lerp(sx,tx,e),lerp(sy,ty,e),lerp(sz,tz,e));cam.lookAt(0,0,0);if(e<1)requestAnimationFrame(f);}
+  requestAnimationFrame(f);
+}
+window.addEventListener('resize',()=>{
+  if(!ren)return;
+  const cp=document.getElementById('cvp');
+  cam.aspect=cp.clientWidth/cp.clientHeight;cam.updateProjectionMatrix();
+  ren.setSize(cp.clientWidth,cp.clientHeight,false);
+});
+document.addEventListener('visibilitychange',()=>{if(document.hidden)aCan=true;});
+
+// ══════════════════════════════════════════════════════════
+//  SPEECH RECOGNITION — ROBUST LOCAL + CLOUD HANDLER (unchanged)
+// ══════════════════════════════════════════════════════════
+let recog=null,isRec=false,micAllowed=false;
+
+function isMicSafe(){
+  const isLocalhost=location.hostname==='localhost'||location.hostname==='127.0.0.1';
+  const isHttps=location.protocol==='https:';
+  return (isLocalhost||isHttps);
+}
+
+function showMicWarn(html){
+  const w=document.getElementById('mwarn');
+  w.innerHTML=html;w.classList.add('show');
+}
+
+function initSpeech(){
+  const SR=window.SpeechRecognition||window.webkitSpeechRecognition;
+  const btn=document.getElementById('bspk');
+
+  if(!SR){
+    btn.disabled=true;
+    btn.title='Use Chrome or Edge for voice input';
+    showMicWarn(
+      '🔇 <strong>Voice input requires Chrome or Edge.</strong><br>'+
+      'Firefox and Safari do not support the Web Speech API.<br>'+
+      'You can still <strong>type text</strong> above and press Convert.'
+    );
+    return;
+  }
+
+  if(!isMicSafe()){
+    btn.disabled=true;
+    btn.title='Mic blocked on HTTP — HTTPS required on cloud';
+    showMicWarn(
+      '🔒 <strong>Microphone is blocked on plain HTTP.</strong><br>'+
+      'On your Oracle Cloud server, enable HTTPS to use voice input.<br>'+
+      'Until then, <strong>type your text</strong> above — Convert always works.'
+    );
+    return;
+  }
+
+  recog=new SR();
+  recog.lang='en-IN';
+  recog.continuous=false;
+  recog.interimResults=false;
+  recog.maxAlternatives=3;
+
+  recog.onstart=()=>{
+    setBadge('🎤 Listening…',true);
+    setSt('rec','Listening… speak clearly in English');
+    setMicStat(true,'Listening — speak now');
+    document.getElementById('bspk').classList.add('listening');
+  };
+
+  recog.onspeechstart=()=>{
+    setMicStat(true,'Speech detected…');
+    setSt('rec','Processing your speech…');
+  };
+
+  recog.onresult=ev=>{
+    let best='',bestConf=0;
+    const results=ev.results[0];
+    for(let i=0;i<results.length;i++){
+      if(results[i].confidence>=bestConf){bestConf=results[i].confidence;best=results[i].transcript;}
+    }
+    const t=best.trim();
+    if(!t){resetSpk();setSt('err','No speech detected — try again');return;}
+    document.getElementById('txt').value=t;
+    document.getElementById('cc').textContent=t.length+'/200';
+    setSt('act','Got: "'+t+'"  ('+Math.round(bestConf*100)+'% conf)');
+    setMicStat(false,'');
+    isRec=false;resetSpk();
+    ST.sp++;ST.wd+=t.trim().split(/\s+/).length;updSt();
+    const seq=buildSeq(t);renderLL(seq);
+    ST.cv++;updSt();
+    setTimeout(()=>play(seq),300);
+  };
+
+  recog.onnomatch=()=>{
+    isRec=false;resetSpk();
+    setMicStat(false,'');
+    setSt('err','No match — speak more clearly or type instead');
+  };
+
+  recog.onerror=e=>{
+    isRec=false;resetSpk();setMicStat(false,'');
+    const msgs={
+      'not-allowed' :'🔒 Mic permission denied — click the 🔒 icon in the address bar to allow',
+      'no-speech'   :'No speech detected — try speaking louder',
+      'network'     :'Network error — check your internet connection',
+      'aborted'     :'Recording cancelled',
+      'audio-capture':'No microphone found — check your device settings',
+      'service-not-allowed':'Speech service blocked — use HTTPS on cloud',
+    };
+    setSt('err',msgs[e.error]||'Speech error: '+e.error);
+    if(e.error==='not-allowed'){
+      showMicWarn(
+        '🔒 <strong>Microphone permission was denied.</strong><br>'+
+        'Click the 🔒 padlock icon in your browser address bar,<br>'+
+        'set Microphone to <strong>Allow</strong>, then refresh the page.'
+      );
+      document.getElementById('bspk').disabled=true;
+    }
+  };
+
+  recog.onend=()=>{
+    if(isRec){isRec=false;resetSpk();}
+    setMicStat(false,'');
+  };
+}
+
+function setMicStat(show,msg){
+  const el=document.getElementById('mstat');
+  const tx=document.getElementById('mstxt');
+  if(show){el.classList.add('show','listening');tx.textContent=msg;}
+  else{el.classList.remove('show','listening');}
+}
+
+function resetSpk(){
+  const b=document.getElementById('bspk');
+  b.disabled=false;b.classList.remove('listening');
+  setBadge('● Ready',false);
+}
+
+// ══════════════════════════════════════════════════════════
+//  SEQUENCE + PLAYBACK  (unchanged)
+// ══════════════════════════════════════════════════════════
+function buildSeq(text){
+  const out=[];
+  for(const ch of text.toLowerCase().replace(/[^a-z\s]/g,'')){
+    if(ch===' ')out.push({isSpace:true,name:'SPACE',desc:'Pause between words'});
+    else if(ISL[ch])out.push({letter:ch,name:ch.toUpperCase(),pose:ISL[ch],desc:DESC[ch]||''});
+  }
+  return out;
+}
+
+async function play(seq){
+  if(aRun)return;
+  aRun=true;aCan=false;
+  setBadge('● Signing',true);setSt('act','Fingerspelling…');
+  for(let i=0;i<seq.length&&!aCan;i++){
+    const item=seq[i];
+    document.querySelectorAll('.li').forEach(e=>e.classList.remove('on'));
+    const el=document.getElementById('li'+i);
+    if(el){el.classList.add('on');el.scrollIntoView({behavior:'smooth',block:'nearest'});}
+    document.getElementById('gl').textContent=item.isSpace?'·':item.name;
+    document.getElementById('gd').textContent=item.desc;
+    if(item.isSpace){setPose(REST);await slp(500);}
+    else{setPose(item.pose);await slp(880);}
+    if(aCan)break;
+    document.getElementById('gb').style.width=((i+1)/seq.length*100)+'%';
+    ST.lt++;updSt();
+  }
+  aRun=false;
+  if(!aCan){
+    setBadge('✓ Done',false);setSt('act','Complete!');setPose(REST);
+    setTimeout(()=>{
+      document.getElementById('gb').style.width='0%';
+      document.getElementById('gl').textContent='🤟';
+      document.getElementById('gd').textContent='Type or speak to begin';
+      setBadge('● Ready',false);setSt('','Ready');
+    },2000);
+  }
+}
+
+// ══════════════════════════════════════════════════════════
+//  BUTTON ACTIONS  (unchanged)
+// ══════════════════════════════════════════════════════════
+const ST={cv:0,lt:0,sp:0,wd:0};
+
+function doConvert(){
+  if(aRun)doStop();
+  const t=document.getElementById('txt').value.trim();
+  if(!t){setSt('err','Please enter some text first');return;}
+  const seq=buildSeq(t);renderLL(seq);
+  ST.cv++;ST.wd+=t.split(/\s+/).length;updSt();
+  play(seq);
+}
+
+function doSpeak(){
+  if(!recog){setSt('err','Voice input not available — see instructions above');return;}
+  if(isRec)return;
+  isRec=true;
+  document.getElementById('bspk').disabled=true;
+  try{
+    recog.start();
+  }catch(e){
+    isRec=false;resetSpk();
+    setSt('err','Please wait a moment and try again');
+  }
+}
+
+function doStop(){
+  aCan=true;aRun=false;
+  if(isRec&&recog){try{recog.stop();}catch(e){}}
+  isRec=false;resetSpk();setMicStat(false,'');
+  document.getElementById('gb').style.width='0%';
+  setPose(REST);setBadge('⏹ Stopped',false);setSt('err','Stopped');
+  setTimeout(()=>{setSt('','Ready');setBadge('● Ready',false);},1400);
+}
+
+function doClear(){
+  doStop();
+  document.getElementById('txt').value='';
+  document.getElementById('cc').textContent='0/200';
+  renderLL([]);setSt('','Cleared');
+  setTimeout(()=>setSt('','Ready'),1200);
+}
+
+// ══════════════════════════════════════════════════════════
+//  UI HELPERS  (unchanged)
+// ══════════════════════════════════════════════════════════
+function renderLL(seq){
+  const el=document.getElementById('ll');
+  if(!seq.length){el.innerHTML='<div class="es">Type text or speak<br>to see the sequence</div>';document.getElementById('scnt').textContent='0 letters';return;}
+  let n=0;
+  el.innerHTML=seq.map((x,i)=>{
+    if(x.isSpace)return`<div class="li sp" id="li${i}"><span class="lc">⎵</span><span class="lh">Word space</span></div>`;
+    n++;return`<div class="li" id="li${i}"><span class="lc">${x.name}</span><span class="lh">${x.desc}</span></div>`;
+  }).join('');
+  document.getElementById('scnt').textContent=n+' letter'+(n!==1?'s':'');
+}
+function setSt(cls,msg){
+  document.getElementById('stxt').textContent=msg;
+  document.getElementById('st').className='st'+(cls?' '+cls:'');
+}
+function setBadge(msg,blink){
+  const b=document.getElementById('badge');b.textContent=msg;
+  b.style.animation=blink?'pd .9s infinite':'none';
+}
+function updSt(){
+  [ST.cv,ST.lt,ST.sp,ST.wd].forEach((v,i)=>document.getElementById('s'+i).textContent=v);
+}
+function lerp(a,b,t){return a+(b-a)*t;}
+function ease(t){return t<.5?4*t*t*t:1-Math.pow(-2*t+2,3)/2;}
+function slp(ms){return new Promise(r=>setTimeout(r,ms));}
+
+// ══════════════════════════════════════════════════════════
+//  FIX: Nav links — dynamic URL so redirect works on any domain
+//  Local dev  → uses explicit port numbers (:5000 / :5001)
+//  Cloud/Nginx → uses path-based routing (/ and /avatar/)
+// ══════════════════════════════════════════════════════════
+(function(){
+  const proto = location.protocol;
+  const host  = location.hostname;
+  const port  = location.port;
+  if (port && port !== '80' && port !== '443') {
+    // Local development with explicit ports
+    document.getElementById('nav-gesture').href = proto + '//' + host + ':5000/';
+    document.getElementById('nav-avatar').href  = proto + '//' + host + ':5001/';
+  } else {
+    // Cloud / Nginx — path-based routing
+    document.getElementById('nav-gesture').href = proto + '//' + host + '/';
+    document.getElementById('nav-avatar').href  = proto + '//' + host + '/avatar/';
+  }
+})();
+
+// Keyboard shortcuts
+document.addEventListener('keydown',e=>{
+  if((e.ctrlKey||e.metaKey)&&e.key==='Enter'){e.preventDefault();doConvert();}
+  if(e.key==='Escape')doStop();
+  if((e.ctrlKey||e.metaKey)&&e.key===' '){e.preventDefault();doSpeak();}
+});
+document.getElementById('txt').addEventListener('input',function(){
+  document.getElementById('cc').textContent=this.value.length+'/200';
+});
+
+// ══════════════════════════════════════════════════════════
+//  BOOT
+// ══════════════════════════════════════════════════════════
+window.addEventListener('DOMContentLoaded',()=>{
+  initThree();
+  initSpeech();
+  updSt();
+  setTimeout(()=>setPose(REST),400);
+});
+</script>
+</body>
+</html>

templates/dashboard.html

@@ -0,0 +1,1163 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+  <title>ISL Gesture Recognition — AI Sign Language</title>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.2/socket.io.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap"
+    rel="stylesheet" />
+  <style>
+    :root {
+      --bg: #0d1117;
+      --surf: #131922;
+      --card: #1a2233;
+      --bdr: rgba(212, 168, 83, .13);
+      --bdrm: rgba(212, 168, 83, .30);
+      --bdrh: rgba(212, 168, 83, .58);
+      --gold: #d4a853;
+      --goldb: #f0c76a;
+      --goldd: #a07c3a;
+      --sage: #7eb89a;
+      --saged: #4e7d66;
+      --txt: #f0ede6;
+      --txtm: #a8a096;
+      --txtl: #5a5650;
+      --red: #c0614a;
+      --r8: 8px;
+      --r14: 14px;
+      --fD: 'Playfair Display', Georgia, serif;
+      --fB: 'DM Sans', system-ui, sans-serif;
+      --fM: 'DM Mono', monospace;
+    }
+
+    *,
+    *::before,
+    *::after {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    html,
+    body {
+      height: 100%;
+      overflow: hidden;
+    }
+
+    body {
+      font-family: var(--fB);
+      background: var(--bg);
+      color: var(--txt);
+      -webkit-font-smoothing: antialiased;
+      display: flex;
+      flex-direction: column;
+    }
+
+    #app {
+      display: flex;
+      flex: 1;
+      overflow: hidden;
+      height: 100%;
+    }
+
+    #cam-pane {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
+      background: var(--bg);
+      position: relative;
+      overflow: hidden;
+    }
+
+    .topbar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 10px 16px 0;
+      flex-shrink: 0;
+      position: relative;
+      z-index: 5;
+    }
+
+    .brand {
+      display: flex;
+      align-items: baseline;
+      gap: 8px;
+    }
+
+    .brand-t {
+      font-family: var(--fD);
+      font-size: 1.1rem;
+      font-weight: 700;
+      color: var(--gold);
+    }
+
+    .brand-s {
+      font-size: .65rem;
+      color: var(--txtl);
+      text-transform: uppercase;
+      letter-spacing: .07em;
+    }
+
+    .live-badge {
+      font-size: .65rem;
+      font-family: var(--fM);
+      color: var(--sage);
+      background: rgba(126, 184, 154, .10);
+      border: 1px solid rgba(126, 184, 154, .25);
+      padding: 3px 9px;
+      border-radius: 20px;
+    }
+
+    @keyframes pd {
+
+      0%,
+      100% {
+        opacity: 1;
+        transform: scale(1)
+      }
+
+      50% {
+        opacity: .6;
+        transform: scale(.8)
+      }
+    }
+
+    #camera-feed {
+      flex: 1;
+      width: 100%;
+      display: block;
+      object-fit: cover;
+      background: #000;
+    }
+
+    .cam-overlay {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      padding: 12px 18px 14px;
+      background: linear-gradient(to top, rgba(13, 17, 23, 1) 55%, transparent);
+      display: flex;
+      align-items: flex-end;
+      justify-content: space-between;
+      gap: 10px;
+      pointer-events: none;
+      z-index: 5;
+    }
+
+    .co-letter {
+      font-family: var(--fD);
+      font-size: clamp(2rem, 5vw, 3.2rem);
+      font-weight: 700;
+      color: var(--goldb);
+      line-height: 1;
+    }
+
+    .co-word {
+      font-size: .85rem;
+      font-weight: 600;
+      color: var(--gold);
+      font-family: var(--fM);
+      letter-spacing: .05em;
+    }
+
+    .co-desc {
+      font-size: .72rem;
+      color: var(--txtm);
+      text-align: right;
+      max-width: 200px;
+      line-height: 1.45;
+    }
+
+    .co-progress {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 3px;
+      background: rgba(212, 168, 83, .08);
+    }
+
+    .co-bar {
+      height: 100%;
+      width: 0%;
+      background: linear-gradient(90deg, var(--goldd), var(--goldb));
+      transition: width .3s ease;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .co-bar::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent);
+      animation: shimmer 1.8s infinite;
+    }
+
+    @keyframes shimmer {
+      from {
+        transform: translateX(-100%)
+      }
+
+      to {
+        transform: translateX(200%)
+      }
+    }
+
+    .cam-placeholder {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 10px;
+      color: var(--txtl);
+      font-size: .8rem;
+      z-index: 2;
+      pointer-events: none;
+    }
+
+    .cam-placeholder .ph-icon {
+      font-size: 2.8rem;
+      opacity: .25;
+    }
+
+    #ctrl-pane {
+      width: 340px;
+      flex-shrink: 0;
+      display: flex;
+      flex-direction: column;
+      background: var(--surf);
+      border-left: 1px solid var(--bdr);
+      overflow-y: auto;
+      overflow-x: hidden;
+    }
+
+    #ctrl-pane::-webkit-scrollbar {
+      width: 4px;
+    }
+
+    #ctrl-pane::-webkit-scrollbar-thumb {
+      background: var(--bdrm);
+      border-radius: 4px;
+    }
+
+    @media (max-width: 720px) {
+
+      html,
+      body {
+        overflow: hidden;
+      }
+
+      #app {
+        flex-direction: column;
+        height: 100%;
+      }
+
+      #cam-pane {
+        flex: 0 0 46vh;
+        min-height: 260px;
+        max-height: 46vh;
+        width: 100%;
+      }
+
+      #ctrl-pane {
+        width: 100%;
+        flex: 1;
+        border-left: none;
+        border-top: 1px solid var(--bdr);
+        overflow-y: auto;
+      }
+
+      .topbar {
+        padding: 8px 12px 0;
+      }
+
+      .brand-t {
+        font-size: .95rem;
+      }
+    }
+
+    .cpanel {
+      padding: 14px 16px;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+
+    .sec-label {
+      font-size: .65rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: .08em;
+      color: var(--txtl);
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-family: var(--fM);
+    }
+
+    .status {
+      display: flex;
+      align-items: center;
+      gap: 7px;
+      padding: 7px 13px;
+      border-radius: 30px;
+      font-size: .73rem;
+      font-weight: 500;
+      border: 1px solid var(--bdr);
+      background: var(--card);
+      color: var(--txtm);
+      transition: all .3s;
+      min-height: 34px;
+      font-family: var(--fM);
+    }
+
+    .sdot {
+      width: 7px;
+      height: 7px;
+      border-radius: 50%;
+      background: var(--txtl);
+      flex-shrink: 0;
+      transition: all .3s;
+    }
+
+    .status.act .sdot {
+      background: var(--sage);
+      box-shadow: 0 0 8px var(--sage);
+      animation: pd 1.4s infinite;
+    }
+
+    .status.act {
+      border-color: rgba(126, 184, 154, .3);
+      color: var(--sage);
+    }
+
+    .status.err .sdot {
+      background: var(--red);
+    }
+
+    .status.err {
+      border-color: rgba(192, 97, 74, .3);
+      color: var(--red);
+    }
+
+    .text-display {
+      background: var(--card);
+      border: 1px solid var(--bdr);
+      border-radius: var(--r14);
+      padding: 10px 13px;
+      min-height: 52px;
+    }
+
+    .cur-word {
+      font-size: 1.15rem;
+      font-weight: 700;
+      color: var(--goldb);
+      font-family: var(--fD);
+      line-height: 1.2;
+      margin-bottom: 4px;
+    }
+
+    .cur-sentence {
+      font-size: .75rem;
+      color: var(--txtm);
+      line-height: 1.5;
+      font-family: var(--fM);
+    }
+
+    .btn-row {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 7px;
+    }
+
+    .btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 5px;
+      padding: 9px 6px;
+      border: 1px solid transparent;
+      border-radius: var(--r14);
+      font-family: var(--fB);
+      font-size: .76rem;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all .22s;
+      white-space: nowrap;
+      overflow: hidden;
+    }
+
+    .btn:active {
+      transform: scale(.96);
+    }
+
+    .btn:disabled {
+      opacity: .4;
+      cursor: not-allowed;
+    }
+
+    .btn-speak {
+      background: linear-gradient(135deg, #4e7d66, #7eb89a);
+      color: #0d1117;
+      border-color: rgba(126, 184, 154, .35);
+    }
+
+    .btn-speak:hover {
+      box-shadow: 0 4px 16px rgba(126, 184, 154, .3);
+    }
+
+    .btn-back {
+      background: transparent;
+      color: var(--txtm);
+      border-color: var(--bdr);
+    }
+
+    .btn-back:hover {
+      border-color: var(--bdrm);
+      color: var(--txt);
+    }
+
+    .btn-reset {
+      background: transparent;
+      color: var(--red);
+      border-color: rgba(192, 97, 74, .3);
+    }
+
+    .btn-reset:hover {
+      background: rgba(192, 97, 74, .08);
+      border-color: rgba(192, 97, 74, .55);
+    }
+
+    .divider {
+      height: 1px;
+      background: var(--bdr);
+      margin: 0 -16px;
+    }
+
+    .emotion-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 8px;
+    }
+
+    .emotion-big {
+      font-family: var(--fD);
+      font-size: 1.1rem;
+      font-weight: 700;
+      color: var(--goldb);
+    }
+
+    .emotion-icon {
+      font-size: 1.5rem;
+      animation: emojiPop 2.2s ease infinite;
+    }
+
+    @keyframes emojiPop {
+
+      0%,
+      100% {
+        transform: scale(1)
+      }
+
+      50% {
+        transform: scale(1.12)
+      }
+    }
+
+    .emo-bars {
+      display: flex;
+      flex-direction: column;
+      gap: 5px;
+    }
+
+    .emo-bar {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .ebo-label {
+      width: 78px;
+      font-size: .72rem;
+      color: var(--txtm);
+      flex-shrink: 0;
+    }
+
+    .ebo-track {
+      flex: 1;
+      height: 20px;
+      background: rgba(26, 34, 51, .8);
+      border-radius: 10px;
+      overflow: hidden;
+      border: 1px solid var(--bdr);
+    }
+
+    .ebo-fill {
+      height: 100%;
+      transition: width .5s cubic-bezier(.4, 0, .2, 1);
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      padding-right: 6px;
+      font-size: .62rem;
+      font-weight: 700;
+      font-family: var(--fM);
+      color: rgba(0, 0, 0, .75);
+      min-width: 28px;
+    }
+
+    .sug-detected {
+      font-size: .65rem;
+      font-family: var(--fM);
+      color: var(--gold);
+      background: rgba(212, 168, 83, .07);
+      border: 1px solid var(--bdr);
+      border-radius: var(--r8);
+      padding: 4px 10px;
+      margin-bottom: 5px;
+      letter-spacing: .04em;
+    }
+
+    .sug-list {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    .sug-item {
+      display: flex;
+      align-items: center;
+      gap: 9px;
+      padding: 7px 11px;
+      border-radius: var(--r8);
+      background: var(--card);
+      border: 1px solid var(--bdr);
+      cursor: pointer;
+      transition: all .2s;
+      font-size: .82rem;
+      color: var(--txt);
+    }
+
+    .sug-item:hover {
+      background: rgba(212, 168, 83, .08);
+      border-color: var(--bdrm);
+      transform: translateX(3px);
+      color: var(--goldb);
+    }
+
+    .sug-n {
+      font-family: var(--fM);
+      font-size: .65rem;
+      font-weight: 700;
+      color: var(--gold);
+      background: rgba(212, 168, 83, .12);
+      border: 1px solid rgba(212, 168, 83, .2);
+      width: 20px;
+      height: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 5px;
+      flex-shrink: 0;
+    }
+
+    .sug-empty {
+      text-align: center;
+      padding: 16px 0;
+      color: var(--txtl);
+      font-size: .75rem;
+      line-height: 1.7;
+    }
+
+    #emotionChart {
+      height: 160px !important;
+    }
+
+    .stat-grid {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 6px;
+    }
+
+    .stat-tile {
+      background: var(--card);
+      border: 1px solid var(--bdr);
+      border-radius: var(--r8);
+      padding: 9px 10px;
+      text-align: center;
+      transition: border-color .25s;
+    }
+
+    .stat-tile:hover {
+      border-color: var(--bdrm);
+    }
+
+    .sl {
+      font-size: .55rem;
+      text-transform: uppercase;
+      letter-spacing: .07em;
+      color: var(--txtl);
+      font-weight: 600;
+      margin-bottom: 3px;
+      font-family: var(--fM);
+    }
+
+    .sv {
+      font-family: var(--fD);
+      font-size: 1.3rem;
+      font-weight: 700;
+      color: var(--gold);
+      line-height: 1;
+    }
+
+    .about-txt {
+      font-size: .75rem;
+      color: var(--txtm);
+      line-height: 1.75;
+    }
+
+    .about-txt p {
+      margin-bottom: 7px;
+    }
+
+    .alist {
+      list-style: none;
+      margin-bottom: 7px;
+    }
+
+    .alist li {
+      padding-left: 13px;
+      position: relative;
+      font-size: .73rem;
+      padding-bottom: 2px;
+    }
+
+    .alist li::before {
+      content: '›';
+      position: absolute;
+      left: 0;
+      color: var(--gold);
+      font-weight: 700;
+    }
+
+    .acredit {
+      margin-top: 10px;
+      padding-top: 10px;
+      border-top: 1px solid var(--bdr);
+    }
+
+    .aname {
+      font-family: var(--fD);
+      color: var(--gold);
+      font-weight: 600;
+      font-size: .88rem;
+    }
+
+    .arole {
+      font-size: .65rem;
+      color: var(--txtl);
+      margin: 2px 0 3px;
+      font-family: var(--fM);
+    }
+
+    .aemail {
+      color: var(--sage);
+      font-size: .66rem;
+      font-family: var(--fM);
+    }
+
+    .nav-row {
+      display: flex;
+      gap: 7px;
+      padding: 0 16px 20px;
+    }
+
+    .nav-a {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6px;
+      padding: 12px 8px;
+      border-radius: var(--r14);
+      border: 1px solid var(--bdr);
+      background: var(--card);
+      color: var(--txtm);
+      text-decoration: none;
+      font-size: .76rem;
+      font-weight: 600;
+      transition: all .25s;
+    }
+
+    .nav-a:hover {
+      border-color: var(--bdrm);
+      color: var(--txt);
+    }
+
+    .nav-a.on {
+      background: rgba(212, 168, 83, .10);
+      border-color: var(--bdrh);
+      color: var(--gold);
+    }
+  </style>
+</head>
+
+<body>
+
+  <div id="app">
+
+    <div id="cam-pane">
+      <div class="topbar">
+        <div class="brand">
+          <span class="brand-t">ISL Gesture Recognition</span>
+          <span class="brand-s">Gesture · Emotion · AI</span>
+        </div>
+        <span class="live-badge" id="live-badge">● Ready</span>
+      </div>
+
+      <img id="camera-feed" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+        alt="Camera Feed" />
+
+      <div class="cam-placeholder" id="cam-ph">
+        <span class="ph-icon">📷</span>
+        <span style="font-family:var(--fM);font-size:.75rem">Connecting to camera…</span>
+      </div>
+
+      <div class="cam-overlay">
+        <div>
+          <div style="display:flex;align-items:baseline;gap:8px">
+            <span id="co-letter" class="co-letter">🤟</span>
+            <span id="co-word" class="co-word"></span>
+          </div>
+        </div>
+        <div id="co-desc" class="co-desc">Point camera at your hand</div>
+        <div class="co-progress">
+          <div class="co-bar" id="co-bar"></div>
+        </div>
+      </div>
+    </div>
+
+    <div id="ctrl-pane">
+      <div class="cpanel">
+
+        <div class="status" id="status">
+          <div class="sdot"></div>
+          <span id="stxt">Ready for detection</span>
+        </div>
+
+        <div class="text-display">
+          <div class="cur-word" id="cur-word">—</div>
+          <div class="cur-sentence" id="cur-sentence"></div>
+        </div>
+
+        <div class="btn-row">
+          <button class="btn btn-speak" onclick="sendCmd('speak')">🔊 Speak</button>
+          <button class="btn btn-back" onclick="sendCmd('backspace')">⌫ Back</button>
+          <button class="btn btn-reset" onclick="sendCmd('reset')">🔄 Reset</button>
+        </div>
+
+        <div class="divider"></div>
+
+        <div class="sec-label">😊 Emotion Detection</div>
+        <div class="emotion-header">
+          <span class="emotion-big" id="emo-label">Neutral</span>
+          <span class="emotion-icon" id="emo-icon">😐</span>
+        </div>
+
+        <div class="emo-bars">
+          <div class="emo-bar">
+            <div class="ebo-label">😊 Happy</div>
+            <div class="ebo-track">
+              <div class="ebo-fill" id="bar-happy" style="width:0%;background:linear-gradient(90deg,#3a8a5c,#7eb89a)">0%
+              </div>
+            </div>
+          </div>
+          <div class="emo-bar">
+            <div class="ebo-label">😢 Sad</div>
+            <div class="ebo-track">
+              <div class="ebo-fill" id="bar-sad" style="width:0%;background:linear-gradient(90deg,#3a5a8a,#6090c8)">0%
+              </div>
+            </div>
+          </div>
+          <div class="emo-bar">
+            <div class="ebo-label">😠 Angry</div>
+            <div class="ebo-track">
+              <div class="ebo-fill" id="bar-angry" style="width:0%;background:linear-gradient(90deg,#8a3a3a,#c06060)">0%
+              </div>
+            </div>
+          </div>
+          <div class="emo-bar">
+            <div class="ebo-label">😲 Surprise</div>
+            <div class="ebo-track">
+              <div class="ebo-fill" id="bar-surprise"
+                style="width:0%;background:linear-gradient(90deg,#8a6a1a,#d4a853)">0%</div>
+            </div>
+          </div>
+          <div class="emo-bar">
+            <div class="ebo-label">😐 Neutral</div>
+            <div class="ebo-track">
+              <div class="ebo-fill" id="bar-neutral"
+                style="width:100%;background:linear-gradient(90deg,#3a4455,#5a6878)">100%</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="divider"></div>
+
+        <div class="sec-label">💡 Word Suggestions</div>
+        <div id="sug-area">
+          <div class="sug-empty">Detected letters will appear<br>here with word suggestions</div>
+        </div>
+
+        <div class="divider"></div>
+
+        <div class="sec-label">📈 Emotion Timeline</div>
+        <canvas id="emotionChart"></canvas>
+
+        <div class="divider"></div>
+
+        <div class="sec-label">📊 Statistics</div>
+        <div class="stat-grid">
+          <div class="stat-tile">
+            <div class="sl">FPS</div>
+            <div class="sv" id="s-fps">0</div>
+          </div>
+          <div class="stat-tile">
+            <div class="sl">Letters</div>
+            <div class="sv" id="s-letters">0</div>
+          </div>
+          <div class="stat-tile">
+            <div class="sv" id="s-words">0</div>
+            <div class="sl">Words</div>
+          </div>
+          <div class="stat-tile">
+            <div class="sl">Sentences</div>
+            <div class="sv" id="s-sentences">0</div>
+          </div>
+          <div class="stat-tile">
+            <div class="sl">Emotions</div>
+            <div class="sv" id="s-emotions">0</div>
+          </div>
+          <div class="stat-tile">
+            <div class="sl">Conf.</div>
+            <div class="sv" id="s-conf">—</div>
+          </div>
+        </div>
+
+        <div class="divider"></div>
+
+        <div class="sec-label">ℹ️ About</div>
+        <div class="about-txt">
+          <p>AI Powered ISL Detection is an assistive AI system designed to improve communication between hearing and
+            deaf individuals.</p>
+          <p>This module focuses on real-time gesture and facial emotion recognition using computer vision.</p>
+          <p>Useful for:</p>
+          <ul class="alist">
+            <li>Deaf individuals</li>
+            <li>Inclusive classrooms</li>
+            <li>Assistive communication systems</li>
+            <li>Accessibility and AI research</li>
+          </ul>
+          <div class="acredit">
+            <div class="aname">Deepak Roshan</div>
+            <div class="arole">AI Engineer</div>
+            <div class="aemail">deepakroshan380@gmail.com</div>
+          </div>
+        </div>
+
+      </div>
+
+      <div class="nav-row">
+        <a href="#" class="nav-a on" id="nav-gesture">😊 Gesture Recognition</a>
+        <a href="#" class="nav-a" id="nav-avatar">🤟 Speech-to-Sign</a>
+      </div>
+    </div>
+
+  </div>
+
+  <script>
+    document.addEventListener('DOMContentLoaded', function () {
+
+      (function () {
+        var proto = location.protocol;
+        var host = location.hostname;
+        var port = location.port;
+        if (port && port !== '80' && port !== '443') {
+          document.getElementById('nav-gesture').href = proto + '//' + host + ':5000/';
+          document.getElementById('nav-avatar').href = proto + '//' + host + ':5001/';
+        } else {
+          document.getElementById('nav-gesture').href = proto + '//' + host + '/';
+          document.getElementById('nav-avatar').href = proto + '//' + host + '/avatar/';
+        }
+      })();
+
+      const EMO_ICONS = { happy: '😊', sad: '😢', angry: '😠', surprise: '😲', neutral: '😐' };
+      const EMO_KEYS = ['happy', 'sad', 'angry', 'surprise', 'neutral'];
+
+      const chartCtx = document.getElementById('emotionChart').getContext('2d');
+      const chart = new Chart(chartCtx, {
+        type: 'line',
+        data: {
+          labels: [],
+          datasets: [
+            { label: 'Happy', data: [], borderColor: '#7eb89a', borderWidth: 1.5, tension: .4, fill: false, pointRadius: 0 },
+            { label: 'Sad', data: [], borderColor: '#6090c8', borderWidth: 1.5, tension: .4, fill: false, pointRadius: 0 },
+            { label: 'Angry', data: [], borderColor: '#c06060', borderWidth: 1.5, tension: .4, fill: false, pointRadius: 0 },
+            { label: 'Surprise', data: [], borderColor: '#d4a853', borderWidth: 1.5, tension: .4, fill: false, pointRadius: 0 },
+            { label: 'Neutral', data: [], borderColor: '#5a6878', borderWidth: 1.5, tension: .4, fill: false, pointRadius: 0 },
+          ]
+        },
+        options: {
+          responsive: true,
+          maintainAspectRatio: false,
+          plugins: {
+            legend: { labels: { color: '#5a5650', font: { size: 9, family: "'DM Mono'" }, boxWidth: 10 } }
+          },
+          scales: {
+            y: {
+              beginAtZero: true, max: 1,
+              ticks: { color: '#5a5650', font: { size: 8 } },
+              grid: { color: 'rgba(212,168,83,.05)' }
+            },
+            x: {
+              ticks: { display: false },
+              grid: { color: 'rgba(212,168,83,.03)' }
+            }
+          },
+          animation: false
+        }
+      });
+
+      /* ── Browser Camera Streaming ──────────────────────────── */
+      let cameraStream = null;
+      const captureCanvas = document.createElement('canvas');
+      const captureCtx = captureCanvas.getContext('2d');
+
+      async function startBrowserCamera() {
+        if (cameraStream) return;
+        if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+          console.error('Camera API not supported — requires HTTPS on cloud');
+          return;
+        }
+        try {
+          cameraStream = await navigator.mediaDevices.getUserMedia({
+            video: { width: { ideal: 640 }, height: { ideal: 480 }, facingMode: 'user' },
+            audio: false
+          });
+          const video = document.createElement('video');
+          video.srcObject = cameraStream;
+          video.autoplay = true;
+          video.playsInline = true;
+          video.addEventListener('loadeddata', () => {
+            captureCanvas.width = 320;
+            captureCanvas.height = 240;
+            if (!window.cameraInterval) {
+              window.cameraInterval = setInterval(() => {
+                if (document.visibilityState === 'visible' && socket && socket.connected) {
+                  captureCtx.drawImage(video, 0, 0, 320, 240);
+                  const frame = captureCanvas.toDataURL('image/jpeg', 0.6);
+                  socket.emit('browser_frame', { frame: frame.split(',')[1] });
+                }
+              }, 65); // ~15 FPS
+            }
+          });
+        } catch (err) {
+          console.error('Camera access error:', err);
+        }
+      }
+
+      function stopBrowserCamera() {
+        if (cameraStream) {
+          cameraStream.getTracks().forEach(track => track.stop());
+          cameraStream = null;
+        }
+        if (window.cameraInterval) {
+          clearInterval(window.cameraInterval);
+          window.cameraInterval = null;
+        }
+      }
+
+      /* ── Socket.IO ──────────────────────────────────────────── */
+      // ✅ FIX: transports updated to prefer WebSocket with polling fallback.
+      //    upgrade:true lets Socket.IO automatically upgrade from polling → websocket
+      //    once the connection is established. This is required for camera streaming
+      //    to work reliably on HuggingFace Spaces (HTTPS) and other cloud deployments.
+      let socket;
+      try {
+        socket = io({
+          transports: ['websocket', 'polling'],
+          upgrade: true,
+          reconnectionDelay: 1000
+        });
+
+        socket.on('connect', () => {
+          setStat('act', 'Connected — detecting…');
+          document.getElementById('cam-ph').style.display = 'none';
+          document.getElementById('live-badge').textContent = '● Live';
+          startBrowserCamera();
+        });
+
+        socket.on('disconnect', () => {
+          setStat('', 'Disconnected');
+          document.getElementById('cam-ph').style.display = 'flex';
+          document.getElementById('live-badge').textContent = '● Offline';
+          stopBrowserCamera();
+        });
+
+        socket.on('state_update', (data) => {
+          try {
+            if (data.frame) {
+              document.getElementById('camera-feed').src = 'data:image/jpeg;base64,' + data.frame;
+              document.getElementById('cam-ph').style.display = 'none';
+            }
+
+            const letterEl = document.getElementById('co-letter');
+            const wordEl = document.getElementById('co-word');
+            const descEl = document.getElementById('co-desc');
+
+            if (data.overlay_letter) {
+              letterEl.textContent = data.overlay_letter.toUpperCase();
+            }
+
+            if (data.current_word !== undefined) {
+              const w = data.current_word || '—';
+              wordEl.textContent = w;
+              document.getElementById('cur-word').textContent = w;
+            }
+
+            if (data.sentence !== undefined) {
+              document.getElementById('cur-sentence').textContent = data.sentence || '';
+            }
+
+            if (data.overlay_confidence !== undefined) {
+              const pct = Math.round(data.overlay_confidence * 100);
+              descEl.textContent = 'Confidence: ' + pct + '%';
+              document.getElementById('s-conf').textContent = pct + '%';
+              document.getElementById('co-bar').style.width = pct + '%';
+            }
+
+            if (data.fps !== undefined) {
+              document.getElementById('s-fps').textContent = Math.round(data.fps);
+            }
+
+            if (data.stats) {
+              document.getElementById('s-letters').textContent = data.stats.letters_detected || 0;
+              document.getElementById('s-words').textContent = data.stats.words_formed || 0;
+              document.getElementById('s-sentences').textContent = data.stats.sentences_formed || 0;
+              document.getElementById('s-emotions').textContent = data.stats.emotion_changes || 0;
+            }
+
+            if (Array.isArray(data.suggestions)) {
+              updateSuggestions(data.suggestions, data.current_word);
+            }
+
+            if (data.emotion_scores) {
+              updateEmotion(data.emotion || 'neutral', data.emotion_scores);
+            }
+
+            if (data.emotion_timeline && data.emotion_timeline.length > 0) {
+              updateChart(data.emotion_timeline);
+            }
+
+          } catch (e) { console.error('Update error:', e); }
+        });
+
+      } catch (e) {
+        console.warn('Socket.IO unavailable — demo mode');
+      }
+
+      /* ── Update emotion bars ────────────────────────────────── */
+      function updateEmotion(emotion, scores) {
+        document.getElementById('emo-label').textContent = emotion.charAt(0).toUpperCase() + emotion.slice(1);
+        document.getElementById('emo-icon').textContent = EMO_ICONS[emotion] || '😐';
+        EMO_KEYS.forEach(k => {
+          const bar = document.getElementById('bar-' + k);
+          if (!bar) return;
+          let s = Math.max(0, Math.min(1, scores[k] || 0));
+          const pct = Math.round(s * 100);
+          bar.style.width = pct + '%';
+          bar.textContent = pct + '%';
+        });
+      }
+
+      /* ── Update suggestions ─────────────────────────────────── */
+      function updateSuggestions(suggestions, currentWord) {
+        const area = document.getElementById('sug-area');
+        if (!suggestions || !suggestions.length) {
+          area.innerHTML = '<div class="sug-empty">Detected letters will appear<br>here with word suggestions</div>';
+          return;
+        }
+        const detectedRow = currentWord
+          ? '<div class="sug-detected">Detected: ' + currentWord.toUpperCase() + '</div>' : '';
+        area.innerHTML = detectedRow + '<div class="sug-list">' +
+          suggestions.map((w, i) =>
+            '<div class="sug-item" onclick="window.acceptSug(\'' + w + '\')">' +
+            '<span class="sug-n">' + (i + 1) + '</span>' + w + '</div>'
+          ).join('') + '</div>';
+      }
+
+      /* ── Update chart ───────────────────────────────────────── */
+      function updateChart(timeline) {
+        if (!timeline || !timeline.length) return;
+        const collected = Object.fromEntries(EMO_KEYS.map(k => [k, []]));
+        timeline.forEach(tp => {
+          const s = tp.scores || {};
+          EMO_KEYS.forEach(k => collected[k].push(s[k] || 0));
+        });
+        chart.data.labels = timeline.map((_, i) => i);
+        chart.data.datasets.forEach((ds, i) => ds.data = collected[EMO_KEYS[i]]);
+        chart.update('none');
+      }
+
+      /* ── Status helper ──────────────────────────────────────── */
+      function setStat(cls, msg) {
+        document.getElementById('stxt').textContent = msg;
+        document.getElementById('status').className = 'status' + (cls ? ' ' + cls : '');
+      }
+
+      /* ── Global handlers ────────────────────────────────────── */
+      window.sendCmd = function (action) {
+        if (action === 'speak') {
+          const sentence = document.getElementById('cur-sentence').textContent.trim();
+          const word = document.getElementById('cur-word').textContent.trim();
+          const text = sentence || (word !== '—' ? word : '');
+          if (text && socket) socket.emit('command', { action: 'speak', text });
+        } else {
+          if (socket) socket.emit('command', { action });
+        }
+      };
+
+      window.acceptSug = function (word) {
+        if (socket) socket.emit('command', { action: 'accept_suggestion', word });
+      };
+
+      /* ── Keyboard shortcuts ─────────────────────────────────── */
+      document.addEventListener('keydown', e => {
+        if (e.ctrlKey && e.key === 's') { e.preventDefault(); window.sendCmd('speak'); }
+        if (e.ctrlKey && e.key === 'r') { e.preventDefault(); window.sendCmd('reset'); }
+        if (e.ctrlKey && e.key === 'Backspace') { e.preventDefault(); window.sendCmd('backspace'); }
+        if (['1', '2', '3'].includes(e.key)) {
+          const items = document.querySelectorAll('.sug-item');
+          const item = items[parseInt(e.key) - 1];
+          if (item) item.click();
+        }
+      });
+
+    });
+  </script>
+</body>
+
+</html>

translation.py

@@ -0,0 +1,195 @@
+"""
+translation.py - Rule-based Sign-glish to English translation
+
+Simple rule‑based mapper that converts a list of sign tokens into natural English.
+This implementation is deliberately lightweight and does not require any external services.
+"""
+
+from typing import List
+
+# ==================== TRANSLATION MAP ====================
+# Comprehensive mapping dictionary for ISL to English
+
+_TRANSLATION_MAP = {
+    # Greetings
+    "HELLO": "Hello",
+    "HI": "Hi",
+    "GOODBYE": "Goodbye",
+    "BYE": "Bye",
+    
+    # Politeness
+    "HELP": "Help",
+    "PLEASE": "Please",
+    "THANK": "Thank you",
+    "THANKS": "Thank you",
+    "SORRY": "Sorry",
+    "WELCOME": "Welcome",
+    
+    # Pronouns
+    "I": "I",
+    "ME": "me",
+    "YOU": "you",
+    "WE": "we",
+    "THEY": "they",
+    
+    # Basic responses
+    "YES": "yes",
+    "NO": "no",
+    "OK": "okay",
+    "GOOD": "good",
+    "BAD": "bad",
+    
+    # Actions
+    "WANT": "want",
+    "NEED": "need",
+    "GO": "go",
+    "COME": "come",
+    "STOP": "stop",
+    "SIT": "sit",
+    "STAND": "stand",
+    "WALK": "walk",
+    "RUN": "run",
+    "EAT": "eat",
+    "DRINK": "drink",
+    "SLEEP": "sleep",
+    
+    # Objects
+    "WATER": "water",
+    "FOOD": "food",
+    "HOME": "home",
+    "SCHOOL": "school",
+    "WORK": "work",
+    
+    # Time
+    "MORNING": "good morning",
+    "AFTERNOON": "good afternoon",
+    "EVENING": "good evening",
+    "NIGHT": "good night",
+    "TODAY": "today",
+    "TOMORROW": "tomorrow",
+    "YESTERDAY": "yesterday",
+    "NOW": "now",
+    
+    # Emotions
+    "HAPPY": "happy",
+    "SAD": "sad",
+    "ANGRY": "angry",
+    "SURPRISED": "surprised",
+    
+    # Questions
+    "HOW": "how",
+    "WHAT": "what",
+    "WHERE": "where",
+    "WHEN": "when",
+    "WHY": "why",
+    "WHO": "who",
+    
+    # Misc
+    "ARE": "are",
+    "IS": "is",
+    "LOVE": "love",
+}
+
+def translate_signs(sign_list: List[str]) -> str:
+    """Translate a list of sign tokens into a readable English sentence.
+
+    Args:
+        sign_list: List of uppercase sign tokens.
+    
+    Returns:
+        A string with the translated sentence.
+    
+    Example:
+        >>> translate_signs(["HELLO", "I", "WANT", "WATER"])
+        "Hello I want water"
+    """
+    if not sign_list:
+        return ""
+    
+    translated_words = []
+    
+    for token in sign_list:
+        # Handle fingerspelled words
+        if token.startswith("SPELL_"):
+            # Extract the spelled word
+            word = token.replace("SPELL_", "").lower()
+            translated_words.append(word)
+        else:
+            # Look up in translation map
+            translated = _TRANSLATION_MAP.get(token.upper(), token.lower())
+            translated_words.append(translated)
+    
+    # Join words
+    sentence = " ".join(translated_words).strip()
+    
+    # Capitalize first letter
+    if sentence:
+        sentence = sentence[0].upper() + sentence[1:]
+    
+    return sentence
+
+def add_translation(sign_token: str, english_text: str):
+    """Add a new translation to the map.
+    
+    Args:
+        sign_token: The ISL sign token (uppercase)
+        english_text: The English translation
+    """
+    _TRANSLATION_MAP[sign_token.upper()] = english_text
+
+def get_all_translations() -> dict:
+    """Get all available translations.
+    
+    Returns:
+        Dictionary of all sign-to-English mappings
+    """
+    return _TRANSLATION_MAP.copy()
+
+def translate_with_grammar(sign_list: List[str]) -> str:
+    """Translate with basic grammar improvements.
+    
+    Args:
+        sign_list: List of sign tokens
+    
+    Returns:
+        Grammatically improved sentence
+    """
+    sentence = translate_signs(sign_list)
+    
+    # Basic grammar improvements
+    # Add articles
+    sentence = sentence.replace(" water", " some water")
+    sentence = sentence.replace(" food", " some food")
+    
+    # Fix common patterns
+    sentence = sentence.replace("I want", "I would like")
+    sentence = sentence.replace("I need", "I need to")
+    
+    return sentence
+
+# ==================== MAIN ====================
+
+if __name__ == "__main__":
+    # Demo examples
+    print("=" * 60)
+    print("ISL Sign-to-English Translation Demo")
+    print("=" * 60)
+    print()
+    
+    # Test cases
+    test_cases = [
+        ["HELLO", "HOW", "ARE", "YOU"],
+        ["I", "WANT", "WATER", "PLEASE"],
+        ["THANK", "YOU"],
+        ["GOOD", "MORNING"],
+        ["I", "NEED", "HELP"],
+        ["SORRY", "I", "AM", "SAD"],
+    ]
+    
+    for signs in test_cases:
+        translation = translate_signs(signs)
+        print(f"Signs: {' '.join(signs)}")
+        print(f"Translation: {translation}")
+        print()
+    
+    print("=" * 60)

unified_launcher.py

@@ -0,0 +1,208 @@
+# unified_launcher.py
+# ═══════════════════════════════════════════════════════════════════════════
+#  ISL FULL SYSTEM — SINGLE COMMAND LAUNCHER
+#  Starts BOTH services from ONE terminal:
+#
+#    LOCAL  →  python unified_launcher.py
+#    CLOUD  →  RUN_MODE=CLOUD python unified_launcher.py
+#
+#  Port 5000 → ISL Gesture Recognition + Emotion Detection  (launcher.py)
+#  Port 5001 → Speech-to-Sign / Fingerspelling Avatar        (speech_to_sign_avatar.py)
+#              OR speech_to_sign_avatar_fixed.py  (auto-detected)
+#
+#  ⚠️  WHY subprocess.Popen (not multiprocessing)?
+#      speech_to_sign_avatar*.py calls eventlet.monkey_patch() at import-time,
+#      which corrupts the multiprocessing runtime.  Running each script as a
+#      fully separate OS process avoids this entirely.
+# ═══════════════════════════════════════════════════════════════════════════
+
+import subprocess
+import sys
+import os
+import time
+import multiprocessing
+
+# ── Resolve paths ─────────────────────────────────────────────────────────────
+PYTHON   = sys.executable          # same venv / interpreter that started us
+BASE_DIR = os.path.dirname(os.path.abspath(__file__))
+
+RUN_MODE = os.getenv("RUN_MODE", "LOCAL").upper()
+
+# ── Auto-detect which avatar script exists ────────────────────────────────────
+# Prefer the fixed/fingerspelling version if present, fall back to original.
+AVATAR_CANDIDATES = [
+    "speech_to_sign_avatar_fixed.py",
+    "speech_to_sign_avatar.py",
+]
+AVATAR_SCRIPT = None
+for _candidate in AVATAR_CANDIDATES:
+    _path = os.path.join(BASE_DIR, _candidate)
+    if os.path.exists(_path):
+        AVATAR_SCRIPT = _path
+        break
+
+GESTURE_SCRIPT = os.path.join(BASE_DIR, "launcher.py")
+
+# ── Environment for child processes ──────────────────────────────────────────
+CHILD_ENV = {
+    **os.environ,
+    "RUN_MODE"         : RUN_MODE,
+    "PYTHONUNBUFFERED" : "1",        # immediate stdout/stderr in logs
+}
+
+# ── Oracle Cloud: open firewall ports (run once manually) ─────────────────────
+#   sudo firewall-cmd --permanent --add-port=5000/tcp
+#   sudo firewall-cmd --permanent --add-port=5001/tcp
+#   sudo firewall-cmd --reload
+#   Also open in OCI Console → VCN → Security List → Ingress Rules
+
+
+# ─────────────────────────────────────────────────────────────────────────────
+def start_process(script_path, label):
+    """Spawn a child process and return the Popen handle."""
+    print(f"  🚀 Starting {label}")
+    print(f"     Script : {script_path}")
+    proc = subprocess.Popen(
+        [PYTHON, script_path],
+        env=CHILD_ENV,
+        cwd=BASE_DIR,
+        stdout=None,   # inherit — all logs appear in the same terminal
+        stderr=None,
+    )
+    print(f"     PID    : {proc.pid}")
+    return proc
+
+
+def stop_all(processes):
+    """Gracefully terminate all child processes, then force-kill if needed."""
+    print("\n🛑 Shutting down all processes…")
+    for label, proc in processes.items():
+        if proc and proc.poll() is None:
+            print(f"   → Terminating  {label}  (PID {proc.pid})")
+            proc.terminate()
+
+    deadline = time.time() + 6
+    for label, proc in processes.items():
+        if proc:
+            remaining = max(0.1, deadline - time.time())
+            try:
+                proc.wait(timeout=remaining)
+                print(f"   ✅ {label} stopped cleanly")
+            except subprocess.TimeoutExpired:
+                print(f"   ⚡ Force-killing {label}  (PID {proc.pid})")
+                proc.kill()
+
+    print("✅ All processes stopped")
+    print("=" * 70)
+
+
+def preflight_check():
+    """Verify required scripts exist before starting anything."""
+    ok = True
+
+    if not os.path.exists(GESTURE_SCRIPT):
+        print(f"❌ MISSING: launcher.py not found at:\n   {GESTURE_SCRIPT}")
+        ok = False
+
+    if AVATAR_SCRIPT is None:
+        print("❌ MISSING: No avatar script found.")
+        print("   Expected one of:", AVATAR_CANDIDATES)
+        ok = False
+
+    if not ok:
+        print("\n   Make sure unified_launcher.py is in the SAME folder as the other scripts.")
+        sys.exit(1)
+
+
+# ─────────────────────────────────────────────────────────────────────────────
+def main():
+    print()
+    print("=" * 70)
+    print("  🤟  ISL FULL SYSTEM  —  UNIFIED LAUNCHER")
+    print("=" * 70)
+    print(f"  RUN_MODE  : {RUN_MODE}")
+    print(f"  Python    : {PYTHON}")
+    print(f"  Base dir  : {BASE_DIR}")
+    print(f"  Gesture   : {os.path.basename(GESTURE_SCRIPT)}  → port 5000")
+    if AVATAR_SCRIPT:
+        print(f"  Avatar    : {os.path.basename(AVATAR_SCRIPT)}  → port 5001")
+    print("=" * 70)
+    print()
+
+    preflight_check()
+
+    processes = {
+        "ISL Gesture  (5000)" : None,
+        "Avatar Server (5001)": None,
+    }
+
+    restart_map = {
+        "ISL Gesture  (5000)" : GESTURE_SCRIPT,
+        "Avatar Server (5001)": AVATAR_SCRIPT,
+    }
+
+    # ── Start gesture system first; give camera time to initialise ────────────
+    processes["ISL Gesture  (5000)"] = start_process(
+        GESTURE_SCRIPT, "ISL Gesture Recognition  (port 5000)")
+    print()
+    print("   ⏳ Waiting 2 s for camera to initialise…")
+    time.sleep(2)
+    print()
+
+    # ── Start avatar server ───────────────────────────────────────────────────
+    processes["Avatar Server (5001)"] = start_process(
+        AVATAR_SCRIPT, "Speech-to-Sign Avatar  (port 5001)")
+    time.sleep(1)
+
+    # ── Ready banner ──────────────────────────────────────────────────────────
+    print()
+    print("=" * 70)
+    print("  ✅  ALL SYSTEMS RUNNING!")
+    print("=" * 70)
+
+    if RUN_MODE == "CLOUD":
+        public_ip = os.getenv("PUBLIC_IP", "<YOUR_ORACLE_PUBLIC_IP>")
+        print(f"  📊 ISL Dashboard   →  http://{public_ip}:5000")
+        print(f"  🎭 Avatar System   →  http://{public_ip}:5001")
+        print()
+        print("  💡 Oracle Cloud checklist:")
+        print("     1. Set env var:  export PUBLIC_IP=<your-instance-ip>")
+        print("     2. OCI Console → VCN → Security List → add Ingress rules")
+        print("        for TCP port 5000 and TCP port 5001  (source 0.0.0.0/0)")
+        print("     3. On the VM (run once):")
+        print("        sudo firewall-cmd --permanent --add-port=5000/tcp")
+        print("        sudo firewall-cmd --permanent --add-port=5001/tcp")
+        print("        sudo firewall-cmd --reload")
+        print("     4. To auto-start on reboot → see isl.service below")
+    else:
+        print("  📊 ISL Dashboard   →  http://localhost:5000")
+        print("  🎭 Avatar System   →  http://localhost:5001")
+
+    print()
+    print("  🛑 Press Ctrl+C to stop everything")
+    print("=" * 70)
+    print()
+
+    # ── Watch-dog loop — auto-restarts any crashed process ───────────────────
+    try:
+        while True:
+            for label, script in restart_map.items():
+                proc = processes[label]
+                if proc is not None and proc.poll() is not None:
+                    exit_code = proc.returncode
+                    print(f"\n⚠️  [{label}] exited with code {exit_code}")
+                    print("   Restarting in 3 s…")
+                    time.sleep(3)
+                    processes[label] = start_process(script, label)
+                    print()
+            time.sleep(3)
+
+    except KeyboardInterrupt:
+        stop_all(processes)
+        sys.exit(0)
+
+
+# ─────────────────────────────────────────────────────────────────────────────
+if __name__ == "__main__":
+    multiprocessing.freeze_support()   # no-op on Linux/Mac, required on Win
+    main()