Iris: hands-free live mode, money/bill reading, accessible UI, Qwen3-VL-2B

- live mode: visual-change watch (parsimonious) + continuous hands-free listening (Web Speech) + baseline scene description; double-tap or voice toggle
- voice commands robust to STT errors (fuzzy: 'modo ao fio' -> live_on)
- reads money/bills/medicine (prompt-tuned) ; EN/PT throughout incl. TTS voices
- accessible custom UI: SVG icons, big labelled buttons, high-contrast/larger-text, focus rings, ARIA, haptics
- language chosen by voice on first run
- swapped VLM to Qwen3-VL-2B (lighter, faster, strong OCR; all models <=4B -> Tiny Titan)
- code/comments/docstrings in English; polished README

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

README.md

@@ -6,38 +6,68 @@ colorTo: orange
 sdk: gradio
 sdk_version: 6.17.3
 app_file: app.py
-pinned: false
+pinned: true
 license: apache-2.0
-short_description: Your father's eyes, by voice. Describe & ask about the world.
+short_description: Your father's eyes, by voice. Describe, read money & bills, ask.
+tags:
+  - backyard-ai
+  - tiny-titan
+  - off-brand
+  - best-demo
+  - off-grid
 ---
 
-# Iris — your father's eyes, by voice
+# 👁️ Iris — your father's eyes, by voice
 
-Iris is a voice-first assistant for blind and low-vision users. Open it on a
-phone, point the camera, **tap to describe** what's in front of you or **hold to
-ask a question** ("what color is this?", "read this label", "is anyone here?").
-It answers out loud, in Portuguese or English.
+> Built for the **Build Small Hackathon** · **Backyard AI** track · for my father, who is blind.
 
-Built for the **Build Small Hackathon** (Backyard AI track) — for my father.
+**Demo video:** _‹add link›_ · **Social post:** _‹add link›_
 
-## How it works (all small models, ≤ 32B total)
-- **Speech-to-text:** Whisper small (faster-whisper) — understands the question.
-- **Vision-language:** Qwen2.5-VL-3B-Instruct — describes the scene / reads text, in PT.
-- **Text-to-speech:** Piper (pt_BR) — speaks the answer.
+Iris is a voice-first assistant for blind and low-vision people. Open it on a phone,
+point the camera, and Iris tells you what's around you — out loud, in your language.
+There are no menus to find and no small buttons to hunt for: **the whole screen is
+the button**, and in live mode Iris simply listens.
 
-Custom voice-first frontend via `gr.Server` (tap-anywhere, high-contrast,
-camera auto-on). Inference runs in-Space on ZeroGPU — **no third-party model APIs**.
+## What it does
+- 👁️ **Describe** — tap anywhere: *"A table ahead with a mug on the right."*
+- 🎤 **Ask, hands-free** — in live mode just speak: *"what color is this shirt?"*, *"read this label"*, *"is anyone here?"*
+- 💵 **Read money & bills** — *"how much do I have?"* counts the banknotes; point at an electricity bill and it reads the **amount and due date**.
+- 💊 **Read medicine** — reads the dose and instructions on a box, exactly as written.
+- 📡 **Live mode** — double-tap (or say *"live mode"*): Iris describes the scene once, then **sparingly** announces *new* things that enter — without chattering.
 
-### Parameter budget
-Whisper-small (~0.24B) + Qwen2.5-VL-3B (~3B) ≈ **~3.3B total** — well under 32B.
+## How to use it
+- **Tap** anywhere → describe what's in front of you.
+- **Hold** → ask a question (release to send).
+- **Double-tap** → toggle live mode (hands-free listening + new-thing alerts). Say *"stop"* to turn it off.
+- First run: **choose your language by voice** ("say your language"). Language & accessibility toggles sit in the top corners.
+
+## Accessibility, treated as a first-class citizen
+- Camera turns on by itself; **tap anywhere** to act — no precise targets.
+- **Hands-free** continuous listening in live mode.
+- Big, labelled buttons for low vision + a **high-contrast / larger-text** toggle.
+- Keyboard focus rings, ARIA labels, haptic feedback; respects the OS *reduced-motion* and *more-contrast* settings.
+
+## How it works — small models only, ≤ 32B total
+| Stage | Model | Params |
+|---|---|---|
+| Speech-to-text | Whisper small (faster-whisper) | ~0.24B |
+| Vision-language | **Qwen3-VL-2B-Instruct** | ~2B |
+| Text-to-speech | Piper (pt_BR / en_US) | <1B |
+
+**≈ 2.5B total** — comfortably under 32B, and **every model is ≤ 4B** (Tiny Titan).
+Custom voice-first frontend via **`gr.Server`** (Off-Brand). Inference runs in-Space
+on **ZeroGPU** — no third-party model APIs.
 
 ## Not a mobility aid
-Iris describes the environment and reads text. It is **not** an obstacle-avoidance
-or navigation device and should not be relied on for physical safety.
+Iris describes the environment and reads text. It is **not** an obstacle-avoidance or
+navigation device and must not be relied on for physical safety.
 
 ## Run locally
 ```bash
 pip install -r requirements.txt
-python app.py            # http://localhost:7860
-# IRIS_WARMUP=1 pré-carrega os modelos
+IRIS_WARMUP=1 python app.py     # http://localhost:7860  (warmup preloads the models)
 ```
+
+## Credits
+Built by **Marcus Ramalho** for his father.
+STT: OpenAI Whisper (via faster-whisper) · Vision: **Qwen3-VL** · TTS: **Piper** · UI: Gradio (`gr.Server`).

app.py

@@ -1,11 +1,13 @@
-"""Iris — os olhos do seu pai por voz (HF Space, ZeroGPU).
+"""Iris — your father's eyes, by voice (HF Space, ZeroGPU).
 
