Deploy SignApp main app

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* 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
+*.glb filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,3 @@
+__pycache__/
+*.pyc
+*.egg-info/

Dockerfile

@@ -0,0 +1,14 @@
+FROM python:3.12-slim
+
+WORKDIR /app
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY src/ src/
+RUN mkdir -p uploads
+
+EXPOSE 7860
+
+CMD ["uvicorn", "src.sign_app.api:app", "--host", "0.0.0.0", "--port", "7860"]
+

README.md

@@ -1,10 +1,25 @@
 ---
 title: SignApp
-emoji: 📊
-colorFrom: green
-colorTo: pink
+emoji: 🤟
+colorFrom: indigo
+colorTo: blue
 sdk: docker
+app_port: 7860
 pinned: false
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# SignApp
+
+Main SignApp UI/API deployment. This Space should stay lightweight and call the
+separate model Spaces for Whisper and disfluency removal.
+
+Required Space secrets:
+
+- `MONGODB_URI`
+- `WHISPER_API_URL`
+- `DISFLUENCY_API_URL`
+
+Optional Space secrets:
+
+- `HF_TOKEN` for private/protected model Spaces or better public Space rate limits
+- `REMOTE_API_TIMEOUT`, default `300`

requirements.txt

@@ -0,0 +1,8 @@
+fastapi>=0.104.0
+uvicorn>=0.24.0
+python-multipart>=0.0.6
+python-dotenv>=1.0.0
+nltk>=3.8.1
+requests>=2.31.0
+pymongo>=4.6.0
+

src/sign_app/__init__.py

@@ -0,0 +1,10 @@
+"""
+SignApp - Audio processing pipeline for sign language recognition.
+
+This module provides functionality for:
+- Audio transcription using Whisper
+- Disfluency removal from transcriptions
+- Further processing for sign language recognition
+"""
+
+__version__ = "0.1.0"

src/sign_app/api.py

@@ -0,0 +1,243 @@
+import os
+import shutil
+from contextlib import asynccontextmanager
+from pathlib import Path
+
+import requests
+from dotenv import load_dotenv
+from fastapi import FastAPI, File, HTTPException, UploadFile
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import FileResponse
+from fastapi.staticfiles import StaticFiles
+from pydantic import BaseModel
+from pymongo import MongoClient
+
+load_dotenv()
+
+
+MONGODB_URI = os.getenv("MONGODB_URI", "mongodb://localhost:27017/")
+WHISPER_MODEL_SIZE = os.getenv("WHISPER_MODEL", "small")
+
+WHISPER_API_URL = os.getenv("WHISPER_API_URL", "").strip().rstrip("/")
+DISFLUENCY_API_URL = os.getenv("DISFLUENCY_API_URL", "").strip().rstrip("/")
+REMOTE_API_TIMEOUT = int(os.getenv("REMOTE_API_TIMEOUT", "300"))
+HF_TOKEN = os.getenv("HF_TOKEN", "").strip()
+
+UPLOAD_DIR = Path("uploads")
+UPLOAD_DIR.mkdir(exist_ok=True)
+
+UI_DIR = Path(__file__).parent / "ui"
+
+client = MongoClient(MONGODB_URI)
+db = client["SignApp"]
+sign_rules_col = db["sign_rules"]
+fingerspell_col = db["fingerspelling"]
+
+_whisper_model = None
+_disfluency_fn = None
+
+
+def _auth_headers() -> dict[str, str]:
+    if not HF_TOKEN:
+        return {}
+    return {"Authorization": f"Bearer {HF_TOKEN}"}
+
+
+def get_whisper():
+    global _whisper_model
+    if _whisper_model is None:
+        import whisper
+
+        _whisper_model = whisper.load_model(WHISPER_MODEL_SIZE)
+    return _whisper_model
+
+
+def get_disfluency_fn():
+    global _disfluency_fn
+    if _disfluency_fn is None:
+        from .disfluency.inference import remove_disfluency
+
+        _disfluency_fn = remove_disfluency
+    return _disfluency_fn
+
+
+def transcribe_audio(file_path: Path) -> dict:
+    if WHISPER_API_URL:
+        with file_path.open("rb") as audio_file:
+            response = requests.post(
+                f"{WHISPER_API_URL}/transcribe/",
+                headers=_auth_headers(),
+                files={"file": (file_path.name, audio_file, "audio/webm")},
+                timeout=REMOTE_API_TIMEOUT,
+            )
+        response.raise_for_status()
+        data = response.json()
+        return {
+            "text": data.get("text", ""),
+            "language": data.get("language", "en"),
+        }
+
+    whisper_model = get_whisper()
+    result = whisper_model.transcribe(str(file_path), language="en")
+    return {
+        "text": result["text"],
+        "language": result["language"],
+    }
+
+
+def clean_disfluency(text: str) -> str:
+    if DISFLUENCY_API_URL:
+        response = requests.post(
+            f"{DISFLUENCY_API_URL}/clean/",
+            headers=_auth_headers(),
+            json={"text": text},
+            timeout=REMOTE_API_TIMEOUT,
+        )
+        response.raise_for_status()
+        data = response.json()
+        return data.get("cleaned_text", "").strip()
+
+    return get_disfluency_fn()(text)
+
+
+@asynccontextmanager
+async def lifespan(app: FastAPI):
+    if not WHISPER_API_URL:
+        print("Loading local Whisper model on startup...")
+        get_whisper()
+    else:
+        print(f"Using remote Whisper API: {WHISPER_API_URL}")
+
+    if not DISFLUENCY_API_URL:
+        print("Loading local disfluency model on startup...")
+        get_disfluency_fn()
+    else:
+        print(f"Using remote disfluency API: {DISFLUENCY_API_URL}")
+
+    print("SignApp startup complete.")
+    yield
+
+
+app = FastAPI(title="SignApp", version="0.1.0", lifespan=lifespan)
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+from .sign_language_text.gloss_converter import convert_to_sign_gloss
+
+
+class TextInput(BaseModel):
+    text: str
+
+
+def build_sign_sequence(gloss_tokens: list[str]) -> list[dict]:
+    """Look up each gloss token in MongoDB sign_rules, fall back to fingerspelling."""
+    sign_sequence = []
+
+    for word in gloss_tokens:
+        rule = sign_rules_col.find_one({"sign": word})
+
+        if rule:
+            sign_sequence.append(
+                {
+                    "type": "sign",
+                    "gloss": word,
+                    "handshape": rule["handshape"],
+                    "location": rule["location"],
+                    "movement": rule["movement"],
+                    "expression": rule.get("expression", "neutral"),
+                }
+            )
+        else:
+            for letter in word:
+                finger = fingerspell_col.find_one({"letter": letter.upper()})
+                if finger:
+                    sign_sequence.append(
+                        {
+                            "type": "fingerspell",
+                            "letter": letter.upper(),
+                            "handshape": finger["handshape"],
+                            "location": "neutral_space",
+                            "movement": finger.get("movement") or "none",
+                        }
+                    )
+
+    return sign_sequence
+
+
+def text_pipeline(text: str) -> dict:
+    cleaned_text = clean_disfluency(text)
+    sign_friendly_text = convert_to_sign_gloss(cleaned_text)
+    sign_sequence = build_sign_sequence(sign_friendly_text)
+
+    return {
+        "cleaned_transcription": cleaned_text,
+        "sign_friendly_text": sign_friendly_text,
+        "sign_sequence": sign_sequence,
+    }
+
+
+@app.get("/health")
+def health():
+    return {
+        "status": "ok",
+        "whisper": "remote" if WHISPER_API_URL else "local",
+        "disfluency": "remote" if DISFLUENCY_API_URL else "local",
+    }
+
+
+@app.post("/voice-to-text/")
+def voice_to_text_endpoint(file: UploadFile = File(...)):
+    """Full pipeline: audio -> transcription -> gloss -> sign sequence."""
+    file_path = UPLOAD_DIR / (file.filename or "recording.webm")
+
+    try:
+        with file_path.open("wb") as audio_file:
+            shutil.copyfileobj(file.file, audio_file)
+
+        transcription_result = transcribe_audio(file_path)
+        transcription = transcription_result["text"]
+        language = transcription_result["language"]
+
+        result = text_pipeline(transcription)
+        return {
+            "language": language,
+            "raw_transcription": transcription,
+            **result,
+        }
+
+    except requests.RequestException as exc:
+        raise HTTPException(status_code=502, detail=f"Remote model service failed: {exc}") from exc
+    except Exception as exc:
+        raise HTTPException(status_code=500, detail=str(exc)) from exc
+    finally:
+        if file_path.exists():
+            file_path.unlink()
+
+
+@app.post("/text-to-sign/")
+def text_to_sign_endpoint(body: TextInput):
+    """Text-only pipeline: text -> gloss -> sign sequence."""
+    text = body.text.strip()
+    if not text:
+        raise HTTPException(status_code=400, detail="Text is empty")
+
+    try:
+        return text_pipeline(text)
+    except requests.RequestException as exc:
+        raise HTTPException(status_code=502, detail=f"Remote model service failed: {exc}") from exc
+    except Exception as exc:
+        raise HTTPException(status_code=500, detail=str(exc)) from exc
+
+
+@app.get("/")
+def serve_ui():
+    return FileResponse(UI_DIR / "index.html")
+
+
+app.mount("/", StaticFiles(directory=str(UI_DIR)), name="ui")

src/sign_app/audio/__init__.py

@@ -0,0 +1 @@
+"""Audio processing module using Whisper."""

src/sign_app/disfluency/__init__.py

@@ -0,0 +1 @@
+"""Disfluency removal module for cleaning speech transcriptions."""

src/sign_app/disfluency/inference.py

@@ -0,0 +1,37 @@
+import torch
+from transformers import T5Tokenizer, T5ForConditionalGeneration
+
+MODEL_PATH = "./speechCleaner_t5_model"
+
+# Load tokenizer & model
+tokenizer = T5Tokenizer.from_pretrained(MODEL_PATH)
+model = T5ForConditionalGeneration.from_pretrained(MODEL_PATH)
+
+
+device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
+model.to(device)
+model.eval()
+
+
+def remove_disfluency(text: str) -> str:
+    inputs = tokenizer(
+        "clean speech: " + text,
+        return_tensors="pt",
+        truncation=True,
+        padding=True
+    ).to(device)
+
+    with torch.no_grad():
+        outputs = model.generate(
+            **inputs,
+            max_length=256,
+            num_beams=4,
+            early_stopping=True
+        )
+    cleaned_text = tokenizer.decode(outputs[0], skip_special_tokens=True)
+    return cleaned_text.strip()
+
+# Test the disfluency removal on some example sentences
+if __name__ == "__main__":
+    text = "I uh want to go to the store"
+    print(remove_disfluency(text))

src/sign_app/disfluency/training.py

@@ -0,0 +1,121 @@
+from datasets import load_dataset
+from transformers import T5Tokenizer, T5ForConditionalGeneration, Seq2SeqTrainer, Seq2SeqTrainingArguments, DataCollatorForSeq2Seq
+import mlflow
+import evaluate
+import nltk
+nltk.download('punkt')
+bleu = evaluate.load("bleu")
+rouge = evaluate.load("rouge")
+
+base_model = "t5-base"  # You can choose a larger model like "t5-base" or "t5-large" if you have the resources
+
+tokenizer = T5Tokenizer.from_pretrained(base_model)
+transformer_model = T5ForConditionalGeneration.from_pretrained(base_model)
+
+switchboard_dataset = load_dataset("amaai-lab/DisfluencySpeech")
+
+def keep_only_text_columns(example):
+    return {
+        "input_text": example["transcript_a"],
+        "target_text": example["transcript_c"]
+    }
+
+dataset = switchboard_dataset.map(
+    keep_only_text_columns,
+    remove_columns=switchboard_dataset["train"].column_names
+)
+
+def is_valid(example):
+    return (
+        example["input_text"] is not None
+        and example["target_text"] is not None
+        and example["input_text"].strip() != ""
+        and example["target_text"].strip() != ""
+    )
+
+dataset = dataset.filter(is_valid)
+
+encoding_max_length = 256
+decoding_max_length = 256
+
+def tokenize(sentences):
+    inputs = ["clean speech: " + text for text in sentences["input_text"]]
+
+    model_inputs = tokenizer(inputs, max_length=encoding_max_length, truncation=True, padding="max_length")
+    labels = tokenizer(
+        sentences["target_text"],
+        max_length=decoding_max_length,
+        truncation=True,
+        padding="max_length"
+    )
+    model_inputs["labels"] = labels["input_ids"]
+    return model_inputs
+
+tokenized_dataset = dataset.map(
+    tokenize,batched=True,remove_columns=dataset["train"].column_names
+)
+
+data_collator = DataCollatorForSeq2Seq(tokenizer, model=transformer_model)
+
+def compute_metrics(eval_pred):
+    predictions, labels = eval_pred
+    decoded_preds = tokenizer.batch_decode(predictions, skip_special_tokens=True)
+    labels = [[label if label != -100 else tokenizer.pad_token_id for label in l] for l in labels]
+    decoded_labels = tokenizer.batch_decode(labels, skip_special_tokens=True)
+
+    decoded_preds = [pred.strip() for pred in decoded_preds]
+    decoded_labels = [label.strip() for label in decoded_labels]
+
+    bleu_result = bleu.compute(predictions=decoded_preds, references=decoded_labels)
+    rouge_result = rouge.compute(predictions=decoded_preds, references=decoded_labels)
+
+    return {
+        "bleu": bleu_result["bleu"],
+        "rouge1": rouge_result["rouge1"],
+        "rouge2": rouge_result["rouge2"],
+        "rougeL": rouge_result["rougeL"]
+    }
+
+training_args = Seq2SeqTrainingArguments(
+    output_dir="./speechCleaner_t5_model",
+    eval_strategy="epoch",
+    save_strategy="epoch",
+    learning_rate=3e-5,
+    per_device_train_batch_size=8,
+    per_device_eval_batch_size=8,
+    num_train_epochs=5,
+    weight_decay=0.01,
+    logging_steps=100,
+    save_total_limit=2,
+    fp16=True,  # Set to True if you have a compatible GPU
+    report_to="mlflow",
+    predict_with_generate=True
+)
+
+trainer = Seq2SeqTrainer(
+    model=transformer_model,
+    args=training_args,
+    train_dataset=tokenized_dataset["train"],
+    eval_dataset=tokenized_dataset["validation"],
+    data_collator=data_collator,
+    compute_metrics=compute_metrics
+)
+
+mlflow.set_tracking_uri("file:./mlruns")
+mlflow.set_experiment("speechCleaner_t5_model")
+with mlflow.start_run():
+    trainer.train()
+    trainer.save_model("./SpeechCleaner_t5_model")
+    tokenizer.save_pretrained("./SpeechCleaner_t5_model")
+
+
+# Test the trained model on some example sentences
+def clean_text(text: str) -> str:
+    inputs = tokenizer("clean speech: " + text, return_tensors="pt", truncation=True).input_ids.to(transformer_model.device)
+    outputs = transformer_model.generate(inputs, max_length=decoding_max_length, num_beams=4, early_stopping=True)
+    cleaned_text = tokenizer.decode(outputs[0], skip_special_tokens=True)
+    return cleaned_text
+
+print(clean_text("Yeah uh I I don't work but I used to work when I had two children"))
+print(clean_text("I want to go to the store um to buy some groceries"))
+print(clean_text("So uh the meeting is scheduled for uh next Monday at 10 am"))

src/sign_app/seed_signs.py

