@lobehub/ui/es/NeuralNetworkLoading/NeuralNetworkLoading.mjs.map

Lobe UI is an open-source UI component library for building AIGC web apps

{"version":3,"file":"NeuralNetworkLoading.mjs","names":[],"sources":["../../src/NeuralNetworkLoading/NeuralNetworkLoading.tsx"],"sourcesContent":["'use client';\n\nimport { createStaticStyles, keyframes } from 'antd-style';\nimport { type CSSProperties, memo } from 'react';\n\nimport type { NeuralNetworkLoadingProps } from './type';\n\nconst pulseAnim = keyframes`\n  0%, 100% { opacity: 0.3; }\n  50%      { opacity: 1; }\n`;\n\nconst flowAnim = keyframes`\n  0%   { transform: translateX(0);                     opacity: 0.5; }\n  50%  {                                                opacity: 1; }\n  100% { transform: translateX(var(--flow-distance));  opacity: 0.5; }\n`;\n\nconst rotateAnim = keyframes`\n  100% { transform: rotate(360deg); }\n`;\n\nconst scaleAnim = keyframes`\n  0%, 100% { transform: scale(0.8); opacity: 0.5; }\n  50%      { transform: scale(1);   opacity: 1; }\n`;\n\nconst styles = createStaticStyles(({ css, cssVar }) => ({\n  center: css`\n    fill: ${cssVar.colorTextSecondary};\n    animation: ${scaleAnim} 2s infinite;\n  `,\n  connection: css`\n    opacity: 0.3;\n    stroke: ${cssVar.colorTextSecondary};\n    stroke-width: 0.5;\n  `,\n  container: css`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  `,\n  node: css`\n    fill: ${cssVar.colorTextSecondary};\n    animation: ${pulseAnim} 2s infinite;\n  `,\n  particle: css`\n    fill: ${cssVar.colorTextSecondary};\n    animation: ${flowAnim} 2s infinite;\n  `,\n  ring: css`\n    transform-origin: center;\n\n    fill: none;\n    stroke: ${cssVar.colorFill};\n    stroke-dasharray: 0 8;\n    stroke-width: 1;\n\n    animation: ${rotateAnim} 20s infinite linear;\n  `,\n  svg: css`\n    width: 100%;\n    height: 100%;\n  `,\n}));\n\nconst LAYER_COUNT = 3;\nconst NODE_COUNT = 3;\n\nconst NeuralNetworkLoading = memo<NeuralNetworkLoadingProps>(({ size = 16, className, style }) => {\n  const nodes = [];\n  for (let layerIndex = 0; layerIndex < LAYER_COUNT; layerIndex++) {\n    for (let nodeIndex = 0; nodeIndex < NODE_COUNT; nodeIndex++) {\n      const x = 25 + layerIndex * 25;\n      const y = 25 + nodeIndex * 25;\n      const delay = (layerIndex * NODE_COUNT + nodeIndex) * 0.2;\n      nodes.push(\n        <circle\n          className={styles.node}\n          cx={x}\n          cy={y}\n          key={`node-${layerIndex}-${nodeIndex}`}\n          r=\"3\"\n          style={{ animationDelay: `${delay}s` }}\n        />,\n      );\n    }\n  }\n\n  const connections = [];\n  for (let layerIndex = 0; layerIndex < LAYER_COUNT - 1; layerIndex++) {\n    for (let nodeIndex = 0; nodeIndex < NODE_COUNT; nodeIndex++) {\n      const x1 = 25 + layerIndex * 25;\n      const y1 = 25 + nodeIndex * 25;\n      for (let targetIndex = 0; targetIndex < NODE_COUNT; targetIndex++) {\n        const x2 = 25 + (layerIndex + 1) * 25;\n        const y2 = 25 + targetIndex * 25;\n        connections.push(\n          <line\n            className={styles.connection}\n            key={`connection-${layerIndex}-${nodeIndex}-${targetIndex}`}\n            x1={x1}\n            x2={x2}\n            y1={y1}\n            y2={y2}\n          />,\n        );\n      }\n    }\n  }\n\n  const particles = [0, 1, 2].map((index) => (\n    <circle\n      className={styles.particle}\n      cx={25}\n      cy={50}\n      key={`particle-${index}`}\n      r=\"1.5\"\n      style={\n        {\n          '--flow-distance': '50px',\n          'animationDelay': `${index * 0.6}s`,\n        } as CSSProperties\n      }\n    />\n  ));\n\n  return (\n    <div\n      className={[styles.container, className].filter(Boolean).join(' ')}\n      style={{ height: size, width: size, ...style }}\n    >\n      <svg className={styles.svg} viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\n        {connections}\n        {nodes}\n        {particles}\n        <rect className={styles.center} height=\"6\" width=\"6\" x=\"47\" y=\"47\" />\n        <circle className={styles.ring} cx=\"50\" cy=\"50\" r=\"40\" />\n      </svg>\n    </div>\n  );\n});\n\nNeuralNetworkLoading.displayName = 'NeuralNetworkLoading';\n\nexport default NeuralNetworkLoading;\n"],"mappings":";;;;;AAOA,MAAM,YAAY,SAAS;;;;AAK3B,MAAM,WAAW,SAAS;;;;;AAM1B,MAAM,aAAa,SAAS;;;AAI5B,MAAM,YAAY,SAAS;;;;AAK3B,MAAM,SAAS,oBAAoB,EAAE,KAAK,cAAc;CACtD,QAAQ,GAAG;YACD,OAAO,mBAAmB;iBACrB,UAAU;;CAEzB,YAAY,GAAG;;cAEH,OAAO,mBAAmB;;;CAGtC,WAAW,GAAG;;;;;CAKd,MAAM,GAAG;YACC,OAAO,mBAAmB;iBACrB,UAAU;;CAEzB,UAAU,GAAG;YACH,OAAO,mBAAmB;iBACrB,SAAS;;CAExB,MAAM,GAAG;;;;cAIG,OAAO,UAAU;;;;iBAId,WAAW;;CAE1B,KAAK,GAAG;;;;CAIT,EAAE;AAEH,MAAM,cAAc;AACpB,MAAM,aAAa;AAEnB,MAAM,uBAAuB,MAAiC,EAAE,OAAO,IAAI,WAAW,YAAY;CAChG,MAAM,QAAQ,EAAE;AAChB,MAAK,IAAI,aAAa,GAAG,aAAa,aAAa,aACjD,MAAK,IAAI,YAAY,GAAG,YAAY,YAAY,aAAa;EAC3D,MAAM,IAAI,KAAK,aAAa;EAC5B,MAAM,IAAI,KAAK,YAAY;EAC3B,MAAM,SAAS,aAAa,aAAa,aAAa;AACtD,QAAM,KACJ,oBAAC,UAAD;GACE,WAAW,OAAO;GAClB,IAAI;GACJ,IAAI;GAEJ,GAAE;GACF,OAAO,EAAE,gBAAgB,GAAG,MAAM,IAAI;GACtC,EAHK,QAAQ,WAAW,GAAG,YAG3B,CACH;;CAIL,MAAM,cAAc,EAAE;AACtB,MAAK,IAAI,aAAa,GAAG,aAAa,cAAc,GAAG,aACrD,MAAK,IAAI,YAAY,GAAG,YAAY,YAAY,aAAa;EAC3D,MAAM,KAAK,KAAK,aAAa;EAC7B,MAAM,KAAK,KAAK,YAAY;AAC5B,OAAK,IAAI,cAAc,GAAG,cAAc,YAAY,eAAe;GACjE,MAAM,KAAK,MAAM,aAAa,KAAK;GACnC,MAAM,KAAK,KAAK,cAAc;AAC9B,eAAY,KACV,oBAAC,QAAD;IACE,WAAW,OAAO;IAEd;IACA;IACA;IACA;IACJ,EALK,cAAc,WAAW,GAAG,UAAU,GAAG,cAK9C,CACH;;;CAKP,MAAM,YAAY;EAAC;EAAG;EAAG;EAAE,CAAC,KAAK,UAC/B,oBAAC,UAAD;EACE,WAAW,OAAO;EAClB,IAAI;EACJ,IAAI;EAEJ,GAAE;EACF,OACE;GACE,mBAAmB;GACnB,kBAAkB,GAAG,QAAQ,GAAI;GAClC;EAEH,EARK,YAAY,QAQjB,CACF;AAEF,QACE,oBAAC,OAAD;EACE,WAAW,CAAC,OAAO,WAAW,UAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAClE,OAAO;GAAE,QAAQ;GAAM,OAAO;GAAM,GAAG;GAAO;YAE9C,qBAAC,OAAD;GAAK,WAAW,OAAO;GAAK,SAAQ;GAAc,OAAM;aAAxD;IACG;IACA;IACA;IACD,oBAAC,QAAD;KAAM,WAAW,OAAO;KAAQ,QAAO;KAAI,OAAM;KAAI,GAAE;KAAK,GAAE;KAAO,CAAA;IACrE,oBAAC,UAAD;KAAQ,WAAW,OAAO;KAAM,IAAG;KAAK,IAAG;KAAK,GAAE;KAAO,CAAA;IACrD;;EACF,CAAA;EAER;AAEF,qBAAqB,cAAc"}