-gr.Server: serve um frontend custom voz-first (frontend/index.html) e expõe a
-API `describe` (imagem + pergunta de voz opcional -> resposta em PT + áudio).
-Pipeline: Whisper (STT) -> Qwen2.5-VL (descrição/VQA em PT) -> Piper (TTS).
+gr.Server: serves a custom voice-first frontend (frontend/index.html) and exposes
+the API endpoints. Pipeline: Whisper (STT) -> Qwen3-VL (description / VQA) -> Piper (TTS).
 """
+import difflib
 import os
+import re
 import tempfile
+import unicodedata
 from pathlib import Path
 
 os.environ.setdefault("PYTORCH_CUDA_ALLOC_CONF", "expandable_segments:True")
@@ -22,22 +24,55 @@ app = Server(title="Iris")
 
 
 def _path(f):
-    """gr.Server entrega FileData como dict; aceita dict ou objeto."""
+    """gr.Server delivers FileData as a dict; accept dict or object."""
     if f is None:
         return None
     return f["path"] if isinstance(f, dict) else f.path
 
 
+# voice commands (live mode on/off) — robust to transcription errors (e.g. "modo ao fio")
+_OFF_RE = re.compile(r"\b(pare|parar|para de|deslig\w*|cancela\w*|stop|turn off|"
+                     r"silenci\w*|quieto|chega|modo manual|manual)\b")
+
+
+def _norm(s: str) -> str:
+    s = unicodedata.normalize("NFKD", s.lower())
+    s = "".join(c for c in s if not unicodedata.combining(c))
+    return s.strip().strip(".!?,").strip()
+
+
+def detect_command(text: str):
+    """Map a (possibly mis-transcribed) utterance to a live-mode command."""
+    if not text:
+        return None
+    t = _norm(text)
+    if _OFF_RE.search(t):
+        return "live_off"
+    on = ("ao vivo" in t or "ao fio" in t or "modo ao" in t or "descreva sempre" in t
+          or "descreva tudo" in t or "modo continuo" in t or "tempo real" in t
+          or "live" in t or "automatico" in t
+          or difflib.SequenceMatcher(None, t, "modo ao vivo").ratio() >= 0.7)
+    return "live_on" if on else None
+
+
 @app.api(name="describe")
-def describe(image: FileData, audio: FileData | None = None) -> dict:
-    """Recebe um frame da câmera (+ pergunta de voz opcional) e devolve a
-    descrição em PT + o áudio falado."""
-    apath = _path(audio)
-    question = stt.transcribe(apath) if apath else ""
-    answer = vlm.describe(_path(image), question)
+def describe(image: FileData, audio: FileData | None = None, lang: str = "pt",
+            qtext: str = "") -> dict:
+    """Camera frame + a question (as recorded audio OR as text from browser speech
+    recognition) -> a command OR a PT/EN description + audio."""
+    if qtext and qtext.strip():
+        question = qtext.strip()
+    else:
+        apath = _path(audio)
+        question = stt.transcribe(apath, language=lang) if apath else ""
+    cmd = detect_command(question)
+    if cmd:
+        print(f"[describe] command {cmd} <- {question!r}", flush=True)
+        return {"command": cmd, "question": question, "answer": "", "audio": None}
+    answer = vlm.describe(_path(image), question, lang=lang)
     if not answer.strip():
-        answer = "Não consegui descrever isso. Tente de novo."
-    wav = tts.synthesize(answer)
+        answer = "I couldn't describe that." if lang == "en" else "Não consegui descrever isso."
+    wav = tts.synthesize(answer, lang=lang)
     print(f"[describe] q={question!r} a={answer!r}", flush=True)
     return {
         "question": question,
@@ -46,6 +81,61 @@ def describe(image: FileData, audio: FileData | None = None) -> dict:
     }
 
 
+# Live mode: describe ONLY new/relevant things, sparingly (avoid verbosity).
+WATCH_PT = (
+    "Você observa o ambiente para uma pessoa cega, com PARCIMÔNIA. "
+    "Coisas JÁ DITAS recentemente (não repita nenhuma): \"{prev}\". "
+    "Olhe a cena AGORA. Se algo NOVO e relevante apareceu — que ainda NÃO foi dito "
+    "(uma pessoa, um objeto trazido, um texto, um obstáculo próximo) — diga em UMA "
+    "frase curta o que é. Se nada de novo relevante apareceu, responda APENAS: NADA."
+)
+WATCH_EN = (
+    "You watch the environment for a blind person, SPARINGLY. "
+    "Already said recently (do not repeat any): \"{prev}\". "
+    "Look at the scene NOW. If something NEW and relevant appeared — not already said "
+    "(a person, an object, text, a nearby obstacle) — say it in ONE short sentence. "
+    "If nothing new and relevant appeared, reply ONLY the word: NONE."
+)
+_QUIET = {"nada", "none", "nenhum", "nothing", "sem novidade", "no change"}
+
+
+@app.api(name="watch")
+def watch(image: FileData, prev: str = "", lang: str = "pt") -> dict:
+    """Live mode. First call (no history) describes the scene as a baseline;
+    after that, speak ONLY when something new/relevant entered (else stay quiet)."""
+    prev = (prev or "").strip()
+    if not prev:
+        # baseline: describe the current scene so the user hears the surroundings
+        answer = vlm.describe(_path(image), lang=lang)
+    else:
+        tmpl = WATCH_EN if lang == "en" else WATCH_PT
+        sys = tmpl.format(prev=prev)
+        q = "What is new?" if lang == "en" else "O que há de novo?"
+        answer = vlm.describe(_path(image), question=q, lang=lang, system=sys)
+    low = answer.strip().lower().strip(".!").strip()
+    if not low or low in _QUIET:
+        print(f"[watch] quiet ({answer!r})", flush=True)
+        return {"speak": False, "answer": ""}
+    wav = tts.synthesize(answer, lang=lang)
+    print(f"[watch] SPEAK: {answer!r}", flush=True)
+    return {"speak": True, "answer": answer, "audio": FileData(path=wav) if wav else None}
+
+
+@app.api(name="detect_lang")
+def detect_lang(audio: FileData) -> dict:
+    """Choose the language by voice: the person says 'português' or 'english'."""
+    text, detected = stt.transcribe_auto(_path(audio))
+    low = text.lower()
+    if "ingl" in low or "english" in low:
+        lang = "en"
+    elif "portug" in low or "brasil" in low:
+        lang = "pt"
+    else:
+        lang = "pt" if detected == "pt" else "en"
+    print(f"[detect_lang] {text!r} (det={detected}) -> {lang}", flush=True)
+    return {"lang": lang, "text": text}
+
+
 app.mount("/static", StaticFiles(directory=str(HERE / "frontend")), name="static")
 
 
@@ -58,11 +148,11 @@ if __name__ == "__main__":
     if os.environ.get("IRIS_WARMUP") == "1":
         print("Warmup...", flush=True)
         try:
-            vlm.describe(str(HERE.parent / "viability" / "samples" / "indoor.jpg"), "teste")
-            stt.transcribe(tts.synthesize("teste"))
+            vlm.describe(str(HERE.parent / "viability" / "samples" / "indoor.jpg"), "test")
+            stt.transcribe(tts.synthesize("test"))
             print("Warmup OK", flush=True)
         except Exception as e:
-            print("Warmup falhou:", e, flush=True)
+            print("Warmup failed:", e, flush=True)
     port = int(os.environ.get("GRADIO_SERVER_PORT", os.environ.get("PORT", 7860)))
     app.launch(server_name="0.0.0.0", server_port=port, show_error=True,
                allowed_paths=[tempfile.gettempdir()])

core/gpu.py

@@ -1,20 +1,20 @@
 """ZeroGPU helpers.
 
-`gpu` é um decorator: no HF Spaces (ZeroGPU) ele aloca uma GPU por chamada;
-localmente (sem o pacote `spaces`) vira um no-op transparente. Assim o mesmo
-código roda nas 3060 locais e no Space.
+`gpu` is a decorator: on HF Spaces (ZeroGPU) it allocates a GPU per call;
+locally (without the `spaces` package) it becomes a transparent no-op, so the
+same code runs on the local GPUs and on the Space.
 """
 import functools
 
 try:
-    import spaces  # disponível só nos Spaces ZeroGPU
+    import spaces  # available only on ZeroGPU Spaces
     _HAS_SPACES = True
 except Exception:
     _HAS_SPACES = False
 
 
 def gpu(duration: int = 60):
-    """Aloca GPU por `duration`s na chamada (ZeroGPU). No-op local."""
+    """Allocate a GPU for `duration`s on the call (ZeroGPU). No-op locally."""
     def decorate(fn):
         if _HAS_SPACES:
             return spaces.GPU(duration=duration)(fn)

core/stt.py

@@ -1,6 +1,6 @@
-"""Speech-to-text (Whisper via faster-whisper). Português por padrão.
+"""Speech-to-text (Whisper via faster-whisper). Portuguese by default.
 
-Não usa torch — faster-whisper roda em CTranslate2 (GPU se disponível, senão CPU).
+No torch needed — faster-whisper runs on CTranslate2 (GPU if available, else CPU).
 """
 import os
 
