Fix streaming contract: annotate @app .api return type + match JS client submit() API

The UI showed nothing while logs printed each yield because gradio.Server
derives an endpoint's output components from the function's *return type
annotation*. race_endpoint had no annotation, so it registered zero
outputs — the queue ran and logged every yielded dict, but the client
received nothing to render. Annotate -> dict (the yielded-value type,
not Generator[dict,...]) to declare one dict output; the queue still
iterates the generator and streams each dict as a data event.

Wire the frontend to the documented @gradio/client contract: submit()
returns an async iterator (not a promise); each msg is {type:'data',
data:[record]} for this single-output endpoint or {type:'status',...}
for queue stage. Subscribe with events:['data','status'] and surface
queue position while waiting on the GPU slice. normalizeRecord unwraps
the [dict] array shape that postprocess_data produces for one output.

ZeroGPU engagement is unchanged from the gr.Blocks version: @spaces.GPU
on the inner classify/generate functions is a no-op unless the Space
hardware is set to ZeroGPU (SPACES_ZERO_GPU=true), independent of
whether the caller is a .click() handler or an @app .api generator.

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

app.py

@@ -262,12 +262,19 @@ app = Server()
 
 
 @app.api(name="race")
-def race_endpoint(example_name: str, custom_html: str):
+def race_endpoint(example_name: str, custom_html: str) -> dict:
     """Queued, GPU-managed streaming endpoint. Each yielded record is delivered
     to the Gradio client (JS or Python) as a separate SSE event, so the frontend
     sees pulpie finish, then dripper's tokens arrive live, then the verdict.
     The final record carries every field, so a non-streaming predict() call
-    still converges to the complete result."""
+    still converges to the complete result.
+
+    The `-> dict` return annotation is load-bearing: gradio.Server derives the
+    endpoint's output components from the return type, and a generator without
+    one registers zero outputs — the queue runs (the logs show each yield) but
+    the client receives nothing to render. Annotating with the *yielded* type
+    (dict, not Generator[dict, ...]) declares one dict output while the queue
+    still iterates the generator and streams each dict as a data event."""
     yield from race(example_name or "", custom_html or "")
 
 

index.html

@@ -401,7 +401,10 @@
   // ── Connect client ──
   let client = null;
   try {
-    client = await Client.connect(window.location.origin);
+    // events: ["data","status"] — status fires queue-position / stage updates
+    // (pending → generating → complete), which we surface while waiting on the
+    // GPU slice. Data fires once per generator yield.
+    client = await Client.connect(window.location.origin, { events: ["data", "status"] });
     connPill.classList.remove("connecting");
     connText.textContent = "READY";
   } catch (e) {
@@ -422,29 +425,29 @@
     const params = { example_name: exampleName, custom_html: custom };
 
     try {
-      // submit() returns a streaming Job; iterating delivers records as the
-      // generator yields them (live tokens + running timers). If streaming is
-      // unavailable on this client version, the job still resolves with the
-      // final record — applyRecord is idempotent and converges either way.
-      const job = client.submit("/race", params);
-      const iter = (typeof job[Symbol.asyncIterator] === "function")
-        ? job
-        : (job && typeof job.then === "function" ? await job : null);
-
-      if (iter && typeof iter[Symbol.asyncIterator] === "function") {
-        for await (const msg of iter) {
-          // msg may be { type, data } (gradio job) or the record itself
-          const payload = (msg && msg.type === "data" && msg.data !== undefined) ? msg.data
-                       : (msg && msg.data !== undefined ? msg.data : msg);
-          applyRecord(normalizeRecord(payload));
+      // Per the @gradio/client docs: submit() returns an async iterator (not a
+      // promise — do not await it). Each yielded msg has type "data" (a computed
+      // value — fires once per generator yield) or "status" (queue stage). For
+      // a single-output @app.api endpoint, msg.data is a one-element array
+      // [record]; normalizeRecord unwraps it.
+      const submission = client.submit("/race", params);
+      let sawData = false;
+      for await (const msg of submission) {
+        if (msg.type === "status") {
+          // surface queue position while waiting for the GPU slice
+          if (msg.stage === "pending" && msg.position != null) {
+            verdictEl.innerHTML = '<div class="verdict-bar" style="color:var(--soft)">QUEUED · POSITION ' + msg.position + '</div>';
+          } else if (msg.stage === "generating") {
+            verdictEl.innerHTML = "";
+          }
+          continue;
+        }
+        if (msg.type === "data") {
+          sawData = true;
+          applyRecord(normalizeRecord(msg.data));
         }
-      } else if (iter) {
-        applyRecord(normalizeRecord(iter));
-      } else if (job && job.data !== undefined) {
-        applyRecord(normalizeRecord(job.data));
-      } else {
-        applyRecord(normalizeRecord(job));
       }
+      if (!sawData) showError("Backend returned no data. Check the /race endpoint and Space logs.");
       if (!verdictEl.innerHTML) setProgress(100);
     } catch (e) {
       showError("Race failed: " + (e?.message || e));