From fc9bff5d85d07d2cc54bb2366a9b58dec17661ee Mon Sep 17 00:00:00 2001
From: Camillalalala <camilla4clubs@gmail.com>
Date: Mon, 11 May 2026 03:25:26 -0700
Subject: [PATCH] Feature: Successfully implement personalized object in object
 box

---
 frontend/.env                                 |   1 +
 frontend/object-box.html                      |  25 ++
 frontend/src/object-box/level.ts              |   2 +
 frontend/src/object-box/main.ts               | 268 +++++++++++++++++-
 frontend/src/object-box/scene.ts              |  52 ++++
 frontend/src/object-box/style.css             | 132 +++++++++
 workers/api/src/router.ts                     |   5 +
 workers/api/src/routes/index.ts               |  17 +-
 workers/api/src/routes/object_box_generate.ts | 253 +++++++++++++++++
 9 files changed, 749 insertions(+), 6 deletions(-)
 create mode 100644 frontend/.env
 create mode 100644 workers/api/src/routes/object_box_generate.ts

diff --git a/frontend/.env b/frontend/.env
new file mode 100644
index 0000000..977d7e9
--- /dev/null
+++ b/frontend/.env
@@ -0,0 +1 @@
+VITE_GOOGLE_CLIENT_ID=432776535595-d2n7cj7jl8qbrojdpnr00eup6t8k36od.apps.googleusercontent.com
diff --git a/frontend/object-box.html b/frontend/object-box.html
index c799229..cd02dc0 100644
--- a/frontend/object-box.html
+++ b/frontend/object-box.html
@@ -26,6 +26,31 @@
 
       <div class="hint" id="hint">pick an object →</div>
 
+      <form class="generate" id="generate-form">
+        <button id="generate-mic" type="button" class="generate-mic" aria-label="Speak object name">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
+            <rect x="9" y="3" width="6" height="12" rx="3" />
+            <path d="M5 11a7 7 0 0 0 14 0" />
+            <path d="M12 18v3" />
+          </svg>
+        </button>
+        <input
+          id="generate-input"
+          type="text"
+          placeholder="Say or type an object (e.g. alligator)"
+          autocomplete="off"
+        />
+        <button id="generate-btn" type="submit">Generate 3D</button>
+      </form>
+      <p class="generate-msg" id="generate-msg" role="status"></p>
+      <details class="tripo-debug" id="tripo-debug">
+        <summary>
+          Tripo response
+          <button type="button" id="tripo-debug-copy" class="tripo-debug-copy">copy</button>
+        </summary>
+        <pre id="tripo-debug-body">(no request yet)</pre>
+      </details>
+
       <div class="corner" aria-hidden="true">
         <svg viewBox="0 0 22 22" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round">
           <rect x="3.5" y="3.5" width="15" height="15" rx="3" />