@@ -12,7 +12,7 @@ def _load():
     if _model is None:
         from faster_whisper import WhisperModel
         size = os.environ.get("IRIS_STT_MODEL", "small")
-        # CTranslate2 precisa das libs CUDA 12 (cublas/cudnn). Se faltarem, CPU.
+        # CTranslate2 needs CUDA 12 libs (cublas/cudnn). Fall back to CPU if missing.
         device = os.environ.get("IRIS_STT_DEVICE", "cpu")
         if device == "cuda":
             try:
@@ -26,9 +26,21 @@ def _load():
 
 def transcribe(audio_path: str, language: str = "pt") -> str:
     if not audio_path or not os.path.exists(audio_path):
-        print(f"[stt] sem audio: {audio_path!r}", flush=True)
+        print(f"[stt] no audio: {audio_path!r}", flush=True)
         return ""
     segments, info = _load().transcribe(audio_path, language=language)
     text = " ".join(s.text for s in segments).strip()
     print(f"[stt] {audio_path} ({getattr(info, 'duration', '?')}s) -> {text!r}", flush=True)
     return text
+
+
+def transcribe_auto(audio_path: str):
+    """Transcribe WITHOUT forcing a language; returns (text, detected_language).
+    Used for choosing the language by voice."""
+    if not audio_path or not os.path.exists(audio_path):
+        return "", "en"
+    segments, info = _load().transcribe(audio_path, language=None)
+    text = " ".join(s.text for s in segments).strip()
+    lang = getattr(info, "language", "en")
+    print(f"[stt-auto] -> {text!r} (lang={lang})", flush=True)
+    return text, lang

core/tts.py

@@ -1,35 +1,37 @@
-"""Text-to-speech (Piper, pt_BR). Retorna caminho de um .wav.
+"""Text-to-speech (Piper). Returns the path to a .wav. Bilingual PT/EN.
 
-Piper roda em onnxruntime (sem torch). A voz é baixada do repo rhasspy/piper-voices.
+Piper runs on onnxruntime (no torch). Voices come from rhasspy/piper-voices.
 """
 import os
 import tempfile
 import wave
 
-_voice = None
 _REPO = "rhasspy/piper-voices"
-# voz pt_BR padrão; trocar via IRIS_TTS_VOICE
-_VOICE = os.environ.get("IRIS_TTS_VOICE", "pt/pt_BR/faber/medium/pt_BR-faber-medium")
+_VOICES = {
+    "pt": os.environ.get("IRIS_TTS_VOICE_PT", "pt/pt_BR/faber/medium/pt_BR-faber-medium"),
+    "en": os.environ.get("IRIS_TTS_VOICE_EN", "en/en_US/amy/medium/en_US-amy-medium"),
+}
+_cache = {}
 
 
-def _load():
-    global _voice
-    if _voice is None:
+def _load(lang: str):
+    if lang not in _cache:
         from huggingface_hub import hf_hub_download
         from piper import PiperVoice
-        onnx = hf_hub_download(_REPO, f"{_VOICE}.onnx")
-        conf = hf_hub_download(_REPO, f"{_VOICE}.onnx.json")
-        _voice = PiperVoice.load(onnx, config_path=conf)
-    return _voice
+        name = _VOICES.get(lang, _VOICES["pt"])
+        onnx = hf_hub_download(_REPO, f"{name}.onnx")
+        conf = hf_hub_download(_REPO, f"{name}.onnx.json")
+        _cache[lang] = PiperVoice.load(onnx, config_path=conf)
+    return _cache[lang]
 
 
-def synthesize(text: str) -> str | None:
+def synthesize(text: str, lang: str = "pt") -> str | None:
     if not text or not text.strip():
         return None
-    voice = _load()
+    voice = _load("en" if lang == "en" else "pt")
     chunks = list(voice.synthesize(text))
     if not chunks:
-        print(f"[tts] sem áudio para texto: {text!r}", flush=True)
+        print(f"[tts] no audio for text: {text!r}", flush=True)
         return None
     path = tempfile.mktemp(suffix=".wav")
     with wave.open(path, "wb") as wf:

core/vlm.py

@@ -1,24 +1,40 @@
-"""Vision-language: descreve / responde sobre uma imagem, em PT.
+"""Vision-language: describe / answer about an image, in PT/EN.
 
-Backend plugável via IRIS_VLM_MODEL:
-  - Qwen/Qwen2.5-VL-3B-Instruct (default)
-  - openbmb/MiniCPM-V-4.6  -> track OpenBMB ($2.5k); API model.chat()
-O VLM É o gerador do texto que vai pra voz — sem LLM narrador separado.
+Generic loader (AutoModelForImageTextToText) — supports:
+  - Qwen/Qwen3-VL-2B-Instruct (default — light, fast, strong OCR)
+  - Qwen/Qwen2.5-VL-3B-Instruct, openbmb/MiniCPM-V-4.6, etc.
+Swappable via IRIS_VLM_MODEL. The VLM IS the text generator for speech.
 """
 import os
 
 _model = None
-_aux = None  # processor (qwen) ou tokenizer (minicpm)
-MODEL_ID = os.environ.get("IRIS_VLM_MODEL", "Qwen/Qwen2.5-VL-3B-Instruct")
+_aux = None
+MODEL_ID = os.environ.get("IRIS_VLM_MODEL", "Qwen/Qwen3-VL-2B-Instruct")
+DOWNSAMPLE = os.environ.get("IRIS_DOWNSAMPLE", "4x")  # MiniCPM only (detail for OCR)
 
 SYSTEM_PT = (
     "Você é os olhos de uma pessoa cega. RESPONDA OBRIGATORIAMENTE EM PORTUGUÊS "
     "DO BRASIL, em no máximo duas frases curtas, dizendo só o que é relevante e "
-    "útil sobre a cena. Não comece com 'a imagem mostra'. Se houver texto "
-    "importante (rótulo, placa, remédio), leia-o exatamente como está."
+    "útil sobre a cena. Não comece com 'a imagem mostra'. "
+    "Se houver texto importante (rótulo, placa, remédio), leia-o exatamente como está. "
+    "Se houver DINHEIRO (cédulas ou moedas de real), identifique cada valor e diga o TOTAL. "
+    "Se for uma CONTA, boleto ou documento, leia o VALOR TOTAL e a DATA DE VENCIMENTO."
 )
+SYSTEM_EN = (
+    "You are the eyes of a blind person. ALWAYS REPLY IN ENGLISH, in at most two "
+    "short sentences, saying only what is relevant and useful about the scene. Do "
+    "not start with 'the image shows'. "
+    "If there is important text (label, sign, medicine), read it exactly as written. "
+    "If there is MONEY (banknotes or coins), identify each value and state the TOTAL. "
+    "If it is a BILL or document, read the TOTAL AMOUNT and the DUE DATE."
+)
+
 
