mirror of
https://github.com/snapotter-hq/SnapOtter.git
synced 2026-08-03 07:46:42 +02:00
feat(tools): 2.0 phase 5 wave 5b - ai pool: ocr-pdf, transcription, background composites (5 tools) (#226)
This commit is contained in:
SnapOtter
@@ -0,0 +1,135 @@
|
||||
import { Download } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { ProgressCard } from "@/components/common/progress-card";
|
||||
import { useTranslation } from "@/contexts/i18n-context";
|
||||
import { useToolProcessor } from "@/hooks/use-tool-processor";
|
||||
import { format } from "@/lib/format";
|
||||
import { useFileStore } from "@/stores/file-store";
|
||||
|
||||
const LANGUAGE_OPTIONS = [
|
||||
{ value: "auto", labelKey: "autoDetect" },
|
||||
{ value: "en", label: "English" },
|
||||
{ value: "de", label: "German" },
|
||||
{ value: "fr", label: "French" },
|
||||
{ value: "es", label: "Spanish" },
|
||||
{ value: "zh", label: "Chinese" },
|
||||
{ value: "ja", label: "Japanese" },
|
||||
{ value: "ko", label: "Korean" },
|
||||
{ value: "id", label: "Indonesian" },
|
||||
{ value: "th", label: "Thai" },
|
||||
{ value: "vi", label: "Vietnamese" },
|
||||
] as const;
|
||||
|
||||
const FORMAT_OPTIONS = [
|
||||
{ value: "srt", label: "SRT" },
|
||||
{ value: "vtt", label: "WebVTT" },
|
||||
] as const;
|
||||
|
||||
export function AutoSubtitlesSettings() {
|
||||
const { t } = useTranslation();
|
||||
const { files } = useFileStore();
|
||||
const { processFiles, processAllFiles, processing, error, downloadUrl, progress } =
|
||||
useToolProcessor("auto-subtitles");
|
||||
|
||||
const [language, setLanguage] = useState("auto");
|
||||
const [subtitleFormat, setSubtitleFormat] = useState("srt");
|
||||
|
||||
const ts = t.toolSettings["auto-subtitles"];
|
||||
const hasFile = files.length > 0;
|
||||
const hasMultiple = files.length > 1;
|
||||
|
||||
const handleProcess = () => {
|
||||
const settings = { language, format: subtitleFormat };
|
||||
if (hasMultiple) {
|
||||
processAllFiles(files, settings);
|
||||
} else {
|
||||
processFiles(files, settings);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
handleProcess();
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
{/* Language */}
|
||||
<div>
|
||||
<label htmlFor="as-language" className="mb-1.5 block text-sm font-medium">
|
||||
{ts.language}
|
||||
</label>
|
||||
<select
|
||||
id="as-language"
|
||||
value={language}
|
||||
onChange={(e) => setLanguage(e.target.value)}
|
||||
className="border-border bg-background w-full rounded-md border px-3 py-2 text-sm"
|
||||
>
|
||||
{LANGUAGE_OPTIONS.map((opt) => (
|
||||
<option key={opt.value} value={opt.value}>
|
||||
{"labelKey" in opt ? (ts as Record<string, string>)[opt.labelKey] : opt.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Subtitle Format */}
|
||||
<div>
|
||||
<label htmlFor="as-format" className="mb-1.5 block text-sm font-medium">
|
||||
{ts.format}
|
||||
</label>
|
||||
<select
|
||||
id="as-format"
|
||||
value={subtitleFormat}
|
||||
onChange={(e) => setSubtitleFormat(e.target.value)}
|
||||
className="border-border bg-background w-full rounded-md border px-3 py-2 text-sm"
|
||||
>
|
||||
{FORMAT_OPTIONS.map((opt) => (
|
||||
<option key={opt.value} value={opt.value}>
|
||||
{opt.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Progress / Submit */}
|
||||
{processing && progress ? (
|
||||
<ProgressCard
|
||||
active={processing}
|
||||
phase={progress.phase === "idle" ? "uploading" : progress.phase}
|
||||
label={ts.progressLabel}
|
||||
stage={progress.stage}
|
||||
percent={progress.percent}
|
||||
elapsed={progress.elapsed}
|
||||
/>
|
||||
) : (
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!hasFile || processing}
|
||||
className="bg-primary text-primary-foreground hover:bg-primary/90 disabled:bg-muted w-full rounded-md px-4 py-2 text-sm font-medium disabled:cursor-not-allowed"
|
||||
>
|
||||
{hasMultiple ? format(ts.submitBatch, { count: files.length }) : ts.submit}
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Error */}
|
||||
{error && (
|
||||
<div className="text-destructive rounded-md bg-red-50 p-3 text-sm dark:bg-red-950">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Download */}
|
||||
{downloadUrl && (
|
||||
<a
|
||||
href={downloadUrl}
|
||||
download
|
||||
className="bg-primary text-primary-foreground hover:bg-primary/90 flex items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium"
|
||||
>
|
||||
<Download className="h-4 w-4" />
|
||||
{t.common.download}
|
||||
</a>
|
||||
)}
|
||||
</form>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,103 @@
|
||||
import { Download } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { ProgressCard } from "@/components/common/progress-card";
|
||||
import { useTranslation } from "@/contexts/i18n-context";
|
||||
import { useToolProcessor } from "@/hooks/use-tool-processor";
|
||||
import { format } from "@/lib/format";
|
||||
import { useFileStore } from "@/stores/file-store";
|
||||
|
||||
export function BackgroundReplaceSettings() {
|
||||
const { t } = useTranslation();
|
||||
const { files } = useFileStore();
|
||||
const { processFiles, processAllFiles, processing, error, downloadUrl, progress } =
|
||||
useToolProcessor("background-replace");
|
||||
|
||||
const [color, setColor] = useState("#ffffff");
|
||||
|
||||
const ts = t.toolSettings["background-replace"];
|
||||
const hasFile = files.length > 0;
|
||||
const hasMultiple = files.length > 1;
|
||||
|
||||
const handleProcess = () => {
|
||||
const settings = { color };
|
||||
if (hasMultiple) {
|
||||
processAllFiles(files, settings);
|
||||
} else {
|
||||
processFiles(files, settings);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
handleProcess();
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
{/* Color */}
|
||||
<div>
|
||||
<label htmlFor="bg-replace-color" className="mb-1.5 block text-sm font-medium">
|
||||
{ts.color}
|
||||
</label>
|
||||
<div className="flex items-center gap-3">
|
||||
<input
|
||||
id="bg-replace-color"
|
||||
type="color"
|
||||
value={color}
|
||||
onChange={(e) => setColor(e.target.value)}
|
||||
className="h-10 w-14 cursor-pointer rounded-md border border-border"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={color}
|
||||
onChange={(e) => {
|
||||
const v = e.target.value;
|
||||
if (/^#[0-9a-fA-F]{0,6}$/.test(v)) setColor(v);
|
||||
}}
|
||||
className="border-border bg-background w-28 rounded-md border px-3 py-2 font-mono text-sm"
|
||||
maxLength={7}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Progress / Submit */}
|
||||
{processing && progress ? (
|
||||
<ProgressCard
|
||||
active={processing}
|
||||
phase={progress.phase === "idle" ? "uploading" : progress.phase}
|
||||
label={ts.progressLabel}
|
||||
stage={progress.stage}
|
||||
percent={progress.percent}
|
||||
elapsed={progress.elapsed}
|
||||
/>
|
||||
) : (
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!hasFile || processing}
|
||||
className="bg-primary text-primary-foreground hover:bg-primary/90 disabled:bg-muted w-full rounded-md px-4 py-2 text-sm font-medium disabled:cursor-not-allowed"
|
||||
>
|
||||
{hasMultiple ? format(ts.submitBatch, { count: files.length }) : ts.submit}
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Error */}
|
||||
{error && (
|
||||
<div className="text-destructive rounded-md bg-red-50 p-3 text-sm dark:bg-red-950">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Download */}
|
||||
{downloadUrl && (
|
||||
<a
|
||||
href={downloadUrl}
|
||||
download
|
||||
className="bg-primary text-primary-foreground hover:bg-primary/90 flex items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium"
|
||||
>
|
||||
<Download className="h-4 w-4" />
|
||||
{t.common.download}
|
||||
</a>
|
||||
)}
|
||||
</form>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
import { Download } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { ProgressCard } from "@/components/common/progress-card";
|
||||
import { useTranslation } from "@/contexts/i18n-context";
|
||||
import { useToolProcessor } from "@/hooks/use-tool-processor";
|
||||
import { format } from "@/lib/format";
|
||||
import { useFileStore } from "@/stores/file-store";
|
||||
|
||||
export function BlurBackgroundSettings() {
|
||||
const { t } = useTranslation();
|
||||
const { files } = useFileStore();
|
||||
const { processFiles, processAllFiles, processing, error, downloadUrl, progress } =
|
||||
useToolProcessor("blur-background");
|
||||
|
||||
const [intensity, setIntensity] = useState(50);
|
||||
|
||||
const ts = t.toolSettings["blur-background"];
|
||||
const hasFile = files.length > 0;
|
||||
const hasMultiple = files.length > 1;
|
||||
|
||||
const handleProcess = () => {
|
||||
const settings = { intensity };
|
||||
if (hasMultiple) {
|
||||
processAllFiles(files, settings);
|
||||
} else {
|
||||
processFiles(files, settings);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
handleProcess();
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
{/* Intensity */}
|
||||
<div>
|
||||
<label htmlFor="blur-bg-intensity" className="mb-1.5 block text-sm font-medium">
|
||||
{ts.intensity}: {intensity}%
|
||||
</label>
|
||||
<input
|
||||
id="blur-bg-intensity"
|
||||
type="range"
|
||||
min={1}
|
||||
max={100}
|
||||
value={intensity}
|
||||
onChange={(e) => setIntensity(Number(e.target.value))}
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Progress / Submit */}
|
||||
{processing && progress ? (
|
||||
<ProgressCard
|
||||
active={processing}
|
||||
phase={progress.phase === "idle" ? "uploading" : progress.phase}
|
||||
label={ts.progressLabel}
|
||||
stage={progress.stage}
|
||||
percent={progress.percent}
|
||||
elapsed={progress.elapsed}
|
||||
/>
|
||||
) : (
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!hasFile || processing}
|
||||
className="bg-primary text-primary-foreground hover:bg-primary/90 disabled:bg-muted w-full rounded-md px-4 py-2 text-sm font-medium disabled:cursor-not-allowed"
|
||||
>
|
||||
{hasMultiple ? format(ts.submitBatch, { count: files.length }) : ts.submit}
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Error */}
|
||||
{error && (
|
||||
<div className="text-destructive rounded-md bg-red-50 p-3 text-sm dark:bg-red-950">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Download */}
|
||||
{downloadUrl && (
|
||||
<a
|
||||
href={downloadUrl}
|
||||
download
|
||||
className="bg-primary text-primary-foreground hover:bg-primary/90 flex items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium"
|
||||
>
|
||||
<Download className="h-4 w-4" />
|
||||
{t.common.download}
|
||||
</a>
|
||||
)}
|
||||
</form>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,154 @@
|
||||
import { Download } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { ProgressCard } from "@/components/common/progress-card";
|
||||
import { useTranslation } from "@/contexts/i18n-context";
|
||||
import { useToolProcessor } from "@/hooks/use-tool-processor";
|
||||
import { format } from "@/lib/format";
|
||||
import { useFileStore } from "@/stores/file-store";
|
||||
|
||||
const QUALITY_OPTIONS = [
|
||||
{ value: "fast", label: "Fast" },
|
||||
{ value: "balanced", label: "Balanced" },
|
||||
{ value: "best", label: "Best" },
|
||||
] as const;
|
||||
|
||||
const LANGUAGE_OPTIONS = [
|
||||
{ value: "auto", labelKey: "autoDetect" },
|
||||
{ value: "en", label: "English" },
|
||||
{ value: "de", label: "German" },
|
||||
{ value: "fr", label: "French" },
|
||||
{ value: "es", label: "Spanish" },
|
||||
{ value: "zh", label: "Chinese" },
|
||||
{ value: "ja", label: "Japanese" },
|
||||
{ value: "ko", label: "Korean" },
|
||||
] as const;
|
||||
|
||||
export function OcrPdfSettings() {
|
||||
const { t } = useTranslation();
|
||||
const { files } = useFileStore();
|
||||
const { processFiles, processAllFiles, processing, error, downloadUrl, progress } =
|
||||
useToolProcessor("ocr-pdf");
|
||||
|
||||
const [quality, setQuality] = useState("balanced");
|
||||
const [language, setLanguage] = useState("auto");
|
||||
const [pages, setPages] = useState("all");
|
||||
|
||||
const ts = t.toolSettings["ocr-pdf"];
|
||||
const hasFile = files.length > 0;
|
||||
const hasMultiple = files.length > 1;
|
||||
|
||||
const handleProcess = () => {
|
||||
const settings = { quality, language, pages };
|
||||
if (hasMultiple) {
|
||||
processAllFiles(files, settings);
|
||||
} else {
|
||||
processFiles(files, settings);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
handleProcess();
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
{/* Quality */}
|
||||
<div>
|
||||
<label htmlFor="ocrpdf-quality" className="mb-1.5 block text-sm font-medium">
|
||||
{ts.quality}
|
||||
</label>
|
||||
<div className="grid grid-cols-3 gap-1.5">
|
||||
{QUALITY_OPTIONS.map((opt) => (
|
||||
<button
|
||||
key={opt.value}
|
||||
type="button"
|
||||
onClick={() => setQuality(opt.value)}
|
||||
className={`rounded-lg border px-2 py-2 text-xs font-medium transition-colors ${
|
||||
quality === opt.value
|
||||
? "border-primary bg-primary/10 text-primary"
|
||||
: "border-border text-muted-foreground hover:border-primary/50"
|
||||
}`}
|
||||
>
|
||||
{opt.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Language */}
|
||||
<div>
|
||||
<label htmlFor="ocrpdf-language" className="mb-1.5 block text-sm font-medium">
|
||||
{ts.language}
|
||||
</label>
|
||||
<select
|
||||
id="ocrpdf-language"
|
||||
value={language}
|
||||
onChange={(e) => setLanguage(e.target.value)}
|
||||
className="border-border bg-background w-full rounded-md border px-3 py-2 text-sm"
|
||||
>
|
||||
{LANGUAGE_OPTIONS.map((opt) => (
|
||||
<option key={opt.value} value={opt.value}>
|
||||
{"labelKey" in opt ? (ts as Record<string, string>)[opt.labelKey] : opt.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Pages */}
|
||||
<div>
|
||||
<label htmlFor="ocrpdf-pages" className="mb-1.5 block text-sm font-medium">
|
||||
{ts.pages}
|
||||
</label>
|
||||
<input
|
||||
id="ocrpdf-pages"
|
||||
type="text"
|
||||
value={pages}
|
||||
onChange={(e) => setPages(e.target.value)}
|
||||
placeholder={ts.pagesPlaceholder}
|
||||
className="border-border bg-background w-full rounded-md border px-3 py-2 text-sm"
|
||||
/>
|
||||
<p className="mt-1 text-xs text-muted-foreground">{ts.pagesHint}</p>
|
||||
</div>
|
||||
|
||||
{/* Progress / Submit */}
|
||||
{processing && progress ? (
|
||||
<ProgressCard
|
||||
active={processing}
|
||||
phase={progress.phase === "idle" ? "uploading" : progress.phase}
|
||||
label={ts.progressLabel}
|
||||
stage={progress.stage}
|
||||
percent={progress.percent}
|
||||
elapsed={progress.elapsed}
|
||||
/>
|
||||
) : (
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!hasFile || processing}
|
||||
className="bg-primary text-primary-foreground hover:bg-primary/90 disabled:bg-muted w-full rounded-md px-4 py-2 text-sm font-medium disabled:cursor-not-allowed"
|
||||
>
|
||||
{hasMultiple ? format(ts.submitBatch, { count: files.length }) : ts.submit}
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Error */}
|
||||
{error && (
|
||||
<div className="text-destructive rounded-md bg-red-50 p-3 text-sm dark:bg-red-950">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Download */}
|
||||
{downloadUrl && (
|
||||
<a
|
||||
href={downloadUrl}
|
||||
download
|
||||
className="bg-primary text-primary-foreground hover:bg-primary/90 flex items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium"
|
||||
>
|
||||
<Download className="h-4 w-4" />
|
||||
{t.common.download}
|
||||
</a>
|
||||
)}
|
||||
</form>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,136 @@
|
||||
import { Download } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { ProgressCard } from "@/components/common/progress-card";
|
||||
import { useTranslation } from "@/contexts/i18n-context";
|
||||
import { useToolProcessor } from "@/hooks/use-tool-processor";
|
||||
import { format } from "@/lib/format";
|
||||
import { useFileStore } from "@/stores/file-store";
|
||||
|
||||
const LANGUAGE_OPTIONS = [
|
||||
{ value: "auto", labelKey: "autoDetect" },
|
||||
{ value: "en", label: "English" },
|
||||
{ value: "de", label: "German" },
|
||||
{ value: "fr", label: "French" },
|
||||
{ value: "es", label: "Spanish" },
|
||||
{ value: "zh", label: "Chinese" },
|
||||
{ value: "ja", label: "Japanese" },
|
||||
{ value: "ko", label: "Korean" },
|
||||
{ value: "id", label: "Indonesian" },
|
||||
{ value: "th", label: "Thai" },
|
||||
{ value: "vi", label: "Vietnamese" },
|
||||
] as const;
|
||||
|
||||
const FORMAT_OPTIONS = [
|
||||
{ value: "txt", labelKey: "plainText" },
|
||||
{ value: "srt", label: "SRT" },
|
||||
{ value: "vtt", label: "WebVTT" },
|
||||
] as const;
|
||||
|
||||
export function TranscribeAudioSettings() {
|
||||
const { t } = useTranslation();
|
||||
const { files } = useFileStore();
|
||||
const { processFiles, processAllFiles, processing, error, downloadUrl, progress } =
|
||||
useToolProcessor("transcribe-audio");
|
||||
|
||||
const [language, setLanguage] = useState("auto");
|
||||
const [outputFormat, setOutputFormat] = useState("txt");
|
||||
|
||||
const ts = t.toolSettings["transcribe-audio"];
|
||||
const hasFile = files.length > 0;
|
||||
const hasMultiple = files.length > 1;
|
||||
|
||||
const handleProcess = () => {
|
||||
const settings = { language, outputFormat };
|
||||
if (hasMultiple) {
|
||||
processAllFiles(files, settings);
|
||||
} else {
|
||||
processFiles(files, settings);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
handleProcess();
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
{/* Language */}
|
||||
<div>
|
||||
<label htmlFor="ta-language" className="mb-1.5 block text-sm font-medium">
|
||||
{ts.language}
|
||||
</label>
|
||||
<select
|
||||
id="ta-language"
|
||||
value={language}
|
||||
onChange={(e) => setLanguage(e.target.value)}
|
||||
className="border-border bg-background w-full rounded-md border px-3 py-2 text-sm"
|
||||
>
|
||||
{LANGUAGE_OPTIONS.map((opt) => (
|
||||
<option key={opt.value} value={opt.value}>
|
||||
{"labelKey" in opt ? (ts as Record<string, string>)[opt.labelKey] : opt.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Output Format */}
|
||||
<div>
|
||||
<label htmlFor="ta-output-format" className="mb-1.5 block text-sm font-medium">
|
||||
{ts.outputFormat}
|
||||
</label>
|
||||
<select
|
||||
id="ta-output-format"
|
||||
value={outputFormat}
|
||||
onChange={(e) => setOutputFormat(e.target.value)}
|
||||
className="border-border bg-background w-full rounded-md border px-3 py-2 text-sm"
|
||||
>
|
||||
{FORMAT_OPTIONS.map((opt) => (
|
||||
<option key={opt.value} value={opt.value}>
|
||||
{"labelKey" in opt ? (ts as Record<string, string>)[opt.labelKey] : opt.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Progress / Submit */}
|
||||
{processing && progress ? (
|
||||
<ProgressCard
|
||||
active={processing}
|
||||
phase={progress.phase === "idle" ? "uploading" : progress.phase}
|
||||
label={ts.progressLabel}
|
||||
stage={progress.stage}
|
||||
percent={progress.percent}
|
||||
elapsed={progress.elapsed}
|
||||
/>
|
||||
) : (
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!hasFile || processing}
|
||||
className="bg-primary text-primary-foreground hover:bg-primary/90 disabled:bg-muted w-full rounded-md px-4 py-2 text-sm font-medium disabled:cursor-not-allowed"
|
||||
>
|
||||
{hasMultiple ? format(ts.submitBatch, { count: files.length }) : ts.submit}
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Error */}
|
||||
{error && (
|
||||
<div className="text-destructive rounded-md bg-red-50 p-3 text-sm dark:bg-red-950">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Download */}
|
||||
{downloadUrl && (
|
||||
<a
|
||||
href={downloadUrl}
|
||||
download
|
||||
className="bg-primary text-primary-foreground hover:bg-primary/90 flex items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium"
|
||||
>
|
||||
<Download className="h-4 w-4" />
|
||||
{t.common.download}
|
||||
</a>
|
||||
)}
|
||||
</form>
|
||||
);
|
||||
}
|
||||
@@ -71,6 +71,7 @@ import {
|
||||
MicVocal,
|
||||
Minimize2,
|
||||
Music,
|
||||
PaintBucket,
|
||||
Palette,
|
||||
PenLine,
|
||||
PenTool,
|
||||
@@ -183,6 +184,7 @@ export const ICON_MAP: Record<string, LucideIcon> = {
|
||||
MicVocal,
|
||||
Minimize2,
|
||||
Music,
|
||||
PaintBucket,
|
||||
Palette,
|
||||
PenLine,
|
||||
PenTool,
|
||||
|
||||
@@ -101,6 +101,11 @@ export const TOOL_DISPLAY_MODES: Record<string, DisplayMode> = {
|
||||
"transparency-fixer": "before-after",
|
||||
"content-aware-resize": "side-by-side",
|
||||
"ai-canvas-expand": "before-after",
|
||||
"ocr-pdf": "no-comparison",
|
||||
"transcribe-audio": "no-comparison",
|
||||
"auto-subtitles": "no-comparison",
|
||||
"background-replace": "no-comparison",
|
||||
"blur-background": "no-comparison",
|
||||
|
||||
// Video tools
|
||||
"convert-video": "media-player",
|
||||
|
||||
@@ -269,6 +269,9 @@ const UpscaleSettings = lazy(() =>
|
||||
const OcrSettings = lazy(() =>
|
||||
import("@/components/tools/ocr-settings").then((m) => ({ default: m.OcrSettings })),
|
||||
);
|
||||
const OcrPdfSettings = lazy(() =>
|
||||
import("@/components/tools/ocr-pdf-settings").then((m) => ({ default: m.OcrPdfSettings })),
|
||||
);
|
||||
const BlurFacesSettings = lazy(() =>
|
||||
import("@/components/tools/blur-faces-settings").then((m) => ({
|
||||
default: m.BlurFacesSettings,
|
||||
@@ -344,6 +347,26 @@ const ColorBlindnessSettings = lazy(() =>
|
||||
default: m.ColorBlindnessSettings,
|
||||
})),
|
||||
);
|
||||
const TranscribeAudioSettings = lazy(() =>
|
||||
import("@/components/tools/transcribe-audio-settings").then((m) => ({
|
||||
default: m.TranscribeAudioSettings,
|
||||
})),
|
||||
);
|
||||
const AutoSubtitlesSettings = lazy(() =>
|
||||
import("@/components/tools/auto-subtitles-settings").then((m) => ({
|
||||
default: m.AutoSubtitlesSettings,
|
||||
})),
|
||||
);
|
||||
const BackgroundReplaceSettings = lazy(() =>
|
||||
import("@/components/tools/background-replace-settings").then((m) => ({
|
||||
default: m.BackgroundReplaceSettings,
|
||||
})),
|
||||
);
|
||||
const BlurBackgroundSettings = lazy(() =>
|
||||
import("@/components/tools/blur-background-settings").then((m) => ({
|
||||
default: m.BlurBackgroundSettings,
|
||||
})),
|
||||
);
|
||||
const ConvertVideoSettings = lazy(() =>
|
||||
import("@/components/tools/convert-video-settings").then((m) => ({
|
||||
default: m.ConvertVideoSettings,
|
||||
@@ -952,6 +975,7 @@ const ENTRY_CONFIG: ReadonlyArray<[string, RegistryEntryConfig]> = [
|
||||
["remove-background", { Settings: RemoveBgSettings }],
|
||||
["upscale", { Settings: UpscaleSettings }],
|
||||
["ocr", { Settings: OcrSettings }],
|
||||
["ocr-pdf", { accept: ".pdf", Settings: OcrPdfSettings }],
|
||||
["blur-faces", { Settings: BlurFacesSettings }],
|
||||
["enhance-faces", { Settings: EnhanceFacesSettings }],
|
||||
["erase-object", { Settings: EraseObjectSettingsWrapper as never }],
|
||||
@@ -965,6 +989,10 @@ const ENTRY_CONFIG: ReadonlyArray<[string, RegistryEntryConfig]> = [
|
||||
["transparency-fixer", { Settings: TransparencyFixerSettings }],
|
||||
["content-aware-resize", { Settings: ContentAwareResizeSettings }],
|
||||
["ai-canvas-expand", { Settings: AiCanvasExpandSettings }],
|
||||
["transcribe-audio", { accept: AUDIO_INPUTS.join(","), Settings: TranscribeAudioSettings }],
|
||||
["auto-subtitles", { accept: VIDEO_INPUTS.join(","), Settings: AutoSubtitlesSettings }],
|
||||
["background-replace", { Settings: BackgroundReplaceSettings }],
|
||||
["blur-background", { Settings: BlurBackgroundSettings }],
|
||||
|
||||
// Video tools
|
||||
["convert-video", { accept: VIDEO_INPUTS.join(","), Settings: ConvertVideoSettings }],
|
||||
|
||||
Reference in New Issue
Block a user