External/omni-tools
1
0
Fork 0
mirror of https://github.com/iib0011/omni-tools.git synced 2025-12-29 16:16:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' into tools-filtering

Browse Source
This commit is contained in:
AshAnand34
2025-07-18 14:45:15 -07:00
parent 4a7e6299d9 ad2c70841f
commit 9e41071c01
336 changed files with 21767 additions and 2122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/pages/tools/image/generic/change-colors/meta.ts
View File

@@ -2,12 +2,15 @@ import { defineTool } from '@tools/defineTool';
import { lazy } from 'react';
export const tool = defineTool('image-generic', {
name: 'Change colors in image',
i18n: {
name: 'image:changeColors.title',
description: 'image:changeColors.description',
shortDescription: 'image:changeColors.shortDescription'
},
path: 'change-colors',
icon: 'cil:color-fill',
description:
"World's simplest online Image color changer. Just import your image (JPG, PNG, SVG) in the editor on the left, select which colors to change, and you'll instantly get a new image with the new colors on the right. Free, quick, and very powerful. Import an image – replace its colors.",
shortDescription: 'Quickly swap colors in a image',
keywords: ['change', 'colors', 'in', 'png', 'image', 'jpg'],
component: lazy(() => import('./index'))
});

11
src/pages/tools/image/generic/change-opacity/meta.ts
View File

@@ -2,12 +2,15 @@ import { defineTool } from '@tools/defineTool';
import { lazy } from 'react';
export const tool = defineTool('image-generic', {
name: 'Change image Opacity',
i18n: {
name: 'image:changeOpacity.title',
description: 'image:changeOpacity.description',
shortDescription: 'image:changeOpacity.shortDescription'
},
path: 'change-opacity',
icon: 'material-symbols:opacity',
description:
'Easily adjust the transparency of your images. Simply upload your image, use the slider to set the desired opacity level between 0 (fully transparent) and 1 (fully opaque), and download the modified image.',
shortDescription: 'Adjust transparency of images',
keywords: ['opacity', 'transparency', 'png', 'alpha', 'jpg', 'jpeg', 'image'],
component: lazy(() => import('./index'))
});

22
src/pages/tools/image/generic/compress/index.tsx
View File

