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 chesterkxng

Browse Source
This commit is contained in:
Chesterkxng
2025-03-31 18:10:02 +00:00
parent cafddb7cbf e8e9f18b64
commit d56af77ed5
32 changed files with 620 additions and 634 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/pages/home/Categories.tsx
View File

@@ -1,6 +1,6 @@
import { getToolsByCategory } from '@tools/index';
import Grid from '@mui/material/Grid';
import { Box, Card, CardContent, Stack } from '@mui/material';
import { Box, Card, CardContent, Stack, useTheme } from '@mui/material';
import { Link, useNavigate } from 'react-router-dom';
import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button';
@@ -19,6 +19,7 @@ const SingleCategory = function ({
index: number;
}) {
const navigate = useNavigate();
const theme = useTheme();
const [hovered, setHovered] = useState<boolean>(false);
const toggleHover = () => setHovered((prevState) => !prevState);
return (
@@ -32,7 +33,7 @@ const SingleCategory = function ({
<Card
sx={{
height: '100%',
backgroundColor: hovered ? '#FAFAFD' : 'white'
backgroundColor: hovered ? 'background.hover' : 'background.paper'
}}
>
<CardContent sx={{ height: '100%' }}>
@@ -52,7 +53,11 @@ const SingleCategory = function ({
color={categoriesColors[index % categoriesColors.length]}
/>
<Link
style={{ fontSize: 20, fontWeight: 700, color: 'black' }}
style={{
fontSize: 20,
fontWeight: 700,
color: theme.palette.mode === 'dark' ? 'white' : 'black'
}}
to={'/categories/' + category.type}
>
{category.title}
@@ -70,7 +75,7 @@ const SingleCategory = function ({
</Grid>
<Grid item xs={12} md={6}>
<Button
sx={{ backgroundColor: 'white' }}
sx={{ backgroundColor: 'background.default' }}
fullWidth
onClick={() => navigate(category.example.path)}
variant={'outlined'}

15
src/pages/home/index.tsx
View File

@@ -1,16 +1,23 @@
import { Box } from '@mui/material';
import { Box, useTheme } from '@mui/material';
import Hero from 'components/Hero';
import Categories from './Categories';
export default function Home() {
const theme = useTheme();
return (
<Box
padding={{
xs: 1,
md: 3,
lg: 5,
background: `url(/assets/background.svg)`,
backgroundColor: '#F5F5FA'
lg: 5
}}
sx={{
background: `url(/assets/${
theme.palette.mode === 'dark'
? 'background-dark.png'
: 'background.svg'
})`,
backgroundColor: 'background.default'
}}
display={'flex'}
flexDirection={'column'}

17
src/pages/tools-by-category/index.tsx
View File

@@ -26,7 +26,7 @@ export default function Home() {
}, []);
return (
<Box sx={{ backgroundColor: '#F5F5FA' }}>
<Box sx={{ backgroundColor: 'background.default' }}>
<Box
padding={{ xs: 1, md: 3, lg: 5 }}
display={'flex'}
@@ -55,12 +55,14 @@ export default function Home() {
<Grid item xs={12} md={6} lg={4} key={tool.path}>
<Stack
sx={{
backgroundColor: 'white',
boxShadow: '5px 4px 2px #E9E9ED',
backgroundColor: 'background.paper',
boxShadow: `5px 4px 2px ${
theme.palette.mode === 'dark' ? 'black' : '#E9E9ED'
}`,
cursor: 'pointer',
height: '100%',
'&:hover': {
backgroundColor: theme.palette.background.default // Change this to your desired hover color
backgroundColor: theme.palette.background.hover
}
}}
onClick={() => navigate('/' + tool.path)}
@@ -77,7 +79,12 @@ export default function Home() {
color={categoriesColors[index % categoriesColors.length]}
/>
<Box>
<Link style={{ fontSize: 20 }} to={'/' + tool.path}>
<Link
style={{
fontSize: 20
}}
to={'/' + tool.path}
>
{tool.name}
</Link>
<Typography sx={{ mt: 2 }}>

6
src/pages/tools/csv/csv-to-tsv/index.tsx
View File

@@ -22,7 +22,7 @@ const exampleCards: CardExampleType<InitialValuesType>[] = [
{
title: 'Convert Game Data from the CSV Format to the TSV Format',
description:
'This tool transforms Comma Separated Values (CSV) data to Tab Separated Values (TSV) data. Both CSV and TSV are popular file formats for storing tabular data but they use different delimiters to separate values – CSV uses commas (","), while TSV uses tabs ("\t"). If we compare CSV files to TSV files, then CSV files are much harder to parse than TSV files because the values themselves may contain commas, so it is not always obvious where one field starts and ends without complicated parsing rules. TSV, on the other hand, uses just a tab symbol, which does not usually appear in data, so separating fields in TSV is as simple as splitting the input by the tab character. To convert CSV to TSV, simply input the CSV data in the input of this tool. In rare cases when a CSV file has a delimiter other than a comma, you can specify the current delimiter in the options of the tool. You can also specify the current quote character and the comment start character. Additionally, empty CSV lines can be skipped by activating the "Ignore Lines with No Data" option. If this option is off, then empty lines in the CSV are converted to empty TSV lines. The "Preserve Headers" option allows you to choose whether to process column headers of a CSV file. If the option is selected, then the resulting TSV file will include the first row of the input CSV file, which contains the column names. Alternatively, if the headers option is not selected, the first row will be skipped during the data conversion process. For the reverse conversion from TSV to CSV, you can use our Convert TSV to CSV tool. Csv-abulous!',
'In this example, we transform a Comma Separated Values (CSV) file containing a leaderboard of gaming data into a Tab Separated Values (TSV) file. The input data shows the players\' names, scores, times, and goals. We preserve the CSV column headers by enabling the "Preserve Headers" option and convert all data rows into TSV format. The resulting data is easier to work with as it\'s organized in neat columns',
sampleText: `player_name,score,time,goals
ToniJackson,2500,30:00,15
HenryDalton,1800,25:00,12
@@ -54,7 +54,7 @@ Vampire;Mythology;Castles;Immortality
Phoenix;Mythology;Desert;Rebirth from ashes
#Dragon;Mythology;Mountains;Fire breathing
#Werewolf;Mythology;Forests;Shapeshifting`,
#Werewolf;Mythology;Forests;Shape shifting`,
sampleResult: `Unicorn Mythology Forest Magic horn
Mermaid Mythology Ocean Hypnotic singing
Vampire Mythology Castles Immortality
@@ -68,7 +68,7 @@ Phoenix Mythology Desert Rebirth from ashes`,
}
},
{
title: 'Convet Fitness Tracker Data from CSV to TSV',
title: 'Convert Fitness Tracker Data from CSV to TSV',
description:
'In this example, we swap rows and columns in CSV data about team sports, the equipment used, and the number of players. The input has 5 rows and 3 columns and once rows and columns have been swapped, the output has 3 rows and 5 columns. Also notice that in the last data record, for the "Baseball" game, the number of players is missing. To create a fully-filled CSV, we use a custom message "NA", specified in the options, and fill the missing CSV field with this value.',
sampleText: `day,steps,distance,calories

4
src/pages/tools/pdf/split-pdf/index.tsx
View File

@@ -1,6 +1,5 @@
import { Box, Typography } from '@mui/material';
import React, { useEffect, useRef, useState } from 'react';
import ToolFileInput from '@components/input/ToolFileInput';
import React, { useEffect, useState } from 'react';
import ToolFileResult from '@components/result/ToolFileResult';
import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
import ToolContent from '@components/ToolContent';
@@ -8,7 +7,6 @@ import { ToolComponentProps } from '@tools/defineTool';
import { parsePageRanges, splitPdf } from './service';
import { CardExampleType } from '@components/examples/ToolExamples';
import { PDFDocument } from 'pdf-lib';
import { FormikProps } from 'formik';
import ToolPdfInput from '@components/input/ToolPdfInput';
type InitialValuesType = {

183
src/pages/tools/video/compress/index.tsx Normal file
View File

@@ -0,0 +1,183 @@
import { Box } from '@mui/material';
import React, { useCallback, useState } from 'react';
import * as Yup from 'yup';
import ToolFileResult from '@components/result/ToolFileResult';
import ToolContent from '@components/ToolContent';
import { ToolComponentProps } from '@tools/defineTool';
import { GetGroupsType } from '@components/options/ToolOptions';
import { debounce } from 'lodash';
import ToolVideoInput from '@components/input/ToolVideoInput';
import { compressVideo, VideoResolution } from './service';
import SimpleRadio from '@components/options/SimpleRadio';
import Slider from 'rc-slider';
import 'rc-slider/assets/index.css';
export const initialValues = {
width: 480 as VideoResolution,
crf: 23,
preset: 'medium'
};
export const validationSchema = Yup.object({
width: Yup.number()
.oneOf(
[240, 360, 480, 720, 1080],
'Width must be one of the standard resolutions'
)
.required('Width is required'),
crf: Yup.number()
.min(0, 'CRF must be at least 0')
.max(51, 'CRF must be at most 51')
.required('CRF is required'),
preset: Yup.string()
.oneOf(
[
'ultrafast',
'superfast',
'veryfast',
'faster',
'fast',
'medium',
'slow',
'slower',
'veryslow'
],
'Preset must be a valid ffmpeg preset'
)
.required('Preset is required')
});
const resolutionOptions: { value: VideoResolution; label: string }[] = [
{ value: 240, label: '240p' },
{ value: 360, label: '360p' },
{ value: 480, label: '480p' },
{ value: 720, label: '720p' },
{ value: 1080, label: '1080p' }
];
const presetOptions = [
{ value: 'ultrafast', label: 'Ultrafast (Lowest Quality, Smallest Size)' },
{ value: 'superfast', label: 'Superfast' },
{ value: 'veryfast', label: 'Very Fast' },
{ value: 'faster', label: 'Faster' },
{ value: 'fast', label: 'Fast' },
{ value: 'medium', label: 'Medium (Balanced)' },
{ value: 'slow', label: 'Slow' },
{ value: 'slower', label: 'Slower' },
{ value: 'veryslow', label: 'Very Slow (Highest Quality, Largest Size)' }
];
export default function CompressVideo({ title }: ToolComponentProps) {
const [input, setInput] = useState<File | null>(null);
const [result, setResult] = useState<File | null>(null);
const [loading, setLoading] = useState(false);
const compute = async (
optionsValues: typeof initialValues,
input: File | null
) => {
if (!input) return;
setLoading(true);
try {
const compressedFile = await compressVideo(input, {
width: optionsValues.width,
crf: optionsValues.crf,
preset: optionsValues.preset
});
setResult(compressedFile);
} catch (error) {
console.error('Error compressing video:', error);
} finally {
setLoading(false);
}
};
const debouncedCompute = useCallback(debounce(compute, 1000), []);
const getGroups: GetGroupsType<typeof initialValues> = ({
values,
updateField
}) => [
{
title: 'Resolution',
component: (
<Box>
{resolutionOptions.map((option) => (
<SimpleRadio
key={option.value}
title={option.label}
checked={values.width === option.value}
onClick={() => {
updateField('width', option.value);
}}
/>
))}
</Box>
)
},
{
title: 'Quality (CRF)',
component: (
<Box sx={{ mb: 2 }}>
<Slider
min={0}
max={51}
style={{ width: '90%' }}
value={values.crf}
onChange={(value) => {
updateField('crf', typeof value === 'number' ? value : value[0]);
}}
marks={{
0: 'Lossless',
23: 'Default',
51: 'Worst'
}}
/>
</Box>
)
}
// {
// title: 'Encoding Preset',
// component: (
// <SelectWithDesc
// selected={values.preset}
// onChange={(value) => updateField('preset', value)}
// options={presetOptions}
// description={
// 'Determines the compression speed. Slower presets provide better compression (quality per filesize) but take more time.'
// }
// />
// )
// }
];
return (
<ToolContent
title={title}
input={input}
inputComponent={
<ToolVideoInput
value={input}
onChange={setInput}
accept={['video/mp4', 'video/webm', 'video/ogg']}
title={'Input Video'}
/>
}
resultComponent={
<ToolFileResult
title={'Compressed Video'}
value={result}
extension={'mp4'}
loading={loading}
loadingText={'Compressing video...'}
/>
}
initialValues={initialValues}
getGroups={getGroups}
compute={debouncedCompute}
setInput={setInput}
validationSchema={validationSchema}
/>
);
}

20
src/pages/tools/video/compress/meta.ts Normal file
View File

@@ -0,0 +1,20 @@
import { defineTool } from '@tools/defineTool';
import { lazy } from 'react';
export const tool = defineTool('video', {
name: 'Compress Video',
path: 'compress',
icon: 'icon-park-outline:compression',
description:
'Compress videos by scaling them to different resolutions like 240p, 480p, 720p, etc. This tool helps reduce file size while maintaining acceptable quality. Supports common video formats like MP4, WebM, and OGG.',
shortDescription: 'Compress videos by scaling to different resolutions',
keywords: [
'compress',
'video',
'resize',
'scale',
'resolution',
'reduce size'
],
component: lazy(() => import('./index'))
});

60
src/pages/tools/video/compress/service.ts Normal file
View File

@@ -0,0 +1,60 @@
import { FFmpeg } from '@ffmpeg/ffmpeg';
import { fetchFile } from '@ffmpeg/util';
const ffmpeg = new FFmpeg();
export type VideoResolution = 240 | 360 | 480 | 720 | 1080;
export interface CompressVideoOptions {
width: VideoResolution;
crf: number; // Constant Rate Factor (quality): lower = better quality, higher = smaller file
preset: string; // Encoding speed preset
}
export async function compressVideo(
input: File,
options: CompressVideoOptions
): Promise<File> {
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';
const outputName = 'output.mp4';
await ffmpeg.writeFile(inputName, await fetchFile(input));
// Calculate height as -1 to maintain aspect ratio
const scaleFilter = `scale=${options.width}:-2`;
const args = [
'-i',
inputName,
'-vf',
scaleFilter,
'-c:v',
'libx264',
'-crf',
options.crf.toString(),
'-preset',
options.preset,
'-c:a',
'aac', // Copy audio stream
outputName
];
try {
await ffmpeg.exec(args);
} catch (error) {
console.error('FFmpeg execution failed:', error);
}
const compressedData = await ffmpeg.readFile(outputName);
return new File(
[new Blob([compressedData], { type: 'video/mp4' })],
`${input.name.replace(/\.[^/.]+$/, '')}_compressed_${options.width}p.mp4`,
{ type: 'video/mp4' }
);
}

136
src/pages/tools/video/gif/change-speed/index.tsx
View File

@@ -1,21 +1,16 @@
import { Box } from '@mui/material';
import React, { useState } from 'react';
import * as Yup from 'yup';
import ToolFileInput from '@components/input/ToolFileInput';
import ToolFileResult from '@components/result/ToolFileResult';
import TextFieldWithDesc from 'components/options/TextFieldWithDesc';
import Typography from '@mui/material/Typography';
import { FrameOptions, GifReader, GifWriter } from 'omggif';
import { gifBinaryToFile } from '@utils/gif';
import ToolContent from '@components/ToolContent';
import { ToolComponentProps } from '@tools/defineTool';
import ToolImageInput from '@components/input/ToolImageInput';
import { FFmpeg } from '@ffmpeg/ffmpeg';
import { fetchFile } from '@ffmpeg/util';
const initialValues = {
newSpeed: 200
newSpeed: 2
};
const validationSchema = Yup.object({
// splitSeparator: Yup.string().required('The separator is required')
});
export default function ChangeSpeed({ title }: ToolComponentProps) {
const [input, setInput] = useState<File | null>(null);
const [result, setResult] = useState<File | null>(null);
@@ -23,82 +18,64 @@ export default function ChangeSpeed({ title }: ToolComponentProps) {
const compute = (optionsValues: typeof initialValues, input: File | null) => {
if (!input) return;
const { newSpeed } = optionsValues;
// Initialize FFmpeg once in your component/app
let ffmpeg: FFmpeg | null = null;
let ffmpegLoaded = false;
const processImage = async (file: File, newSpeed: number) => {
const reader = new FileReader();
reader.readAsArrayBuffer(file);
const processImage = async (
file: File,
newSpeed: number
): Promise<void> => {
if (!ffmpeg) {
ffmpeg = new FFmpeg();
}
reader.onload = async () => {
const arrayBuffer = reader.result;
if (!ffmpegLoaded) {
await ffmpeg.load({
wasmURL:
'https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.12.9/dist/esm/ffmpeg-core.wasm'
});
ffmpegLoaded = true;
}
if (arrayBuffer instanceof ArrayBuffer) {
const intArray = new Uint8Array(arrayBuffer);
try {
await ffmpeg.writeFile('input.gif', await fetchFile(file));
const reader = new GifReader(intArray as Buffer);
const info = reader.frameInfo(0);
const imageDataArr: ImageData[] = new Array(reader.numFrames())
.fill(0)
.map((_, k) => {
const image = new ImageData(info.width, info.height);
// Use FFmpeg's setpts filter to change the speed
// PTS (Presentation Time Stamp) determines when each frame is shown
// 1/speed changes the PTS - lower value = faster playback
await ffmpeg.exec([
'-i',
'input.gif',
'-filter:v',
`setpts=${1 / newSpeed}*PTS`,
'-f',
'gif',
'output.gif'
]);
reader.decodeAndBlitFrameRGBA(k, image.data);
// Read the result
const data = await ffmpeg.readFile('output.gif');
return image;
});
const gif = new GifWriter(
[],
imageDataArr[0].width,
imageDataArr[0].height,
{ loop: 20 }
);
// Create a new file from the processed data
const blob = new Blob([data], { type: 'image/gif' });
const newFile = new File(
[blob],
file.name.replace('.gif', `-${newSpeed}x.gif`),
{
type: 'image/gif'
}
);
imageDataArr.forEach((imageData) => {
const palette = [];
const pixels = new Uint8Array(imageData.width * imageData.height);
// Clean up to free memory
await ffmpeg.deleteFile('input.gif');
await ffmpeg.deleteFile('output.gif');
const { data } = imageData;
for (let j = 0, k = 0, jl = data.length; j < jl; j += 4, k++) {
const r = Math.floor(data[j] * 0.1) * 10;
const g = Math.floor(data[j + 1] * 0.1) * 10;
const b = Math.floor(data[j + 2] * 0.1) * 10;
const color = (r << 16) | (g << 8) | (b << 0);
const index = palette.indexOf(color);
if (index === -1) {
pixels[k] = palette.length;
palette.push(color);
} else {
pixels[k] = index;
}
}
// Force palette to be power of 2
let powof2 = 1;
while (powof2 < palette.length) powof2 <<= 1;
palette.length = powof2;
const delay = newSpeed / 10; // Delay in hundredths of a sec (100 = 1s)
const options: FrameOptions = {
palette,
delay
};
gif.addFrame(
0,
0,
imageData.width,
imageData.height,
// @ts-ignore
pixels,
options
);
});
const newFile = gifBinaryToFile(gif.getOutputBuffer(), file.name);
setResult(newFile);
}
};
setResult(newFile);
} catch (error) {
console.error('Error processing GIF:', error);
throw error;
}
};
processImage(input, newSpeed);
@@ -108,7 +85,7 @@ export default function ChangeSpeed({ title }: ToolComponentProps) {
title={title}
input={input}
inputComponent={
<ToolFileInput
<ToolImageInput
value={input}
onChange={setInput}
accept={['image/gif']}
@@ -131,8 +108,7 @@ export default function ChangeSpeed({ title }: ToolComponentProps) {
<TextFieldWithDesc
value={values.newSpeed}
onOwnChange={(val) => updateField('newSpeed', Number(val))}
description={'Default new GIF speed.'}
InputProps={{ endAdornment: <Typography>ms</Typography> }}
description={'Default multiplier: 2 means 2x faster'}
type={'number'}
/>
</Box>

3
src/pages/tools/video/index.ts
View File

@@ -2,5 +2,6 @@ import { rotate } from '../string/rotate/service';
import { gifTools } from './gif';
import { tool as trimVideo } from './trim/meta';
import { tool as rotateVideo } from './rotate/meta';
import { tool as compressVideo } from './compress/meta';
export const videoTools = [...gifTools, trimVideo, rotateVideo];
export const videoTools = [...gifTools, trimVideo, rotateVideo, compressVideo];

2
src/pages/tools/video/trim/index.tsx
View File

@@ -94,7 +94,7 @@ export default function TrimVideo({ title }: ToolComponentProps) {
}
value={values.trimStart}
label={'Start Time'}
sx={{ mb: 2, backgroundColor: 'white' }}
sx={{ mb: 2, backgroundColor: 'background.paper' }}
/>
<TextFieldWithDesc
onOwnChange={(value) =>