-DOWNSAMPLE = os.environ.get("IRIS_DOWNSAMPLE", "4x")  # 4x = detalhe fino (OCR); 16x = rápido
+def _prompt(lang):
+    """Return (system_prompt, default_question) for the language."""
+    if lang == "en":
+        return SYSTEM_EN, "What is in front of me?"
+    return SYSTEM_PT, "O que há à minha frente?"
 
 
 def _family() -> str:
@@ -29,20 +45,13 @@ def _load():
     global _model, _aux
     if _model is None:
         import torch
-        if _family() == "minicpm":
-            from transformers import AutoModelForImageTextToText, AutoProcessor
-            _model = AutoModelForImageTextToText.from_pretrained(
-                MODEL_ID, trust_remote_code=True, torch_dtype=torch.float16,
-                low_cpu_mem_usage=True, device_map="cuda:0",
-            ).eval()
-            _aux = AutoProcessor.from_pretrained(MODEL_ID, trust_remote_code=True)
-        else:
-            from transformers import Qwen2_5_VLForConditionalGeneration, AutoProcessor
-            _model = Qwen2_5_VLForConditionalGeneration.from_pretrained(
-                MODEL_ID, torch_dtype=torch.float16, device_map="cuda:0",
-                low_cpu_mem_usage=True,
-            ).eval()
-            _aux = AutoProcessor.from_pretrained(MODEL_ID)
+        from transformers import AutoModelForImageTextToText, AutoProcessor
+        kw = {"trust_remote_code": True} if _family() == "minicpm" else {}
+        _model = AutoModelForImageTextToText.from_pretrained(
+            MODEL_ID, torch_dtype=torch.float16, device_map="cuda:0",
+            low_cpu_mem_usage=True, **kw,
+        ).eval()
+        _aux = AutoProcessor.from_pretrained(MODEL_ID, **kw)
     return _model, _aux
 
 
@@ -51,9 +60,9 @@ def _to_pil(image):
     if isinstance(image, str):
         image = Image.open(image)
     elif not isinstance(image, Image.Image):
-        image = Image.fromarray(image)  # frame numpy da webcam
+        image = Image.fromarray(image)  # numpy frame from the webcam
     image = image.convert("RGB")
-    image.thumbnail((1024, 1024))  # menos tokens de visão -> mais rápido; mantém OCR
+    image.thumbnail((1024, 1024))  # fewer vision tokens -> faster; still good OCR
     return image
 
 
@@ -61,43 +70,32 @@ from .gpu import gpu
 
 
 @gpu(duration=60)
-def describe(image, question: str = "") -> str:
+def describe(image, question: str = "", lang: str = "pt", system: str = None) -> str:
+    import torch
     image = _to_pil(image)
-    user = (question or "").strip() or "O que há à minha frente?"
+    sys_prompt, default_q = _prompt(lang)
+    if system:
+        sys_prompt = system
+    user = (question or "").strip() or default_q
     model, aux = _load()
 
-    if _family() == "minicpm":
-        import torch
-        messages = [{"role": "user", "content": [
-            {"type": "image", "image": image},
-            {"type": "text", "text": f"{SYSTEM_PT}\n\nPergunta: {user}"},
-        ]}]
-        inputs = aux.apply_chat_template(
-            messages, tokenize=True, add_generation_prompt=True,
-            return_dict=True, return_tensors="pt",
-            downsample_mode=DOWNSAMPLE, max_slice_nums=36,
-        ).to(model.device)
-        with torch.no_grad():
-            generated = model.generate(**inputs, downsample_mode=DOWNSAMPLE,
-                                       max_new_tokens=96, do_sample=False)
-        trimmed = [o[len(i):] for i, o in zip(inputs.input_ids, generated)]
-        return aux.batch_decode(trimmed, skip_special_tokens=True)[0].strip()
-
-    # Qwen2.5-VL
-    import torch
-    from qwen_vl_utils import process_vision_info
     messages = [
-        {"role": "system", "content": SYSTEM_PT},
+        {"role": "system", "content": sys_prompt},
         {"role": "user", "content": [
             {"type": "image", "image": image},
             {"type": "text", "text": user},
         ]},
     ]
-    text = aux.apply_chat_template(messages, tokenize=False, add_generation_prompt=True)
-    image_inputs, video_inputs = process_vision_info(messages)
-    inputs = aux(text=[text], images=image_inputs, videos=video_inputs,
-                 padding=True, return_tensors="pt").to(model.device)
+    tmpl_kw, gen_kw = {}, {}
+    if _family() == "minicpm":
+        tmpl_kw = {"downsample_mode": DOWNSAMPLE, "max_slice_nums": 36}
+        gen_kw = {"downsample_mode": DOWNSAMPLE}
+
+    inputs = aux.apply_chat_template(
+        messages, tokenize=True, add_generation_prompt=True,
+        return_dict=True, return_tensors="pt", **tmpl_kw,
+    ).to(model.device)
     with torch.no_grad():
-        generated = model.generate(**inputs, max_new_tokens=96, do_sample=False)
-    trimmed = generated[:, inputs.input_ids.shape[1]:]
+        generated = model.generate(**inputs, max_new_tokens=96, do_sample=False, **gen_kw)
+    trimmed = [o[len(i):] for i, o in zip(inputs.input_ids, generated)]
     return aux.batch_decode(trimmed, skip_special_tokens=True)[0].strip()

frontend/app.js

@@ -1,49 +1,87 @@
-import { Client, handle_file } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
+import { Client, handle_file } from "https://esm.sh/@gradio/client";
 
 const $ = (id) => document.getElementById(id);
 const cam = $("cam"), canvas = $("canvas"), statusEl = $("status"),
       answerEl = $("answer"), hintEl = $("hint"), langBtn = $("lang"),
-      player = $("player"), stage = $("stage");
+      player = $("player"), stage = $("stage"),
+      btnAsk = $("btn-ask"), btnDescribe = $("btn-describe"),
+      btnLive = $("btn-live"), a11yBtn = $("a11y");
+
+function vibrate(ms) { try { navigator.vibrate && navigator.vibrate(ms); } catch (e) {} }
+
+// ---- idioma (detecta do navegador; trocável por voz no onboarding ou pelo botão) ----
+let lang = (navigator.language || "en").toLowerCase().startsWith("pt") ? "pt" : "en";
 
-// ---- i18n (EN default + PT) ----
-let lang = "en";
 const T = {
   en: { idle: "Iris", listening: "Listening…", thinking: "Thinking…",
-        hint: "Tap to describe · hold to ask", camErr: "Camera blocked — allow access",
-        err: "Something went wrong" },
+        hint: "Tap: describe · Hold: ask · Double-tap: live",
+        camErr: "Camera blocked — allow access", err: "Something went wrong",
+        langListen: "Listening… say your language",
+        welcome: "Welcome to Iris. Tap the screen to describe what is in front of you. Hold to ask a question. Double-tap to turn live mode on or off, which announces new things around you.",
+        liveOn: "Live mode on.", liveOff: "Live mode off.", confLang: "English selected.",
+        bAsk: "Ask", bDescribe: "Describe", bLive: "Live" },
   pt: { idle: "Iris", listening: "Ouvindo…", thinking: "Pensando…",
-        hint: "Toque para descrever · segure para perguntar", camErr: "Câmera bloqueada — permita o acesso",
-        err: "Algo deu errado" },
+        hint: "Toque: descrever · Segurar: perguntar · Toque duplo: ao vivo",
+        camErr: "Câmera bloqueada — permita o acesso", err: "Algo deu errado",
+        langListen: "Ouvindo… diga seu idioma",
+        welcome: "Bem-vindo ao Iris. Toque na tela para descrever o que está à sua frente. Segure para fazer uma pergunta. Toque duas vezes para ligar ou desligar o modo ao vivo, que avisa o que aparece de novo à sua volta.",
+        liveOn: "Modo ao vivo ligado.", liveOff: "Modo ao vivo desligado.", confLang: "Português selecionado.",
+        bAsk: "Perguntar", bDescribe: "Descrever", bLive: "Ao vivo" },
 };
 const t = (k) => T[lang][k];