@@ -1,4 +1,5 @@
import React, { useContext, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { InitialValuesType } from './types';
import { compressImage } from './service';
import ToolContent from '@components/ToolContent';
@@ -17,6 +18,7 @@ const initialValues: InitialValuesType = {
};
export default function CompressImage({ title }: ToolComponentProps) {
const { t } = useTranslation('image');
const [input, setInput] = useState<File | null>(null);
const [result, setResult] = useState<File | null>(null);
const [isProcessing, setIsProcessing] = useState<boolean>(false);
@@ -37,7 +39,7 @@ export default function CompressImage({ title }: ToolComponentProps) {
setResult(compressed);
setCompressedSize(compressed.size);
} else {
showSnackBar('Failed to compress image. Please try again.', 'error');
showSnackBar(t('compress.failedToCompress'), 'error');
}
} catch (err) {
console.error('Error in compression:', err);
@@ -55,12 +57,12 @@ export default function CompressImage({ title }: ToolComponentProps) {
value={input}
onChange={setInput}
accept={['image/*']}
title={'Input image'}
title={t('compress.inputTitle')}
/>
}
resultComponent={
<ToolFileResult
title={'Compressed image'}
title={t('compress.resultTitle')}
value={result}
loading={isProcessing}
/>
@@ -68,14 +70,14 @@ export default function CompressImage({ title }: ToolComponentProps) {
initialValues={initialValues}
getGroups={({ values, updateField }) => [
{
title: 'Compression options',
title: t('compress.compressionOptions'),
component: (
<Box>
<TextFieldWithDesc
name="maxFileSizeInMB"
type="number"
inputProps={{ min: 0.1, step: 0.1 }}
description="Maximum file size in megabytes"
description={t('compress.maxFileSizeDescription')}
onOwnChange={(value) =>
updateNumberField(value, 'maxFileSizeInMB', updateField)
}
@@ -85,7 +87,7 @@ export default function CompressImage({ title }: ToolComponentProps) {
name="quality"
type="number"
inputProps={{ min: 10, max: 100, step: 1 }}
description="Image quality percentage (lower means smaller file size)"
description={t('compress.qualityDescription')}
onOwnChange={(value) =>
updateNumberField(value, 'quality', updateField)
}
@@ -95,18 +97,20 @@ export default function CompressImage({ title }: ToolComponentProps) {
)
},
{
title: 'File sizes',
title: t('compress.fileSizes'),
component: (
<Box>
<Box>
{originalSize !== null && (
<Typography>
Original Size: {(originalSize / 1024).toFixed(2)} KB
{t('compress.originalSize')}:{' '}
{(originalSize / 1024).toFixed(2)} KB
</Typography>
)}
{compressedSize !== null && (
<Typography>
Compressed Size: {(compressedSize / 1024).toFixed(2)} KB
{t('compress.compressedSize')}:{' '}
{(compressedSize / 1024).toFixed(2)} KB
</Typography>
)}
</Box>

15
src/pages/tools/image/generic/compress/meta.ts
View File

@@ -2,13 +2,16 @@ import { defineTool } from '@tools/defineTool';
import { lazy } from 'react';
export const tool = defineTool('image-generic', {
name: 'Compress Image',
i18n: {
name: 'image:compress.title',
description: 'image:compress.description',
shortDescription: 'image:compress.shortDescription',
userTypes: ['General Users', 'Students', 'Developers']
},
path: 'compress',
icon: 'material-symbols-light:compress-rounded',
description:
'Reduce image file size while maintaining quality. Compress images for easier sharing, uploading, or storage.',
shortDescription: 'Compress images to reduce file size',
keywords: ['compress', 'image', 'reduce', 'size', 'optimize'],
userTypes: ['General Users', 'Students', 'Developers'],
keywords: ['image', 'compress', 'reduce', 'quality'],
component: lazy(() => import('./index'))
});

11
src/pages/tools/image/generic/convert-to-jpg/meta.ts
View File

@@ -2,12 +2,15 @@ import { defineTool } from '@tools/defineTool';
import { lazy } from 'react';
export const tool = defineTool('image-generic', {
name: 'Convert Images to JPG',
i18n: {
name: 'image:convertToJpg.title',
description: 'image:convertToJpg.description',
shortDescription: 'image:convertToJpg.shortDescription'
},
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',

11
src/pages/tools/image/generic/create-transparent/meta.ts
View File

@@ -2,12 +2,15 @@ import { defineTool } from '@tools/defineTool';
import { lazy } from 'react';
export const tool = defineTool('image-generic', {
name: 'Create transparent PNG',
i18n: {
name: 'image:createTransparent.title',
description: 'image:createTransparent.description',
shortDescription: 'image:createTransparent.shortDescription'
},
path: 'create-transparent',
icon: 'mdi:circle-transparent',
shortDescription: 'Quickly make an image transparent',
description:
"World's simplest online Portable Network Graphics transparency maker. Just import your image in the editor on the left and you will instantly get a transparent PNG on the right. Free, quick, and very powerful. Import an image – get a transparent PNG.",
keywords: ['create', 'transparent'],
component: lazy(() => import('./index'))
});

10
src/pages/tools/image/generic/crop/meta.ts
View File

@@ -2,11 +2,15 @@ import { defineTool } from '@tools/defineTool';
import { lazy } from 'react';
export const tool = defineTool('image-generic', {
name: 'Crop',
i18n: {
name: 'image:crop.title',
description: 'image:crop.description',
shortDescription: 'image:crop.shortDescription'
},
path: 'crop',
icon: 'mdi:crop', // Iconify icon as a string
description: 'A tool to crop images with precision and ease.',
shortDescription: 'Crop images quickly.',
keywords: ['crop', 'image', 'edit', 'resize', 'trim'],
component: lazy(() => import('./index'))
});

11
src/pages/tools/image/generic/editor/meta.ts
View File

@@ -2,12 +2,15 @@ import { defineTool } from '@tools/defineTool';
import { lazy } from 'react';
export const tool = defineTool('image-generic', {
name: 'Image Editor',
i18n: {
name: 'image:editor.title',
description: 'image:editor.description',
shortDescription: 'image:editor.shortDescription'
},
path: 'editor',
icon: 'mdi:image-edit',
description:
'Advanced image editor with tools for cropping, rotating, annotating, adjusting colors, and adding watermarks. Edit your images with professional-grade tools directly in your browser.',
shortDescription: 'Edit images with advanced tools and features',
keywords: [
'image',
'editor',

11
src/pages/tools/image/generic/image-to-text/meta.ts
View File

@@ -2,12 +2,15 @@ import { defineTool } from '@tools/defineTool';
import { lazy } from 'react';
export const tool = defineTool('image-generic', {
name: 'Image to Text (OCR)',
i18n: {
name: 'image:imageToText.title',
description: 'image:imageToText.description',
shortDescription: 'image:imageToText.shortDescription'
},
path: 'image-to-text',
icon: 'mdi:text-recognition', // Iconify icon as a string
description:
'Extract text from images (JPG, PNG) using optical character recognition (OCR).',
shortDescription: 'Extract text from images using OCR.',
keywords: [
'ocr',
'optical character recognition',

10
src/pages/tools/image/generic/qr-code/meta.ts
View File

@@ -2,12 +2,14 @@ import { defineTool } from '@tools/defineTool';
import { lazy } from 'react';
export const tool = defineTool('image-generic', {
name: 'QR Code Generator',
i18n: {
name: 'image:qrCode.title',
description: 'image:qrCode.description',
shortDescription: 'image:qrCode.shortDescription'
},
path: 'qr-code',
icon: 'mdi:qrcode', // Iconify icon as a string
description:
'Generate QR codes for different data types: URL, Text, Email, Phone, SMS, WiFi, vCard, and more.',
shortDescription: 'Create customized QR codes for various data formats.',
keywords: [
'qr code',
'qrcode',

11
src/pages/tools/image/generic/remove-background/meta.ts
View File

@@ -2,12 +2,15 @@ import { defineTool } from '@tools/defineTool';
import { lazy } from 'react';
export const tool = defineTool('image-generic', {
name: 'Remove Background from Image',
i18n: {
name: 'image:removeBackground.title',
description: 'image:removeBackground.description',
shortDescription: 'image:removeBackground.shortDescription'
},
path: 'remove-background',
icon: 'mdi:image-remove',
description:
"World's simplest online tool to remove backgrounds from images. Just upload your image and our AI-powered tool will automatically remove the background, giving you a transparent PNG. Perfect for product photos, profile pictures, and design assets.",
shortDescription: 'Automatically remove backgrounds from images',
keywords: [
'remove',
'background',

53
src/pages/tools/image/generic/resize/index.tsx
View File

@@ -11,6 +11,7 @@ import SimpleRadio from '@components/options/SimpleRadio';
import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
import { processImage } from './service';
import { InitialValuesType } from './types';
import { useTranslation } from 'react-i18next';
const initialValues: InitialValuesType = {
resizeMethod: 'pixels' as 'pixels' | 'percentage',
@@ -45,6 +46,7 @@ const validationSchema = Yup.object({
});
export default function ResizeImage({ title }: ToolComponentProps) {
const { t } = useTranslation('image');
const [input, setInput] = useState<File | null>(null);
const [result, setResult] = useState<File | null>(null);
@@ -58,22 +60,20 @@ export default function ResizeImage({ title }: ToolComponentProps) {
updateField
}) => [
{
title: 'Resize Method',
title: t('resize.resizeMethod'),
component: (
<Box>
<SimpleRadio
onClick={() => updateField('resizeMethod', 'pixels')}
checked={values.resizeMethod === 'pixels'}
description={'Resize by specifying dimensions in pixels.'}
title={'Resize by Pixels'}
description={t('resize.resizeByPixelsDescription')}
title={t('resize.resizeByPixels')}
/>
<SimpleRadio
onClick={() => updateField('resizeMethod', 'percentage')}
checked={values.resizeMethod === 'percentage'}
description={
'Resize by specifying a percentage of the original size.'
}
title={'Resize by Percentage'}
description={t('resize.resizeByPercentageDescription')}
title={t('resize.resizeByPercentage')}
/>
</Box>
)
@@ -81,7 +81,7 @@ export default function ResizeImage({ title }: ToolComponentProps) {
...(values.resizeMethod === 'pixels'
? [
{
title: 'Dimension Type',
title: t('resize.dimensionType'),
component: (
<Box>
<CheckboxWithDesc
@@ -89,35 +89,29 @@ export default function ResizeImage({ title }: ToolComponentProps) {
onChange={(value) =>
updateField('maintainAspectRatio', value)
}
description={
'Maintain the original aspect ratio of the image.'
}
title={'Maintain Aspect Ratio'}
description={t('resize.maintainAspectRatioDescription')}
title={t('resize.maintainAspectRatio')}
/>
{values.maintainAspectRatio && (
<Box>
<SimpleRadio
onClick={() => updateField('dimensionType', 'width')}
checked={values.dimensionType === 'width'}
description={
'Specify the width in pixels and calculate height based on aspect ratio.'
}
title={'Set Width'}
description={t('resize.setWidthDescription')}
title={t('resize.setWidth')}
/>
<SimpleRadio
onClick={() => updateField('dimensionType', 'height')}
checked={values.dimensionType === 'height'}
description={
'Specify the height in pixels and calculate width based on aspect ratio.'
}
title={'Set Height'}
description={t('resize.setHeightDescription')}
title={t('resize.setHeight')}
/>
</Box>
)}
<TextFieldWithDesc
value={values.width}
onOwnChange={(val) => updateField('width', val)}
description={'Width (in pixels)'}
description={t('resize.widthDescription')}
disabled={
values.maintainAspectRatio &&
values.dimensionType === 'height'
@@ -131,7 +125,7 @@ export default function ResizeImage({ title }: ToolComponentProps) {
<TextFieldWithDesc
value={values.height}
onOwnChange={(val) => updateField('height', val)}
description={'Height (in pixels)'}
description={t('resize.heightDescription')}
disabled={
values.maintainAspectRatio &&
values.dimensionType === 'width'
@@ -148,15 +142,13 @@ export default function ResizeImage({ title }: ToolComponentProps) {
]
: [
{
title: 'Percentage',
title: t('resize.percentage'),
component: (
<Box>
<TextFieldWithDesc
value={values.percentage}
onOwnChange={(val) => updateField('percentage', val)}
description={
'Percentage of original size (e.g., 50 for half size, 200 for double size)'
}
description={t('resize.percentageDescription')}
inputProps={{
'data-testid': 'percentage-input',
type: 'number',
@@ -183,20 +175,19 @@ export default function ResizeImage({ title }: ToolComponentProps) {
value={input}
onChange={setInput}
accept={['image/jpeg', 'image/png', 'image/svg+xml', 'image/gif']}
title={'Input Image'}
title={t('resize.inputTitle')}
/>
}
resultComponent={
<ToolFileResult
title={'Resized Image'}
title={t('resize.resultTitle')}
value={result}
extension={input?.name.split('.').pop() || 'png'}
/>
}
toolInfo={{
title: 'Resize Image',
description:
'This tool allows you to resize JPG, PNG, SVG, or GIF images. You can resize by specifying dimensions in pixels or by percentage, with options to maintain the original aspect ratio.'
title: t('resize.toolInfo.title'),
description: t('resize.toolInfo.description')
}}
/>
);

26
src/pages/tools/image/generic/resize/meta.ts
View File

@@ -2,13 +2,25 @@ import { defineTool } from '@tools/defineTool';
import { lazy } from 'react';
export const tool = defineTool('image-generic', {
name: 'Resize Image',
i18n: {
name: 'image:resize.title',
description: 'image:resize.description',
shortDescription: 'image:resize.shortDescription',
userTypes: ['General Users', 'Students', 'Developers']
},
path: 'resize',
icon: 'mdi:resize',
description:
'Resize images to different dimensions while maintaining aspect ratio or custom sizes.',
shortDescription: 'Resize images to different dimensions',
keywords: ['resize', 'image', 'dimensions', 'scale', 'aspect ratio'],
userTypes: ['General Users', 'Students', 'Developers'],
icon: 'mdi:resize', // Iconify icon as a string
keywords: [
'resize',
'image',
'scale',
'jpg',
'png',
'svg',
'gif',
'dimensions'
],
component: lazy(() => import('./index'))
});

10
src/pages/tools/image/generic/rotate/meta.ts
View File

@@ -2,11 +2,15 @@ import { defineTool } from '@tools/defineTool';
import { lazy } from 'react';
export const tool = defineTool('image-generic', {
name: 'Rotate Image',
i18n: {
name: 'image:rotate.title',
description: 'image:rotate.description',
shortDescription: 'image:rotate.shortDescription'
},
path: 'rotate',
icon: 'mdi:rotate-clockwise',
description: 'Rotate an image by a specified angle.',
shortDescription: 'Rotate an image easily.',
keywords: ['rotate', 'image', 'angle', 'jpg', 'png'],
component: lazy(() => import('./index'))
});

11
src/pages/tools/image/png/compress-png/meta.ts
View File

@@ -3,12 +3,15 @@ import { lazy } from 'react';
// import image from '@assets/text.png';
export const tool = defineTool('png', {
name: 'Compress png',
i18n: {
name: 'image:compressPng.title',
description: 'image:compressPng.description',
shortDescription: 'image:compressPng.shortDescription'
},
path: 'compress-png',
icon: 'material-symbols-light:compress',
description:
'This is a program that compresses PNG pictures. As soon as you paste your PNG picture in the input area, the program will compress it and show the result in the output area. In the options, you can adjust the compression level, as well as find the old and new picture file sizes.',
shortDescription: 'Quickly compress a PNG',
keywords: ['compress', 'png'],
component: lazy(() => import('./index'))
});

11
src/pages/tools/image/png/convert-jgp-to-png/meta.ts
View File

@@ -2,12 +2,15 @@ import { defineTool } from '@tools/defineTool';
import { lazy } from 'react';
export const tool = defineTool('png', {
name: 'Convert JPG to PNG',
i18n: {
name: 'image:convertJgpToPng.title',
description: 'image:convertJgpToPng.description',
shortDescription: 'image:convertJgpToPng.shortDescription'
},
path: 'convert-jgp-to-png',
icon: 'ph:file-jpg-thin',
description:
'Quickly convert your JPG images to PNG. Just import your PNG image in the editor on the left',
shortDescription: 'Quickly convert your JPG images to PNG',
keywords: ['convert', 'jgp', 'png'],
component: lazy(() => import('./index'))
});