popup: teach how to use (gestures + live-mode voice command) in text and narration

frontend/app.js

@@ -4,8 +4,9 @@ const cam = $("cam"), canvas = $("canvas"), statusEl = $("status"),
       player = $("player"), stage = $("stage"),
       btnAsk = $("btn-ask"), btnDescribe = $("btn-describe"),
       btnLive = $("btn-live"), a11yBtn = $("a11y");
-const intro = $("intro"), introBodyEl = $("intro-body"), introCloseBtn = $("intro-close"),
-      introVideo = $("intro-video"), introEn = $("intro-en"), introPt = $("intro-pt"),
+const intro = $("intro"), introBodyEl = $("intro-body"), introHowEl = $("intro-how"),
+      introCloseBtn = $("intro-close"), introVideo = $("intro-video"),
+      introEn = $("intro-en"), introPt = $("intro-pt"),
       introReplay = $("intro-replay"), introHintEl = $("intro-hint");
 
 function vibrate(ms) { try { navigator.vibrate && navigator.vibrate(ms); } catch (e) {} }
@@ -20,7 +21,9 @@ const T = {
         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.",
-        introBody: "This is Iris, your eyes by voice. Point your phone and it tells you what is in front of you, and reads your money, your bills, and your medicine, out loud.",
+        introBody: "This is Iris, your eyes by voice. It reads your money, your bills, and your medicine, out loud.",
+        introHow: "Tap to describe · Hold to ask · Double-tap (or say \"live mode\") for live mode",
+        introSpeak: "This is Iris, your eyes by voice. It reads your money, bills, and medicine out loud. To use it: tap the screen to describe what is in front of you, hold and speak to ask a question, and double-tap, or say live mode, to turn live mode on or off. To close this, say close, or tap the big button.",
         introClose: "Close", introVideo: "Watch the demo", introHint: "Say \"close\" or tap the button",
         bAsk: "Ask", bDescribe: "Describe", bLive: "Live" },
   pt: { idle: "Iris", listening: "Ouvindo…", thinking: "Pensando…",
@@ -29,7 +32,9 @@ const T = {
         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.",
-        introBody: "Este é o Iris, os seus olhos por voz. Aponte o celular e ele diz o que está à sua frente, e lê o seu dinheiro, suas contas e seus remédios, em voz alta.",
+        introBody: "Este é o Iris, os seus olhos por voz. Ele lê o seu dinheiro, suas contas e seus remédios, em voz alta.",
+        introHow: "Toque para descrever · Segure para perguntar · Toque duplo (ou diga \"modo ao vivo\") para o modo ao vivo",
+        introSpeak: "Este é o Iris, os seus olhos por voz. Ele lê o seu dinheiro, suas contas e seus remédios em voz alta. Para usar: toque na tela para descrever o que está à sua frente, segure e fale para fazer uma pergunta, e toque duas vezes, ou diga modo ao vivo, para ligar ou desligar o modo ao vivo. Para fechar, diga fechar, ou toque no botão grande.",
         introClose: "Fechar", introVideo: "Ver o vídeo", introHint: "Diga \"fechar\" ou toque no botão",
         bAsk: "Perguntar", bDescribe: "Descrever", bLive: "Ao vivo" },
 };
@@ -170,6 +175,7 @@ const CLOSE_WORDS = /\b(close|fechar|ok|okay|start|begin|continue|continuar|come
 
 function renderIntro() {
   introBodyEl.textContent = t("introBody");
+  introHowEl.textContent = t("introHow");
   introCloseBtn.textContent = t("introClose");
   introVideo.textContent = t("introVideo");
   introVideo.href = DEMO_VIDEO_URL;
@@ -212,7 +218,7 @@ function speakIntro(force) {
   unlockAudio();
   try {
     speechSynthesis.cancel();
-    const u = new SpeechSynthesisUtterance(t("introBody") + " " + t("introHint") + ".");
+    const u = new SpeechSynthesisUtterance(t("introSpeak"));
     u.lang = lang === "pt" ? "pt-BR" : "en-US";
     u.onstart = () => {
       introSpokenSession = true;

frontend/index.html

@@ -71,7 +71,8 @@
         </svg>
       </button>
       <h2 id="intro-title">Iris</h2>
-      <p id="intro-body">This is Iris, your eyes by voice. Point your phone and it tells you what is in front of you, and reads your money, your bills, and your medicine, out loud.</p>
+      <p id="intro-body">This is Iris, your eyes by voice. It reads your money, your bills, and your medicine, out loud.</p>
+      <p id="intro-how" class="intro-how">Tap to describe · Hold to ask · Double-tap (or say "live mode") for live mode</p>
       <div class="intro-langs" role="group" aria-label="Language">
         <button id="intro-en" class="intro-lang">EN</button>
         <button id="intro-pt" class="intro-lang">PT</button>

frontend/style.css

@@ -200,6 +200,7 @@ body[data-state=""] #status, body:not([data-state]) #status { letter-spacing: .0
 
 #intro-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 7vmin, 40px); letter-spacing: .04em; }
 #intro-body { font-family: var(--font-body); font-size: clamp(16px, 4vmin, 19px); line-height: 1.5; color: var(--fg); max-width: 34ch; }
+.intro-how { font-family: var(--font-body); font-size: 14px; line-height: 1.6; color: var(--muted); max-width: 32ch; }
 
 .intro-langs { display: flex; gap: 10px; }
 .intro-lang {