+const LANG_PROMPT = "Segure e diga seu idioma · Hold and say your language";
 
 function setState(s, msg) {
   document.body.dataset.state = s || "";
-  if (msg !== undefined) statusEl.textContent = msg;
+  if (msg !== undefined) statusEl.textContent = (liveOn ? "● " : "") + msg;
+}
+// fala de UI via voz do navegador (instruções, confirmações)
+function speak(text) {
+  try {
+    speechSynthesis.cancel();
+    const u = new SpeechSynthesisUtterance(text);
+    u.lang = lang === "pt" ? "pt-BR" : "en-US";
+    speechSynthesis.speak(u);
+  } catch (e) { console.error("speak:", e); }
 }
 
+// ---- estado ----
+let onboarded = false;
+try { onboarded = localStorage.getItem("iris_onboarded") === "1"; } catch (e) {}
+let mode = onboarded ? "normal" : "onboarding";
+let busy = false;
+let liveOn = false, liveTimer = null;
+let holding = false, recording = false, holdTimer = null;
+const HOLD_MS = 350;
+
 langBtn.onclick = (e) => {
   e.stopPropagation();
   lang = lang === "en" ? "pt" : "en";
-  langBtn.textContent = lang.toUpperCase();
-  hintEl.textContent = t("hint");
   document.documentElement.lang = lang;
-  if (!busy) statusEl.textContent = t("idle");
+  langBtn.textContent = lang.toUpperCase();
+  hintEl.textContent = onboarded ? t("hint") : "";
+  updateLabels();
+  if (!busy) setState("", onboarded ? t("idle") : LANG_PROMPT);
 };
 