@@ -0,0 +1,316 @@
+"""
+Seed MongoDB with ASL sign rules, fingerspelling, handshapes, locations, and movements.
+
+Usage:
+    uv run python -m src.sign_app.seed_signs
+"""
+
+import os
+from dotenv import load_dotenv
+from pymongo import MongoClient
+
+load_dotenv()
+
+MONGODB_URI = os.getenv("MONGODB_URI", "mongodb://localhost:27017/")
+
+client = MongoClient(MONGODB_URI)
+db = client["SignApp"]
+
+
+# ═══════════════════════════════════════════════════════════
+# SIGN RULES — 60+ common ASL signs
+# ═══════════════════════════════════════════════════════════
+
+SIGN_RULES = [
+    # Greetings & Social
+    {"sign": "HELLO",      "handshape": "B",    "location": "forehead",      "movement": "wave"},
+    {"sign": "BYE",        "handshape": "OPEN", "location": "neutral_space", "movement": "wave"},
+    {"sign": "THANK-YOU",  "handshape": "FLAT", "location": "chin",          "movement": "forward"},
+    {"sign": "PLEASE",     "handshape": "FLAT", "location": "chest",         "movement": "circle_clockwise"},
+    {"sign": "SORRY",      "handshape": "S",    "location": "chest",         "movement": "circle_clockwise"},
+    {"sign": "YES",        "handshape": "S",    "location": "neutral_space", "movement": "nod"},
+    {"sign": "NO",         "handshape": "POINT","location": "neutral_space", "movement": "side_to_side"},
+    {"sign": "OK",         "handshape": "O",    "location": "neutral_space", "movement": "none"},
+    {"sign": "EXCUSE",     "handshape": "FLAT", "location": "chest",         "movement": "forward"},
+
+    # Pronouns
+    {"sign": "I",          "handshape": "POINT","location": "chest",         "movement": "touch"},
+    {"sign": "YOU",        "handshape": "POINT","location": "neutral_space", "movement": "forward"},
+    {"sign": "HE",         "handshape": "POINT","location": "side",          "movement": "forward"},
+    {"sign": "SHE",        "handshape": "POINT","location": "side",          "movement": "forward"},
+    {"sign": "WE",         "handshape": "POINT","location": "shoulder",      "movement": "circle_clockwise"},
+    {"sign": "THEY",       "handshape": "POINT","location": "neutral_space", "movement": "side_to_side"},
+    {"sign": "MY",         "handshape": "FLAT", "location": "chest",         "movement": "tap"},
+    {"sign": "YOUR",       "handshape": "FLAT", "location": "neutral_space", "movement": "forward"},
+
+    # Common Verbs
+    {"sign": "KNOW",       "handshape": "B",    "location": "temple",        "movement": "tap"},
+    {"sign": "THINK",      "handshape": "POINT","location": "forehead",      "movement": "tap"},
+    {"sign": "WANT",       "handshape": "CLAW", "location": "neutral_space", "movement": "forward"},
+    {"sign": "NEED",       "handshape": "POINT","location": "neutral_space", "movement": "nod"},
+    {"sign": "LIKE",       "handshape": "OPEN", "location": "chest",         "movement": "forward"},
+    {"sign": "LOVE",       "handshape": "FIST", "location": "chest",         "movement": "tap"},
+    {"sign": "HELP",       "handshape": "A",    "location": "neutral_space", "movement": "up"},
+    {"sign": "SEE",        "handshape": "V",    "location": "nose",          "movement": "forward"},
+    {"sign": "LOOK",       "handshape": "V",    "location": "nose",          "movement": "forward"},
+    {"sign": "HEAR",       "handshape": "POINT","location": "ear",           "movement": "tap"},
+    {"sign": "LISTEN",     "handshape": "C",    "location": "ear",           "movement": "tap"},
+    {"sign": "SAY",        "handshape": "POINT","location": "chin",          "movement": "forward"},
+    {"sign": "TELL",       "handshape": "POINT","location": "chin",          "movement": "forward"},
+    {"sign": "ASK",        "handshape": "POINT","location": "neutral_space", "movement": "forward"},
+    {"sign": "GO",         "handshape": "POINT","location": "neutral_space", "movement": "forward"},
+    {"sign": "COME",       "handshape": "POINT","location": "neutral_space", "movement": "pull_in"},
+    {"sign": "EAT",        "handshape": "FLAT", "location": "mouth",         "movement": "tap"},
+    {"sign": "DRINK",      "handshape": "C",    "location": "mouth",         "movement": "tap"},
+    {"sign": "WORK",       "handshape": "S",    "location": "neutral_space", "movement": "tap"},
+    {"sign": "LEARN",      "handshape": "FLAT", "location": "forehead",      "movement": "tap"},
+    {"sign": "TEACH",      "handshape": "FLAT", "location": "forehead",      "movement": "forward"},
+    {"sign": "UNDERSTAND", "handshape": "S",    "location": "temple",        "movement": "tap"},
+    {"sign": "FEEL",       "handshape": "OPEN", "location": "chest",         "movement": "up"},
+    {"sign": "GIVE",       "handshape": "FLAT", "location": "neutral_space", "movement": "forward"},
+    {"sign": "TAKE",       "handshape": "CLAW", "location": "neutral_space", "movement": "forward"},
+    {"sign": "MAKE",       "handshape": "S",    "location": "neutral_space", "movement": "twist"},
+    {"sign": "GET",        "handshape": "CLAW", "location": "neutral_space", "movement": "forward"},
+    {"sign": "HAVE",       "handshape": "B",    "location": "chest",         "movement": "tap"},
+    {"sign": "WAIT",       "handshape": "OPEN", "location": "neutral_space", "movement": "none"},
+    {"sign": "STOP",       "handshape": "FLAT", "location": "neutral_space", "movement": "down"},
+    {"sign": "START",      "handshape": "POINT","location": "neutral_space", "movement": "twist"},
+    {"sign": "FINISH",     "handshape": "OPEN", "location": "neutral_space", "movement": "down"},
+    {"sign": "TRY",        "handshape": "S",    "location": "neutral_space", "movement": "forward"},
+    {"sign": "WALK",       "handshape": "FLAT", "location": "neutral_space", "movement": "forward"},
+    {"sign": "SIT",        "handshape": "H",    "location": "neutral_space", "movement": "down"},
+    {"sign": "STAND",      "handshape": "V",    "location": "neutral_space", "movement": "none"},
+    {"sign": "SIGN",       "handshape": "POINT","location": "neutral_space", "movement": "circle_clockwise"},
+    {"sign": "WATCH",      "handshape": "V",    "location": "nose",          "movement": "forward"},
+    {"sign": "OPEN",       "handshape": "B",    "location": "neutral_space", "movement": "side_to_side"},
+    {"sign": "CLOSE",      "handshape": "B",    "location": "neutral_space", "movement": "forward"},
+    {"sign": "BUY",        "handshape": "FLAT", "location": "neutral_space", "movement": "forward"},
+    {"sign": "READ",       "handshape": "V",    "location": "neutral_space", "movement": "down"},
+    {"sign": "WRITE",      "handshape": "POINT","location": "neutral_space", "movement": "down"},
+
+    # Question Words
+    {"sign": "WHAT",       "handshape": "OPEN", "location": "neutral_space", "movement": "side_to_side"},
+    {"sign": "WHERE",      "handshape": "POINT","location": "neutral_space", "movement": "side_to_side"},
+    {"sign": "WHEN",       "handshape": "POINT","location": "neutral_space", "movement": "circle_clockwise"},
+    {"sign": "WHY",        "handshape": "Y",    "location": "forehead",      "movement": "forward"},
+    {"sign": "HOW",        "handshape": "FIST", "location": "neutral_space", "movement": "twist"},
+    {"sign": "WHO",        "handshape": "L",    "location": "chin",          "movement": "tap"},
+
+    # Nouns
+    {"sign": "PERSON",     "handshape": "FLAT", "location": "neutral_space", "movement": "down"},
+    {"sign": "PEOPLE",     "handshape": "P",    "location": "neutral_space", "movement": "circle_clockwise"},
+    {"sign": "FRIEND",     "handshape": "X",    "location": "neutral_space", "movement": "twist"},
+    {"sign": "FAMILY",     "handshape": "F",    "location": "neutral_space", "movement": "circle_clockwise"},
+    {"sign": "MOTHER",     "handshape": "OPEN", "location": "chin",          "movement": "tap"},
+    {"sign": "FATHER",     "handshape": "OPEN", "location": "forehead",      "movement": "tap"},
+    {"sign": "NAME",       "handshape": "H",    "location": "neutral_space", "movement": "tap"},
+    {"sign": "HOME",       "handshape": "FLAT", "location": "chin",          "movement": "tap"},
+    {"sign": "SCHOOL",     "handshape": "FLAT", "location": "neutral_space", "movement": "double_tap"},
+    {"sign": "FOOD",       "handshape": "FLAT", "location": "mouth",         "movement": "tap"},
+    {"sign": "WATER",      "handshape": "W",    "location": "chin",          "movement": "tap"},
+    {"sign": "MONEY",      "handshape": "FLAT", "location": "neutral_space", "movement": "tap"},
+    {"sign": "TIME",       "handshape": "POINT","location": "neutral_space", "movement": "tap"},
+    {"sign": "DAY",        "handshape": "D",    "location": "neutral_space", "movement": "down"},
+    {"sign": "TODAY",      "handshape": "FLAT", "location": "neutral_space", "movement": "down"},
+    {"sign": "TOMORROW",   "handshape": "A",    "location": "chin",          "movement": "forward"},
+    {"sign": "YESTERDAY",  "handshape": "A",    "location": "chin",          "movement": "tap"},
+    {"sign": "MORNING",    "handshape": "FLAT", "location": "neutral_space", "movement": "up"},
+    {"sign": "NIGHT",      "handshape": "FLAT", "location": "neutral_space", "movement": "down"},
+    {"sign": "STORE",      "handshape": "FLAT", "location": "neutral_space", "movement": "twist"},
+
+    # Adjectives
+    {"sign": "GOOD",       "handshape": "FLAT", "location": "chin",          "movement": "forward"},
+    {"sign": "BAD",        "handshape": "FLAT", "location": "chin",          "movement": "down"},
+    {"sign": "HAPPY",      "handshape": "FLAT", "location": "chest",         "movement": "circle_clockwise"},
+    {"sign": "SAD",        "handshape": "OPEN", "location": "chin",          "movement": "down"},
+    {"sign": "BIG",        "handshape": "OPEN", "location": "neutral_space", "movement": "side_to_side"},
+    {"sign": "SMALL",      "handshape": "FLAT", "location": "neutral_space", "movement": "tap"},
+    {"sign": "BEAUTIFUL",  "handshape": "OPEN", "location": "chin",          "movement": "circle_clockwise"},
+    {"sign": "EASY",       "handshape": "FLAT", "location": "neutral_space", "movement": "up"},
+    {"sign": "HARD",       "handshape": "V",    "location": "neutral_space", "movement": "tap"},
+    {"sign": "HOT",        "handshape": "CLAW", "location": "mouth",         "movement": "forward"},
+    {"sign": "COLD",       "handshape": "S",    "location": "neutral_space", "movement": "side_to_side"},
+    {"sign": "NEW",        "handshape": "FLAT", "location": "neutral_space", "movement": "forward"},
+    {"sign": "OLD",        "handshape": "C",    "location": "chin",          "movement": "down"},
+    {"sign": "NICE",       "handshape": "FLAT", "location": "neutral_space", "movement": "forward"},
+    {"sign": "FINE",       "handshape": "OPEN", "location": "chest",         "movement": "tap"},
+    {"sign": "DIFFERENT",  "handshape": "POINT","location": "neutral_space", "movement": "side_to_side"},
+    {"sign": "SAME",       "handshape": "POINT","location": "neutral_space", "movement": "tap"},
+    {"sign": "TRUE",       "handshape": "POINT","location": "chin",          "movement": "forward"},
+    {"sign": "WRONG",      "handshape": "Y",    "location": "chin",          "movement": "tap"},
+    {"sign": "IMPORTANT",  "handshape": "F",    "location": "neutral_space", "movement": "up"},
+    {"sign": "READY",      "handshape": "R",    "location": "neutral_space", "movement": "side_to_side"},
+    {"sign": "DEAF",       "handshape": "POINT","location": "ear",           "movement": "forward"},
+    {"sign": "HUNGRY",     "handshape": "C",    "location": "chest",         "movement": "down"},
+
+    # Adverbs / Misc
+    {"sign": "NOT",        "handshape": "A",    "location": "chin",          "movement": "forward"},
+    {"sign": "NEVER",      "handshape": "B",    "location": "neutral_space", "movement": "down"},
+    {"sign": "ALWAYS",     "handshape": "POINT","location": "neutral_space", "movement": "circle_clockwise"},
+    {"sign": "SOMETIMES",  "handshape": "FLAT", "location": "neutral_space", "movement": "tap"},
+    {"sign": "AGAIN",      "handshape": "FLAT", "location": "neutral_space", "movement": "tap"},
+    {"sign": "MORE",       "handshape": "FLAT", "location": "neutral_space", "movement": "tap"},
+    {"sign": "ALSO",       "handshape": "POINT","location": "neutral_space", "movement": "tap"},
+    {"sign": "NOW",        "handshape": "FLAT", "location": "neutral_space", "movement": "down"},
+    {"sign": "LATER",      "handshape": "L",    "location": "neutral_space", "movement": "forward"},
+    {"sign": "HERE",       "handshape": "FLAT", "location": "neutral_space", "movement": "circle_clockwise"},
+    {"sign": "THERE",      "handshape": "POINT","location": "neutral_space", "movement": "forward"},
+    {"sign": "MAYBE",      "handshape": "FLAT", "location": "neutral_space", "movement": "side_to_side"},
+    {"sign": "BECAUSE",    "handshape": "POINT","location": "forehead",      "movement": "forward"},
+    {"sign": "BUT",        "handshape": "POINT","location": "neutral_space", "movement": "side_to_side"},
+    {"sign": "AND",        "handshape": "OPEN", "location": "neutral_space", "movement": "forward"},
+    {"sign": "WITH",       "handshape": "A",    "location": "neutral_space", "movement": "tap"},
+    {"sign": "FOR",        "handshape": "POINT","location": "forehead",      "movement": "forward"},
+    {"sign": "FROM",       "handshape": "X",    "location": "neutral_space", "movement": "forward"},
+    {"sign": "ABOUT",      "handshape": "POINT","location": "neutral_space", "movement": "circle_clockwise"},
+    {"sign": "MANY",       "handshape": "S",    "location": "neutral_space", "movement": "forward"},
+    {"sign": "ALL",        "handshape": "OPEN", "location": "neutral_space", "movement": "circle_clockwise"},
+    {"sign": "EVERY",      "handshape": "A",    "location": "neutral_space", "movement": "down"},
+    {"sign": "ENOUGH",     "handshape": "FLAT", "location": "neutral_space", "movement": "forward"},
+]
+
+
+# ═══════════════════════════════════════════════════════════
+# FINGERSPELLING
+# ═══════════════════════════════════════════════════════════
+
+FINGERSPELLING = [
+    {"letter": "A", "handshape": "A", "movement": "none"},
+    {"letter": "B", "handshape": "B", "movement": "none"},
+    {"letter": "C", "handshape": "C", "movement": "none"},
+    {"letter": "D", "handshape": "D", "movement": "none"},
+    {"letter": "E", "handshape": "E", "movement": "none"},
+    {"letter": "F", "handshape": "F", "movement": "none"},
+    {"letter": "G", "handshape": "G", "movement": "none"},
+    {"letter": "H", "handshape": "H", "movement": "none"},
+    {"letter": "I", "handshape": "I", "movement": "none"},
+    {"letter": "J", "handshape": "J", "movement": "circle_clockwise"},
+    {"letter": "K", "handshape": "K", "movement": "none"},
+    {"letter": "L", "handshape": "L", "movement": "none"},
+    {"letter": "M", "handshape": "M", "movement": "none"},
+    {"letter": "N", "handshape": "N", "movement": "none"},
+    {"letter": "O", "handshape": "O", "movement": "none"},
+    {"letter": "P", "handshape": "P", "movement": "none"},
+    {"letter": "Q", "handshape": "Q", "movement": "none"},
+    {"letter": "R", "handshape": "R", "movement": "none"},
+    {"letter": "S", "handshape": "S", "movement": "none"},
+    {"letter": "T", "handshape": "T", "movement": "none"},
+    {"letter": "U", "handshape": "U", "movement": "none"},
+    {"letter": "V", "handshape": "V", "movement": "none"},
+    {"letter": "W", "handshape": "W", "movement": "none"},
+    {"letter": "X", "handshape": "X", "movement": "none"},
+    {"letter": "Y", "handshape": "Y", "movement": "none"},
+    {"letter": "Z", "handshape": "Z", "movement": "forward"},
+]
+
+
+# ═══════════════════════════════════════════════════════════
+# HANDSHAPES
+# ═══════════════════════════════════════════════════════════
+
+HANDSHAPES = [
+    {"name": "A"},
+    {"name": "B"},
+    {"name": "C"},
+    {"name": "D"},
+    {"name": "E"},
+    {"name": "F"},
+    {"name": "G"},
+    {"name": "H"},
+    {"name": "I"},
+    {"name": "K"},
+    {"name": "L"},
+    {"name": "O"},
+    {"name": "P"},
+    {"name": "R"},
+    {"name": "S"},
+    {"name": "V"},
+    {"name": "W"},
+    {"name": "X"},
+    {"name": "Y"},
+    {"name": "OPEN"},
+    {"name": "FIST"},
+    {"name": "POINT"},
+    {"name": "FLAT"},
+    {"name": "CLAW"},
+]
+
+
+# ═══════════════════════════════════════════════════════════
+# LOCATIONS
+# ═══════════════════════════════════════════════════════════
+
+LOCATIONS = [
+    {"name": "neutral_space"},
+    {"name": "chest"},
+    {"name": "chin"},
+    {"name": "mouth"},
+    {"name": "nose"},
+    {"name": "forehead"},
+    {"name": "temple"},
+    {"name": "side"},
+    {"name": "shoulder"},
+    {"name": "ear"},
+    {"name": "waist"},
+]
+
+
+# ═══════════════════════════════════════════════════════════
+# MOVEMENTS
+# ═══════════════════════════════════════════════════════════
+
+MOVEMENTS = [
+    {"name": "none"},
+    {"name": "tap"},
+    {"name": "double_tap"},
+    {"name": "circle_clockwise"},
+    {"name": "circle_counterclockwise"},
+    {"name": "forward"},
+    {"name": "down"},
+    {"name": "up"},
+    {"name": "side_to_side"},
+    {"name": "nod"},
+    {"name": "twist"},
+    {"name": "wave"},
+]
+
+
+def seed():
+    """Seed all collections. Uses upsert to avoid duplicates."""
+    print("Seeding SignApp database...")
+
+    # Sign rules
+    col = db["sign_rules"]
+    for rule in SIGN_RULES:
+        col.update_one({"sign": rule["sign"]}, {"$set": rule}, upsert=True)
+    print(f"  ✓ sign_rules: {len(SIGN_RULES)} signs")
+
+    # Fingerspelling
+    col = db["fingerspelling"]
+    for fs in FINGERSPELLING:
+        col.update_one({"letter": fs["letter"]}, {"$set": fs}, upsert=True)
+    print(f"  ✓ fingerspelling: {len(FINGERSPELLING)} letters")
+
+    # Handshapes
+    col = db["handshapes"]
+    for hs in HANDSHAPES:
+        col.update_one({"name": hs["name"]}, {"$set": hs}, upsert=True)
+    print(f"  ✓ handshapes: {len(HANDSHAPES)} shapes")
+
+    # Locations
+    col = db["locations"]
+    for loc in LOCATIONS:
+        col.update_one({"name": loc["name"]}, {"$set": loc}, upsert=True)
+    print(f"  ✓ locations: {len(LOCATIONS)} locations")
+
+    # Movements
+    col = db["movements"]
+    for mov in MOVEMENTS:
+        col.update_one({"name": mov["name"]}, {"$set": mov}, upsert=True)
+    print(f"  ✓ movements: {len(MOVEMENTS)} movements")
+
+    print("\n✅ Database seeded successfully!")
+
+
+if __name__ == "__main__":
+    seed()

src/sign_app/sign_language_text/__init__.py

@@ -0,0 +1 @@
+"""Conversion of text to sign-friendly format."""

src/sign_app/sign_language_text/gloss_converter.py

