@hugpy/video-intelligence-ui 0.1.0

package/src/demo/DemoBanner.tsx

@@ -0,0 +1,54 @@
+// DemoBanner — the slim demo-mode strip above the video stations, modeled on
+// the media arm's banner MINUS the canned⇄live flip: the video arm has no live
+// demo (jobs would drive real worker GPUs — see mode.ts). Announces sample-data
+// mode, offers the install command, links to the platform. Suppressed when
+// embedded (the host showroom provides this chrome).
+import { useState } from "react";
+import { getDemoConfig } from "./mode";
+import { hugpyConfig } from "../config";
+import "./demo.css";
+
+const INSTALL_CMD = "pip install hugpy && hugpy serve --port 7002";
+
+export default function DemoBanner() {
+  const [copied, setCopied] = useState(false);
+  const cfg = getDemoConfig();
+  if (cfg.mode !== "canned" || cfg.embed) return null;
+
+  const copy = () => {
+    try {
+      void navigator.clipboard.writeText(INSTALL_CMD);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    } catch {
+      /* clipboard blocked */
+    }
+  };
+
+  return (
+    <div className="vi-demo-banner" role="note">
+      <span className="vi-demo-badge">DEMO</span>
+      <span className="vi-demo-text">
+        You&apos;re exploring with <strong>sample data</strong> — nothing here
+        runs a real model or touches a backend. Run it for real:
+      </span>
+      <code
+        className="vi-demo-cmd"
+        title="Click to copy"
+        onClick={copy}
+        role="button"
+        tabIndex={0}
+      >
+        {copied ? "copied ✓" : INSTALL_CMD}
+      </code>
+      <a
+        className="vi-demo-link"
+        href={hugpyConfig.siteUrl}
+        target="_blank"
+        rel="noreferrer"
+      >
+        hugpy.ai →
+      </a>
+    </div>
+  );
+}

package/src/demo/assets.d.ts

@@ -0,0 +1,14 @@
+// Vite bundles these as hashed asset URLs; the scoped strict tsconfig has no
+// vite/client ambient types (see config.ts), so declare the demo assets here.
+declare module "*.mp4" {
+  const url: string;
+  export default url;
+}
+declare module "*.mp3" {
+  const url: string;
+  export default url;
+}
+declare module "*.jpg" {
+  const url: string;
+  export default url;
+}

package/src/demo/demo.css

