makearmy/makearmy-app
1
0
Fork 0
Code Issues 11 Pull requests Projects Releases Packages Wiki Activity Actions

background remover fix

Browse source
This commit is contained in:
makearmy 2025-10-15 16:57:22 -04:00
parent ab93441fc5
commit da4d0620a4
1 changed files with 17 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

23
components/utilities/BackgroundRemoverPanel.tsx
View file

@ -1,4 +1,3 @@
// components/utilities/BackgroundRemoverPanel.tsx
"use client"; "use client";
import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"; import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
@ -73,7 +72,7 @@ type ResultMap = {
}; };
}; };
export default function BackgroundRemoverPanel({ embedded = true }: { embedded?: boolean }) { export default function BackgroundRemoverPage() {
// ---------- State ---------- // ---------- State ----------
const [file, setFile] = useState<File | null>(null); const [file, setFile] = useState<File | null>(null);
const [sourceUrl, setSourceUrl] = useState<string | null>(null); const [sourceUrl, setSourceUrl] = useState<string | null>(null);
@ -353,10 +352,21 @@ export default function BackgroundRemoverPanel({ embedded = true }: { embedded?:
// ---------- Render ---------- // ---------- Render ----------
return ( return (
<div className="p-0 text-zinc-100 overflow-x-hidden"> <div className="p-6 text-zinc-100 overflow-x-hidden">
{styles} {styles}
<div className="mx-auto w-full max-w-[1200px] px-0"> <div className="mx-auto w-full max-w-[1200px] px-4">
{/* Header row: title left, back button right */}
<div className="mb-4 flex items-center justify-between gap-3">
<h1 className="text-2xl font-semibold">Background Remover</h1>
<a
href="https://makearmy.io"
className="px-3 py-1 rounded-md border border-zinc-700 hover:bg-zinc-800/60 text-sm"
>
Back to main
</a>
</div>
{/* Source filename */} {/* Source filename */}
<div className="text-zinc-400 mb-3"> <div className="text-zinc-400 mb-3">
<span className="text-zinc-300">Source:</span>{" "} <span className="text-zinc-300">Source:</span>{" "}
@ -465,7 +475,7 @@ export default function BackgroundRemoverPanel({ embedded = true }: { embedded?:
{pendingCount > 0 ? `Running… ${doneCount}/${METHODS.length}` : "Run all methods"} {pendingCount > 0 ? `Running… ${doneCount}/${METHODS.length}` : "Run all methods"}
</button> </button>
{/* GPU-safe toggle */} {/* GPU-safe toggle: sits next to Run All on mobile; keeps position naturally on larger screens */}
<label className="flex items-center gap-2 text-sm text-zinc-300 cursor-pointer select-none order-1"> <label className="flex items-center gap-2 text-sm text-zinc-300 cursor-pointer select-none order-1">
<input type="checkbox" checked={gpuSafe} onChange={(e) => setGpuSafe(e.target.checked)} /> GPU-safe mode <input type="checkbox" checked={gpuSafe} onChange={(e) => setGpuSafe(e.target.checked)} /> GPU-safe mode
</label> </label>
@ -484,7 +494,7 @@ export default function BackgroundRemoverPanel({ embedded = true }: { embedded?:
)} )}
</div> </div>
{/* Right-side controls */} {/* Right-side controls collapse under on mobile */}
<div className="sm:ml-auto flex items-center gap-3 w-full sm:w-auto order-3"> <div className="sm:ml-auto flex items-center gap-3 w-full sm:w-auto order-3">
<input <input
type="range" type="range"
@ -526,3 +536,4 @@ export default function BackgroundRemoverPanel({ embedded = true }: { embedded?:
</div> </div>
); );
} }