@supersoniks/concorde 4.9.98-visual-stack.1 → 5.0.0

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

@@ -1,516 +0,0 @@
-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>
-    `;
-  }
-}