@@ -0,0 +1,501 @@
+"""
+Hybrid English → ASL Gloss Converter
+
+Combines three strategies for accurate gloss generation:
+  1. Rule-based grammar transforms (drop articles/copulas, reorder)
+  2. NLTK WordNet lemmatizer for verb/noun normalization
+  3. Comprehensive gloss lookup dictionary for idioms & common phrases
+"""
+
+import re
+import nltk
+from nltk.stem import WordNetLemmatizer
+
+# Download required NLTK data (only once)
+try:
+    nltk.data.find("corpora/wordnet")
+except LookupError:
+    nltk.download("wordnet", quiet=True)
+try:
+    nltk.data.find("taggers/averaged_perceptron_tagger_eng")
+except LookupError:
+    nltk.download("averaged_perceptron_tagger_eng", quiet=True)
+try:
+    nltk.data.find("corpora/omw-1.4")
+except LookupError:
+    nltk.download("omw-1.4", quiet=True)
+
+_lemmatizer = WordNetLemmatizer()
+
+# ── Words to drop (ASL omits these) ────────────────────────────────
+ARTICLES = {"a", "an", "the"}
+COPULAS = {"is", "am", "are", "was", "were", "be", "been", "being"}
+AUXILIARIES = {"do", "does", "did", "will", "would", "shall", "should",
+               "can", "could", "may", "might", "must", "has", "have", "had"}
+PREPOSITIONS_DROP = {"to", "of"}  # commonly dropped in ASL
+FILLER_WORDS = {"just", "really", "very", "so", "um", "uh", "like",
+                "well", "actually", "basically", "literally"}
+
+DROP_WORDS = ARTICLES | COPULAS | FILLER_WORDS
+
+# ── Phrase-level gloss dictionary (multi-word → single sign) ───────
+PHRASE_GLOSSARY: dict[str, str] = {
+    "thank you": "THANK-YOU",
+    "thanks": "THANK-YOU",
+    "how are you": "HOW YOU",
+    "what's up": "WHAT-UP",
+    "good morning": "GOOD MORNING",
+    "good night": "GOOD NIGHT",
+    "good afternoon": "GOOD AFTERNOON",
+    "excuse me": "EXCUSE",
+    "i'm sorry": "SORRY",
+    "i am sorry": "SORRY",
+    "a lot": "MANY",
+    "don't": "NOT",
+    "doesn't": "NOT",
+    "didn't": "NOT",
+    "can't": "CAN NOT",
+    "cannot": "CAN NOT",
+    "won't": "WILL NOT",
+    "wouldn't": "WILL NOT",
+    "shouldn't": "SHOULD NOT",
+    "couldn't": "CAN NOT",
+    "isn't": "NOT",
+    "aren't": "NOT",
+    "wasn't": "NOT",
+    "weren't": "NOT",
+    "i'm": "I",
+    "i am": "I",
+    "you're": "YOU",
+    "you are": "YOU",
+    "he's": "HE",
+    "she's": "SHE",
+    "it's": "IT",
+    "we're": "WE",
+    "they're": "THEY",
+    "there is": "HAVE",
+    "there are": "HAVE",
+    "right now": "NOW",
+    "a little": "LITTLE",
+    "a bit": "LITTLE",
+    "of course": "OF-COURSE",
+    "no problem": "NO-PROBLEM",
+    "long time": "LONG-TIME",
+    "how much": "HOW-MUCH",
+    "how many": "HOW-MANY",
+}
+
+# ── Word-level synonym/mapping dictionary ──────────────────────────
+WORD_GLOSSARY: dict[str, str] = {
+    # Greetings
+    "hello": "HELLO",
+    "hi": "HELLO",
+    "hey": "HELLO",
+    "goodbye": "BYE",
+    "bye": "BYE",
+
+    # Pronouns (pass-through but normalize)
+    "i": "I",
+    "me": "I",
+    "my": "MY",
+    "mine": "MY",
+    "you": "YOU",
+    "your": "YOUR",
+    "yours": "YOUR",
+    "he": "HE",
+    "him": "HE",
+    "his": "HIS",
+    "she": "SHE",
+    "her": "SHE",
+    "hers": "HER",
+    "it": "IT",
+    "its": "IT",
+    "we": "WE",
+    "us": "WE",
+    "our": "OUR",
+    "they": "THEY",
+    "them": "THEY",
+    "their": "THEIR",
+
+    # Common verbs (map to ASL base forms)
+    "want": "WANT",
+    "wants": "WANT",
+    "wanted": "WANT",
+    "wanting": "WANT",
+    "need": "NEED",
+    "needs": "NEED",
+    "needed": "NEED",
+    "like": "LIKE",
+    "likes": "LIKE",
+    "liked": "LIKE",
+    "love": "LOVE",
+    "loves": "LOVE",
+    "loved": "LOVE",
+    "know": "KNOW",
+    "knows": "KNOW",
+    "knew": "KNOW",
+    "known": "KNOW",
+    "think": "THINK",
+    "thinks": "THINK",
+    "thought": "THINK",
+    "see": "SEE",
+    "sees": "SEE",
+    "saw": "SEE",
+    "seen": "SEE",
+    "help": "HELP",
+    "helps": "HELP",
+    "helped": "HELP",
+    "go": "GO",
+    "goes": "GO",
+    "going": "GO",
+    "went": "GO",
+    "gone": "GO",
+    "come": "COME",
+    "comes": "COME",
+    "came": "COME",
+    "eat": "EAT",
+    "eats": "EAT",
+    "ate": "EAT",
+    "eaten": "EAT",
+    "drink": "DRINK",
+    "drinks": "DRINK",
+    "drank": "DRINK",
+    "work": "WORK",
+    "works": "WORK",
+    "worked": "WORK",
+    "working": "WORK",
+    "live": "LIVE",
+    "lives": "LIVE",
+    "lived": "LIVE",
+    "feel": "FEEL",
+    "feels": "FEEL",
+    "felt": "FEEL",
+    "say": "SAY",
+    "says": "SAY",
+    "said": "SAY",
+    "tell": "TELL",
+    "tells": "TELL",
+    "told": "TELL",
+    "ask": "ASK",
+    "asks": "ASK",
+    "asked": "ASK",
+    "give": "GIVE",
+    "gives": "GIVE",
+    "gave": "GIVE",
+    "given": "GIVE",
+    "take": "TAKE",
+    "takes": "TAKE",
+    "took": "TAKE",
+    "taken": "TAKE",
+    "make": "MAKE",
+    "makes": "MAKE",
+    "made": "MAKE",
+    "get": "GET",
+    "gets": "GET",
+    "got": "GET",
+    "wait": "WAIT",
+    "waits": "WAIT",
+    "waited": "WAIT",
+    "learn": "LEARN",
+    "learns": "LEARN",
+    "learned": "LEARN",
+    "teach": "TEACH",
+    "teaches": "TEACH",
+    "taught": "TEACH",
+    "understand": "UNDERSTAND",
+    "understands": "UNDERSTAND",
+    "understood": "UNDERSTAND",
+    "finish": "FINISH",
+    "finished": "FINISH",
+    "start": "START",
+    "started": "START",
+    "stop": "STOP",
+    "stopped": "STOP",
+    "try": "TRY",
+    "tries": "TRY",
+    "tried": "TRY",
+    "call": "CALL",
+    "called": "CALL",
+    "play": "PLAY",
+    "played": "PLAY",
+    "run": "RUN",
+    "ran": "RUN",
+    "walk": "WALK",
+    "walked": "WALK",
+    "sit": "SIT",
+    "sat": "SIT",
+    "stand": "STAND",
+    "stood": "STAND",
+    "open": "OPEN",
+    "opened": "OPEN",
+    "close": "CLOSE",
+    "closed": "CLOSE",
+    "buy": "BUY",
+    "bought": "BUY",
+    "bring": "BRING",
+    "brought": "BRING",
+    "read": "READ",
+    "write": "WRITE",
+    "wrote": "WRITE",
+    "written": "WRITE",
+    "speak": "SPEAK",
+    "spoke": "SPEAK",
+    "sign": "SIGN",
+    "signed": "SIGN",
+    "watch": "WATCH",
+    "look": "LOOK",
+    "looked": "LOOK",
+    "listen": "LISTEN",
+
+    # Question words
+    "what": "WHAT",
+    "where": "WHERE",
+    "when": "WHEN",
+    "why": "WHY",
+    "how": "HOW",
+    "who": "WHO",
+    "which": "WHICH",
+
+    # Common nouns
+    "person": "PERSON",
+    "people": "PEOPLE",
+    "man": "MAN",
+    "woman": "WOMAN",
+    "boy": "BOY",
+    "girl": "GIRL",
+    "child": "CHILD",
+    "children": "CHILD",
+    "baby": "BABY",
+    "friend": "FRIEND",
+    "friends": "FRIEND",
+    "family": "FAMILY",
+    "mother": "MOTHER",
+    "mom": "MOTHER",
+    "father": "FATHER",
+    "dad": "FATHER",
+    "brother": "BROTHER",
+    "sister": "SISTER",
+    "dog": "DOG",
+    "cat": "CAT",
+    "house": "HOUSE",
+    "home": "HOME",
+    "school": "SCHOOL",
+    "food": "FOOD",
+    "water": "WATER",
+    "car": "CAR",
+    "book": "BOOK",
+    "phone": "PHONE",
+    "name": "NAME",
+    "day": "DAY",
+    "today": "TODAY",
+    "tomorrow": "TOMORROW",
+    "yesterday": "YESTERDAY",
+    "morning": "MORNING",
+    "night": "NIGHT",
+    "time": "TIME",
+    "world": "WORLD",
+    "year": "YEAR",
+    "money": "MONEY",
+    "job": "WORK",
+    "store": "STORE",
+    "door": "DOOR",
+    "place": "PLACE",
+    "city": "CITY",
+    "country": "COUNTRY",
+    "weather": "WEATHER",
+
+    # Adjectives
+    "good": "GOOD",
+    "bad": "BAD",
+    "nice": "NICE",
+    "happy": "HAPPY",
+    "sad": "SAD",
+    "angry": "ANGRY",
+    "tired": "TIRED",
+    "sick": "SICK",
+    "big": "BIG",
+    "small": "SMALL",
+    "little": "SMALL",
+    "new": "NEW",
+    "old": "OLD",
+    "young": "YOUNG",
+    "beautiful": "BEAUTIFUL",
+    "pretty": "BEAUTIFUL",
+    "ugly": "UGLY",
+    "easy": "EASY",
+    "hard": "HARD",
+    "difficult": "HARD",
+    "fast": "FAST",
+    "quick": "FAST",
+    "slow": "SLOW",
+    "hot": "HOT",
+    "cold": "COLD",
+    "hungry": "HUNGRY",
+    "thirsty": "THIRSTY",
+    "important": "IMPORTANT",
+    "right": "RIGHT",
+    "wrong": "WRONG",
+    "same": "SAME",
+    "different": "DIFFERENT",
+    "ready": "READY",
+    "true": "TRUE",
+    "correct": "TRUE",
+    "deaf": "DEAF",
+
+    # Adverbs / misc
+    "yes": "YES",
+    "no": "NO",
+    "not": "NOT",
+    "never": "NEVER",
+    "always": "ALWAYS",
+    "sometimes": "SOMETIMES",
+    "often": "OFTEN",
+    "again": "AGAIN",
+    "more": "MORE",
+    "also": "ALSO",
+    "too": "ALSO",
+    "please": "PLEASE",
+    "sorry": "SORRY",
+    "now": "NOW",
+    "later": "LATER",
+    "here": "HERE",
+    "there": "THERE",
+    "maybe": "MAYBE",
+    "ok": "OK",
+    "okay": "OK",
+    "sure": "YES",
+    "fine": "FINE",
+    "together": "TOGETHER",
+    "before": "BEFORE",
+    "after": "AFTER",
+    "because": "BECAUSE",
+    "but": "BUT",
+    "and": "AND",
+    "or": "OR",
+    "if": "IF",
+    "then": "THEN",
+    "with": "WITH",
+    "for": "FOR",
+    "from": "FROM",
+    "in": "IN",
+    "at": "AT",
+    "on": "ON",
+    "about": "ABOUT",
+    "every": "EVERY",
+    "all": "ALL",
+    "many": "MANY",
+    "some": "SOME",
+    "enough": "ENOUGH",
+    "each": "EACH",
+}
+
+
+def _pos_tag_to_wordnet(tag: str) -> str:
+    """Map NLTK POS tag to WordNet POS for the lemmatizer."""
+    if tag.startswith("V"):
+        return "v"
+    if tag.startswith("N"):
+        return "n"
+    if tag.startswith("J"):
+        return "a"
+    if tag.startswith("R"):
+        return "r"
+    return "n"  # default noun
+
+
+def convert_to_sign_gloss(text: str) -> list[str]:
+    """
+    Convert English text to ASL gloss tokens.
+
+    Pipeline:
+      1. Lowercase & strip punctuation
+      2. Match multi-word phrases from PHRASE_GLOSSARY
+      3. For remaining words: lookup in WORD_GLOSSARY
+      4. If not in glossary: lemmatize with NLTK and try again
+      5. If still unknown: pass through as uppercase (will be fingerspelled)
+      6. Drop filler/grammar words that ASL omits
+    """
+    # Normalize
+    text = text.lower().strip()
+    text = re.sub(r"[''']", "'", text)        # normalize apostrophes
+    text = re.sub(r"[^\w\s'-]", " ", text)    # strip punctuation except apostrophes/hyphens
+    text = re.sub(r"\s+", " ", text).strip()
+
+    # ── Phase 1: Multi-word phrase matching ────────────────────────
+    # Replace known phrases with their gloss (longest match first)
+    for phrase in sorted(PHRASE_GLOSSARY, key=len, reverse=True):
+        if phrase in text:
+            replacement = PHRASE_GLOSSARY[phrase]
+            text = text.replace(phrase, f" {replacement} ")
+            text = re.sub(r"\s+", " ", text).strip()
+
+    tokens = text.split()
+
+    # ── Phase 2: Word-level processing ─────────────────────────────
+    # POS-tag for better lemmatization
+    tagged = nltk.pos_tag(tokens)
+
+    gloss_tokens: list[str] = []
+
+    for word, tag in tagged:
+        # Already converted by phrase matching (uppercase)
+        if word.isupper() or "-" in word and word == word.upper():
+            # Split multi-token gloss results
+            for part in word.split():
+                gloss_tokens.append(part)
+            continue
+
+        # Skip drop words
+        if word in DROP_WORDS:
+            continue
+
+        # Skip auxiliaries (ASL mostly drops these)
+        if word in AUXILIARIES:
+            continue
+
+        # Skip prepositions that ASL drops
+        if word in PREPOSITIONS_DROP:
+            continue
+
+        # Direct glossary lookup
+        if word in WORD_GLOSSARY:
+            gloss_tokens.append(WORD_GLOSSARY[word])
+            continue
+
+        # Try lemmatization then glossary
+        wn_pos = _pos_tag_to_wordnet(tag)
+        lemma = _lemmatizer.lemmatize(word, pos=wn_pos)
+
+        if lemma in WORD_GLOSSARY:
+            gloss_tokens.append(WORD_GLOSSARY[lemma])
+            continue
+
+        # Try verb lemmatization specifically (catches "going" -> "go")
+        verb_lemma = _lemmatizer.lemmatize(word, pos="v")
+        if verb_lemma in WORD_GLOSSARY:
+            gloss_tokens.append(WORD_GLOSSARY[verb_lemma])
+            continue
+
+        # Unknown word — pass through uppercase (will be fingerspelled)
+        gloss_tokens.append(word.upper())
+
+    return gloss_tokens
+
+
+# ── Test ───────────────────────────────────────────────────────────
+if __name__ == "__main__":
+    tests = [
+        "Hello, I know you are a good person.",
+        "I want to go to the store",
+        "She is going to the park later",
+        "Can you help me with this?",
+        "The weather is nice today",
+        "Thank you for your help",
+        "I don't understand",
+        "What is your name?",
+        "How are you?",
+        "I'm sorry, I can't come tomorrow",
+    ]
+    for t in tests:
+        result = convert_to_sign_gloss(t)
+        print(f"{t:45s} → {' '.join(result)}")

src/sign_app/sign_language_text/inference.py

@@ -0,0 +1,58 @@
+import re
+import torch
+from transformers import T5ForConditionalGeneration, T5Tokenizer
+
+MODEL_PATH = "./sign_language_converter_model"
+
+# Load tokenizer & model
+tokenizer = T5Tokenizer.from_pretrained(MODEL_PATH)
+model = T5ForConditionalGeneration.from_pretrained(MODEL_PATH)
+
+device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
+model.to(device)
+model.eval()
+
+def convert_to_sign_friendly(text: str) -> list[str]:
+    inputs = tokenizer(
+        "convert to sign-friendly: " + text,
+        return_tensors="pt",
+        truncation=True,
+        padding=True
+    ).to(device)
+
+    with torch.no_grad():
+        outputs = model.generate(
+            **inputs,
+            max_length=256,
+            num_beams=4,
+            early_stopping=True
+        )
+    sign_friendly_text = tokenizer.decode(outputs[0], skip_special_tokens=True)
+    sign_friendly_text = clean_gloss(sign_friendly_text)
+
+    return sign_friendly_text
+
+def clean_gloss(gloss: str) -> list[str]:
+    words = gloss.split()
+
+    cleaned = []
+    for w in words:
+        
+        w = re.sub(r"[,.!]", "", w)
+
+        if w.startswith("X-"):
+            w = w.replace("X-", "")
+        if w.startswith("DESC-"):
+            w = w.replace("DESC-", "")
+
+        cleaned.append(w)
+
+    return cleaned
+
+# Test the conversion on some example sentences
+if __name__ == "__main__":
+    text = "I want to go to the store"
+    print(convert_to_sign_friendly(text))
+    print(convert_to_sign_friendly("She is going to the park later"))
+    print(convert_to_sign_friendly("Can you help me with this?"))
+    print(convert_to_sign_friendly("The weather is nice today"))

src/sign_app/sign_language_text/training.py

