aura-glass/dist/esm/components/ai/NeuralWeightVisualization.js

A comprehensive glassmorphism design system for React applications with 142+ production-ready components

'use client';
import { jsxs, jsx } from 'react/jsx-runtime';
import { useMemo } from 'react';
import { cn } from '../../lib/utilsComprehensive.js';
import '../../primitives/GlassCore.js';
import '../../primitives/glass/GlassAdvanced.js';
import { OptimizedGlassCore } from '../../primitives/OptimizedGlassCore.js';
import '../../primitives/glass/OptimizedGlassAdvanced.js';
import '../../primitives/MotionNative.js';
import '../../primitives/motion/MotionFramer.js';

const DEFAULT_LAYERS = [{
  id: "input",
  label: "Input Layer",
  weights: [[0.12, -0.34, 0.52], [0.41, -0.67, 0.18], [0.09, 0.23, -0.12]],
  activation: [0.64, 0.31, 0.78]
}, {
  id: "hidden",
  label: "Hidden Layer",
  weights: [[0.43, -0.58, 0.72, -0.19], [-0.27, 0.35, -0.49, 0.63], [0.11, 0.08, -0.14, 0.21]],
  activation: [0.52, 0.61, 0.47, 0.34]
}, {
  id: "output",
  label: "Output Layer",
  weights: [[0.25, -0.19], [-0.38, 0.44], [0.57, -0.22], [-0.29, 0.31]],
  activation: [0.71, 0.29]
}];
const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
const getWeightColor = (weight, threshold) => {
  const magnitude = Math.abs(weight);
  const normalized = clamp(magnitude / threshold, 0, 1);
  const hue = weight >= 0 ? 180 : 335; // teal for positive, magenta for negative
  const saturation = 70 + normalized * 20;
  const lightness = 45 - normalized * 20;
  return `hsl(${hue} ${saturation}% ${lightness}%)`;
};
function NeuralWeightVisualization({
  layers = DEFAULT_LAYERS,
  className,
  highlightThreshold = 0.75,
  precision = 2
}) {
  const normalizedLayers = useMemo(() => {
    const fallback = layers.length > 0 ? layers : DEFAULT_LAYERS;
    return fallback.map(layer => ({
      ...layer,
      weights: layer.weights.map(row => row.map(value => clamp(value, -1, 1))),
      activation: layer.activation?.map(value => clamp(value, 0, 1))
    }));
  }, [layers]);
  return jsxs(OptimizedGlassCore, {
    role: "figure",
    "aria-label": "Neural weight visualization",
    className: cn("glass-radius-3xl glass-border glass-border-soft glass-p-6 space-y-6", "bg-gradient-to-br from-slate-950/80 via-slate-900/60 to-slate-900/40", className),
    children: [jsxs("header", {
      children: [jsx("h2", {
        className: 'glass-text-xl font-semibold text-primary',
        children: "Neural Weight Visualization"
      }), jsx("p", {
        className: 'glass-text-sm text-primary/70',
        children: "Inspect synaptic strengths with polarity-aware colour mapping and activation overlays."
      })]
    }), jsx("div", {
      className: 'glass-grid glass-gap-4 lg:grid-cols-3',
      children: normalizedLayers.map(layer => jsxs("div", {
        className: "glass-radius-2xl glass-border glass-border-white/10 glass-surface-subtle/5 glass-p-4 glass-backdrop-blur",
        children: [jsxs("div", {
          className: 'glass-flex glass-items-center glass-justify-between glass-text-sm text-primary/80',
          children: [jsx("h3", {
            className: 'font-semibold text-primary',
            children: layer.label
          }), layer.activation && jsxs("span", {
            className: 'glass-text-xs text-primary/60',
            children: ["Activation avg", " ", (layer.activation.reduce((sum, value) => sum + value, 0) / layer.activation.length).toFixed(2)]
          })]
        }), jsx("div", {
          className: 'mt-3 overflow-hidden glass-radius-xl glass-border glass-border-white/10',
          children: jsx("table", {
            className: 'min-w-full glass-border-collapse',
            children: jsx("tbody", {
              children: layer.weights.map((row, rowIndex) => jsx("tr", {
                className: 'divide-x divide-white/5',
                children: row.map((weight, columnIndex) => {
                  const magnitude = Math.abs(weight);
                  const strong = magnitude >= highlightThreshold;
                  const color = getWeightColor(weight, 1);
                  return jsx("td", {
                    className: cn("px-2 py-3 text-center text-xs font-medium text-white/90 transition", strong ? "shadow-[inset_0_0_0_1px_rgba(255,255,255,0.3)] text-white" : "text-white/80"),
                    style: {
                      background: `linear-gradient(135deg, ${color} 0%, rgba(15,23,42,0.75) 100%)`
                    },
                    children: weight.toFixed(precision)
                  }, `${layer.id}-${rowIndex}-${columnIndex}`);
                })
              }, `${layer.id}-row-${rowIndex}`))
            })
          })
        }), layer.activation && jsxs("div", {
          className: 'mt-4 space-y-2 glass-text-xs text-primary/70',
          children: [jsxs("div", {
            className: 'glass-flex glass-items-center glass-justify-between uppercase tracking-wide',
            children: [jsx("span", {
              children: "Activation Levels"
            }), jsxs("span", {
              children: ["Max ", Math.max(...layer.activation).toFixed(2)]
            })]
          }), jsx("div", {
            className: "glass-flex glass-gap-2",
            children: layer.activation.map((activation, index) => jsxs("div", {
              className: "glass-flex-1",
              children: [jsx("div", {
                className: 'h-16 overflow-hidden glass-radius-full glass-surface-subtle/10',
                children: jsx("div", {
                  className: 'glass-h-full glass-w-full glass-radius-full bg-cyan-400/70',
                  style: {
                    height: `${activation * 100}%`
                  }
                })
              }), jsxs("div", {
                className: 'mt-1 text-center text-[10px] text-primary/60',
                children: ["n", index + 1]
              })]
            }, `${layer.id}-activation-${index}`))
          })]
        })]
      }, layer.id))
    })]
  });
}

export { NeuralWeightVisualization, NeuralWeightVisualization as default };
//# sourceMappingURL=NeuralWeightVisualization.js.map