24 lines
1.1 KiB
JavaScript
24 lines
1.1 KiB
JavaScript
import { useBackgroundRemoval } from '../../hooks/useBackgroundRemoval';
|
|
|
|
export function BackgroundRemovalButton({ selectedElement, onUpdate }) {
|
|
const { loading, progress, hasModel, loadModel, removeBackground } = useBackgroundRemoval();
|
|
|
|
const handleRemoveBackground = async () => {
|
|
if (!selectedElement || selectedElement.type !== 'image') return;
|
|
if (!hasModel) { const loaded = await loadModel(); if (!loaded) return; }
|
|
const resultUrl = await removeBackground(selectedElement.src);
|
|
if (resultUrl) onUpdate(selectedElement.id, { src: resultUrl, bgRemoved: true });
|
|
};
|
|
|
|
if (!selectedElement || selectedElement.type !== 'image') return null;
|
|
|
|
return (
|
|
<div className="bg-removal-container">
|
|
<button className="bg-removal-btn" onClick={handleRemoveBackground} disabled={loading}>
|
|
{loading ? (<><div className="spinner-small" />{progress > 0 ? `Loading: ${progress}%` : 'Removing Background...'}</>) : (<>✨ Remove Background</>)}
|
|
</button>
|
|
{!hasModel && <p className="bg-removal-hint">First use requires downloading ~86MB model. Subsequent uses are cached.</p>}
|
|
</div>
|
|
);
|
|
}
|