@@ -0,0 +1,127 @@
+from datasets import load_dataset
+from transformers import T5Tokenizer, T5ForConditionalGeneration, Seq2SeqTrainer, Seq2SeqTrainingArguments, DataCollatorForSeq2Seq
+import mlflow
+import evaluate
+import nltk
+
+nltk.download('punkt')
+bleu = evaluate.load("bleu")
+rouge = evaluate.load("rouge")
+
+base_model = "t5-small"
+
+tokenizer = T5Tokenizer.from_pretrained(base_model)
+transformer_model = T5ForConditionalGeneration.from_pretrained(base_model)
+
+sign_language_conversion_dataset = load_dataset("achrafothman/aslg_pc12")
+
+sign_language_conversion_dataset = load_dataset("achrafothman/aslg_pc12")
+
+# Split 90% train, 10% validation
+sign_language_conversion_dataset = sign_language_conversion_dataset["train"].train_test_split(test_size=0.1)
+
+
+def sign_friendly_mapping(example):
+    return {
+        "input_text": example["text"],
+        "target_text": example["gloss"]
+    }
+
+Dataset = sign_language_conversion_dataset.map(
+    sign_friendly_mapping,
+    remove_columns=sign_language_conversion_dataset["train"].column_names
+)
+
+def is_valid(example):
+    return (
+        example["input_text"] is not None
+        and example["target_text"] is not None
+        and example["input_text"].strip() != ""
+        and example["target_text"].strip() != ""
+    )
+
+Dataset = Dataset.filter(is_valid)
+
+max_input_length = 256
+max_target_length = 256
+
+def tokenize_function(examples):
+    inputs = ["convert to sign-friendly: " + text for text in examples["input_text"]]
+    model_inputs = tokenizer(inputs, max_length=max_input_length, truncation=True, padding="max_length")
+    labels = tokenizer(
+        examples["target_text"],
+        max_length=max_target_length,
+        truncation=True,
+        padding="max_length"
+    )
+    model_inputs["labels"] = labels["input_ids"]
+    return model_inputs
+
+tokenized_dataset = Dataset.map(
+    tokenize_function, batched=True, remove_columns=Dataset["train"].column_names
+)
+
+data_collator = DataCollatorForSeq2Seq(tokenizer, model=transformer_model)
+
+def compute_metrics(eval_pred):
+    predictions, labels = eval_pred
+    decoded_preds = tokenizer.batch_decode(predictions, skip_special_tokens=True)
+    labels = [[label if label != -100 else tokenizer.pad_token_id for label in l] for l in labels]
+    decoded_labels = tokenizer.batch_decode(labels, skip_special_tokens=True)
+
+    decoded_preds = [pred.strip() for pred in decoded_preds]
+    decoded_labels = [label.strip() for label in decoded_labels]
+
+    bleu_result = bleu.compute(predictions=decoded_preds, references=decoded_labels)
+    rouge_result = rouge.compute(predictions=decoded_preds, references=decoded_labels)
+
+    return {
+        "bleu": bleu_result["bleu"],
+        "rouge1": rouge_result["rouge1"],
+        "rouge2": rouge_result["rouge2"],
+        "rougeL": rouge_result["rougeL"]
+    }
+
+training_args = Seq2SeqTrainingArguments(
+    output_dir="./sign_language_converter_model",
+    eval_strategy="epoch",
+    save_strategy="epoch",
+    learning_rate=3e-5,
+    per_device_train_batch_size=8,
+    per_device_eval_batch_size=8,
+    num_train_epochs=5,
+    weight_decay=0.01,
+    predict_with_generate=True,
+    save_total_limit=2,
+    logging_steps=100,
+    fp16=True, # set to True if using a GPU with mixed precision support
+    report_to="mlflow",
+)
+
+trainer = Seq2SeqTrainer(
+    model=transformer_model,
+    args=training_args,
+    train_dataset=tokenized_dataset["train"],
+    eval_dataset=tokenized_dataset["test"],
+    data_collator=data_collator,
+    compute_metrics=compute_metrics
+)
+
+mlflow.set_tracking_uri("./mlruns")
+mlflow.set_experiment("Sign Language Text Conversion")
+with mlflow.start_run(run_name="T5 Sign Language Converter"):
+    trainer.train()
+    trainer.save_model("./sign_language_converter_model")
+    tokenizer.save_pretrained("./sign_language_converter_model")
+
+# Test the trained model on some example sentences
+def convert_to_sign_friendly(text: str) -> str:
+    inputs = tokenizer("convert to sign-friendly: " + text, return_tensors="pt", truncation=True).input_ids.to(transformer_model.device)
+    outputs = transformer_model.generate(inputs, max_length=max_target_length, num_beams=4, early_stopping=True)
+    sign_friendly_text = tokenizer.decode(outputs[0], skip_special_tokens=True)
+    return sign_friendly_text.strip()
+
+if __name__ == "__main__":
+    test_sentence = "I want to go to the store"
+    print("Original:", test_sentence)
+    print("Sign-friendly:", convert_to_sign_friendly(test_sentence))

src/sign_app/ui/__init__.py

@@ -0,0 +1 @@
+"""UI and API interfaces module."""

src/sign_app/ui/avatar.glb

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

src/sign_app/ui/fingerspellDictionary.js

@@ -0,0 +1,323 @@
+/**
+ * ASL Fingerspelling Dictionary
+ *
+ * Each letter maps to rotations for ALL finger bones (3 knuckles each)
+ * plus thumb (3 joints) and optional wrist rotation.
+ *
+ * Values are in radians:
+ *   0    = straight / open
+ *   1.2  = fully curled
+ *   0.6  = half curled
+ *
+ * Thumb uses both X (curl) and Z (spread/opposition) axes.
+ */
+export const FINGERSPELL = {
+
+  A: {
+    thumb1: { x: 0.2, y: 0, z: 0.3 },
+    thumb2: { x: 0.1, y: 0, z: 0 },
+    thumb3: { x: 0, y: 0, z: 0 },
+    index1: { x: 1.2, y: 0, z: 0 }, index2: { x: 1.2, y: 0, z: 0 }, index3: { x: 1.0, y: 0, z: 0 },
+    middle1: { x: 1.2, y: 0, z: 0 }, middle2: { x: 1.2, y: 0, z: 0 }, middle3: { x: 1.0, y: 0, z: 0 },
+    ring1: { x: 1.2, y: 0, z: 0 }, ring2: { x: 1.2, y: 0, z: 0 }, ring3: { x: 1.0, y: 0, z: 0 },
+    pinky1: { x: 1.2, y: 0, z: 0 }, pinky2: { x: 1.2, y: 0, z: 0 }, pinky3: { x: 1.0, y: 0, z: 0 },
+    wrist: { x: 0, y: 0, z: 0 }
+  },
+
+  B: {
+    thumb1: { x: 0.8, y: 0, z: 0.4 },
+    thumb2: { x: 0.6, y: 0, z: 0 },
+    thumb3: { x: 0.3, y: 0, z: 0 },
+    index1: { x: 0, y: 0, z: 0 }, index2: { x: 0, y: 0, z: 0 }, index3: { x: 0, y: 0, z: 0 },
+    middle1: { x: 0, y: 0, z: 0 }, middle2: { x: 0, y: 0, z: 0 }, middle3: { x: 0, y: 0, z: 0 },
+    ring1: { x: 0, y: 0, z: 0 }, ring2: { x: 0, y: 0, z: 0 }, ring3: { x: 0, y: 0, z: 0 },
+    pinky1: { x: 0, y: 0, z: 0 }, pinky2: { x: 0, y: 0, z: 0 }, pinky3: { x: 0, y: 0, z: 0 },
+    wrist: { x: 0, y: 0, z: 0 }
+  },
+
+  C: {
+    thumb1: { x: 0.3, y: 0, z: 0.2 },
+    thumb2: { x: 0.3, y: 0, z: 0 },
+    thumb3: { x: 0.2, y: 0, z: 0 },
+    index1: { x: 0.5, y: 0, z: 0 }, index2: { x: 0.4, y: 0, z: 0 }, index3: { x: 0.3, y: 0, z: 0 },
+    middle1: { x: 0.5, y: 0, z: 0 }, middle2: { x: 0.4, y: 0, z: 0 }, middle3: { x: 0.3, y: 0, z: 0 },
+    ring1: { x: 0.5, y: 0, z: 0 }, ring2: { x: 0.4, y: 0, z: 0 }, ring3: { x: 0.3, y: 0, z: 0 },
+    pinky1: { x: 0.5, y: 0, z: 0 }, pinky2: { x: 0.4, y: 0, z: 0 }, pinky3: { x: 0.3, y: 0, z: 0 },
+    wrist: { x: 0, y: 0, z: 0 }
+  },
+
+  D: {
+    thumb1: { x: 0.6, y: 0, z: 0.4 },
+    thumb2: { x: 0.5, y: 0, z: 0 },
+    thumb3: { x: 0.3, y: 0, z: 0 },
+    index1: { x: 0, y: 0, z: 0 }, index2: { x: 0, y: 0, z: 0 }, index3: { x: 0, y: 0, z: 0 },
+    middle1: { x: 1.2, y: 0, z: 0 }, middle2: { x: 1.0, y: 0, z: 0 }, middle3: { x: 0.8, y: 0, z: 0 },
+    ring1: { x: 1.2, y: 0, z: 0 }, ring2: { x: 1.0, y: 0, z: 0 }, ring3: { x: 0.8, y: 0, z: 0 },
+    pinky1: { x: 1.2, y: 0, z: 0 }, pinky2: { x: 1.0, y: 0, z: 0 }, pinky3: { x: 0.8, y: 0, z: 0 },
+    wrist: { x: 0, y: 0, z: 0 }
+  },
+
+  E: {
+    thumb1: { x: 0.3, y: 0, z: 0.3 },
+    thumb2: { x: 0.2, y: 0, z: 0 },
+    thumb3: { x: 0.1, y: 0, z: 0 },
+    index1: { x: 1.0, y: 0, z: 0 }, index2: { x: 0.8, y: 0, z: 0 }, index3: { x: 0.6, y: 0, z: 0 },
+    middle1: { x: 1.0, y: 0, z: 0 }, middle2: { x: 0.8, y: 0, z: 0 }, middle3: { x: 0.6, y: 0, z: 0 },
+    ring1: { x: 1.0, y: 0, z: 0 }, ring2: { x: 0.8, y: 0, z: 0 }, ring3: { x: 0.6, y: 0, z: 0 },
+    pinky1: { x: 1.0, y: 0, z: 0 }, pinky2: { x: 0.8, y: 0, z: 0 }, pinky3: { x: 0.6, y: 0, z: 0 },
+    wrist: { x: 0, y: 0, z: 0 }
+  },
+
+  F: {
+    thumb1: { x: 0.6, y: 0, z: 0.3 },
+    thumb2: { x: 0.5, y: 0, z: 0 },
+    thumb3: { x: 0.3, y: 0, z: 0 },
+    index1: { x: 0.8, y: 0, z: 0 }, index2: { x: 0.6, y: 0, z: 0 }, index3: { x: 0.4, y: 0, z: 0 },
+    middle1: { x: 0, y: 0, z: 0 }, middle2: { x: 0, y: 0, z: 0 }, middle3: { x: 0, y: 0, z: 0 },
+    ring1: { x: 0, y: 0, z: 0 }, ring2: { x: 0, y: 0, z: 0 }, ring3: { x: 0, y: 0, z: 0 },
+    pinky1: { x: 0, y: 0, z: 0 }, pinky2: { x: 0, y: 0, z: 0 }, pinky3: { x: 0, y: 0, z: 0 },
+    wrist: { x: 0, y: 0, z: 0 }
+  },
+
+  G: {
+    thumb1: { x: 0.2, y: 0, z: -0.4 },
+    thumb2: { x: 0.1, y: 0, z: 0 },
+    thumb3: { x: 0, y: 0, z: 0 },
+    index1: { x: 0, y: 0, z: 0 }, index2: { x: 0, y: 0, z: 0 }, index3: { x: 0, y: 0, z: 0 },
+    middle1: { x: 1.2, y: 0, z: 0 }, middle2: { x: 1.0, y: 0, z: 0 }, middle3: { x: 0.8, y: 0, z: 0 },
+    ring1: { x: 1.2, y: 0, z: 0 }, ring2: { x: 1.0, y: 0, z: 0 }, ring3: { x: 0.8, y: 0, z: 0 },
+    pinky1: { x: 1.2, y: 0, z: 0 }, pinky2: { x: 1.0, y: 0, z: 0 }, pinky3: { x: 0.8, y: 0, z: 0 },
+    wrist: { x: 0, y: -0.5, z: 0 }
+  },
+
+  H: {
+    thumb1: { x: 0.3, y: 0, z: 0.3 },
+    thumb2: { x: 0.2, y: 0, z: 0 },
+    thumb3: { x: 0.1, y: 0, z: 0 },
+    index1: { x: 0, y: 0, z: 0 }, index2: { x: 0, y: 0, z: 0 }, index3: { x: 0, y: 0, z: 0 },
+    middle1: { x: 0, y: 0, z: 0 }, middle2: { x: 0, y: 0, z: 0 }, middle3: { x: 0, y: 0, z: 0 },
+    ring1: { x: 1.2, y: 0, z: 0 }, ring2: { x: 1.0, y: 0, z: 0 }, ring3: { x: 0.8, y: 0, z: 0 },
+    pinky1: { x: 1.2, y: 0, z: 0 }, pinky2: { x: 1.0, y: 0, z: 0 }, pinky3: { x: 0.8, y: 0, z: 0 },
+    wrist: { x: 0, y: -0.5, z: 0 }
+  },
+
+  I: {
+    thumb1: { x: 0.6, y: 0, z: 0.3 },
+    thumb2: { x: 0.5, y: 0, z: 0 },
+    thumb3: { x: 0.3, y: 0, z: 0 },
+    index1: { x: 1.2, y: 0, z: 0 }, index2: { x: 1.0, y: 0, z: 0 }, index3: { x: 0.8, y: 0, z: 0 },
+    middle1: { x: 1.2, y: 0, z: 0 }, middle2: { x: 1.0, y: 0, z: 0 }, middle3: { x: 0.8, y: 0, z: 0 },
+    ring1: { x: 1.2, y: 0, z: 0 }, ring2: { x: 1.0, y: 0, z: 0 }, ring3: { x: 0.8, y: 0, z: 0 },
+    pinky1: { x: 0, y: 0, z: 0 }, pinky2: { x: 0, y: 0, z: 0 }, pinky3: { x: 0, y: 0, z: 0 },
+    wrist: { x: 0, y: 0, z: 0 }
+  },
+
+  J: {
+    thumb1: { x: 0.6, y: 0, z: 0.3 },
+    thumb2: { x: 0.5, y: 0, z: 0 },
+    thumb3: { x: 0.3, y: 0, z: 0 },
+    index1: { x: 1.2, y: 0, z: 0 }, index2: { x: 1.0, y: 0, z: 0 }, index3: { x: 0.8, y: 0, z: 0 },
+    middle1: { x: 1.2, y: 0, z: 0 }, middle2: { x: 1.0, y: 0, z: 0 }, middle3: { x: 0.8, y: 0, z: 0 },
+    ring1: { x: 1.2, y: 0, z: 0 }, ring2: { x: 1.0, y: 0, z: 0 }, ring3: { x: 0.8, y: 0, z: 0 },
+    pinky1: { x: 0, y: 0, z: 0 }, pinky2: { x: 0, y: 0, z: 0 }, pinky3: { x: 0, y: 0, z: 0 },
+    wrist: { x: 0, y: 0.6, z: 0 }  // J = I + wrist hook
+  },
+
+  K: {
+    thumb1: { x: 0.3, y: 0, z: 0.2 },
+    thumb2: { x: 0.2, y: 0, z: 0 },
+    thumb3: { x: 0.1, y: 0, z: 0 },
+    index1: { x: 0, y: 0, z: 0 }, index2: { x: 0, y: 0, z: 0 }, index3: { x: 0, y: 0, z: 0 },
+    middle1: { x: 0, y: 0, z: 0 }, middle2: { x: 0, y: 0, z: 0 }, middle3: { x: 0, y: 0, z: 0 },
+    ring1: { x: 1.2, y: 0, z: 0 }, ring2: { x: 1.0, y: 0, z: 0 }, ring3: { x: 0.8, y: 0, z: 0 },
+    pinky1: { x: 1.2, y: 0, z: 0 }, pinky2: { x: 1.0, y: 0, z: 0 }, pinky3: { x: 0.8, y: 0, z: 0 },
+    wrist: { x: 0, y: 0, z: 0 }
+  },
+
+  L: {
+    thumb1: { x: 0, y: 0, z: -0.6 },
+    thumb2: { x: 0, y: 0, z: 0 },
+    thumb3: { x: 0, y: 0, z: 0 },
+    index1: { x: 0, y: 0, z: 0 }, index2: { x: 0, y: 0, z: 0 }, index3: { x: 0, y: 0, z: 0 },
+    middle1: { x: 1.2, y: 0, z: 0 }, middle2: { x: 1.0, y: 0, z: 0 }, middle3: { x: 0.8, y: 0, z: 0 },
+    ring1: { x: 1.2, y: 0, z: 0 }, ring2: { x: 1.0, y: 0, z: 0 }, ring3: { x: 0.8, y: 0, z: 0 },
+    pinky1: { x: 1.2, y: 0, z: 0 }, pinky2: { x: 1.0, y: 0, z: 0 }, pinky3: { x: 0.8, y: 0, z: 0 },
+    wrist: { x: 0, y: 0, z: 0 }
+  },
+
+  M: {
+    thumb1: { x: 0.6, y: 0, z: 0.4 },
+    thumb2: { x: 0.5, y: 0, z: 0 },
+    thumb3: { x: 0.3, y: 0, z: 0 },
+    index1: { x: 1.2, y: 0, z: 0 }, index2: { x: 1.0, y: 0, z: 0 }, index3: { x: 0.8, y: 0, z: 0 },
+    middle1: { x: 1.2, y: 0, z: 0 }, middle2: { x: 1.0, y: 0, z: 0 }, middle3: { x: 0.8, y: 0, z: 0 },
+    ring1: { x: 1.2, y: 0, z: 0 }, ring2: { x: 1.0, y: 0, z: 0 }, ring3: { x: 0.8, y: 0, z: 0 },
+    pinky1: { x: 1.2, y: 0, z: 0 }, pinky2: { x: 1.0, y: 0, z: 0 }, pinky3: { x: 0.8, y: 0, z: 0 },
+    wrist: { x: 0, y: 0, z: 0 }
+  },
+
+  N: {
+    thumb1: { x: 0.6, y: 0, z: 0.4 },
+    thumb2: { x: 0.5, y: 0, z: 0 },
+    thumb3: { x: 0.3, y: 0, z: 0 },
+    index1: { x: 1.2, y: 0, z: 0 }, index2: { x: 1.0, y: 0, z: 0 }, index3: { x: 0.8, y: 0, z: 0 },
+    middle1: { x: 1.2, y: 0, z: 0 }, middle2: { x: 1.0, y: 0, z: 0 }, middle3: { x: 0.8, y: 0, z: 0 },
+    ring1: { x: 1.2, y: 0, z: 0 }, ring2: { x: 1.0, y: 0, z: 0 }, ring3: { x: 0.8, y: 0, z: 0 },
+    pinky1: { x: 1.2, y: 0, z: 0 }, pinky2: { x: 1.0, y: 0, z: 0 }, pinky3: { x: 0.8, y: 0, z: 0 },
+    wrist: { x: 0, y: 0, z: 0 }
+  },
+
+  O: {
+    thumb1: { x: 0.4, y: 0, z: 0.3 },
+    thumb2: { x: 0.3, y: 0, z: 0 },
+    thumb3: { x: 0.2, y: 0, z: 0 },
+    index1: { x: 0.6, y: 0, z: 0 }, index2: { x: 0.5, y: 0, z: 0 }, index3: { x: 0.4, y: 0, z: 0 },
+    middle1: { x: 0.6, y: 0, z: 0 }, middle2: { x: 0.5, y: 0, z: 0 }, middle3: { x: 0.4, y: 0, z: 0 },
+    ring1: { x: 0.6, y: 0, z: 0 }, ring2: { x: 0.5, y: 0, z: 0 }, ring3: { x: 0.4, y: 0, z: 0 },
+    pinky1: { x: 0.6, y: 0, z: 0 }, pinky2: { x: 0.5, y: 0, z: 0 }, pinky3: { x: 0.4, y: 0, z: 0 },
+    wrist: { x: 0, y: 0, z: 0 }
+  },
+
+  P: {
+    thumb1: { x: 0.2, y: 0, z: -0.3 },
+    thumb2: { x: 0.1, y: 0, z: 0 },
+    thumb3: { x: 0, y: 0, z: 0 },
+    index1: { x: 0, y: 0, z: 0 }, index2: { x: 0, y: 0, z: 0 }, index3: { x: 0, y: 0, z: 0 },
+    middle1: { x: 0.4, y: 0, z: 0 }, middle2: { x: 0.3, y: 0, z: 0 }, middle3: { x: 0.2, y: 0, z: 0 },
+    ring1: { x: 1.2, y: 0, z: 0 }, ring2: { x: 1.0, y: 0, z: 0 }, ring3: { x: 0.8, y: 0, z: 0 },
+    pinky1: { x: 1.2, y: 0, z: 0 }, pinky2: { x: 1.0, y: 0, z: 0 }, pinky3: { x: 0.8, y: 0, z: 0 },
+    wrist: { x: 0.5, y: 0, z: 0 }  // hand tilted down
+  },
+
+  Q: {
+    thumb1: { x: 0.3, y: 0, z: -0.3 },
+    thumb2: { x: 0.2, y: 0, z: 0 },
+    thumb3: { x: 0.1, y: 0, z: 0 },
+    index1: { x: 0.4, y: 0, z: 0 }, index2: { x: 0.3, y: 0, z: 0 }, index3: { x: 0.2, y: 0, z: 0 },
+    middle1: { x: 1.2, y: 0, z: 0 }, middle2: { x: 1.0, y: 0, z: 0 }, middle3: { x: 0.8, y: 0, z: 0 },
+    ring1: { x: 1.2, y: 0, z: 0 }, ring2: { x: 1.0, y: 0, z: 0 }, ring3: { x: 0.8, y: 0, z: 0 },
+    pinky1: { x: 1.2, y: 0, z: 0 }, pinky2: { x: 1.0, y: 0, z: 0 }, pinky3: { x: 0.8, y: 0, z: 0 },
+    wrist: { x: 0.5, y: 0, z: 0 }
+  },
+
+  R: {
+    thumb1: { x: 0.6, y: 0, z: 0.3 },
+    thumb2: { x: 0.5, y: 0, z: 0 },
+    thumb3: { x: 0.3, y: 0, z: 0 },
+    index1: { x: 0, y: 0, z: -0.1 }, index2: { x: 0, y: 0, z: 0 }, index3: { x: 0, y: 0, z: 0 },
+    middle1: { x: 0.1, y: 0, z: 0.2 }, middle2: { x: 0.2, y: 0, z: 0 }, middle3: { x: 0.1, y: 0, z: 0 },
+    ring1: { x: 1.5, y: 0, z: 0 }, ring2: { x: 1.2, y: 0, z: 0 }, ring3: { x: 1.0, y: 0, z: 0 },
+    pinky1: { x: 1.5, y: 0, z: 0 }, pinky2: { x: 1.2, y: 0, z: 0 }, pinky3: { x: 1.0, y: 0, z: 0 },
+    wrist: { x: 0, y: 0, z: 0 }
+  },
+
+  S: {
+    thumb1: { x: 0.3, y: 0, z: 0.3 },
+    thumb2: { x: 0.2, y: 0, z: 0 },
+    thumb3: { x: 0.1, y: 0, z: 0 },
+    index1: { x: 1.2, y: 0, z: 0 }, index2: { x: 1.2, y: 0, z: 0 }, index3: { x: 1.0, y: 0, z: 0 },
+    middle1: { x: 1.2, y: 0, z: 0 }, middle2: { x: 1.2, y: 0, z: 0 }, middle3: { x: 1.0, y: 0, z: 0 },
+    ring1: { x: 1.2, y: 0, z: 0 }, ring2: { x: 1.2, y: 0, z: 0 }, ring3: { x: 1.0, y: 0, z: 0 },
+    pinky1: { x: 1.2, y: 0, z: 0 }, pinky2: { x: 1.2, y: 0, z: 0 }, pinky3: { x: 1.0, y: 0, z: 0 },
+    wrist: { x: 0, y: 0, z: 0 }
+  },
+
+  T: {
+    thumb1: { x: 0.2, y: 0, z: 0.2 },
+    thumb2: { x: 0.2, y: 0, z: 0 },
+    thumb3: { x: 0.1, y: 0, z: 0 },
+    index1: { x: 1.2, y: 0, z: 0 }, index2: { x: 1.0, y: 0, z: 0 }, index3: { x: 0.8, y: 0, z: 0 },
+    middle1: { x: 1.2, y: 0, z: 0 }, middle2: { x: 1.0, y: 0, z: 0 }, middle3: { x: 0.8, y: 0, z: 0 },
+    ring1: { x: 1.2, y: 0, z: 0 }, ring2: { x: 1.0, y: 0, z: 0 }, ring3: { x: 0.8, y: 0, z: 0 },
+    pinky1: { x: 1.2, y: 0, z: 0 }, pinky2: { x: 1.0, y: 0, z: 0 }, pinky3: { x: 0.8, y: 0, z: 0 },
+    wrist: { x: 0, y: 0, z: 0 }
+  },
+
+  U: {
+    thumb1: { x: 0.6, y: 0, z: 0.3 },
+    thumb2: { x: 0.5, y: 0, z: 0 },
+    thumb3: { x: 0.3, y: 0, z: 0 },
+    index1: { x: 0, y: 0, z: 0 }, index2: { x: 0, y: 0, z: 0 }, index3: { x: 0, y: 0, z: 0 },
+    middle1: { x: 0, y: 0, z: 0 }, middle2: { x: 0, y: 0, z: 0 }, middle3: { x: 0, y: 0, z: 0 },
+    ring1: { x: 1.2, y: 0, z: 0 }, ring2: { x: 1.0, y: 0, z: 0 }, ring3: { x: 0.8, y: 0, z: 0 },
+    pinky1: { x: 1.2, y: 0, z: 0 }, pinky2: { x: 1.0, y: 0, z: 0 }, pinky3: { x: 0.8, y: 0, z: 0 },
+    wrist: { x: 0, y: 0, z: 0 }
+  },
+
+  V: {
+    thumb1: { x: 0.6, y: 0, z: 0.3 },
+    thumb2: { x: 0.5, y: 0, z: 0 },
+    thumb3: { x: 0.3, y: 0, z: 0 },
+    index1: { x: 0, y: 0, z: -0.15 }, index2: { x: 0, y: 0, z: 0 }, index3: { x: 0, y: 0, z: 0 },
+    middle1: { x: 0, y: 0, z: 0.15 }, middle2: { x: 0, y: 0, z: 0 }, middle3: { x: 0, y: 0, z: 0 },
+    ring1: { x: 1.2, y: 0, z: 0 }, ring2: { x: 1.0, y: 0, z: 0 }, ring3: { x: 0.8, y: 0, z: 0 },
+    pinky1: { x: 1.2, y: 0, z: 0 }, pinky2: { x: 1.0, y: 0, z: 0 }, pinky3: { x: 0.8, y: 0, z: 0 },
+    wrist: { x: 0, y: 0, z: 0 }
+  },
+
+  W: {
+    thumb1: { x: 0.6, y: 0, z: 0.4 },
+    thumb2: { x: 0.5, y: 0, z: 0 },
+    thumb3: { x: 0.3, y: 0, z: 0 },
+    index1: { x: 0, y: 0, z: -0.15 }, index2: { x: 0, y: 0, z: 0 }, index3: { x: 0, y: 0, z: 0 },
+    middle1: { x: 0, y: 0, z: 0 }, middle2: { x: 0, y: 0, z: 0 }, middle3: { x: 0, y: 0, z: 0 },
+    ring1: { x: 0, y: 0, z: 0.15 }, ring2: { x: 0, y: 0, z: 0 }, ring3: { x: 0, y: 0, z: 0 },
+    pinky1: { x: 1.2, y: 0, z: 0 }, pinky2: { x: 1.0, y: 0, z: 0 }, pinky3: { x: 0.8, y: 0, z: 0 },
+    wrist: { x: 0, y: 0, z: 0 }
+  },
+
+  X: {
+    thumb1: { x: 0.6, y: 0, z: 0.3 },
+    thumb2: { x: 0.5, y: 0, z: 0 },
+    thumb3: { x: 0.3, y: 0, z: 0 },
+    index1: { x: 0.6, y: 0, z: 0 }, index2: { x: 0.8, y: 0, z: 0 }, index3: { x: 0.6, y: 0, z: 0 },
+    middle1: { x: 1.2, y: 0, z: 0 }, middle2: { x: 1.0, y: 0, z: 0 }, middle3: { x: 0.8, y: 0, z: 0 },
+    ring1: { x: 1.2, y: 0, z: 0 }, ring2: { x: 1.0, y: 0, z: 0 }, ring3: { x: 0.8, y: 0, z: 0 },
+    pinky1: { x: 1.2, y: 0, z: 0 }, pinky2: { x: 1.0, y: 0, z: 0 }, pinky3: { x: 0.8, y: 0, z: 0 },
+    wrist: { x: 0, y: 0, z: 0 }
+  },
+
+  Y: {
+    thumb1: { x: 0, y: 0, z: -0.5 },
+    thumb2: { x: 0, y: 0, z: 0 },
+    thumb3: { x: 0, y: 0, z: 0 },
+    index1: { x: 1.2, y: 0, z: 0 }, index2: { x: 1.0, y: 0, z: 0 }, index3: { x: 0.8, y: 0, z: 0 },
+    middle1: { x: 1.2, y: 0, z: 0 }, middle2: { x: 1.0, y: 0, z: 0 }, middle3: { x: 0.8, y: 0, z: 0 },
+    ring1: { x: 1.2, y: 0, z: 0 }, ring2: { x: 1.0, y: 0, z: 0 }, ring3: { x: 0.8, y: 0, z: 0 },
+    pinky1: { x: 0, y: 0, z: 0 }, pinky2: { x: 0, y: 0, z: 0 }, pinky3: { x: 0, y: 0, z: 0 },
+    wrist: { x: 0, y: 0, z: 0 }
+  },
+
+  Z: {
+    thumb1: { x: 0.6, y: 0, z: 0.3 },
+    thumb2: { x: 0.5, y: 0, z: 0 },
+    thumb3: { x: 0.3, y: 0, z: 0 },
+    index1: { x: 0, y: 0, z: 0 }, index2: { x: 0, y: 0, z: 0 }, index3: { x: 0, y: 0, z: 0 },
+    middle1: { x: 1.2, y: 0, z: 0 }, middle2: { x: 1.0, y: 0, z: 0 }, middle3: { x: 0.8, y: 0, z: 0 },
+    ring1: { x: 1.2, y: 0, z: 0 }, ring2: { x: 1.0, y: 0, z: 0 }, ring3: { x: 0.8, y: 0, z: 0 },
+    pinky1: { x: 1.2, y: 0, z: 0 }, pinky2: { x: 1.0, y: 0, z: 0 }, pinky3: { x: 0.8, y: 0, z: 0 },
+    wrist: { x: 0, y: 0.4, z: 0 }  // Z = index point + wrist trace
+  }
+}
+
+/**
+ * Maps short key names to actual avatar bone names
+ */
+export const FINGER_BONE_MAP = {
+  thumb1: "RightHandThumb1",
+  thumb2: "RightHandThumb2",
+  thumb3: "RightHandThumb3",
+  index1: "RightHandIndex1",
+  index2: "RightHandIndex2",
+  index3: "RightHandIndex3",
+  middle1: "RightHandMiddle1",
+  middle2: "RightHandMiddle2",
+  middle3: "RightHandMiddle3",
+  ring1: "RightHandRing1",
+  ring2: "RightHandRing2",
+  ring3: "RightHandRing3",
+  pinky1: "RightHandPinky1",
+  pinky2: "RightHandPinky2",
+  pinky3: "RightHandPinky3",
+  wrist: "RightHand"
+}