@@ -0,0 +1,64 @@
+/* Demo-mode banner for the video-intelligence arm — mirrors the media arm's
+   banner styling (mi-demo-*) so the two arms read as one product. */
+
+/* Rides in .vi-header-stack directly under the nav — a plain in-flow block; the
+   100dvh shell never scrolls, so no sticky of its own is needed. */
+.vi-demo-banner {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px 14px;
+  padding: 8px 16px;
+  font-size: 13px;
+  line-height: 1.4;
+  color: var(--text-secondary, #c7c7cc);
+  background: linear-gradient(180deg, #14171f, #0b0d13);
+  border-bottom: 1px solid var(--border-light, rgba(255, 255, 255, 0.09));
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
+}
+
+.vi-demo-badge {
+  flex: 0 0 auto;
+  font-weight: 700;
+  font-size: 11px;
+  letter-spacing: 0.12em;
+  padding: 2px 8px;
+  border-radius: 5px;
+  color: #050505;
+  background: #7cc4ff;
+}
+
+.vi-demo-text {
+  flex: 1 1 280px;
+  min-width: 200px;
+  color: var(--text-tertiary, #8e8e93);
+}
+.vi-demo-text strong {
+  color: var(--text-primary, #f2f2f4);
+}
+
+.vi-demo-cmd {
+  flex: 0 1 auto;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  padding: 3px 10px;
+  border-radius: 6px;
+  cursor: pointer;
+  color: #a8d2ff;
+  background: rgba(124, 196, 255, 0.08);
+  border: 1px solid rgba(124, 196, 255, 0.25);
+  white-space: nowrap;
+}
+.vi-demo-cmd:hover {
+  background: rgba(124, 196, 255, 0.16);
+}
+
+.vi-demo-link {
+  flex: 0 0 auto;
+  color: #7cc4ff;
+  text-decoration: none;
+  font-weight: 600;
+}
+.vi-demo-link:hover {
+  text-decoration: underline;
+}

package/src/demo/demoFetch.ts

@@ -0,0 +1,305 @@
+// The canned-demo transport: ONE window.fetch interceptor answering every hugpy
+// call from fixtures.ts. The real station shell + transport run unchanged; only
+// the wire is faked. Mirrors media_intelligence_ui/src/demo/demoFetch.ts, minus
+// the live pass-through flavor (the video arm has no live demo — see mode.ts).
+//
+// Patching window.fetch (not a config hook) is deliberate: the arm's typed
+// transport, entry.tsx's contract probe, and any raw fetch all call the global
+// fetch, so a single wrapper covers every path. Fully restorable on uninstall.
+// <img>/<video> src loads do NOT pass through fetch — fixtures point those at
+// bundled asset URLs instead (see fixtures.ts + config.ts mediaBytesUrl).
+
+import { hugpyConfig } from "../config";
+import * as fx from "./fixtures";
+import type { JobKind } from "./fixtures";
+import { nextGeneratedPrompt, enhancePrompt } from "./promptAssist";
+
+// ── request introspection (same helpers as the media arm) ───────────────────
+function pathOf(input: RequestInfo | URL): string {
+  let url =
+    typeof input === "string"
+      ? input
+      : input instanceof Request
+        ? input.url
+        : String((input as URL)?.toString?.() ?? input ?? "");
+  if (/^https?:\/\//i.test(url)) {
+    try {
+      const u = new URL(url);
+      url = u.pathname + u.search;
+    } catch {
+      /* keep raw */
+    }
+  }
+  return url;
+}
+
+function methodOf(input: RequestInfo | URL, init?: RequestInit): string {
+  return String(
+    init?.method ??
+      (input instanceof Request ? input.method : undefined) ??
+      "GET",
+  ).toUpperCase();
+}
+
+function apiPrefix(): string {
+  const b = hugpyConfig.apiBase || "/api";
+  if (/^https?:\/\//i.test(b)) {
+    try {
+      return new URL(b).pathname.replace(/\/+$/, "");
+    } catch {
+      return "/api";
+    }
+  }
+  return b.replace(/\/+$/, "");
+}
+
+function normalize(path: string): string {
+  const pre = apiPrefix();
+  if (pre && path.startsWith(pre)) return path.slice(pre.length) || "/";
+  return path;
+}
+
+async function readBody(
+  input: RequestInfo | URL,
+  init?: RequestInit,
+): Promise<string> {
+  if (init && typeof init.body === "string") return init.body;
+  if (input instanceof Request) {
+    try {
+      return await input.clone().text();
+    } catch {
+      return "";
+    }
+  }
+  return "";
+}
+
+function jsonResponse(body: unknown, status = 200): Response {
+  return new Response(JSON.stringify(body), {
+    status,
+    headers: { "content-type": "application/json" },
+  });
+}
+
+// ── the router ───────────────────────────────────────────────────────────────
+const JOB_ROUTES: Record<string, JobKind> = {
+  "/video/jobs/crop": "crop",
+  "/video/jobs/frame_extract": "frame_extract",
+  "/video/jobs/audio_extract": "audio_extract",
+  "/video/jobs/generate_image": "generate_image",
+  "/video/jobs/generate_scene": "generate_scene",
+  "/video/jobs/generate_movie": "generate_movie",
+};
+
+async function route(
+  input: RequestInfo | URL,
+  init?: RequestInit,
+): Promise<Response | null> {
+  const full = pathOf(input);
+  const [pathname, query = ""] = full.split("?");
+  const path = normalize(pathname);
+  const method = methodOf(input, init);
+
+  // Contract probe (entry.tsx) — always the expected version.
+  if (path === "/version") return jsonResponse({ api: 1 });
+
+  // Session metering — pretend to meter, touch nothing.
+  if (path.startsWith("/session/")) return jsonResponse({ ok: true });
+
+  // Upload: accept anything, answer with a plausible server file handle. The
+  // subsequent /video/ingest resolves it to the canned clip regardless.
+  if (path === "/uploads" && method === "POST") {
+    let name = "demo-clip.mp4";
+    const body = init?.body;
+    if (body instanceof FormData) {
+      const f = body.get("file");
+      if (f instanceof File && f.name) name = f.name;
+    }
+    return jsonResponse({ path: `/demo/uploads/${name}`, name, size: 55757 });
+  }
+
+  // Ingest: whatever was "uploaded", the demo's source is the canned clip.
+  if (path === "/video/ingest" && method === "POST") {
+    return jsonResponse(fx.demoClip);
+  }
+
+  // Job enqueues — remember the source kind so crop can answer image vs video.
+  const kind = JOB_ROUTES[path];
+  if (kind && method === "POST") {
+    let sourceKind: string | null = null;
+    try {
+      const body = JSON.parse((await readBody(input, init)) || "{}") as {
+        source?: { kind?: string };
+      };
+      sourceKind = body?.source?.kind ?? null;
+    } catch {
+      /* body optional */
+    }
+    return jsonResponse({ job_id: fx.enqueueJob(kind, sourceKind) });
+  }
+
+  // Job cancel (before poll — its path is a superset).
+  const cancelM = path.match(/^\/video\/jobs\/([^/]+)\/cancel$/);
+  if (cancelM && method === "POST") {
+    return jsonResponse(fx.cancelJob(decodeURIComponent(cancelM[1])));
+  }
+
+  // Job poll.
+  const poll = path.match(/^\/video\/jobs\/([^/]+)$/);
+  if (poll && method === "GET") {
+    return jsonResponse(fx.jobStatus(decodeURIComponent(poll[1])));
+  }
+
+  // Media bytes via fetch (waveform decode etc.): serve the bundled asset the
+  // handle already IS — through the REAL fetch, never back into the shim.
+  // Element src loads never reach here.
+  if (path === "/video/media" && method === "GET") {
+    const handle = new URLSearchParams(query).get("handle");
+    if (handle && _realFetch) return _realFetch(handle);
+    return jsonResponse({ error: "not found" }, 404);
+  }
+
+  // LLM PROMPT-ASSIST (Enhance / Generate) — the composers' ✨ buttons POST here. In
+  // canned mode we answer CLIENT-SIDE from the fragment banks in promptAssist.ts (zero
+  // backend contact): "generate" composes a fresh cinematic prompt (never the same one
+  // twice in a row), "detail" enriches the submitted draft with appended descriptors.
+  // The body shape { prompt, model, kind } matches what the stations parse
+  // (readAssistPrompt reads `.prompt`); `kind` echoes the request's context.kind.
+  if (path === "/video/prompt/assist" && method === "POST") {
+    let mode = "generate";
+    let draft = "";
+    let kind = "image";
+    try {
+      const body = JSON.parse((await readBody(input, init)) || "{}") as {
+        mode?: string;
+        draft?: string;
+        context?: { kind?: string };
+      };
+      if (body?.mode) mode = body.mode;
+      if (typeof body?.draft === "string") draft = body.draft;
+      if (body?.context?.kind) kind = body.context.kind;
+    } catch {
+      /* body optional — defaults stand */
+    }
+    const prompt = mode === "detail" ? enhancePrompt(draft) : nextGeneratedPrompt();
+    return jsonResponse({ prompt, model: "demo-showroom-llm", kind });
+  }
+
+  // Model registry + task defaults for the station dropdowns.
+  if (path === "/v1/models") return jsonResponse(fx.V1_MODELS);
+  if (path === "/prompt/tasks") return jsonResponse(fx.PROMPT_TASKS);
+
+  // Unified in-flight worker feed (Active Processes poller, useWorkerCalls.ts,
+  // ~2s cadence). The brochure runs nothing, so the honest envelope is an empty
+  // in-flight list — { jobs: [] } is exactly the shape parseJobs() projects, and
+  // an empty list keeps the panel truthful (no fabricated running render). Routed
+  // (not gated) so the poll simply never reaches the wire in canned mode.
+  if (path === "/llm/jobs" && method === "GET") {
+    return jsonResponse({ jobs: [] });
+  }
+
+  // Bus-wide MEDIA JOBS listing (Active Processes media poller, useMediaJobs.ts,
+  // ~2s cadence, GET bare /video/jobs — no id, so the job-poll regex below never
+  // matches it). Same honest empty in-flight list as /llm/jobs. Must sit ABOVE
+  // the /video/jobs/<id> poll route so the bare path resolves here first.
+  if (path === "/video/jobs" && method === "GET") {
+    return jsonResponse({ jobs: [] });
+  }
+
+  // Known PROJECT names (Settings project combobox, useProjects.ts, on mount) —
+  // GET → { projects: [name,…] }. The brochure has produced nothing durable, so
+  // an empty list is honest and passes projectsResponseSchema.
+  if (path === "/video/projects" && method === "GET") {
+    return jsonResponse({ projects: [] });
+  }
+
+  // Curated STUDIO clip presets (Studio Clips station, useStudioPresets.ts, on
+  // mount) — GET → { presets: [...] }. Empty envelope passes
+  // studioPresetsResponseSchema; the showroom's Studio curation is the movie/
+  // video presets already routed above.
+  if (path === "/video/studio/presets" && method === "GET") {
+    return jsonResponse({ presets: [] });
+  }
+
+  // Durable recent STUDIO CLIPS (Studio Clips list) — GET → { clips: [...] }.
+  // The brochure has no persisted renders; empty is honest.
+  if (path === "/video/studio/clips" && method === "GET") {
+    return jsonResponse({ clips: [] });
+  }
+
+  // CINEMA SESSIONS (the Cinema composer's sessions panel) — GET → { movies: [...] }.
+  // Same honesty as the clips list above: the brochure has no movie dirs on disk, so
+  // there is nothing to resume; an empty envelope passes the panel's schema and it
+  // says so in words rather than erroring.
+  if (path === "/video/studio/movies" && method === "GET") {
+    return jsonResponse({ movies: [] });
+  }
+
+  // IDENTITY PROFILES (Studio identity picker, useIdentityProfiles.ts, on mount)
+  // — GET → { profiles: [...] }. No durable identities in the showroom; empty.
+  if (path === "/video/identity-profiles" && method === "GET") {
+    return jsonResponse({ profiles: [] });
+  }
+
+  // k9 VIDEO-SHARE links (SharePanel probe on mount + mint/revoke). The public
+  // brochure principal is NOT an operator, so the honest answer to every verb is
+  // 401 — exactly what the real operator-gated route returns to a non-operator.
+  // The transport folds a shim 401 into a clean `unauthorized` Result (no throw,
+  // no browser console error, no wire hit), and SharePanel then hides the Share
+  // affordance (authed=false), matching production behaviour for a share/anon
+  // session. Covers the list GET, the mint POST, and the per-id revoke DELETE.
+  if (path === "/keys/video-share" || path.startsWith("/keys/video-share/")) {
+    return jsonResponse({ error: "operator authentication required" }, 401);
+  }
+
+  // Curated presets for the Generate-station dropdown + the per-id pre-warm.
+  if (path === "/video/presets" && method === "GET") {
+    return jsonResponse(fx.PRESETS);
+  }
+  const presetApply = path.match(/^\/video\/presets\/([^/]+)\/apply$/);
+  if (presetApply && method === "POST") {
+    const result = fx.applyPreset(decodeURIComponent(presetApply[1]));
+    // Mirror the contract's status codes: 404 for an unknown preset, else 200.
+    return jsonResponse(result, result.ok ? 200 : 404);
+  }
+
+  // Curated MOVIE TEMPLATES for the Movie-tab dropdown + the per-id apply. The list
+  // returns a {presets:[…]} envelope (matches /video/presets + the real backend);
+  // apply echoes the same full object (404 unknown).
+  if (path === "/movie/presets" && method === "GET") {
+    return jsonResponse({ presets: fx.MOVIE_PRESETS });
+  }
+  const moviePresetApply = path.match(/^\/movie\/presets\/([^/]+)\/apply$/);
+  if (moviePresetApply && method === "POST") {
+    const found = fx.applyMoviePreset(decodeURIComponent(moviePresetApply[1]));
+    return jsonResponse(found ?? { error: { code: "unknown_preset" } }, found ? 200 : 404);
+  }
+
+  return null; // not a hugpy call — pass through (bundled assets, HMR, …)
+}
+
+// ── install / uninstall ──────────────────────────────────────────────────────
+let _realFetch: typeof window.fetch | null = null;
+
+export function installDemoTransport(): void {
+  if (_realFetch) return; // already installed
+  _realFetch = window.fetch.bind(window);
+  window.fetch = async (
+    input: RequestInfo | URL,
+    init?: RequestInit,
+  ): Promise<Response> => {
+    try {
+      const canned = await route(input, init);
+      if (canned) return canned;
+    } catch {
+      /* fall through to the real fetch on any shim error */
+    }
+    return _realFetch!(input, init);
+  };
+}
+
+export function uninstallDemoTransport(): void {
+  if (!_realFetch) return;
+  window.fetch = _realFetch;
+  _realFetch = null;
+}