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

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

@@ -1,394 +0,0 @@
-/**
- * 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

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