diff --git a/apps/web/src/components/tools/ai-canvas-expand-settings.tsx b/apps/web/src/components/tools/ai-canvas-expand-settings.tsx index 7e293185..0bf98785 100644 --- a/apps/web/src/components/tools/ai-canvas-expand-settings.tsx +++ b/apps/web/src/components/tools/ai-canvas-expand-settings.tsx @@ -4,6 +4,14 @@ import { ProgressCard } from "@/components/common/progress-card"; import { useToolProcessor } from "@/hooks/use-tool-processor"; import { useFileStore } from "@/stores/file-store"; +type Tier = "fast" | "balanced" | "high"; + +const TIERS: { id: Tier; label: string; desc: string }[] = [ + { id: "fast", label: "Fast", desc: "Quick preview, fewer AI passes" }, + { id: "balanced", label: "Balanced", desc: "Good quality, moderate speed" }, + { id: "high", label: "High Quality", desc: "Best results, slower" }, +]; + const EXTEND_PRESETS = [ { label: "16:9", aspect: 16 / 9 }, { label: "1:1", aspect: 1 }, @@ -13,15 +21,16 @@ const EXTEND_PRESETS = [ { label: "4:5", aspect: 4 / 5 }, ]; -export function ContentAwareCropSettings() { +export function AiCanvasExpandSettings() { const { files } = useFileStore(); const { processFiles, processAllFiles, processing, error, downloadUrl, progress } = - useToolProcessor("content-aware-crop"); + useToolProcessor("ai-canvas-expand"); const [extendTop, setExtendTop] = useState(0); const [extendRight, setExtendRight] = useState(0); const [extendBottom, setExtendBottom] = useState(0); const [extendLeft, setExtendLeft] = useState(0); + const [tier, setTier] = useState("balanced"); const [imgDimensions, setImgDimensions] = useState<{ width: number; height: number } | null>( null, ); @@ -71,7 +80,7 @@ export function ContentAwareCropSettings() { const hasExtension = extendTop > 0 || extendRight > 0 || extendBottom > 0 || extendLeft > 0; const handleProcess = () => { - const settings = { extendTop, extendRight, extendBottom, extendLeft }; + const settings = { extendTop, extendRight, extendBottom, extendLeft, tier }; if (files.length > 1) { processAllFiles(files, settings); } else { @@ -86,6 +95,31 @@ export function ContentAwareCropSettings() { return (
+ {/* Quality tier */} +
+

Quality

+
+ {TIERS.map((t) => ( + + ))} +
+

+ {TIERS.find((t) => t.id === tier)?.desc} +

+
+ {/* Aspect ratio presets */}

Extend to aspect ratio

@@ -185,7 +219,7 @@ export function ContentAwareCropSettings() { ) : (