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

package/src/docs/example/docs-visual-stack-demo.ts

@@ -0,0 +1,394 @@
+/**
+ * Démo stack : photo → HF depth → sonic-shader (parallax) → extract → jsonata.
+ * Médias en hot path (DP) ; jsonata seulement pour les stats d’extract.
+ */
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import { DataProviderKey } from "@supersoniks/concorde/core/utils/dataProviderKey";
+import { dp, get, set } from "@supersoniks/concorde/utils";
+import type { HfInferStatus } from "../../core/components/functional/infer/hugging-face/hugging-face";
+import type { HfSerializedImage } from "../../core/components/functional/infer/hugging-face/types";
+import { tailwind } from "../tailwind";
+
+import "../../core/components/functional/infer/hugging-face/hugging-face-infer";
+import "../../core/components/functional/jsonata/jsonata";
+import "../../core/components/functional/shader/shader";
+import "../../core/components/ui/button/button";
+import "../../core/components/ui/form/input/input";
+import "../../core/components/ui/progress/progress";
+import "../../core/components/functional/value/value";
+
+/** HF config : docs-hugging-face-demos (importé avant dans docs.ts). */
+
+type FxState = {
+  bufferACh0?: string;
+  imageCh0?: string;
+  imageCh1?: string;
+  param0?: number;
+};
+
+const sample = (file: string) =>
+  new URL(`/docs/hf-samples/${file}`, location.origin).href;
+
+const PHOTO = sample("scene.jpg");
+
+const photoKey = new DataProviderKey<string>("stackPhoto");
+const fxKey = new DataProviderKey<FxState | null>("stackFx");
+const depthOutKey = new DataProviderKey<{
+  depth?: HfSerializedImage;
+} | null>("stackDepthOut");
+const depthStKey = new DataProviderKey<HfInferStatus | null>("stackDepthSt");
+const triggerKey = new DataProviderKey<number>("stackDepthTrigger");
+const extractKey = new DataProviderKey<{
+  items?: { score?: number }[];
+} | null>("stackExtract");
+const statsKey = new DataProviderKey<{
+  count?: number;
+  avgScore?: number;
+  strong?: number;
+  suggestedThreshold?: number;
+} | null>("stackExtractStats");
+
+const PARALLAX_BUFFER_A = `
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  vec2 px = 1.0 / max(iChannelResolution[0].xy, vec2(1.0));
+  float soft = 0.0;
+  float wsum = 0.0;
+  for (int j = -1; j <= 1; j++) {
+    for (int i = -1; i <= 1; i++) {
+      float w = (i == 0 && j == 0) ? 4.0 : 1.0;
+      soft += texture(iChannel0, uv + px * vec2(float(i), float(j))).r * w;
+      wsum += w;
+    }
+  }
+  soft /= wsum;
+  float dilated = soft;
+  for (int j = -2; j <= 2; j++) {
+    for (int i = -2; i <= 2; i++) {
+      if (i * i + j * j > 5) continue;
+      dilated = max(dilated, texture(iChannel0, uv + px * vec2(float(i), float(j))).r);
+    }
+  }
+  float d = mix(soft, dilated, 0.55);
+  fragColor = vec4(d, d, d, 1.0);
+}
+`;
+
+const PARALLAX_LIVE = `
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  vec2 mouse = vec2(0.0);
+  if (length(iMouse.xy) > 0.5) {
+    mouse = (iMouse.xy / iResolution.xy) * 2.0 - 1.0;
+  }
+  float tilt = 0.02 + clamp(uParam0, 0.0, 1.0) * 0.09;
+  vec2 base = (uv - 0.5) * 0.955 + 0.5;
+  float h0 = texture(iChannel0, base).r - 0.5;
+  vec2 mid = clamp(base + mouse * h0 * tilt, 0.0, 1.0);
+  float h1 = texture(iChannel0, mid).r - 0.5;
+  vec2 sampleUv = clamp(base + mouse * h1 * tilt, 0.0, 1.0);
+  fragColor = vec4(texture(iChannel1, sampleUv).rgb, 1.0);
+}
+`;
+
+/** Analytique extract (pas de médias) — seuils / scores. */
+const STATS_EXPRESSION = `{
+  "count": $count($input.items),
+  "avgScore": $round($average($input.items.score) * 100) / 100,
+  "strong": $count($input.items[score >= 0.7]),
+  "suggestedThreshold": $round(($average($input.items.score) * 0.85) * 100) / 100
+}`;
+
+@customElement("docs-visual-stack-demo")
+export class DocsVisualStackDemo extends LitElement {
+  static styles = [
+    tailwind,
+    css`
+      :host {
+        display: block;
+      }
+      sonic-shader {
+        border-radius: 0.5rem;
+        min-height: 14rem;
+      }
+      .pipe {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.35rem 0.5rem;
+        align-items: center;
+        font-size: 0.75rem;
+        color: #737373;
+      }
+      .pipe code {
+        font-size: 0.7rem;
+        padding: 0.1rem 0.35rem;
+        border-radius: 0.25rem;
+        background: #f4f4f5;
+        color: #525252;
+      }
+      .pipe .arrow {
+        opacity: 0.45;
+      }
+    `,
+  ];
+
+  @state() private active = false;
+  @state() private status: HfInferStatus | null = null;
+  @state() private depthPreview: string | null = null;
+  @state() private hasFx = false;
+  @state() private running = false;
+  private offStatus: (() => void) | null = null;
+  private offDepth: (() => void) | null = null;
+  private offFx: (() => void) | null = null;
+  private triggerN = 0;
+
+  disconnectedCallback(): void {
+    this.offStatus?.();
+    this.offDepth?.();
+    this.offFx?.();
+    super.disconnectedCallback();
+  }
+
+  private start = () => {
+    if (this.active) return;
+    this.active = true;
+    set(photoKey, PHOTO);
+    set(fxKey, { param0: 0.65 });
+    set(triggerKey, 0);
+    const onSt = (v: HfInferStatus | null) => {
+      this.status = v;
+    };
+    dp(depthStKey).onAssign(onSt);
+    this.offStatus = () => dp(depthStKey).offAssign(onSt);
+
+    const onDepth = (v: { depth?: HfSerializedImage } | null) => {
+      const depthUrl = v?.depth?.url ?? null;
+      this.depthPreview = depthUrl;
+      const photo = get(photoKey);
+      if (!depthUrl || !photo) return;
+      const cur = get(fxKey) ?? {};
+      set(fxKey, {
+        ...cur,
+        bufferACh0: depthUrl,
+        imageCh0: "buffer-a",
+        imageCh1: photo,
+        param0: typeof cur.param0 === "number" ? cur.param0 : 0.65,
+      });
+    };
+    dp(depthOutKey).onAssign(onDepth);
+    this.offDepth = () => dp(depthOutKey).offAssign(onDepth);
+
+    const onFx = (v: FxState | null) => {
+      this.hasFx = !!(v && v.bufferACh0 && v.imageCh1);
+    };
+    dp(fxKey).onAssign(onFx);
+    this.offFx = () => dp(fxKey).offAssign(onFx);
+  };
+
+  private runDepth = () => {
+    if (this.running) return;
+    this.running = true;
+    this.triggerN += 1;
+    set(photoKey, PHOTO);
+    set(triggerKey, this.triggerN);
+    this.running = false;
+  };
+
+  private chrome() {
+    const s = this.status;
+    const state = s?.state;
+    let progress = 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" ? "Depth…" : "Loading…"}</sonic-progress
+      >`;
+    }
+    const consent =
+      state === "awaiting-consent"
+        ? html`
+            <div
+              formDataProvider="stackDepthConsent"
+              class="flex flex-wrap items-center gap-2 text-sm"
+            >
+              <span
+                >Modèle depth${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-3 rounded-lg border border-dashed border-neutral-300 p-4"
+        >
+          <div class="pipe">
+            <code>photo</code><span class="arrow">→</span>
+            <code>HF depth</code><span class="arrow">→</span>
+            <code>sonic-shader</code><span class="arrow">→</span>
+            <code>extract</code><span class="arrow">→</span>
+            <code>jsonata</code>
+          </div>
+          <p class="m-0 text-sm text-neutral-600">
+            Médias en direct (HF → shader). JSONata seulement en aval pour les
+            stats / seuils d’extract — pas dans la boucle textures.
+          </p>
+          <sonic-button type="primary" size="sm" @click=${this.start}
+            >Try (~27 Mo)</sonic-button
+          >
+        </div>
+      `;
+    }
+
+    return html`
+      <div class="flex flex-col gap-4">
+        <div class="pipe">
+          <code>HF</code><span class="arrow">→</span>
+          <code>shader</code><span class="arrow">→</span>
+          <code>extract</code><span class="arrow">→</span>
+          <code>jsonata</code>
+          <span class="text-neutral-400">(stats)</span>
+        </div>
+
+        ${this.chrome()}
+
+        <sonic-hugging-face-infer
+          model="docs-depth"
+          inputProvider=${photoKey.path}
+          outputProvider=${depthOutKey.path}
+          statusProvider=${depthStKey.path}
+          consentProvider="stackDepthConsent.accepted"
+          triggerProvider=${triggerKey.path}
+          load="consent"
+          trigger="demand"
+        ></sonic-hugging-face-infer>
+
+        ${this.hasFx
+          ? html`<sonic-jsonata
+              inputProvider=${extractKey.path}
+              outputProvider=${statsKey.path}
+              expression=${STATS_EXPRESSION}
+            ></sonic-jsonata>`
+          : nothing}
+
+        <div class="grid gap-3 lg:grid-cols-2">
+          <div class="flex flex-col gap-2">
+            <p class="m-0 text-sm font-medium text-neutral-800">1. Source</p>
+            <img
+              class="w-full rounded-lg object-cover"
+              src=${PHOTO}
+              alt="Scene"
+            />
+            <div class="flex flex-wrap items-center gap-2">
+              <sonic-button
+                type="primary"
+                size="sm"
+                @click=${this.runDepth}
+                >${this.depthPreview
+                  ? "Re-run depth"
+                  : "Run depth"}</sonic-button
+              >
+              <span class="text-xs text-neutral-500"
+                >Depth HF → câblage direct vers le shader.</span
+              >
+            </div>
+            ${this.depthPreview
+              ? html`<figure class="w-28">
+                  <img
+                    class="w-full rounded-md"
+                    src=${this.depthPreview}
+                    alt="Depth"
+                  />
+                  <figcaption class="mt-1 text-xs text-neutral-500">
+                    depth.url
+                  </figcaption>
+                </figure>`
+              : nothing}
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <p class="m-0 text-sm font-medium text-neutral-800">
+              2. Parallax + stats
+            </p>
+            ${this.hasFx
+              ? html`
+                  <div formDataProvider=${fxKey.path} class="min-w-0">
+                    <label class="text-xs text-neutral-500"
+                      >relief (param0)</label
+                    >
+                    <sonic-input
+                      type="range"
+                      name="param0"
+                      min="0"
+                      max="1"
+                      step="0.05"
+                    ></sonic-input>
+                  </div>
+                  <sonic-shader
+                    dataProvider=${fxKey.path}
+                    mouse
+                    mouse-mode="target"
+                    mouse-speed="6"
+                    play
+                    extract
+                    extract-mask="buffer-a"
+                    extract-source="image"
+                    extract-threshold="0.45"
+                    extract-max="6"
+                    extract-data-provider=${extractKey.path}
+                    aspect-ratio="16/10"
+                    .bufferA=${PARALLAX_BUFFER_A}
+                    .image=${PARALLAX_LIVE}
+                  ></sonic-shader>
+                  <p class="m-0 text-xs text-neutral-600">
+                    Extract → jsonata :
+                    <sonic-value dataProvider=${statsKey.path} key="count"
+                      >0</sonic-value
+                    >
+                    peaks · avg
+                    <sonic-value dataProvider=${statsKey.path} key="avgScore"
+                      >—</sonic-value
+                    >
+                    · strong≥0.7
+                    <sonic-value dataProvider=${statsKey.path} key="strong"
+                      >0</sonic-value
+                    >
+                    · seuil suggéré
+                    <sonic-value
+                      dataProvider=${statsKey.path}
+                      key="suggestedThreshold"
+                      >—</sonic-value
+                    >
+                  </p>
+                `
+              : html`<div
+                  class="flex min-h-[14rem] items-center justify-center rounded-lg bg-neutral-100 text-sm text-neutral-400"
+                >
+                  Shader après depth
+                </div>`}
+            <p class="m-0 text-xs text-neutral-500">
+              Slider = param0 direct sur le DP shader (pas de jsonata).
+            </p>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}

package/src/docs/example/docs-webgpu-demo.ts

@@ -0,0 +1,77 @@
+/**
+ * Démo sonic-webgpu : noyau compute particules (pas un clone de sonic-shader).
+ * param0 = vitesse, param1 = attraction souris.
+ */
+import { css, html, LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
+import { DataProviderKey } from "@supersoniks/concorde/core/utils/dataProviderKey";
+import { set } from "@supersoniks/concorde/utils";
+import { tailwind } from "../tailwind";
+
+import "../../core/components/functional/webgpu/webgpu";
+import "../../core/components/ui/form/input/input";
+
+const fxKey = new DataProviderKey<{
+  param0: number;
+  param1: number;
+}>("webgpuDemoFx");
+
+@customElement("docs-webgpu-demo")
+export class DocsWebGpuDemo extends LitElement {
+  static styles = [
+    tailwind,
+    css`
+      sonic-webgpu {
+        border-radius: 0.5rem;
+        min-height: 16rem;
+      }
+    `,
+  ];
+
+  connectedCallback() {
+    super.connectedCallback();
+    set(fxKey, { param0: 0.45, param1: 0.65 });
+  }
+
+  render() {
+    return html`
+      <div class="flex flex-col gap-3">
+        <div class="flex flex-wrap items-center gap-4 text-sm">
+          <div formDataProvider=${fxKey.path} class="flex items-center gap-2 flex-1 min-w-[10rem]">
+            <label class="opacity-70 shrink-0">vitesse</label>
+            <sonic-input
+              type="range"
+              name="param0"
+              min="0"
+              max="1"
+              step="0.01"
+              class="flex-1"
+            ></sonic-input>
+          </div>
+          <div formDataProvider=${fxKey.path} class="flex items-center gap-2 flex-1 min-w-[10rem]">
+            <label class="opacity-70 shrink-0">attraction</label>
+            <sonic-input
+              type="range"
+              name="param1"
+              min="0"
+              max="1"
+              step="0.01"
+              class="flex-1"
+            ></sonic-input>
+          </div>
+        </div>
+        <sonic-webgpu
+          play
+          mouse
+          kernel="particles"
+          dataProvider=${fxKey.path}
+        ></sonic-webgpu>
+        <p class="text-xs opacity-60 m-0">
+          <code>kernel="particles"</code> — compute (WebGPU) ou CPU fallback.
+          Bouge la souris. Pas une photo : c’est le rôle utile de
+          <code>sonic-webgpu</code> vs <code>sonic-shader</code>.
+        </p>
+      </div>
+    `;
+  }
+}

package/src/docs/navigation/navigation.ts

@@ -210,6 +210,31 @@ export class DocsNavigation extends LitElement {
       label: "Local API demos",
       href: "#docs/_misc/docs-mock-api.md/docs-mock-api",
     },
+    "Addons (opt-in)",
+    {
+      label: "CDN addons",
+      href: "#docs/_getting-started/cdn-addons.md/cdn-addons",
+    },
+    {
+      label: "3D",
+      href: "#core/components/functional/3d/3d.md/3d",
+    },
+    {
+      label: "Hugging Face infer",
+      href: "#core/components/functional/infer/hugging-face/hugging-face-infer.md/hugging-face-infer",
+    },
+    {
+      label: "Shader",
+      href: "#core/components/functional/shader/shader.md/shader",
+    },
+    {
+      label: "WebGPU",
+      href: "#core/components/functional/webgpu/webgpu.md/webgpu",
+    },
+    {
+      label: "Visual stack",
+      href: "#docs/_misc/visual-stack.md/visual-stack",
+    },
     "Legacy",
     {
       label: "Manual installation (Vite)",