diff --git a/frontend/src/object-box/level.ts b/frontend/src/object-box/level.ts
index 9ab5e04..88d7177 100644
--- a/frontend/src/object-box/level.ts
+++ b/frontend/src/object-box/level.ts
@@ -13,6 +13,8 @@ export interface ObjectDef {
   /** Optional builder name; defaults to `label`. Lets aliases like "kitten"
    * reuse the cat builder. */
   builder?: string;
+  /** Optional remote model url (GLB/GLTF) generated by Tripo. */
+  modelUrl?: string;
 }
 
 export interface LetterDef {
diff --git a/frontend/src/object-box/main.ts b/frontend/src/object-box/main.ts
index 6a673e5..b2c0bc0 100644
--- a/frontend/src/object-box/main.ts
+++ b/frontend/src/object-box/main.ts
@@ -32,6 +32,55 @@ const hintEl = $("hint");
 const greetingName = $("greeting-name");
 const paperWord = $("paper-word");
 const booting = $("booting");
+const generateForm = $("generate-form");
+const generateInput = $<HTMLInputElement>("generate-input");
+const generateBtn = $<HTMLButtonElement>("generate-btn");
+const generateMic = $<HTMLButtonElement>("generate-mic");
+const generateMsg = $("generate-msg");
+/** Toggle to true while debugging Tripo responses on-screen. */
+const SHOW_TRIPO_DEBUG = false;
+
+const tripoDebug = $<HTMLDetailsElement>("tripo-debug");
+const tripoDebugBody = $<HTMLPreElement>("tripo-debug-body");
+const tripoDebugCopy = $<HTMLButtonElement>("tripo-debug-copy");
+
+if (!SHOW_TRIPO_DEBUG) {
+  tripoDebug.hidden = true;
+}
+
+function logTripo(label: string, payload: unknown): void {
+  console.log(`[tripo] ${label}`, payload);
+  if (!SHOW_TRIPO_DEBUG) return;
+  const pretty =
+    typeof payload === "string"
+      ? payload
+      : JSON.stringify(payload, null, 2);
+  tripoDebugBody.textContent = `--- ${label} @ ${new Date().toISOString()} ---\n${pretty}`;
+  tripoDebug.open = true;
+}
+
+tripoDebugCopy.addEventListener("click", async (ev) => {
+  // Prevent toggling the <details> when clicking the button inside the <summary>
+  ev.preventDefault();
+  ev.stopPropagation();
+  const text = tripoDebugBody.textContent ?? "";
+  try {
+    await navigator.clipboard.writeText(text);
+    tripoDebugCopy.textContent = "copied";
+    tripoDebugCopy.classList.add("is-copied");
+    setTimeout(() => {
+      tripoDebugCopy.textContent = "copy";
+      tripoDebugCopy.classList.remove("is-copied");
+    }, 1400);
+  } catch {
+    // Clipboard API blocked — fall back to manual selection.
+    const range = document.createRange();
+    range.selectNodeContents(tripoDebugBody);
+    const sel = window.getSelection();
+    sel?.removeAllRanges();
+    sel?.addRange(range);
+  }
+});
 
 function renderPrompt(prompt: LessonPrompt | null): void {
   if (!prompt) {
@@ -102,7 +151,224 @@ function applyLevel(level: Level): void {
   void prefetchPronunciations(level.objects.map((o) => o.label));
 }
 
-applyLevel(applyUrlOverrides(LEVEL_FOX));
+let currentLevel = applyUrlOverrides(LEVEL_FOX);
+applyLevel(currentLevel);
+
+interface GenerateResp {
+  ok?: boolean;
+  label?: string;
+  taskId?: string | null;
+  modelUrl?: string | null;
+  degraded?: boolean;
+  warning?: string;
+  error?: string;
+}
+
+interface TaskStatusResp {
+  ok?: boolean;
+  taskId?: string;
+  status?: string;
+  progress?: number | null;
+  modelUrl?: string | null;
+  done?: boolean;
+  failed?: boolean;
+  error?: string;
+}
+
+function mergedLetterPool(level: Level, newWord: string): string | undefined {
+  if (typeof level.letters !== "string") return undefined;
+  const set = new Set<string>();
+  for (const c of level.letters.toLowerCase()) {
+    if (/[a-z]/.test(c)) set.add(c);
+  }
+  for (const c of newWord.toLowerCase()) {
+    if (/[a-z]/.test(c)) set.add(c);
+  }
+  return [...set].sort().join("");
+}
+
+function sleep(ms: number): Promise<void> {
+  return new Promise((r) => setTimeout(r, ms));
+}
+
+const POLL_INTERVAL_MS = 3000;
+const POLL_TIMEOUT_MS = 5 * 60 * 1000; // 5 minutes
+
+async function pollTaskUntilDone(taskId: string): Promise<TaskStatusResp> {
+  const start = Date.now();
+  let lastStatus: TaskStatusResp | null = null;
+  while (Date.now() - start < POLL_TIMEOUT_MS) {
+    await sleep(POLL_INTERVAL_MS);
+    const r = await fetch(`/api/object-box/task?id=${encodeURIComponent(taskId)}`, {
+      credentials: "include",
+    });
+    const status = (await r.json()) as TaskStatusResp;
+    lastStatus = status;
+    logTripo(
+      `task ${status.status ?? "?"} ${status.progress != null ? `${status.progress}%` : ""}`,
+      status,
+    );
+
+    if (status.progress != null) {
+      generateMsg.textContent = `Generating 3D object… ${status.progress}%`;
+    }
+
+    if (status.done && status.modelUrl) return status;
+    if (status.failed) return status;
+  }
+  return lastStatus ?? { ok: false, status: "timeout" };
+}
+
+async function generateObjectFromDescription(description: string): Promise<void> {
+  generateBtn.disabled = true;
+  generateMsg.textContent = "Submitting to Tripo…";
+  logTripo("request", { url: "/api/object-box/generate", description });
+
+  try {
+    const r = await fetch("/api/object-box/generate", {
+      method: "POST",
+      credentials: "include",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ description }),
+    });
+
+    const rawText = await r.text();
+    let body: GenerateResp | null = null;
+    try {
+      body = JSON.parse(rawText) as GenerateResp;
+    } catch {
+      body = null;
+    }
+    logTripo(`generate response (HTTP ${r.status})`, body ?? rawText);
+
+    if (!r.ok || !body || !body.label) {
+      const errMsg = body?.error ?? rawText.slice(0, 200) ?? `HTTP ${r.status}`;
+      throw new Error(errMsg);
+    }
+
+    const label = body.label;
+
+    // Case 1: degraded create — no taskId, fall back to placeholder.
+    let modelUrl: string | null | undefined = body.modelUrl;
+    if (!body.taskId) {
+      modelUrl = null;
+    } else {
+      // Case 2: poll the task until done or failed.
+      generateMsg.textContent = "Generating 3D object…";
+      const final = await pollTaskUntilDone(body.taskId);
+      if (final.done && final.modelUrl) {
+        modelUrl = final.modelUrl;
+      } else {
+        modelUrl = null;
+      }
+    }
+
+    const nextLetters = mergedLetterPool(currentLevel, label);
+    currentLevel = {
+      ...currentLevel,
+      letters: nextLetters ?? currentLevel.letters,
+      objects: [{ label, modelUrl: modelUrl ?? undefined }, ...currentLevel.objects].slice(0, 8),
+    };
+    applyLevel(currentLevel);
+    lesson.reset();
+    renderPrompt(null);
+    hintEl.classList.remove("hidden");
+    generateMsg.textContent = modelUrl
+      ? `Added "${label}" to the object box.`
+      : `Added "${label}" (placeholder). Generation didn't complete.`;
+    generateInput.value = "";
+  } catch (err) {
+    const msg = (err as Error).message;
+    generateMsg.textContent = `Could not generate object: ${msg}`;
+    logTripo("error", msg);
+  } finally {
+    generateBtn.disabled = false;
+  }
+}
+
+generateForm.addEventListener("submit", (ev) => {
+  ev.preventDefault();
+  const description = generateInput.value.trim();
+  if (!description) return;
+  void generateObjectFromDescription(description);
+});
+
+// ── Voice input via Web Speech API ────────────────────────────────────────
+interface SpeechRecognitionEventLike {
+  results: ArrayLike<ArrayLike<{ transcript: string }>>;
+}
+interface SpeechRecognitionLike {
+  lang: string;
+  interimResults: boolean;
+  maxAlternatives: number;
+  continuous: boolean;
+  start(): void;
+  stop(): void;
+  onresult: ((ev: SpeechRecognitionEventLike) => void) | null;
+  onerror: ((ev: { error?: string }) => void) | null;
+  onend: (() => void) | null;
+}
+
+const SpeechRecognitionCtor: (new () => SpeechRecognitionLike) | undefined =
+  (window as unknown as { SpeechRecognition?: new () => SpeechRecognitionLike }).SpeechRecognition ??
+  (window as unknown as { webkitSpeechRecognition?: new () => SpeechRecognitionLike }).webkitSpeechRecognition;
+
+if (!SpeechRecognitionCtor) {
+  generateMic.disabled = true;
+  generateMic.title = "Voice input not supported in this browser";
+} else {
+  let recognizer: SpeechRecognitionLike | null = null;
+  let listening = false;
+
+  function stopListening(): void {
+    listening = false;
+    generateMic.classList.remove("is-listening");
+    try {
+      recognizer?.stop();
+    } catch {
+      // already stopped
+    }
+  }
+
+  generateMic.addEventListener("click", () => {
+    if (listening) {
+      stopListening();
+      return;
+    }
+
+    recognizer = new SpeechRecognitionCtor!();
+    recognizer.lang = "en-US";
+    recognizer.interimResults = false;
+    recognizer.maxAlternatives = 1;
+    recognizer.continuous = false;
+
+    recognizer.onresult = (ev) => {
+      const first = ev.results[0]?.[0]?.transcript ?? "";
+      const cleaned = first.trim().replace(/[.,!?]+$/g, "");
+      if (!cleaned) return;
+      generateInput.value = cleaned;
+      generateMsg.textContent = `Heard: "${cleaned}". Sending to Tripo…`;
+      void generateObjectFromDescription(cleaned);
+    };
+    recognizer.onerror = (ev) => {
+      generateMsg.textContent = `Voice input error: ${ev.error ?? "unknown"}`;
+      stopListening();
+    };
+    recognizer.onend = () => {
+      stopListening();
+    };
+
+    try {
+      recognizer.start();
+      listening = true;
+      generateMic.classList.add("is-listening");
+      generateMsg.textContent = "Listening… say an object name.";
+    } catch (err) {
+      generateMsg.textContent = `Could not start mic: ${(err as Error).message}`;
+      stopListening();
+    }
+  });
+}
 
 /** Cross-page hand-off to the writing pad. We slide our cream paper overlay
  * in first so the screen is fully cream at the moment of navigation, then
diff --git a/frontend/src/object-box/scene.ts b/frontend/src/object-box/scene.ts
index 2d6ff35..0285818 100644
--- a/frontend/src/object-box/scene.ts
+++ b/frontend/src/object-box/scene.ts
@@ -1,4 +1,5 @@
 import * as THREE from "three";
+import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
 import { PALETTE } from "./palette";
 import { buildRug, RUG_DIMS } from "./rug";
 import { buildTray } from "./box";
@@ -96,6 +97,18 @@ export interface SceneAPI {
 
 const PITCH_MIN = 0.42;
 const PITCH_MAX = 1.28;
+const gltfLoader = new GLTFLoader();
+
+function loadGltf(url: string): Promise<THREE.Group> {
+  return new Promise((resolve, reject) => {
+    gltfLoader.load(
+      url,
+      (gltf) => resolve(gltf.scene),
+      undefined,
+      (err) => reject(err),
+    );
+  });
+}
 
 export function createScene(canvas: HTMLCanvasElement, callbacks: SceneCallbacks = {}): SceneAPI {
   // -------- renderer / scene / camera --------
@@ -332,6 +345,45 @@ export function createScene(canvas: HTMLCanvasElement, callbacks: SceneCallbacks
       const idx = objectArea.cells.length;
       objectArea.cells.push({ pos: homePos.clone(), occupiedBy: g });
       g.userData.cellIndex = idx;
+
+      if (def.modelUrl) {
+        void (async () => {
+          try {
+            const model = await loadGltf(def.modelUrl!);
+            // If level switched while loading, discard.
+            if (!levelGroup.children.includes(g)) return;
+
+            for (const child of [...g.children]) g.remove(child);
+
+            model.traverse((node) => {
+              if ((node as THREE.Mesh).isMesh) {
+                const mesh = node as THREE.Mesh;
+                mesh.castShadow = true;
+                mesh.receiveShadow = true;
+              }
+            });
+
+            const box = new THREE.Box3().setFromObject(model);
+            const size = new THREE.Vector3();
+            box.getSize(size);
+            const maxAxis = Math.max(size.x, size.y, size.z) || 1;
+            const target = 0.85;
+            const scale = target / maxAxis;
+            model.scale.setScalar(scale);
+
+            const recenteredBox = new THREE.Box3().setFromObject(model);
+            const center = recenteredBox.getCenter(new THREE.Vector3());
+            model.position.sub(center);
+            // Lift so it sits nicely on the rug.
+            const floorY = recenteredBox.min.y - center.y;
+            model.position.y -= floorY - 0.03;
+
+            g.add(model);
+          } catch {
+            // Keep placeholder if model fails.
+          }
+        })();
+      }
     }
   }
 
diff --git a/frontend/src/object-box/style.css b/frontend/src/object-box/style.css
index 0346415..d30bcf7 100644
--- a/frontend/src/object-box/style.css
+++ b/frontend/src/object-box/style.css
@@ -205,6 +205,138 @@ canvas.scene:active { cursor: grabbing; }
 }
 .hint.hidden { opacity: 0; }
 
+/* Generator controls */
+.generate {
+  position: absolute;
+  right: 24px;
+  top: 22px;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  z-index: 9;
+}
+
+.generate input {
+  width: min(320px, 46vw);
+  border: 1px solid var(--line);
+  background: rgba(255, 255, 255, 0.82);
+  color: var(--ink);
+  border-radius: 10px;
+  padding: 9px 12px;
+  font-size: 13px;
+  outline: none;
+}
+
+.generate input:focus {
+  border-color: var(--ochre);
+}
+
+.generate button {
+  border: 1px solid var(--line);
+  background: var(--bg-card);
+  color: var(--ink);
+  border-radius: 10px;
+  padding: 8px 12px;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.generate button:disabled {
+  opacity: 0.6;
+  cursor: wait;
+}
+
+.generate-mic {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 38px;
+  height: 38px;
+  padding: 0 !important;
+  border-radius: 50% !important;
+}
+
+.generate-mic svg {
+  width: 18px;
+  height: 18px;
+}
+
+.generate-mic.is-listening {
+  background: var(--rose) !important;
+  color: #fbf7f1;
+  border-color: var(--rose) !important;
+  animation: mic-pulse 1.1s ease-in-out infinite;
+}
+
+@keyframes mic-pulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 125, 106, 0.55); }
+  50%      { box-shadow: 0 0 0 8px rgba(201, 125, 106, 0); }
+}
+
+.generate-msg {
+  position: absolute;
+  top: 58px;
+  right: 28px;
+  margin: 0;
+  max-width: min(420px, 50vw);
+  font-size: 12px;
+  color: var(--ink-soft);
+  z-index: 9;
+}
+
+.tripo-debug {
+  position: absolute;
+  top: 82px;
+  right: 28px;
+  z-index: 9;
+  max-width: min(520px, 55vw);
+  font-size: 11px;
+  color: var(--ink);
+  background: rgba(255, 255, 255, 0.92);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 6px 10px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
+.tripo-debug summary {
+  cursor: pointer;
+  font-family: "Inter", sans-serif;
+  font-size: 11px;
+  color: var(--ink-soft);
+  user-select: none;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.tripo-debug-copy {
+  margin-left: auto;
+  padding: 2px 8px !important;
+  font-size: 10px !important;
+  border-radius: 5px !important;
+  background: var(--bg-card) !important;
+  border: 1px solid var(--line) !important;
+  cursor: pointer;
+}
+
+.tripo-debug-copy.is-copied {
+  background: var(--sage) !important;
+  color: #fbf7f1 !important;
+  border-color: var(--sage) !important;
+}
+
+.tripo-debug pre {
+  margin: 6px 0 0;
+  max-height: 320px;
+  overflow: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+  background: transparent;
+  font-size: 11px;
+  line-height: 1.4;
+}
+
 /* loading state */
 .booting {
   position: absolute;
diff --git a/workers/api/src/router.ts b/workers/api/src/router.ts
index 47ab359..de8aedc 100644
--- a/workers/api/src/router.ts
+++ b/workers/api/src/router.ts
@@ -9,6 +9,11 @@ export interface Env {
   ANTHROPIC_API_KEY: string;
   DB: D1Database;
   G2P: KVNamespace;
+  TRIPO_API_KEY?: string;
+  TRIPO_API_BASE?: string;
+  TRIPO_MODEL_VERSION?: string;
+  TRIPO_POLL_MAX?: number | string;
+  TRIPO_POLL_DELAY_MS?: number | string;
 }
 
 export interface RouteCtx {
diff --git a/workers/api/src/routes/index.ts b/workers/api/src/routes/index.ts
index 0e6923c..903cc78 100644
--- a/workers/api/src/routes/index.ts
+++ b/workers/api/src/routes/index.ts
@@ -4,9 +4,16 @@ import { scorePhonemeRoute, scoreWordRoute, ttsRoute } from "./speech";
 import { route as feedback } from "./feedback";
 import { route as logStrokes } from "./log_strokes";
 import { route as pronunciations } from "./pronunciations";
+import { generateObjectRoute, taskStatusRoute } from "./object_box_generate";
 
-<<<<<<< voice-analysis
-export const routes: Route[] = [health, ttsRoute, scorePhonemeRoute, scoreWordRoute, feedback];
-=======
-export const routes: Route[] = [health, feedback, logStrokes, pronunciations];
->>>>>>> main
+export const routes: Route[] = [
+  health,
+  ttsRoute,
+  scorePhonemeRoute,
+  scoreWordRoute,
+  feedback,
+  logStrokes,
+  pronunciations,
+  generateObjectRoute,
+  taskStatusRoute,
+];
diff --git a/workers/api/src/routes/object_box_generate.ts b/workers/api/src/routes/object_box_generate.ts
new file mode 100644
index 0000000..6731971
--- /dev/null
+++ b/workers/api/src/routes/object_box_generate.ts
@@ -0,0 +1,253 @@
+import { json, type Env, type Route } from "../router";
+
+const TRIPO_API_BASE = "https://api.tripo3d.ai/v2/openapi";
+
+type TripoCreateResp = {
+  data?: {
+    task_id?: string;
+    id?: string;
+  };
+};
+
+type TripoTaskResp = {
+  data?: {
+    status?: string;
+    progress?: number;
+    output?: {
+      model_url?: string;
+      model?: string;
+      glb_url?: string;
+      gltf_url?: string;
+      url?: string;
+      pbr_model?: {
+        url?: string;
+      };
+    };
+    result?: {
+      model_url?: string;
+      glb_url?: string;
+      url?: string;
+      pbr_model?: { url?: string };
+      model?: string;
+    };
+  };
+};
+
+function normalizeLabel(input: string): string {
+  const cleaned = input
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9\s-]/g, " ")
+    .replace(/\s+/g, " ");
+  const stop = new Set([
+    "a", "an", "the", "my", "your", "our", "this", "that", "these", "those",
+    "some", "any", "small", "big", "large",
+    "red", "blue", "green", "yellow",
+    "toy", "cute", "little",
+  ]);
+  const tokens = cleaned
+    .split(" ")
+    .map((t) => t.trim())
+    .filter((t) => /^[a-z][a-z0-9-]*$/.test(t));
+  for (let i = tokens.length - 1; i >= 0; i--) {
+    const t = tokens[i]!;
+    if (!stop.has(t) && t.length >= 2) return t;
+  }
+  return tokens[0] ?? "object";
+}
+
+function modelUrlFromTask(task: TripoTaskResp): string | null {
+  const d = task.data;
+  if (!d) return null;
+  return (
+    d.output?.model_url ??
+    d.output?.glb_url ??
+    d.output?.gltf_url ??
+    d.output?.model ??
+    d.output?.url ??
+    d.output?.pbr_model?.url ??
+    d.result?.model_url ??
+    d.result?.glb_url ??
+    d.result?.url ??
+    d.result?.pbr_model?.url ??
+    d.result?.model ??
+    null
+  );
+}
+
+async function tripoFetch(
+  env: Env,
+  path: string,
+  init: RequestInit = {},
+): Promise<Response> {
+  const key = env.TRIPO_API_KEY?.trim();
+  if (!key) {
+    throw new Error("TRIPO_API_KEY not configured");
+  }
+  const base = (env.TRIPO_API_BASE?.trim() || TRIPO_API_BASE).replace(/\/+$/, "");
+  return fetch(`${base}${path}`, {
+    ...init,
+    headers: {
+      Authorization: `Bearer ${key}`,
+      "x-api-key": key,
+      "content-type": "application/json",
+      ...(init.headers ?? {}),
+    },
+  });
+}
+
+/**
+ * POST /api/object-box/generate
+ * Creates a Tripo text_to_model task and returns immediately with the taskId.
+ * The frontend then polls GET /api/object-box/task?id=<taskId> for status.
+ */
+export const generateObjectRoute: Route = {
+  method: "POST",
+  path: "/api/object-box/generate",
+  handler: async ({ req, env }) => {
+    let body: unknown = null;
+    try {
+      body = await req.json();
+    } catch {
+      return json({ error: "invalid JSON body" }, 400);
+    }
+
+    const description =
+      body && typeof body === "object" && typeof (body as { description?: unknown }).description === "string"
+        ? (body as { description: string }).description.trim()
+        : "";
+    if (!description) return json({ error: "description is required" }, 400);
+
+    const label = normalizeLabel(description);
+    const createPayload: Record<string, unknown> = {
+      type: "text_to_model",
+      prompt: description,
+      // Low-poly shape, baked diffuse texture for color, no PBR.
+      // texture=true is needed so the prompt's color words ("blue") apply;
+      // pbr=false keeps cost down (skips full physically-based materials).
+      smart_low_poly: true,
+      face_limit: 200,
+      texture: true,
+      pbr: false,
+    };
+    const versionOverride = env.TRIPO_MODEL_VERSION?.trim();
+    if (versionOverride) createPayload.model_version = versionOverride;
+
+    const tripoBase = (env.TRIPO_API_BASE?.trim() || TRIPO_API_BASE).replace(/\/+$/, "");
+    console.log("[object-box] --- tripo request ---");
+    console.log("[object-box] url   :", `${tripoBase}/task`);
+    console.log("[object-box] prompt:", description);
+    console.log("[object-box] body  :", JSON.stringify(createPayload));
+
+    let tripoCreateRaw: unknown = null;
+    try {
+      const createRes = await tripoFetch(env, "/task", {
+        method: "POST",
+        body: JSON.stringify(createPayload),
+      });
+      const createText = await createRes.text();
+      try {
+        tripoCreateRaw = JSON.parse(createText);
+      } catch {
+        tripoCreateRaw = createText;
+      }
+      console.log("[object-box] tripo.create response", tripoCreateRaw);
+
+      if (!createRes.ok) {
+        return json({
+          ok: true,
+          label,
+          description,
+          taskId: null,
+          modelUrl: null,
+          degraded: true,
+          warning: "tripo create failed; using placeholder mesh",
+          status: createRes.status,
+          tripo: { create: tripoCreateRaw },
+        });
+      }
+
+      const created = tripoCreateRaw as TripoCreateResp;
+      const taskId = created.data?.task_id ?? created.data?.id ?? null;
+
+      if (!taskId) {
+        return json({
+          ok: true,
+          label,
+          description,
+          taskId: null,
+          modelUrl: null,
+          degraded: true,
+          warning: "tripo did not return task id; using placeholder mesh",
+          tripo: { create: tripoCreateRaw },
+        });
+      }
+
+      return json({
+        ok: true,
+        label,
+        description,
+        taskId,
+        tripo: { create: tripoCreateRaw },
+      });
+    } catch (err) {
+      return json({ error: (err as Error).message }, 500);
+    }
+  },
+};
+
+/**
+ * GET /api/object-box/task?id=<taskId>
+ * Returns a single status snapshot for a Tripo task.
+ * The frontend polls this until status is terminal (success / failed / cancelled).
+ */
+export const taskStatusRoute: Route = {
+  method: "GET",
+  path: "/api/object-box/task",
+  handler: async ({ url, env }) => {
+    const taskId = url.searchParams.get("id")?.trim();
+    if (!taskId) return json({ error: "id query parameter required" }, 400);
+
+    try {
+      const taskRes = await tripoFetch(env, `/task/${encodeURIComponent(taskId)}`);
+      const taskText = await taskRes.text();
+      let taskRaw: unknown;
+      try {
+        taskRaw = JSON.parse(taskText);
+      } catch {
+        taskRaw = taskText;
+      }
+      console.log("[object-box] tripo.task response", taskRaw);
+
+      if (!taskRes.ok) {
+        return json({
+          ok: false,
+          taskId,
+          status: "error",
+          httpStatus: taskRes.status,
+          tripo: { task: taskRaw },
+        });
+      }
+
+      const task = taskRaw as TripoTaskResp;
+      const status = (task.data?.status ?? "unknown").toLowerCase();
+      const progress = typeof task.data?.progress === "number" ? task.data.progress : null;
+      const modelUrl = modelUrlFromTask(task);
+      const done = status === "success" || status === "completed" || !!modelUrl;
+      const failed = status === "failed" || status === "error" || status === "cancelled";
+
+      return json({
+        ok: true,
+        taskId,
+        status,
+        progress,
+        modelUrl,
+        done,
+        failed,
+        tripo: { task: taskRaw },
+      });
+    } catch (err) {
+      return json({ error: (err as Error).message }, 500);
+    }
+  },
+};