@supersoniks/concorde 4.9.96 → 4.9.97-visual-stack.0

package/src/docs/example/docs-hugging-face-demos.ts

@@ -0,0 +1,516 @@
+import { html, LitElement, nothing, type TemplateResult } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { tailwind } from "../tailwind";
+import { DataProviderKey } from "@supersoniks/concorde/core/utils/dataProviderKey";
+import { dp, set } from "@supersoniks/concorde/utils";
+import {
+  configureHuggingFace,
+  defineHuggingFaceModels,
+  type HfInferStatus,
+} from "../../core/components/functional/infer/hugging-face/hugging-face";
+import type { HfSerializedImage } from "../../core/components/functional/infer/hugging-face/types";
+
+import "../../core/components/functional/infer/hugging-face/hugging-face-infer";
+import "../../core/components/ui/button/button";
+import "../../core/components/ui/progress/progress";
+
+/** Docs only: CDN + Hub. Each demo stays idle until Try. */
+const V = "4.3.0";
+configureHuggingFace({
+  runtime: {
+    source: "cdn",
+    version: V,
+    url: `https://cdn.jsdelivr.net/npm/@huggingface/transformers@${V}/dist/transformers.min.js`,
+    wasmPaths: "https://cdn.jsdelivr.net/npm/onnxruntime-web@1.31.0-dev.20260914-8d85527a0/dist/",
+  },
+  models: defineHuggingFaceModels({
+    "docs-cutout": {
+      task: "background-removal",
+      repo: "onnx-community/ISNet-ONNX",
+      revision: "main",
+      options: { dtype: "q8" },
+      sizeBytes: 44_350_000,
+      label: "Cutout",
+      license: "agpl-3.0",
+    },
+    "docs-depth": {
+      task: "depth-estimation",
+      repo: "Xenova/depth-anything-small-hf",
+      revision: "main",
+      options: { dtype: "q8" },
+      sizeBytes: 27_000_000,
+      label: "Depth",
+    },
+    "docs-detect": {
+      task: "object-detection",
+      repo: "Xenova/yolos-tiny",
+      revision: "main",
+      options: { dtype: "q8" },
+      sizeBytes: 7_500_000,
+      label: "Detection",
+      defaults: { threshold: 0.5, percentage: true },
+    },
+    "docs-caption": {
+      task: "image-to-text",
+      repo: "Xenova/vit-gpt2-image-captioning",
+      revision: "main",
+      options: { dtype: "q8" },
+      sizeBytes: 246_000_000,
+      label: "Caption",
+      defaults: { max_new_tokens: 40 },
+    },
+    "docs-suggest": {
+      task: "zero-shot-classification",
+      repo: "Xenova/mobilebert-uncased-mnli",
+      revision: "main",
+      options: { dtype: "q8" },
+      sizeBytes: 26_500_000,
+      label: "Categories",
+      defaults: {
+        candidate_labels: ["comedy", "kids", "classical", "rock", "dance", "theatre"],
+        multi_label: true,
+      },
+    },
+    "docs-ner": {
+      task: "token-classification",
+      repo: "Xenova/bert-base-NER",
+      revision: "main",
+      options: { dtype: "q8" },
+      sizeBytes: 109_000_000,
+      label: "NER",
+      defaults: { aggregation_strategy: "simple" },
+    },
+  }),
+  defaults: { load: "consent", allowWasmUpToMB: 280, timeoutMs: 180_000 },
+});
+
+const sample = (file: string) => new URL(`/docs/hf-samples/${file}`, location.origin).href;
+const pct = (n: number) => Math.round(Math.min(1, Math.max(0, n)) * 100);
+
+const CHECKER = {
+  backgroundImage:
+    "linear-gradient(45deg,#d4d4d8 25%,transparent 25%),linear-gradient(-45deg,#d4d4d8 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d4d4d8 75%),linear-gradient(-45deg,transparent 75%,#d4d4d8 75%)",
+  backgroundSize: "16px 16px",
+  backgroundPosition: "0 0,0 8px,8px -8px,-8px 0",
+  backgroundColor: "#f4f4f5",
+};
+
+/** Shared shell: Try → consent → progress → body. */
+abstract class HfDemo extends LitElement {
+  static styles = [tailwind];
+
+  @state() protected active = false;
+  @state() protected status: HfInferStatus | null = null;
+  private offStatus: (() => void) | null = null;
+
+  protected abstract label: string;
+  protected abstract sizeHint: string;
+  protected abstract blurb: string;
+  protected abstract consentKey: string;
+  protected abstract onStart(): void;
+  protected abstract body(): TemplateResult;
+
+  disconnectedCallback(): void {
+    this.offStatus?.();
+    super.disconnectedCallback();
+  }
+
+  protected watchStatus(key: DataProviderKey<HfInferStatus | null>) {
+    this.offStatus?.();
+    const handler = (v: HfInferStatus | null) => {
+      this.status = v;
+    };
+    dp(key).onAssign(handler);
+    this.offStatus = () => dp(key).offAssign(handler);
+  }
+
+  private start = () => {
+    if (this.active) return;
+    this.active = true;
+    this.onStart();
+  };
+
+  private chrome(): TemplateResult {
+    const s = this.status;
+    const state = s?.state;
+    let progress: TemplateResult | typeof nothing = nothing;
+    if (state === "downloading") {
+      const p = s?.progress?.percent ?? 0;
+      progress = html`<sonic-progress value=${p} size="sm">Downloading ${p}%</sonic-progress>`;
+    } else if (state === "loading" || state === "running") {
+      progress = html`<sonic-progress size="sm"
+        >${state === "running" ? "Running…" : "Loading…"}</sonic-progress
+      >`;
+    }
+    const consent =
+      state === "awaiting-consent"
+        ? html`
+            <div formDataProvider=${this.consentKey} class="flex flex-wrap items-center gap-2 text-sm">
+              <span>Download model${s?.size?.totalMB != null ? html` (~${s.size.totalMB} MB)` : nothing}?</span>
+              <sonic-button radio name="accepted" value="accepted" size="sm">OK</sonic-button>
+            </div>
+          `
+        : nothing;
+    const err = s?.error?.message
+      ? html`<p class="text-xs text-red-600">${s.error.message}</p>`
+      : nothing;
+    return html`${consent}${progress}${err}`;
+  }
+
+  render() {
+    if (!this.active) {
+      return html`
+        <div class="flex flex-col gap-2 rounded border border-dashed p-3 sm:flex-row sm:items-center sm:gap-3">
+          <div class="min-w-0 flex-1 text-sm">
+            <div class="font-medium">${this.label} <span class="font-normal text-neutral-400">(~${this.sizeHint})</span></div>
+            <div class="text-neutral-500">${this.blurb}</div>
+          </div>
+          <sonic-button size="sm" type="primary" @click=${this.start}>Try</sonic-button>
+        </div>
+      `;
+    }
+    return html`<div class="flex flex-col gap-3">${this.chrome()}${this.body()}</div>`;
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/* Image demos                                                         */
+/* ------------------------------------------------------------------ */
+
+const cutoutIn = new DataProviderKey<string | null>("hfCutoutIn");
+const cutoutOut = new DataProviderKey<unknown>("hfCutoutOut");
+const cutoutSt = new DataProviderKey<HfInferStatus | null>("hfCutoutSt");
+
+@customElement("docs-hf-cutout-demo")
+export class DocsHfCutoutDemo extends HfDemo {
+  protected label = "Cutout";
+  protected sizeHint = "44 Mo";
+  protected blurb = "Subject on a transparent background.";
+  protected consentKey = "hfCutoutConsent";
+
+  @state() private result: string | null = null;
+  private readonly onOut = (v: unknown) => {
+    const list = Array.isArray(v) ? v : v ? [v] : [];
+    for (const x of list) {
+      if (x && typeof x === "object" && typeof (x as HfSerializedImage).url === "string") {
+        this.result = (x as HfSerializedImage).url!;
+        return;
+      }
+    }
+    this.result = null;
+  };
+
+  disconnectedCallback(): void {
+    dp(cutoutOut).offAssign(this.onOut);
+    super.disconnectedCallback();
+  }
+
+  protected onStart() {
+    this.watchStatus(cutoutSt);
+    dp(cutoutOut).onAssign(this.onOut);
+    set(cutoutIn, sample("singer.jpg"));
+  }
+
+  protected body() {
+    return html`
+      <sonic-hugging-face-infer
+        model="docs-cutout"
+        inputProvider=${cutoutIn.path}
+        outputProvider=${cutoutOut.path}
+        statusProvider=${cutoutSt.path}
+        consentProvider="hfCutoutConsent.accepted"
+      ></sonic-hugging-face-infer>
+      <div class="grid gap-2 sm:grid-cols-2">
+        <img src=${sample("singer.jpg")} alt="" class="w-full rounded-lg object-cover" />
+        <div class="overflow-hidden rounded-lg" style=${styleMap(CHECKER)}>
+          ${this.result
+            ? html`<img src=${this.result} alt="" class="w-full object-contain" />`
+            : html`<div class="aspect-square"></div>`}
+        </div>
+      </div>
+    `;
+  }
+}
+
+const depthIn = new DataProviderKey<string | null>("hfDepthIn");
+const depthOut = new DataProviderKey<{ depth?: HfSerializedImage } | null>("hfDepthOut");
+const depthSt = new DataProviderKey<HfInferStatus | null>("hfDepthSt");
+
+@customElement("docs-hf-depth-demo")
+export class DocsHfDepthDemo extends HfDemo {
+  protected label = "Depth";
+  protected sizeHint = "27 Mo";
+  protected blurb = "Photo → depth map.";
+  protected consentKey = "hfDepthConsent";
+
+  @state() private result: string | null = null;
+  private readonly onOut = (v: { depth?: HfSerializedImage } | null) => {
+    this.result = v?.depth?.url ?? null;
+  };
+
+  disconnectedCallback(): void {
+    dp(depthOut).offAssign(this.onOut);
+    super.disconnectedCallback();
+  }
+
+  protected onStart() {
+    this.watchStatus(depthSt);
+    dp(depthOut).onAssign(this.onOut);
+    set(depthIn, sample("scene.jpg"));
+  }
+
+  protected body() {
+    return html`
+      <sonic-hugging-face-infer
+        model="docs-depth"
+        inputProvider=${depthIn.path}
+        outputProvider=${depthOut.path}
+        statusProvider=${depthSt.path}
+        consentProvider="hfDepthConsent.accepted"
+      ></sonic-hugging-face-infer>
+      <div class="grid gap-2 sm:grid-cols-2">
+        <img src=${sample("scene.jpg")} alt="" class="w-full rounded-lg object-cover" />
+        ${this.result
+          ? html`<img src=${this.result} alt="" class="w-full rounded-lg object-cover" />`
+          : html`<div class="aspect-[4/3] rounded-lg bg-neutral-100"></div>`}
+      </div>
+    `;
+  }
+}
+
+type Box = { label: string; score: number; box: { xmin: number; ymin: number; xmax: number; ymax: number } };
+const detectIn = new DataProviderKey<string | null>("hfDetectIn");
+const detectOut = new DataProviderKey<Box[] | null>("hfDetectOut");
+const detectSt = new DataProviderKey<HfInferStatus | null>("hfDetectSt");
+const BOX_COLORS = ["#ef4444", "#3b82f6", "#10b981", "#f59e0b"];
+
+@customElement("docs-hf-detect-demo")
+export class DocsHfDetectDemo extends HfDemo {
+  protected label = "Detection";
+  protected sizeHint = "8 Mo";
+  protected blurb = "Boxes + labels on the photo.";
+  protected consentKey = "hfDetectConsent";
+
+  @state() private boxes: Box[] = [];
+  private readonly onOut = (v: Box[] | null) => {
+    this.boxes = Array.isArray(v) ? v : [];
+  };
+
+  disconnectedCallback(): void {
+    dp(detectOut).offAssign(this.onOut);
+    super.disconnectedCallback();
+  }
+
+  protected onStart() {
+    this.watchStatus(detectSt);
+    dp(detectOut).onAssign(this.onOut);
+    set(detectIn, sample("cats.jpg"));
+  }
+
+  protected body() {
+    return html`
+      <sonic-hugging-face-infer
+        model="docs-detect"
+        inputProvider=${detectIn.path}
+        outputProvider=${detectOut.path}
+        statusProvider=${detectSt.path}
+        consentProvider="hfDetectConsent.accepted"
+      ></sonic-hugging-face-infer>
+      <div class="relative overflow-hidden rounded-lg">
+        <img src=${sample("cats.jpg")} alt="" class="block w-full" />
+        ${this.boxes.map((b, i) => {
+          const s = b.box.xmax <= 1.5 ? 100 : 1;
+          const color = BOX_COLORS[i % BOX_COLORS.length];
+          return html`
+            <div
+              class="pointer-events-none absolute rounded border-2"
+              style=${styleMap({
+                left: `${b.box.xmin * s}%`,
+                top: `${b.box.ymin * s}%`,
+                width: `${(b.box.xmax - b.box.xmin) * s}%`,
+                height: `${(b.box.ymax - b.box.ymin) * s}%`,
+                borderColor: color,
+              })}
+            >
+              <span
+                class="absolute -top-5 left-0 rounded px-1 text-[10px] text-white"
+                style=${styleMap({ background: color })}
+                >${b.label} ${pct(b.score)}%</span
+              >
+            </div>
+          `;
+        })}
+      </div>
+    `;
+  }
+}
+
+const captionIn = new DataProviderKey<string | null>("hfCaptionIn");
+const captionOut = new DataProviderKey<{ generated_text: string }[] | null>("hfCaptionOut");
+const captionSt = new DataProviderKey<HfInferStatus | null>("hfCaptionSt");
+
+@customElement("docs-hf-caption-demo")
+export class DocsHfCaptionDemo extends HfDemo {
+  protected label = "Caption";
+  protected sizeHint = "246 Mo";
+  protected blurb = "Photo → one sentence (first load is slow).";
+  protected consentKey = "hfCaptionConsent";
+
+  @state() private text: string | null = null;
+  private readonly onOut = (v: { generated_text: string }[] | null) => {
+    this.text = Array.isArray(v) ? (v[0]?.generated_text ?? null) : null;
+  };
+
+  disconnectedCallback(): void {
+    dp(captionOut).offAssign(this.onOut);
+    super.disconnectedCallback();
+  }
+
+  protected onStart() {
+    this.watchStatus(captionSt);
+    dp(captionOut).onAssign(this.onOut);
+    set(captionIn, sample("cats.jpg"));
+  }
+
+  protected body() {
+    return html`
+      <sonic-hugging-face-infer
+        model="docs-caption"
+        inputProvider=${captionIn.path}
+        outputProvider=${captionOut.path}
+        statusProvider=${captionSt.path}
+        consentProvider="hfCaptionConsent.accepted"
+      ></sonic-hugging-face-infer>
+      <div class="grid gap-3 sm:grid-cols-2 sm:items-center">
+        <img src=${sample("cats.jpg")} alt="" class="w-full rounded-lg object-cover" />
+        <p class="text-lg">${this.text ?? "…"}</p>
+      </div>
+    `;
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/* Text demos                                                          */
+/* ------------------------------------------------------------------ */
+
+const TEXTS = [
+  "Looking for a night of laughs with friends",
+  "A gentle musical tale for my 6-year-old",
+  "Candlelight Bach in a chapel",
+] as const;
+
+const suggestIn = new DataProviderKey<string | null>("hfSuggestIn");
+const suggestOut = new DataProviderKey<{ labels: string[]; scores: number[] } | null>("hfSuggestOut");
+const suggestSt = new DataProviderKey<HfInferStatus | null>("hfSuggestSt");
+
+@customElement("docs-hf-suggest-demo")
+export class DocsHfSuggestDemo extends HfDemo {
+  protected label = "Categories";
+  protected sizeHint = "25 Mo";
+  protected blurb = "Copy → scores on free-form labels.";
+  protected consentKey = "hfSuggestConsent";
+
+  @state() private out: { labels: string[]; scores: number[] } | null = null;
+  private readonly onOut = (v: { labels: string[]; scores: number[] } | null) => {
+    this.out = v;
+  };
+
+  disconnectedCallback(): void {
+    dp(suggestOut).offAssign(this.onOut);
+    super.disconnectedCallback();
+  }
+
+  protected onStart() {
+    this.watchStatus(suggestSt);
+    dp(suggestOut).onAssign(this.onOut);
+    set(suggestIn, TEXTS[0]);
+  }
+
+  protected body() {
+    const rows = this.out?.labels?.map((label, i) => ({ label, score: this.out!.scores[i] ?? 0 })) ?? [];
+    return html`
+      <sonic-hugging-face-infer
+        model="docs-suggest"
+        inputProvider=${suggestIn.path}
+        outputProvider=${suggestOut.path}
+        statusProvider=${suggestSt.path}
+        consentProvider="hfSuggestConsent.accepted"
+        debounce="300"
+      ></sonic-hugging-face-infer>
+      <div class="flex flex-wrap gap-2">
+        ${TEXTS.map(
+          (t) => html`
+            <sonic-button size="xs" variant="outline" @click=${() => set(suggestIn, t)}
+              >${t.length > 28 ? `${t.slice(0, 26)}…` : t}</sonic-button
+            >
+          `,
+        )}
+      </div>
+      ${rows.length
+        ? html`
+            <ul class="flex flex-col gap-1 text-sm">
+              ${rows.slice(0, 5).map(
+                (r) => html`<li class="flex justify-between gap-4"><span class="capitalize">${r.label}</span><span class="tabular-nums text-neutral-500">${pct(r.score)}%</span></li>`,
+              )}
+            </ul>
+          `
+        : nothing}
+    `;
+  }
+}
+
+type NerHit = { word: string; score: number; entity_group?: string; entity?: string };
+const NER_TEXT =
+  "Tomorrow night, Taylor Swift plays at the Accor Arena in Paris with opener Charli XCX.";
+const nerIn = new DataProviderKey<string | null>("hfNerIn");
+const nerOut = new DataProviderKey<NerHit[] | null>("hfNerOut");
+const nerSt = new DataProviderKey<HfInferStatus | null>("hfNerSt");
+
+@customElement("docs-hf-ner-demo")
+export class DocsHfNerDemo extends HfDemo {
+  protected label = "Entities (NER)";
+  protected sizeHint = "109 Mo";
+  protected blurb = "People, places, organizations.";
+  protected consentKey = "hfNerConsent";
+
+  @state() private hits: NerHit[] = [];
+  private readonly onOut = (v: NerHit[] | null) => {
+    this.hits = Array.isArray(v) ? v.filter((x) => x?.word) : [];
+  };
+
+  disconnectedCallback(): void {
+    dp(nerOut).offAssign(this.onOut);
+    super.disconnectedCallback();
+  }
+
+  protected onStart() {
+    this.watchStatus(nerSt);
+    dp(nerOut).onAssign(this.onOut);
+    set(nerIn, NER_TEXT);
+  }
+
+  protected body() {
+    return html`
+      <sonic-hugging-face-infer
+        model="docs-ner"
+        inputProvider=${nerIn.path}
+        outputProvider=${nerOut.path}
+        statusProvider=${nerSt.path}
+        consentProvider="hfNerConsent.accepted"
+      ></sonic-hugging-face-infer>
+      <p class="text-sm text-neutral-600">${NER_TEXT}</p>
+      <div class="flex flex-wrap gap-2">
+        ${this.hits.map((e) => {
+          const g = (e.entity_group || e.entity || "?").replace(/^[BI]-/, "");
+          return html`
+            <span class="rounded-full border px-2 py-1 text-xs">
+              <strong>${e.word}</strong>
+              <span class="text-neutral-500"> · ${g} · ${pct(e.score)}%</span>
+            </span>
+          `;
+        })}
+      </div>
+    `;
+  }
+}