-// ---- câmera ao vivo (auto) ----
+// ---- destrava o áudio (autoplay) no 1º toque ----
+const SILENT = "data:audio/wav;base64,UklGRiQAAABXQVZFZm10IBAAAAABAAEARKwAAIhYAQACABAAZGF0YQAAAAA=";
+let audioUnlocked = false;
+function unlockAudio() {
+  if (audioUnlocked) return;
+  audioUnlocked = true;
+  player.src = SILENT;
+  player.play().catch(() => {});
+}
+
+// ---- câmera ao vivo ----
 async function startCamera() {
-  const tries = [
-    { video: { facingMode: { ideal: "environment" } }, audio: false },
-    { video: true, audio: false },
-  ];
-  for (const c of tries) {
+  for (const c of [{ video: { facingMode: { ideal: "environment" } }, audio: false }, { video: true, audio: false }]) {
     try { cam.srcObject = await navigator.mediaDevices.getUserMedia(c); return; }
-    catch (e) { /* tenta o próximo */ }
+    catch (e) {}
   }
   setState("", t("camErr"));
 }
-
 function grabFrame() {
   const w = cam.videoWidth, h = cam.videoHeight;
   if (!w || !h) return Promise.resolve(null);
@@ -52,8 +90,8 @@ function grabFrame() {
   return new Promise((res) => canvas.toBlob(res, "image/jpeg", 0.85));
 }
 
-// ---- microfone (grava on-hold) ----
-let micStream = null, recorder = null, chunks = [];
+// ---- microfone ----
+let micStream = null, chunks = [], recorder = null;
 async function startRec() {
   try { if (!micStream) micStream = await navigator.mediaDevices.getUserMedia({ audio: true }); }
   catch (e) { return false; }
@@ -73,40 +111,177 @@ function stopRec() {
 
 // ---- backend ----
 let client = null;
-let busy = false;
 
-async function send(frame, audio) {
+async function send(frame, audio, qtext = "") {
   if (busy) return;
   busy = true;
   answerEl.textContent = "";
   setState("thinking", t("thinking"));
   try {
-    const payload = { image: handle_file(frame) };
+    const payload = { image: handle_file(frame), lang };
     if (audio) payload.audio = handle_file(audio);
+    if (qtext) payload.qtext = qtext;
     const result = await client.predict("/describe", payload);
     const out = Array.isArray(result.data) ? result.data[0] : result.data;
+    console.log("Iris result:", out);
+    if (out && out.command) { busy = false; handleCommand(out.command); return; }
     answerEl.textContent = (out && out.answer) || "";
     setState("speaking", "");
-    const url = out && out.audio && (out.audio.url || out.audio.path);
-    if (url) { player.src = url; await player.play().catch(() => {}); }
-    else { resetSoon(); }
+    const a = out && out.audio;
+    let url = a && a.url;
+    if (!url && a && a.path) url = window.location.origin + "/gradio_api/file=" + a.path;
+    if (url) {
+      srMuted = true;
+      player.src = url;
+      try { await player.play(); } catch (err) { console.error("play:", err); }
+    } else { resetSoon(); }
   } catch (e) {
-    console.error(e);
+    console.error("describe:", e);
     setState("", t("err"));
     resetSoon();
   } finally {
     busy = false;
   }
 }
-function resetSoon() { setTimeout(() => { if (!busy) setState("", t("idle")); }, 600); }
-player.addEventListener("ended", () => { if (!busy) setState("", t("idle")); });
+function resetSoon() { setTimeout(() => { srMuted = false; if (!busy) setState("", t("idle")); }, 600); }
+player.addEventListener("ended", () => { srMuted = false; if (!busy) setState("", t("idle")); });
 
-// ---- interação: tap = descrever · segurar = perguntar ----
-let holding = false, recording = false, holdTimer = null;
-const HOLD_MS = 350;
+// ---- escolha de idioma por voz (onboarding) ----
+async function chooseLang(audio) {
+  if (!audio || !client) { setState("", LANG_PROMPT); return; }
+  busy = true; setState("thinking", t("thinking"));
+  try {
+    const result = await client.predict("/detect_lang", { audio: handle_file(audio) });
+    const out = Array.isArray(result.data) ? result.data[0] : result.data;
+    lang = (out && out.lang === "en") ? "en" : "pt";
+    document.documentElement.lang = lang;
+    langBtn.textContent = lang.toUpperCase();
+    onboarded = true; mode = "normal";
+    try { localStorage.setItem("iris_onboarded", "1"); } catch (e) {}
+    hintEl.textContent = t("hint");
+    setState("", t("idle"));
+    speak(t("confLang") + " " + t("welcome"));
+  } catch (e) {
+    console.error("detect_lang:", e);
+    setState("", LANG_PROMPT);
+  } finally { busy = false; }
+}
+
+// ---- modo ao vivo (ligado/desligado por comando de voz) ----
+function handleCommand(cmd) {
+  if (cmd === "live_on") setLive(true);
+  else if (cmd === "live_off") setLive(false);
+}
+const LIVE_INTERVAL = 2500;   // checa a cena a cada 2.5s
+const LIVE_THRESHOLD = 14;    // mudança média por pixel (0-255) p/ disparar o VLM
+let lastSig = null, history = [];   // histórico das últimas descrições (anti-repetição)
+
+function setLive(on) {
+  liveOn = on;
+  btnLive.setAttribute("aria-pressed", on ? "true" : "false");
+  btnLive.classList.toggle("on", on);
+  vibrate(on ? [20, 40, 20] : 20);
+  speak(on ? t("liveOn") : t("liveOff"));
+  setState("", t("idle"));
+  clearInterval(liveTimer); liveTimer = null;
+  lastSig = null; history = [];
+  if (on) { liveTimer = setInterval(liveTick, LIVE_INTERVAL); startListening(); }
+  else stopListening();
+}
+
+// ---- hands-free continuous listening (live mode) via Web Speech API ----
+let recog = null, listening = false, srMuted = false;
+function setupRecognition() {
+  const SR = window.SpeechRecognition || window.webkitSpeechRecognition;
+  if (!SR) { console.warn("SpeechRecognition não suportado neste navegador"); return null; }
+  const r = new SR();
+  r.continuous = true;
+  r.interimResults = false;
+  r.onresult = (e) => {
+    if (srMuted || busy) return;
+    const txt = e.results[e.results.length - 1][0].transcript.trim();
+    if (txt) onVoice(txt);
+  };
+  r.onend = () => { if (listening) { try { r.start(); } catch (e) {} } };  // keep alive
+  r.onerror = (e) => { console.log("SR:", e.error); };
+  return r;
+}
+function startListening() {
+  if (!recog) recog = setupRecognition();
+  if (!recog || listening) return;
+  listening = true;
+  recog.lang = lang === "pt" ? "pt-BR" : "en-US";
+  try { recog.start(); } catch (e) {}
+}
+function stopListening() {
+  listening = false;
+  if (recog) { try { recog.stop(); } catch (e) {} }
+}
+async function onVoice(txt) {
+  if (busy) return;
+  const frame = await grabFrame();
+  if (frame) send(frame, null, txt);   // pergunta por texto (do reconhecimento do navegador)
+}
+
+// assinatura visual barata (32x32 cinza) p/ detectar mudança sem chamar o modelo
+function frameSignature() {
+  if (!cam.videoWidth) return null;
+  const c = document.createElement("canvas"); c.width = 32; c.height = 32;
+  const ctx = c.getContext("2d");
+  ctx.drawImage(cam, 0, 0, 32, 32);
+  const d = ctx.getImageData(0, 0, 32, 32).data;
+  const g = new Uint8Array(1024);
+  for (let i = 0; i < 1024; i++) g[i] = (d[i * 4] + d[i * 4 + 1] + d[i * 4 + 2]) / 3;
+  return g;
+}
+function changeAmount(a, b) {
+  if (!a || !b) return 999;
+  let s = 0;
+  for (let i = 0; i < a.length; i++) s += Math.abs(a[i] - b[i]);
+  return s / a.length;
+}
+
+async function liveTick() {
+  if (busy || mode !== "normal" || !liveOn || !player.paused) return;
+  const sig = frameSignature();
+  if (!sig) return;
+  if (lastSig && changeAmount(lastSig, sig) < LIVE_THRESHOLD) return; // cena parada -> silêncio
+  lastSig = sig;
+  const frame = await grabFrame();
+  if (frame) sendWatch(frame);
+}
 
-stage.addEventListener("pointerdown", () => {
+async function sendWatch(frame) {
+  if (busy) return;
+  busy = true;
+  try {
+    const result = await client.predict("/watch", { image: handle_file(frame), prev: history.join(" · "), lang });
+    const out = Array.isArray(result.data) ? result.data[0] : result.data;
+    if (out && out.speak) {
+      if (out.answer) { history.push(out.answer); if (history.length > 5) history.shift(); }
+      answerEl.textContent = out.answer || "";
+      setState("speaking", "");
+      const a = out.audio;
+      let url = a && a.url;
+      if (!url && a && a.path) url = window.location.origin + "/gradio_api/file=" + a.path;
+      if (url) { srMuted = true; player.src = url; try { await player.play(); } catch (e) { console.error("play:", e); } }
+    }
+  } catch (e) { console.error("watch:", e); }
+  finally { busy = false; }
+}
+
+// ---- interação ----
+stage.addEventListener("pointerdown", async () => {
+  if (mode === "onboarding") {
+    if (busy) return;
+    unlockAudio();
+    recording = await startRec();
+    if (recording) setState("listening", t("langListen"));
+    return;
+  }
+  if (liveOn) { speechSynthesis.cancel(); player.pause(); }
   if (busy) return;
+  unlockAudio();
   holding = true;
   stage.classList.add("armed");
   holdTimer = setTimeout(async () => {
@@ -115,25 +290,112 @@ stage.addEventListener("pointerdown", () => {
   }, HOLD_MS);
 });
 
+let lastTapTime = 0, tapTimer = null;
+const DOUBLE_MS = 320;   // janela do duplo-toque
+
 async function endPress() {
+  if (mode === "onboarding") {
+    if (!recording) return;
+    recording = false;
+    const audio = await stopRec();
+    return chooseLang(audio);
+  }
   if (!holding) return;
   holding = false;
   stage.classList.remove("armed");
   clearTimeout(holdTimer);
-  const frame = await grabFrame();
-  if (!frame) { setState("", t("camErr")); return; }
-  if (recording) { const audio = await stopRec(); recording = false; send(frame, audio); }
-  else { send(frame, null); }  // tap rápido = só descrever
+
+  if (recording) {                       // segurou e falou = pergunta
+    recording = false;
+    const frame = await grabFrame();
+    const audio = await stopRec();
+    if (frame) send(frame, audio); else setState("", t("camErr"));
+    return;
+  }
+
+  // toque rápido: duplo-toque liga/desliga ao vivo; toque simples descreve
+  const now = performance.now();
+  if (now - lastTapTime < DOUBLE_MS) {
+    lastTapTime = 0;
+    if (tapTimer) { clearTimeout(tapTimer); tapTimer = null; }
+    setLive(!liveOn);
+  } else {
+    lastTapTime = now;
+    if (tapTimer) clearTimeout(tapTimer);
+    tapTimer = setTimeout(async () => {
+      tapTimer = null;
+      const frame = await grabFrame();
+      if (frame) send(frame, null); else setState("", t("camErr"));
+    }, DOUBLE_MS);
+  }
 }
 stage.addEventListener("pointerup", endPress);
 stage.addEventListener("pointercancel", endPress);
 
+// ---- botões explícitos (baixa visão / teclado / leitor de tela) ----
+btnDescribe.addEventListener("click", async (e) => {
+  e.stopPropagation();
+  if (mode !== "normal" || busy) return;
+  unlockAudio(); vibrate(10);
+  const frame = await grabFrame();
+  if (frame) send(frame, null); else setState("", t("camErr"));
+});
+
+let askRecBtn = false;
+btnAsk.addEventListener("pointerdown", async (e) => {
+  e.stopPropagation();
+  if (mode !== "normal" || busy) return;
+  unlockAudio(); vibrate(10);
+  askRecBtn = await startRec();
+  if (askRecBtn) setState("listening", t("listening"));
+});
+async function btnAskEnd(e) {
+  if (e) e.stopPropagation();
+  if (!askRecBtn) return; askRecBtn = false;
+  const frame = await grabFrame();
+  const audio = await stopRec();
+  if (frame) send(frame, audio); else setState("", t("camErr"));
+}
+btnAsk.addEventListener("pointerup", btnAskEnd);
+btnAsk.addEventListener("pointerleave", btnAskEnd);
+btnAsk.addEventListener("pointercancel", btnAskEnd);
+
+btnLive.addEventListener("click", (e) => {
+  e.stopPropagation();
+  if (mode !== "normal") return;
+  unlockAudio();
+  setLive(!liveOn);
+});
+
+// ---- acessibilidade: contraste máximo + texto maior (persistente) ----
+let boost = false;
+try { boost = localStorage.getItem("iris_a11y") === "1"; } catch (e) {}
+document.body.classList.toggle("a11y-boost", boost);
+a11yBtn.setAttribute("aria-pressed", boost ? "true" : "false");
+a11yBtn.addEventListener("click", (e) => {
+  e.stopPropagation();
+  boost = !boost;
+  document.body.classList.toggle("a11y-boost", boost);
+  a11yBtn.setAttribute("aria-pressed", boost ? "true" : "false");
+  try { localStorage.setItem("iris_a11y", boost ? "1" : "0"); } catch (e) {}
+  vibrate(10);
+});
+
+// rótulos dos botões conforme idioma
+function updateLabels() {
+  btnAsk.querySelector(".ctl-lbl").textContent = t("bAsk");
+  btnDescribe.querySelector(".ctl-lbl").textContent = t("bDescribe");
+  btnLive.querySelector(".ctl-lbl").textContent = t("bLive");
+}
+
 // ---- boot ----
 (async () => {
+  document.documentElement.lang = lang;
   langBtn.textContent = lang.toUpperCase();
-  hintEl.textContent = t("hint");
-  statusEl.textContent = t("idle");
+  updateLabels();
+  hintEl.textContent = onboarded ? t("hint") : "";
+  setState("", onboarded ? t("idle") : LANG_PROMPT);
   await startCamera();
-  try { client = await Client.connect(window.location.origin); }
-  catch (e) { console.error(e); setState("", t("err")); }
+  try { client = await Client.connect(window.location.origin); console.log("Iris conectado"); }
+  catch (e) { console.error("connect:", e); setState("", t("err")); }
 })();

frontend/index.html

@@ -3,27 +3,57 @@
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover" />
+  <meta name="theme-color" content="#05060a" />
   <title>Iris</title>
   <link rel="stylesheet" href="/static/style.css" />
 </head>
 <body>
   <!-- câmera ao vivo (fundo) -->
-  <video id="cam" autoplay playsinline muted></video>
+  <video id="cam" autoplay playsinline muted aria-hidden="true"></video>
   <canvas id="canvas" hidden></canvas>
 
-  <!-- alvo único: toda a tela é o botão -->
-  <main id="stage" role="application" aria-label="Iris">
-    <div id="halo"></div>
-    <p id="status" aria-live="assertive">Iris</p>
+  <!-- barra superior: acessibilidade + idioma -->
+  <header id="topbar">
+    <button id="a11y" class="chip" aria-pressed="false" aria-label="High contrast and larger text">
+      <span aria-hidden="true">Aa</span>
+    </button>
+    <button id="lang" class="chip" aria-label="Language">PT</button>
+  </header>
+
+  <!-- palco: a tela inteira é tocável (toque=descrever, segurar=perguntar, toque duplo=ao vivo) -->
+  <main id="stage" aria-label="Iris. Tap to describe, hold to ask, double tap for live mode.">
+    <div id="halo" aria-hidden="true"></div>
+    <p id="status" role="status" aria-live="assertive">Iris</p>
     <p id="answer" aria-live="polite"></p>
-    <p id="hint">Toque para descrever · segure para perguntar</p>
+    <p id="hint" aria-hidden="true"></p>
   </main>
 
-  <!-- idioma -->
-  <button id="lang" aria-label="Idioma">PT</button>
+  <!-- controles explícitos (baixa visão / teclado / leitor de tela) -->
+  <nav id="controls" aria-label="Actions">
+    <button id="btn-ask" class="ctl" aria-label="Ask a question. Press and hold, then speak.">
+      <span class="ic" aria-hidden="true">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <rect x="9" y="2" width="6" height="12" rx="3"/><path d="M5 11a7 7 0 0 0 14 0"/><line x1="12" y1="18" x2="12" y2="22"/>
+        </svg>
+      </span><span class="ctl-lbl">Ask</span>
+    </button>
+    <button id="btn-describe" class="ctl primary" aria-label="Describe what is in front of me">
+      <span class="ic" aria-hidden="true">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z"/><circle cx="12" cy="12" r="3"/>
+        </svg>
+      </span><span class="ctl-lbl">Describe</span>
+    </button>
+    <button id="btn-live" class="ctl" aria-pressed="false" aria-label="Live mode: announce new things around you">
+      <span class="ic" aria-hidden="true">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <circle cx="12" cy="12" r="2"/><path d="M16.2 7.8a6 6 0 0 1 0 8.5M7.8 16.2a6 6 0 0 1 0-8.5M19 5a10 10 0 0 1 0 14M5 19A10 10 0 0 1 5 5"/>
+        </svg>
+      </span><span class="ctl-lbl">Live</span>
+    </button>
+  </nav>
 
   <audio id="player" playsinline></audio>
-
   <script type="module" src="/static/app.js"></script>
 </body>
 </html>

frontend/style.css

@@ -1,9 +1,13 @@
 :root {
   --bg: #05060a;
   --fg: #ffffff;
+  --muted: rgba(255, 255, 255, .82);
   --accent: #ff7a18;
-  --accent-2: #00d4ff;
+  --listen: #00d4ff;
   --ok: #36d399;
+  --glass: rgba(16, 18, 28, .55);
+  --stroke: rgba(255, 255, 255, .26);
+  --focus: #ffd166;
 }
 
 * { box-sizing: border-box; margin: 0; padding: 0; }
@@ -15,94 +19,108 @@ html, body {
   font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
   overflow: hidden;
   -webkit-tap-highlight-color: transparent;
-  user-select: none;
 }
 
-/* câmera ao vivo como fundo, escurecida pra contraste do texto */
+/* foco SEMPRE visível (acessibilidade de teclado) */
+:focus-visible {
+  outline: 4px solid var(--focus);
+  outline-offset: 3px;
+  border-radius: 14px;
+}
+
 #cam {
-  position: fixed;
-  inset: 0;
-  width: 100%;
-  height: 100%;
+  position: fixed; inset: 0;
+  width: 100%; height: 100%;
   object-fit: cover;
-  filter: brightness(0.45) saturate(1.05);
+  filter: brightness(.42) saturate(1.05);
   z-index: 0;
 }
 
-/* a tela inteira é o botão */
+/* palco tocável */
 #stage {
-  position: fixed;
-  inset: 0;
-  z-index: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  padding: 6vmin;
-  gap: 3vmin;
-  cursor: pointer;
+  position: fixed; inset: 0; z-index: 1;
+  display: flex; flex-direction: column;
+  align-items: center; justify-content: center;
+  text-align: center; padding: 8vmin 6vmin 24vmin;
+  gap: 2.4vmin; cursor: pointer; user-select: none;
 }
 
-/* halo central que reage ao estado */
 #halo {
-  position: absolute;
-  width: 64vmin;
-  height: 64vmin;
-  border-radius: 50%;
-  background: radial-gradient(circle, rgba(255,122,24,0.18), transparent 62%);
-  transition: transform .25s ease, background .25s ease;
-  pointer-events: none;
+  position: absolute; width: 60vmin; height: 60vmin; border-radius: 50%;
+  background: radial-gradient(circle, rgba(255,122,24,.16), transparent 62%);
+  transition: transform .25s ease, background .25s ease; pointer-events: none;
 }
-body[data-state="listening"] #halo { background: radial-gradient(circle, rgba(0,212,255,0.30), transparent 60%); transform: scale(1.12); animation: pulse 1.1s ease-in-out infinite; }
-body[data-state="thinking"] #halo { background: radial-gradient(circle, rgba(255,122,24,0.28), transparent 60%); animation: spin 1.4s linear infinite; }
-body[data-state="speaking"] #halo { background: radial-gradient(circle, rgba(54,211,153,0.28), transparent 60%); transform: scale(1.06); }
-
-@keyframes pulse { 0%,100%{transform:scale(1.10)} 50%{transform:scale(1.22)} }
+body[data-state="listening"] #halo { background: radial-gradient(circle, rgba(0,212,255,.34), transparent 60%); animation: pulse 1.1s ease-in-out infinite; }
+body[data-state="thinking"]  #halo { background: radial-gradient(circle, rgba(255,122,24,.30), transparent 60%); animation: spin 1.4s linear infinite; }
+body[data-state="speaking"]  #halo { background: radial-gradient(circle, rgba(54,211,153,.30), transparent 60%); }
+@keyframes pulse { 0%,100%{transform:scale(1.06)} 50%{transform:scale(1.20)} }
 @keyframes spin { to { transform: rotate(360deg) } }
 
 #status {
-  position: relative;
-  z-index: 2;
-  font-size: clamp(22px, 6vmin, 46px);
-  font-weight: 800;
-  letter-spacing: .01em;
-  text-shadow: 0 2px 18px rgba(0,0,0,.8);
+  position: relative; z-index: 2;
+  font-size: clamp(24px, 6vmin, 48px); font-weight: 800;
+  text-shadow: 0 2px 18px rgba(0,0,0,.85);
 }
-
 #answer {
-  position: relative;
-  z-index: 2;
-  font-size: clamp(20px, 4.6vmin, 34px);
-  font-weight: 600;
-  line-height: 1.3;
-  max-width: 92vw;
-  text-shadow: 0 2px 18px rgba(0,0,0,.9);
-  min-height: 1.2em;
+  position: relative; z-index: 2;
+  font-size: clamp(20px, 4.6vmin, 34px); font-weight: 600; line-height: 1.32;
+  max-width: 92vw; min-height: 1.2em; text-shadow: 0 2px 18px rgba(0,0,0,.9);
 }
-
 #hint {
-  position: fixed;
-  bottom: max(5vmin, env(safe-area-inset-bottom, 0));
-  z-index: 2;
-  font-size: clamp(14px, 3vmin, 20px);
-  opacity: .8;
+  position: relative; z-index: 2;
+  font-size: clamp(13px, 2.8vmin, 18px); color: var(--muted);
   text-shadow: 0 2px 12px rgba(0,0,0,.9);
 }
 
-#lang {
-  position: fixed;
-  top: max(4vmin, env(safe-area-inset-top, 0));
-  right: 5vmin;
-  z-index: 3;
-  background: rgba(255,255,255,.12);
-  color: var(--fg);
-  border: 2px solid rgba(255,255,255,.35);
-  border-radius: 999px;
-  padding: 10px 18px;
-  font-size: 18px;
-  font-weight: 700;
-  cursor: pointer;
+/* barra superior */
+#topbar {
+  position: fixed; top: max(3vmin, env(safe-area-inset-top, 0)); left: 0; right: 0;
+  z-index: 4; display: flex; justify-content: space-between; padding: 0 5vmin;
 }
+.chip {
+  min-width: 56px; min-height: 56px; padding: 0 18px;
+  background: var(--glass); color: var(--fg);
+  border: 2px solid var(--stroke); border-radius: 999px;
+  font-size: 20px; font-weight: 800; cursor: pointer;
+  backdrop-filter: blur(10px);
+}
+.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #1a1206; }
+
+/* barra de controles (baixa visão / teclado / leitor de tela) */
+#controls {
+  position: fixed; left: 0; right: 0;
+  bottom: max(4vmin, env(safe-area-inset-bottom, 0)); z-index: 4;
+  display: flex; align-items: flex-end; justify-content: center; gap: 4vmin;
+}
+.ctl {
+  display: flex; flex-direction: column; align-items: center; gap: 6px;
+  min-width: 88px; min-height: 88px; padding: 12px 10px;
+  background: var(--glass); color: var(--fg);
+  border: 2px solid var(--stroke); border-radius: 24px;
+  font-size: 16px; font-weight: 700; cursor: pointer;
+  backdrop-filter: blur(12px); transition: transform .1s ease, background .15s ease;
+}
+.ctl:active { transform: scale(.95); }
+.ctl .ic { display: flex; align-items: center; justify-content: center; }
+.ctl .ic svg { width: 28px; height: 28px; display: block; }
+.ctl-lbl { font-size: 15px; letter-spacing: .01em; }
+.ctl.primary {
+  min-width: 116px; min-height: 116px; border-radius: 50%;
+  background: var(--accent); color: #1a1206; border-color: var(--accent);
+  font-size: 18px; box-shadow: 0 8px 30px rgba(255,122,24,.4);
+}
+.ctl.primary .ic svg { width: 42px; height: 42px; }
+#btn-live.on { background: var(--ok); border-color: var(--ok); color: #062018; }
+#btn-live.on::after { content: ""; }
+
+/* ===== modo acessível (contraste máximo + texto maior) ===== */
+body.a11y-boost { --glass: rgba(0,0,0,.92); --stroke: #ffffff; }
+body.a11y-boost #cam { filter: brightness(.25); }
+body.a11y-boost #status { font-size: clamp(30px, 8vmin, 60px); }
+body.a11y-boost #answer { font-size: clamp(26px, 6vmin, 44px); font-weight: 800; }
+body.a11y-boost .ctl, body.a11y-boost .chip { font-size: 20px; border-width: 3px; color: #fff; }
+body.a11y-boost .ctl-lbl { font-weight: 900; }
 
-#stage.armed { background: rgba(0,212,255,.05); }
+/* respeita preferências do sistema */
+@media (prefers-contrast: more) { :root { --glass: rgba(0,0,0,.9); --stroke: #fff; } }
+@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }