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

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

@@ -1,482 +0,0 @@
-/**
- * Harris (sonic-shader) → extract patches → sonic-webgpu collage (1 démo).
- * Les blobUrl d’extract alimentent channel0…3 ; WGSL = mosaïque 2×2 animée.
- */
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, state } from "lit/decorators.js";
-import { DataProviderKey } from "@supersoniks/concorde/core/utils/dataProviderKey";
-import { dp, set } from "@supersoniks/concorde/utils";
-import { tailwind } from "../tailwind";
-
-import "../../core/components/functional/shader/shader";
-import "../../core/components/functional/webgpu/webgpu";
-import "../../core/components/ui/button/button";
-import "../../core/components/ui/form/input/input";
-
-const sample = (file: string) =>
-  new URL(`/docs/shader-samples/${file}`, location.origin).href;
-
-const HARRIS_BUFFER_A = `
-void mainImage(out vec4 fragColor, in vec2 fragCoord) {
-  vec2 uv = fragCoord / iResolution.xy;
-  vec2 px = 1.0 / iResolution.xy;
-  float tl = dot(texture(iChannel0, uv + px * vec2(-1.0,  1.0)).rgb, vec3(0.299, 0.587, 0.114));
-  float t  = dot(texture(iChannel0, uv + px * vec2( 0.0,  1.0)).rgb, vec3(0.299, 0.587, 0.114));
-  float tr = dot(texture(iChannel0, uv + px * vec2( 1.0,  1.0)).rgb, vec3(0.299, 0.587, 0.114));
-  float l  = dot(texture(iChannel0, uv + px * vec2(-1.0,  0.0)).rgb, vec3(0.299, 0.587, 0.114));
-  float r  = dot(texture(iChannel0, uv + px * vec2( 1.0,  0.0)).rgb, vec3(0.299, 0.587, 0.114));
-  float bl = dot(texture(iChannel0, uv + px * vec2(-1.0, -1.0)).rgb, vec3(0.299, 0.587, 0.114));
-  float b  = dot(texture(iChannel0, uv + px * vec2( 0.0, -1.0)).rgb, vec3(0.299, 0.587, 0.114));
-  float br = dot(texture(iChannel0, uv + px * vec2( 1.0, -1.0)).rgb, vec3(0.299, 0.587, 0.114));
-  float Ix = (tr + 2.0 * r + br) - (tl + 2.0 * l + bl);
-  float Iy = (tl + 2.0 * t + tr) - (bl + 2.0 * b + br);
-  fragColor = vec4(Ix * Ix, Iy * Iy, Ix * Iy, 1.0) * 4.0;
-}
-`;
-
-const HARRIS_BUFFER_B = `
-void mainImage(out vec4 fragColor, in vec2 fragCoord) {
-  vec2 uv = fragCoord / iResolution.xy;
-  vec2 px = 1.0 / iResolution.xy;
-  vec3 acc = vec3(0.0);
-  float wsum = 0.0;
-  for (int j = -2; j <= 2; j++) {
-    for (int i = -2; i <= 2; i++) {
-      float w = exp(-0.5 * float(i * i + j * j) / 1.6);
-      acc += texture(iChannel0, uv + px * vec2(float(i), float(j))).rgb * w;
-      wsum += w;
-    }
-  }
-  fragColor = vec4(acc / wsum, 1.0);
-}
-`;
-
-const HARRIS_IMAGE = `
-float harrisR(vec2 uv) {
-  vec3 t = texture(iChannel0, uv).rgb;
-  float k = max(uParam1, 0.001);
-  float det = t.x * t.y - t.z * t.z;
-  float trace = t.x + t.y;
-  return det - k * trace * trace;
-}
-void mainImage(out vec4 fragColor, in vec2 fragCoord) {
-  vec2 uv = fragCoord / iResolution.xy;
-  vec2 px = 1.0 / iResolution.xy;
-  vec3 video = texture(iChannel1, uv).rgb;
-  float R = harrisR(uv);
-  float thr = max(uParam0, 0.0001);
-  float overlay = clamp(uParam2, 0.0, 1.0);
-  float Rmax = R;
-  for (int j = -1; j <= 1; j++) {
-    for (int i = -1; i <= 1; i++) {
-      Rmax = max(Rmax, harrisR(uv + px * vec2(float(i), float(j))));
-    }
-  }
-  float isCorner = step(thr, R) * step(Rmax - 1e-6, R);
-  float heat = smoothstep(thr, thr * 3.0, max(R, 0.0));
-  vec3 col = mix(video, video * vec3(1.15, 0.35, 1.05) + vec3(0.35, 0.05, 0.4) * heat, heat * overlay);
-  col = mix(col, vec3(0.15, 1.0, 0.45), isCorner * overlay);
-  fragColor = vec4(col, 1.0);
-}
-`;
-
-const HARRIS_EXTRACT_MASK = `
-float harrisR(vec2 uv) {
-  vec3 t = texture(iChannel0, uv).rgb;
-  float k = max(uParam1, 0.001);
-  float det = t.x * t.y - t.z * t.z;
-  float trace = t.x + t.y;
-  return det - k * trace * trace;
-}
-void mainImage(out vec4 fragColor, in vec2 fragCoord) {
-  vec2 uv = fragCoord / iResolution.xy;
-  vec2 px = 1.0 / iResolution.xy;
-  float R = harrisR(uv);
-  float thr = max(uParam0, 0.0001);
-  float Rmax = R;
-  for (int j = -1; j <= 1; j++) {
-    for (int i = -1; i <= 1; i++) {
-      Rmax = max(Rmax, harrisR(uv + px * vec2(float(i), float(j))));
-    }
-  }
-  float isCorner = step(thr, R) * step(Rmax - 1e-6, R);
-  float Rp = max(R, 0.0);
-  float score = isCorner * (Rp / (Rp + thr * 3.0));
-  fragColor = vec4(vec3(score), 1.0);
-}
-`;
-
-/**
- * Mosaïque 2×2 + mix voisin.
- * params.x = mix 0–1 ; params.y = nombre de patches 1–4.
- * Important : textureSample hors branches (sinon erreur WGSL uniform control flow).
- */
-const PATCH_BOARD_WGSL = `
-fn pickPatch(id: i32, c0: vec3f, c1: vec3f, c2: vec3f, c3: vec3f) -> vec3f {
-  if (id <= 0) { return c0; }
-  if (id == 1) { return c1; }
-  if (id == 2) { return c2; }
-  return c3;
-}
-
-fn mainImage(uv: vec2f, fragCoord: vec2f) -> vec4f {
-  _ = fragCoord;
-  let cell = floor(uv * 2.0);
-  let local = fract(uv * 2.0);
-  let id = i32(cell.x) + i32(cell.y) * 2;
-  let n = i32(clamp(floor(u.params.y + 0.001), 1.0, 4.0));
-  let onCell = select(0.0, 1.0, id < n);
-
-  let breath = 0.015 * sin(u.time * 2.2 + f32(id) * 1.7);
-  let luv = clamp((local - 0.5) * (0.88 - breath) + 0.5, vec2f(0.0), vec2f(1.0));
-
-  // Samples uniformes (tous les canaux, toujours)
-  let s0 = iChannel0(luv).rgb;
-  let s1 = iChannel1(luv).rgb;
-  let s2 = iChannel2(luv).rgb;
-  let s3 = iChannel3(luv).rgb;
-  var col = pickPatch(id, s0, s1, s2, s3);
-
-  let nextCand = id + 1;
-  let nextId = select(nextCand, 0, nextCand >= n);
-  let other = pickPatch(nextId, s0, s1, s2, s3);
-  var muv = vec2f(0.5, 0.5);
-  if (length(u.mouse.xy) > 0.5) {
-    muv = u.mouse.xy / max(u.resolution, vec2f(1.0));
-  }
-  let mixAmt = clamp(u.params.x, 0.0, 1.0) * (0.25 + 0.55 * muv.x) * select(0.0, 1.0, n > 1);
-  let diff = abs(col - other);
-  let alike = 1.0 - clamp((diff.r + diff.g + diff.b) * 1.8, 0.0, 1.0);
-  col = mix(col, mix(col, other, 0.45), mixAmt * alike);
-  col += vec3f(0.05, 0.25, 0.15) * alike * mixAmt * 0.35;
-
-  let edge = max(
-    smoothstep(0.015, 0.0, min(local.x, local.y)),
-    smoothstep(0.985, 1.0, max(local.x, local.y)),
-  );
-  let pulse = 0.35 + 0.65 * (0.5 + 0.5 * sin(u.time * 3.0 + f32(id)));
-  col = mix(col, vec3f(0.2, 0.85, 0.55) * pulse, edge * 0.85);
-  col = mix(vec3f(0.08, 0.09, 0.11), col, onCell);
-  return vec4f(col, 1.0);
-}
-`;
-
-type ExtractItem = {
-  id?: string;
-  score?: number;
-  blobUrl?: string;
-  url?: string;
-  x?: number;
-  y?: number;
-};
-
-type ShaderDp = {
-  param0?: number;
-  param1?: number;
-  param2?: number;
-  extractCount?: number;
-  extractSeq?: number;
-  extracts?: ExtractItem[];
-};
-
-type GpuDp = {
-  channel0?: string;
-  channel1?: string;
-  channel2?: string;
-  channel3?: string;
-  param0?: number;
-  param1?: number;
-};
-
-const shaderKey = new DataProviderKey<ShaderDp>("harrisGpuShader");
-const gpuKey = new DataProviderKey<GpuDp | null>("harrisGpuFx");
-
-@customElement("docs-harris-webgpu-demo")
-export class DocsHarrisWebgpuDemo extends LitElement {
-  static styles = [
-    tailwind,
-    css`
-      :host {
-        display: block;
-      }
-      .stack {
-        display: flex;
-        flex-direction: column;
-        gap: 0;
-        border-radius: 0.5rem;
-        overflow: hidden;
-        border: 1px solid #e5e5e5;
-      }
-      .stack sonic-shader,
-      .stack sonic-webgpu {
-        border-radius: 0;
-        min-height: 0;
-      }
-      .stack sonic-shader {
-        --sonic-shader-ar: 16 / 10;
-      }
-      .stack sonic-webgpu {
-        --sonic-webgpu-ar: 16 / 9;
-        background: #0a0a0a;
-      }
-      .label-bar {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 0.5rem;
-        padding: 0.35rem 0.65rem;
-        font-size: 0.7rem;
-        background: #f4f4f5;
-        color: #525252;
-      }
-      .label-bar code {
-        font-size: 0.65rem;
-        padding: 0.05rem 0.3rem;
-        border-radius: 0.2rem;
-        background: #e4e4e7;
-      }
-      .thumbs {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 0.35rem;
-        padding: 0.5rem 0.65rem;
-        background: #fafafa;
-        border-top: 1px solid #e5e5e5;
-      }
-      .thumbs img {
-        width: 3rem;
-        height: 3rem;
-        object-fit: cover;
-        border-radius: 0.25rem;
-        border: 1px solid #d4d4d8;
-      }
-      .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 patches: ExtractItem[] = [];
-  @state() private seq = 0;
-  private offExtract: (() => void) | null = null;
-
-  disconnectedCallback(): void {
-    this.offExtract?.();
-    super.disconnectedCallback();
-  }
-
-  private start = () => {
-    if (this.active) return;
-    this.active = true;
-    set(shaderKey, {
-      param0: 0.08,
-      param1: 0.1,
-      param2: 0.85,
-      extractCount: 0,
-      extractSeq: 0,
-      extracts: [],
-    });
-    set(gpuKey, { param0: 0.55, param1: 1 });
-
-    const syncGpu = (items: ExtractItem[]) => {
-      const urls = items
-        .map((it) => it.blobUrl || it.url)
-        .filter((u): u is string => typeof u === "string" && u.length > 0)
-        .slice(0, 4);
-      this.patches = items.slice(0, 4);
-      set(gpuKey, {
-        param0: 0.55,
-        param1: Math.max(1, urls.length),
-        channel0: urls[0] ?? "",
-        channel1: urls[1] ?? urls[0] ?? "",
-        channel2: urls[2] ?? urls[0] ?? "",
-        channel3: urls[3] ?? urls[0] ?? "",
-      });
-    };
-
-    const onSeq = (seq: number | null | undefined) => {
-      this.seq = typeof seq === "number" ? seq : this.seq;
-      const list = dp(shaderKey.extracts).get();
-      const items = Array.isArray(list) ? list : [];
-      syncGpu(items);
-    };
-    dp(shaderKey.extractSeq).onAssign(onSeq);
-    this.offExtract = () => dp(shaderKey.extractSeq).offAssign(onSeq);
-  };
-
-  private onExtract = (e: Event) => {
-    const detail = (e as CustomEvent).detail as {
-      items?: ExtractItem[];
-      frame?: number;
-    };
-    const items = detail.items ?? [];
-    this.seq = detail.frame ?? this.seq + 1;
-    const urls = items
-      .map((it) => it.blobUrl || it.url)
-      .filter((u): u is string => typeof u === "string" && u.length > 0)
-      .slice(0, 4);
-    this.patches = items.slice(0, 4);
-    set(gpuKey, {
-      param0: 0.55,
-      param1: Math.max(1, urls.length),
-      channel0: urls[0] ?? "",
-      channel1: urls[1] ?? urls[0] ?? "",
-      channel2: urls[2] ?? urls[0] ?? "",
-      channel3: urls[3] ?? urls[0] ?? "",
-    });
-  };
-
-  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>Harris</code><span class="arrow">→</span>
-            <code>extract patches</code><span class="arrow">→</span>
-            <code>webgpu</code>
-            <span class="text-neutral-400">(mosaïque)</span>
-          </div>
-          <p class="m-0 text-sm text-neutral-600">
-            Vidéo → coins Harris → crops → collage GPU (channels + diff entre
-            patches). Une seule démo, deux bandes empilées.
-          </p>
-          <sonic-button type="primary" size="sm" @click=${this.start}
-            >Try</sonic-button
-          >
-        </div>
-      `;
-    }
-
-    const video = sample("video.webm");
-
-    return html`
-      <div class="flex flex-col gap-3">
-        <div class="pipe">
-          <code>shader Harris</code><span class="arrow">→</span>
-          <code>patches</code><span class="arrow">→</span>
-          <code>webgpu</code>
-          <span class="text-neutral-400"
-            >· ${this.patches.length} patch(es) · #${this.seq}</span
-          >
-        </div>
-
-        <div
-          formDataProvider=${shaderKey.path}
-          class="flex flex-wrap gap-3 text-sm"
-        >
-          <div class="flex items-center gap-2 min-w-[8rem] flex-1">
-            <label class="text-xs text-neutral-500 shrink-0">seuil</label>
-            <sonic-input
-              type="range"
-              name="param0"
-              min="0.002"
-              max="0.08"
-              step="0.002"
-              class="flex-1"
-            ></sonic-input>
-          </div>
-          <div class="flex items-center gap-2 min-w-[8rem] flex-1">
-            <label class="text-xs text-neutral-500 shrink-0">k</label>
-            <sonic-input
-              type="range"
-              name="param1"
-              min="0.02"
-              max="0.1"
-              step="0.005"
-              class="flex-1"
-            ></sonic-input>
-          </div>
-        </div>
-
-        <div class="stack">
-          <div class="label-bar">
-            <span
-              ><code>sonic-shader</code> Harris + extract-bitmaps</span
-            >
-            <span class="text-neutral-400">coins → peaks</span>
-          </div>
-          <sonic-shader
-            play
-            .mouse=${false}
-            extract
-            extract-bitmaps
-            extract-mask="buffer-c"
-            extract-source="image"
-            extract-threshold="0.12"
-            extract-max="4"
-            extract-patch="56"
-            extract-interval="400"
-            extract-data-provider=${shaderKey.path}
-            dataProvider=${shaderKey.path}
-            channel0=${video}
-            buffer-a-ch0=${video}
-            buffer-b-ch0="buffer-a"
-            buffer-c-ch0="buffer-b"
-            image-ch0="buffer-b"
-            image-ch1=${video}
-            .bufferA=${HARRIS_BUFFER_A}
-            .bufferB=${HARRIS_BUFFER_B}
-            .bufferC=${HARRIS_EXTRACT_MASK}
-            .image=${HARRIS_IMAGE}
-            @extract=${this.onExtract}
-          ></sonic-shader>
-
-          <div class="label-bar">
-            <span
-              ><code>sonic-webgpu</code> kernel=image — mosaïque patches</span
-            >
-            <span class="text-neutral-400"
-              >channel0…3 · souris = mix voisin</span
-            >
-          </div>
-          <sonic-webgpu
-            play
-            mouse
-            kernel="image"
-            dataProvider=${gpuKey.path}
-            .shader=${PATCH_BOARD_WGSL}
-          ></sonic-webgpu>
-
-          ${this.patches.length
-            ? html`<div class="thumbs">
-                ${this.patches.map(
-                  (p, i) => html`
-                    <img
-                      src=${p.blobUrl || p.url || ""}
-                      alt="patch ${i}"
-                      title=${`score ${p.score?.toFixed?.(2) ?? "—"}`}
-                    />
-                  `,
-                )}
-              </div>`
-            : html`<div class="thumbs text-xs text-neutral-400">
-                En attente des premiers coins…
-              </div>`}
-        </div>
-
-        <p class="m-0 text-xs text-neutral-500">
-          Extract → DP → <code>channel0…3</code>. Le WGSL compare chaque case à
-          son voisin (diff RGB) pour un effet correspondence léger.
-        </p>
-      </div>
-    `;
-  }
-}