src/sign_app/ui/index.html

@@ -0,0 +1,511 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>SignApp - Speech to Sign Language</title>
+  <meta name="description" content="Real-time speech to sign language avatar powered by AI">
+
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+
+  <script type="importmap">
+  {
+    "imports": {
+      "three": "https://unpkg.com/three@0.158.0/build/three.module.js",
+      "three/addons/": "https://unpkg.com/three@0.158.0/examples/jsm/"
+    }
+  }
+  </script>
+
+  <style>
+    
+    :root {
+      --bg-color-top: #0c0a1a;
+      --bg-color-mid: #1a1333;
+      --bg-color-bot: #0d1b2a;
+      --text-main: #e2e8f0;
+      --text-main-muted: #cbd5e1;
+      --text-muted: #64748b;
+      --topbar-bg: rgba(12,10,26,0.9);
+      --bottom-panel-bg1: rgba(12,10,26,0.85);
+      --bottom-panel-bg2: rgba(12,10,26,0.4);
+      --chip-bg: rgba(255,255,255,0.06);
+      --chip-border: rgba(255,255,255,0.08);
+      --input-bg: rgba(255,255,255,0.05);
+      --input-border: rgba(255,255,255,0.1);
+      --input-focus: rgba(167,139,250,0.4);
+      --accent-color: #a78bfa;
+      --accent-hover: rgba(167,139,250,0.3);
+      --btn-bg: rgba(167,139,250,0.2);
+      --btn-border: rgba(167,139,250,0.3);
+      --btn-text: #c4b5fd;
+      --btn-hover-bg: rgba(167,139,250,0.3);
+      --btn-hover-text: #fff;
+      --btn-sec-bg: rgba(255,255,255,0.05);
+      --btn-sec-border: rgba(255,255,255,0.1);
+      --btn-sec-hover-bg: rgba(255,255,255,0.1);
+      --btn-sec-hover-border: rgba(255,255,255,0.2);
+      --btn-sec-text: #94a3b8;
+      --btn-sec-hover-text: #fff;
+      --status-dot-processing: #f59e0b;
+      --gloss-token-bg: rgba(167,139,250,0.15);
+      --gloss-token-border: rgba(167,139,250,0.25);
+      --gloss-token-text: #c4b5fd;
+      --gloss-token-active-bg: rgba(167,139,250,0.35);
+      --gloss-token-active-border: #a78bfa;
+      --gloss-token-active-text: #fff;
+    }
+    .light-mode {
+      --bg-color-top: #f8fafc;
+      --bg-color-mid: #e2e8f0;
+      --bg-color-bot: #cbd5e1;
+      --text-main: #1e293b;
+      --text-main-muted: #334155;
+      --text-muted: #475569;
+      --topbar-bg: rgba(248, 250, 252, 0.9);
+      --bottom-panel-bg1: rgba(248, 250, 252, 0.95);
+      --bottom-panel-bg2: rgba(248, 250, 252, 0.6);
+      --chip-bg: rgba(0,0,0,0.05);
+      --chip-border: rgba(0,0,0,0.1);
+      --input-bg: rgba(0,0,0,0.05);
+      --input-border: rgba(0,0,0,0.1);
+      --input-focus: rgba(124,58,237,0.4);
+      --accent-color: #7c3aed;
+      --accent-hover: rgba(124, 58, 237, 0.15);
+      --btn-bg: rgba(124, 58, 237, 0.1);
+      --btn-border: rgba(124, 58, 237, 0.2);
+      --btn-text: #6d28d9;
+      --btn-hover-bg: rgba(124, 58, 237, 0.2);
+      --btn-hover-text: #1e293b;
+      --btn-sec-bg: rgba(0,0,0,0.05);
+      --btn-sec-border: rgba(0,0,0,0.1);
+      --btn-sec-hover-bg: rgba(0,0,0,0.1);
+      --btn-sec-hover-border: rgba(0,0,0,0.2);
+      --btn-sec-text: #475569;
+      --btn-sec-hover-text: #1e293b;
+      --status-dot-processing: #d97706;
+      --gloss-token-bg: rgba(124, 58, 237, 0.1);
+      --gloss-token-border: rgba(124, 58, 237, 0.2);
+      --gloss-token-text: #6d28d9;
+      --gloss-token-active-bg: rgba(124, 58, 237, 0.25);
+      --gloss-token-active-border: #7c3aed;
+      --gloss-token-active-text: #1e293b;
+    }
+
+    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
+
+    body {
+      font-family: 'Inter', sans-serif;
+      background: linear-gradient(135deg, var(--bg-color-top) 0%, var(--bg-color-mid) 40%, var(--bg-color-bot) 100%);
+      color: var(--text-main);
+      overflow: hidden;
+      height: 100vh;
+      width: 100vw;
+    }
+
+    /* ── 3D Canvas ─────────────────────────────── */
+    #avatar-canvas {
+      position: fixed;
+      top: 0; left: 0;
+      width: 100%; height: 100%;
+      z-index: 0;
+    }
+
+    /* ── Top Bar ───────────────────────────────── */
+    #top-bar {
+      position: fixed;
+      top: 0; left: 0; right: 0;
+      z-index: 20;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 16px 28px;
+      background: linear-gradient(180deg, var(--topbar-bg) 0%, transparent 100%);
+    }
+
+    .logo {
+      font-weight: 700;
+      font-size: 20px;
+      letter-spacing: -0.5px;
+      background: linear-gradient(135deg, #a78bfa, #60a5fa);
+      -webkit-background-clip: text;
+      background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+
+    .status-chip {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 6px 14px;
+      border-radius: 20px;
+      font-size: 13px;
+      font-weight: 500;
+      background: var(--chip-bg);
+      border: 1px solid var(--chip-border);
+      backdrop-filter: blur(10px);
+      transition: all 0.3s ease;
+    }
+
+    .status-dot {
+      width: 8px; height: 8px;
+      border-radius: 50%;
+      background: #4ade80;
+      transition: background 0.3s;
+    }
+
+    .status-dot.recording {
+      background: #ef4444;
+      animation: pulse-dot 1s ease-in-out infinite;
+    }
+
+    .status-dot.processing {
+      background: var(--status-dot-processing);
+      animation: pulse-dot 0.6s ease-in-out infinite;
+    }
+
+    .status-dot.signing {
+      background: var(--accent-color);
+      animation: pulse-dot 1.2s ease-in-out infinite;
+    }
+
+    @keyframes pulse-dot {
+      0%, 100% { opacity: 1; transform: scale(1); }
+      50% { opacity: 0.5; transform: scale(1.3); }
+    }
+
+    /* ── Bottom Panel ──────────────────────────── */
+    #bottom-panel {
+      position: fixed;
+      bottom: 0; left: 0; right: 0;
+      z-index: 20;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 16px;
+      padding: 20px 28px 32px;
+      background: linear-gradient(0deg, var(--bottom-panel-bg1) 0%, var(--bottom-panel-bg2) 70%, transparent 100%);
+      pointer-events: none;
+    }
+
+    #bottom-panel > * {
+      pointer-events: auto;
+    }
+
+
+    /* ── Transcript Area ───────────────────────── */
+    #transcript-area {
+      width: 100%;
+      max-width: 640px;
+      text-align: center;
+      min-height: 50px;
+    }
+
+    .transcript-label {
+      font-size: 11px;
+      text-transform: uppercase;
+      letter-spacing: 1.5px;
+      color: var(--text-muted);
+      margin-bottom: 6px;
+    }
+
+    .transcript-text {
+      font-size: 15px;
+      color: var(--text-main-muted);
+      line-height: 1.5;
+      opacity: 0;
+      transform: translateY(8px);
+      transition: all 0.4s ease;
+    }
+
+    .transcript-text.visible {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    .gloss-tokens {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px;
+      justify-content: center;
+      margin-top: 8px;
+    }
+
+    .gloss-token {
+      padding: 4px 10px;
+      border-radius: 6px;
+      font-size: 13px;
+      font-weight: 600;
+      font-family: 'Inter', monospace;
+      background: var(--gloss-token-bg);
+      border: 1px solid var(--gloss-token-border);
+      color: var(--gloss-token-text);
+      transition: all 0.3s ease;
+    }
+
+    .gloss-token.active {
+      background: var(--gloss-token-active-bg);
+      border-color: var(--gloss-token-active-border);
+      color: #fff;
+      transform: scale(1.08);
+      box-shadow: 0 0 12px rgba(167,139,250,0.3);
+    }
+
+    .gloss-token.done {
+      opacity: 0.4;
+    }
+
+    /* ── Mic Button ────────────────────────────── */
+    #mic-btn {
+      width: 72px; height: 72px;
+      border-radius: 50%;
+      border: none;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: linear-gradient(135deg, #7c3aed, #3b82f6);
+      box-shadow: 0 4px 24px rgba(124,58,237,0.4), 0 0 0 0 rgba(124,58,237,0);
+      transition: all 0.3s ease;
+      position: relative;
+    }
+
+    #mic-btn:hover {
+      transform: scale(1.06);
+      box-shadow: 0 6px 32px rgba(124,58,237,0.5);
+    }
+
+    #mic-btn:active { transform: scale(0.97); }
+
+    #mic-btn.recording {
+      background: linear-gradient(135deg, #ef4444, #dc2626);
+      box-shadow: 0 4px 24px rgba(239,68,68,0.4);
+      animation: pulse-ring 1.5s ease-out infinite;
+    }
+
+    #mic-btn.processing {
+      background: linear-gradient(135deg, #f59e0b, #d97706);
+      pointer-events: none;
+      animation: spin-slow 2s linear infinite;
+    }
+
+    @keyframes pulse-ring {
+      0% { box-shadow: 0 4px 24px rgba(239,68,68,0.4), 0 0 0 0 rgba(239,68,68,0.3); }
+      100% { box-shadow: 0 4px 24px rgba(239,68,68,0.4), 0 0 0 20px rgba(239,68,68,0); }
+    }
+
+    @keyframes spin-slow {
+      from { transform: rotate(0deg); }
+      to { transform: rotate(360deg); }
+    }
+
+    .mic-icon {
+      width: 28px; height: 28px;
+      fill: white;
+    }
+
+    /* ── Audio Waveform Visualizer ──────────────── */
+    #waveform {
+      width: 200px;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 3px;
+      opacity: 0;
+      transition: opacity 0.3s;
+    }
+
+    #waveform.active { opacity: 1; }
+
+    .wave-bar {
+      width: 3px;
+      height: 8px;
+      border-radius: 2px;
+      background: var(--accent-color);
+      transition: height 0.1s ease;
+    }
+
+    /* ── Signing Progress ──────────────────────── */
+    #sign-label {
+      font-size: 13px;
+      color: var(--text-muted);
+      font-weight: 500;
+      opacity: 0;
+      transition: opacity 0.3s;
+    }
+
+    #sign-label.visible { opacity: 1; }
+
+    /* ── Text Input Area ────────────────────────── */
+    #text-input-container {
+      width: 100%;
+      max-width: 500px;
+      display: flex;
+      gap: 10px;
+      padding: 4px;
+      background: var(--input-bg);
+      border: 1px solid var(--input-border);
+      border-radius: 12px;
+      margin-bottom: 8px;
+      transition: all 0.3s ease;
+    }
+
+    #text-input-container:focus-within {
+      background: var(--input-bg);
+      border-color: var(--input-focus);
+      box-shadow: 0 0 15px var(--accent-hover);
+    }
+
+    #text-input {
+      color: var(--text-main);
+      flex: 1;
+      background: transparent;
+      border: none;
+      outline: none;
+      color: #fff;
+      padding: 10px 16px;
+      font-family: inherit;
+      font-size: 14px;
+    }
+
+    #text-input::placeholder { color: var(--text-muted); }
+
+    #send-btn {
+      background: var(--btn-bg);
+      border: 1px solid var(--btn-border);
+      color: var(--gloss-token-text);
+      padding: 0 16px;
+      border-radius: 8px;
+      cursor: pointer;
+      font-size: 13px;
+      font-weight: 600;
+      transition: all 0.2s ease;
+    }
+
+    #send-btn:hover {
+      background: var(--btn-hover-bg);
+      color: #fff;
+    }
+
+    /* ── Controls Layout ────────────────────────── */
+    .controls-row {
+      display: flex;
+      align-items: center;
+      gap: 20px;
+    }
+
+    /* ── Secondary Button (Replay) ──────────────── */
+    .secondary-btn {
+      width: 48px; height: 48px;
+      border-radius: 50%;
+      border: 1px solid var(--input-border);
+      background: var(--input-bg);
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: all 0.3s ease;
+      color: var(--text-muted);
+    }
+
+    .secondary-btn:hover {
+      background: rgba(255,255,255,0.1);
+      border-color: rgba(255,255,255,0.2);
+      color: #fff;
+      transform: translateY(-2px);
+    }
+
+    .secondary-btn:active { transform: translateY(0); }
+
+    .secondary-btn:disabled {
+      opacity: 0.3;
+      cursor: not-allowed;
+      transform: none;
+    }
+
+    .btn-icon { width: 20px; height: 20px; fill: currentColor; }
+    
+    /* ── Responsive adjustments ─────────────────── */
+    @media (max-width: 600px), (max-height: 700px) {
+      .transcript-text { font-size: 13px; line-height: 1.3; }
+      .gloss-token { font-size: 11px; padding: 3px 8px; }
+      #bottom-panel { padding: 12px 16px 20px; gap: 8px; }
+      #text-input-container { max-width: 100%; margin-bottom: 4px; }
+      #mic-btn { width: 60px; height: 60px; }
+      #waveform { height: 30px; }
+    }
+  </style>
+</head>
+
+<body>
+
+  <!-- Top Bar -->
+  <div id="top-bar">
+    
+    <div style="display: flex; gap: 16px; align-items: center;">
+      <div class="logo">SignApp</div>
+      <button id="theme-btn" class="secondary-btn" style="width: 36px; height: 36px;" title="Toggle Theme">
+        <svg class="btn-icon" viewBox="0 0 24 24" id="theme-icon" style="width: 18px; height: 18px;">
+          <path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41.39.39 1.03.39 1.41 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41.39.39 1.03.39 1.41 0l1.06-1.06z"/>
+        </svg>
+      </button>
+    </div>
+
+    <div class="status-chip">
+      <span class="status-dot" id="status-dot"></span>
+      <span id="status-text">Ready</span>
+    </div>
+  </div>
+
+  <!-- Bottom Panel -->
+  <div id="bottom-panel">
+
+    <!-- Transcript -->
+    <div id="transcript-area">
+      <div class="transcript-label" id="transcript-label"></div>
+      <div class="transcript-text" id="transcript-text"></div>
+      <div class="gloss-tokens" id="gloss-tokens"></div>
+    </div>
+
+    <!-- Text Input -->
+    <div id="text-input-container">
+      <input type="text" id="text-input" placeholder="Or type something here..." autocomplete="off">
+      <button id="send-btn">Send</button>
+    </div>
+
+    <!-- Waveform -->
+    <div id="waveform"></div>
+
+    <!-- Sign Progress -->
+    <div id="sign-label"></div>
+    <div style="font-size: 10px; color: var(--text-muted); opacity: 0.8; text-align: center; max-width: 80%; margin-top: -8px; margin-bottom: 4px;">Note: Generated signs are AI approximations and may not be 100% accurate.</div>
+
+    <!-- Controls -->
+    <div class="controls-row">
+      <!-- Replay Button -->
+      <button id="replay-btn" class="secondary-btn" title="Replay last signs" disabled>
+        <svg class="btn-icon" viewBox="0 0 24 24">
+          <path d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/>
+        </svg>
+      </button>
+
+      <!-- Microphone Button -->
+      <button id="mic-btn" title="Click to speak">
+        <svg class="mic-icon" viewBox="0 0 24 24" id="mic-svg">
+          <path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm-1-9c0-.55.45-1 1-1s1 .45 1 1v6c0 .55-.45 1-1 1s-1-.45-1-1V5z"/>
+          <path d="M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z"/>
+        </svg>
+      </button>
+
+      <!-- Placeholder to balance the row if needed, or other future buttons -->
+      <div style="width: 48px;"></div>
+    </div>
+  </div>
+
+  <script type="module" src="./main.js"></script>
+
+</body>
+</html>

