fix: popup empty on cold load — lazy-load gradio client so UI never waits on the CDN

The static esm.sh import blocked module execution until the CDN resolved, so on a
cold load the popup rendered with empty text. Load @gradio/client via dynamic import
(ensureClient, awaited in send/sendWatch) and seed the popup with default text in HTML.

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

frontend/app.js

@@ -1,5 +1,3 @@
-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"),
@@ -114,8 +112,19 @@ function stopRec() {
   });
 }
 
-// ---- backend ----
-let client = null;
+// ---- backend (gradio client loaded lazily, so the UI never waits on the CDN) ----
+let Client, handle_file, client = null, clientReady = null;
+function ensureClient() {
+  if (!clientReady) {
+    clientReady = (async () => {
+      const mod = await import("https://esm.sh/@gradio/client");
+      Client = mod.Client; handle_file = mod.handle_file;
+      client = await Client.connect(window.location.origin);
+      console.log("Iris connected");
+    })().catch((e) => { console.error("connect:", e); clientReady = null; });
+  }
+  return clientReady;
+}
 
 async function send(frame, audio, qtext = "") {
   if (busy) return;
@@ -123,6 +132,8 @@ async function send(frame, audio, qtext = "") {
   answerEl.textContent = "";
   setState("thinking", t("thinking"));
   try {
+    await ensureClient();
+    if (!client) throw new Error("client not ready");
     const payload = { image: handle_file(frame), lang };
     if (audio) payload.audio = handle_file(audio);
     if (qtext) payload.qtext = qtext;
@@ -415,6 +426,8 @@ async function sendWatch(frame, hint = "") {
   if (busy) return;
   busy = true;
   try {
+    await ensureClient();
+    if (!client) return;
     const result = await client.predict("/watch", { image: handle_file(frame), prev: history.join(" · "), lang, hint });
     const out = Array.isArray(result.data) ? result.data[0] : result.data;
     if (out && out.speak && out.answer && !history.some((h) => tooSimilar(h, out.answer))) {
@@ -546,6 +559,5 @@ function updateLabels() {
   setState("", t("idle"));
   showIntro();      // welcome popup on every open (the camera starts when it closes)
   loadDetector();   // preload the object detector in the background (non-blocking)
-  try { client = await Client.connect(window.location.origin); console.log("Iris connected"); }
-  catch (e) { console.error("connect:", e); setState("", t("err")); }
+  ensureClient();   // connect in the background; the UI never waits on it
 })();

frontend/index.html

@@ -71,14 +71,14 @@
         </svg>
       </button>
       <h2 id="intro-title">Iris</h2>
-      <p id="intro-body"></p>
+      <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>
       <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>
       </div>
-      <a id="intro-video" class="intro-video" href="#" target="_blank" rel="noopener"></a>
-      <button id="intro-close" class="intro-close"></button>
-      <p id="intro-hint" class="intro-hint"></p>
+      <a id="intro-video" class="intro-video" href="https://huggingface.co/spaces/build-small-hackathon/iris" target="_blank" rel="noopener">Watch the demo</a>
+      <button id="intro-close" class="intro-close">Close</button>
+      <p id="intro-hint" class="intro-hint">Say "close" or tap the button</p>
     </div>
   </div>