commit 0c53496e9b03cd90689e49758d2d2f05ddea6bc7 Author: Peter Stockings Date: Sat Jan 10 09:13:28 2026 +1100 Initial commit diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..a547bf3 --- /dev/null +++ b/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/README.md b/README.md new file mode 100644 index 0000000..d2e7761 --- /dev/null +++ b/README.md @@ -0,0 +1,73 @@ +# React + TypeScript + Vite + +This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. + +Currently, two official plugins are available: + +- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh +- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh + +## React Compiler + +The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation). + +## Expanding the ESLint configuration + +If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules: + +```js +export default defineConfig([ + globalIgnores(['dist']), + { + files: ['**/*.{ts,tsx}'], + extends: [ + // Other configs... + + // Remove tseslint.configs.recommended and replace with this + tseslint.configs.recommendedTypeChecked, + // Alternatively, use this for stricter rules + tseslint.configs.strictTypeChecked, + // Optionally, add this for stylistic rules + tseslint.configs.stylisticTypeChecked, + + // Other configs... + ], + languageOptions: { + parserOptions: { + project: ['./tsconfig.node.json', './tsconfig.app.json'], + tsconfigRootDir: import.meta.dirname, + }, + // other options... + }, + }, +]) +``` + +You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules: + +```js +// eslint.config.js +import reactX from 'eslint-plugin-react-x' +import reactDom from 'eslint-plugin-react-dom' + +export default defineConfig([ + globalIgnores(['dist']), + { + files: ['**/*.{ts,tsx}'], + extends: [ + // Other configs... + // Enable lint rules for React + reactX.configs['recommended-typescript'], + // Enable lint rules for React DOM + reactDom.configs.recommended, + ], + languageOptions: { + parserOptions: { + project: ['./tsconfig.node.json', './tsconfig.app.json'], + tsconfigRootDir: import.meta.dirname, + }, + // other options... + }, + }, +]) +``` diff --git a/bun.lock b/bun.lock new file mode 100644 index 0000000..79d7e2a --- /dev/null +++ b/bun.lock @@ -0,0 +1,478 @@ +{ + "lockfileVersion": 1, + "configVersion": 1, + "workspaces": { + "": { + "name": "evolution", + "dependencies": { + "react": "^19.2.0", + "react-dom": "^19.2.0", + }, + "devDependencies": { + "@eslint/js": "^9.39.1", + "@types/node": "^24.10.1", + "@types/react": "^19.2.5", + "@types/react-dom": "^19.2.3", + "@vitejs/plugin-react": "^5.1.1", + "eslint": "^9.39.1", + "eslint-plugin-react-hooks": "^7.0.1", + "eslint-plugin-react-refresh": "^0.4.24", + "globals": "^16.5.0", + "typescript": "~5.9.3", + "typescript-eslint": "^8.46.4", + "vite": "^7.2.4", + }, + }, + }, + "packages": { + "@babel/code-frame": ["@babel/code-frame@7.27.1", "", { "dependencies": { "@babel/helper-validator-identifier": "^7.27.1", "js-tokens": "^4.0.0", "picocolors": "^1.1.1" } }, "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg=="], + + "@babel/compat-data": ["@babel/compat-data@7.28.5", "", {}, "sha512-6uFXyCayocRbqhZOB+6XcuZbkMNimwfVGFji8CTZnCzOHVGvDqzvitu1re2AU5LROliz7eQPhB8CpAMvnx9EjA=="], + + "@babel/core": ["@babel/core@7.28.5", "", { "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.5", "@babel/helper-compilation-targets": "^7.27.2", "@babel/helper-module-transforms": "^7.28.3", "@babel/helpers": "^7.28.4", "@babel/parser": "^7.28.5", "@babel/template": "^7.27.2", "@babel/traverse": "^7.28.5", "@babel/types": "^7.28.5", "@jridgewell/remapping": "^2.3.5", "convert-source-map": "^2.0.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", "json5": "^2.2.3", "semver": "^6.3.1" } }, "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw=="], + + "@babel/generator": ["@babel/generator@7.28.5", "", { "dependencies": { "@babel/parser": "^7.28.5", "@babel/types": "^7.28.5", "@jridgewell/gen-mapping": "^0.3.12", "@jridgewell/trace-mapping": "^0.3.28", "jsesc": "^3.0.2" } }, "sha512-3EwLFhZ38J4VyIP6WNtt2kUdW9dokXA9Cr4IVIFHuCpZ3H8/YFOl5JjZHisrn1fATPBmKKqXzDFvh9fUwHz6CQ=="], + + "@babel/helper-compilation-targets": ["@babel/helper-compilation-targets@7.27.2", "", { "dependencies": { "@babel/compat-data": "^7.27.2", "@babel/helper-validator-option": "^7.27.1", "browserslist": "^4.24.0", "lru-cache": "^5.1.1", "semver": "^6.3.1" } }, "sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ=="], + + "@babel/helper-globals": ["@babel/helper-globals@7.28.0", "", {}, "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw=="], + + "@babel/helper-module-imports": ["@babel/helper-module-imports@7.27.1", "", { "dependencies": { "@babel/traverse": "^7.27.1", "@babel/types": "^7.27.1" } }, "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w=="], + + "@babel/helper-module-transforms": ["@babel/helper-module-transforms@7.28.3", "", { "dependencies": { "@babel/helper-module-imports": "^7.27.1", "@babel/helper-validator-identifier": "^7.27.1", "@babel/traverse": "^7.28.3" }, "peerDependencies": { "@babel/core": "^7.0.0" } }, "sha512-gytXUbs8k2sXS9PnQptz5o0QnpLL51SwASIORY6XaBKF88nsOT0Zw9szLqlSGQDP/4TljBAD5y98p2U1fqkdsw=="], + + "@babel/helper-plugin-utils": ["@babel/helper-plugin-utils@7.27.1", "", {}, "sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw=="], + + "@babel/helper-string-parser": ["@babel/helper-string-parser@7.27.1", "", {}, "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA=="], + + "@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.28.5", "", {}, "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q=="], + + "@babel/helper-validator-option": ["@babel/helper-validator-option@7.27.1", "", {}, "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg=="], + + "@babel/helpers": ["@babel/helpers@7.28.4", "", { "dependencies": { "@babel/template": "^7.27.2", "@babel/types": "^7.28.4" } }, "sha512-HFN59MmQXGHVyYadKLVumYsA9dBFun/ldYxipEjzA4196jpLZd8UjEEBLkbEkvfYreDqJhZxYAWFPtrfhNpj4w=="], + + "@babel/parser": ["@babel/parser@7.28.5", "", { "dependencies": { "@babel/types": "^7.28.5" }, "bin": "./bin/babel-parser.js" }, "sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ=="], + + "@babel/plugin-transform-react-jsx-self": ["@babel/plugin-transform-react-jsx-self@7.27.1", "", { "dependencies": { "@babel/helper-plugin-utils": "^7.27.1" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-6UzkCs+ejGdZ5mFFC/OCUrv028ab2fp1znZmCZjAOBKiBK2jXD1O+BPSfX8X2qjJ75fZBMSnQn3Rq2mrBJK2mw=="], + + "@babel/plugin-transform-react-jsx-source": ["@babel/plugin-transform-react-jsx-source@7.27.1", "", { "dependencies": { "@babel/helper-plugin-utils": "^7.27.1" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-zbwoTsBruTeKB9hSq73ha66iFeJHuaFkUbwvqElnygoNbj/jHRsSeokowZFN3CZ64IvEqcmmkVe89OPXc7ldAw=="], + + "@babel/template": ["@babel/template@7.27.2", "", { "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/parser": "^7.27.2", "@babel/types": "^7.27.1" } }, "sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw=="], + + "@babel/traverse": ["@babel/traverse@7.28.5", "", { "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.5", "@babel/helper-globals": "^7.28.0", "@babel/parser": "^7.28.5", "@babel/template": "^7.27.2", "@babel/types": "^7.28.5", "debug": "^4.3.1" } }, "sha512-TCCj4t55U90khlYkVV/0TfkJkAkUg3jZFA3Neb7unZT8CPok7iiRfaX0F+WnqWqt7OxhOn0uBKXCw4lbL8W0aQ=="], + + "@babel/types": ["@babel/types@7.28.5", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.28.5" } }, "sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA=="], + + "@esbuild/aix-ppc64": ["@esbuild/aix-ppc64@0.27.2", "", { "os": "aix", "cpu": "ppc64" }, "sha512-GZMB+a0mOMZs4MpDbj8RJp4cw+w1WV5NYD6xzgvzUJ5Ek2jerwfO2eADyI6ExDSUED+1X8aMbegahsJi+8mgpw=="], + + "@esbuild/android-arm": ["@esbuild/android-arm@0.27.2", "", { "os": "android", "cpu": "arm" }, "sha512-DVNI8jlPa7Ujbr1yjU2PfUSRtAUZPG9I1RwW4F4xFB1Imiu2on0ADiI/c3td+KmDtVKNbi+nffGDQMfcIMkwIA=="], + + "@esbuild/android-arm64": ["@esbuild/android-arm64@0.27.2", "", { "os": "android", "cpu": "arm64" }, "sha512-pvz8ZZ7ot/RBphf8fv60ljmaoydPU12VuXHImtAs0XhLLw+EXBi2BLe3OYSBslR4rryHvweW5gmkKFwTiFy6KA=="], + + "@esbuild/android-x64": ["@esbuild/android-x64@0.27.2", "", { "os": "android", "cpu": "x64" }, "sha512-z8Ank4Byh4TJJOh4wpz8g2vDy75zFL0TlZlkUkEwYXuPSgX8yzep596n6mT7905kA9uHZsf/o2OJZubl2l3M7A=="], + + "@esbuild/darwin-arm64": ["@esbuild/darwin-arm64@0.27.2", "", { "os": "darwin", "cpu": "arm64" }, "sha512-davCD2Zc80nzDVRwXTcQP/28fiJbcOwvdolL0sOiOsbwBa72kegmVU0Wrh1MYrbuCL98Omp5dVhQFWRKR2ZAlg=="], + + "@esbuild/darwin-x64": ["@esbuild/darwin-x64@0.27.2", "", { "os": "darwin", "cpu": "x64" }, "sha512-ZxtijOmlQCBWGwbVmwOF/UCzuGIbUkqB1faQRf5akQmxRJ1ujusWsb3CVfk/9iZKr2L5SMU5wPBi1UWbvL+VQA=="], + + "@esbuild/freebsd-arm64": ["@esbuild/freebsd-arm64@0.27.2", "", { "os": "freebsd", "cpu": "arm64" }, "sha512-lS/9CN+rgqQ9czogxlMcBMGd+l8Q3Nj1MFQwBZJyoEKI50XGxwuzznYdwcav6lpOGv5BqaZXqvBSiB/kJ5op+g=="], + + "@esbuild/freebsd-x64": ["@esbuild/freebsd-x64@0.27.2", "", { "os": "freebsd", "cpu": "x64" }, "sha512-tAfqtNYb4YgPnJlEFu4c212HYjQWSO/w/h/lQaBK7RbwGIkBOuNKQI9tqWzx7Wtp7bTPaGC6MJvWI608P3wXYA=="], + + "@esbuild/linux-arm": ["@esbuild/linux-arm@0.27.2", "", { "os": "linux", "cpu": "arm" }, "sha512-vWfq4GaIMP9AIe4yj1ZUW18RDhx6EPQKjwe7n8BbIecFtCQG4CfHGaHuh7fdfq+y3LIA2vGS/o9ZBGVxIDi9hw=="], + + "@esbuild/linux-arm64": ["@esbuild/linux-arm64@0.27.2", "", { "os": "linux", "cpu": "arm64" }, "sha512-hYxN8pr66NsCCiRFkHUAsxylNOcAQaxSSkHMMjcpx0si13t1LHFphxJZUiGwojB1a/Hd5OiPIqDdXONia6bhTw=="], + + "@esbuild/linux-ia32": ["@esbuild/linux-ia32@0.27.2", "", { "os": "linux", "cpu": "ia32" }, "sha512-MJt5BRRSScPDwG2hLelYhAAKh9imjHK5+NE/tvnRLbIqUWa+0E9N4WNMjmp/kXXPHZGqPLxggwVhz7QP8CTR8w=="], + + "@esbuild/linux-loong64": ["@esbuild/linux-loong64@0.27.2", "", { "os": "linux", "cpu": "none" }, "sha512-lugyF1atnAT463aO6KPshVCJK5NgRnU4yb3FUumyVz+cGvZbontBgzeGFO1nF+dPueHD367a2ZXe1NtUkAjOtg=="], + + "@esbuild/linux-mips64el": ["@esbuild/linux-mips64el@0.27.2", "", { "os": "linux", "cpu": "none" }, "sha512-nlP2I6ArEBewvJ2gjrrkESEZkB5mIoaTswuqNFRv/WYd+ATtUpe9Y09RnJvgvdag7he0OWgEZWhviS1OTOKixw=="], + + "@esbuild/linux-ppc64": ["@esbuild/linux-ppc64@0.27.2", "", { "os": "linux", "cpu": "ppc64" }, "sha512-C92gnpey7tUQONqg1n6dKVbx3vphKtTHJaNG2Ok9lGwbZil6DrfyecMsp9CrmXGQJmZ7iiVXvvZH6Ml5hL6XdQ=="], + + "@esbuild/linux-riscv64": ["@esbuild/linux-riscv64@0.27.2", "", { "os": "linux", "cpu": "none" }, "sha512-B5BOmojNtUyN8AXlK0QJyvjEZkWwy/FKvakkTDCziX95AowLZKR6aCDhG7LeF7uMCXEJqwa8Bejz5LTPYm8AvA=="], + + "@esbuild/linux-s390x": ["@esbuild/linux-s390x@0.27.2", "", { "os": "linux", "cpu": "s390x" }, "sha512-p4bm9+wsPwup5Z8f4EpfN63qNagQ47Ua2znaqGH6bqLlmJ4bx97Y9JdqxgGZ6Y8xVTixUnEkoKSHcpRlDnNr5w=="], + + "@esbuild/linux-x64": ["@esbuild/linux-x64@0.27.2", "", { "os": "linux", "cpu": "x64" }, "sha512-uwp2Tip5aPmH+NRUwTcfLb+W32WXjpFejTIOWZFw/v7/KnpCDKG66u4DLcurQpiYTiYwQ9B7KOeMJvLCu/OvbA=="], + + "@esbuild/netbsd-arm64": ["@esbuild/netbsd-arm64@0.27.2", "", { "os": "none", "cpu": "arm64" }, "sha512-Kj6DiBlwXrPsCRDeRvGAUb/LNrBASrfqAIok+xB0LxK8CHqxZ037viF13ugfsIpePH93mX7xfJp97cyDuTZ3cw=="], + + "@esbuild/netbsd-x64": ["@esbuild/netbsd-x64@0.27.2", "", { "os": "none", "cpu": "x64" }, "sha512-HwGDZ0VLVBY3Y+Nw0JexZy9o/nUAWq9MlV7cahpaXKW6TOzfVno3y3/M8Ga8u8Yr7GldLOov27xiCnqRZf0tCA=="], + + "@esbuild/openbsd-arm64": ["@esbuild/openbsd-arm64@0.27.2", "", { "os": "openbsd", "cpu": "arm64" }, "sha512-DNIHH2BPQ5551A7oSHD0CKbwIA/Ox7+78/AWkbS5QoRzaqlev2uFayfSxq68EkonB+IKjiuxBFoV8ESJy8bOHA=="], + + "@esbuild/openbsd-x64": ["@esbuild/openbsd-x64@0.27.2", "", { "os": "openbsd", "cpu": "x64" }, "sha512-/it7w9Nb7+0KFIzjalNJVR5bOzA9Vay+yIPLVHfIQYG/j+j9VTH84aNB8ExGKPU4AzfaEvN9/V4HV+F+vo8OEg=="], + + "@esbuild/openharmony-arm64": ["@esbuild/openharmony-arm64@0.27.2", "", { "os": "none", "cpu": "arm64" }, "sha512-LRBbCmiU51IXfeXk59csuX/aSaToeG7w48nMwA6049Y4J4+VbWALAuXcs+qcD04rHDuSCSRKdmY63sruDS5qag=="], + + "@esbuild/sunos-x64": ["@esbuild/sunos-x64@0.27.2", "", { "os": "sunos", "cpu": "x64" }, "sha512-kMtx1yqJHTmqaqHPAzKCAkDaKsffmXkPHThSfRwZGyuqyIeBvf08KSsYXl+abf5HDAPMJIPnbBfXvP2ZC2TfHg=="], + + "@esbuild/win32-arm64": ["@esbuild/win32-arm64@0.27.2", "", { "os": "win32", "cpu": "arm64" }, "sha512-Yaf78O/B3Kkh+nKABUF++bvJv5Ijoy9AN1ww904rOXZFLWVc5OLOfL56W+C8F9xn5JQZa3UX6m+IktJnIb1Jjg=="], + + "@esbuild/win32-ia32": ["@esbuild/win32-ia32@0.27.2", "", { "os": "win32", "cpu": "ia32" }, "sha512-Iuws0kxo4yusk7sw70Xa2E2imZU5HoixzxfGCdxwBdhiDgt9vX9VUCBhqcwY7/uh//78A1hMkkROMJq9l27oLQ=="], + + "@esbuild/win32-x64": ["@esbuild/win32-x64@0.27.2", "", { "os": "win32", "cpu": "x64" }, "sha512-sRdU18mcKf7F+YgheI/zGf5alZatMUTKj/jNS6l744f9u3WFu4v7twcUI9vu4mknF4Y9aDlblIie0IM+5xxaqQ=="], + + "@eslint-community/eslint-utils": ["@eslint-community/eslint-utils@4.9.1", "", { "dependencies": { "eslint-visitor-keys": "^3.4.3" }, "peerDependencies": { "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0" } }, "sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ=="], + + "@eslint-community/regexpp": ["@eslint-community/regexpp@4.12.2", "", {}, "sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew=="], + + "@eslint/config-array": ["@eslint/config-array@0.21.1", "", { "dependencies": { "@eslint/object-schema": "^2.1.7", "debug": "^4.3.1", "minimatch": "^3.1.2" } }, "sha512-aw1gNayWpdI/jSYVgzN5pL0cfzU02GT3NBpeT/DXbx1/1x7ZKxFPd9bwrzygx/qiwIQiJ1sw/zD8qY/kRvlGHA=="], + + "@eslint/config-helpers": ["@eslint/config-helpers@0.4.2", "", { "dependencies": { "@eslint/core": "^0.17.0" } }, "sha512-gBrxN88gOIf3R7ja5K9slwNayVcZgK6SOUORm2uBzTeIEfeVaIhOpCtTox3P6R7o2jLFwLFTLnC7kU/RGcYEgw=="], + + "@eslint/core": ["@eslint/core@0.17.0", "", { "dependencies": { "@types/json-schema": "^7.0.15" } }, "sha512-yL/sLrpmtDaFEiUj1osRP4TI2MDz1AddJL+jZ7KSqvBuliN4xqYY54IfdN8qD8Toa6g1iloph1fxQNkjOxrrpQ=="], + + "@eslint/eslintrc": ["@eslint/eslintrc@3.3.3", "", { "dependencies": { "ajv": "^6.12.4", "debug": "^4.3.2", "espree": "^10.0.1", "globals": "^14.0.0", "ignore": "^5.2.0", "import-fresh": "^3.2.1", "js-yaml": "^4.1.1", "minimatch": "^3.1.2", "strip-json-comments": "^3.1.1" } }, "sha512-Kr+LPIUVKz2qkx1HAMH8q1q6azbqBAsXJUxBl/ODDuVPX45Z9DfwB8tPjTi6nNZ8BuM3nbJxC5zCAg5elnBUTQ=="], + + "@eslint/js": ["@eslint/js@9.39.2", "", {}, "sha512-q1mjIoW1VX4IvSocvM/vbTiveKC4k9eLrajNEuSsmjymSDEbpGddtpfOoN7YGAqBK3NG+uqo8ia4PDTt8buCYA=="], + + "@eslint/object-schema": ["@eslint/object-schema@2.1.7", "", {}, "sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA=="], + + "@eslint/plugin-kit": ["@eslint/plugin-kit@0.4.1", "", { "dependencies": { "@eslint/core": "^0.17.0", "levn": "^0.4.1" } }, "sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA=="], + + "@humanfs/core": ["@humanfs/core@0.19.1", "", {}, "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA=="], + + "@humanfs/node": ["@humanfs/node@0.16.7", "", { "dependencies": { "@humanfs/core": "^0.19.1", "@humanwhocodes/retry": "^0.4.0" } }, "sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ=="], + + "@humanwhocodes/module-importer": ["@humanwhocodes/module-importer@1.0.1", "", {}, "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA=="], + + "@humanwhocodes/retry": ["@humanwhocodes/retry@0.4.3", "", {}, "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ=="], + + "@jridgewell/gen-mapping": ["@jridgewell/gen-mapping@0.3.13", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA=="], + + "@jridgewell/remapping": ["@jridgewell/remapping@2.3.5", "", { "dependencies": { "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ=="], + + "@jridgewell/resolve-uri": ["@jridgewell/resolve-uri@3.1.2", "", {}, "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw=="], + + "@jridgewell/sourcemap-codec": ["@jridgewell/sourcemap-codec@1.5.5", "", {}, "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og=="], + + "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="], + + "@rolldown/pluginutils": ["@rolldown/pluginutils@1.0.0-beta.53", "", {}, "sha512-vENRlFU4YbrwVqNDZ7fLvy+JR1CRkyr01jhSiDpE1u6py3OMzQfztQU2jxykW3ALNxO4kSlqIDeYyD0Y9RcQeQ=="], + + "@rollup/rollup-android-arm-eabi": ["@rollup/rollup-android-arm-eabi@4.55.1", "", { "os": "android", "cpu": "arm" }, "sha512-9R0DM/ykwfGIlNu6+2U09ga0WXeZ9MRC2Ter8jnz8415VbuIykVuc6bhdrbORFZANDmTDvq26mJrEVTl8TdnDg=="], + + "@rollup/rollup-android-arm64": ["@rollup/rollup-android-arm64@4.55.1", "", { "os": "android", "cpu": "arm64" }, "sha512-eFZCb1YUqhTysgW3sj/55du5cG57S7UTNtdMjCW7LwVcj3dTTcowCsC8p7uBdzKsZYa8J7IDE8lhMI+HX1vQvg=="], + + "@rollup/rollup-darwin-arm64": ["@rollup/rollup-darwin-arm64@4.55.1", "", { "os": "darwin", "cpu": "arm64" }, "sha512-p3grE2PHcQm2e8PSGZdzIhCKbMCw/xi9XvMPErPhwO17vxtvCN5FEA2mSLgmKlCjHGMQTP6phuQTYWUnKewwGg=="], + + "@rollup/rollup-darwin-x64": ["@rollup/rollup-darwin-x64@4.55.1", "", { "os": "darwin", "cpu": "x64" }, "sha512-rDUjG25C9qoTm+e02Esi+aqTKSBYwVTaoS1wxcN47/Luqef57Vgp96xNANwt5npq9GDxsH7kXxNkJVEsWEOEaQ=="], + + "@rollup/rollup-freebsd-arm64": ["@rollup/rollup-freebsd-arm64@4.55.1", "", { "os": "freebsd", "cpu": "arm64" }, "sha512-+JiU7Jbp5cdxekIgdte0jfcu5oqw4GCKr6i3PJTlXTCU5H5Fvtkpbs4XJHRmWNXF+hKmn4v7ogI5OQPaupJgOg=="], + + "@rollup/rollup-freebsd-x64": ["@rollup/rollup-freebsd-x64@4.55.1", "", { "os": "freebsd", "cpu": "x64" }, "sha512-V5xC1tOVWtLLmr3YUk2f6EJK4qksksOYiz/TCsFHu/R+woubcLWdC9nZQmwjOAbmExBIVKsm1/wKmEy4z4u4Bw=="], + + "@rollup/rollup-linux-arm-gnueabihf": ["@rollup/rollup-linux-arm-gnueabihf@4.55.1", "", { "os": "linux", "cpu": "arm" }, "sha512-Rn3n+FUk2J5VWx+ywrG/HGPTD9jXNbicRtTM11e/uorplArnXZYsVifnPPqNNP5BsO3roI4n8332ukpY/zN7rQ=="], + + "@rollup/rollup-linux-arm-musleabihf": ["@rollup/rollup-linux-arm-musleabihf@4.55.1", "", { "os": "linux", "cpu": "arm" }, "sha512-grPNWydeKtc1aEdrJDWk4opD7nFtQbMmV7769hiAaYyUKCT1faPRm2av8CX1YJsZ4TLAZcg9gTR1KvEzoLjXkg=="], + + "@rollup/rollup-linux-arm64-gnu": ["@rollup/rollup-linux-arm64-gnu@4.55.1", "", { "os": "linux", "cpu": "arm64" }, "sha512-a59mwd1k6x8tXKcUxSyISiquLwB5pX+fJW9TkWU46lCqD/GRDe9uDN31jrMmVP3feI3mhAdvcCClhV8V5MhJFQ=="], + + "@rollup/rollup-linux-arm64-musl": ["@rollup/rollup-linux-arm64-musl@4.55.1", "", { "os": "linux", "cpu": "arm64" }, "sha512-puS1MEgWX5GsHSoiAsF0TYrpomdvkaXm0CofIMG5uVkP6IBV+ZO9xhC5YEN49nsgYo1DuuMquF9+7EDBVYu4uA=="], + + "@rollup/rollup-linux-loong64-gnu": ["@rollup/rollup-linux-loong64-gnu@4.55.1", "", { "os": "linux", "cpu": "none" }, "sha512-r3Wv40in+lTsULSb6nnoudVbARdOwb2u5fpeoOAZjFLznp6tDU8kd+GTHmJoqZ9lt6/Sys33KdIHUaQihFcu7g=="], + + "@rollup/rollup-linux-loong64-musl": ["@rollup/rollup-linux-loong64-musl@4.55.1", "", { "os": "linux", "cpu": "none" }, "sha512-MR8c0+UxAlB22Fq4R+aQSPBayvYa3+9DrwG/i1TKQXFYEaoW3B5b/rkSRIypcZDdWjWnpcvxbNaAJDcSbJU3Lw=="], + + "@rollup/rollup-linux-ppc64-gnu": ["@rollup/rollup-linux-ppc64-gnu@4.55.1", "", { "os": "linux", "cpu": "ppc64" }, "sha512-3KhoECe1BRlSYpMTeVrD4sh2Pw2xgt4jzNSZIIPLFEsnQn9gAnZagW9+VqDqAHgm1Xc77LzJOo2LdigS5qZ+gw=="], + + "@rollup/rollup-linux-ppc64-musl": ["@rollup/rollup-linux-ppc64-musl@4.55.1", "", { "os": "linux", "cpu": "ppc64" }, "sha512-ziR1OuZx0vdYZZ30vueNZTg73alF59DicYrPViG0NEgDVN8/Jl87zkAPu4u6VjZST2llgEUjaiNl9JM6HH1Vdw=="], + + "@rollup/rollup-linux-riscv64-gnu": ["@rollup/rollup-linux-riscv64-gnu@4.55.1", "", { "os": "linux", "cpu": "none" }, "sha512-uW0Y12ih2XJRERZ4jAfKamTyIHVMPQnTZcQjme2HMVDAHY4amf5u414OqNYC+x+LzRdRcnIG1YodLrrtA8xsxw=="], + + "@rollup/rollup-linux-riscv64-musl": ["@rollup/rollup-linux-riscv64-musl@4.55.1", "", { "os": "linux", "cpu": "none" }, "sha512-u9yZ0jUkOED1BFrqu3BwMQoixvGHGZ+JhJNkNKY/hyoEgOwlqKb62qu+7UjbPSHYjiVy8kKJHvXKv5coH4wDeg=="], + + "@rollup/rollup-linux-s390x-gnu": ["@rollup/rollup-linux-s390x-gnu@4.55.1", "", { "os": "linux", "cpu": "s390x" }, "sha512-/0PenBCmqM4ZUd0190j7J0UsQ/1nsi735iPRakO8iPciE7BQ495Y6msPzaOmvx0/pn+eJVVlZrNrSh4WSYLxNg=="], + + "@rollup/rollup-linux-x64-gnu": ["@rollup/rollup-linux-x64-gnu@4.55.1", "", { "os": "linux", "cpu": "x64" }, "sha512-a8G4wiQxQG2BAvo+gU6XrReRRqj+pLS2NGXKm8io19goR+K8lw269eTrPkSdDTALwMmJp4th2Uh0D8J9bEV1vg=="], + + "@rollup/rollup-linux-x64-musl": ["@rollup/rollup-linux-x64-musl@4.55.1", "", { "os": "linux", "cpu": "x64" }, "sha512-bD+zjpFrMpP/hqkfEcnjXWHMw5BIghGisOKPj+2NaNDuVT+8Ds4mPf3XcPHuat1tz89WRL+1wbcxKY3WSbiT7w=="], + + "@rollup/rollup-openbsd-x64": ["@rollup/rollup-openbsd-x64@4.55.1", "", { "os": "openbsd", "cpu": "x64" }, "sha512-eLXw0dOiqE4QmvikfQ6yjgkg/xDM+MdU9YJuP4ySTibXU0oAvnEWXt7UDJmD4UkYialMfOGFPJnIHSe/kdzPxg=="], + + "@rollup/rollup-openharmony-arm64": ["@rollup/rollup-openharmony-arm64@4.55.1", "", { "os": "none", "cpu": "arm64" }, "sha512-xzm44KgEP11te3S2HCSyYf5zIzWmx3n8HDCc7EE59+lTcswEWNpvMLfd9uJvVX8LCg9QWG67Xt75AuHn4vgsXw=="], + + "@rollup/rollup-win32-arm64-msvc": ["@rollup/rollup-win32-arm64-msvc@4.55.1", "", { "os": "win32", "cpu": "arm64" }, "sha512-yR6Bl3tMC/gBok5cz/Qi0xYnVbIxGx5Fcf/ca0eB6/6JwOY+SRUcJfI0OpeTpPls7f194as62thCt/2BjxYN8g=="], + + "@rollup/rollup-win32-ia32-msvc": ["@rollup/rollup-win32-ia32-msvc@4.55.1", "", { "os": "win32", "cpu": "ia32" }, "sha512-3fZBidchE0eY0oFZBnekYCfg+5wAB0mbpCBuofh5mZuzIU/4jIVkbESmd2dOsFNS78b53CYv3OAtwqkZZmU5nA=="], + + "@rollup/rollup-win32-x64-gnu": ["@rollup/rollup-win32-x64-gnu@4.55.1", "", { "os": "win32", "cpu": "x64" }, "sha512-xGGY5pXj69IxKb4yv/POoocPy/qmEGhimy/FoTpTSVju3FYXUQQMFCaZZXJVidsmGxRioZAwpThl/4zX41gRKg=="], + + "@rollup/rollup-win32-x64-msvc": ["@rollup/rollup-win32-x64-msvc@4.55.1", "", { "os": "win32", "cpu": "x64" }, "sha512-SPEpaL6DX4rmcXtnhdrQYgzQ5W2uW3SCJch88lB2zImhJRhIIK44fkUrgIV/Q8yUNfw5oyZ5vkeQsZLhCb06lw=="], + + "@types/babel__core": ["@types/babel__core@7.20.5", "", { "dependencies": { "@babel/parser": "^7.20.7", "@babel/types": "^7.20.7", "@types/babel__generator": "*", "@types/babel__template": "*", "@types/babel__traverse": "*" } }, "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA=="], + + "@types/babel__generator": ["@types/babel__generator@7.27.0", "", { "dependencies": { "@babel/types": "^7.0.0" } }, "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg=="], + + "@types/babel__template": ["@types/babel__template@7.4.4", "", { "dependencies": { "@babel/parser": "^7.1.0", "@babel/types": "^7.0.0" } }, "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A=="], + + "@types/babel__traverse": ["@types/babel__traverse@7.28.0", "", { "dependencies": { "@babel/types": "^7.28.2" } }, "sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q=="], + + "@types/estree": ["@types/estree@1.0.8", "", {}, "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w=="], + + "@types/json-schema": ["@types/json-schema@7.0.15", "", {}, "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA=="], + + "@types/node": ["@types/node@24.10.4", "", { "dependencies": { "undici-types": "~7.16.0" } }, "sha512-vnDVpYPMzs4wunl27jHrfmwojOGKya0xyM3sH+UE5iv5uPS6vX7UIoh6m+vQc5LGBq52HBKPIn/zcSZVzeDEZg=="], + + "@types/react": ["@types/react@19.2.7", "", { "dependencies": { "csstype": "^3.2.2" } }, "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg=="], + + "@types/react-dom": ["@types/react-dom@19.2.3", "", { "peerDependencies": { "@types/react": "^19.2.0" } }, "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ=="], + + "@typescript-eslint/eslint-plugin": ["@typescript-eslint/eslint-plugin@8.52.0", "", { "dependencies": { "@eslint-community/regexpp": "^4.12.2", "@typescript-eslint/scope-manager": "8.52.0", "@typescript-eslint/type-utils": "8.52.0", "@typescript-eslint/utils": "8.52.0", "@typescript-eslint/visitor-keys": "8.52.0", "ignore": "^7.0.5", "natural-compare": "^1.4.0", "ts-api-utils": "^2.4.0" }, "peerDependencies": { "@typescript-eslint/parser": "^8.52.0", "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <6.0.0" } }, "sha512-okqtOgqu2qmZJ5iN4TWlgfF171dZmx2FzdOv2K/ixL2LZWDStL8+JgQerI2sa8eAEfoydG9+0V96m7V+P8yE1Q=="], + + "@typescript-eslint/parser": ["@typescript-eslint/parser@8.52.0", "", { "dependencies": { "@typescript-eslint/scope-manager": "8.52.0", "@typescript-eslint/types": "8.52.0", "@typescript-eslint/typescript-estree": "8.52.0", "@typescript-eslint/visitor-keys": "8.52.0", "debug": "^4.4.3" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <6.0.0" } }, "sha512-iIACsx8pxRnguSYhHiMn2PvhvfpopO9FXHyn1mG5txZIsAaB6F0KwbFnUQN3KCiG3Jcuad/Cao2FAs1Wp7vAyg=="], + + "@typescript-eslint/project-service": ["@typescript-eslint/project-service@8.52.0", "", { "dependencies": { "@typescript-eslint/tsconfig-utils": "^8.52.0", "@typescript-eslint/types": "^8.52.0", "debug": "^4.4.3" }, "peerDependencies": { "typescript": ">=4.8.4 <6.0.0" } }, "sha512-xD0MfdSdEmeFa3OmVqonHi+Cciab96ls1UhIF/qX/O/gPu5KXD0bY9lu33jj04fjzrXHcuvjBcBC+D3SNSadaw=="], + + "@typescript-eslint/scope-manager": ["@typescript-eslint/scope-manager@8.52.0", "", { "dependencies": { "@typescript-eslint/types": "8.52.0", "@typescript-eslint/visitor-keys": "8.52.0" } }, "sha512-ixxqmmCcc1Nf8S0mS0TkJ/3LKcC8mruYJPOU6Ia2F/zUUR4pApW7LzrpU3JmtePbRUTes9bEqRc1Gg4iyRnDzA=="], + + "@typescript-eslint/tsconfig-utils": ["@typescript-eslint/tsconfig-utils@8.52.0", "", { "peerDependencies": { "typescript": ">=4.8.4 <6.0.0" } }, "sha512-jl+8fzr/SdzdxWJznq5nvoI7qn2tNYV/ZBAEcaFMVXf+K6jmXvAFrgo/+5rxgnL152f//pDEAYAhhBAZGrVfwg=="], + + "@typescript-eslint/type-utils": ["@typescript-eslint/type-utils@8.52.0", "", { "dependencies": { "@typescript-eslint/types": "8.52.0", "@typescript-eslint/typescript-estree": "8.52.0", "@typescript-eslint/utils": "8.52.0", "debug": "^4.4.3", "ts-api-utils": "^2.4.0" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <6.0.0" } }, "sha512-JD3wKBRWglYRQkAtsyGz1AewDu3mTc7NtRjR/ceTyGoPqmdS5oCdx/oZMWD5Zuqmo6/MpsYs0wp6axNt88/2EQ=="], + + "@typescript-eslint/types": ["@typescript-eslint/types@8.52.0", "", {}, "sha512-LWQV1V4q9V4cT4H5JCIx3481iIFxH1UkVk+ZkGGAV1ZGcjGI9IoFOfg3O6ywz8QqCDEp7Inlg6kovMofsNRaGg=="], + + "@typescript-eslint/typescript-estree": ["@typescript-eslint/typescript-estree@8.52.0", "", { "dependencies": { "@typescript-eslint/project-service": "8.52.0", "@typescript-eslint/tsconfig-utils": "8.52.0", "@typescript-eslint/types": "8.52.0", "@typescript-eslint/visitor-keys": "8.52.0", "debug": "^4.4.3", "minimatch": "^9.0.5", "semver": "^7.7.3", "tinyglobby": "^0.2.15", "ts-api-utils": "^2.4.0" }, "peerDependencies": { "typescript": ">=4.8.4 <6.0.0" } }, "sha512-XP3LClsCc0FsTK5/frGjolyADTh3QmsLp6nKd476xNI9CsSsLnmn4f0jrzNoAulmxlmNIpeXuHYeEQv61Q6qeQ=="], + + "@typescript-eslint/utils": ["@typescript-eslint/utils@8.52.0", "", { "dependencies": { "@eslint-community/eslint-utils": "^4.9.1", "@typescript-eslint/scope-manager": "8.52.0", "@typescript-eslint/types": "8.52.0", "@typescript-eslint/typescript-estree": "8.52.0" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <6.0.0" } }, "sha512-wYndVMWkweqHpEpwPhwqE2lnD2DxC6WVLupU/DOt/0/v+/+iQbbzO3jOHjmBMnhu0DgLULvOaU4h4pwHYi2oRQ=="], + + "@typescript-eslint/visitor-keys": ["@typescript-eslint/visitor-keys@8.52.0", "", { "dependencies": { "@typescript-eslint/types": "8.52.0", "eslint-visitor-keys": "^4.2.1" } }, "sha512-ink3/Zofus34nmBsPjow63FP5M7IGff0RKAgqR6+CFpdk22M7aLwC9gOcLGYqr7MczLPzZVERW9hRog3O4n1sQ=="], + + "@vitejs/plugin-react": ["@vitejs/plugin-react@5.1.2", "", { "dependencies": { "@babel/core": "^7.28.5", "@babel/plugin-transform-react-jsx-self": "^7.27.1", "@babel/plugin-transform-react-jsx-source": "^7.27.1", "@rolldown/pluginutils": "1.0.0-beta.53", "@types/babel__core": "^7.20.5", "react-refresh": "^0.18.0" }, "peerDependencies": { "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0" } }, "sha512-EcA07pHJouywpzsoTUqNh5NwGayl2PPVEJKUSinGGSxFGYn+shYbqMGBg6FXDqgXum9Ou/ecb+411ssw8HImJQ=="], + + "acorn": ["acorn@8.15.0", "", { "bin": { "acorn": "bin/acorn" } }, "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg=="], + + "acorn-jsx": ["acorn-jsx@5.3.2", "", { "peerDependencies": { "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0" } }, "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ=="], + + "ajv": ["ajv@6.12.6", "", { "dependencies": { "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", "json-schema-traverse": "^0.4.1", "uri-js": "^4.2.2" } }, "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g=="], + + "ansi-styles": ["ansi-styles@4.3.0", "", { "dependencies": { "color-convert": "^2.0.1" } }, "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg=="], + + "argparse": ["argparse@2.0.1", "", {}, "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="], + + "balanced-match": ["balanced-match@1.0.2", "", {}, "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="], + + "baseline-browser-mapping": ["baseline-browser-mapping@2.9.13", "", { "bin": { "baseline-browser-mapping": "dist/cli.js" } }, "sha512-WhtvB2NG2wjr04+h77sg3klAIwrgOqnjS49GGudnUPGFFgg7G17y7Qecqp+2Dr5kUDxNRBca0SK7cG8JwzkWDQ=="], + + "brace-expansion": ["brace-expansion@1.1.12", "", { "dependencies": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" } }, "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg=="], + + "browserslist": ["browserslist@4.28.1", "", { "dependencies": { "baseline-browser-mapping": "^2.9.0", "caniuse-lite": "^1.0.30001759", "electron-to-chromium": "^1.5.263", "node-releases": "^2.0.27", "update-browserslist-db": "^1.2.0" }, "bin": { "browserslist": "cli.js" } }, "sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA=="], + + "callsites": ["callsites@3.1.0", "", {}, "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="], + + "caniuse-lite": ["caniuse-lite@1.0.30001763", "", {}, "sha512-mh/dGtq56uN98LlNX9qdbKnzINhX0QzhiWBFEkFfsFO4QyCvL8YegrJAazCwXIeqkIob8BlZPGM3xdnY+sgmvQ=="], + + "chalk": ["chalk@4.1.2", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA=="], + + "color-convert": ["color-convert@2.0.1", "", { "dependencies": { "color-name": "~1.1.4" } }, "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ=="], + + "color-name": ["color-name@1.1.4", "", {}, "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="], + + "concat-map": ["concat-map@0.0.1", "", {}, "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="], + + "convert-source-map": ["convert-source-map@2.0.0", "", {}, "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg=="], + + "cross-spawn": ["cross-spawn@7.0.6", "", { "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", "which": "^2.0.1" } }, "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA=="], + + "csstype": ["csstype@3.2.3", "", {}, "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="], + + "debug": ["debug@4.4.3", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA=="], + + "deep-is": ["deep-is@0.1.4", "", {}, "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ=="], + + "electron-to-chromium": ["electron-to-chromium@1.5.267", "", {}, "sha512-0Drusm6MVRXSOJpGbaSVgcQsuB4hEkMpHXaVstcPmhu5LIedxs1xNK/nIxmQIU/RPC0+1/o0AVZfBTkTNJOdUw=="], + + "esbuild": ["esbuild@0.27.2", "", { "optionalDependencies": { "@esbuild/aix-ppc64": "0.27.2", "@esbuild/android-arm": "0.27.2", "@esbuild/android-arm64": "0.27.2", "@esbuild/android-x64": "0.27.2", "@esbuild/darwin-arm64": "0.27.2", "@esbuild/darwin-x64": "0.27.2", "@esbuild/freebsd-arm64": "0.27.2", "@esbuild/freebsd-x64": "0.27.2", "@esbuild/linux-arm": "0.27.2", "@esbuild/linux-arm64": "0.27.2", "@esbuild/linux-ia32": "0.27.2", "@esbuild/linux-loong64": "0.27.2", "@esbuild/linux-mips64el": "0.27.2", "@esbuild/linux-ppc64": "0.27.2", "@esbuild/linux-riscv64": "0.27.2", "@esbuild/linux-s390x": "0.27.2", "@esbuild/linux-x64": "0.27.2", "@esbuild/netbsd-arm64": "0.27.2", "@esbuild/netbsd-x64": "0.27.2", "@esbuild/openbsd-arm64": "0.27.2", "@esbuild/openbsd-x64": "0.27.2", "@esbuild/openharmony-arm64": "0.27.2", "@esbuild/sunos-x64": "0.27.2", "@esbuild/win32-arm64": "0.27.2", "@esbuild/win32-ia32": "0.27.2", "@esbuild/win32-x64": "0.27.2" }, "bin": { "esbuild": "bin/esbuild" } }, "sha512-HyNQImnsOC7X9PMNaCIeAm4ISCQXs5a5YasTXVliKv4uuBo1dKrG0A+uQS8M5eXjVMnLg3WgXaKvprHlFJQffw=="], + + "escalade": ["escalade@3.2.0", "", {}, "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA=="], + + "escape-string-regexp": ["escape-string-regexp@4.0.0", "", {}, "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="], + + "eslint": ["eslint@9.39.2", "", { "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.1", "@eslint/config-array": "^0.21.1", "@eslint/config-helpers": "^0.4.2", "@eslint/core": "^0.17.0", "@eslint/eslintrc": "^3.3.1", "@eslint/js": "9.39.2", "@eslint/plugin-kit": "^0.4.1", "@humanfs/node": "^0.16.6", "@humanwhocodes/module-importer": "^1.0.1", "@humanwhocodes/retry": "^0.4.2", "@types/estree": "^1.0.6", "ajv": "^6.12.4", "chalk": "^4.0.0", "cross-spawn": "^7.0.6", "debug": "^4.3.2", "escape-string-regexp": "^4.0.0", "eslint-scope": "^8.4.0", "eslint-visitor-keys": "^4.2.1", "espree": "^10.4.0", "esquery": "^1.5.0", "esutils": "^2.0.2", "fast-deep-equal": "^3.1.3", "file-entry-cache": "^8.0.0", "find-up": "^5.0.0", "glob-parent": "^6.0.2", "ignore": "^5.2.0", "imurmurhash": "^0.1.4", "is-glob": "^4.0.0", "json-stable-stringify-without-jsonify": "^1.0.1", "lodash.merge": "^4.6.2", "minimatch": "^3.1.2", "natural-compare": "^1.4.0", "optionator": "^0.9.3" }, "peerDependencies": { "jiti": "*" }, "optionalPeers": ["jiti"], "bin": { "eslint": "bin/eslint.js" } }, "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw=="], + + "eslint-plugin-react-hooks": ["eslint-plugin-react-hooks@7.0.1", "", { "dependencies": { "@babel/core": "^7.24.4", "@babel/parser": "^7.24.4", "hermes-parser": "^0.25.1", "zod": "^3.25.0 || ^4.0.0", "zod-validation-error": "^3.5.0 || ^4.0.0" }, "peerDependencies": { "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0" } }, "sha512-O0d0m04evaNzEPoSW+59Mezf8Qt0InfgGIBJnpC0h3NH/WjUAR7BIKUfysC6todmtiZ/A0oUVS8Gce0WhBrHsA=="], + + "eslint-plugin-react-refresh": ["eslint-plugin-react-refresh@0.4.26", "", { "peerDependencies": { "eslint": ">=8.40" } }, "sha512-1RETEylht2O6FM/MvgnyvT+8K21wLqDNg4qD51Zj3guhjt433XbnnkVttHMyaVyAFD03QSV4LPS5iE3VQmO7XQ=="], + + "eslint-scope": ["eslint-scope@8.4.0", "", { "dependencies": { "esrecurse": "^4.3.0", "estraverse": "^5.2.0" } }, "sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg=="], + + "eslint-visitor-keys": ["eslint-visitor-keys@4.2.1", "", {}, "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ=="], + + "espree": ["espree@10.4.0", "", { "dependencies": { "acorn": "^8.15.0", "acorn-jsx": "^5.3.2", "eslint-visitor-keys": "^4.2.1" } }, "sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ=="], + + "esquery": ["esquery@1.7.0", "", { "dependencies": { "estraverse": "^5.1.0" } }, "sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g=="], + + "esrecurse": ["esrecurse@4.3.0", "", { "dependencies": { "estraverse": "^5.2.0" } }, "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag=="], + + "estraverse": ["estraverse@5.3.0", "", {}, "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA=="], + + "esutils": ["esutils@2.0.3", "", {}, "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g=="], + + "fast-deep-equal": ["fast-deep-equal@3.1.3", "", {}, "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="], + + "fast-json-stable-stringify": ["fast-json-stable-stringify@2.1.0", "", {}, "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="], + + "fast-levenshtein": ["fast-levenshtein@2.0.6", "", {}, "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw=="], + + "fdir": ["fdir@6.5.0", "", { "peerDependencies": { "picomatch": "^3 || ^4" }, "optionalPeers": ["picomatch"] }, "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg=="], + + "file-entry-cache": ["file-entry-cache@8.0.0", "", { "dependencies": { "flat-cache": "^4.0.0" } }, "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ=="], + + "find-up": ["find-up@5.0.0", "", { "dependencies": { "locate-path": "^6.0.0", "path-exists": "^4.0.0" } }, "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng=="], + + "flat-cache": ["flat-cache@4.0.1", "", { "dependencies": { "flatted": "^3.2.9", "keyv": "^4.5.4" } }, "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw=="], + + "flatted": ["flatted@3.3.3", "", {}, "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg=="], + + "fsevents": ["fsevents@2.3.3", "", { "os": "darwin" }, "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="], + + "gensync": ["gensync@1.0.0-beta.2", "", {}, "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg=="], + + "glob-parent": ["glob-parent@6.0.2", "", { "dependencies": { "is-glob": "^4.0.3" } }, "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A=="], + + "globals": ["globals@16.5.0", "", {}, "sha512-c/c15i26VrJ4IRt5Z89DnIzCGDn9EcebibhAOjw5ibqEHsE1wLUgkPn9RDmNcUKyU87GeaL633nyJ+pplFR2ZQ=="], + + "has-flag": ["has-flag@4.0.0", "", {}, "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="], + + "hermes-estree": ["hermes-estree@0.25.1", "", {}, "sha512-0wUoCcLp+5Ev5pDW2OriHC2MJCbwLwuRx+gAqMTOkGKJJiBCLjtrvy4PWUGn6MIVefecRpzoOZ/UV6iGdOr+Cw=="], + + "hermes-parser": ["hermes-parser@0.25.1", "", { "dependencies": { "hermes-estree": "0.25.1" } }, "sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA=="], + + "ignore": ["ignore@5.3.2", "", {}, "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g=="], + + "import-fresh": ["import-fresh@3.3.1", "", { "dependencies": { "parent-module": "^1.0.0", "resolve-from": "^4.0.0" } }, "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ=="], + + "imurmurhash": ["imurmurhash@0.1.4", "", {}, "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA=="], + + "is-extglob": ["is-extglob@2.1.1", "", {}, "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ=="], + + "is-glob": ["is-glob@4.0.3", "", { "dependencies": { "is-extglob": "^2.1.1" } }, "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg=="], + + "isexe": ["isexe@2.0.0", "", {}, "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="], + + "js-tokens": ["js-tokens@4.0.0", "", {}, "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="], + + "js-yaml": ["js-yaml@4.1.1", "", { "dependencies": { "argparse": "^2.0.1" }, "bin": { "js-yaml": "bin/js-yaml.js" } }, "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA=="], + + "jsesc": ["jsesc@3.1.0", "", { "bin": { "jsesc": "bin/jsesc" } }, "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA=="], + + "json-buffer": ["json-buffer@3.0.1", "", {}, "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ=="], + + "json-schema-traverse": ["json-schema-traverse@0.4.1", "", {}, "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="], + + "json-stable-stringify-without-jsonify": ["json-stable-stringify-without-jsonify@1.0.1", "", {}, "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw=="], + + "json5": ["json5@2.2.3", "", { "bin": { "json5": "lib/cli.js" } }, "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg=="], + + "keyv": ["keyv@4.5.4", "", { "dependencies": { "json-buffer": "3.0.1" } }, "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw=="], + + "levn": ["levn@0.4.1", "", { "dependencies": { "prelude-ls": "^1.2.1", "type-check": "~0.4.0" } }, "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ=="], + + "locate-path": ["locate-path@6.0.0", "", { "dependencies": { "p-locate": "^5.0.0" } }, "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw=="], + + "lodash.merge": ["lodash.merge@4.6.2", "", {}, "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="], + + "lru-cache": ["lru-cache@5.1.1", "", { "dependencies": { "yallist": "^3.0.2" } }, "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w=="], + + "minimatch": ["minimatch@3.1.2", "", { "dependencies": { "brace-expansion": "^1.1.7" } }, "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw=="], + + "ms": ["ms@2.1.3", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="], + + "nanoid": ["nanoid@3.3.11", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="], + + "natural-compare": ["natural-compare@1.4.0", "", {}, "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw=="], + + "node-releases": ["node-releases@2.0.27", "", {}, "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA=="], + + "optionator": ["optionator@0.9.4", "", { "dependencies": { "deep-is": "^0.1.3", "fast-levenshtein": "^2.0.6", "levn": "^0.4.1", "prelude-ls": "^1.2.1", "type-check": "^0.4.0", "word-wrap": "^1.2.5" } }, "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g=="], + + "p-limit": ["p-limit@3.1.0", "", { "dependencies": { "yocto-queue": "^0.1.0" } }, "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ=="], + + "p-locate": ["p-locate@5.0.0", "", { "dependencies": { "p-limit": "^3.0.2" } }, "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw=="], + + "parent-module": ["parent-module@1.0.1", "", { "dependencies": { "callsites": "^3.0.0" } }, "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g=="], + + "path-exists": ["path-exists@4.0.0", "", {}, "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w=="], + + "path-key": ["path-key@3.1.1", "", {}, "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q=="], + + "picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="], + + "picomatch": ["picomatch@4.0.3", "", {}, "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q=="], + + "postcss": ["postcss@8.5.6", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg=="], + + "prelude-ls": ["prelude-ls@1.2.1", "", {}, "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g=="], + + "punycode": ["punycode@2.3.1", "", {}, "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg=="], + + "react": ["react@19.2.3", "", {}, "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA=="], + + "react-dom": ["react-dom@19.2.3", "", { "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.3" } }, "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg=="], + + "react-refresh": ["react-refresh@0.18.0", "", {}, "sha512-QgT5//D3jfjJb6Gsjxv0Slpj23ip+HtOpnNgnb2S5zU3CB26G/IDPGoy4RJB42wzFE46DRsstbW6tKHoKbhAxw=="], + + "resolve-from": ["resolve-from@4.0.0", "", {}, "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="], + + "rollup": ["rollup@4.55.1", "", { "dependencies": { "@types/estree": "1.0.8" }, "optionalDependencies": { "@rollup/rollup-android-arm-eabi": "4.55.1", "@rollup/rollup-android-arm64": "4.55.1", "@rollup/rollup-darwin-arm64": "4.55.1", "@rollup/rollup-darwin-x64": "4.55.1", "@rollup/rollup-freebsd-arm64": "4.55.1", "@rollup/rollup-freebsd-x64": "4.55.1", "@rollup/rollup-linux-arm-gnueabihf": "4.55.1", "@rollup/rollup-linux-arm-musleabihf": "4.55.1", "@rollup/rollup-linux-arm64-gnu": "4.55.1", "@rollup/rollup-linux-arm64-musl": "4.55.1", "@rollup/rollup-linux-loong64-gnu": "4.55.1", "@rollup/rollup-linux-loong64-musl": "4.55.1", "@rollup/rollup-linux-ppc64-gnu": "4.55.1", "@rollup/rollup-linux-ppc64-musl": "4.55.1", "@rollup/rollup-linux-riscv64-gnu": "4.55.1", "@rollup/rollup-linux-riscv64-musl": "4.55.1", "@rollup/rollup-linux-s390x-gnu": "4.55.1", "@rollup/rollup-linux-x64-gnu": "4.55.1", "@rollup/rollup-linux-x64-musl": "4.55.1", "@rollup/rollup-openbsd-x64": "4.55.1", "@rollup/rollup-openharmony-arm64": "4.55.1", "@rollup/rollup-win32-arm64-msvc": "4.55.1", "@rollup/rollup-win32-ia32-msvc": "4.55.1", "@rollup/rollup-win32-x64-gnu": "4.55.1", "@rollup/rollup-win32-x64-msvc": "4.55.1", "fsevents": "~2.3.2" }, "bin": { "rollup": "dist/bin/rollup" } }, "sha512-wDv/Ht1BNHB4upNbK74s9usvl7hObDnvVzknxqY/E/O3X6rW1U1rV1aENEfJ54eFZDTNo7zv1f5N4edCluH7+A=="], + + "scheduler": ["scheduler@0.27.0", "", {}, "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q=="], + + "semver": ["semver@6.3.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="], + + "shebang-command": ["shebang-command@2.0.0", "", { "dependencies": { "shebang-regex": "^3.0.0" } }, "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA=="], + + "shebang-regex": ["shebang-regex@3.0.0", "", {}, "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A=="], + + "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="], + + "strip-json-comments": ["strip-json-comments@3.1.1", "", {}, "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig=="], + + "supports-color": ["supports-color@7.2.0", "", { "dependencies": { "has-flag": "^4.0.0" } }, "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw=="], + + "tinyglobby": ["tinyglobby@0.2.15", "", { "dependencies": { "fdir": "^6.5.0", "picomatch": "^4.0.3" } }, "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ=="], + + "ts-api-utils": ["ts-api-utils@2.4.0", "", { "peerDependencies": { "typescript": ">=4.8.4" } }, "sha512-3TaVTaAv2gTiMB35i3FiGJaRfwb3Pyn/j3m/bfAvGe8FB7CF6u+LMYqYlDh7reQf7UNvoTvdfAqHGmPGOSsPmA=="], + + "type-check": ["type-check@0.4.0", "", { "dependencies": { "prelude-ls": "^1.2.1" } }, "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew=="], + + "typescript": ["typescript@5.9.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw=="], + + "typescript-eslint": ["typescript-eslint@8.52.0", "", { "dependencies": { "@typescript-eslint/eslint-plugin": "8.52.0", "@typescript-eslint/parser": "8.52.0", "@typescript-eslint/typescript-estree": "8.52.0", "@typescript-eslint/utils": "8.52.0" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <6.0.0" } }, "sha512-atlQQJ2YkO4pfTVQmQ+wvYQwexPDOIgo+RaVcD7gHgzy/IQA+XTyuxNM9M9TVXvttkF7koBHmcwisKdOAf2EcA=="], + + "undici-types": ["undici-types@7.16.0", "", {}, "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw=="], + + "update-browserslist-db": ["update-browserslist-db@1.2.3", "", { "dependencies": { "escalade": "^3.2.0", "picocolors": "^1.1.1" }, "peerDependencies": { "browserslist": ">= 4.21.0" }, "bin": { "update-browserslist-db": "cli.js" } }, "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w=="], + + "uri-js": ["uri-js@4.4.1", "", { "dependencies": { "punycode": "^2.1.0" } }, "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg=="], + + "vite": ["vite@7.3.1", "", { "dependencies": { "esbuild": "^0.27.0", "fdir": "^6.5.0", "picomatch": "^4.0.3", "postcss": "^8.5.6", "rollup": "^4.43.0", "tinyglobby": "^0.2.15" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "jiti": ">=1.21.0", "less": "^4.0.0", "lightningcss": "^1.21.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA=="], + + "which": ["which@2.0.2", "", { "dependencies": { "isexe": "^2.0.0" }, "bin": { "node-which": "./bin/node-which" } }, "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA=="], + + "word-wrap": ["word-wrap@1.2.5", "", {}, "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA=="], + + "yallist": ["yallist@3.1.1", "", {}, "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="], + + "yocto-queue": ["yocto-queue@0.1.0", "", {}, "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="], + + "zod": ["zod@4.3.5", "", {}, "sha512-k7Nwx6vuWx1IJ9Bjuf4Zt1PEllcwe7cls3VNzm4CQ1/hgtFUK2bRNG3rvnpPUhFjmqJKAKtjV576KnUkHocg/g=="], + + "zod-validation-error": ["zod-validation-error@4.0.2", "", { "peerDependencies": { "zod": "^3.25.0 || ^4.0.0" } }, "sha512-Q6/nZLe6jxuU80qb/4uJ4t5v2VEZ44lzQjPDhYJNztRQ4wyWc6VF3D3Kb/fAuPetZQnhS3hnajCf9CsWesghLQ=="], + + "@eslint-community/eslint-utils/eslint-visitor-keys": ["eslint-visitor-keys@3.4.3", "", {}, "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag=="], + + "@eslint/eslintrc/globals": ["globals@14.0.0", "", {}, "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ=="], + + "@typescript-eslint/eslint-plugin/ignore": ["ignore@7.0.5", "", {}, "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg=="], + + "@typescript-eslint/typescript-estree/minimatch": ["minimatch@9.0.5", "", { "dependencies": { "brace-expansion": "^2.0.1" } }, "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow=="], + + "@typescript-eslint/typescript-estree/semver": ["semver@7.7.3", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q=="], + + "@typescript-eslint/typescript-estree/minimatch/brace-expansion": ["brace-expansion@2.0.2", "", { "dependencies": { "balanced-match": "^1.0.0" } }, "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ=="], + } +} diff --git a/eslint.config.js b/eslint.config.js new file mode 100644 index 0000000..5e6b472 --- /dev/null +++ b/eslint.config.js @@ -0,0 +1,23 @@ +import js from '@eslint/js' +import globals from 'globals' +import reactHooks from 'eslint-plugin-react-hooks' +import reactRefresh from 'eslint-plugin-react-refresh' +import tseslint from 'typescript-eslint' +import { defineConfig, globalIgnores } from 'eslint/config' + +export default defineConfig([ + globalIgnores(['dist']), + { + files: ['**/*.{ts,tsx}'], + extends: [ + js.configs.recommended, + tseslint.configs.recommended, + reactHooks.configs.flat.recommended, + reactRefresh.configs.vite, + ], + languageOptions: { + ecmaVersion: 2020, + globals: globals.browser, + }, + }, +]) diff --git a/index.html b/index.html new file mode 100644 index 0000000..1990eff --- /dev/null +++ b/index.html @@ -0,0 +1,13 @@ + + + + + + + evolution + + +
+ + + diff --git a/package.json b/package.json new file mode 100644 index 0000000..8ab80bf --- /dev/null +++ b/package.json @@ -0,0 +1,30 @@ +{ + "name": "evolution", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "tsc -b && vite build", + "lint": "eslint .", + "preview": "vite preview" + }, + "dependencies": { + "react": "^19.2.0", + "react-dom": "^19.2.0" + }, + "devDependencies": { + "@eslint/js": "^9.39.1", + "@types/node": "^24.10.1", + "@types/react": "^19.2.5", + "@types/react-dom": "^19.2.3", + "@vitejs/plugin-react": "^5.1.1", + "eslint": "^9.39.1", + "eslint-plugin-react-hooks": "^7.0.1", + "eslint-plugin-react-refresh": "^0.4.24", + "globals": "^16.5.0", + "typescript": "~5.9.3", + "typescript-eslint": "^8.46.4", + "vite": "^7.2.4" + } +} diff --git a/public/vite.svg b/public/vite.svg new file mode 100644 index 0000000..e7b8dfb --- /dev/null +++ b/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/App.css b/src/App.css new file mode 100644 index 0000000..d39f7a1 --- /dev/null +++ b/src/App.css @@ -0,0 +1,11 @@ +.app-layout { + display: flex; + width: 100vw; + height: 100vh; + overflow: hidden; +} + +.app-main { + flex: 1; + overflow: hidden; +} \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx new file mode 100644 index 0000000..c3d1726 --- /dev/null +++ b/src/App.tsx @@ -0,0 +1,29 @@ +import { useState } from 'react'; +import Sidebar, { type AppId } from './components/Sidebar'; +import ImageApprox from './apps/ImageApprox/ImageApprox'; +import SnakeAI from './apps/SnakeAI/SnakeAI'; +import './App.css'; + +function App() { + const [currentApp, setCurrentApp] = useState('image-approx'); + + const renderApp = () => { + switch (currentApp) { + case 'image-approx': + return ; + case 'snake-ai': + return ; + default: + return
App not found
; + } + }; + + return ( +
+ +
{renderApp()}
+
+ ); +} + +export default App; diff --git a/src/apps/ImageApprox/Controls.css b/src/apps/ImageApprox/Controls.css new file mode 100644 index 0000000..0bb1572 --- /dev/null +++ b/src/apps/ImageApprox/Controls.css @@ -0,0 +1,161 @@ +.controls-panel { + display: flex; + flex-direction: column; + gap: 1.25rem; +} + +.control-section { + background: var(--bg-card); + border: 1px solid var(--border-color); + border-radius: 16px; + padding: 1.5rem; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); +} + +.section-title { + margin: 0 0 1rem; + font-size: 1rem; + font-weight: 600; + color: var(--text-primary); +} + +.file-input { + width: 100%; + padding: 0.75rem; + background: rgba(255, 255, 255, 0.05); + border: 1px solid var(--border-color); + border-radius: 8px; + color: var(--text-secondary); + cursor: pointer; + transition: all 0.3s ease; +} + +.file-input:hover { + background: rgba(255, 255, 255, 0.08); + border-color: var(--primary-gradient-start); +} + +.button-group { + display: flex; + gap: 0.75rem; +} + +.control-button { + flex: 1; + padding: 0.875rem 1.5rem; + font-size: 1rem; + font-weight: 600; + border: none; + border-radius: 8px; + cursor: pointer; + transition: all 0.3s ease; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); +} + +.control-button.start { + background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); + color: white; +} + +.control-button.start:hover:not(:disabled) { + transform: translateY(-2px); + box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4); +} + +.control-button.pause { + background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); + color: white; +} + +.control-button.pause:hover:not(:disabled) { + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(240, 147, 251, 0.4); +} + +.control-button.reset { + background: rgba(255, 255, 255, 0.1); + color: var(--text-primary); + border: 1px solid var(--border-color); +} + +.control-button.reset:hover:not(:disabled) { + background: rgba(255, 255, 255, 0.15); +} + +.control-button:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.slider-control { + display: flex; + flex-direction: column; + gap: 0.5rem; + margin-bottom: 1rem; +} + +.slider-control:last-child { + margin-bottom: 0; +} + +.slider-label { + display: flex; + justify-content: space-between; + align-items: center; + font-size: 0.875rem; + color: var(--text-secondary); +} + +.slider-value { + font-weight: 600; + color: var(--primary-gradient-start); + font-family: 'Courier New', monospace; +} + +.slider { + width: 100%; + height: 6px; + border-radius: 3px; + background: rgba(255, 255, 255, 0.1); + outline: none; + -webkit-appearance: none; + appearance: none; +} + +.slider::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; + width: 18px; + height: 18px; + border-radius: 50%; + background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%); + cursor: pointer; + box-shadow: 0 2px 6px rgba(99, 102, 241, 0.5); + transition: all 0.2s ease; +} + +.slider::-webkit-slider-thumb:hover { + transform: scale(1.2); + box-shadow: 0 3px 10px rgba(99, 102, 241, 0.7); +} + +.slider::-moz-range-thumb { + width: 18px; + height: 18px; + border-radius: 50%; + background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%); + cursor: pointer; + border: none; + box-shadow: 0 2px 6px rgba(99, 102, 241, 0.5); + transition: all 0.2s ease; +} + +.slider::-moz-range-thumb:hover { + transform: scale(1.2); + box-shadow: 0 3px 10px rgba(99, 102, 241, 0.7); +} + +.slider:disabled { + opacity: 0.5; + cursor: not-allowed; +} \ No newline at end of file diff --git a/src/apps/ImageApprox/Controls.tsx b/src/apps/ImageApprox/Controls.tsx new file mode 100644 index 0000000..c209743 --- /dev/null +++ b/src/apps/ImageApprox/Controls.tsx @@ -0,0 +1,140 @@ +import './Controls.css'; + +interface ControlsProps { + isRunning: boolean; + hasTarget: boolean; + mutationStrength: number; + childrenCount: number; + triangleCount: number; + sampleStep: number; + generationsPerFrame: number; + onToggleRunning: () => void; + onReset: () => void; + onMutationStrengthChange: (value: number) => void; + onChildrenCountChange: (value: number) => void; + onTriangleCountChange: (value: number) => void; + onSampleStepChange: (value: number) => void; + onGenerationsPerFrameChange: (value: number) => void; +} + +export default function Controls({ + isRunning, + hasTarget, + mutationStrength, + childrenCount, + triangleCount, + sampleStep, + generationsPerFrame, + onToggleRunning, + onReset, + onMutationStrengthChange, + onChildrenCountChange, + onTriangleCountChange, + onSampleStepChange, + onGenerationsPerFrameChange, +}: ControlsProps) { + return ( +
+
+

Evolution Controls

+
+ + +
+
+ +
+

Parameters

+ +
+ + onMutationStrengthChange(parseFloat(e.target.value))} + className="slider" + /> +
+ +
+ + onChildrenCountChange(parseInt(e.target.value))} + className="slider" + /> +
+ +
+ + onTriangleCountChange(parseInt(e.target.value))} + className="slider" + disabled={isRunning} + /> +
+ +
+ + onSampleStepChange(parseInt(e.target.value))} + className="slider" + /> +
+ +
+ + onGenerationsPerFrameChange(parseInt(e.target.value))} + className="slider" + /> +
+
+
+ ); +} diff --git a/src/apps/ImageApprox/FitnessChart.css b/src/apps/ImageApprox/FitnessChart.css new file mode 100644 index 0000000..bdc5677 --- /dev/null +++ b/src/apps/ImageApprox/FitnessChart.css @@ -0,0 +1,23 @@ +.fitness-chart-container { + background: rgba(255, 255, 255, 0.02); + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 16px; + padding: 1.5rem; + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); +} + +.chart-title { + margin: 0 0 1rem; + font-size: 0.875rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.05em; + color: var(--text-secondary); +} + +.fitness-chart { + width: 100%; + height: auto; + border-radius: 8px; + background: rgba(0, 0, 0, 0.2); +} \ No newline at end of file diff --git a/src/apps/ImageApprox/FitnessChart.tsx b/src/apps/ImageApprox/FitnessChart.tsx new file mode 100644 index 0000000..e3bdd4f --- /dev/null +++ b/src/apps/ImageApprox/FitnessChart.tsx @@ -0,0 +1,152 @@ +import { useEffect, useRef } from 'react'; +import './FitnessChart.css'; + +interface FitnessChartProps { + fitnessHistory: number[]; + maxPoints?: number; +} + +export default function FitnessChart({ fitnessHistory, maxPoints = 500 }: FitnessChartProps) { + const canvasRef = useRef(null); + + useEffect(() => { + const canvas = canvasRef.current; + if (!canvas) return; + + const ctx = canvas.getContext('2d'); + if (!ctx) return; + + const width = canvas.width; + const height = canvas.height; + + // Clear canvas + ctx.fillStyle = '#0f0f1e'; + ctx.fillRect(0, 0, width, height); + + if (fitnessHistory.length < 2) return; + + const maxMSE = 255 * 255 * 3; + + // Convert fitness (error) to similarity percentage + const similarityHistory = fitnessHistory.map(fitness => + Math.max(0, Math.min(100, ((maxMSE - fitness) / maxMSE) * 100)) + ); + + // ALL-TIME scale: fixed 0-100% + const allTimeMin = 0; + const allTimeMax = 100; + const allTimeRange = 100; + + // RECENT scale: auto-scaled to recent data + const recentHistory = similarityHistory.slice(-maxPoints); + const recentMin = Math.min(...recentHistory); + const recentMax = Math.max(...recentHistory); + const recentRange = recentMax - recentMin || 1; + + // Draw grid lines and left axis (0-100%) + ctx.strokeStyle = 'rgba(255, 255, 255, 0.05)'; + ctx.lineWidth = 1; + ctx.fillStyle = 'rgba(255, 255, 255, 0.4)'; + ctx.font = '10px Inter, sans-serif'; + ctx.textAlign = 'left'; + + for (let i = 0; i <= 5; i++) { + const y = (height / 5) * i; + ctx.beginPath(); + ctx.moveTo(0, y); + ctx.lineTo(width, y); + ctx.stroke(); + + // Left axis labels (0-100%) + const value = allTimeMax - (allTimeRange / 5) * i; + ctx.fillText(value.toFixed(0) + '%', 5, y - 2); + } + + // LAYER 1: All-time history (0-100% scale, faded) + const downsampleRate = Math.max(1, Math.floor(similarityHistory.length / 100)); + const downsampledHistory = similarityHistory.filter((_, i) => i % downsampleRate === 0); + + if (downsampledHistory.length >= 2) { + ctx.strokeStyle = 'rgba(102, 126, 234, 0.2)'; + ctx.lineWidth = 1.5; + ctx.beginPath(); + + downsampledHistory.forEach((similarity, index) => { + const x = (index / (downsampledHistory.length - 1)) * width; + const normalizedSimilarity = (similarity - allTimeMin) / allTimeRange; + const y = height - normalizedSimilarity * height; + + if (index === 0) { + ctx.moveTo(x, y); + } else { + ctx.lineTo(x, y); + } + }); + + ctx.stroke(); + } + + // LAYER 2: Recent progress (auto-scaled, bright) + if (recentHistory.length >= 2) { + ctx.strokeStyle = '#667eea'; + ctx.lineWidth = 2.5; + ctx.beginPath(); + + recentHistory.forEach((similarity, index) => { + const x = (index / (recentHistory.length - 1)) * width; + const normalizedSimilarity = (similarity - recentMin) / recentRange; + const y = height - normalizedSimilarity * height; + + if (index === 0) { + ctx.moveTo(x, y); + } else { + ctx.lineTo(x, y); + } + }); + + ctx.stroke(); + + // Gradient fill under recent line + const gradient = ctx.createLinearGradient(0, 0, 0, height); + gradient.addColorStop(0, 'rgba(102, 126, 234, 0.25)'); + gradient.addColorStop(1, 'rgba(102, 126, 234, 0)'); + + ctx.fillStyle = gradient; + ctx.beginPath(); + + recentHistory.forEach((similarity, index) => { + const x = (index / (recentHistory.length - 1)) * width; + const normalizedSimilarity = (similarity - recentMin) / recentRange; + const y = height - normalizedSimilarity * height; + + if (index === 0) { + ctx.moveTo(x, y); + } else { + ctx.lineTo(x, y); + } + }); + + ctx.lineTo(width, height); + ctx.lineTo(0, height); + ctx.closePath(); + ctx.fill(); + } + + // Right axis labels (recent auto-scale) + ctx.fillStyle = 'rgba(102, 126, 234, 0.7)'; + ctx.textAlign = 'right'; + + for (let i = 0; i <= 5; i++) { + const y = (height / 5) * i; + const value = recentMax - (recentRange / 5) * i; + ctx.fillText(value.toFixed(2) + '%', width - 5, y - 2); + } + }, [fitnessHistory, maxPoints]); + + return ( +
+

Similarity Progress

+ +
+ ); +} diff --git a/src/apps/ImageApprox/ImageApprox.css b/src/apps/ImageApprox/ImageApprox.css new file mode 100644 index 0000000..d748174 --- /dev/null +++ b/src/apps/ImageApprox/ImageApprox.css @@ -0,0 +1,35 @@ +.image-approx-layout { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 2rem; + max-width: 1600px; + margin: 0 auto; +} + +.left-panel { + display: flex; + flex-direction: column; + gap: 1.5rem; +} + +.right-panel { + display: flex; + flex-direction: column; + gap: 1.5rem; +} + +.canvases-row { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1.5rem; +} + +@media (max-width: 1200px) { + .image-approx-layout { + grid-template-columns: 1fr; + } + + .canvases-row { + grid-template-columns: 1fr; + } +} \ No newline at end of file diff --git a/src/apps/ImageApprox/ImageApprox.tsx b/src/apps/ImageApprox/ImageApprox.tsx new file mode 100644 index 0000000..a18863c --- /dev/null +++ b/src/apps/ImageApprox/ImageApprox.tsx @@ -0,0 +1,283 @@ +import { useRef, useState, useEffect, useCallback } from 'react'; +import AppContainer from '../../components/AppContainer'; +import ImageCanvas from './ImageCanvas'; +import Controls from './Controls'; +import Stats from './Stats'; +import FitnessChart from './FitnessChart'; +import Tips from './Tips'; +import { createRandomGenome, type Genome } from '../../lib/imageApprox/genome'; +import { renderGenome } from '../../lib/imageApprox/renderer'; +import { calculateFitness } from '../../lib/imageApprox/fitness'; +import { evolve, type EvolutionConfig } from '../../lib/imageApprox/evolution'; +import './ImageApprox.css'; + +const CANVAS_SIZE = 256; // Increased from 128 for better visibility + +export default function ImageApprox() { + const targetCanvasRef = useRef(null); + const evolvedCanvasRef = useRef(null); + const offscreenCanvasRef = useRef(null); + const animationFrameRef = useRef(null); + + const [targetImageData, setTargetImageData] = useState(null); + const [bestGenome, setBestGenome] = useState(null); + const [bestFitness, setBestFitness] = useState(Infinity); + const [fitnessHistory, setFitnessHistory] = useState([]); + const [generation, setGeneration] = useState(0); + const [isRunning, setIsRunning] = useState(false); + + // Configuration + const [mutationStrength, setMutationStrength] = useState(0.2); + const [childrenCount, setChildrenCount] = useState(15); + const [triangleCount, setTriangleCount] = useState(100); + const [sampleStep, setSampleStep] = useState(2); + const [generationsPerFrame, setGenerationsPerFrame] = useState(20); + + // Initialize offscreen canvas + useEffect(() => { + offscreenCanvasRef.current = document.createElement('canvas'); + offscreenCanvasRef.current.width = CANVAS_SIZE; + offscreenCanvasRef.current.height = CANVAS_SIZE; + + // Load default image + loadDefaultImage(); + }, []); + + const loadDefaultImage = () => { + const img = new Image(); + img.onload = () => { + const canvas = targetCanvasRef.current; + if (!canvas) return; + + const ctx = canvas.getContext('2d'); + if (!ctx) return; + + // Draw image to target canvas + ctx.drawImage(img, 0, 0, CANVAS_SIZE, CANVAS_SIZE); + const imageData = ctx.getImageData(0, 0, CANVAS_SIZE, CANVAS_SIZE); + setTargetImageData(imageData); + + // Initialize genome + const genome = createRandomGenome(CANVAS_SIZE, CANVAS_SIZE, triangleCount); + setBestGenome(genome); + + // Calculate initial fitness + const offscreenCanvas = offscreenCanvasRef.current; + if (offscreenCanvas) { + const offscreenCtx = offscreenCanvas.getContext('2d'); + if (offscreenCtx) { + renderGenome(offscreenCtx, genome, CANVAS_SIZE, CANVAS_SIZE); + const candidateData = offscreenCtx.getImageData(0, 0, CANVAS_SIZE, CANVAS_SIZE); + const fitness = calculateFitness(imageData, candidateData, sampleStep); + setBestFitness(fitness); + setFitnessHistory([fitness]); + } + } + + setGeneration(0); + setIsRunning(false); + }; + + // Create a simple default image (yellow circle on blue background) + const defaultCanvas = document.createElement('canvas'); + defaultCanvas.width = CANVAS_SIZE; + defaultCanvas.height = CANVAS_SIZE; + const defaultCtx = defaultCanvas.getContext('2d'); + if (defaultCtx) { + // Blue background + defaultCtx.fillStyle = '#4A90E2'; + defaultCtx.fillRect(0, 0, CANVAS_SIZE, CANVAS_SIZE); + + // Yellow circle + defaultCtx.fillStyle = '#FFD700'; + defaultCtx.beginPath(); + defaultCtx.arc(CANVAS_SIZE / 2, CANVAS_SIZE / 2, 40, 0, Math.PI * 2); + defaultCtx.fill(); + } + + img.src = defaultCanvas.toDataURL(); + }; + + const handleImageUpload = useCallback((e: React.ChangeEvent) => { + const file = e.target.files?.[0]; + if (!file) return; + + const img = new Image(); + img.onload = () => { + const canvas = targetCanvasRef.current; + if (!canvas) return; + + const ctx = canvas.getContext('2d'); + if (!ctx) return; + + // Draw image to target canvas + ctx.drawImage(img, 0, 0, CANVAS_SIZE, CANVAS_SIZE); + const imageData = ctx.getImageData(0, 0, CANVAS_SIZE, CANVAS_SIZE); + setTargetImageData(imageData); + + // Initialize genome + const genome = createRandomGenome(CANVAS_SIZE, CANVAS_SIZE, triangleCount); + setBestGenome(genome); + + // Calculate initial fitness + const offscreenCanvas = offscreenCanvasRef.current; + if (offscreenCanvas) { + const offscreenCtx = offscreenCanvas.getContext('2d'); + if (offscreenCtx) { + renderGenome(offscreenCtx, genome, CANVAS_SIZE, CANVAS_SIZE); + const candidateData = offscreenCtx.getImageData(0, 0, CANVAS_SIZE, CANVAS_SIZE); + const fitness = calculateFitness(imageData, candidateData, sampleStep); + setBestFitness(fitness); + setFitnessHistory([fitness]); + } + } + + setGeneration(0); + setIsRunning(false); + }; + + img.src = URL.createObjectURL(file); + }, [triangleCount, sampleStep]); + + const handleReset = useCallback(() => { + if (!targetImageData) return; + + const genome = createRandomGenome(CANVAS_SIZE, CANVAS_SIZE, triangleCount); + setBestGenome(genome); + + // Calculate initial fitness + const offscreenCanvas = offscreenCanvasRef.current; + if (offscreenCanvas) { + const offscreenCtx = offscreenCanvas.getContext('2d'); + if (offscreenCtx) { + renderGenome(offscreenCtx, genome, CANVAS_SIZE, CANVAS_SIZE); + const candidateData = offscreenCtx.getImageData(0, 0, CANVAS_SIZE, CANVAS_SIZE); + const fitness = calculateFitness(targetImageData, candidateData, sampleStep); + setBestFitness(fitness); + setFitnessHistory([fitness]); + } + } + + setGeneration(0); + setIsRunning(false); + }, [targetImageData, triangleCount, sampleStep]); + + // Evolution loop - batched for performance + useEffect(() => { + if (!isRunning || !targetImageData || !bestGenome || !offscreenCanvasRef.current) { + return; + } + + const DISPLAY_UPDATE_INTERVAL = 5; // Update display every 5 frames + let frameCount = 0; + + const runEvolution = () => { + let currentGenome = bestGenome; + let currentFitness = bestFitness; + + // Run multiple generations per frame (user configurable) + for (let i = 0; i < generationsPerFrame; i++) { + const config: EvolutionConfig = { + width: CANVAS_SIZE, + height: CANVAS_SIZE, + mutationStrength, + childrenCount, + sampleStep, + }; + + const result = evolve( + currentGenome, + currentFitness, + targetImageData, + config, + offscreenCanvasRef.current! + ); + + currentGenome = result.genome; + currentFitness = result.fitness; + + // Update state + setBestGenome(result.genome); + setBestFitness(result.fitness); + // Only keep last 1000 fitness values to prevent memory bloat + setFitnessHistory((prev) => { + const newHistory = [...prev, result.fitness]; + return newHistory.length > 1000 ? newHistory.slice(-1000) : newHistory; + }); + setGeneration((g) => g + 1); + } + + // Only update display canvas periodically, not every generation + frameCount++; + if (frameCount % DISPLAY_UPDATE_INTERVAL === 0) { + const canvas = evolvedCanvasRef.current; + if (canvas) { + const ctx = canvas.getContext('2d', { willReadFrequently: false }); + if (ctx) { + renderGenome(ctx, currentGenome, CANVAS_SIZE, CANVAS_SIZE); + } + } + } + + animationFrameRef.current = requestAnimationFrame(runEvolution); + }; + + animationFrameRef.current = requestAnimationFrame(runEvolution); + + return () => { + if (animationFrameRef.current !== null) { + cancelAnimationFrame(animationFrameRef.current); + } + }; + }, [isRunning, targetImageData, bestGenome, bestFitness, mutationStrength, childrenCount, sampleStep, generationsPerFrame]); + + // Initial render of evolved canvas + useEffect(() => { + if (bestGenome && evolvedCanvasRef.current) { + const ctx = evolvedCanvasRef.current.getContext('2d'); + if (ctx) { + renderGenome(ctx, bestGenome, CANVAS_SIZE, CANVAS_SIZE); + } + } + }, [bestGenome]); + + return ( + +
+
+ setIsRunning(!isRunning)} + onReset={handleReset} + onMutationStrengthChange={setMutationStrength} + onChildrenCountChange={setChildrenCount} + onTriangleCountChange={setTriangleCount} + onSampleStepChange={setSampleStep} + onGenerationsPerFrameChange={setGenerationsPerFrame} + /> + +
+ +
+ + +
+ + +
+
+
+ + ); +} diff --git a/src/apps/ImageApprox/ImageCanvas.css b/src/apps/ImageApprox/ImageCanvas.css new file mode 100644 index 0000000..6039771 --- /dev/null +++ b/src/apps/ImageApprox/ImageCanvas.css @@ -0,0 +1,66 @@ +.image-canvas-container { + display: flex; + flex-direction: column; + gap: 0.75rem; +} + +.canvas-header { + display: flex; + align-items: center; + gap: 0.5rem; +} + +.canvas-label { + margin: 0; + font-size: 0.875rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.05em; + color: var(--text-secondary); + flex: 1; +} + +.file-input-hidden { + display: none; +} + +.upload-icon-button { + display: flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + background: rgba(99, 102, 241, 0.15); + border: 1px solid rgba(99, 102, 241, 0.3); + border-radius: 8px; + font-size: 1rem; + cursor: pointer; + transition: all 0.2s ease; +} + +.upload-icon-button:hover { + background: rgba(99, 102, 241, 0.25); + border-color: var(--primary); + transform: scale(1.05); +} + +.image-canvas { + display: block; + border-radius: 12px; + background: rgba(0, 0, 0, 0.3); + border: 1px solid var(--border-color); + image-rendering: pixelated; + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); + width: 256px; + height: 256px; +} + +.pixel-canvas { + display: block; + width: 256px; + height: 256px; + image-rendering: pixelated; + image-rendering: -moz-crisp-edges; + image-rendering: crisp-edges; + border-radius: 4px; +} \ No newline at end of file diff --git a/src/apps/ImageApprox/ImageCanvas.tsx b/src/apps/ImageApprox/ImageCanvas.tsx new file mode 100644 index 0000000..068f5e4 --- /dev/null +++ b/src/apps/ImageApprox/ImageCanvas.tsx @@ -0,0 +1,33 @@ +import './ImageCanvas.css'; + +interface ImageCanvasProps { + label: string; + canvasRef: React.RefObject; + showFileUpload?: boolean; + onImageUpload?: (e: React.ChangeEvent) => void; +} + +export default function ImageCanvas({ label, canvasRef, showFileUpload, onImageUpload }: ImageCanvasProps) { + return ( +
+
+

{label}

+ {showFileUpload && ( + <> + + + + )} +
+ +
+ ); +} diff --git a/src/apps/ImageApprox/Stats.css b/src/apps/ImageApprox/Stats.css new file mode 100644 index 0000000..ab3a75c --- /dev/null +++ b/src/apps/ImageApprox/Stats.css @@ -0,0 +1,49 @@ +.stats-panel { + background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%); + border-radius: 16px; + padding: 1.5rem 2rem; + box-shadow: 0 8px 32px rgba(99, 102, 241, 0.3); +} + +.stats-title { + margin: 0 0 1rem; + font-size: 1.125rem; + font-weight: 600; + color: var(--text-primary); +} + +.stats-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 2rem; +} + +.stat-item { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.stat-item.highlight { + text-align: right; +} + +.stat-item:last-child { + border-bottom: none; +} + +.stat-label { + font-size: 0.75rem; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.05em; + color: rgba(255, 255, 255, 0.8); +} + +.stat-value { + font-size: 2.25rem; + font-weight: 700; + line-height: 1; + color: #fff; + font-family: 'Inter', system-ui, sans-serif; +} \ No newline at end of file diff --git a/src/apps/ImageApprox/Stats.tsx b/src/apps/ImageApprox/Stats.tsx new file mode 100644 index 0000000..36265c6 --- /dev/null +++ b/src/apps/ImageApprox/Stats.tsx @@ -0,0 +1,29 @@ +import './Stats.css'; + +interface StatsProps { + generation: number; + fitness: number; +} + +export default function Stats({ generation, fitness }: StatsProps) { + // Convert fitness (MSE) to similarity percentage + // MSE is mean squared error per pixel, so max possible is 255^2 * 3 (RGB channels) + // Lower fitness = better, so we invert it + const maxMSE = 255 * 255 * 3; // Max error per pixel across RGB + const similarity = Math.max(0, Math.min(100, ((maxMSE - fitness) / maxMSE) * 100)); + + return ( +
+
+
+ Generation + {generation.toLocaleString()} +
+
+ Similarity + {similarity.toFixed(1)}% +
+
+
+ ); +} diff --git a/src/apps/ImageApprox/Tips.css b/src/apps/ImageApprox/Tips.css new file mode 100644 index 0000000..acaad02 --- /dev/null +++ b/src/apps/ImageApprox/Tips.css @@ -0,0 +1,44 @@ +.tips-panel { + background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%); + border: 1px solid rgba(99, 102, 241, 0.2); + border-radius: 16px; + padding: 1.5rem; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); +} + +.tips-title { + margin: 0 0 0.75rem; + font-size: 0.95rem; + font-weight: 600; + color: var(--text-primary); +} + +.tips-list { + margin: 0; + padding-left: 1.25rem; + list-style: none; +} + +.tips-list li { + position: relative; + font-size: 0.8rem; + color: var(--text-secondary); + margin-bottom: 0.5rem; + line-height: 1.4; +} + +.tips-list li:before { + content: '→'; + position: absolute; + left: -1.25rem; + color: var(--primary); +} + +.tips-list li:last-child { + margin-bottom: 0; +} + +.tips-list strong { + color: var(--text-primary); + font-weight: 600; +} \ No newline at end of file diff --git a/src/apps/ImageApprox/Tips.tsx b/src/apps/ImageApprox/Tips.tsx new file mode 100644 index 0000000..2182765 --- /dev/null +++ b/src/apps/ImageApprox/Tips.tsx @@ -0,0 +1,16 @@ +import './Tips.css'; + +export default function Tips() { + return ( +
+

💡 Tips

+
    +
  • Start with simple images (circles, logos) for best results
    • +
  • Increase Speed slider to 50-100 for max performance!
    • +
  • Increase Children per Gen to 20-30 for faster convergence
    • +
  • Visible shapes typically appear after 5k-10k generations
    • +
  • Lower mutation strength once you see rough shapes forming
    • +
+
+ ); +} diff --git a/src/apps/SnakeAI/BestSnakeDisplay.tsx b/src/apps/SnakeAI/BestSnakeDisplay.tsx new file mode 100644 index 0000000..99a81b7 --- /dev/null +++ b/src/apps/SnakeAI/BestSnakeDisplay.tsx @@ -0,0 +1,33 @@ +import SnakeCanvas from './SnakeCanvas'; +import type { Network } from '../../lib/snakeAI/network'; + +interface BestSnakeDisplayProps { + network: Network | null; + gridSize: number; + fitness: number; +} + +export default function BestSnakeDisplay({ network, gridSize, fitness }: BestSnakeDisplayProps) { + if (!network) return null; + + return ( +
+
+

👑 All-Time Best

+
+ Fitness Record: + {Math.round(fitness)} +
+
+
+ +
+
+ ); +} diff --git a/src/apps/SnakeAI/Controls.tsx b/src/apps/SnakeAI/Controls.tsx new file mode 100644 index 0000000..e7b8e10 --- /dev/null +++ b/src/apps/SnakeAI/Controls.tsx @@ -0,0 +1,86 @@ +interface ControlsProps { + isRunning: boolean; + onToggleRunning: () => void; + onReset: () => void; + speed: number; + onSpeedChange: (speed: number) => void; + mutationRate: number; + onMutationRateChange: (rate: number) => void; + populationSize: number; +} + +export default function Controls({ + isRunning, + onToggleRunning, + onReset, + speed, + onSpeedChange, + mutationRate, + onMutationRateChange, + populationSize, +}: ControlsProps) { + return ( +
+

Evolution Controls

+ +
+
+ + +
+
+ +
+ + onSpeedChange(Number(e.target.value))} + /> +
+ Slow + Fast +
+
+ +
+ + onMutationRateChange(Number(e.target.value))} + /> +
+ 1% + 50% +
+
+ +
+
+ Population Size: + {populationSize} +
+
+
+ ); +} diff --git a/src/apps/SnakeAI/SnakeAI.css b/src/apps/SnakeAI/SnakeAI.css new file mode 100644 index 0000000..37348d4 --- /dev/null +++ b/src/apps/SnakeAI/SnakeAI.css @@ -0,0 +1,476 @@ +.snake-ai-layout { + display: grid; + grid-template-columns: 2fr 1fr; + gap: 2rem; + height: 100%; + padding: 1rem; +} + +.left-panel, +.right-panel { + display: flex; + flex-direction: column; + gap: 1.5rem; +} + +/* Canvas */ +.snake-canvas-container { + display: flex; + flex-direction: column; + gap: 1rem; + align-items: center; +} + +/* Snake Grid */ +.snake-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1rem; + width: 100%; + max-width: 700px; +} + +.snake-grid-cell { + position: relative; + background: linear-gradient(135deg, #2a2a3e 0%, #1a1a2e 100%); + border-radius: 8px; + border: 2px solid #3a3a4e; + padding: 0.5rem; + transition: all 0.3s ease; +} + +.snake-grid-cell:hover { + transform: scale(1.05); + border-color: #4ecdc4; + box-shadow: 0 4px 12px rgba(78, 205, 196, 0.3); + z-index: 10; +} + +.snake-grid-cell.best { + border-color: #4ecdc4; + background: linear-gradient(135deg, rgba(78, 205, 196, 0.15) 0%, #1a1a2e 100%); + box-shadow: 0 0 20px rgba(78, 205, 196, 0.2); +} + +.snake-grid-label { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 0.5rem; + font-size: 0.85rem; + font-weight: 600; + color: #4ecdc4; +} + +.snake-grid-cell.best .snake-grid-label { + color: #4ecdc4; + text-shadow: 0 0 10px rgba(78, 205, 196, 0.5); +} + +.fitness-badge { + background: #3a3a4e; + padding: 0.2rem 0.5rem; + border-radius: 12px; + font-size: 0.75rem; + color: #fff; +} + +.snake-grid-cell.best .fitness-badge { + background: linear-gradient(135deg, #4ecdc4 0%, #44a59d 100%); +} + +.snake-grid-cell canvas { + width: 100%; + height: auto; +} + + +.canvas-info { + display: flex; + gap: 2rem; + padding: 0.75rem 1.5rem; + background: linear-gradient(135deg, #2a2a3e 0%, #1a1a2e 100%); + border-radius: 8px; + border: 1px solid #3a3a4e; +} + +.info-item { + display: flex; + gap: 0.5rem; + align-items: baseline; +} + +.info-item .label { + color: #888; + font-size: 0.9rem; +} + +.info-item .value { + color: #4ecdc4; + font-weight: 600; + font-size: 1.1rem; +} + +/* Controls */ +.controls-panel { + background: linear-gradient(135deg, #2a2a3e 0%, #1a1a2e 100%); + padding: 1.5rem; + border-radius: 12px; + border: 1px solid #3a3a4e; +} + +.controls-panel h3 { + margin: 0 0 1.5rem 0; + color: #fff; + font-size: 1.2rem; +} + +.control-group { + margin-bottom: 1.5rem; +} + +.control-group:last-child { + margin-bottom: 0; +} + +.button-group { + display: flex; + gap: 0.75rem; +} + +.btn { + flex: 1; + padding: 0.75rem 1.5rem; + border: none; + border-radius: 8px; + font-size: 1rem; + font-weight: 600; + cursor: pointer; + transition: all 0.2s ease; + font-family: inherit; +} + +.btn-play { + background: linear-gradient(135deg, #4ecdc4 0%, #44a59d 100%); + color: #fff; +} + +.btn-play:hover { + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(78, 205, 196, 0.4); +} + +.btn-pause { + background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%); + color: #fff; +} + +.btn-pause:hover { + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(243, 156, 18, 0.4); +} + +.btn-reset { + background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%); + color: #fff; +} + +.btn-reset:hover { + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4); +} + +.control-group label { + display: block; + margin-bottom: 0.5rem; + color: #ccc; + font-size: 0.95rem; +} + +.control-group label strong { + color: #4ecdc4; +} + +input[type='range'] { + width: 100%; + height: 6px; + border-radius: 3px; + background: #3a3a4e; + outline: none; + -webkit-appearance: none; +} + +input[type='range']::-webkit-slider-thumb { + appearance: none; + -webkit-appearance: none; + width: 18px; + height: 18px; + border-radius: 50%; + background: linear-gradient(135deg, #4ecdc4 0%, #44a59d 100%); + cursor: pointer; + box-shadow: 0 2px 8px rgba(78, 205, 196, 0.4); + transition: all 0.2s ease; +} + +input[type='range']::-webkit-slider-thumb:hover { + transform: scale(1.2); +} + +input[type='range']::-moz-range-thumb { + width: 18px; + height: 18px; + border-radius: 50%; + background: linear-gradient(135deg, #4ecdc4 0%, #44a59d 100%); + cursor: pointer; + border: none; + box-shadow: 0 2px 8px rgba(78, 205, 196, 0.4); +} + +.slider-labels { + display: flex; + justify-content: space-between; + margin-top: 0.25rem; + font-size: 0.8rem; + color: #888; +} + +.control-info { + background: #1a1a2e; + padding: 1rem; + border-radius: 8px; + border: 1px solid #3a3a4e; +} + +.info-row { + display: flex; + justify-content: space-between; + align-items: center; +} + +.info-label { + color: #888; + font-size: 0.9rem; +} + +.info-value { + color: #4ecdc4; + font-weight: 600; + font-size: 1.1rem; +} + +/* Stats */ +.stats-panel { + background: linear-gradient(135deg, #2a2a3e 0%, #1a1a2e 100%); + padding: 1.5rem; + border-radius: 12px; + border: 1px solid #3a3a4e; +} + +.stats-panel h3 { + margin: 0 0 1.5rem 0; + color: #fff; + font-size: 1.2rem; +} + +.stat-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 1rem; + margin-bottom: 1.5rem; +} + +.stat-item { + background: #1a1a2e; + padding: 1rem; + border-radius: 8px; + border: 1px solid #3a3a4e; + text-align: center; +} + +.stat-item.highlight { + border-color: #4ecdc4; + background: linear-gradient(135deg, rgba(78, 205, 196, 0.1) 0%, #1a1a2e 100%); +} + +.stat-label { + color: #888; + font-size: 0.85rem; + margin-bottom: 0.5rem; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.stat-value { + color: #4ecdc4; + font-size: 1.8rem; + font-weight: 700; +} + +.progress-indicator { + background: #1a1a2e; + padding: 1rem; + border-radius: 8px; + border: 1px solid #3a3a4e; +} + +.progress-label { + color: #ccc; + font-size: 0.9rem; + margin-bottom: 0.5rem; +} + +.progress-bar { + width: 100%; + height: 8px; + background: #3a3a4e; + border-radius: 4px; + overflow: hidden; +} + +.progress-fill { + height: 100%; + background: linear-gradient(90deg, #4ecdc4 0%, #44a59d 100%); + transition: width 0.3s ease; + box-shadow: 0 0 10px rgba(78, 205, 196, 0.5); +} + +/* Tips */ +.tips-panel { + background: linear-gradient(135deg, #2a2a3e 0%, #1a1a2e 100%); + padding: 1.5rem; + border-radius: 12px; + border: 1px solid #3a3a4e; + max-height: 600px; + overflow-y: auto; +} + +.tips-panel h3 { + margin: 0 0 1.5rem 0; + color: #fff; + font-size: 1.2rem; +} + +.tip-section { + margin-bottom: 1.5rem; +} + +.tip-section:last-child { + margin-bottom: 0; +} + +.tip-section h4 { + color: #4ecdc4; + font-size: 1rem; + margin: 0 0 0.75rem 0; +} + +.tip-section p { + color: #ccc; + line-height: 1.6; + margin: 0 0 0.75rem 0; +} + +.tip-section ul, +.tip-section ol { + color: #ccc; + line-height: 1.8; + margin: 0; + padding-left: 1.5rem; +} + +.tip-section li { + margin-bottom: 0.5rem; +} + +.tip-section strong { + color: #4ecdc4; + font-weight: 600; +} + +/* Scrollbar styling for tips panel */ +.tips-panel::-webkit-scrollbar { + width: 8px; +} + +.tips-panel::-webkit-scrollbar-track { + background: #1a1a2e; + border-radius: 4px; +} + +.tips-panel::-webkit-scrollbar-thumb { + background: #3a3a4e; + border-radius: 4px; +} + +.tips-panel::-webkit-scrollbar-thumb:hover { + background: #4a4a5e; +} + +/* Responsive */ +@media (max-width: 1200px) { + .snake-ai-layout { + grid-template-columns: 1fr; + } + + .stat-grid { + grid-template-columns: repeat(3, 1fr); + } +} + +/* Best Snake Display */ +.best-snake-panel { + background: linear-gradient(135deg, #2a2a3e 0%, #1a1a2e 100%); + padding: 1.5rem; + border-radius: 12px; + border: 2px solid #4ecdc4; + box-shadow: 0 0 20px rgba(78, 205, 196, 0.15); + display: flex; + flex-direction: column; + align-items: center; + gap: 1rem; +} + +.best-header { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + margin-bottom: 0.5rem; +} + +.best-header h3 { + margin: 0; + color: #4ecdc4; + font-size: 1.4rem; + text-shadow: 0 0 10px rgba(78, 205, 196, 0.3); +} + +.best-stats { + display: flex; + gap: 0.75rem; + align-items: baseline; + background: rgba(78, 205, 196, 0.1); + padding: 0.5rem 1rem; + border-radius: 20px; + border: 1px solid rgba(78, 205, 196, 0.3); +} + +.best-stats .label { + color: #ccc; + font-size: 0.9rem; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.best-stats .value { + color: #fff; + font-weight: 700; + font-size: 1.2rem; +} + +.best-canvas-wrapper { + padding: 1rem; + background: #151525; + border-radius: 12px; + border: 1px solid #3a3a4e; +} \ No newline at end of file diff --git a/src/apps/SnakeAI/SnakeAI.tsx b/src/apps/SnakeAI/SnakeAI.tsx new file mode 100644 index 0000000..79972f8 --- /dev/null +++ b/src/apps/SnakeAI/SnakeAI.tsx @@ -0,0 +1,164 @@ +import { useState, useEffect, useRef, useCallback } from 'react'; +import AppContainer from '../../components/AppContainer'; +import SnakeGrid from './SnakeGrid'; +import Controls from './Controls'; +import Stats from './Stats'; +import Tips from './Tips'; +import BestSnakeDisplay from './BestSnakeDisplay'; +import { + createPopulation, + evaluatePopulation, + evolveGeneration, + getBestIndividual, + getAverageFitness, + type Population, +} from '../../lib/snakeAI/evolution'; +import type { EvolutionConfig } from '../../lib/snakeAI/types'; +import './SnakeAI.css'; + +const DEFAULT_CONFIG: EvolutionConfig = { + populationSize: 25, + mutationRate: 0.1, + eliteCount: 5, + gridSize: 20, + maxGameSteps: 500, +}; + +export default function SnakeAI() { + const [population, setPopulation] = useState(() => + createPopulation(DEFAULT_CONFIG) + ); + const [config, setConfig] = useState(DEFAULT_CONFIG); + const [isRunning, setIsRunning] = useState(false); + const [speed, setSpeed] = useState(5); + const [gamesPlayed, setGamesPlayed] = useState(0); + + // Compute derived values from population + const bestIndividual = getBestIndividual(population); + const averageFitness = getAverageFitness(population); + + const animationFrameRef = useRef(); + const lastUpdateRef = useRef(0); + + const runGeneration = useCallback(() => { + setPopulation((prev) => { + try { + // Evaluate current generation + const evaluated = evaluatePopulation(prev, config); + + // Evolve to next generation + const nextGen = evolveGeneration(evaluated, config); + + return nextGen; + } catch (error) { + console.error("SnakeAI: Generation update failed", error); + return prev; + } + }); + }, [config]); + + // Update stats when generation changes + useEffect(() => { + if (population.generation > 1) { + setGamesPlayed((count) => count + config.populationSize); + } + }, [population.generation, config.populationSize]); + + useEffect(() => { + if (!isRunning) { + if (animationFrameRef.current) { + cancelAnimationFrame(animationFrameRef.current); + } + return; + } + + const animate = (timestamp: number) => { + const elapsed = timestamp - lastUpdateRef.current; + + // Non-linear speed scaling: + // Speed 1: ~5000ms (5s) per generation - Observation mode + // Speed 5: ~1000ms (1s) + // Speed 20: ~50ms - Turbo training + // Formula: Base delay divided by speed, with a visual observation bias + + let updateInterval; + if (speed <= 5) { + // Speeds 1-5: 10s down to 2s + updateInterval = 12000 / speed; + } else { + // Speeds 6-20: Linear fast + updateInterval = 1000 / (speed - 4); + } + + if (elapsed >= updateInterval) { + runGeneration(); + lastUpdateRef.current = timestamp; + } + + animationFrameRef.current = requestAnimationFrame(animate); + }; + + animationFrameRef.current = requestAnimationFrame(animate); + + return () => { + if (animationFrameRef.current) { + cancelAnimationFrame(animationFrameRef.current); + } + }; + }, [isRunning, speed, runGeneration]); + + const handleReset = () => { + setIsRunning(false); + setPopulation(createPopulation(config)); + setGamesPlayed(0); + }; + + const handleMutationRateChange = (rate: number) => { + setConfig((prev) => ({ ...prev, mutationRate: rate })); + }; + + return ( + +
+
+ + + +
+ +
+ setIsRunning(!isRunning)} + onReset={handleReset} + speed={speed} + onSpeedChange={setSpeed} + mutationRate={config.mutationRate} + onMutationRateChange={handleMutationRateChange} + populationSize={config.populationSize} + /> + + + + + +
+
+ + ); +} diff --git a/src/apps/SnakeAI/SnakeCanvas.tsx b/src/apps/SnakeAI/SnakeCanvas.tsx new file mode 100644 index 0000000..dbd657c --- /dev/null +++ b/src/apps/SnakeAI/SnakeCanvas.tsx @@ -0,0 +1,196 @@ +import { useRef, useEffect, useState } from 'react'; +import type { GameState } from '../../lib/snakeAI/game'; +import { createGame, step, getInputs } from '../../lib/snakeAI/game'; +import { getAction, type Network } from '../../lib/snakeAI/network'; + +interface SnakeCanvasProps { + network: Network | null; + gridSize: number; + showGrid?: boolean; + size?: 'small' | 'normal' | 'large'; + showStats?: boolean; // Show score/length/steps even in small mode +} + +const CELL_SIZES = { + small: 8, + normal: 20, + large: 30, +}; + +const CANVAS_PADDING = 10; + +export default function SnakeCanvas({ network, gridSize, showGrid = true, size = 'normal', showStats = false }: SnakeCanvasProps) { + const canvasRef = useRef(null); + const [currentGame, setCurrentGame] = useState(null); + const animationFrameRef = useRef(); + const lastUpdateRef = useRef(0); + + const CELL_SIZE = CELL_SIZES[size]; + + // Initialize game when network or gridSize changes + useEffect(() => { + if (network) { + setCurrentGame(createGame(gridSize)); + } + }, [network, gridSize]); + + // Animation loop to step through game + useEffect(() => { + if (!network || !currentGame) return; + + const STEPS_PER_SECOND = 10; // Speed of game playback + const UPDATE_INTERVAL = 1000 / STEPS_PER_SECOND; + + const animate = (timestamp: number) => { + const elapsed = timestamp - lastUpdateRef.current; + + if (elapsed >= UPDATE_INTERVAL) { + setCurrentGame((prevGame) => { + if (!prevGame) return prevGame; + + // If game is over, start a new one + if (!prevGame.alive) { + return createGame(gridSize); + } + + // Get neural network decision + const inputs = getInputs(prevGame); + const action = getAction(network, inputs); + + // Step the game forward + return step(prevGame, action); + }); + + lastUpdateRef.current = timestamp; + } + + animationFrameRef.current = requestAnimationFrame(animate); + }; + + animationFrameRef.current = requestAnimationFrame(animate); + + return () => { + if (animationFrameRef.current) { + cancelAnimationFrame(animationFrameRef.current); + } + }; + }, [network, currentGame, gridSize]); + + // Set canvas size once when props change (not on every render) + useEffect(() => { + if (!canvasRef.current) return; + const canvas = canvasRef.current; + const canvasSize = gridSize * CELL_SIZE + CANVAS_PADDING * 2; + canvas.width = canvasSize; + canvas.height = canvasSize; + }, [gridSize, size]); + + // Render game to canvas + useEffect(() => { + if (!currentGame || !canvasRef.current) return; + + const canvas = canvasRef.current; + const ctx = canvas.getContext('2d'); + if (!ctx) return; + + const canvasSize = gridSize * CELL_SIZE + CANVAS_PADDING * 2; + + // Clear canvas + ctx.fillStyle = '#1a1a2e'; + ctx.fillRect(0, 0, canvasSize, canvasSize); + + // Draw grid + if (showGrid) { + ctx.strokeStyle = '#2a2a3e'; + ctx.lineWidth = 1; + for (let i = 0; i <= currentGame.gridSize; i++) { + const pos = i * CELL_SIZE + CANVAS_PADDING; + ctx.beginPath(); + ctx.moveTo(pos, CANVAS_PADDING); + ctx.lineTo(pos, currentGame.gridSize * CELL_SIZE + CANVAS_PADDING); + ctx.stroke(); + ctx.beginPath(); + ctx.moveTo(CANVAS_PADDING, pos); + ctx.lineTo(currentGame.gridSize * CELL_SIZE + CANVAS_PADDING, pos); + ctx.stroke(); + } + } + + // Draw food + ctx.fillStyle = '#ff6b6b'; + ctx.shadowBlur = 15; + ctx.shadowColor = '#ff6b6b'; + const foodX = currentGame.food.x * CELL_SIZE + CANVAS_PADDING + CELL_SIZE / 2; + const foodY = currentGame.food.y * CELL_SIZE + CANVAS_PADDING + CELL_SIZE / 2; + ctx.beginPath(); + ctx.arc(foodX, foodY, CELL_SIZE / 3, 0, Math.PI * 2); + ctx.fill(); + ctx.shadowBlur = 0; + + // Draw snake + currentGame.snake.forEach((segment, index) => { + const x = segment.x * CELL_SIZE + CANVAS_PADDING; + const y = segment.y * CELL_SIZE + CANVAS_PADDING; + + if (index === 0) { + // Head - brighter and larger + ctx.fillStyle = currentGame.alive ? '#4ecdc4' : '#e74c3c'; + ctx.shadowBlur = 10; + ctx.shadowColor = currentGame.alive ? '#4ecdc4' : '#e74c3c'; + } else { + // Body - gradient from head to tail + const alpha = 1 - (index / currentGame.snake.length) * 0.5; + ctx.fillStyle = `rgba(78, 205, 196, ${alpha})`; + ctx.shadowBlur = 0; + } + + ctx.fillRect(x + 2, y + 2, CELL_SIZE - 4, CELL_SIZE - 4); + }); + + ctx.shadowBlur = 0; + + // Draw death overlay if dead + if (!currentGame.alive) { + ctx.fillStyle = 'rgba(231, 76, 60, 0.2)'; + ctx.fillRect(0, 0, canvasSize, canvasSize); + + ctx.fillStyle = '#e74c3c'; + ctx.font = `bold ${size === 'small' ? '16' : '24'}px Inter, sans-serif`; + ctx.textAlign = 'center'; + ctx.textBaseline = 'middle'; + ctx.fillText('DEAD', canvasSize / 2, canvasSize / 2); + } + }, [currentGame, showGrid]); + + // Calculate canvas size from props, not state, to prevent shaking + const canvasSize = gridSize * CELL_SIZE + CANVAS_PADDING * 2; + + return ( +
+ + {currentGame && (size !== 'small' || showStats) && ( +
+
+ Score: + {currentGame.score} +
+
+ Steps: + {currentGame.steps} +
+
+ )} +
+ ); +} diff --git a/src/apps/SnakeAI/SnakeGrid.tsx b/src/apps/SnakeAI/SnakeGrid.tsx new file mode 100644 index 0000000..f311aa8 --- /dev/null +++ b/src/apps/SnakeAI/SnakeGrid.tsx @@ -0,0 +1,38 @@ +import SnakeCanvas from './SnakeCanvas'; +import type { Individual } from '../../lib/snakeAI/evolution'; + +interface SnakeGridProps { + individuals: Individual[]; + gridSize: number; + count?: number; // How many snakes to show (default: 9) + columns?: number; // Number of columns in grid (default: 3) +} + +export default function SnakeGrid({ individuals, gridSize, count = 9, columns = 3 }: SnakeGridProps) { + // Take the top N individuals (sorted by fitness) + const topIndividuals = [...individuals] + .sort((a, b) => b.fitness - a.fitness) + .slice(0, count); + + return ( +
+ {topIndividuals.map((individual, index) => ( +
+
+ #{index + 1} + {individual.fitness > 0 && ( + {Math.round(individual.fitness)} + )} +
+ +
+ ))} +
+ ); +} diff --git a/src/apps/SnakeAI/Stats.tsx b/src/apps/SnakeAI/Stats.tsx new file mode 100644 index 0000000..cc14458 --- /dev/null +++ b/src/apps/SnakeAI/Stats.tsx @@ -0,0 +1,62 @@ +interface StatsProps { + generation: number; + bestFitness: number; + bestFitnessEver: number; + averageFitness: number; + gamesPlayed: number; +} + +export default function Stats({ + generation, + bestFitness, + bestFitnessEver, + averageFitness, + gamesPlayed, +}: StatsProps) { + return ( +
+

Evolution Statistics

+ +
+
+
Generation
+
{generation}
+
+ +
+
Best Ever
+
{Math.round(bestFitnessEver)}
+
+ +
+
Current Best
+
{Math.round(bestFitness)}
+
+ +
+
Average
+
{Math.round(averageFitness)}
+
+ +
+
Games Played
+
{gamesPlayed.toLocaleString()}
+
+
+ +
+
+ Improvement: {bestFitnessEver > 0 ? ((bestFitness / bestFitnessEver) * 100).toFixed(1) : 0}% +
+
+
0 ? Math.min(100, (bestFitness / bestFitnessEver) * 100) : 0}%`, + }} + /> +
+
+
+ ); +} diff --git a/src/apps/SnakeAI/Tips.tsx b/src/apps/SnakeAI/Tips.tsx new file mode 100644 index 0000000..dbacd03 --- /dev/null +++ b/src/apps/SnakeAI/Tips.tsx @@ -0,0 +1,54 @@ +export default function Tips() { + return ( +
+

How It Works

+ +
+

🧠 Neural Network

+

+ Each snake is controlled by a neural network with 8 inputs: +

+
    +
  • Direction to food (X and Y)
    • +
  • Danger sensors (up, down, left, right)
    • +
  • Current direction
    • +
  • Snake length
    • +
+

+ The network outputs 3 actions: turn left, go straight, or turn right. +

+
+ +
+

🧬 Evolution Process

+
    +
  1. Play: All snakes play until they die
    2. +
  2. Evaluate: Calculate fitness score
    3. +
  3. Select: Best performers become parents
    4. +
  4. Reproduce: Create new generation via crossover and mutation
    5. +
  5. Repeat: New generation plays the game
    6. +
+
+ +
+

📊 Fitness Function

+

Snakes are scored based on:

+
    +
  • Food collected × 100 (primary goal)
    • +
  • Survival time × 1 (stay alive)
    • +
  • Snake length × 10 (growth bonus)
    • +
+
+ +
+

💡 Tips for Best Results

+
    +
  • Higher mutation rate = more exploration
    • +
  • Lower mutation rate = refine existing strategies
    • +
  • Evolution improves around generation 10-20
    • +
  • Watch for emergent behaviors and patterns!
    • +
+
+
+ ); +} diff --git a/src/assets/react.svg b/src/assets/react.svg new file mode 100644 index 0000000..6c87de9 --- /dev/null +++ b/src/assets/react.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/AppContainer.css b/src/components/AppContainer.css new file mode 100644 index 0000000..16452a3 --- /dev/null +++ b/src/components/AppContainer.css @@ -0,0 +1,28 @@ +.app-container { + height: 100vh; + display: flex; + flex-direction: column; + background: var(--bg-dark); +} + +.app-header { + padding: 2rem 3rem; + background: rgba(255, 255, 255, 0.02); + border-bottom: 1px solid var(--border-color); +} + +.app-title { + margin: 0; + font-size: 2rem; + font-weight: 700; + background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.app-content { + flex: 1; + padding: 2rem 3rem; + overflow-y: auto; +} \ No newline at end of file diff --git a/src/components/AppContainer.tsx b/src/components/AppContainer.tsx new file mode 100644 index 0000000..f6d0736 --- /dev/null +++ b/src/components/AppContainer.tsx @@ -0,0 +1,18 @@ +import type { ReactNode } from 'react'; +import './AppContainer.css'; + +interface AppContainerProps { + title: string; + children: ReactNode; +} + +export default function AppContainer({ title, children }: AppContainerProps) { + return ( +
+
+

{title}

+
+
{children}
+
+ ); +} diff --git a/src/components/Sidebar.css b/src/components/Sidebar.css new file mode 100644 index 0000000..1b3f420 --- /dev/null +++ b/src/components/Sidebar.css @@ -0,0 +1,92 @@ +.sidebar { + width: 280px; + height: 100vh; + background: var(--bg-darker); + border-right: 1px solid var(--border-color); + display: flex; + flex-direction: column; + padding: 2rem 0; + box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5); +} + +.sidebar-header { + padding: 0 1.5rem 2rem; + border-bottom: 1px solid var(--border-color); +} + +.sidebar-logo { + font-size: 1.75rem; + font-weight: 700; + margin: 0; + background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.sidebar-tagline { + margin: 0.25rem 0 0; + font-size: 0.875rem; + color: rgba(255, 255, 255, 0.5); + font-weight: 300; +} + +.sidebar-nav { + flex: 1; + padding: 2rem 1rem; + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.nav-item { + display: flex; + align-items: center; + gap: 1rem; + padding: 1rem 1.25rem; + background: transparent; + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 12px; + color: rgba(255, 255, 255, 0.7); + cursor: pointer; + transition: all 0.3s ease; + font-size: 1rem; + text-align: left; +} + +.nav-item:hover { + background: rgba(255, 255, 255, 0.05); + border-color: var(--primary); + color: rgba(255, 255, 255, 0.9); + transform: translateX(4px); +} + +.nav-item.active { + background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%); + border-color: var(--primary); + color: #fff; + box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3); +} + +.nav-icon { + font-size: 1.5rem; + line-height: 1; +} + +.nav-name { + font-weight: 500; +} + +.sidebar-footer { + padding: 0 1.5rem; + border-top: 1px solid rgba(255, 255, 255, 0.1); + padding-top: 1.5rem; +} + +.footer-text { + margin: 0; + font-size: 0.75rem; + color: rgba(255, 255, 255, 0.4); + text-align: center; + font-style: italic; +} \ No newline at end of file diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx new file mode 100644 index 0000000..db14469 --- /dev/null +++ b/src/components/Sidebar.tsx @@ -0,0 +1,59 @@ +import './Sidebar.css'; + +export type AppId = 'image-approx' | 'snake-ai'; + +export interface AppInfo { + id: AppId; + name: string; + icon: string; + description: string; +} + +export const APPS: AppInfo[] = [ + { + id: 'image-approx', + name: 'Image Approximation', + icon: '🎨', + description: 'Evolve triangles to approximate images', + }, + { + id: 'snake-ai', + name: 'Neural Network Snake', + icon: '🐍', + description: 'Evolve neural networks to play Snake', + }, +]; + +interface SidebarProps { + currentApp: AppId; + onAppChange: (appId: AppId) => void; +} + +export default function Sidebar({ currentApp, onAppChange }: SidebarProps) { + return ( + + ); +} diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..57b3d0a --- /dev/null +++ b/src/index.css @@ -0,0 +1,55 @@ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); + +:root { + /* Color palette - lighter, less dark */ + --primary: #6366f1; + --primary-dark: #4f46e5; + --primary-light: #818cf8; + --accent: #8b5cf6; + --bg-dark: #1a1a2e; + --bg-darker: #0f1729; + --bg-card: rgba(255, 255, 255, 0.05); + --text-primary: rgba(255, 255, 255, 0.95); + --text-secondary: rgba(255, 255, 255, 0.7); + --text-muted: rgba(255, 255, 255, 0.5); + --border-color: rgba(255, 255, 255, 0.12); + + /* Typography */ + font-family: 'Inter', system-ui, -apple-system, sans-serif; + line-height: 1.6; + font-weight: 400; + color: var(--text-primary); + + /* Rendering */ + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + margin: 0; + background: var(--bg-dark); + color: var(--text-primary); + overflow: hidden; +} + +#root { + width: 100vw; + height: 100vh; +} + +button { + font-family: inherit; + cursor: pointer; +} + +input { + font-family: inherit; +} \ No newline at end of file diff --git a/src/lib/imageApprox/evolution.ts b/src/lib/imageApprox/evolution.ts new file mode 100644 index 0000000..89ad516 --- /dev/null +++ b/src/lib/imageApprox/evolution.ts @@ -0,0 +1,61 @@ +import type { Genome } from './genome'; +import { mutateGenome } from './mutation'; +import { renderGenome } from './renderer'; +import { calculateFitness } from './fitness'; + +export interface EvolutionConfig { + width: number; + height: number; + mutationStrength: number; + childrenCount: number; + sampleStep: number; +} + +export interface EvolutionResult { + genome: Genome; + fitness: number; + improved: boolean; +} + +export function evolve( + parent: Genome, + parentFitness: number, + targetData: ImageData, + config: EvolutionConfig, + offscreenCanvas: HTMLCanvasElement +): EvolutionResult { + const ctx = offscreenCanvas.getContext('2d'); + if (!ctx) { + return { genome: parent, fitness: parentFitness, improved: false }; + } + + let bestGenome = parent; + let bestFitness = parentFitness; + let improved = false; + + // Generate and evaluate λ (lambda) children + for (let i = 0; i < config.childrenCount; i++) { + const child = mutateGenome( + parent, + config.mutationStrength, + config.width, + config.height + ); + + // Render child to offscreen canvas + renderGenome(ctx, child, config.width, config.height); + const childData = ctx.getImageData(0, 0, config.width, config.height); + + // Evaluate fitness + const childFitness = calculateFitness(targetData, childData, config.sampleStep); + + // Keep if better (lower error) + if (childFitness < bestFitness) { + bestGenome = child; + bestFitness = childFitness; + improved = true; + } + } + + return { genome: bestGenome, fitness: bestFitness, improved }; +} diff --git a/src/lib/imageApprox/fitness.ts b/src/lib/imageApprox/fitness.ts new file mode 100644 index 0000000..4b4ea64 --- /dev/null +++ b/src/lib/imageApprox/fitness.ts @@ -0,0 +1,29 @@ +/** + * Calculate fitness using mean squared error on RGB channels + * @param targetData - ImageData from target image + * @param candidateData - ImageData from candidate genome + * @param sampleStep - Sample every N pixels for performance (1 = sample all) + * @returns Fitness score (lower is better) + */ +export function calculateFitness( + targetData: ImageData, + candidateData: ImageData, + sampleStep: number = 1 +): number { + const target = targetData.data; + const candidate = candidateData.data; + + let totalError = 0; + let sampleCount = 0; + + for (let i = 0; i < target.length; i += 4 * sampleStep) { + const rDiff = target[i] - candidate[i]; + const gDiff = target[i + 1] - candidate[i + 1]; + const bDiff = target[i + 2] - candidate[i + 2]; + + totalError += rDiff * rDiff + gDiff * gDiff + bDiff * bDiff; + sampleCount++; + } + + return totalError / sampleCount; +} diff --git a/src/lib/imageApprox/genome.ts b/src/lib/imageApprox/genome.ts new file mode 100644 index 0000000..78a5f27 --- /dev/null +++ b/src/lib/imageApprox/genome.ts @@ -0,0 +1,43 @@ +export interface Triangle { + x1: number; + y1: number; + x2: number; + y2: number; + x3: number; + y3: number; + r: number; + g: number; + b: number; + a: number; +} + +export type Genome = Triangle[]; + +export function createRandomGenome( + width: number, + height: number, + count: number +): Genome { + const genome: Genome = []; + + for (let i = 0; i < count; i++) { + genome.push({ + x1: Math.random() * width, + y1: Math.random() * height, + x2: Math.random() * width, + y2: Math.random() * height, + x3: Math.random() * width, + y3: Math.random() * height, + r: Math.floor(Math.random() * 256), + g: Math.floor(Math.random() * 256), + b: Math.floor(Math.random() * 256), + a: Math.random(), + }); + } + + return genome; +} + +export function cloneGenome(genome: Genome): Genome { + return genome.map((triangle) => ({ ...triangle })); +} diff --git a/src/lib/imageApprox/mutation.ts b/src/lib/imageApprox/mutation.ts new file mode 100644 index 0000000..1bb43c5 --- /dev/null +++ b/src/lib/imageApprox/mutation.ts @@ -0,0 +1,85 @@ +import type { Genome, Triangle } from './genome'; +import { cloneGenome } from './genome'; + +function clamp(value: number, min: number, max: number): number { + return Math.max(min, Math.min(max, value)); +} + +function mutateTriangle( + triangle: Triangle, + strength: number, + width: number, + height: number +): Triangle { + const mutated = { ...triangle }; + + // Occasionally replace entire triangle (15% chance - increased from 10%) + if (Math.random() < 0.15) { + return { + x1: Math.random() * width, + y1: Math.random() * height, + x2: Math.random() * width, + y2: Math.random() * height, + x3: Math.random() * width, + y3: Math.random() * height, + r: Math.floor(Math.random() * 256), + g: Math.floor(Math.random() * 256), + b: Math.floor(Math.random() * 256), + a: Math.random(), + }; + } + + // Otherwise, perturb existing values + const mutationType = Math.random(); + + if (mutationType < 0.5) { + // Mutate vertex positions - allow bigger jumps + const vertexChoice = Math.floor(Math.random() * 3); + // Occasional large jump (20% of the time) + const multiplier = Math.random() < 0.2 ? 30 : 15; + const delta = (Math.random() - 0.5) * 2 * strength * multiplier; + + if (vertexChoice === 0) { + mutated.x1 = clamp(mutated.x1 + delta, 0, width); + mutated.y1 = clamp(mutated.y1 + delta, 0, height); + } else if (vertexChoice === 1) { + mutated.x2 = clamp(mutated.x2 + delta, 0, width); + mutated.y2 = clamp(mutated.y2 + delta, 0, height); + } else { + mutated.x3 = clamp(mutated.x3 + delta, 0, width); + mutated.y3 = clamp(mutated.y3 + delta, 0, height); + } + } else { + // Mutate color/alpha - more aggressive + const colorMultiplier = Math.random() < 0.2 ? 100 : 50; + const colorDelta = (Math.random() - 0.5) * 2 * strength * colorMultiplier; + const colorChoice = Math.floor(Math.random() * 4); + + if (colorChoice === 0) { + mutated.r = clamp(Math.floor(mutated.r + colorDelta), 0, 255); + } else if (colorChoice === 1) { + mutated.g = clamp(Math.floor(mutated.g + colorDelta), 0, 255); + } else if (colorChoice === 2) { + mutated.b = clamp(Math.floor(mutated.b + colorDelta), 0, 255); + } else { + mutated.a = clamp(mutated.a + (Math.random() - 0.5) * 2 * strength * 0.3, 0, 1); + } + } + + return mutated; +} + +export function mutateGenome( + genome: Genome, + strength: number, + width: number, + height: number +): Genome { + const mutated = cloneGenome(genome); + + // Randomly select one triangle to mutate + const index = Math.floor(Math.random() * mutated.length); + mutated[index] = mutateTriangle(mutated[index], strength, width, height); + + return mutated; +} diff --git a/src/lib/imageApprox/renderer.ts b/src/lib/imageApprox/renderer.ts new file mode 100644 index 0000000..1bf4482 --- /dev/null +++ b/src/lib/imageApprox/renderer.ts @@ -0,0 +1,24 @@ +import type { Genome } from './genome'; + +export function renderGenome( + ctx: CanvasRenderingContext2D, + genome: Genome, + width: number, + height: number +): void { + // Clear canvas + ctx.fillStyle = '#000'; + ctx.fillRect(0, 0, width, height); + + // Draw each triangle + for (const triangle of genome) { + ctx.beginPath(); + ctx.moveTo(triangle.x1, triangle.y1); + ctx.lineTo(triangle.x2, triangle.y2); + ctx.lineTo(triangle.x3, triangle.y3); + ctx.closePath(); + + ctx.fillStyle = `rgba(${triangle.r}, ${triangle.g}, ${triangle.b}, ${triangle.a})`; + ctx.fill(); + } +} diff --git a/src/lib/snakeAI/evolution.ts b/src/lib/snakeAI/evolution.ts new file mode 100644 index 0000000..e248897 --- /dev/null +++ b/src/lib/snakeAI/evolution.ts @@ -0,0 +1,234 @@ +import { createNetwork, cloneNetwork, getAction, type Network } from './network'; +import { createGame, step, getInputs, calculateFitness, type GameState } from './game'; +import type { EvolutionConfig } from './types'; + +export interface Individual { + network: Network; + fitness: number; + game: GameState; +} + +export interface Population { + individuals: Individual[]; + generation: number; + bestFitnessEver: number; + bestNetworkEver: Network | null; +} + +export function createPopulation(config: EvolutionConfig): Population { + const individuals: Individual[] = []; + + for (let i = 0; i < config.populationSize; i++) { + individuals.push({ + network: createNetwork(), + fitness: 0, + game: createGame(config.gridSize), + }); + } + + return { + individuals, + generation: 1, + bestFitnessEver: 0, + bestNetworkEver: null, + }; +} + +export function evaluatePopulation( + population: Population, + config: EvolutionConfig +): Population { + // Create a working copy of individuals to avoid mutating state + const evaluatedIndividuals = population.individuals.map(ind => ({ ...ind })); + + // Play each individual's game to completion or max steps + for (const individual of evaluatedIndividuals) { + let game = individual.game; + + while (game.alive && game.steps < config.maxGameSteps) { + const inputs = getInputs(game); + const action = getAction(individual.network, inputs); + game = step(game, action); + } + + individual.game = game; + individual.fitness = calculateFitness(game); + } + + // Update best ever + let newBestEver = population.bestFitnessEver; + let newBestNetwork = population.bestNetworkEver; + + for (const individual of evaluatedIndividuals) { + if (individual.fitness > newBestEver) { + newBestEver = individual.fitness; + newBestNetwork = cloneNetwork(individual.network); + } + } + + return { + ...population, + individuals: evaluatedIndividuals, + bestFitnessEver: newBestEver, + bestNetworkEver: newBestNetwork, + }; +} + +export function evolveGeneration( + population: Population, + config: EvolutionConfig +): Population { + // Sort by fitness (descending) + const sorted = [...population.individuals].sort((a, b) => b.fitness - a.fitness); + + const newIndividuals: Individual[] = []; + + // Elite preservation (top performers survive unchanged) + for (let i = 0; i < config.eliteCount; i++) { + newIndividuals.push({ + network: cloneNetwork(sorted[i].network), + fitness: 0, + game: createGame(config.gridSize), + }); + } + + // Fill rest with offspring + while (newIndividuals.length < config.populationSize) { + const parent1 = selectParent(sorted); + const parent2 = selectParent(sorted); + + let childNetwork: Network; + + if (Math.random() < 0.7) { + // 70% chance of crossover + childNetwork = crossover(parent1.network, parent2.network); + } else { + // 30% chance of just cloning + childNetwork = cloneNetwork(parent1.network); + } + + // Mutate + childNetwork = mutate(childNetwork, config.mutationRate); + + newIndividuals.push({ + network: childNetwork, + fitness: 0, + game: createGame(config.gridSize), + }); + } + + return { + individuals: newIndividuals, + generation: population.generation + 1, + bestFitnessEver: population.bestFitnessEver, + bestNetworkEver: population.bestNetworkEver, + }; +} + +function selectParent(sorted: Individual[]): Individual { + // Tournament selection: pick best of 3 random individuals + const tournamentSize = 3; + let best = sorted[Math.floor(Math.random() * Math.min(sorted.length, 20))]; + + for (let i = 1; i < tournamentSize; i++) { + const competitor = sorted[Math.floor(Math.random() * Math.min(sorted.length, 20))]; + if (competitor.fitness > best.fitness) { + best = competitor; + } + } + + return best; +} + +function crossover(parent1: Network, parent2: Network): Network { + const child = cloneNetwork(parent1); + + // Single-point crossover on weights and biases + const crossoverRate = 0.5; + + // Crossover input-hidden weights + for (let i = 0; i < child.weightsIH.length; i++) { + for (let j = 0; j < child.weightsIH[i].length; j++) { + if (Math.random() < crossoverRate) { + child.weightsIH[i][j] = parent2.weightsIH[i][j]; + } + } + } + + // Crossover hidden-output weights + for (let i = 0; i < child.weightsHO.length; i++) { + for (let j = 0; j < child.weightsHO[i].length; j++) { + if (Math.random() < crossoverRate) { + child.weightsHO[i][j] = parent2.weightsHO[i][j]; + } + } + } + + // Crossover biases + for (let i = 0; i < child.biasH.length; i++) { + if (Math.random() < crossoverRate) { + child.biasH[i] = parent2.biasH[i]; + } + } + + for (let i = 0; i < child.biasO.length; i++) { + if (Math.random() < crossoverRate) { + child.biasO[i] = parent2.biasO[i]; + } + } + + return child; +} + +function mutate(network: Network, mutationRate: number): Network { + const mutated = cloneNetwork(network); + + // Mutate input-hidden weights + for (let i = 0; i < mutated.weightsIH.length; i++) { + for (let j = 0; j < mutated.weightsIH[i].length; j++) { + if (Math.random() < mutationRate) { + mutated.weightsIH[i][j] += (Math.random() * 2 - 1) * 0.5; + // Clamp to reasonable range + mutated.weightsIH[i][j] = Math.max(-2, Math.min(2, mutated.weightsIH[i][j])); + } + } + } + + // Mutate hidden-output weights + for (let i = 0; i < mutated.weightsHO.length; i++) { + for (let j = 0; j < mutated.weightsHO[i].length; j++) { + if (Math.random() < mutationRate) { + mutated.weightsHO[i][j] += (Math.random() * 2 - 1) * 0.5; + mutated.weightsHO[i][j] = Math.max(-2, Math.min(2, mutated.weightsHO[i][j])); + } + } + } + + // Mutate biases + for (let i = 0; i < mutated.biasH.length; i++) { + if (Math.random() < mutationRate) { + mutated.biasH[i] += (Math.random() * 2 - 1) * 0.5; + mutated.biasH[i] = Math.max(-2, Math.min(2, mutated.biasH[i])); + } + } + + for (let i = 0; i < mutated.biasO.length; i++) { + if (Math.random() < mutationRate) { + mutated.biasO[i] += (Math.random() * 2 - 1) * 0.5; + mutated.biasO[i] = Math.max(-2, Math.min(2, mutated.biasO[i])); + } + } + + return mutated; +} + +export function getBestIndividual(population: Population): Individual { + return population.individuals.reduce((best, current) => + current.fitness > best.fitness ? current : best + ); +} + +export function getAverageFitness(population: Population): number { + const sum = population.individuals.reduce((acc, ind) => acc + ind.fitness, 0); + return sum / population.individuals.length; +} diff --git a/src/lib/snakeAI/game.ts b/src/lib/snakeAI/game.ts new file mode 100644 index 0000000..8c75cc8 --- /dev/null +++ b/src/lib/snakeAI/game.ts @@ -0,0 +1,179 @@ +import { Direction, Action, type Position } from './types'; + +export interface GameState { + snake: Position[]; + food: Position; + direction: Direction; + score: number; + steps: number; + stepsSinceLastFood: number; + alive: boolean; + gridSize: number; +} + +export function createGame(gridSize: number = 20): GameState { + const center = Math.floor(gridSize / 2); + return { + snake: [ + { x: center, y: center }, + { x: center - 1, y: center }, + { x: center - 2, y: center }, + ], + food: spawnFood(gridSize, [ + { x: center, y: center }, + { x: center - 1, y: center }, + { x: center - 2, y: center }, + ]), + direction: Direction.RIGHT, + score: 0, + steps: 0, + stepsSinceLastFood: 0, + alive: true, + gridSize, + }; +} + +export function step(state: GameState, action: Action): GameState { + if (!state.alive) return state; + + const STARVATION_LIMIT = 200; // Die if no food for 200 steps + + // Update direction based on action (turn left/right or go straight) + const newDirection = (state.direction + action + 4) % 4; + + // Calculate new head position + const head = state.snake[0]; + let newHead: Position; + + switch (newDirection) { + case Direction.UP: + newHead = { x: head.x, y: head.y - 1 }; + break; + case Direction.DOWN: + newHead = { x: head.x, y: head.y + 1 }; + break; + case Direction.LEFT: + newHead = { x: head.x - 1, y: head.y }; + break; + case Direction.RIGHT: + newHead = { x: head.x + 1, y: head.y }; + break; + default: + newHead = head; + } + + // Check wall collision + if ( + newHead.x < 0 || + newHead.x >= state.gridSize || + newHead.y < 0 || + newHead.y >= state.gridSize + ) { + return { ...state, alive: false, steps: state.steps + 1, stepsSinceLastFood: state.stepsSinceLastFood + 1 }; + } + + // Check self-collision + if (state.snake.some((seg) => seg.x === newHead.x && seg.y === newHead.y)) { + return { ...state, alive: false, steps: state.steps + 1, stepsSinceLastFood: state.stepsSinceLastFood + 1 }; + } + + // Check starvation (no food for too long) + if (state.stepsSinceLastFood >= STARVATION_LIMIT) { + return { ...state, alive: false, steps: state.steps + 1, stepsSinceLastFood: state.stepsSinceLastFood + 1 }; + } + + // Create new snake body + const newSnake = [newHead, ...state.snake]; + + // Check if food was eaten + const ateFood = newHead.x === state.food.x && newHead.y === state.food.y; + + if (ateFood) { + // Grow snake, spawn new food, reset starvation counter + return { + ...state, + snake: newSnake, + food: spawnFood(state.gridSize, newSnake), + direction: newDirection, + score: state.score + 1, + steps: state.steps + 1, + stepsSinceLastFood: 0, + }; + } else { + // Remove tail (no growth), increment starvation counter + newSnake.pop(); + return { + ...state, + snake: newSnake, + direction: newDirection, + steps: state.steps + 1, + stepsSinceLastFood: state.stepsSinceLastFood + 1, + }; + } +} + +function spawnFood(gridSize: number, snake: Position[]): Position { + let food: Position; + let attempts = 0; + const maxAttempts = 1000; + + do { + food = { + x: Math.floor(Math.random() * gridSize), + y: Math.floor(Math.random() * gridSize), + }; + attempts++; + } while ( + attempts < maxAttempts && + snake.some((seg) => seg.x === food.x && seg.y === food.y) + ); + + return food; +} + +export function getInputs(state: GameState): number[] { + const head = state.snake[0]; + const food = state.food; + + // 8 inputs for the neural network: + // 4 food direction indicators (normalized -1 to 1) + const foodDirX = (food.x - head.x) / state.gridSize; + const foodDirY = (food.y - head.y) / state.gridSize; + + // 4 danger sensors (1 if danger, 0 if safe) + const dangerUp = isDanger(state, head.x, head.y - 1); + const dangerDown = isDanger(state, head.x, head.y + 1); + const dangerLeft = isDanger(state, head.x - 1, head.y); + const dangerRight = isDanger(state, head.x + 1, head.y); + + return [ + foodDirX, + foodDirY, + dangerUp ? 1 : 0, + dangerDown ? 1 : 0, + dangerLeft ? 1 : 0, + dangerRight ? 1 : 0, + state.direction / 3, // Normalized direction + state.snake.length / (state.gridSize * state.gridSize), // Normalized length + ]; +} + +function isDanger(state: GameState, x: number, y: number): boolean { + // Check wall + if (x < 0 || x >= state.gridSize || y < 0 || y >= state.gridSize) { + return true; + } + // Check self-collision + return state.snake.some((seg) => seg.x === x && seg.y === y); +} + +export function calculateFitness(state: GameState): number { + // Fitness formula balancing food collection and survival + const foodScore = state.score * 100; + const survivalScore = state.steps; + + // Bonus for longer snakes + const lengthBonus = state.snake.length * 10; + + return foodScore + survivalScore + lengthBonus; +} diff --git a/src/lib/snakeAI/network.ts b/src/lib/snakeAI/network.ts new file mode 100644 index 0000000..119288b --- /dev/null +++ b/src/lib/snakeAI/network.ts @@ -0,0 +1,110 @@ +import { Action } from './types'; + +export interface Network { + inputSize: number; + hiddenSize: number; + outputSize: number; + weightsIH: number[][]; // Input to Hidden weights + weightsHO: number[][]; // Hidden to Output weights + biasH: number[]; // Hidden layer biases + biasO: number[]; // Output layer biases +} + +export function createNetwork( + inputSize: number = 8, + hiddenSize: number = 12, + outputSize: number = 3 +): Network { + return { + inputSize, + hiddenSize, + outputSize, + weightsIH: createRandomMatrix(inputSize, hiddenSize), + weightsHO: createRandomMatrix(hiddenSize, outputSize), + biasH: createRandomArray(hiddenSize), + biasO: createRandomArray(outputSize), + }; +} + +function createRandomMatrix(rows: number, cols: number): number[][] { + const matrix: number[][] = []; + for (let i = 0; i < rows; i++) { + matrix[i] = []; + for (let j = 0; j < cols; j++) { + matrix[i][j] = Math.random() * 2 - 1; // Random between -1 and 1 + } + } + return matrix; +} + +function createRandomArray(size: number): number[] { + const array: number[] = []; + for (let i = 0; i < size; i++) { + array[i] = Math.random() * 2 - 1; + } + return array; +} + +export function forward(network: Network, inputs: number[]): number[] { + // Hidden layer activation + const hidden: number[] = []; + for (let h = 0; h < network.hiddenSize; h++) { + let sum = network.biasH[h]; + for (let i = 0; i < network.inputSize; i++) { + sum += inputs[i] * network.weightsIH[i][h]; + } + hidden[h] = tanh(sum); + } + + // Output layer activation + const outputs: number[] = []; + for (let o = 0; o < network.outputSize; o++) { + let sum = network.biasO[o]; + for (let h = 0; h < network.hiddenSize; h++) { + sum += hidden[h] * network.weightsHO[h][o]; + } + outputs[o] = tanh(sum); + } + + return outputs; +} + +function tanh(x: number): number { + return Math.tanh(x); +} + +export function getAction(network: Network, inputs: number[]): Action { + const outputs = forward(network, inputs); + + // Find index of maximum output + let maxIndex = 0; + for (let i = 1; i < outputs.length; i++) { + if (outputs[i] > outputs[maxIndex]) { + maxIndex = i; + } + } + + // Map output index to action + switch (maxIndex) { + case 0: + return Action.TURN_LEFT; + case 1: + return Action.STRAIGHT; + case 2: + return Action.TURN_RIGHT; + default: + return Action.STRAIGHT; + } +} + +export function cloneNetwork(network: Network): Network { + return { + inputSize: network.inputSize, + hiddenSize: network.hiddenSize, + outputSize: network.outputSize, + weightsIH: network.weightsIH.map((row) => [...row]), + weightsHO: network.weightsHO.map((row) => [...row]), + biasH: [...network.biasH], + biasO: [...network.biasO], + }; +} diff --git a/src/lib/snakeAI/types.ts b/src/lib/snakeAI/types.ts new file mode 100644 index 0000000..3c04be4 --- /dev/null +++ b/src/lib/snakeAI/types.ts @@ -0,0 +1,29 @@ +export type Direction = 0 | 1 | 2 | 3; + +export const Direction = { + UP: 0 as Direction, + RIGHT: 1 as Direction, + DOWN: 2 as Direction, + LEFT: 3 as Direction, +}; + +export type Action = -1 | 0 | 1; + +export const Action = { + TURN_LEFT: -1 as Action, + STRAIGHT: 0 as Action, + TURN_RIGHT: 1 as Action, +}; + +export interface Position { + x: number; + y: number; +} + +export interface EvolutionConfig { + populationSize: number; + mutationRate: number; + eliteCount: number; + gridSize: number; + maxGameSteps: number; +} diff --git a/src/main.tsx b/src/main.tsx new file mode 100644 index 0000000..bef5202 --- /dev/null +++ b/src/main.tsx @@ -0,0 +1,10 @@ +import { StrictMode } from 'react' +import { createRoot } from 'react-dom/client' +import './index.css' +import App from './App.tsx' + +createRoot(document.getElementById('root')!).render( + + + , +) diff --git a/tsconfig.app.json b/tsconfig.app.json new file mode 100644 index 0000000..a9b5a59 --- /dev/null +++ b/tsconfig.app.json @@ -0,0 +1,28 @@ +{ + "compilerOptions": { + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", + "target": "ES2022", + "useDefineForClassFields": true, + "lib": ["ES2022", "DOM", "DOM.Iterable"], + "module": "ESNext", + "types": ["vite/client"], + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "verbatimModuleSyntax": true, + "moduleDetection": "force", + "noEmit": true, + "jsx": "react-jsx", + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "erasableSyntaxOnly": true, + "noFallthroughCasesInSwitch": true, + "noUncheckedSideEffectImports": true + }, + "include": ["src"] +} diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..1ffef60 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,7 @@ +{ + "files": [], + "references": [ + { "path": "./tsconfig.app.json" }, + { "path": "./tsconfig.node.json" } + ] +} diff --git a/tsconfig.node.json b/tsconfig.node.json new file mode 100644 index 0000000..8a67f62 --- /dev/null +++ b/tsconfig.node.json @@ -0,0 +1,26 @@ +{ + "compilerOptions": { + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", + "target": "ES2023", + "lib": ["ES2023"], + "module": "ESNext", + "types": ["node"], + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "verbatimModuleSyntax": true, + "moduleDetection": "force", + "noEmit": true, + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "erasableSyntaxOnly": true, + "noFallthroughCasesInSwitch": true, + "noUncheckedSideEffectImports": true + }, + "include": ["vite.config.ts"] +} diff --git a/vite.config.ts b/vite.config.ts new file mode 100644 index 0000000..8b0f57b --- /dev/null +++ b/vite.config.ts @@ -0,0 +1,7 @@ +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' + +// https://vite.dev/config/ +export default defineConfig({ + plugins: [react()], +})