src/sign_app/ui/main.js

@@ -0,0 +1,742 @@
+import * as THREE from "three"
+import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js"
+import { playSentence, setCallbacks } from "./signEngine.js"
+import { FINGERSPELL, FINGER_BONE_MAP } from "./fingerspellDictionary.js"
+
+/* ═══════════════════════════════════════════════════════════
+   GLOBALS
+   ═══════════════════════════════════════════════════════════ */
+
+window.targetRotations = {}
+window.signing = false
+
+let idleTime = 0
+let baseRotations = {}
+let bones = {}
+let avatar
+
+/* ─── UI Elements ──────────────────────────────────────── */
+const statusDot   = document.getElementById("status-dot")
+const statusText  = document.getElementById("status-text")
+const micBtn      = document.getElementById("mic-btn")
+const micSvg      = document.getElementById("mic-svg")
+const waveformEl  = document.getElementById("waveform")
+const signLabel   = document.getElementById("sign-label")
+const transcriptLabel = document.getElementById("transcript-label")
+const transcriptText  = document.getElementById("transcript-text")
+const glossTokensEl   = document.getElementById("gloss-tokens")
+
+const replayBtn    = document.getElementById("replay-btn")
+const textInput    = document.getElementById("text-input")
+const sendBtn     = document.getElementById("send-btn")
+
+let lastSignSequence = []
+
+/* ═══════════════════════════════════════════════════════════
+   THREE.JS SCENE
+   ═══════════════════════════════════════════════════════════ */
+
+const scene = new THREE.Scene()
+
+const camera = new THREE.PerspectiveCamera(
+  45,
+  window.innerWidth / window.innerHeight,
+  0.1,
+  1000
+)
+camera.position.set(0, 1.25, 2.4)
+camera.lookAt(0, 1.25, 0)
+
+const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
+renderer.setSize(window.innerWidth, window.innerHeight)
+renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
+renderer.shadowMap.enabled = true
+renderer.setClearColor(0x000000, 0) // transparent for gradient bg
+
+document.body.prepend(renderer.domElement)
+renderer.domElement.id = "avatar-canvas"
+
+window.addEventListener("resize", () => {
+  camera.aspect = window.innerWidth / window.innerHeight
+  camera.updateProjectionMatrix()
+  renderer.setSize(window.innerWidth, window.innerHeight)
+})
+
+/* ─── Lighting ─────────────────────────────────────────── */
+const keyLight = new THREE.DirectionalLight(0xffffff, 1.2)
+keyLight.position.set(2, 4, 3)
+scene.add(keyLight)
+
+const fillLight = new THREE.DirectionalLight(0x93b5ff, 0.5)
+fillLight.position.set(-2, 2, 2)
+scene.add(fillLight)
+
+const rimLight = new THREE.DirectionalLight(0xc084fc, 0.4)
+rimLight.position.set(0, 2, -3)
+scene.add(rimLight)
+
+const ambient = new THREE.AmbientLight(0xffffff, 0.35)
+scene.add(ambient)
+
+const signSpot = new THREE.SpotLight(0xffffff, 1.5)
+signSpot.position.set(0, 3, 2)
+signSpot.target.position.set(0, 1.4, 0)
+scene.add(signSpot)
+scene.add(signSpot.target)
+
+/* ─── Avatar ───────────────────────────────────────────── */
+const loader = new GLTFLoader()
+
+loader.load("avatar.glb", (gltf) => {
+  avatar = gltf.scene
+  scene.add(avatar)
+
+  avatar.scale.set(1.0, 1.0, 1.0)
+  avatar.position.set(0, -0.3, 0)
+
+  avatar.traverse((obj) => {
+    if (obj.isBone) {
+      bones[obj.name] = obj
+      // Save the default rest pose for applying relative offsets
+      baseRotations[obj.name] = { 
+        x: obj.rotation.x, 
+        y: obj.rotation.y, 
+        z: obj.rotation.z 
+      }
+    }
+    if (obj.isMesh) {
+      obj.frustumCulled = false // Fixes meshes (like the face) randomly getting cutoff/disappearing
+      if (obj.morphTargetDictionary) {
+        if (!window.faceMesh || Object.keys(obj.morphTargetDictionary).length > Object.keys(window.faceMesh.morphTargetDictionary).length) {
+          window.faceMesh = obj
+        }
+      }
+    }
+  })
+
+  // Start visible
+  avatar.visible = true
+})
+
+/* ═══════════════════════════════════════════════════════════
+   ANIMATION LOOP
+   ═══════════════════════════════════════════════════════════ */
+
+function animate() {
+  requestAnimationFrame(animate)
+  idleTime += 0.03
+
+  // Lerp all bones toward target rotations + base resting pose
+  for (const boneName in window.targetRotations) {
+    const bone = bones[boneName]
+    const base = baseRotations[boneName]
+    if (!bone || !base) continue
+
+    const targetOffset = window.targetRotations[boneName]
+    const speed = 0.15
+
+    bone.rotation.x = THREE.MathUtils.lerp(bone.rotation.x, base.x + targetOffset.x, speed)
+    bone.rotation.y = THREE.MathUtils.lerp(bone.rotation.y, base.y + targetOffset.y, speed)
+    bone.rotation.z = THREE.MathUtils.lerp(bone.rotation.z, base.z + targetOffset.z, speed)
+  }
+
+  // Idle breathing
+  if (!window.signing && bones.Spine) {
+    bones.Spine.rotation.x = Math.sin(idleTime) * 0.015
+  }
+
+  renderer.render(scene, camera)
+}
+
+animate()
+
+/* ═══════════════════════════════════════════════════════════
+   HANDSHAPE SYSTEM (expanded)
+   ═══════════════════════════════════════════════════════════ */
+
+const HANDSHAPES = {
+
+  OPEN: {
+    RightHandThumb1: { x: 0, y: 0, z: -0.3 },
+    RightHandThumb2: { x: 0, y: 0, z: 0 },
+    RightHandThumb3: { x: 0, y: 0, z: 0 },
+    RightHandIndex1: { x: 0, y: 0, z: 0 }, RightHandIndex2: { x: 0, y: 0, z: 0 }, RightHandIndex3: { x: 0, y: 0, z: 0 },
+    RightHandMiddle1: { x: 0, y: 0, z: 0 }, RightHandMiddle2: { x: 0, y: 0, z: 0 }, RightHandMiddle3: { x: 0, y: 0, z: 0 },
+    RightHandRing1: { x: 0, y: 0, z: 0 }, RightHandRing2: { x: 0, y: 0, z: 0 }, RightHandRing3: { x: 0, y: 0, z: 0 },
+    RightHandPinky1: { x: 0, y: 0, z: 0 }, RightHandPinky2: { x: 0, y: 0, z: 0 }, RightHandPinky3: { x: 0, y: 0, z: 0 },
+    RightHand: { x: 0, y: 0, z: 0 },
+  },
+
+  FIST: {
+    RightHandThumb1: { x: 0.3, y: 0, z: 0.3 },
+    RightHandThumb2: { x: 0.3, y: 0, z: 0 },
+    RightHandThumb3: { x: 0.2, y: 0, z: 0 },
+    RightHandIndex1: { x: 1.2, y: 0, z: 0 }, RightHandIndex2: { x: 1.2, y: 0, z: 0 }, RightHandIndex3: { x: 1.0, y: 0, z: 0 },
+    RightHandMiddle1: { x: 1.2, y: 0, z: 0 }, RightHandMiddle2: { x: 1.2, y: 0, z: 0 }, RightHandMiddle3: { x: 1.0, y: 0, z: 0 },
+    RightHandRing1: { x: 1.2, y: 0, z: 0 }, RightHandRing2: { x: 1.2, y: 0, z: 0 }, RightHandRing3: { x: 1.0, y: 0, z: 0 },
+    RightHandPinky1: { x: 1.2, y: 0, z: 0 }, RightHandPinky2: { x: 1.2, y: 0, z: 0 }, RightHandPinky3: { x: 1.0, y: 0, z: 0 },
+    RightHand: { x: 0, y: 0, z: 0 },
+  },
+
+  POINT: {
+    RightHandThumb1: { x: 0.5, y: 0, z: 0.3 },
+    RightHandThumb2: { x: 0.4, y: 0, z: 0 },
+    RightHandThumb3: { x: 0.2, y: 0, z: 0 },
+    RightHandIndex1: { x: 0, y: 0, z: 0 }, RightHandIndex2: { x: 0, y: 0, z: 0 }, RightHandIndex3: { x: 0, y: 0, z: 0 },
+    RightHandMiddle1: { x: 1.2, y: 0, z: 0 }, RightHandMiddle2: { x: 1.0, y: 0, z: 0 }, RightHandMiddle3: { x: 0.8, y: 0, z: 0 },
+    RightHandRing1: { x: 1.2, y: 0, z: 0 }, RightHandRing2: { x: 1.0, y: 0, z: 0 }, RightHandRing3: { x: 0.8, y: 0, z: 0 },
+    RightHandPinky1: { x: 1.2, y: 0, z: 0 }, RightHandPinky2: { x: 1.0, y: 0, z: 0 }, RightHandPinky3: { x: 0.8, y: 0, z: 0 },
+    RightHand: { x: 0, y: 0, z: 0 },
+  },
+
+  FLAT: {
+    RightHandThumb1: { x: 0.2, y: 0, z: 0.3 },
+    RightHandThumb2: { x: 0.1, y: 0, z: 0 },
+    RightHandThumb3: { x: 0, y: 0, z: 0 },
+    RightHandIndex1: { x: 0, y: 0, z: 0 }, RightHandIndex2: { x: 0, y: 0, z: 0 }, RightHandIndex3: { x: 0, y: 0, z: 0 },
+    RightHandMiddle1: { x: 0, y: 0, z: 0 }, RightHandMiddle2: { x: 0, y: 0, z: 0 }, RightHandMiddle3: { x: 0, y: 0, z: 0 },
+    RightHandRing1: { x: 0, y: 0, z: 0 }, RightHandRing2: { x: 0, y: 0, z: 0 }, RightHandRing3: { x: 0, y: 0, z: 0 },
+    RightHandPinky1: { x: 0, y: 0, z: 0 }, RightHandPinky2: { x: 0, y: 0, z: 0 }, RightHandPinky3: { x: 0, y: 0, z: 0 },
+    RightHand: { x: 0, y: 0, z: 0 },
+  },
+
+  CLAW: {
+    RightHandThumb1: { x: 0.4, y: 0, z: -0.2 },
+    RightHandThumb2: { x: 0.3, y: 0, z: 0 },
+    RightHandThumb3: { x: 0.2, y: 0, z: 0 },
+    RightHandIndex1: { x: 0.6, y: 0, z: 0 }, RightHandIndex2: { x: 0.5, y: 0, z: 0 }, RightHandIndex3: { x: 0.4, y: 0, z: 0 },
+    RightHandMiddle1: { x: 0.6, y: 0, z: 0 }, RightHandMiddle2: { x: 0.5, y: 0, z: 0 }, RightHandMiddle3: { x: 0.4, y: 0, z: 0 },
+    RightHandRing1: { x: 0.6, y: 0, z: 0 }, RightHandRing2: { x: 0.5, y: 0, z: 0 }, RightHandRing3: { x: 0.4, y: 0, z: 0 },
+    RightHandPinky1: { x: 0.6, y: 0, z: 0 }, RightHandPinky2: { x: 0.5, y: 0, z: 0 }, RightHandPinky3: { x: 0.4, y: 0, z: 0 },
+    RightHand: { x: 0, y: 0, z: 0 },
+  },
+}
+
+function applyHandshape(shape) {
+  if (!bones.RightHandIndex1) return
+
+  const shapeUpper = (shape || "OPEN").toUpperCase()
+
+  let pose = HANDSHAPES.OPEN // Default
+
+  // Check built-in shapes first
+  if (HANDSHAPES[shapeUpper]) {
+    pose = HANDSHAPES[shapeUpper]
+  } else if (FINGERSPELL[shapeUpper]) {
+    // Check the fingerspell dictionary for letter-based handshapes
+    pose = {}
+    for (const key in FINGERSPELL[shapeUpper]) {
+      const boneName = FINGER_BONE_MAP[key]
+      if (boneName) pose[boneName] = FINGERSPELL[shapeUpper][key]
+    }
+  }
+
+  for (const bone in pose) {
+    window.targetRotations[bone] = { ...pose[bone] }
+  }
+}
+
+/* ═══════════════════════════════════════════════════════════
+   LOCATION SYSTEM (expanded)
+   ═══════════════════════════════════════════════════════════ */
+
+const LOCATIONS = {
+  neutral_space: {
+    RightShoulder: { x: 0, y: 0, z: -0.15 },
+    RightArm: { x: -0.3, y: 0, z: 0 },
+    RightForeArm: { x: -0.4, y: 0.2, z: 0 },
+  },
+  chest: {
+    RightShoulder: { x: 0, y: 0, z: -0.2 },
+    RightArm: { x: -0.5, y: 0, z: 0 },
+    RightForeArm: { x: -0.6, y: 0.3, z: 0 },
+  },
+  chin: {
+    RightShoulder: { x: 0, y: 0, z: -0.3 },
+    RightArm: { x: -0.7, y: 0.1, z: 0 },
+    RightForeArm: { x: -0.85, y: 0.3, z: 0 },
+  },
+  mouth: {
+    RightShoulder: { x: 0, y: 0, z: -0.3 },
+    RightArm: { x: -0.75, y: 0.1, z: 0 },
+    RightForeArm: { x: -0.9, y: 0.3, z: 0 },
+  },
+  nose: {
+    RightShoulder: { x: 0, y: 0, z: -0.32 },
+    RightArm: { x: -0.85, y: 0.1, z: 0 },
+    RightForeArm: { x: -1.0, y: 0.3, z: 0 },
+  },
+  forehead: {
+    RightShoulder: { x: 0, y: 0, z: -0.35 },
+    RightArm: { x: -0.9, y: 0.1, z: 0 },
+    RightForeArm: { x: -1.05, y: 0.3, z: 0 },
+  },
+  temple: {
+    RightShoulder: { x: 0, y: 0, z: -0.35 },
+    RightArm: { x: -0.85, y: 0.15, z: 0.1 },
+    RightForeArm: { x: -1.0, y: 0.35, z: 0 },
+  },
+  side: {
+    RightShoulder: { x: 0, y: 0, z: -0.1 },
+    RightArm: { x: -0.3, y: 0, z: 0.3 },
+    RightForeArm: { x: -0.4, y: 0.2, z: 0 },
+  },
+  shoulder: {
+    RightShoulder: { x: 0, y: 0, z: -0.15 },
+    RightArm: { x: -0.4, y: 0, z: 0.15 },
+    RightForeArm: { x: -0.7, y: 0.2, z: 0 },
+  },
+  ear: {
+    RightShoulder: { x: 0, y: 0, z: -0.35 },
+    RightArm: { x: -0.85, y: 0.2, z: 0.2 },
+    RightForeArm: { x: -1.0, y: 0.35, z: 0 },
+  },
+  waist: {
+    RightShoulder: { x: 0, y: 0, z: -0.1 },
+    RightArm: { x: -0.2, y: 0, z: 0 },
+    RightForeArm: { x: -0.3, y: 0.15, z: 0 },
+  },
+}
+
+function applyLocation(loc) {
+  if (!bones.RightArm) return
+
+  const key = (loc || "neutral_space").toLowerCase()
+  const pose = LOCATIONS[key] || LOCATIONS.neutral_space
+
+  for (const bone in pose) {
+    if (window.targetRotations) {
+      window.targetRotations[bone] = { ...pose[bone] }
+    }
+  }
+}
+
+/* ═══════════════════════════════════════════════════════════
+   FINGERSPELLING (from dictionary)
+   ═══════════════════════════════════════════════════════════ */
+
+function applyFingerSpell(letter) {
+  const l = (letter || "").toUpperCase()
+  const pose = FINGERSPELL[l]
+  if (!pose) return
+
+  for (const key in pose) {
+    const boneName = FINGER_BONE_MAP[key]
+    if (boneName) {
+      window.targetRotations[boneName] = { ...pose[key] }
+    }
+  }
+
+  applyLocation("neutral_space")
+}
+
+/* ─── Expose to signEngine ─────────────────────────────── */
+window.applyHandshape = applyHandshape
+window.applyLocation = applyLocation
+window.applyFingerSpell = applyFingerSpell
+window.playSentence = playSentence
+
+window.clearPose = function() {
+  for (const boneName in window.targetRotations) {
+    if (window.targetRotations[boneName]) {
+      window.targetRotations[boneName] = { x: 0, y: 0, z: 0 }
+    }
+  }
+}
+
+/* ═══════════════════════════════════════════════════════════
+   FACIAL EXPRESSIONS (Morph Targets)
+   ═══════════════════════════════════════════════════════════ */
+const EXPRESSIONS = {
+  neutral: {},
+  happy: { mouthSmile: 1.0 },
+  sad: { mouthOpen: 0.1 },
+  surprise: { mouthOpen: 0.8, mouthSmile: 0.2 },
+  angry: { mouthOpen: 0.3 },
+  question: { mouthOpen: 0.2 }
+}
+
+window.applyExpression = function(exprName) {
+  if (!window.faceMesh || !window.faceMesh.morphTargetDictionary) return
+  
+  const dict = window.faceMesh.morphTargetDictionary
+  const influences = window.faceMesh.morphTargetInfluences
+  
+  // Reset all
+  for (const key in dict) {
+    influences[dict[key]] = 0
+  }
+  
+  const expr = EXPRESSIONS[(exprName || "neutral").toLowerCase()]
+  if (!expr) return
+  
+  for (const key in expr) {
+    let targetIdx = dict[key]
+    if (targetIdx === undefined) {
+      // Find case-insensitive partial match
+      const matchingKey = Object.keys(dict).find(k => k.toLowerCase().includes(key.toLowerCase()))
+      if (matchingKey) targetIdx = dict[matchingKey]
+    }
+    
+    if (targetIdx !== undefined) {
+      influences[targetIdx] = expr[key]
+    }
+  }
+}
+
+/* ═══════════════════════════════════════════════════════════
+   SIGN ENGINE CALLBACKS (UI updates)
+   ═══════════════════════════════════════════════════════════ */
+
+setCallbacks({
+  onSignStart: (index, sign) => {
+    // Highlight active gloss token
+    const tokens = glossTokensEl.querySelectorAll(".gloss-token")
+    tokens.forEach((el, i) => {
+      el.classList.remove("active")
+      if (i < index) el.classList.add("done")
+      if (i === index) el.classList.add("active")
+    })
+
+    const label = sign.type === "fingerspell"
+      ? `Spelling: ${sign.letter || sign.handshape}`
+      : `Signing: ${sign.gloss || sign.handshape}`
+
+    signLabel.textContent = label
+    signLabel.classList.add("visible")
+  },
+
+  onSignEnd: () => {
+    signLabel.classList.remove("visible")
+    const tokens = glossTokensEl.querySelectorAll(".gloss-token")
+    tokens.forEach(el => el.classList.add("done"))
+
+    setUIState("ready")
+  },
+
+  onLetterStart: (letter) => {
+    signLabel.textContent = `Spelling: ${letter}`
+  }
+})
+
+/* ═══════════════════════════════════════════════════════════
+   VOICE RECORDING — VAD (Voice Activity Detection)
+   ═══════════════════════════════════════════════════════════ */
+
+let recorder = null
+let audioChunks = []
+let audioStream = null
+let audioContext = null
+let analyser = null
+let silenceTimer = null
+let isRecording = false
+
+const SILENCE_THRESHOLD = 0.015    // RMS threshold for "silence"
+const SILENCE_DURATION  = 10000    // ms of silence before auto-send (updated to 10 seconds)
+const MIN_RECORD_TIME   = 500      // ms minimum recording
+
+// Create waveform bars
+for (let i = 0; i < 24; i++) {
+  const bar = document.createElement("div")
+  bar.className = "wave-bar"
+  waveformEl.appendChild(bar)
+}
+const waveBars = waveformEl.querySelectorAll(".wave-bar")
+
+async function startRecording() {
+  if (isRecording) {
+    // Toggle off — stop recording and send
+    stopAndSend()
+    return
+  }
+
+  try {
+    audioStream = await navigator.mediaDevices.getUserMedia({ audio: true })
+  } catch (err) {
+    console.error("Mic access denied:", err)
+    setUIState("ready")
+    return
+  }
+
+  isRecording = true
+  audioChunks = []
+
+  // Set up MediaRecorder
+  recorder = new MediaRecorder(audioStream)
+  recorder.ondataavailable = e => audioChunks.push(e.data)
+  recorder.onstop = sendAudioToBackend
+  recorder.start()
+
+  // Set up audio analysis for VAD + waveform
+  audioContext = new AudioContext()
+  const source = audioContext.createMediaStreamSource(audioStream)
+  analyser = audioContext.createAnalyser()
+  analyser.fftSize = 256
+  source.connect(analyser)
+
+  setUIState("recording")
+  monitorAudio()
+}
+
+function monitorAudio() {
+  if (!isRecording || !analyser) return
+
+  const data = new Uint8Array(analyser.frequencyBinCount)
+  analyser.getByteTimeDomainData(data)
+
+  // Calculate RMS
+  let sum = 0
+  for (let i = 0; i < data.length; i++) {
+    const normalized = (data[i] - 128) / 128
+    sum += normalized * normalized
+  }
+  const rms = Math.sqrt(sum / data.length)
+
+  // Update waveform visual
+  updateWaveform(data)
+
+  // Voice activity detection
+  if (rms > SILENCE_THRESHOLD) {
+    // Voice detected — reset silence timer
+    if (silenceTimer) {
+      clearTimeout(silenceTimer)
+      silenceTimer = null
+    }
+  } else {
+    // Silence — start countdown if not already
+    if (!silenceTimer && audioChunks.length > 0) {
+      silenceTimer = setTimeout(() => {
+        if (isRecording) stopAndSend()
+      }, SILENCE_DURATION)
+    }
+  }
+
+  requestAnimationFrame(monitorAudio)
+}
+
+function updateWaveform(data) {
+  const step = Math.floor(data.length / waveBars.length)
+  waveBars.forEach((bar, i) => {
+    const value = Math.abs(data[i * step] - 128) / 128
+    const height = Math.max(4, value * 36)
+    bar.style.height = `${height}px`
+  })
+}
+
+function stopAndSend() {
+  isRecording = false
+  if (silenceTimer) { clearTimeout(silenceTimer); silenceTimer = null }
+
+  if (recorder && recorder.state === "recording") {
+    recorder.stop()
+  }
+
+  if (audioStream) {
+    audioStream.getTracks().forEach(t => t.stop())
+    audioStream = null
+  }
+
+  if (audioContext) {
+    audioContext.close()
+    audioContext = null
+  }
+
+  setUIState("processing")
+}
+
+/* ═══════════════════════════════════════════════════════════
+   SEND TO BACKEND
+   ═══════════════════════════════════════════════════════════ */
+
+async function sendAudioToBackend() {
+  const blob = new Blob(audioChunks, { type: "audio/webm" })
+  const formData = new FormData()
+  formData.append("file", blob, "recording.webm")
+
+  try {
+    const response = await fetch("/voice-to-text/", {
+      method: "POST",
+      body: formData
+    })
+
+    if (!response.ok) throw new Error(`HTTP ${response.status}`)
+
+    const data = await response.json()
+    console.log("Backend response:", data)
+
+    displayTranscript(data)
+
+    if (data.sign_sequence && data.sign_sequence.length > 0) {
+      lastSignSequence = data.sign_sequence
+      replayBtn.disabled = false
+      setUIState("signing")
+      if (avatar) avatar.visible = true
+      playSentence(data.sign_sequence)
+    } else {
+      setUIState("ready")
+    }
+
+  } catch (err) {
+    console.error("Backend error:", err)
+    transcriptLabel.textContent = ""
+    transcriptText.textContent = "Connection error — is the backend running?"
+    transcriptText.classList.add("visible")
+    setUIState("ready")
+  }
+}
+
+/* ═══════════════════════════════════════════════════════════
+   UI STATE MANAGEMENT
+   ═══════════════════════════════════════════════════════════ */
+
+function setUIState(state) {
+  micBtn.className = ""
+  statusDot.className = "status-dot"
+  waveformEl.classList.remove("active")
+
+  switch (state) {
+    case "ready":
+      statusText.textContent = "Ready"
+      statusDot.className = "status-dot"
+      micSvg.innerHTML = '<path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm-1-9c0-.55.45-1 1-1s1 .45 1 1v6c0 .55-.45 1-1 1s-1-.45-1-1V5z"/><path d="M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z"/>'
+      break
+
+    case "recording":
+      statusText.textContent = "Listening..."
+      statusDot.className = "status-dot recording"
+      micBtn.className = "recording"
+      waveformEl.classList.add("active")
+      // Stop icon
+      micSvg.innerHTML = '<rect x="7" y="7" width="10" height="10" rx="1" fill="white"/>'
+      break
+
+    case "processing":
+      statusText.textContent = "Processing..."
+      statusDot.className = "status-dot processing"
+      micBtn.className = "processing"
+      // Spinner icon
+      micSvg.innerHTML = '<circle cx="12" cy="12" r="8" stroke="white" stroke-width="2" fill="none" stroke-dasharray="20 30"/>'
+      break
+
+    case "signing":
+      statusText.textContent = "Signing..."
+      statusDot.className = "status-dot signing"
+      break
+  }
+}
+
+function displayTranscript(data) {
+  // Show original transcription
+  transcriptLabel.textContent = "TRANSCRIPTION"
+  transcriptText.textContent = data.cleaned_transcription || data.raw_transcription || ""
+  transcriptText.classList.add("visible")
+
+  // Show gloss tokens
+  glossTokensEl.innerHTML = ""
+  if (data.sign_friendly_text && data.sign_friendly_text.length > 0) {
+    data.sign_friendly_text.forEach(word => {
+      const el = document.createElement("span")
+      el.className = "gloss-token"
+      el.textContent = word
+      glossTokensEl.appendChild(el)
+    })
+  }
+}
+
+/* ─── Mic button handler ───────────────────────────────── */
+micBtn.onclick = startRecording
+
+/* ─── Text Input handlers ──────────────────────────────── */
+async function sendTextToBackend() {
+  const text = textInput.value.trim()
+  if (!text) return
+
+  textInput.value = ""
+  setUIState("processing")
+
+  try {
+    const response = await fetch("/text-to-sign/", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ text })
+    })
+
+    if (!response.ok) throw new Error(`HTTP ${response.status}`)
+
+    const data = await response.json()
+    console.log("Text backend response:", data)
+
+    displayTranscript(data)
+
+    if (data.sign_sequence && data.sign_sequence.length > 0) {
+      lastSignSequence = data.sign_sequence
+      replayBtn.disabled = false
+      setUIState("signing")
+      if (avatar) avatar.visible = true
+      playSentence(data.sign_sequence)
+    } else {
+      setUIState("ready")
+    }
+
+  } catch (err) {
+    console.error("Text backend error:", err)
+    transcriptLabel.textContent = ""
+    transcriptText.textContent = "Connection error — is the backend running?"
+    transcriptText.classList.add("visible")
+    setUIState("ready")
+  }
+}
+
+sendBtn.onclick = sendTextToBackend
+textInput.onkeydown = (e) => {
+  if (e.key === "Enter") sendTextToBackend()
+}
+
+/* ─── Replay handler ──────────────────────────────────── */
+replayBtn.onclick = () => {
+  if (lastSignSequence.length > 0) {
+    // Re-trigger the tokens visualization
+    displayTranscript({
+      cleaned_transcription: transcriptText.textContent,
+      sign_friendly_text: Array.from(glossTokensEl.querySelectorAll(".gloss-token")).map(el => el.textContent),
+      sign_sequence: lastSignSequence
+    })
+    
+    setUIState("signing")
+    playSentence(lastSignSequence)
+  }
+}
+
+/* ─── Initial state ────────────────────────────────────── */
+setUIState("ready")
+/* ─── Theme Toggle ─────────────────────────────────────── */
+const themeBtn = document.getElementById("theme-btn")
+if (themeBtn) {
+  themeBtn.onclick = () => {
+    document.body.classList.toggle("light-mode")
+    const isLight = document.body.classList.contains("light-mode")
+    localStorage.setItem("signapp-theme", isLight ? "light" : "dark")
+    updateThemeIcon(isLight)
+
+    // Also update scene lights to match a bit better in light mode
+    if (isLight) {
+        scene.background = new THREE.Color(0xf1f5f9)
+    } else {
+        scene.background = null // transparent
+    }
+  }
+}
+function updateThemeIcon(isLight) {
+  const icon = document.getElementById("theme-icon")
+  if (!icon) return
+  if (isLight) {
+    icon.innerHTML = '<path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-3.03 0-5.5-2.47-5.5-5.5 0-1.82.89-3.42 2.26-4.4C12.92 3.04 12.46 3 12 3zm0 16c-3.86 0-7-3.14-7-7s3.14-7 7-7c.22 0 .44.03.65.08C11.13 6.36 10 7.97 10 9.85c0 2.85 2.3 5.15 5.15 5.15 1.88 0 3.49-1.13 4.77-2.65.05.21.08.43.08.65 0 3.86-3.14 7-7 7z"/>'
+  } else {
+    icon.innerHTML = '<path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41.39.39 1.03.39 1.41 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41.39.39 1.03.39 1.41 0l1.06-1.06z"/>'
+  }
+}
+if (localStorage.getItem("signapp-theme") === "light") {
+  document.body.classList.add("light-mode")
+  updateThemeIcon(true)
+  scene.background = new THREE.Color(0xf1f5f9)
+}

src/sign_app/ui/signEngine.js

@@ -0,0 +1,438 @@
+import { FINGERSPELL, FINGER_BONE_MAP } from "./fingerspellDictionary.js"
+
+/**
+ * Sign Engine — orchestrates sign playback, movements, and fingerspelling
+ */
+
+/* ── State ─────────────────────────────────────────────── */
+let _currentSignIndex = -1
+let _playing = false
+
+/* ── Exported callbacks (set by main.js) ───────────────── */
+export let onSignStart = null    // (index, sign) => void
+export let onSignEnd = null      // () => void
+export let onLetterStart = null  // (letter) => void
+
+export function setCallbacks({ onSignStart: s, onSignEnd: e, onLetterStart: l }) {
+  onSignStart = s
+  onSignEnd = e
+  onLetterStart = l
+}
+
+/* ── Play a full sentence of signs ─────────────────────── */
+export function playSentence(signs) {
+  if (_playing) return
+  _playing = true
+  _currentSignIndex = 0
+
+  window.signing = true
+
+  playNext(signs)
+}
+
+function playNext(signs) {
+  if (_currentSignIndex >= signs.length) {
+    // Done — return to neutral after a brief hold
+    setTimeout(() => {
+      returnToNeutral()
+      _playing = false
+      _currentSignIndex = -1
+      window.signing = false
+      if (onSignEnd) onSignEnd()
+    }, 800)
+    return
+  }
+
+  const sign = signs[_currentSignIndex]
+
+  if (onSignStart) onSignStart(_currentSignIndex, sign)
+
+  if (sign.type === "fingerspell") {
+    playFingerspellLetter(sign, () => {
+      _currentSignIndex++
+      setTimeout(() => playNext(signs), 250) // short gap between letters
+    })
+  } else {
+    playSign(sign, () => {
+      _currentSignIndex++
+      setTimeout(() => playNext(signs), 700) // longer gap between signs
+    })
+  }
+}
+
+/* ── Play a single sign (handshape + location + movement + expression) ── */
+function playSign(sign, done) {
+  // 1. Apply handshape
+  applyHandshapePose(sign.handshape)
+
+  // 2. Apply location (arm positioning)
+  window.applyLocation(sign.location)
+
+  // 3. Apply expression
+  if (window.applyExpression) {
+    window.applyExpression(sign.expression || "neutral")
+  }
+
+  // 4. Apply movement animation
+  const moveDuration = applyMovement(sign.movement)
+
+  // Wait for the pose to settle + movement to complete
+  setTimeout(() => {
+    if (window.applyExpression) window.applyExpression("neutral")
+    done()
+  }, Math.max(600, moveDuration + 200))
+}
+
+/* ── Fingerspell a single letter ───────────────────────── */
+function playFingerspellLetter(sign, done) {
+  const letter = (sign.letter || sign.handshape || "").toUpperCase()
+
+  if (onLetterStart) onLetterStart(letter)
+
+  const pose = FINGERSPELL[letter]
+  if (!pose) {
+    done()
+    return
+  }
+
+  // Apply full multi-joint fingerspell pose
+  for (const key in pose) {
+    const boneName = FINGER_BONE_MAP[key]
+    if (boneName && window.targetRotations !== undefined) {
+      window.targetRotations[boneName] = { ...pose[key] }
+    }
+  }
+
+  // Ensure neutral hand position for fingerspelling
+  window.applyLocation("neutral_space")
+
+  setTimeout(done, 450) // hold each letter
+}
+
+/* ── Handshape pose application ────────────────────────── */
+function applyHandshapePose(shape) {
+  if (!shape) return
+
+  // Check if this shape exists in FINGERSPELL dictionary first (reuse finger poses)
+  const shapeUpper = shape.toUpperCase()
+  if (FINGERSPELL[shapeUpper]) {
+    const pose = FINGERSPELL[shapeUpper]
+    for (const key in pose) {
+      const boneName = FINGER_BONE_MAP[key]
+      if (boneName && window.targetRotations !== undefined) {
+        window.targetRotations[boneName] = { ...pose[key] }
+      }
+    }
+    return
+  }
+
+  // Built-in handshape aliases
+  if (window.applyHandshape) {
+    window.applyHandshape(shapeUpper)
+  }
+}
+
+/* ── Movement animations ───────────────────────────────── */
+
+/**
+ * Apply a movement animation. Returns duration in ms.
+ */
+function applyMovement(movement) {
+  if (!movement || movement === "none") return 0
+
+  switch (movement.toLowerCase()) {
+
+    case "tap": return animateTap()
+
+    case "double_tap": return animateDoubleTap()
+
+    case "circle_clockwise": return animateCircle(1)
+
+    case "circle_counterclockwise": return animateCircle(-1)
+
+    case "forward": return animateForward()
+
+    case "pull_in": return animatePullIn()
+
+    case "down": return animateDown()
+
+    case "up": return animateUp()
+
+    case "side_to_side": return animateSideToSide()
+
+    case "nod": return animateNod()
+
+    case "twist": return animateTwist()
+
+    case "wave": return animateWave()
+
+    case "touch": return animateTouch()
+
+    default:
+      console.log("Unknown movement:", movement)
+      return 0
+  }
+}
+
+/* ── Movement implementations ──────���───────────────────── */
+
+function animateTap() {
+  const boneR = "RightForeArm"
+  const boneL = "LeftForeArm"
+  const currentR = getCurrentRotation(boneR)
+  const currentL = getCurrentRotation(boneL)
+  
+  if (window.targetRotations[boneR]) window.targetRotations[boneR] = { ...currentR, x: currentR.x - 0.15 }
+  if (window.targetRotations[boneL]) window.targetRotations[boneL] = { ...currentL, x: currentL.x - 0.15 }
+
+  setTimeout(() => {
+    if (window.targetRotations[boneR]) window.targetRotations[boneR] = currentR
+    if (window.targetRotations[boneL]) window.targetRotations[boneL] = currentL
+  }, 200)
+
+  return 400
+}
+
+function animateDoubleTap() {
+  const boneR = "RightForeArm"
+  const boneL = "LeftForeArm"
+  const currentR = getCurrentRotation(boneR)
+  const currentL = getCurrentRotation(boneL)
+  
+  const applyTap = () => {
+    if (window.targetRotations[boneR]) window.targetRotations[boneR] = { ...currentR, x: currentR.x - 0.15 }
+    if (window.targetRotations[boneL]) window.targetRotations[boneL] = { ...currentL, x: currentL.x - 0.15 }
+  }
+  const applyReset = () => {
+    if (window.targetRotations[boneR]) window.targetRotations[boneR] = currentR
+    if (window.targetRotations[boneL]) window.targetRotations[boneL] = currentL
+  }
+
+  applyTap()
+  setTimeout(() => {
+    applyReset()
+    setTimeout(() => {
+      applyTap()
+      setTimeout(() => applyReset(), 150)
+    }, 200)
+  }, 150)
+
+  return 700
+}
+
+function animateCircle(direction) {
+  const boneR = "RightHand"
+  const boneL = "LeftHand"
+  const currentR = getCurrentRotation(boneR)
+  const currentL = getCurrentRotation(boneL)
+  const steps = 8
+  const radius = 0.2
+  let step = 0
+
+  const interval = setInterval(() => {
+    const angle = (step / steps) * Math.PI * 2 * direction
+    if (window.targetRotations[boneR]) {
+      window.targetRotations[boneR] = {
+        x: currentR.x + Math.sin(angle) * radius,
+        y: currentR.y + Math.cos(angle) * radius,
+        z: currentR.z
+      }
+    }
+    if (window.targetRotations[boneL]) {
+      // Mirror circle on left hand (invert Y)
+      window.targetRotations[boneL] = {
+        x: currentL.x + Math.sin(angle) * radius,
+        y: currentL.y - Math.cos(angle) * radius,
+        z: currentL.z
+      }
+    }
+    step++
+    if (step >= steps) {
+      clearInterval(interval)
+      if (window.targetRotations[boneR]) window.targetRotations[boneR] = currentR
+      if (window.targetRotations[boneL]) window.targetRotations[boneL] = currentL
+    }
+  }, 80)
+
+  return steps * 80 + 100
+}
+
+function animateForward() {
+  const boneR = "RightForeArm"
+  const boneL = "LeftForeArm"
+  const currentR = getCurrentRotation(boneR)
+  const currentL = getCurrentRotation(boneL)
+
+  if (window.targetRotations[boneR]) window.targetRotations[boneR] = { ...currentR, x: currentR.x - 0.3 }
+  if (window.targetRotations[boneL]) window.targetRotations[boneL] = { ...currentL, x: currentL.x - 0.3 }
+
+  setTimeout(() => {
+    if (window.targetRotations[boneR]) window.targetRotations[boneR] = currentR
+    if (window.targetRotations[boneL]) window.targetRotations[boneL] = currentL
+  }, 350)
+
+  return 500
+}
+
+function animatePullIn() {
+  const boneR = "RightForeArm"
+  const boneL = "LeftForeArm"
+  const currentR = getCurrentRotation(boneR)
+  const currentL = getCurrentRotation(boneL)
+
+  if (window.targetRotations[boneR]) window.targetRotations[boneR] = { ...currentR, x: currentR.x + 0.3 }
+  if (window.targetRotations[boneL]) window.targetRotations[boneL] = { ...currentL, x: currentL.x + 0.3 }
+
+  setTimeout(() => {
+    if (window.targetRotations[boneR]) window.targetRotations[boneR] = currentR
+    if (window.targetRotations[boneL]) window.targetRotations[boneL] = currentL
+  }, 350)
+
+  return 500
+}
+
+function animateDown() {
+  const boneR = "RightArm"
+  const boneL = "LeftArm"
+  const currentR = getCurrentRotation(boneR)
+  const currentL = getCurrentRotation(boneL)
+
+  if (window.targetRotations[boneR]) window.targetRotations[boneR] = { ...currentR, x: currentR.x + 0.3 }
+  if (window.targetRotations[boneL]) window.targetRotations[boneL] = { ...currentL, x: currentL.x + 0.3 }
+
+  setTimeout(() => {
+    if (window.targetRotations[boneR]) window.targetRotations[boneR] = currentR
+    if (window.targetRotations[boneL]) window.targetRotations[boneL] = currentL
+  }, 350)
+
+  return 500
+}
+
+function animateUp() {
+  const boneR = "RightArm"
+  const boneL = "LeftArm"
+  const currentR = getCurrentRotation(boneR)
+  const currentL = getCurrentRotation(boneL)
+
+  if (window.targetRotations[boneR]) window.targetRotations[boneR] = { ...currentR, x: currentR.x - 0.3 }
+  if (window.targetRotations[boneL]) window.targetRotations[boneL] = { ...currentL, x: currentL.x - 0.3 }
+
+  setTimeout(() => {
+    if (window.targetRotations[boneR]) window.targetRotations[boneR] = currentR
+    if (window.targetRotations[boneL]) window.targetRotations[boneL] = currentL
+  }, 350)
+
+  return 500
+}
+
+function animateSideToSide() {
+  const boneR = "RightHand"
+  const boneL = "LeftHand"
+  const currentR = getCurrentRotation(boneR)
+  const currentL = getCurrentRotation(boneL)
+
+  if (window.targetRotations[boneR]) window.targetRotations[boneR] = { ...currentR, z: currentR.z - 0.2 }
+  if (window.targetRotations[boneL]) window.targetRotations[boneL] = { ...currentL, z: currentL.z + 0.2 }
+  
+  setTimeout(() => {
+    if (window.targetRotations[boneR]) window.targetRotations[boneR] = { ...currentR, z: currentR.z + 0.2 }
+    if (window.targetRotations[boneL]) window.targetRotations[boneL] = { ...currentL, z: currentL.z - 0.2 }
+    setTimeout(() => {
+      if (window.targetRotations[boneR]) window.targetRotations[boneR] = currentR
+      if (window.targetRotations[boneL]) window.targetRotations[boneL] = currentL
+    }, 200)
+  }, 200)
+
+  return 600
+}
+
+function animateNod() {
+  const boneR = "RightHand"
+  const boneL = "LeftHand"
+  const currentR = getCurrentRotation(boneR)
+  const currentL = getCurrentRotation(boneL)
+
+  if (window.targetRotations[boneR]) window.targetRotations[boneR] = { ...currentR, x: currentR.x + 0.25 }
+  if (window.targetRotations[boneL]) window.targetRotations[boneL] = { ...currentL, x: currentL.x + 0.25 }
+
+  setTimeout(() => {
+    if (window.targetRotations[boneR]) window.targetRotations[boneR] = currentR
+    if (window.targetRotations[boneL]) window.targetRotations[boneL] = currentL
+  }, 250)
+
+  return 450
+}
+
+function animateTwist() {
+  const boneR = "RightHand"
+  const boneL = "LeftHand"
+  const currentR = getCurrentRotation(boneR)
+  const currentL = getCurrentRotation(boneL)
+
+  if (window.targetRotations[boneR]) window.targetRotations[boneR] = { ...currentR, y: currentR.y + 0.4 }
+  if (window.targetRotations[boneL]) window.targetRotations[boneL] = { ...currentL, y: currentL.y - 0.4 }
+  
+  setTimeout(() => {
+    if (window.targetRotations[boneR]) window.targetRotations[boneR] = { ...currentR, y: currentR.y - 0.4 }
+    if (window.targetRotations[boneL]) window.targetRotations[boneL] = { ...currentL, y: currentL.y + 0.4 }
+    setTimeout(() => {
+      if (window.targetRotations[boneR]) window.targetRotations[boneR] = currentR
+      if (window.targetRotations[boneL]) window.targetRotations[boneL] = currentL
+    }, 200)
+  }, 250)
+
+  return 650
+}
+
+function animateWave() {
+  const boneR = "RightHand"
+  const boneL = "LeftHand"
+  const currentR = getCurrentRotation(boneR)
+  const currentL = getCurrentRotation(boneL)
+  let step = 0
+  const steps = 6
+
+  const interval = setInterval(() => {
+    const val = Math.sin(step * 1.2) * 0.2
+    if (window.targetRotations[boneR]) window.targetRotations[boneR] = { ...currentR, z: currentR.z + val }
+    if (window.targetRotations[boneL]) window.targetRotations[boneL] = { ...currentL, z: currentL.z - val }
+    step++
+    if (step >= steps) {
+      clearInterval(interval)
+      if (window.targetRotations[boneR]) window.targetRotations[boneR] = currentR
+      if (window.targetRotations[boneL]) window.targetRotations[boneL] = currentL
+    }
+  }, 100)
+
+  return steps * 100 + 100
+}
+
+function animateTouch() {
+  const boneR = "RightForeArm"
+  const boneL = "LeftForeArm"
+  const currentR = getCurrentRotation(boneR)
+  const currentL = getCurrentRotation(boneL)
+
+  if (window.targetRotations[boneR]) window.targetRotations[boneR] = { ...currentR, x: currentR.x + 0.15 }
+  if (window.targetRotations[boneL]) window.targetRotations[boneL] = { ...currentL, x: currentL.x + 0.15 }
+
+  setTimeout(() => {
+    if (window.targetRotations[boneR]) window.targetRotations[boneR] = currentR
+    if (window.targetRotations[boneL]) window.targetRotations[boneL] = currentL
+  }, 200)
+
+  return 400
+}
+
+/* ── Helpers ───────────────────────────────────────────── */
+
+function getCurrentRotation(boneName) {
+  if (window.targetRotations && window.targetRotations[boneName]) {
+    return { ...window.targetRotations[boneName] }
+  }
+  return { x: 0, y: 0, z: 0 }
+}
+
+function returnToNeutral() {
+  if (window.clearPose) window.clearPose()
+}