diff --git a/package.json b/package.json index eaca27e..105e4c2 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,10 @@ "@heroicons/react": "^2.0.18", "@popperjs/core": "^2.11.8", "@tensorflow/tfjs": "^4.7.0", + "axios": "^1.4.0", "clsx": "^1.2.1", + "d3": "^7.8.5", + "express": "^4.18.2", "formik": "^2.4.0", "framer-motion": "^10.12.12", "lodash": "^4.17.21", @@ -33,7 +36,8 @@ "react-dropzone": "^14.2.3", "react-popper": "^2.3.0", "react-timer-hook": "^3.0.6", - "tone": "^14.8.49" + "tone": "^14.8.49", + "use-timer": "^2.0.1" }, "devDependencies": { "@commitlint/cli": "^17.6.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7235550..92ab557 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -31,9 +31,18 @@ dependencies: "@tensorflow/tfjs": specifier: ^4.7.0 version: 4.7.0(seedrandom@3.0.5) + axios: + specifier: ^1.4.0 + version: 1.4.0 clsx: specifier: ^1.2.1 version: 1.2.1 + d3: + specifier: ^7.8.5 + version: 7.8.5 + express: + specifier: ^4.18.2 + version: 4.18.2 formik: specifier: ^2.4.0 version: 2.4.0(react@18.2.0) @@ -67,6 +76,9 @@ dependencies: tone: specifier: ^14.8.49 version: 14.8.49 + use-timer: + specifier: ^2.0.1 + version: 2.0.1(react-dom@18.2.0)(react@18.2.0) devDependencies: "@commitlint/cli": @@ -1871,6 +1883,17 @@ packages: through: 2.3.8 dev: true + /accepts@1.3.8: + resolution: + { + integrity: sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==, + } + engines: { node: ">= 0.6" } + dependencies: + mime-types: 2.1.35 + negotiator: 0.6.3 + dev: false + /acorn-jsx@5.3.2(acorn@8.8.2): resolution: { @@ -2099,6 +2122,13 @@ packages: is-array-buffer: 3.0.2 dev: true + /array-flatten@1.1.1: + resolution: + { + integrity: sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==, + } + dev: false + /array-ify@1.0.0: resolution: { @@ -2259,6 +2289,19 @@ packages: engines: { node: ">=4" } dev: true + /axios@1.4.0: + resolution: + { + integrity: sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==, + } + dependencies: + follow-redirects: 1.15.2 + form-data: 4.0.0 + proxy-from-env: 1.1.0 + transitivePeerDependencies: + - debug + dev: false + /axobject-query@3.1.1: resolution: { @@ -2308,6 +2351,29 @@ packages: readable-stream: 3.6.2 dev: true + /body-parser@1.20.1: + resolution: + { + integrity: sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==, + } + engines: { node: ">= 0.8", npm: 1.2.8000 || >= 1.4.16 } + dependencies: + bytes: 3.1.2 + content-type: 1.0.5 + debug: 2.6.9 + depd: 2.0.0 + destroy: 1.2.0 + http-errors: 2.0.0 + iconv-lite: 0.4.24 + on-finished: 2.4.1 + qs: 6.11.0 + raw-body: 2.5.1 + type-is: 1.6.18 + unpipe: 1.0.0 + transitivePeerDependencies: + - supports-color + dev: false + /bottleneck@2.19.5: resolution: { @@ -2368,6 +2434,14 @@ packages: streamsearch: 1.1.0 dev: false + /bytes@3.1.2: + resolution: + { + integrity: sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==, + } + engines: { node: ">= 0.8" } + dev: false + /cachedir@2.3.0: resolution: { @@ -2384,7 +2458,6 @@ packages: dependencies: function-bind: 1.1.1 get-intrinsic: 1.2.0 - dev: true /callsites@3.1.0: resolution: @@ -2679,6 +2752,14 @@ packages: engines: { node: ">= 6" } dev: true + /commander@7.2.0: + resolution: + { + integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==, + } + engines: { node: ">= 10" } + dev: false + /commitizen@4.3.0: resolution: { @@ -2733,6 +2814,24 @@ packages: proto-list: 1.2.4 dev: true + /content-disposition@0.5.4: + resolution: + { + integrity: sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==, + } + engines: { node: ">= 0.6" } + dependencies: + safe-buffer: 5.2.1 + dev: false + + /content-type@1.0.5: + resolution: + { + integrity: sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==, + } + engines: { node: ">= 0.6" } + dev: false + /conventional-changelog-angular@5.0.13: resolution: { @@ -2815,6 +2914,21 @@ packages: integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==, } + /cookie-signature@1.0.6: + resolution: + { + integrity: sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==, + } + dev: false + + /cookie@0.5.0: + resolution: + { + integrity: sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==, + } + engines: { node: ">= 0.6" } + dev: false + /core-js@3.29.1: resolution: { @@ -2926,6 +3040,347 @@ packages: - "@swc/wasm" dev: true + /d3-array@3.2.4: + resolution: + { + integrity: sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==, + } + engines: { node: ">=12" } + dependencies: + internmap: 2.0.3 + dev: false + + /d3-axis@3.0.0: + resolution: + { + integrity: sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==, + } + engines: { node: ">=12" } + dev: false + + /d3-brush@3.0.0: + resolution: + { + integrity: sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==, + } + engines: { node: ">=12" } + dependencies: + d3-dispatch: 3.0.1 + d3-drag: 3.0.0 + d3-interpolate: 3.0.1 + d3-selection: 3.0.0 + d3-transition: 3.0.1(d3-selection@3.0.0) + dev: false + + /d3-chord@3.0.1: + resolution: + { + integrity: sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==, + } + engines: { node: ">=12" } + dependencies: + d3-path: 3.1.0 + dev: false + + /d3-color@3.1.0: + resolution: + { + integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==, + } + engines: { node: ">=12" } + dev: false + + /d3-contour@4.0.2: + resolution: + { + integrity: sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==, + } + engines: { node: ">=12" } + dependencies: + d3-array: 3.2.4 + dev: false + + /d3-delaunay@6.0.4: + resolution: + { + integrity: sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==, + } + engines: { node: ">=12" } + dependencies: + delaunator: 5.0.0 + dev: false + + /d3-dispatch@3.0.1: + resolution: + { + integrity: sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==, + } + engines: { node: ">=12" } + dev: false + + /d3-drag@3.0.0: + resolution: + { + integrity: sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==, + } + engines: { node: ">=12" } + dependencies: + d3-dispatch: 3.0.1 + d3-selection: 3.0.0 + dev: false + + /d3-dsv@3.0.1: + resolution: + { + integrity: sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==, + } + engines: { node: ">=12" } + hasBin: true + dependencies: + commander: 7.2.0 + iconv-lite: 0.6.3 + rw: 1.3.3 + dev: false + + /d3-ease@3.0.1: + resolution: + { + integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==, + } + engines: { node: ">=12" } + dev: false + + /d3-fetch@3.0.1: + resolution: + { + integrity: sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==, + } + engines: { node: ">=12" } + dependencies: + d3-dsv: 3.0.1 + dev: false + + /d3-force@3.0.0: + resolution: + { + integrity: sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==, + } + engines: { node: ">=12" } + dependencies: + d3-dispatch: 3.0.1 + d3-quadtree: 3.0.1 + d3-timer: 3.0.1 + dev: false + + /d3-format@3.1.0: + resolution: + { + integrity: sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==, + } + engines: { node: ">=12" } + dev: false + + /d3-geo@3.1.0: + resolution: + { + integrity: sha512-JEo5HxXDdDYXCaWdwLRt79y7giK8SbhZJbFWXqbRTolCHFI5jRqteLzCsq51NKbUoX0PjBVSohxrx+NoOUujYA==, + } + engines: { node: ">=12" } + dependencies: + d3-array: 3.2.4 + dev: false + + /d3-hierarchy@3.1.2: + resolution: + { + integrity: sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==, + } + engines: { node: ">=12" } + dev: false + + /d3-interpolate@3.0.1: + resolution: + { + integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==, + } + engines: { node: ">=12" } + dependencies: + d3-color: 3.1.0 + dev: false + + /d3-path@3.1.0: + resolution: + { + integrity: sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==, + } + engines: { node: ">=12" } + dev: false + + /d3-polygon@3.0.1: + resolution: + { + integrity: sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==, + } + engines: { node: ">=12" } + dev: false + + /d3-quadtree@3.0.1: + resolution: + { + integrity: sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==, + } + engines: { node: ">=12" } + dev: false + + /d3-random@3.0.1: + resolution: + { + integrity: sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==, + } + engines: { node: ">=12" } + dev: false + + /d3-scale-chromatic@3.0.0: + resolution: + { + integrity: sha512-Lx9thtxAKrO2Pq6OO2Ua474opeziKr279P/TKZsMAhYyNDD3EnCffdbgeSYN5O7m2ByQsxtuP2CSDczNUIZ22g==, + } + engines: { node: ">=12" } + dependencies: + d3-color: 3.1.0 + d3-interpolate: 3.0.1 + dev: false + + /d3-scale@4.0.2: + resolution: + { + integrity: sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==, + } + engines: { node: ">=12" } + dependencies: + d3-array: 3.2.4 + d3-format: 3.1.0 + d3-interpolate: 3.0.1 + d3-time: 3.1.0 + d3-time-format: 4.1.0 + dev: false + + /d3-selection@3.0.0: + resolution: + { + integrity: sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==, + } + engines: { node: ">=12" } + dev: false + + /d3-shape@3.2.0: + resolution: + { + integrity: sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==, + } + engines: { node: ">=12" } + dependencies: + d3-path: 3.1.0 + dev: false + + /d3-time-format@4.1.0: + resolution: + { + integrity: sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==, + } + engines: { node: ">=12" } + dependencies: + d3-time: 3.1.0 + dev: false + + /d3-time@3.1.0: + resolution: + { + integrity: sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==, + } + engines: { node: ">=12" } + dependencies: + d3-array: 3.2.4 + dev: false + + /d3-timer@3.0.1: + resolution: + { + integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==, + } + engines: { node: ">=12" } + dev: false + + /d3-transition@3.0.1(d3-selection@3.0.0): + resolution: + { + integrity: sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==, + } + engines: { node: ">=12" } + peerDependencies: + d3-selection: 2 - 3 + dependencies: + d3-color: 3.1.0 + d3-dispatch: 3.0.1 + d3-ease: 3.0.1 + d3-interpolate: 3.0.1 + d3-selection: 3.0.0 + d3-timer: 3.0.1 + dev: false + + /d3-zoom@3.0.0: + resolution: + { + integrity: sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==, + } + engines: { node: ">=12" } + dependencies: + d3-dispatch: 3.0.1 + d3-drag: 3.0.0 + d3-interpolate: 3.0.1 + d3-selection: 3.0.0 + d3-transition: 3.0.1(d3-selection@3.0.0) + dev: false + + /d3@7.8.5: + resolution: + { + integrity: sha512-JgoahDG51ncUfJu6wX/1vWQEqOflgXyl4MaHqlcSruTez7yhaRKR9i8VjjcQGeS2en/jnFivXuaIMnseMMt0XA==, + } + engines: { node: ">=12" } + dependencies: + d3-array: 3.2.4 + d3-axis: 3.0.0 + d3-brush: 3.0.0 + d3-chord: 3.0.1 + d3-color: 3.1.0 + d3-contour: 4.0.2 + d3-delaunay: 6.0.4 + d3-dispatch: 3.0.1 + d3-drag: 3.0.0 + d3-dsv: 3.0.1 + d3-ease: 3.0.1 + d3-fetch: 3.0.1 + d3-force: 3.0.0 + d3-format: 3.1.0 + d3-geo: 3.1.0 + d3-hierarchy: 3.1.2 + d3-interpolate: 3.0.1 + d3-path: 3.1.0 + d3-polygon: 3.0.1 + d3-quadtree: 3.0.1 + d3-random: 3.0.1 + d3-scale: 4.0.2 + d3-scale-chromatic: 3.0.0 + d3-selection: 3.0.0 + d3-shape: 3.2.0 + d3-time: 3.1.0 + d3-time-format: 4.1.0 + d3-timer: 3.0.1 + d3-transition: 3.0.1(d3-selection@3.0.0) + d3-zoom: 3.0.0 + dev: false + /damerau-levenshtein@1.0.8: resolution: { @@ -2948,6 +3403,20 @@ packages: } dev: true + /debug@2.6.9: + resolution: + { + integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==, + } + peerDependencies: + supports-color: "*" + peerDependenciesMeta: + supports-color: + optional: true + dependencies: + ms: 2.0.0 + dev: false + /debug@3.2.7: resolution: { @@ -3079,6 +3548,15 @@ packages: object-keys: 1.1.1 dev: true + /delaunator@5.0.0: + resolution: + { + integrity: sha512-AyLvtyJdbv/U1GkiS6gUUzclRoAY4Gs75qkMygJJhU75LW4DNuSF2RMzpxs9jw9Oz1BobHjTdkG3zdP55VxAqw==, + } + dependencies: + robust-predicates: 3.0.2 + dev: false + /delayed-stream@1.0.0: resolution: { @@ -3087,6 +3565,14 @@ packages: engines: { node: ">=0.4.0" } dev: false + /depd@2.0.0: + resolution: + { + integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==, + } + engines: { node: ">= 0.8" } + dev: false + /deprecation@2.3.1: resolution: { @@ -3094,6 +3580,14 @@ packages: } dev: true + /destroy@1.2.0: + resolution: + { + integrity: sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==, + } + engines: { node: ">= 0.8", npm: 1.2.8000 || >= 1.4.16 } + dev: false + /detect-file@1.0.0: resolution: { @@ -3188,6 +3682,13 @@ packages: } dev: true + /ee-first@1.1.1: + resolution: + { + integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==, + } + dev: false + /electron-to-chromium@1.4.379: resolution: { @@ -3207,6 +3708,14 @@ packages: } dev: true + /encodeurl@1.0.2: + resolution: + { + integrity: sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==, + } + engines: { node: ">= 0.8" } + dev: false + /enhanced-resolve@5.13.0: resolution: { @@ -3338,6 +3847,13 @@ packages: } engines: { node: ">=6" } + /escape-html@1.0.3: + resolution: + { + integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==, + } + dev: false + /escape-string-regexp@1.0.5: resolution: { @@ -3739,6 +4255,14 @@ packages: engines: { node: ">=0.10.0" } dev: true + /etag@1.8.1: + resolution: + { + integrity: sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==, + } + engines: { node: ">= 0.6" } + dev: false + /execa@5.1.1: resolution: { @@ -3785,6 +4309,48 @@ packages: homedir-polyfill: 1.0.3 dev: true + /express@4.18.2: + resolution: + { + integrity: sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==, + } + engines: { node: ">= 0.10.0" } + dependencies: + accepts: 1.3.8 + array-flatten: 1.1.1 + body-parser: 1.20.1 + content-disposition: 0.5.4 + content-type: 1.0.5 + cookie: 0.5.0 + cookie-signature: 1.0.6 + debug: 2.6.9 + depd: 2.0.0 + encodeurl: 1.0.2 + escape-html: 1.0.3 + etag: 1.8.1 + finalhandler: 1.2.0 + fresh: 0.5.2 + http-errors: 2.0.0 + merge-descriptors: 1.0.1 + methods: 1.1.2 + on-finished: 2.4.1 + parseurl: 1.3.3 + path-to-regexp: 0.1.7 + proxy-addr: 2.0.7 + qs: 6.11.0 + range-parser: 1.2.1 + safe-buffer: 5.2.1 + send: 0.18.0 + serve-static: 1.15.0 + setprototypeof: 1.2.0 + statuses: 2.0.1 + type-is: 1.6.18 + utils-merge: 1.0.1 + vary: 1.1.2 + transitivePeerDependencies: + - supports-color + dev: false + /external-editor@3.1.0: resolution: { @@ -3909,6 +4475,24 @@ packages: to-regex-range: 5.0.1 dev: true + /finalhandler@1.2.0: + resolution: + { + integrity: sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==, + } + engines: { node: ">= 0.8" } + dependencies: + debug: 2.6.9 + encodeurl: 1.0.2 + escape-html: 1.0.3 + on-finished: 2.4.1 + parseurl: 1.3.3 + statuses: 2.0.1 + unpipe: 1.0.0 + transitivePeerDependencies: + - supports-color + dev: false + /find-node-modules@2.1.3: resolution: { @@ -4010,6 +4594,19 @@ packages: } dev: true + /follow-redirects@1.15.2: + resolution: + { + integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==, + } + engines: { node: ">=4.0" } + peerDependencies: + debug: "*" + peerDependenciesMeta: + debug: + optional: true + dev: false + /for-each@0.3.3: resolution: { @@ -4031,6 +4628,18 @@ packages: mime-types: 2.1.35 dev: false + /form-data@4.0.0: + resolution: + { + integrity: sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==, + } + engines: { node: ">= 6" } + dependencies: + asynckit: 0.4.0 + combined-stream: 1.0.8 + mime-types: 2.1.35 + dev: false + /formik@2.4.0(react@18.2.0): resolution: { @@ -4049,6 +4658,14 @@ packages: tslib: 1.14.1 dev: false + /forwarded@0.2.0: + resolution: + { + integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==, + } + engines: { node: ">= 0.6" } + dev: false + /fraction.js@4.2.0: resolution: { @@ -4077,6 +4694,14 @@ packages: "@emotion/is-prop-valid": 0.8.8 dev: false + /fresh@0.5.2: + resolution: + { + integrity: sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==, + } + engines: { node: ">= 0.6" } + dev: false + /from2@2.3.0: resolution: { @@ -4135,7 +4760,6 @@ packages: { integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==, } - dev: true /function.prototype.name@1.1.5: resolution: @@ -4180,7 +4804,6 @@ packages: function-bind: 1.1.1 has: 1.0.3 has-symbols: 1.0.3 - dev: true /get-stream@6.0.1: resolution: @@ -4503,7 +5126,6 @@ packages: integrity: sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==, } engines: { node: ">= 0.4" } - dev: true /has-tostringtag@1.0.0: resolution: @@ -4523,7 +5145,6 @@ packages: engines: { node: ">= 0.4.0" } dependencies: function-bind: 1.1.1 - dev: true /hoist-non-react-statics@3.3.2: resolution: @@ -4579,6 +5200,20 @@ packages: lru-cache: 7.18.3 dev: true + /http-errors@2.0.0: + resolution: + { + integrity: sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==, + } + engines: { node: ">= 0.8" } + dependencies: + depd: 2.0.0 + inherits: 2.0.4 + setprototypeof: 1.2.0 + statuses: 2.0.1 + toidentifier: 1.0.1 + dev: false + /http-proxy-agent@5.0.0: resolution: { @@ -4639,7 +5274,16 @@ packages: engines: { node: ">=0.10.0" } dependencies: safer-buffer: 2.1.2 - dev: true + + /iconv-lite@0.6.3: + resolution: + { + integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==, + } + engines: { node: ">=0.10.0" } + dependencies: + safer-buffer: 2.1.2 + dev: false /ieee754@1.2.1: resolution: @@ -4714,7 +5358,6 @@ packages: { integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==, } - dev: true /ini@1.3.8: resolution: @@ -4759,6 +5402,14 @@ packages: side-channel: 1.0.4 dev: true + /internmap@2.0.3: + resolution: + { + integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==, + } + engines: { node: ">=12" } + dev: false + /into-stream@7.0.0: resolution: { @@ -4770,6 +5421,14 @@ packages: p-is-promise: 3.0.0 dev: true + /ipaddr.js@1.9.1: + resolution: + { + integrity: sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==, + } + engines: { node: ">= 0.10" } + dev: false + /is-arguments@1.1.1: resolution: { @@ -5720,6 +6379,14 @@ packages: hasBin: true dev: true + /media-typer@0.3.0: + resolution: + { + integrity: sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==, + } + engines: { node: ">= 0.6" } + dev: false + /meow@8.1.2: resolution: { @@ -5740,6 +6407,13 @@ packages: yargs-parser: 20.2.9 dev: true + /merge-descriptors@1.0.1: + resolution: + { + integrity: sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==, + } + dev: false + /merge-stream@2.0.0: resolution: { @@ -5762,6 +6436,14 @@ packages: } dev: true + /methods@1.1.2: + resolution: + { + integrity: sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==, + } + engines: { node: ">= 0.6" } + dev: false + /micromatch@4.0.5: resolution: { @@ -5791,6 +6473,15 @@ packages: mime-db: 1.52.0 dev: false + /mime@1.6.0: + resolution: + { + integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==, + } + engines: { node: ">=4" } + hasBin: true + dev: false + /mime@3.0.0: resolution: { @@ -5867,6 +6558,13 @@ packages: engines: { node: ">=0.10.0" } dev: true + /ms@2.0.0: + resolution: + { + integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==, + } + dev: false + /ms@2.1.2: resolution: { @@ -5878,7 +6576,6 @@ packages: { integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==, } - dev: true /mute-stream@0.0.8: resolution: @@ -5913,6 +6610,14 @@ packages: } dev: true + /negotiator@0.6.3: + resolution: + { + integrity: sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==, + } + engines: { node: ">= 0.6" } + dev: false + /neo-async@2.6.2: resolution: { @@ -6181,7 +6886,6 @@ packages: { integrity: sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==, } - dev: true /object-is@1.1.5: resolution: @@ -6261,6 +6965,16 @@ packages: es-abstract: 1.21.2 dev: true + /on-finished@2.4.1: + resolution: + { + integrity: sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==, + } + engines: { node: ">= 0.8" } + dependencies: + ee-first: 1.1.1 + dev: false + /once@1.4.0: resolution: { @@ -6566,6 +7280,14 @@ packages: engines: { node: ">=0.10.0" } dev: true + /parseurl@1.3.3: + resolution: + { + integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==, + } + engines: { node: ">= 0.8" } + dev: false + /path-exists@3.0.0: resolution: { @@ -6621,6 +7343,13 @@ packages: } dev: true + /path-to-regexp@0.1.7: + resolution: + { + integrity: sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==, + } + dev: false + /path-type@4.0.0: resolution: { @@ -6898,6 +7627,24 @@ packages: } dev: true + /proxy-addr@2.0.7: + resolution: + { + integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==, + } + engines: { node: ">= 0.10" } + dependencies: + forwarded: 0.2.0 + ipaddr.js: 1.9.1 + dev: false + + /proxy-from-env@1.1.0: + resolution: + { + integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==, + } + dev: false + /punycode@2.3.0: resolution: { @@ -6914,6 +7661,16 @@ packages: engines: { node: ">=0.6.0", teleport: ">=0.2.0" } dev: true + /qs@6.11.0: + resolution: + { + integrity: sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==, + } + engines: { node: ">=0.6" } + dependencies: + side-channel: 1.0.4 + dev: false + /queue-microtask@1.2.3: resolution: { @@ -6929,6 +7686,27 @@ packages: engines: { node: ">=8" } dev: true + /range-parser@1.2.1: + resolution: + { + integrity: sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==, + } + engines: { node: ">= 0.6" } + dev: false + + /raw-body@2.5.1: + resolution: + { + integrity: sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==, + } + engines: { node: ">= 0.8" } + dependencies: + bytes: 3.1.2 + http-errors: 2.0.0 + iconv-lite: 0.4.24 + unpipe: 1.0.0 + dev: false + /rc@1.2.8: resolution: { @@ -7305,6 +8083,13 @@ packages: glob: 7.2.3 dev: true + /robust-predicates@3.0.2: + resolution: + { + integrity: sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==, + } + dev: false + /run-async@2.4.1: resolution: { @@ -7322,6 +8107,13 @@ packages: queue-microtask: 1.2.3 dev: true + /rw@1.3.3: + resolution: + { + integrity: sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==, + } + dev: false + /rxjs@7.8.1: resolution: { @@ -7360,7 +8152,6 @@ packages: { integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==, } - dev: true /scheduler@0.23.0: resolution: @@ -7474,6 +8265,52 @@ packages: lru-cache: 6.0.0 dev: true + /send@0.18.0: + resolution: + { + integrity: sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==, + } + engines: { node: ">= 0.8.0" } + dependencies: + debug: 2.6.9 + depd: 2.0.0 + destroy: 1.2.0 + encodeurl: 1.0.2 + escape-html: 1.0.3 + etag: 1.8.1 + fresh: 0.5.2 + http-errors: 2.0.0 + mime: 1.6.0 + ms: 2.1.3 + on-finished: 2.4.1 + range-parser: 1.2.1 + statuses: 2.0.1 + transitivePeerDependencies: + - supports-color + dev: false + + /serve-static@1.15.0: + resolution: + { + integrity: sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==, + } + engines: { node: ">= 0.8.0" } + dependencies: + encodeurl: 1.0.2 + escape-html: 1.0.3 + parseurl: 1.3.3 + send: 0.18.0 + transitivePeerDependencies: + - supports-color + dev: false + + /setprototypeof@1.2.0: + resolution: + { + integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==, + } + dev: false + /shebang-command@2.0.0: resolution: { @@ -7501,7 +8338,6 @@ packages: call-bind: 1.0.2 get-intrinsic: 1.2.0 object-inspect: 1.12.3 - dev: true /signal-exit@3.0.7: resolution: @@ -7674,6 +8510,14 @@ packages: tslib: 2.5.2 dev: false + /statuses@2.0.1: + resolution: + { + integrity: sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==, + } + engines: { node: ">= 0.8" } + dev: false + /stop-iteration-iterator@1.0.0: resolution: { @@ -8131,6 +8975,14 @@ packages: is-number: 7.0.0 dev: true + /toidentifier@1.0.1: + resolution: + { + integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==, + } + engines: { node: ">=0.6" } + dev: false + /tone@14.8.49: resolution: { @@ -8321,6 +9173,17 @@ packages: engines: { node: ">=14.16" } dev: true + /type-is@1.6.18: + resolution: + { + integrity: sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==, + } + engines: { node: ">= 0.6" } + dependencies: + media-typer: 0.3.0 + mime-types: 2.1.35 + dev: false + /typed-array-length@1.0.4: resolution: { @@ -8389,6 +9252,14 @@ packages: engines: { node: ">= 10.0.0" } dev: true + /unpipe@1.0.0: + resolution: + { + integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==, + } + engines: { node: ">= 0.8" } + dev: false + /update-browserslist-db@1.0.11(browserslist@4.21.5): resolution: { @@ -8418,6 +9289,19 @@ packages: } dev: true + /use-timer@2.0.1(react-dom@18.2.0)(react@18.2.0): + resolution: + { + integrity: sha512-ESFkDYZluJZ+G/CaoOBFxg0TjuG7kgNFNhIFZhqv14ho2WIZwuxkRnEURhyLm9I4vNz+ea9ZowNaOkExDAM+6Q==, + } + peerDependencies: + react: ">=16.8.0" + react-dom: ">=16.8.0" + dependencies: + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + /util-deprecate@1.0.2: resolution: { @@ -8425,6 +9309,14 @@ packages: } dev: true + /utils-merge@1.0.1: + resolution: + { + integrity: sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==, + } + engines: { node: ">= 0.4.0" } + dev: false + /v8-compile-cache-lib@3.0.1: resolution: { @@ -8442,6 +9334,14 @@ packages: spdx-expression-parse: 3.0.1 dev: true + /vary@1.1.2: + resolution: + { + integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==, + } + engines: { node: ">= 0.8" } + dev: false + /warning@4.0.3: resolution: { diff --git a/src/app/tabs/[id]/page.tsx b/src/app/tabs/[id]/page.tsx index 4e3e767..513cbec 100644 --- a/src/app/tabs/[id]/page.tsx +++ b/src/app/tabs/[id]/page.tsx @@ -1,18 +1,24 @@ "use client" -import { ChangeEvent, useEffect, useState, type ReactNode } from "react" +import { ChangeEvent, useCallback, useEffect, useState, type ReactNode } from "react" import { dummyTab } from "@/dummydata/dummytab" import { useSampler } from "@/hooks/tone" +import { useRouter } from "next/navigation" import { EachBar, EachTab, Tune } from "@/components/tabs/eachnotefield" import { Player } from "tone/build/esm/source/buffer/Player" import { FFT, Sampler, ToneAudioBuffer, getDestination } from "tone/build/esm/index" import { Buffer } from "tone/build/esm/index" -import { signal, tensor1d, tensor } from "@tensorflow/tfjs" +import { signal, tensor1d, tensor, Tensor, Rank, Tensor1D } from "@tensorflow/tfjs" +import axios from 'axios' +import { exec } from "child_process" +import PlayBar from "@/components/tabs/playbar" +import { songObjectType } from "@/type/tabs" +import { useTimer } from 'use-timer' export default function EditTab(): ReactNode { - const [datatabs, setDatatabs] = useState(dummyTab) + const [datatabs, setDatatabs] = useState(dummyTab) const [file, setFile] = useState() const handleinputfile = (e : ChangeEvent) => { @@ -40,84 +46,119 @@ export default function EditTab(): ReactNode { } = useSampler("guitar-acoustic") const [buffer, setBuffer] = useState(null) - const [convertFFT, setConvertFFT] = useState(null) - const [sample, setSample] = useState({}) - const [player, setPlayer] = useState(null) + const [channelData, setChannelData] = useState(null) + const [audioArray, setAudioArray] = useState(null) + const [stftOutput, setStftOutput] = useState| null>(null) + const [curCursorIndex, setCurCursorIndex] = useState(0) - useEffect(() => { - if (file == null || file == undefined) return - const fileURL = URL.createObjectURL(file) - const buffer = new Buffer(fileURL) - const convertFFT = new FFT(1024) + const [mode, setMode] = useState<"Normal" | "Edit">("Normal") + const [commandBuffer, setCommandBuffer] = useState("") + + useEffect(()=> { + if (isLoaded) { + console.log("Guitar output compiled successfully") + } + + }, [guitarAcoustic]) - setBuffer(buffer) - setConvertFFT(convertFFT) - console.log(buffer) - }, [file]) useEffect(() => { - if (!buffer) return - // const player = new Player(buffer, () => console.log("loading...../")) - // setPlayer(player) - const audioArray = tensor1d(buffer.getChannelData(0)) - const stftOutput = signal.stft(audioArray, 1000, 48000/8) - stftOutput.print() - const values = stftOutput.dataSync() - const slice = Array.from(values) - const shape = stftOutput.shape - console.log(shape) - var amplitude = [] - var phase = [] - var tempOdd = [] - var tempEven = [] - for (let i=0;i { + setCommandBuffer("") + // add command here + if (commandBuffer.includes("w")) { + console.log("save") } - console.log(amplitude) - }, [buffer]) + if (commandBuffer.includes("q")) { + router.push("/tabs/") + } + } - // useEffect(() => { - // if (!player || !convertFFT) return - // }, [player]) + const keypressHandler = (event: KeyboardEvent) => { + if (event.key === "Escape") { + setMode("Normal") + } + else if (event.key === "i") { + setMode("Edit") + } + else commandHandler(event.key) + } - // useEffect(() => { - // if (!convertFFT || !player) return - // const destination = getDestination() - // player.chain(convertFFT, destination) - // const levels = convertFFT.getValue() - // console.log(levels) - // }, [convertFFT]) + const commandHandler = (char: string) => { + if (char === ":") setCommandBuffer(":") + else if (char === "Enter") executeCommand() + else if ( + mode==="Normal" && + char.length === 1 && + commandBuffer[0] === ":" + ) { + setCommandBuffer("" + commandBuffer + char) + } + else if ( + char === "Backspace" + ) setCommandBuffer(commandBuffer.substring(0, commandBuffer.length-1)) + else if ( + commandBuffer[0] != ":" + ) setCommandBuffer(char) + } + + useEffect(() => { + document.addEventListener("keydown", keypressHandler, false); + + return () => { + document.removeEventListener("keydown", keypressHandler, false); + }; + }, [keypressHandler]); useEffect(() => { const keypressHandler = (e: KeyboardEvent) => { if (e.key === "c") { if (!isLoaded || guitarAcoustic == null) return // play a c major chord - guitarAcoustic?.playNote(["C3", "E3", "G3"], "2") + guitarAcoustic?.playNote(["C3", "E3", "G3"], "2", "1") } } - window.addEventListener("keypress", keypressHandler) - return () => { window.removeEventListener("keypress", keypressHandler) } }, [guitarAcoustic]) + const { time , start, pause, reset, status } = useTimer({ + endTime: datatabs.tab.length, + initialTime: -1, + step: 1, + interval: 1000, + }); + return ( -
+
Song Name
+
+ + + + +
{/* */}
-
{}
-
+
{datatabs.tab.map((list, idx) => { return (
@@ -155,12 +193,21 @@ export default function EditTab(): ReactNode { key={"tab-" + `${idx}`} noteStringList={datatabs.stringTune} isFirst={idx == 0} + time={ (time>=idx && time-idx<1) ? 1: -1} />
) })} + =0) ? datatabs.tab[time] : null} status={status} guitarAcoustic={guitarAcoustic}/>
+
+
-- {mode} --
+
+
+
{commandBuffer}
+
{curCursorIndex}
+
) } diff --git a/src/app/tabs/[id]/test/page.tsx b/src/app/tabs/[id]/test/page.tsx deleted file mode 100644 index c0be27e..0000000 --- a/src/app/tabs/[id]/test/page.tsx +++ /dev/null @@ -1,68 +0,0 @@ -'use client' -import { useState, ChangeEvent, type ReactNode } from 'react' -import { Tune, EachBar, EachTab } from '@/components/tabs/eachnotefield' -import { dummyTab } from '@/dummydata/dummytab' - -export default function EditTab(): ReactNode { - - const [datatabs, setDatatabs] = useState(dummyTab) - - const [barInClipboard, setBarInClipboard] = useState([ - [-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1], - [-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1], - ]) - - const [file, setFile] = useState(); - - const handleinputfile = (e : ChangeEvent) => { - setFile(e.target.files[0]) - console.log("hi") - console.log(file) - } - - const handleSubmit = () => { - console.log(file) - } - - return ( -
-
- Song Name -
- {/* */} -
- - -
- {} -
-
- {datatabs.tab.map((list, idx) => { - return ( -
- - -
- ) - })} -
-
-
- ) -} - diff --git a/src/components/tabs/eachnotefield.tsx b/src/components/tabs/eachnotefield.tsx index e89805d..e2414ca 100644 --- a/src/components/tabs/eachnotefield.tsx +++ b/src/components/tabs/eachnotefield.tsx @@ -1,8 +1,9 @@ -import { useState, useCallback, useMemo } from 'react' +import { useState, useCallback, useMemo, useEffect } from 'react' import { Formik, Field, Form, FormikHelpers } from 'formik' import { debounceAsync } from '@/components/tabs/debounceasync' import AutoSave from '@/components/tabs/autosave' import NoteInput from '@/components/tabs/noteinput' +import { useStopwatch } from 'react-timer-hook'; import { type EachBarProps, EachTabProps, Values } from '@/type/tabs' @@ -20,13 +21,18 @@ export const Tune = ({ stringTune }: any) => { ) } -export const EachTab = ({ noteStringList, isFirst }: EachTabProps) => { +export const EachTab = ({ noteStringList, isFirst, time }: EachTabProps) => { return ( -
+
+ + + {noteStringList.map((noteString, idx) => { return (
- { + { { - console.log('update') let newdatatabsArray = [...datatabs.tab] if (!values.note) { values.note = -1 @@ -83,9 +88,7 @@ export const EachBar = ({ } const pasteBarfromClipboard = () => { - console.log('update') if (barInClipboard === emptytabsArray) { - console.log('Got empty clipboard') } else { let newdatatabsArray = [ ...datatabs.tab.slice(0, barnumber + 1), @@ -101,12 +104,9 @@ export const EachBar = ({ } } - const copyBartoClipboard = () => { - setBarInClipboard(datatabs.tab[barnumber]) - } + const copyBartoClipboard = () => {setBarInClipboard(datatabs.tab[barnumber])} const addNoteInDatatabs = (barId: number) => { - console.log('update') let newdatatabsArray = [ ...datatabs.tab.slice(0, barId + 1), emptytabsArray, @@ -121,7 +121,6 @@ export const EachBar = ({ } const delNoteInDatatabs = (barId: number) => { - console.log('update') let newdatatabsArray = [ ...datatabs.tab.slice(0, barId), ...datatabs.tab.slice(barId + 1), diff --git a/src/components/tabs/notetotabnumber.tsx b/src/components/tabs/notetotabnumber.tsx new file mode 100644 index 0000000..63d1212 --- /dev/null +++ b/src/components/tabs/notetotabnumber.tsx @@ -0,0 +1,20 @@ +import { useSampler } from "@/hooks/tone" +import { ReactNode } from "react" + +export default function PlayNote(note: Array, tune: Array): ReactNode { + const { + sampler: guitarAcoustic, + isLoaded, + error, + } = useSampler("guitar-acoustic") + + console.log(note) + + const mapper = [] + + const tabToNotes = () => { + if (!isLoaded || guitarAcoustic == null ) return + guitarAcoustic?.playNote(["C3"], "2") + } + return (<>) +} \ No newline at end of file diff --git a/src/components/tabs/playbar.tsx b/src/components/tabs/playbar.tsx new file mode 100644 index 0000000..5886b30 --- /dev/null +++ b/src/components/tabs/playbar.tsx @@ -0,0 +1,43 @@ +import { fretRange } from '@/type/tabs' +import React, { useEffect } from 'react' +import { Status } from 'use-timer/lib/types' +import { Note } from "tone/build/esm/core/type/NoteUnits" +import { tabToNote } from './testnotemapping' + +type PlayBarProps = { + bar: Array> | null + status: Status + guitarAcoustic: any +} + +const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms)); + +const PlayBar = ({bar, status, guitarAcoustic} : PlayBarProps) => { + useEffect(()=>{ + // console.log(bar) + for (let i=0;i<8;i++) { + let notes: Array = [] + if (bar===null || bar===undefined) continue + if (bar[i]===null || bar[i]===undefined) continue + for (let bnum=0;bnum<6;bnum++) { + if (bar[i][bnum]===null) continue + let note = tabToNote(bar[i][bnum], bnum) + if (note===null) continue + notes.push(note) + } + console.log(notes) + if (notes.length===0) continue + try{ + guitarAcoustic.playNote(notes, 1) + } + catch(err){ + console.log(err) + console.log(notes) + } + // guitarAcoustic?.playNote(notes, 1) + } + }, [bar]) + return (<>) +} + +export default PlayBar; diff --git a/src/type/tabs.ts b/src/type/tabs.ts index 6492aea..c95ba68 100644 --- a/src/type/tabs.ts +++ b/src/type/tabs.ts @@ -27,6 +27,7 @@ export type EachBarProps = { export type EachTabProps = { noteStringList: Array isFirst: boolean + time: number } export type eachTabType = Array>>