-
+
- -
- @@ -401,7 +393,7 @@
- -
- +
- 
+
-
+ 
@@ -44,15 +44,23 @@ Plus, the Docker image is super lightweight at just 28MB, making it fast to depl
We strive to offer a variety of tools, including:
-## **Image/Video/Binary Tools**
+## **Image/Video/Audio Tools**
- Image Resizer
- Image Converter
+- Image Editor
- Video Trimmer
- Video Reverser
- And more...
-## **String/List Tools**
+## **PDF Tools**
+
+- PDF Splitter
+- PDF Merger
+- PDF Editor
+- And more...
+
+## **Text/List Tools**
- Case Converters
- List Shuffler
@@ -68,14 +76,14 @@ We strive to offer a variety of tools, including:
## **Math Tools**
- Generate Prime Numbers
-- Generate Perfect Numbers
+- Calculate voltage, current, or resistance
- And more...
-## **Miscellaneous Tools**
+## **Data Tools**
- JSON Tools
-- PDF Tools
- CSV Tools
+- XML Tools
- And more...
Stay tuned as we continue to expand and improve our collection!
@@ -147,7 +155,7 @@ npm run test:e2e
We welcome contributions! You can help by:
- ✅ Reporting bugs
-- ✅ Suggesting new features in Github issues or [here](https://tally.so/r/nrkkx2)
+- ✅ Suggesting new features in GitHub issues or [here](https://tally.so/r/nrkkx2)
- ✅ Improving documentation
- ✅ Submitting pull requests
diff --git a/img.png b/img.png
index 92db6e2..2f34502 100644
Binary files a/img.png and b/img.png differ
diff --git a/index.html b/index.html
index 1dc3459..2bf5d01 100644
--- a/index.html
+++ b/index.html
@@ -2,8 +2,13 @@
+
-
+
+
+
+
+
OmniTools
diff --git a/package-lock.json b/package-lock.json
index 5cefa39..5b698c2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
"@mui/icons-material": "^5.15.20",
"@mui/material": "^5.15.20",
"@playwright/test": "^1.45.0",
+ "@simplepdf/react-embed-pdf": "^1.9.0",
"@types/ffmpeg": "^1.0.7",
"@types/js-quantities": "^1.6.6",
"@types/lodash": "^4.17.5",
@@ -29,6 +30,7 @@
"cron-validator": "^1.3.1",
"cronstrue": "^3.0.0",
"dayjs": "^1.11.13",
+ "fast-xml-parser": "^5.2.5",
"formik": "^2.4.6",
"jimp": "^0.22.12",
"js-quantities": "^1.8.0",
@@ -47,8 +49,10 @@
"rc-slider": "^11.1.8",
"react": "^18.3.1",
"react-dom": "^18.3.1",
+ "react-filerobot-image-editor": "^4.9.1",
"react-helmet": "^6.1.0",
"react-image-crop": "^11.0.7",
+ "react-konva": "^18.2.10",
"react-router-dom": "^6.23.1",
"tesseract.js": "^6.0.0",
"type-fest": "^4.35.0",
@@ -2905,6 +2909,45 @@
"win32"
]
},
+ "node_modules/@scaleflex/icons": {
+ "version": "2.10.27",
+ "resolved": "https://registry.npmjs.org/@scaleflex/icons/-/icons-2.10.27.tgz",
+ "integrity": "sha512-3E/tqXQrsuFIeGwDHE/ANEdDCPCYrt3ETk3/Q83M5ZZaFWdFWJG3bMeVBwNP2Nuul5OMr70LH3ce3krEObz98g==",
+ "license": "MIT",
+ "engines": {
+ "node": ">=12"
+ },
+ "peerDependencies": {
+ "@types/react": ">=16.0.0",
+ "@types/react-dom": ">=16.0.0",
+ "react": ">=16.0.0",
+ "react-dom": ">=16.0.0"
+ }
+ },
+ "node_modules/@scaleflex/ui": {
+ "version": "2.10.27",
+ "resolved": "https://registry.npmjs.org/@scaleflex/ui/-/ui-2.10.27.tgz",
+ "integrity": "sha512-Id9EJjS4NWGn9V0pZRCk8YpM2PVEK8/a/BtTbgEW5L7wPI/APmZ9vGtCTM3HyTEBrfnvWmDlb0T5CfpozywKyA==",
+ "license": "MIT",
+ "dependencies": {
+ "@popperjs/core": "^2.6.0",
+ "@scaleflex/icons": "^2.10.27",
+ "@tippyjs/react": "^4.2.6",
+ "@types/lodash.merge": "^4.6.9",
+ "lodash.merge": "^4.6.2",
+ "prop-types": "^15.7.2"
+ },
+ "engines": {
+ "node": ">=12"
+ },
+ "peerDependencies": {
+ "@types/react": ">=16.0.0",
+ "@types/react-dom": ">=16.0.0",
+ "react": ">=16.0.0",
+ "react-dom": ">=16.0.0",
+ "styled-components": ">=5.0.0"
+ }
+ },
"node_modules/@sideway/address": {
"version": "4.1.5",
"resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.5.tgz",
@@ -2926,6 +2969,16 @@
"integrity": "sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ==",
"dev": true
},
+ "node_modules/@simplepdf/react-embed-pdf": {
+ "version": "1.9.0",
+ "resolved": "https://registry.npmjs.org/@simplepdf/react-embed-pdf/-/react-embed-pdf-1.9.0.tgz",
+ "integrity": "sha512-qp0K5Fh8E+Zk7m3vyHtvksNlozOUyYRG2wR/TiEjhNh12kj+ar4N+1rEJA7BOsf/M2HnSplwjNOPuci2CKkKGg==",
+ "license": "MIT",
+ "peerDependencies": {
+ "react": "^18.2.0 || ^19.0.0",
+ "react-dom": "^18.2.0 || ^19.0.0"
+ }
+ },
"node_modules/@sinclair/typebox": {
"version": "0.27.8",
"resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz",
@@ -3258,6 +3311,19 @@
"react-dom": "^18.0.0"
}
},
+ "node_modules/@tippyjs/react": {
+ "version": "4.2.6",
+ "resolved": "https://registry.npmjs.org/@tippyjs/react/-/react-4.2.6.tgz",
+ "integrity": "sha512-91RicDR+H7oDSyPycI13q3b7o4O60wa2oRbjlz2fyRLmHImc4vyDwuUP8NtZaN0VARJY5hybvDYrFzhY9+Lbyw==",
+ "license": "MIT",
+ "dependencies": {
+ "tippy.js": "^6.3.1"
+ },
+ "peerDependencies": {
+ "react": ">=16.8",
+ "react-dom": ">=16.8"
+ }
+ },
"node_modules/@tokenizer/token": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/@tokenizer/token/-/token-0.3.0.tgz",
@@ -3345,6 +3411,15 @@
"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.5.tgz",
"integrity": "sha512-MBIOHVZqVqgfro1euRDWX7OO0fBVUUMrN6Pwm8LQsz8cWhEpihlvR70ENj3f40j58TNxZaWv2ndSkInykNBBJw=="
},
+ "node_modules/@types/lodash.merge": {
+ "version": "4.6.9",
+ "resolved": "https://registry.npmjs.org/@types/lodash.merge/-/lodash.merge-4.6.9.tgz",
+ "integrity": "sha512-23sHDPmzd59kUgWyKGiOMO2Qb9YtqRO/x4IhkgNUiPQ1+5MUVqi6bCZeq9nBJ17msjIMbEIO5u+XW4Kz6aGUhQ==",
+ "license": "MIT",
+ "dependencies": {
+ "@types/lodash": "*"
+ }
+ },
"node_modules/@types/morsee": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/@types/morsee/-/morsee-1.0.2.tgz",
@@ -3396,7 +3471,6 @@
"version": "18.3.0",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz",
"integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==",
- "dev": true,
"dependencies": {
"@types/react": "*"
}
@@ -3410,6 +3484,15 @@
"@types/react": "*"
}
},
+ "node_modules/@types/react-reconciler": {
+ "version": "0.28.9",
+ "resolved": "https://registry.npmjs.org/@types/react-reconciler/-/react-reconciler-0.28.9.tgz",
+ "integrity": "sha512-HHM3nxyUZ3zAylX8ZEyrDNd2XZOnQ0D5XfunJF5FLQnZbHHYq4UWvW1QfelQNXv1ICNkwYhfxjwfnqivYB6bFg==",
+ "license": "MIT",
+ "peerDependencies": {
+ "@types/react": "*"
+ }
+ },
"node_modules/@types/react-transition-group": {
"version": "4.4.10",
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz",
@@ -3424,6 +3507,13 @@
"integrity": "sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==",
"dev": true
},
+ "node_modules/@types/stylis": {
+ "version": "4.2.5",
+ "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz",
+ "integrity": "sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==",
+ "license": "MIT",
+ "peer": true
+ },
"node_modules/@typescript-eslint/eslint-plugin": {
"version": "6.21.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.21.0.tgz",
@@ -4405,6 +4495,16 @@
"node": ">= 6"
}
},
+ "node_modules/camelize": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
+ "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==",
+ "license": "MIT",
+ "peer": true,
+ "funding": {
+ "url": "https://github.com/sponsors/ljharb"
+ }
+ },
"node_modules/caniuse-lite": {
"version": "1.0.30001636",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001636.tgz",
@@ -4849,6 +4949,28 @@
"node": ">= 8"
}
},
+ "node_modules/css-color-keywords": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+ "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==",
+ "license": "ISC",
+ "peer": true,
+ "engines": {
+ "node": ">=4"
+ }
+ },
+ "node_modules/css-to-react-native": {
+ "version": "3.2.0",
+ "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
+ "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==",
+ "license": "MIT",
+ "peer": true,
+ "dependencies": {
+ "camelize": "^1.0.0",
+ "css-color-keywords": "^1.0.0",
+ "postcss-value-parser": "^4.0.2"
+ }
+ },
"node_modules/css.escape": {
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
@@ -5893,6 +6015,24 @@
"integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
"dev": true
},
+ "node_modules/fast-xml-parser": {
+ "version": "5.2.5",
+ "resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-5.2.5.tgz",
+ "integrity": "sha512-pfX9uG9Ki0yekDHx2SiuRIyFdyAr1kMIMitPvb0YBo8SUfKvia7w7FIyd/l6av85pFYRhZscS75MwMnbvY+hcQ==",
+ "funding": [
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/NaturalIntelligence"
+ }
+ ],
+ "license": "MIT",
+ "dependencies": {
+ "strnum": "^2.1.0"
+ },
+ "bin": {
+ "fxparser": "src/cli/cli.js"
+ }
+ },
"node_modules/fastq": {
"version": "1.17.1",
"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
@@ -7189,6 +7329,18 @@
"set-function-name": "^2.0.1"
}
},
+ "node_modules/its-fine": {
+ "version": "1.2.5",
+ "resolved": "https://registry.npmjs.org/its-fine/-/its-fine-1.2.5.tgz",
+ "integrity": "sha512-fXtDA0X0t0eBYAGLVM5YsgJGsJ5jEmqZEPrGbzdf5awjv0xE7nqv3TVnvtUF060Tkes15DbDAKW/I48vsb6SyA==",
+ "license": "MIT",
+ "dependencies": {
+ "@types/react-reconciler": "^0.28.0"
+ },
+ "peerDependencies": {
+ "react": ">=18.0"
+ }
+ },
"node_modules/jackspeak": {
"version": "3.4.0",
"resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.0.tgz",
@@ -7421,6 +7573,27 @@
"json-buffer": "3.0.1"
}
},
+ "node_modules/konva": {
+ "version": "9.3.22",
+ "resolved": "https://registry.npmjs.org/konva/-/konva-9.3.22.tgz",
+ "integrity": "sha512-yQI5d1bmELlD/fowuyfOp9ff+oamg26WOCkyqUyc+nczD/lhRa3EvD2MZOoc4c1293TAubW9n34fSQLgSeEgSw==",
+ "funding": [
+ {
+ "type": "patreon",
+ "url": "https://www.patreon.com/lavrton"
+ },
+ {
+ "type": "opencollective",
+ "url": "https://opencollective.com/konva"
+ },
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/lavrton"
+ }
+ ],
+ "license": "MIT",
+ "peer": true
+ },
"node_modules/lazy-ass": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/lazy-ass/-/lazy-ass-1.6.0.tgz",
@@ -7734,8 +7907,7 @@
"node_modules/lodash.merge": {
"version": "4.6.2",
"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
- "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
- "dev": true
+ "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="
},
"node_modules/lodash.mergewith": {
"version": "4.6.2",
@@ -8151,7 +8323,6 @@
"version": "3.3.7",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
"integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
- "dev": true,
"funding": [
{
"type": "github",
@@ -8727,9 +8898,10 @@
"deprecated": "Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."
},
"node_modules/picocolors": {
- "version": "1.0.1",
- "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
- "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew=="
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+ "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+ "license": "ISC"
},
"node_modules/picomatch": {
"version": "2.3.1",
@@ -8869,10 +9041,9 @@
}
},
"node_modules/postcss": {
- "version": "8.4.38",
- "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
- "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
- "dev": true,
+ "version": "8.4.49",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz",
+ "integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==",
"funding": [
{
"type": "opencollective",
@@ -8887,10 +9058,11 @@
"url": "https://github.com/sponsors/ai"
}
],
+ "license": "MIT",
"dependencies": {
"nanoid": "^3.3.7",
- "picocolors": "^1.0.0",
- "source-map-js": "^1.2.0"
+ "picocolors": "^1.1.1",
+ "source-map-js": "^1.2.1"
},
"engines": {
"node": "^10 || ^12 || >=14"
@@ -9031,8 +9203,7 @@
"node_modules/postcss-value-parser": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
- "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
- "dev": true
+ "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
},
"node_modules/prelude-ls": {
"version": "1.2.1",
@@ -9436,6 +9607,62 @@
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
"integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
},
+ "node_modules/react-filerobot-image-editor": {
+ "version": "4.9.1",
+ "resolved": "https://registry.npmjs.org/react-filerobot-image-editor/-/react-filerobot-image-editor-4.9.1.tgz",
+ "integrity": "sha512-O9xFySHT6MKuNXAKJMVGG2wyMeaV9NxHIVyBWzhysdbaxx7fZO0r4aQsBFkYt7+0B3Se5/33Sv90r8t3274Q+w==",
+ "license": "MIT",
+ "dependencies": {
+ "@babel/runtime": "^7.17.2",
+ "@scaleflex/icons": "2.10.27",
+ "@scaleflex/ui": "2.10.27",
+ "konva": "9.3.6",
+ "prop-types": "15.7.2"
+ },
+ "peerDependencies": {
+ "react": ">=17.0.0",
+ "react-dom": ">=17.0.0",
+ "react-konva": ">=17.0.0",
+ "styled-components": ">=5.3.5"
+ }
+ },
+ "node_modules/react-filerobot-image-editor/node_modules/konva": {
+ "version": "9.3.6",
+ "resolved": "https://registry.npmjs.org/konva/-/konva-9.3.6.tgz",
+ "integrity": "sha512-dqR8EbcM0hjuilZCBP6xauQ5V3kH3m9kBcsDkqPypQuRgsXbcXUrxqYxhNbdvKZpYNW8Amq94jAD/C0NY3qfBQ==",
+ "funding": [
+ {
+ "type": "patreon",
+ "url": "https://www.patreon.com/lavrton"
+ },
+ {
+ "type": "opencollective",
+ "url": "https://opencollective.com/konva"
+ },
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/lavrton"
+ }
+ ],
+ "license": "MIT"
+ },
+ "node_modules/react-filerobot-image-editor/node_modules/prop-types": {
+ "version": "15.7.2",
+ "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
+ "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
+ "license": "MIT",
+ "dependencies": {
+ "loose-envify": "^1.4.0",
+ "object-assign": "^4.1.1",
+ "react-is": "^16.8.1"
+ }
+ },
+ "node_modules/react-filerobot-image-editor/node_modules/react-is": {
+ "version": "16.13.1",
+ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+ "license": "MIT"
+ },
"node_modules/react-helmet": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
@@ -9470,6 +9697,53 @@
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
"dev": true
},
+ "node_modules/react-konva": {
+ "version": "18.2.10",
+ "resolved": "https://registry.npmjs.org/react-konva/-/react-konva-18.2.10.tgz",
+ "integrity": "sha512-ohcX1BJINL43m4ynjZ24MxFI1syjBdrXhqVxYVDw2rKgr3yuS0x/6m1Y2Z4sl4T/gKhfreBx8KHisd0XC6OT1g==",
+ "funding": [
+ {
+ "type": "patreon",
+ "url": "https://www.patreon.com/lavrton"
+ },
+ {
+ "type": "opencollective",
+ "url": "https://opencollective.com/konva"
+ },
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/lavrton"
+ }
+ ],
+ "license": "MIT",
+ "dependencies": {
+ "@types/react-reconciler": "^0.28.2",
+ "its-fine": "^1.1.1",
+ "react-reconciler": "~0.29.0",
+ "scheduler": "^0.23.0"
+ },
+ "peerDependencies": {
+ "konva": "^8.0.1 || ^7.2.5 || ^9.0.0",
+ "react": ">=18.0.0",
+ "react-dom": ">=18.0.0"
+ }
+ },
+ "node_modules/react-reconciler": {
+ "version": "0.29.2",
+ "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.29.2.tgz",
+ "integrity": "sha512-zZQqIiYgDCTP/f1N/mAR10nJGrPD2ZR+jDSEsKWJHYC7Cm2wodlwbR3upZRdC3cjIjSlTLNVyO7Iu0Yy7t2AYg==",
+ "license": "MIT",
+ "dependencies": {
+ "loose-envify": "^1.1.0",
+ "scheduler": "^0.23.2"
+ },
+ "engines": {
+ "node": ">=0.10.0"
+ },
+ "peerDependencies": {
+ "react": "^18.3.1"
+ }
+ },
"node_modules/react-router": {
"version": "6.23.1",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.1.tgz",
@@ -9936,6 +10210,13 @@
"integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
"license": "MIT"
},
+ "node_modules/shallowequal": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+ "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==",
+ "license": "MIT",
+ "peer": true
+ },
"node_modules/shebang-command": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -10075,10 +10356,10 @@
}
},
"node_modules/source-map-js": {
- "version": "1.2.0",
- "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
- "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
- "dev": true,
+ "version": "1.2.1",
+ "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+ "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+ "license": "BSD-3-Clause",
"engines": {
"node": ">=0.10.0"
}
@@ -10502,6 +10783,18 @@
"integrity": "sha512-WriZw1luRMlmV3LGJaR6QOJjWwgLUTf89OwT2lUOyjX2dJGBwgmIkbcz+7WFZjrZM635JOIR517++e/67CP9dQ==",
"dev": true
},
+ "node_modules/strnum": {
+ "version": "2.1.1",
+ "resolved": "https://registry.npmjs.org/strnum/-/strnum-2.1.1.tgz",
+ "integrity": "sha512-7ZvoFTiCnGxBtDqJ//Cu6fWtZtc7Y3x+QOirG15wztbdngGSkht27o2pyGWrVy0b4WAy3jbKmnoK6g5VlVNUUw==",
+ "funding": [
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/NaturalIntelligence"
+ }
+ ],
+ "license": "MIT"
+ },
"node_modules/strtok3": {
"version": "6.3.0",
"resolved": "https://registry.npmjs.org/strtok3/-/strtok3-6.3.0.tgz",
@@ -10518,6 +10811,49 @@
"url": "https://github.com/sponsors/Borewit"
}
},
+ "node_modules/styled-components": {
+ "version": "6.1.19",
+ "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.19.tgz",
+ "integrity": "sha512-1v/e3Dl1BknC37cXMhwGomhO8AkYmN41CqyX9xhUDxry1ns3BFQy2lLDRQXJRdVVWB9OHemv/53xaStimvWyuA==",
+ "license": "MIT",
+ "peer": true,
+ "dependencies": {
+ "@emotion/is-prop-valid": "1.2.2",
+ "@emotion/unitless": "0.8.1",
+ "@types/stylis": "4.2.5",
+ "css-to-react-native": "3.2.0",
+ "csstype": "3.1.3",
+ "postcss": "8.4.49",
+ "shallowequal": "1.1.0",
+ "stylis": "4.3.2",
+ "tslib": "2.6.2"
+ },
+ "engines": {
+ "node": ">= 16"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/styled-components"
+ },
+ "peerDependencies": {
+ "react": ">= 16.8.0",
+ "react-dom": ">= 16.8.0"
+ }
+ },
+ "node_modules/styled-components/node_modules/stylis": {
+ "version": "4.3.2",
+ "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz",
+ "integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==",
+ "license": "MIT",
+ "peer": true
+ },
+ "node_modules/styled-components/node_modules/tslib": {
+ "version": "2.6.2",
+ "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+ "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
+ "license": "0BSD",
+ "peer": true
+ },
"node_modules/stylis": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
@@ -10795,6 +11131,15 @@
"node": ">=14.0.0"
}
},
+ "node_modules/tippy.js": {
+ "version": "6.3.7",
+ "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz",
+ "integrity": "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==",
+ "license": "MIT",
+ "dependencies": {
+ "@popperjs/core": "^2.9.0"
+ }
+ },
"node_modules/to-fast-properties": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
diff --git a/package.json b/package.json
index 86276e5..52860e1 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
"@mui/icons-material": "^5.15.20",
"@mui/material": "^5.15.20",
"@playwright/test": "^1.45.0",
+ "@simplepdf/react-embed-pdf": "^1.9.0",
"@types/ffmpeg": "^1.0.7",
"@types/js-quantities": "^1.6.6",
"@types/lodash": "^4.17.5",
@@ -46,6 +47,7 @@
"cron-validator": "^1.3.1",
"cronstrue": "^3.0.0",
"dayjs": "^1.11.13",
+ "fast-xml-parser": "^5.2.5",
"formik": "^2.4.6",
"jimp": "^0.22.12",
"js-quantities": "^1.8.0",
@@ -64,8 +66,10 @@
"rc-slider": "^11.1.8",
"react": "^18.3.1",
"react-dom": "^18.3.1",
+ "react-filerobot-image-editor": "^4.9.1",
"react-helmet": "^6.1.0",
"react-image-crop": "^11.0.7",
+ "react-konva": "^18.2.10",
"react-router-dom": "^6.23.1",
"tesseract.js": "^6.0.0",
"type-fest": "^4.35.0",
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
new file mode 100644
index 0000000..80a2019
Binary files /dev/null and b/public/apple-touch-icon.png differ
diff --git a/public/assets/fonts/plus-jakarta/PlusJakartaSans-Italic-VariableFont_wght.ttf b/public/assets/fonts/plus-jakarta/PlusJakartaSans-Italic-VariableFont_wght.ttf
deleted file mode 100644
index 7de3b5b..0000000
Binary files a/public/assets/fonts/plus-jakarta/PlusJakartaSans-Italic-VariableFont_wght.ttf and /dev/null differ
diff --git a/public/assets/fonts/plus-jakarta/PlusJakartaSans-VariableFont_wght.ttf b/public/assets/fonts/plus-jakarta/PlusJakartaSans-VariableFont_wght.ttf
deleted file mode 100644
index bdd4985..0000000
Binary files a/public/assets/fonts/plus-jakarta/PlusJakartaSans-VariableFont_wght.ttf and /dev/null differ
diff --git a/public/assets/fonts/quicksand/Quicksand-VariableFont_wght.ttf b/public/assets/fonts/quicksand/Quicksand-VariableFont_wght.ttf
new file mode 100644
index 0000000..44ecad8
Binary files /dev/null and b/public/assets/fonts/quicksand/Quicksand-VariableFont_wght.ttf differ
diff --git a/public/assets/fonts/plus-jakarta/plus-jakarta.css b/public/assets/fonts/quicksand/quick-sand.css
similarity index 55%
rename from public/assets/fonts/plus-jakarta/plus-jakarta.css
rename to public/assets/fonts/quicksand/quick-sand.css
index 19af058..e7dcdb7 100644
--- a/public/assets/fonts/plus-jakarta/plus-jakarta.css
+++ b/public/assets/fonts/quicksand/quick-sand.css
@@ -1,17 +1,17 @@
@font-face {
- font-family: "Plus Jakarta Sans";
+ font-family: "Quicksand";
font-weight: 100 900;
font-display: swap;
font-style: normal;
font-named-instance: "Regular";
- src: url("PlusJakartaSans-VariableFont_wght.ttf");
+ src: url("Quicksand-VariableFont_wght.ttf");
}
@font-face {
- font-family: "Plus Jakarta Sans";
+ font-family: "Quicksand";
font-weight: 100 900;
font-display: swap;
font-style: italic;
font-named-instance: "Italic";
- src: url("PlusJakartaSans-Italic-VariableFont_wght.ttf");
+ src: url("quicksand-italic.ttf");
}
diff --git a/public/assets/fonts/quicksand/quicksand-italic.ttf b/public/assets/fonts/quicksand/quicksand-italic.ttf
new file mode 100644
index 0000000..fba1089
Binary files /dev/null and b/public/assets/fonts/quicksand/quicksand-italic.ttf differ
diff --git a/public/favicon-96x96.png b/public/favicon-96x96.png
new file mode 100644
index 0000000..64f3022
Binary files /dev/null and b/public/favicon-96x96.png differ
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 0000000..853e339
Binary files /dev/null and b/public/favicon.ico differ
diff --git a/public/favicon.png b/public/favicon.png
new file mode 100644
index 0000000..5a56091
Binary files /dev/null and b/public/favicon.png differ
diff --git a/public/favicon.svg b/public/favicon.svg
index faa2596..8febcd2 100644
--- a/public/favicon.svg
+++ b/public/favicon.svg
@@ -1,3 +1,3 @@
-
+
\ No newline at end of file
diff --git a/public/site.webmanifest b/public/site.webmanifest
new file mode 100644
index 0000000..75fc2e1
--- /dev/null
+++ b/public/site.webmanifest
@@ -0,0 +1,21 @@
+{
+ "name": "OmniTools",
+ "short_name": "OmniTools",
+ "icons": [
+ {
+ "src": "/web-app-manifest-192x192.png",
+ "sizes": "192x192",
+ "type": "image/png",
+ "purpose": "maskable"
+ },
+ {
+ "src": "/web-app-manifest-512x512.png",
+ "sizes": "512x512",
+ "type": "image/png",
+ "purpose": "maskable"
+ }
+ ],
+ "theme_color": "#ffffff",
+ "background_color": "#ffffff",
+ "display": "standalone"
+}
\ No newline at end of file
diff --git a/public/web-app-manifest-192x192.png b/public/web-app-manifest-192x192.png
new file mode 100644
index 0000000..15210c8
Binary files /dev/null and b/public/web-app-manifest-192x192.png differ
diff --git a/public/web-app-manifest-512x512.png b/public/web-app-manifest-512x512.png
new file mode 100644
index 0000000..4447753
Binary files /dev/null and b/public/web-app-manifest-512x512.png differ
diff --git a/src/assets/logo-white.png b/src/assets/logo-white.png
new file mode 100644
index 0000000..0c936cf
Binary files /dev/null and b/src/assets/logo-white.png differ
diff --git a/src/assets/logo.png b/src/assets/logo.png
index 559d193..95504b1 100644
Binary files a/src/assets/logo.png and b/src/assets/logo.png differ
diff --git a/src/assets/logo.svg b/src/assets/logo.svg
deleted file mode 100644
index faa2596..0000000
--- a/src/assets/logo.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
index e61b10d..5b1bfcf 100644
--- a/src/components/Navbar/index.tsx
+++ b/src/components/Navbar/index.tsx
@@ -6,6 +6,7 @@ import IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu';
import { Link, useNavigate } from 'react-router-dom';
import logo from 'assets/logo.png';
+import logoWhite from 'assets/logo-white.png';
import {
Drawer,
List,
@@ -107,17 +108,22 @@ const Navbar: React.FC = ({
sx={{
background: 'transparent',
boxShadow: 'none',
- color: 'text.primary'
+ color: 'text.primary',
+ pt: 2
}}
>
- 
+ 
{isMobile ? (
<>
diff --git a/src/components/ToolContent.tsx b/src/components/ToolContent.tsx
index 9e261ae..093b2d8 100644
--- a/src/components/ToolContent.tsx
+++ b/src/components/ToolContent.tsx
@@ -46,6 +46,9 @@ interface ToolContentProps extends ToolComponentProps {
setFieldValue: (fieldName: string, value: any) => void
) => ReactNode;
initialValues: Options;
+ /**
+ * should return non-empty array or null
+ */
getGroups: GetGroupsType | null;
compute: (optionsValues: Options, input: Input) => void;
toolInfo?: {
diff --git a/src/components/ToolHeader.tsx b/src/components/ToolHeader.tsx
index 148289c..8d88f13 100644
--- a/src/components/ToolHeader.tsx
+++ b/src/components/ToolHeader.tsx
@@ -6,6 +6,7 @@ import Grid from '@mui/material/Grid';
import { Icon, IconifyIcon } from '@iconify/react';
import { categoriesColors } from '../config/uiConfig';
import { getToolsByCategory } from '@tools/index';
+import { useEffect, useState } from 'react';
const StyledButton = styled(Button)(({ theme }) => ({
backgroundColor: 'white',
@@ -23,11 +24,25 @@ interface ToolHeaderProps {
}
function ToolLinks() {
- const theme = useTheme();
+ const [examplesVisible, setExamplesVisible] = useState(false);
+
+ useEffect(() => {
+ const timeout = setTimeout(() => {
+ const element = document.getElementById('examples');
+ if (element && isVisible(element)) {
+ setExamplesVisible(true);
+ }
+ }, 500);
+
+ return () => clearTimeout(timeout);
+ }, []);
const scrollToElement = (id: string) => {
document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });
};
+ function isVisible(elm: HTMLElement | null) {
+ return !!elm;
+ }
return (
@@ -40,16 +55,18 @@ function ToolLinks() {
Use This Tool
-
- scrollToElement('examples')}
- >
- See Examples
-
-
+ {examplesVisible && (
+
+ scrollToElement('examples')}
+ >
+ See Examples
+
+
+ )}
{/**/}
{/* */}
{/* Learn How to Use*/}
diff --git a/src/components/ToolInputAndResult.tsx b/src/components/ToolInputAndResult.tsx
index 390f560..ccf7837 100644
--- a/src/components/ToolInputAndResult.tsx
+++ b/src/components/ToolInputAndResult.tsx
@@ -12,7 +12,7 @@ export default function ToolInputAndResult({
return (
{input && (
-
+
{input}
)}
diff --git a/src/components/index.css b/src/components/index.css
index 53b3bbe..d03ed03 100644
--- a/src/components/index.css
+++ b/src/components/index.css
@@ -7,5 +7,5 @@ a:hover {
}
* {
- font-family: Plus Jakarta Sans, sans-serif;
+ font-family: Quicksand,sans-serif!important;
}
diff --git a/src/components/input/ToolAudioInput.tsx b/src/components/input/ToolAudioInput.tsx
new file mode 100644
index 0000000..c9090a7
--- /dev/null
+++ b/src/components/input/ToolAudioInput.tsx
@@ -0,0 +1,46 @@
+import React, { useRef } from 'react';
+import { Box, Typography } from '@mui/material';
+import BaseFileInput from './BaseFileInput';
+import { BaseFileInputProps } from './file-input-utils';
+
+interface AudioFileInputProps extends Omit {
+ accept?: string[];
+}
+
+export default function ToolAudioInput({
+ accept = ['audio/*', '.mp3', '.wav', '.aac'],
+ ...props
+}: AudioFileInputProps) {
+ const audioRef = useRef(null);
+
+ return (
+
+ {({ preview }) => (
+
+ {preview ? (
+
+ ) : (
+
+ Drag & drop or import an audio file
+
+ )}
+
+ )}
+
+ );
+}
diff --git a/src/components/input/ToolMultipleAudioInput.tsx b/src/components/input/ToolMultipleAudioInput.tsx
new file mode 100644
index 0000000..daba468
--- /dev/null
+++ b/src/components/input/ToolMultipleAudioInput.tsx
@@ -0,0 +1,172 @@
+import { ReactNode, useContext, useEffect, useRef, useState } from 'react';
+import { Box, useTheme } from '@mui/material';
+import Typography from '@mui/material/Typography';
+import InputHeader from '../InputHeader';
+import InputFooter from './InputFooter';
+import { CustomSnackBarContext } from '../../contexts/CustomSnackBarContext';
+import { isArray } from 'lodash';
+import MusicNoteIcon from '@mui/icons-material/MusicNote';
+
+interface MultiAudioInputComponentProps {
+ accept: string[];
+ title?: string;
+ type: 'audio';
+ value: MultiAudioInput[];
+ onChange: (file: MultiAudioInput[]) => void;
+}
+
+export interface MultiAudioInput {
+ file: File;
+ order: number;
+}
+
+export default function ToolMultipleAudioInput({
+ value,
+ onChange,
+ accept,
+ title,
+ type
+}: MultiAudioInputComponentProps) {
+ const fileInputRef = useRef(null);
+
+ const handleFileChange = (event: React.ChangeEvent) => {
+ const files = event.target.files;
+ if (files)
+ onChange([
+ ...value,
+ ...Array.from(files).map((file) => ({ file, order: value.length }))
+ ]);
+ };
+
+ const handleImportClick = () => {
+ fileInputRef.current?.click();
+ };
+
+ function handleClear() {
+ onChange([]);
+ }
+
+ function fileNameTruncate(fileName: string) {
+ const maxLength = 15;
+ if (fileName.length > maxLength) {
+ return fileName.slice(0, maxLength) + '...';
+ }
+ return fileName;
+ }
+
+ const sortList = () => {
+ const list = [...value];
+ list.sort((a, b) => a.order - b.order);
+ onChange(list);
+ };
+
+ const reorderList = (sourceIndex: number, destinationIndex: number) => {
+ if (destinationIndex === sourceIndex) {
+ return;
+ }
+ const list = [...value];
+
+ if (destinationIndex === 0) {
+ list[sourceIndex].order = list[0].order - 1;
+ sortList();
+ return;
+ }
+
+ if (destinationIndex === list.length - 1) {
+ list[sourceIndex].order = list[list.length - 1].order + 1;
+ sortList();
+ return;
+ }
+
+ if (destinationIndex < sourceIndex) {
+ list[sourceIndex].order =
+ (list[destinationIndex].order + list[destinationIndex - 1].order) / 2;
+ sortList();
+ return;
+ }
+
+ list[sourceIndex].order =
+ (list[destinationIndex].order + list[destinationIndex + 1].order) / 2;
+ sortList();
+ };
+
+ return (
+
+
+
+ {value?.length ? (
+ value.map((file, index) => (
+
+
+
+ {fileNameTruncate(file.file.name)}
+
+
+ {
+ const updatedFiles = value.filter((_, i) => i !== index);
+ onChange(updatedFiles);
+ }}
+ >
+ ✖
+
+
+ ))
+ ) : (
+
+ No files selected
+
+ )}
+
+
+
+
+ );
+}
diff --git a/src/components/options/ToolOptions.tsx b/src/components/options/ToolOptions.tsx
index c145fca..b08d42a 100644
--- a/src/components/options/ToolOptions.tsx
+++ b/src/components/options/ToolOptions.tsx
@@ -6,10 +6,10 @@ import { FormikProps, FormikValues, useFormikContext } from 'formik';
import ToolOptionGroups, { ToolOptionGroup } from './ToolOptionGroups';
export type UpdateField = (field: Y, value: T[Y]) => void;
-
+type NonEmptyArray = [T, ...T[]];
export type GetGroupsType = (
formikProps: FormikProps & { updateField: UpdateField }
-) => ToolOptionGroup[];
+) => NonEmptyArray;
export default function ToolOptions({
children,
@@ -50,7 +50,7 @@ export default function ToolOptions({
-
{tool.name}
-
+
{tool.shortDescription}
diff --git a/src/pages/tools/audio/change-speed/change-speed.service.test.ts b/src/pages/tools/audio/change-speed/change-speed.service.test.ts
new file mode 100644
index 0000000..0ebd463
--- /dev/null
+++ b/src/pages/tools/audio/change-speed/change-speed.service.test.ts
@@ -0,0 +1,46 @@
+import { expect, describe, it, vi } from 'vitest';
+
+// Mock FFmpeg since it doesn't support Node.js
+vi.mock('@ffmpeg/ffmpeg', () => ({
+ FFmpeg: vi.fn().mockImplementation(() => ({
+ loaded: false,
+ load: vi.fn().mockResolvedValue(undefined),
+ writeFile: vi.fn().mockResolvedValue(undefined),
+ exec: vi.fn().mockResolvedValue(undefined),
+ readFile: vi.fn().mockResolvedValue(new Uint8Array([1, 2, 3, 4, 5])),
+ deleteFile: vi.fn().mockResolvedValue(undefined)
+ }))
+}));
+
+vi.mock('@ffmpeg/util', () => ({
+ fetchFile: vi.fn().mockResolvedValue(new Uint8Array([1, 2, 3, 4, 5]))
+}));
+
+import { changeAudioSpeed } from './service';
+import { InitialValuesType } from './types';
+
+describe('changeAudioSpeed', () => {
+ it('should return a new File with the correct name and type', async () => {
+ const mockAudioData = new Uint8Array([0, 1, 2, 3, 4, 5]);
+ const mockFile = new File([mockAudioData], 'test.mp3', {
+ type: 'audio/mp3'
+ });
+ const options: InitialValuesType = {
+ newSpeed: 2,
+ outputFormat: 'mp3'
+ };
+ const result = await changeAudioSpeed(mockFile, options);
+ expect(result).toBeInstanceOf(File);
+ expect(result?.name).toBe('test-2x.mp3');
+ expect(result?.type).toBe('audio/mp3');
+ });
+
+ it('should return null if input is null', async () => {
+ const options: InitialValuesType = {
+ newSpeed: 2,
+ outputFormat: 'mp3'
+ };
+ const result = await changeAudioSpeed(null, options);
+ expect(result).toBeNull();
+ });
+});
diff --git a/src/pages/tools/audio/change-speed/index.tsx b/src/pages/tools/audio/change-speed/index.tsx
new file mode 100644
index 0000000..e799814
--- /dev/null
+++ b/src/pages/tools/audio/change-speed/index.tsx
@@ -0,0 +1,120 @@
+import { Box, FormControlLabel, Radio, RadioGroup } from '@mui/material';
+import React, { useState } from 'react';
+import ToolContent from '@components/ToolContent';
+import { ToolComponentProps } from '@tools/defineTool';
+import { GetGroupsType } from '@components/options/ToolOptions';
+import { InitialValuesType } from './types';
+import ToolAudioInput from '@components/input/ToolAudioInput';
+import ToolFileResult from '@components/result/ToolFileResult';
+import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
+import RadioWithTextField from '@components/options/RadioWithTextField';
+import { changeAudioSpeed } from './service';
+
+const initialValues: InitialValuesType = {
+ newSpeed: 2,
+ outputFormat: 'mp3'
+};
+
+const formatOptions = [
+ { label: 'MP3', value: 'mp3' },
+ { label: 'AAC', value: 'aac' },
+ { label: 'WAV', value: 'wav' }
+];
+
+export default function ChangeSpeed({
+ title,
+ longDescription
+}: ToolComponentProps) {
+ const [input, setInput] = useState(null);
+ const [result, setResult] = useState(null);
+ const [loading, setLoading] = useState(false);
+
+ const compute = async (
+ optionsValues: InitialValuesType,
+ input: File | null
+ ) => {
+ setLoading(true);
+ try {
+ const newFile = await changeAudioSpeed(input, optionsValues);
+ setResult(newFile);
+ } catch (err) {
+ setResult(null);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const getGroups: GetGroupsType | null = ({
+ values,
+ updateField
+ }) => [
+ {
+ title: 'New Audio Speed',
+ component: (
+
+ updateField('newSpeed', Number(val))}
+ description="Default multiplier: 2 means 2x faster"
+ type="number"
+ />
+
+ )
+ },
+ {
+ title: 'Output Format',
+ component: (
+
+
+ updateField(
+ 'outputFormat',
+ e.target.value as 'mp3' | 'aac' | 'wav'
+ )
+ }
+ >
+ {formatOptions.map((opt) => (
+
+
+ )
+ }
+ ];
+ return (
+ {
+ if (!input) return null;
+ const { newSpeed, outputFormat } = options;
+ let ffmpeg: FFmpeg | null = null;
+ let ffmpegLoaded = false;
+ try {
+ ffmpeg = new FFmpeg();
+ if (!ffmpegLoaded) {
+ await ffmpeg.load({
+ wasmURL:
+ 'https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.12.9/dist/esm/ffmpeg-core.wasm'
+ });
+ ffmpegLoaded = true;
+ }
+ const fileName = input.name;
+ const outputName = `output.${outputFormat}`;
+ await ffmpeg.writeFile(fileName, await fetchFile(input));
+ const audioFilter = computeAudioFilter(newSpeed);
+ let args = ['-i', fileName, '-filter:a', audioFilter];
+ if (outputFormat === 'mp3') {
+ args.push('-b:a', '192k', '-f', 'mp3', outputName);
+ } else if (outputFormat === 'aac') {
+ args.push('-c:a', 'aac', '-b:a', '192k', '-f', 'adts', outputName);
+ } else if (outputFormat === 'wav') {
+ args.push(
+ '-acodec',
+ 'pcm_s16le',
+ '-ar',
+ '44100',
+ '-ac',
+ '2',
+ '-f',
+ 'wav',
+ outputName
+ );
+ }
+ await ffmpeg.exec(args);
+ const data = await ffmpeg.readFile(outputName);
+ let mimeType = 'audio/mp3';
+ if (outputFormat === 'aac') mimeType = 'audio/aac';
+ if (outputFormat === 'wav') mimeType = 'audio/wav';
+ const blob = new Blob([data], { type: mimeType });
+ const newFile = new File(
+ [blob],
+ fileName.replace(/\.[^/.]+$/, `-${newSpeed}x.${outputFormat}`),
+ { type: mimeType }
+ );
+ await ffmpeg.deleteFile(fileName);
+ await ffmpeg.deleteFile(outputName);
+ return newFile;
+ } catch (err) {
+ console.error(`Failed to process audio: ${err}`);
+ return null;
+ }
+}
diff --git a/src/pages/tools/audio/change-speed/types.ts b/src/pages/tools/audio/change-speed/types.ts
new file mode 100644
index 0000000..587fc4f
--- /dev/null
+++ b/src/pages/tools/audio/change-speed/types.ts
@@ -0,0 +1,4 @@
+export type InitialValuesType = {
+ newSpeed: number;
+ outputFormat: 'mp3' | 'aac' | 'wav';
+};
diff --git a/src/pages/tools/audio/extract-audio/extract-audio.service.test.ts b/src/pages/tools/audio/extract-audio/extract-audio.service.test.ts
new file mode 100644
index 0000000..88624b9
--- /dev/null
+++ b/src/pages/tools/audio/extract-audio/extract-audio.service.test.ts
@@ -0,0 +1,50 @@
+import { describe, it, expect, vi, beforeAll } from 'vitest';
+
+// Mock the service module BEFORE importing it
+vi.mock('./service', () => ({
+ extractAudioFromVideo: vi.fn(async (input, options) => {
+ const ext = options.outputFormat;
+ return new File([new Blob(['audio data'])], `mock_audio.${ext}`, {
+ type: `audio/${ext}`
+ });
+ })
+}));
+
+import { extractAudioFromVideo } from './service';
+import { InitialValuesType } from './types';
+
+function createMockVideoFile(): File {
+ return new File(['video data'], 'test.mp4', { type: 'video/mp4' });
+}
+
+describe('extractAudioFromVideo (mocked)', () => {
+ let videoFile: File;
+
+ beforeAll(() => {
+ videoFile = createMockVideoFile();
+ });
+
+ it('should extract audio as AAC', async () => {
+ const options: InitialValuesType = { outputFormat: 'aac' };
+ const audioFile = await extractAudioFromVideo(videoFile, options);
+ expect(audioFile).toBeInstanceOf(File);
+ expect(audioFile.name.endsWith('.aac')).toBe(true);
+ expect(audioFile.type).toBe('audio/aac');
+ });
+
+ it('should extract audio as MP3', async () => {
+ const options: InitialValuesType = { outputFormat: 'mp3' };
+ const audioFile = await extractAudioFromVideo(videoFile, options);
+ expect(audioFile).toBeInstanceOf(File);
+ expect(audioFile.name.endsWith('.mp3')).toBe(true);
+ expect(audioFile.type).toBe('audio/mp3');
+ });
+
+ it('should extract audio as WAV', async () => {
+ const options: InitialValuesType = { outputFormat: 'wav' };
+ const audioFile = await extractAudioFromVideo(videoFile, options);
+ expect(audioFile).toBeInstanceOf(File);
+ expect(audioFile.name.endsWith('.wav')).toBe(true);
+ expect(audioFile.type).toBe('audio/wav');
+ });
+});
diff --git a/src/pages/tools/audio/extract-audio/index.tsx b/src/pages/tools/audio/extract-audio/index.tsx
new file mode 100644
index 0000000..f5012ec
--- /dev/null
+++ b/src/pages/tools/audio/extract-audio/index.tsx
@@ -0,0 +1,91 @@
+import { Box } from '@mui/material';
+import React, { useState } from 'react';
+import ToolContent from '@components/ToolContent';
+import { ToolComponentProps } from '@tools/defineTool';
+import { extractAudioFromVideo } from './service';
+import { InitialValuesType } from './types';
+import ToolVideoInput from '@components/input/ToolVideoInput';
+import { GetGroupsType } from '@components/options/ToolOptions';
+import ToolFileResult from '@components/result/ToolFileResult';
+import SelectWithDesc from '@components/options/SelectWithDesc';
+
+const initialValues: InitialValuesType = {
+ outputFormat: 'aac'
+};
+
+export default function ExtractAudio({
+ title,
+ longDescription
+}: ToolComponentProps) {
+ const [file, setFile] = useState(null);
+ const [audioFile, setAudioFile] = useState(null);
+ const [loading, setLoading] = useState(false);
+
+ const getGroups: GetGroupsType = ({
+ values,
+ updateField
+ }) => {
+ return [
+ {
+ title: 'Output Format',
+ component: (
+
+ {
+ updateField('outputFormat', value.toString());
+ }}
+ options={[
+ { label: 'AAC', value: 'aac' },
+ { label: 'MP3', value: 'mp3' },
+ { label: 'WAV', value: 'wav' }
+ ]}
+ description={
+ 'Select the format for the audio to be extracted as.'
+ }
+ />
+
+ )
+ }
+ ];
+ };
+
+ const compute = async (values: InitialValuesType, input: File | null) => {
+ if (!input) return;
+ try {
+ setLoading(true);
+ const audioFileObj = await extractAudioFromVideo(input, values);
+ setAudioFile(audioFileObj);
+ } catch (err) {
+ console.error(err);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ return (
+ {
+ if (!ffmpeg.loaded) {
+ await ffmpeg.load({
+ wasmURL:
+ 'https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.12.9/dist/esm/ffmpeg-core.wasm'
+ });
+ }
+
+ const inputName = 'input.mp4';
+ await ffmpeg.writeFile(inputName, await fetchFile(input));
+
+ const configuredOutputAudioFormat = options.outputFormat;
+ const outputName = `output.${configuredOutputAudioFormat}`;
+ const args: string[] = ['-i', inputName, '-vn'];
+
+ if (configuredOutputAudioFormat === 'mp3') {
+ args.push(
+ '-ar',
+ '44100',
+ '-ac',
+ '2',
+ '-b:a',
+ '192k',
+ '-f',
+ 'mp3',
+ outputName
+ );
+ } else if (configuredOutputAudioFormat === 'wav') {
+ args.push(
+ '-acodec',
+ 'pcm_s16le',
+ '-ar',
+ '44100',
+ '-ac',
+ '2',
+ '-f',
+ 'wav',
+ outputName
+ );
+ } else {
+ // Default to AAC or copy
+ args.push('-acodec', 'copy', outputName);
+ }
+
+ await ffmpeg.exec(args);
+
+ const extractedAudio = await ffmpeg.readFile(outputName);
+
+ return new File(
+ [
+ new Blob([extractedAudio], {
+ type: `audio/${configuredOutputAudioFormat}`
+ })
+ ],
+ `${input.name.replace(
+ /\.[^/.]+$/,
+ ''
+ )}_audio.${configuredOutputAudioFormat}`,
+ { type: `audio/${configuredOutputAudioFormat}` }
+ );
+}
diff --git a/src/pages/tools/audio/extract-audio/types.ts b/src/pages/tools/audio/extract-audio/types.ts
new file mode 100644
index 0000000..d6d4f36
--- /dev/null
+++ b/src/pages/tools/audio/extract-audio/types.ts
@@ -0,0 +1,3 @@
+export type InitialValuesType = {
+ outputFormat: string;
+};
diff --git a/src/pages/tools/audio/index.ts b/src/pages/tools/audio/index.ts
new file mode 100644
index 0000000..3596a1c
--- /dev/null
+++ b/src/pages/tools/audio/index.ts
@@ -0,0 +1,11 @@
+import { tool as audioMergeAudio } from './merge-audio/meta';
+import { tool as audioTrim } from './trim/meta';
+import { tool as audioChangeSpeed } from './change-speed/meta';
+import { tool as audioExtractAudio } from './extract-audio/meta';
+
+export const audioTools = [
+ audioExtractAudio,
+ audioChangeSpeed,
+ audioTrim,
+ audioMergeAudio
+];
diff --git a/src/pages/tools/audio/merge-audio/index.tsx b/src/pages/tools/audio/merge-audio/index.tsx
new file mode 100644
index 0000000..09acd35
--- /dev/null
+++ b/src/pages/tools/audio/merge-audio/index.tsx
@@ -0,0 +1,112 @@
+import { Box, FormControlLabel, Radio, RadioGroup } from '@mui/material';
+import React, { useState } from 'react';
+import ToolContent from '@components/ToolContent';
+import { ToolComponentProps } from '@tools/defineTool';
+import { GetGroupsType } from '@components/options/ToolOptions';
+import { InitialValuesType } from './types';
+import ToolMultipleAudioInput, {
+ MultiAudioInput
+} from '@components/input/ToolMultipleAudioInput';
+import ToolFileResult from '@components/result/ToolFileResult';
+import { mergeAudioFiles } from './service';
+
+const initialValues: InitialValuesType = {
+ outputFormat: 'mp3'
+};
+
+const formatOptions = [
+ { label: 'MP3', value: 'mp3' },
+ { label: 'AAC', value: 'aac' },
+ { label: 'WAV', value: 'wav' }
+];
+
+export default function MergeAudio({
+ title,
+ longDescription
+}: ToolComponentProps) {
+ const [input, setInput] = useState([]);
+ const [result, setResult] = useState(null);
+ const [loading, setLoading] = useState(false);
+
+ const compute = async (
+ optionsValues: InitialValuesType,
+ input: MultiAudioInput[]
+ ) => {
+ if (input.length === 0) return;
+ setLoading(true);
+ try {
+ const files = input.map((item) => item.file);
+ const mergedFile = await mergeAudioFiles(files, optionsValues);
+ setResult(mergedFile);
+ } catch (err) {
+ console.error(`Failed to merge audio: ${err}`);
+ setResult(null);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const getGroups: GetGroupsType | null = ({
+ values,
+ updateField
+ }) => [
+ {
+ title: 'Output Format',
+ component: (
+
+
+ updateField(
+ 'outputFormat',
+ e.target.value as 'mp3' | 'aac' | 'wav'
+ )
+ }
+ >
+ {formatOptions.map((opt) => (
+
+
+ )
+ }
+ ];
+
+ return (
+ {
+ if (!ffmpeg.loaded) {
+ await ffmpeg.load({
+ wasmURL:
+ 'https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.12.9/dist/esm/ffmpeg-core.wasm'
+ });
+ }
+
+ if (inputs.length === 0) {
+ throw new Error('No input files provided');
+ }
+
+ const { outputFormat } = options;
+ const outputName = `output.${outputFormat}`;
+
+ // 1. Convert all inputs to WAV
+ const tempWavNames: string[] = [];
+ for (let i = 0; i < inputs.length; i++) {
+ const inputName = `input${i}`;
+ const tempWavName = `temp${i}.wav`;
+ await ffmpeg.writeFile(inputName, await fetchFile(inputs[i]));
+ await ffmpeg.exec([
+ '-i',
+ inputName,
+ '-acodec',
+ 'pcm_s16le',
+ '-ar',
+ '44100',
+ '-ac',
+ '2',
+ tempWavName
+ ]);
+ tempWavNames.push(tempWavName);
+ await ffmpeg.deleteFile(inputName);
+ }
+
+ // 2. Create file list for concat
+ const fileListName = 'filelist.txt';
+ const fileListContent = tempWavNames
+ .map((name) => `file '${name}'`)
+ .join('\n');
+ await ffmpeg.writeFile(fileListName, fileListContent);
+
+ // 3. Concatenate WAV files
+ const concatWav = 'concat.wav';
+ await ffmpeg.exec([
+ '-f',
+ 'concat',
+ '-safe',
+ '0',
+ '-i',
+ fileListName,
+ '-c',
+ 'copy',
+ concatWav
+ ]);
+
+ // 4. Convert concatenated WAV to requested output format
+ let finalOutput = concatWav;
+ if (outputFormat !== 'wav') {
+ const args = ['-i', concatWav];
+ if (outputFormat === 'mp3') {
+ args.push(
+ '-ar',
+ '44100',
+ '-ac',
+ '2',
+ '-b:a',
+ '192k',
+ '-f',
+ 'mp3',
+ outputName
+ );
+ } else if (outputFormat === 'aac') {
+ args.push('-c:a', 'aac', '-b:a', '192k', '-f', 'adts', outputName);
+ }
+ await ffmpeg.exec(args);
+ finalOutput = outputName;
+ }
+
+ const mergedAudio = await ffmpeg.readFile(finalOutput);
+
+ let mimeType = 'audio/wav';
+ if (outputFormat === 'mp3') mimeType = 'audio/mp3';
+ if (outputFormat === 'aac') mimeType = 'audio/aac';
+
+ // Clean up files
+ for (const tempWavName of tempWavNames) {
+ await ffmpeg.deleteFile(tempWavName);
+ }
+ await ffmpeg.deleteFile(fileListName);
+ await ffmpeg.deleteFile(concatWav);
+ if (outputFormat !== 'wav') {
+ await ffmpeg.deleteFile(outputName);
+ }
+
+ return new File(
+ [
+ new Blob([mergedAudio], {
+ type: mimeType
+ })
+ ],
+ `merged_audio.${outputFormat}`,
+ { type: mimeType }
+ );
+}
diff --git a/src/pages/tools/audio/merge-audio/types.ts b/src/pages/tools/audio/merge-audio/types.ts
new file mode 100644
index 0000000..2a7c90c
--- /dev/null
+++ b/src/pages/tools/audio/merge-audio/types.ts
@@ -0,0 +1,3 @@
+export type InitialValuesType = {
+ outputFormat: 'mp3' | 'aac' | 'wav';
+};
diff --git a/src/pages/tools/audio/trim/index.tsx b/src/pages/tools/audio/trim/index.tsx
new file mode 100644
index 0000000..07fed95
--- /dev/null
+++ b/src/pages/tools/audio/trim/index.tsx
@@ -0,0 +1,128 @@
+import { Box, FormControlLabel, Radio, RadioGroup } from '@mui/material';
+import React, { useState } from 'react';
+import ToolContent from '@components/ToolContent';
+import { ToolComponentProps } from '@tools/defineTool';
+import { GetGroupsType } from '@components/options/ToolOptions';
+import { InitialValuesType } from './types';
+import ToolAudioInput from '@components/input/ToolAudioInput';
+import ToolFileResult from '@components/result/ToolFileResult';
+import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
+import { trimAudio } from './service';
+
+const initialValues: InitialValuesType = {
+ startTime: '00:00:00',
+ endTime: '00:01:00',
+ outputFormat: 'mp3'
+};
+
+const formatOptions = [
+ { label: 'MP3', value: 'mp3' },
+ { label: 'AAC', value: 'aac' },
+ { label: 'WAV', value: 'wav' }
+];
+
+export default function Trim({ title, longDescription }: ToolComponentProps) {
+ const [input, setInput] = useState(null);
+ const [result, setResult] = useState(null);
+ const [loading, setLoading] = useState(false);
+
+ const compute = async (
+ optionsValues: InitialValuesType,
+ input: File | null
+ ) => {
+ if (!input) return;
+ setLoading(true);
+ try {
+ const trimmedFile = await trimAudio(input, optionsValues);
+ setResult(trimmedFile);
+ } catch (err) {
+ console.error(`Failed to trim audio: ${err}`);
+ setResult(null);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const getGroups: GetGroupsType | null = ({
+ values,
+ updateField
+ }) => [
+ {
+ title: 'Time Settings',
+ component: (
+
+ updateField('startTime', val)}
+ description="Start time in format HH:MM:SS (e.g., 00:00:30)"
+ label="Start Time"
+ />
+
+ updateField('endTime', val)}
+ description="End time in format HH:MM:SS (e.g., 00:01:30)"
+ label="End Time"
+ />
+
+
+ )
+ },
+ {
+ title: 'Output Format',
+ component: (
+
+
+ updateField(
+ 'outputFormat',
+ e.target.value as 'mp3' | 'aac' | 'wav'
+ )
+ }
+ >
+ {formatOptions.map((opt) => (
+
+
+ )
+ }
+ ];
+
+ return (
+ {
+ if (!ffmpeg.loaded) {
+ await ffmpeg.load({
+ wasmURL:
+ 'https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.12.9/dist/esm/ffmpeg-core.wasm'
+ });
+ }
+
+ const inputName = 'input.mp3';
+ await ffmpeg.writeFile(inputName, await fetchFile(input));
+
+ const { startTime, endTime, outputFormat } = options;
+ const outputName = `output.${outputFormat}`;
+
+ // Build FFmpeg arguments for trimming
+ let args: string[] = [
+ '-i',
+ inputName,
+ '-ss',
+ startTime, // Start time
+ '-to',
+ endTime, // End time
+ '-c',
+ 'copy' // Copy without re-encoding for speed
+ ];
+
+ // Add format-specific arguments
+ if (outputFormat === 'mp3') {
+ args = [
+ '-i',
+ inputName,
+ '-ss',
+ startTime,
+ '-to',
+ endTime,
+ '-ar',
+ '44100',
+ '-ac',
+ '2',
+ '-b:a',
+ '192k',
+ '-f',
+ 'mp3',
+ outputName
+ ];
+ } else if (outputFormat === 'aac') {
+ args = [
+ '-i',
+ inputName,
+ '-ss',
+ startTime,
+ '-to',
+ endTime,
+ '-c:a',
+ 'aac',
+ '-b:a',
+ '192k',
+ '-f',
+ 'adts',
+ outputName
+ ];
+ } else if (outputFormat === 'wav') {
+ args = [
+ '-i',
+ inputName,
+ '-ss',
+ startTime,
+ '-to',
+ endTime,
+ '-acodec',
+ 'pcm_s16le',
+ '-ar',
+ '44100',
+ '-ac',
+ '2',
+ '-f',
+ 'wav',
+ outputName
+ ];
+ }
+
+ await ffmpeg.exec(args);
+
+ const trimmedAudio = await ffmpeg.readFile(outputName);
+
+ let mimeType = 'audio/mp3';
+ if (outputFormat === 'aac') mimeType = 'audio/aac';
+ if (outputFormat === 'wav') mimeType = 'audio/wav';
+
+ return new File(
+ [
+ new Blob([trimmedAudio], {
+ type: mimeType
+ })
+ ],
+ `${input.name.replace(/\.[^/.]+$/, '')}_trimmed.${outputFormat}`,
+ { type: mimeType }
+ );
+}
diff --git a/src/pages/tools/audio/trim/trim.service.test.ts b/src/pages/tools/audio/trim/trim.service.test.ts
new file mode 100644
index 0000000..5d9faa5
--- /dev/null
+++ b/src/pages/tools/audio/trim/trim.service.test.ts
@@ -0,0 +1,58 @@
+import { expect, describe, it, vi } from 'vitest';
+
+// Mock FFmpeg since it doesn't support Node.js
+vi.mock('@ffmpeg/ffmpeg', () => ({
+ FFmpeg: vi.fn().mockImplementation(() => ({
+ loaded: false,
+ load: vi.fn().mockResolvedValue(undefined),
+ writeFile: vi.fn().mockResolvedValue(undefined),
+ exec: vi.fn().mockResolvedValue(undefined),
+ readFile: vi.fn().mockResolvedValue(new Uint8Array([1, 2, 3, 4, 5])),
+ deleteFile: vi.fn().mockResolvedValue(undefined)
+ }))
+}));
+
+vi.mock('@ffmpeg/util', () => ({
+ fetchFile: vi.fn().mockResolvedValue(new Uint8Array([1, 2, 3, 4, 5]))
+}));
+
+import { trimAudio } from './service';
+
+describe('trimAudio', () => {
+ it('should trim audio file with valid time parameters', async () => {
+ // Create a mock audio file
+ const mockAudioData = new Uint8Array([0, 1, 2, 3, 4, 5]);
+ const mockFile = new File([mockAudioData], 'test.mp3', {
+ type: 'audio/mp3'
+ });
+
+ const options = {
+ startTime: '00:00:10',
+ endTime: '00:00:20',
+ outputFormat: 'mp3' as const
+ };
+
+ const result = await trimAudio(mockFile, options);
+ expect(result).toBeInstanceOf(File);
+ expect(result.name).toContain('_trimmed.mp3');
+ expect(result.type).toBe('audio/mp3');
+ });
+
+ it('should handle different output formats', async () => {
+ const mockAudioData = new Uint8Array([0, 1, 2, 3, 4, 5]);
+ const mockFile = new File([mockAudioData], 'test.wav', {
+ type: 'audio/wav'
+ });
+
+ const options = {
+ startTime: '00:00:00',
+ endTime: '00:00:30',
+ outputFormat: 'wav' as const
+ };
+
+ const result = await trimAudio(mockFile, options);
+ expect(result).toBeInstanceOf(File);
+ expect(result.name).toContain('_trimmed.wav');
+ expect(result.type).toBe('audio/wav');
+ });
+});
diff --git a/src/pages/tools/audio/trim/types.ts b/src/pages/tools/audio/trim/types.ts
new file mode 100644
index 0000000..425f07e
--- /dev/null
+++ b/src/pages/tools/audio/trim/types.ts
@@ -0,0 +1,5 @@
+export type InitialValuesType = {
+ startTime: string;
+ endTime: string;
+ outputFormat: 'mp3' | 'aac' | 'wav';
+};
diff --git a/src/pages/tools/image/generic/convert-to-jpg/index.tsx b/src/pages/tools/image/generic/convert-to-jpg/index.tsx
new file mode 100644
index 0000000..c7e01b6
--- /dev/null
+++ b/src/pages/tools/image/generic/convert-to-jpg/index.tsx
@@ -0,0 +1,164 @@
+import { Box, Slider, Typography } from '@mui/material';
+import ToolImageInput from 'components/input/ToolImageInput';
+import ColorSelector from 'components/options/ColorSelector';
+import ToolFileResult from 'components/result/ToolFileResult';
+import Color from 'color';
+import React, { useState } from 'react';
+import * as Yup from 'yup';
+import ToolContent from '@components/ToolContent';
+import { ToolComponentProps } from '@tools/defineTool';
+
+const initialValues = {
+ quality: 85,
+ backgroundColor: '#ffffff'
+};
+
+const validationSchema = Yup.object({
+ quality: Yup.number().min(1).max(100).required('Quality is required'),
+ backgroundColor: Yup.string().required('Background color is required')
+});
+
+export default function ConvertToJpg({ title }: ToolComponentProps) {
+ const [input, setInput] = useState(null);
+ const [result, setResult] = useState(null);
+
+ const compute = async (
+ optionsValues: typeof initialValues,
+ input: any
+ ): Promise => {
+ if (!input) return;
+
+ const processImage = async (
+ file: File,
+ quality: number,
+ backgroundColor: string
+ ) => {
+ const canvas = document.createElement('canvas');
+ const ctx = canvas.getContext('2d');
+ if (ctx == null) return;
+
+ const img = new Image();
+ img.src = URL.createObjectURL(file);
+
+ try {
+ await img.decode();
+
+ canvas.width = img.width;
+ canvas.height = img.height;
+
+ // Fill background with selected color (important for transparency)
+ let bgColor: [number, number, number];
+ try {
+ //@ts-ignore
+ bgColor = Color(backgroundColor).rgb().array();
+ } catch (err) {
+ bgColor = [255, 255, 255]; // Default to white
+ }
+
+ ctx.fillStyle = `rgb(${bgColor[0]}, ${bgColor[1]}, ${bgColor[2]})`;
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+ // Draw the image on top
+ ctx.drawImage(img, 0, 0);
+
+ // Convert to JPG with specified quality
+ canvas.toBlob(
+ (blob) => {
+ if (blob) {
+ const fileName = file.name.replace(/\.[^/.]+$/, '') + '.jpg';
+ const newFile = new File([blob], fileName, {
+ type: 'image/jpeg'
+ });
+ setResult(newFile);
+ }
+ },
+ 'image/jpeg',
+ quality / 100
+ );
+ } catch (error) {
+ console.error('Error processing image:', error);
+ } finally {
+ URL.revokeObjectURL(img.src);
+ }
+ };
+
+ processImage(input, optionsValues.quality, optionsValues.backgroundColor);
+ };
+
+ return (
+
+
+
+ JPG Quality: {values.quality}%
+
+
+ updateField(
+ 'quality',
+ Array.isArray(value) ? value[0] : value
+ )
+ }
+ min={1}
+ max={100}
+ step={1}
+ valueLabelDisplay="auto"
+ valueLabelFormat={(value) => `${value}%`}
+ sx={{ mt: 1 }}
+ />
+
+ Higher values = better quality, larger file size
+
+
+
+ updateField('backgroundColor', val)}
+ description={'Background color (for transparent images)'}
+ inputProps={{ 'data-testid': 'background-color-input' }}
+ />
+
+ )
+ }
+ ]}
+ compute={compute}
+ setInput={setInput}
+ />
+ );
+}
diff --git a/src/pages/tools/image/generic/convert-to-jpg/meta.ts b/src/pages/tools/image/generic/convert-to-jpg/meta.ts
new file mode 100644
index 0000000..7f4c548
--- /dev/null
+++ b/src/pages/tools/image/generic/convert-to-jpg/meta.ts
@@ -0,0 +1,27 @@
+import { defineTool } from '@tools/defineTool';
+import { lazy } from 'react';
+
+export const tool = defineTool('image-generic', {
+ name: 'Convert Images to JPG',
+ path: 'convert-to-jpg',
+ icon: 'ph:file-jpg-thin',
+ description:
+ 'Convert various image formats (PNG, GIF, TIF, PSD, SVG, WEBP, HEIC, RAW) to JPG with customizable quality and background color settings.',
+ shortDescription: 'Convert images to JPG with quality control',
+ keywords: [
+ 'convert',
+ 'jpg',
+ 'jpeg',
+ 'png',
+ 'gif',
+ 'tiff',
+ 'webp',
+ 'heic',
+ 'raw',
+ 'psd',
+ 'svg',
+ 'quality',
+ 'compression'
+ ],
+ component: lazy(() => import('./index'))
+});
diff --git a/src/pages/tools/image/generic/editor/index.tsx b/src/pages/tools/image/generic/editor/index.tsx
new file mode 100644
index 0000000..203ea4e
--- /dev/null
+++ b/src/pages/tools/image/generic/editor/index.tsx
@@ -0,0 +1,123 @@
+import React, { useCallback, useState } from 'react';
+import { Box } from '@mui/material';
+import ToolImageInput from '@components/input/ToolImageInput';
+import ToolContent from '@components/ToolContent';
+import { ToolComponentProps } from '@tools/defineTool';
+
+// Import the image editor with proper typing
+import FilerobotImageEditor, {
+ FilerobotImageEditorConfig
+} from 'react-filerobot-image-editor';
+
+export default function ImageEditor({ title }: ToolComponentProps) {
+ const [input, setInput] = useState(null);
+ const [isEditorOpen, setIsEditorOpen] = useState(false);
+ const [imageUrl, setImageUrl] = useState(null);
+
+ // Handle file input change
+ const handleInputChange = useCallback((file: File | null) => {
+ setInput(file);
+ if (file) {
+ // Create object URL for the image editor
+ const url = URL.createObjectURL(file);
+ setImageUrl(url);
+ setIsEditorOpen(true);
+ } else {
+ setImageUrl(null);
+ }
+ }, []);
+
+ const onCloseEditor = (reason: string) => {
+ setIsEditorOpen(false);
+ setImageUrl(null);
+ };
+
+ // Handle save from image editor
+ const handleSave: FilerobotImageEditorConfig['onSave'] = (
+ editedImageObject,
+ designState
+ ) => {
+ if (editedImageObject && editedImageObject.imageBase64) {
+ // Convert base64 to blob
+ const base64Data = editedImageObject.imageBase64.split(',')[1];
+ const byteCharacters = atob(base64Data);
+ const byteNumbers = new Array(byteCharacters.length);
+
+ for (let i = 0; i < byteCharacters.length; i++) {
+ byteNumbers[i] = byteCharacters.charCodeAt(i);
+ }
+
+ const byteArray = new Uint8Array(byteNumbers);
+ const blob = new Blob([byteArray], { type: editedImageObject.mimeType });
+
+ const editedFile = new File(
+ [blob],
+ editedImageObject.fullName ?? 'edited.png',
+ {
+ type: editedImageObject.mimeType
+ }
+ );
+ // Create a temporary download link
+ const url = URL.createObjectURL(editedFile);
+ const a = document.createElement('a');
+ a.href = url;
+ a.download = editedFile.name; // This will be the name of the downloaded file
+ document.body.appendChild(a);
+ a.click();
+ document.body.removeChild(a);
+
+ // Release the blob URL
+ URL.revokeObjectURL(url);
+ }
+ };
+
+ const getDefaultImageName = () => {
+ if (!input) return;
+ const originalName = input?.name || 'edited-image';
+ const nameWithoutExt = originalName.replace(/\.[^/.]+$/, '');
+ const editedFileName = `${nameWithoutExt}-edited`;
+ return editedFileName;
+ };
+
+ return (
+
+
+ )
+ ) : (
+
+
+ }
+ toolInfo={{
+ title: 'PDF Editor',
+ description:
+ 'Edit, annotate, highlight, fill forms, and export your PDFs entirely in the browser. Add text, drawings, signatures, and more to your PDF documents with this powerful online editor.'
+ }}
+ compute={() => {
+ /* no background compute required */
+ }}
+ />
+ );
+}
diff --git a/src/pages/tools/pdf/editor/meta.ts b/src/pages/tools/pdf/editor/meta.ts
new file mode 100644
index 0000000..8bb1ee0
--- /dev/null
+++ b/src/pages/tools/pdf/editor/meta.ts
@@ -0,0 +1,28 @@
+import { defineTool } from '@tools/defineTool';
+import { lazy } from 'react';
+
+export const tool = defineTool('pdf', {
+ name: 'PDF Editor',
+ path: 'editor',
+ icon: 'mdi:file-document-edit',
+ description:
+ 'Advanced PDF editor with annotation, form-fill, highlight, and export capabilities. Edit your PDFs directly in the browser with professional-grade tools including text insertion, drawing, highlighting, signing and form filling.',
+ shortDescription:
+ 'Edit PDFs with advanced annotation, signing and editing tools',
+ keywords: [
+ 'pdf',
+ 'editor',
+ 'edit',
+ 'annotate',
+ 'highlight',
+ 'form',
+ 'fill',
+ 'text',
+ 'drawing',
+ 'signature',
+ 'export',
+ 'annotation',
+ 'markup'
+ ],
+ component: lazy(() => import('./index'))
+});
diff --git a/src/pages/tools/pdf/index.ts b/src/pages/tools/pdf/index.ts
index 2f9a4a1..6c3e03f 100644
--- a/src/pages/tools/pdf/index.ts
+++ b/src/pages/tools/pdf/index.ts
@@ -6,8 +6,10 @@ import { DefinedTool } from '@tools/defineTool';
import { tool as compressPdfTool } from './compress-pdf/meta';
import { tool as protectPdfTool } from './protect-pdf/meta';
import { meta as pdfToEpub } from './pdf-to-epub/meta';
+import { tool as pdfEditor } from './editor/meta';
export const pdfTools: DefinedTool[] = [
+ pdfEditor,
splitPdfMeta,
pdfRotatePdf,
compressPdfTool,
diff --git a/src/pages/tools/string/censor/index.tsx b/src/pages/tools/string/censor/index.tsx
new file mode 100644
index 0000000..3f6bb60
--- /dev/null
+++ b/src/pages/tools/string/censor/index.tsx
@@ -0,0 +1,158 @@
+import { Box } from '@mui/material';
+import { useState } from 'react';
+import ToolTextResult from '@components/result/ToolTextResult';
+import { GetGroupsType } from '@components/options/ToolOptions';
+import { censorText } from './service';
+import ToolTextInput from '@components/input/ToolTextInput';
+import { InitialValuesType } from './types';
+import ToolContent from '@components/ToolContent';
+import { CardExampleType } from '@components/examples/ToolExamples';
+import { ToolComponentProps } from '@tools/defineTool';
+import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
+import SelectWithDesc from '@components/options/SelectWithDesc';
+import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
+
+const initialValues: InitialValuesType = {
+ wordsToCensor: '',
+ censoredBySymbol: true,
+ censorSymbol: '█',
+ eachLetter: true,
+ censorWord: 'CENSORED'
+};
+
+const exampleCards: CardExampleType[] = [
+ {
+ title: 'Censor a Word in a Quote',
+ description: `In this example, we hide the unpleasant word "idiot" from Jim Rohn's quote. We specify this word in the words-to-censor option and mask it with a neat smiling face character "☺".`,
+ sampleText:
+ 'Motivation alone is not enough. If you have an idiot and you motivate him, now you have a motivated idiot. Jim Rohn',
+ sampleResult:
+ 'Motivation alone is not enough. If you have an ☺ and you motivate him, now you have a motivated ☺. Jim Rohn',
+ sampleOptions: {
+ ...initialValues,
+ wordsToCensor: 'idiot',
+ censorSymbol: '☺',
+ eachLetter: false
+ }
+ },
+ {
+ title: 'Censor an Excerpt',
+ description: `In this example, we censor multiple words from an excerpt from the novel "The Guns of Avalon" by Roger Zelazny. To do this, we write out all unnecessary words in the multi-line text option and select the "Use a Symbol to Censor" censoring mode. We activate the "Mask Each Letter" option so that in place of each word exactly as many block characters "█" appeared as there are letters in that word.`,
+ sampleText:
+ '“In the mirrors of the many judgments, my hands are the color of blood. I sometimes fancy myself an evil which exists to oppose other evils; and on that great Day of which the prophets speak but in which they do not truly believe, on the day the world is utterly cleansed of evil, then I too will go down into darkness, swallowing curses. Until then, I will not wash my hands nor let them hang useless.” ― Roger Zelazny, The Guns of Avalon',
+ sampleResult:
+ '“In the mirrors of the many judgments, my hands are the color of █████. I sometimes fancy myself an ████ which exists to oppose other █████; and on that great Day of which the prophets speak but in which they do not truly believe, on the day the world is utterly cleansed of ████, then I too will go down into ████████, swallowing ██████. Until then, I will not wash my hands nor let them hang useless.” ― Roger Zelazny, The Guns of Avalon',
+ sampleOptions: {
+ ...initialValues,
+ wordsToCensor: 'blood\nevil\ndarkness\ncurses',
+ eachLetter: true
+ }
+ },
+ {
+ title: "Censor Agent's Name",
+ description: `In this example, we hide the name of an undercover FBI agent. We replace two words at once (first name and last name) with the code name "Agent 007"`,
+ sampleText:
+ 'My name is John and I am an undercover FBI agent. I usually write my name in lowercase as "john" because I find uppercase letters scary. Unfortunately, in documents, my name is properly capitalized as John and it makes me upset.',
+ sampleResult:
+ 'My name is Agent 007 and I am an undercover FBI agent. I usually write my name in lowercase as "Agent 007" because I find uppercase letters scary. Unfortunately, in documents, my name is properly capitalized as Agent 007 and it makes me upset.',
+ sampleOptions: {
+ ...initialValues,
+ censoredBySymbol: false,
+ wordsToCensor: 'john',
+ censorWord: 'Agent 007'
+ }
+ }
+];
+
+export default function CensorText({
+ title,
+ longDescription
+}: ToolComponentProps) {
+ const [input, setInput] = useState('');
+ const [result, setResult] = useState('');
+
+ function compute(initialValues: InitialValuesType, input: string) {
+ setResult(censorText(input, initialValues));
+ }
+
+ const getGroups: GetGroupsType = ({
+ values,
+ updateField
+ }) => [
+ {
+ title: 'Words to Censor',
+ component: (
+
+ updateField('wordsToCensor', val)}
+ description={`Specify all unwanted words that
+ you want to hide in text (separated by a new line)`}
+ />
+
+ )
+ },
+ {
+ title: 'Censor Mode',
+ component: (
+
+ updateField('censoredBySymbol', value)}
+ description={'Select the censoring mode.'}
+ />
+
+ {values.censoredBySymbol && (
+ updateField('censorSymbol', val)}
+ description={`A symbol, character, or pattern to use for censoring.`}
+ />
+ )}
+
+ {values.censoredBySymbol && (
+ updateField('eachLetter', value)}
+ title="Mask each letter"
+ description="Put a masking symbol in place of each letter of the censored word."
+ />
+ )}
+
+ {!values.censoredBySymbol && (
+ updateField('censorWord', val)}
+ description={`Replace all censored words with this word.`}
+ />
+ )}
+
+ )
+ }
+ ];
+
+ return (
+ [] = [
+ {
+ title: 'Find Birthdays on February 29',
+ description:
+ "One of our friends was born on a leap year on February 29th and as a consequence, she has a birthday only once every 4 years. As we can never really remember when her birthday is, we are using our program to create a reminder list of the upcoming leap years. To create a list of her next birthdays, we load a sequence of years from 2025 to 2040 into the input and get the status of each year. If the program says that it's a leap year, then we know that we'll be invited to a birthday party on February 29th.",
+ sampleText: `2025
+2026
+2027
+2028
+2029
+2030
+2031
+2032
+2033
+2034
+2035
+2036
+2037
+2038
+2039
+2040`,
+ sampleResult: `2025 is not a leap year.
+2026 is not a leap year.
+2027 is not a leap year.
+2028 is a leap year.
+2029 is not a leap year.
+2030 is not a leap year.
+2031 is not a leap year.
+2032 is a leap year.
+2033 is not a leap year.
+2034 is not a leap year.
+2035 is not a leap year.
+2036 is a leap year.
+2037 is not a leap year.
+2038 is not a leap year.
+2039 is not a leap year.
+2040 is a leap year.`,
+ sampleOptions: {}
+ }
+];
+
+export default function ConvertDaysToHours({
+ title,
+ longDescription
+}: ToolComponentProps) {
+ const [input, setInput] = useState('');
+ const [result, setResult] = useState('');
+
+ const compute = (optionsValues: typeof initialValues, input: string) => {
+ setResult(checkLeapYear(input));
+ };
+
+ const getGroups: GetGroupsType | null = null;
+
+ return (
+ [] = [
+ {
+ title: 'Beautify XML',
+ description: 'Beautify a compact XML string for readability.',
+ sampleText: '- 1
- 2
\n - 1
\n - 2
\n `,
+ sampleOptions: {}
+ }
+];
+
+export default function XmlBeautifier({
+ title,
+ longDescription
+}: ToolComponentProps) {
+ const [input, setInput] = useState('');
+ const [result, setResult] = useState('');
+
+ const compute = (_values: InitialValuesType, input: string) => {
+ setResult(beautifyXml(input, {}));
+ };
+
+ return (
+ 12 ';
+ const result = beautifyXml(input, {});
+ expect(result).toContain('');
+ expect(result).toContain(' 1');
+ expect(result).toContain(' 2');
+ });
+
+ it('returns error for invalid XML', () => {
+ const input = '1 ';
+ const result = beautifyXml(input, {});
+ expect(result).toMatch(/Invalid XML/i);
+ });
+});
diff --git a/src/pages/tools/xml/xml-validator/index.tsx b/src/pages/tools/xml/xml-validator/index.tsx
new file mode 100644
index 0000000..96c50dc
--- /dev/null
+++ b/src/pages/tools/xml/xml-validator/index.tsx
@@ -0,0 +1,61 @@
+import { Box } from '@mui/material';
+import React, { useState } from 'react';
+import ToolContent from '@components/ToolContent';
+import { ToolComponentProps } from '@tools/defineTool';
+import ToolTextInput from '@components/input/ToolTextInput';
+import ToolTextResult from '@components/result/ToolTextResult';
+import { CardExampleType } from '@components/examples/ToolExamples';
+import { validateXml } from './service';
+import { InitialValuesType } from './types';
+
+const initialValues: InitialValuesType = {};
+
+const exampleCards: CardExampleType[] = [
+ {
+ title: 'Validate XML',
+ description: 'Check if an XML string is well-formed.',
+ sampleText: '- 1
- 2
- 1
- 2
('');
+ const [result, setResult] = useState('');
+
+ const compute = (_values: InitialValuesType, input: string) => {
+ setResult(validateXml(input, {}));
+ };
+
+ return (
+ 12 ';
+ const result = validateXml(input, {});
+ expect(result).toBe('Valid XML');
+ });
+
+ it('returns error for invalid XML', () => {
+ const input = '1 ';
+ const result = validateXml(input, {});
+ expect(result).toMatch(/Invalid XML/i);
+ });
+});
diff --git a/src/tools/defineTool.tsx b/src/tools/defineTool.tsx
index 0ea3935..ecb056c 100644
--- a/src/tools/defineTool.tsx
+++ b/src/tools/defineTool.tsx
@@ -24,7 +24,9 @@ export type ToolCategory =
| 'time'
| 'csv'
| 'pdf'
- | 'image-generic';
+ | 'image-generic'
+ | 'audio'
+ | 'xml';
export interface DefinedTool {
type: ToolCategory;
diff --git a/src/tools/index.ts b/src/tools/index.ts
index 08a2cf8..b0e9bc6 100644
--- a/src/tools/index.ts
+++ b/src/tools/index.ts
@@ -1,9 +1,10 @@
import { stringTools } from '../pages/tools/string';
import { imageTools } from '../pages/tools/image';
import { DefinedTool, ToolCategory } from './defineTool';
-import { capitalizeFirstLetter } from '../utils/string';
+import { capitalizeFirstLetter } from '@utils/string';
import { numberTools } from '../pages/tools/number';
import { videoTools } from '../pages/tools/video';
+import { audioTools } from 'pages/tools/audio';
import { listTools } from '../pages/tools/list';
import { Entries } from 'type-fest';
import { jsonTools } from '../pages/tools/json';
@@ -11,18 +12,22 @@ import { csvTools } from '../pages/tools/csv';
import { timeTools } from '../pages/tools/time';
import { IconifyIcon } from '@iconify/react';
import { pdfTools } from '../pages/tools/pdf';
+import { xmlTools } from '../pages/tools/xml';
const toolCategoriesOrder: ToolCategory[] = [
'image-generic',
- 'string',
- 'json',
'pdf',
+ 'string',
'video',
+ 'time',
+ 'audio',
+ 'json',
'list',
'csv',
'number',
'png',
'time',
+ 'xml',
'gif'
];
export const tools: DefinedTool[] = [
@@ -34,7 +39,9 @@ export const tools: DefinedTool[] = [
...csvTools,
...videoTools,
...numberTools,
- ...timeTools
+ ...timeTools,
+ ...audioTools,
+ ...xmlTools
];
const categoriesConfig: {
type: ToolCategory;
@@ -115,6 +122,18 @@ const categoriesConfig: {
icon: 'material-symbols-light:image-outline-rounded',
value:
'Tools for working with pictures – compress, resize, crop, convert to JPG, rotate, remove background and much more.'
+ },
+ {
+ type: 'audio',
+ icon: 'ic:twotone-audiotrack',
+ value:
+ 'Tools for working with audio – extract audio from video, adjusting audio speed, merging multiple audio files and much more.'
+ },
+ {
+ type: 'xml',
+ icon: 'mdi-light:xml',
+ value:
+ 'Tools for working with XML data structures - viewer, beautifier, validator and much more'
}
];
// use for changelogs
+
-
+
@@ -44,15 +44,23 @@ Plus, the Docker image is super lightweight at just 28MB, making it fast to depl
We strive to offer a variety of tools, including:
-## **Image/Video/Binary Tools**
+## **Image/Video/Audio Tools**
- Image Resizer
- Image Converter
+- Image Editor
- Video Trimmer
- Video Reverser
- And more...
-## **String/List Tools**
+## **PDF Tools**
+
+- PDF Splitter
+- PDF Merger
+- PDF Editor
+- And more...
+
+## **Text/List Tools**
- Case Converters
- List Shuffler
@@ -68,14 +76,14 @@ We strive to offer a variety of tools, including:
## **Math Tools**
- Generate Prime Numbers
-- Generate Perfect Numbers
+- Calculate voltage, current, or resistance
- And more...
-## **Miscellaneous Tools**
+## **Data Tools**
- JSON Tools
-- PDF Tools
- CSV Tools
+- XML Tools
- And more...
Stay tuned as we continue to expand and improve our collection!
@@ -147,7 +155,7 @@ npm run test:e2e
We welcome contributions! You can help by:
- ✅ Reporting bugs
-- ✅ Suggesting new features in Github issues or [here](https://tally.so/r/nrkkx2)
+- ✅ Suggesting new features in GitHub issues or [here](https://tally.so/r/nrkkx2)
- ✅ Improving documentation
- ✅ Submitting pull requests
diff --git a/img.png b/img.png
index 92db6e2..2f34502 100644
Binary files a/img.png and b/img.png differ
diff --git a/index.html b/index.html
index 1dc3459..2bf5d01 100644
--- a/index.html
+++ b/index.html
@@ -2,8 +2,13 @@
+
-
+
+
+
+
+