File size: 7,446 Bytes
921d377 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 | /**
* BackgroundTools - Background manipulation buttons for the Edit page.
*
* Provides quick access to background operations:
* - Remove BG: Make background transparent
* - Change BG: Replace with AI-generated background
* - Blur BG: Portrait mode / bokeh effect
*
* This component is additive and can be dropped into any page.
*/
import React, { useState } from 'react';
import { Loader2, Scissors, Palette, CircleDot, X } from 'lucide-react';
import { processBackground, BACKGROUND_ACTIONS } from '../enhance/backgroundApi';
/**
* BackgroundTools component for background manipulation.
*
* @example
* ```tsx
* <BackgroundTools
* backendUrl="http://localhost:8000"
* imageUrl={currentImage}
* onResult={(url, action, hasAlpha) => {
* console.log(`Background ${action} completed: ${url}, hasAlpha: ${hasAlpha}`)
* setCurrentImage(url)
* }}
* onError={(err) => setError(err)}
* />
* ```
*/
export function BackgroundTools({ backendUrl, apiKey, imageUrl, onResult, onError, disabled = false, compact = false, }) {
const [loading, setLoading] = useState(null);
const [showPromptInput, setShowPromptInput] = useState(false);
const [bgPrompt, setBgPrompt] = useState('');
const [blurStrength, setBlurStrength] = useState(15);
// Only show "Change BG" (replace) for now - remove and blur are disabled until fixed
const ENABLED_ACTIONS = BACKGROUND_ACTIONS.filter(a => a.id === 'replace');
const handleAction = async (action, prompt) => {
if (!imageUrl || loading || disabled)
return;
// For replace action, we need a prompt
if (action === 'replace' && !prompt) {
setShowPromptInput(true);
return;
}
setLoading(action);
setShowPromptInput(false);
try {
const result = await processBackground({
backendUrl,
apiKey,
imageUrl,
action,
prompt,
blurStrength: action === 'blur' ? blurStrength : undefined,
});
const resultUrl = result?.media?.images?.[0];
if (resultUrl) {
onResult(resultUrl, action, result.has_alpha ?? false);
}
else {
onError('Operation completed but no image was returned.');
}
}
catch (e) {
onError(e instanceof Error ? e.message : 'Background operation failed');
}
finally {
setLoading(null);
setBgPrompt('');
}
};
const getIcon = (action) => {
switch (action) {
case 'remove':
return <Scissors size={compact ? 14 : 16}/>;
case 'replace':
return <Palette size={compact ? 14 : 16}/>;
case 'blur':
return <CircleDot size={compact ? 14 : 16}/>;
}
};
const isDisabled = !imageUrl || disabled;
if (compact) {
return (<div className="flex gap-1.5">
{ENABLED_ACTIONS.map((actionInfo) => (<button key={actionInfo.id} onClick={() => handleAction(actionInfo.id)} disabled={isDisabled || loading !== null} title={`${actionInfo.label}: ${actionInfo.description}`} className={`
p-2 rounded-lg transition-all
${loading === actionInfo.id
? 'bg-blue-500/60 text-white animate-pulse'
: isDisabled || loading !== null
? 'bg-white/5 text-white/30 cursor-not-allowed'
: 'bg-white/10 text-white/70 hover:bg-blue-500/30 hover:text-blue-300'}
`}>
{loading === actionInfo.id ? (<Loader2 size={14} className="animate-spin"/>) : (getIcon(actionInfo.id))}
</button>))}
</div>);
}
return (<div className="space-y-3">
<div className="text-xs uppercase tracking-wider text-white/40 font-semibold flex items-center gap-2">
<Scissors size={14}/>
Background
</div>
<div className="grid grid-cols-1 gap-2">
{ENABLED_ACTIONS.map((actionInfo) => (<button key={actionInfo.id} onClick={() => handleAction(actionInfo.id)} disabled={isDisabled || loading !== null} className={`
flex items-center gap-3 p-3 rounded-xl border transition-all text-left
${loading === actionInfo.id
? 'bg-blue-500/20 border-blue-500/40 text-blue-300'
: isDisabled || loading !== null
? 'bg-white/5 border-white/5 text-white/30 cursor-not-allowed'
: 'bg-white/5 border-white/10 text-white/80 hover:bg-blue-500/10 hover:border-blue-500/30 hover:text-blue-200'}
`}>
<div className={`
w-9 h-9 rounded-lg flex items-center justify-center
${loading === actionInfo.id
? 'bg-blue-500/30'
: 'bg-white/10'}
`}>
{loading === actionInfo.id ? (<Loader2 size={18} className="animate-spin text-blue-400"/>) : (getIcon(actionInfo.id))}
</div>
<div className="flex-1 min-w-0">
<div className="text-sm font-medium">{actionInfo.label}</div>
<div className="text-[10px] text-white/40 truncate">
{actionInfo.description}
</div>
</div>
</button>))}
</div>
{/* Prompt Input for Replace Action */}
{showPromptInput && (<div className="space-y-2 p-3 rounded-xl bg-blue-500/10 border border-blue-500/30 animate-in fade-in slide-in-from-top-2">
<div className="flex items-center justify-between">
<span className="text-xs text-blue-300 font-medium">Describe new background</span>
<button onClick={() => {
setShowPromptInput(false);
setBgPrompt('');
}} className="text-white/40 hover:text-white">
<X size={14}/>
</button>
</div>
<input type="text" value={bgPrompt} onChange={(e) => setBgPrompt(e.target.value)} placeholder="e.g., sunset beach, city skyline, forest..." className="w-full rounded-lg bg-black/40 border border-white/10 px-3 py-2 text-sm text-white placeholder:text-white/30 focus:border-blue-500/50 focus:outline-none" autoFocus onKeyDown={(e) => {
if (e.key === 'Enter' && bgPrompt.trim()) {
handleAction('replace', bgPrompt.trim());
}
if (e.key === 'Escape') {
setShowPromptInput(false);
setBgPrompt('');
}
}}/>
<button onClick={() => handleAction('replace', bgPrompt.trim())} disabled={!bgPrompt.trim() || loading !== null} className="w-full py-2 px-4 rounded-lg bg-blue-500 text-white hover:bg-blue-400 disabled:bg-white/10 disabled:text-white/30 disabled:cursor-not-allowed transition-all text-sm font-medium">
{loading === 'replace' ? (<span className="flex items-center justify-center gap-2">
<Loader2 size={14} className="animate-spin"/>
Generating...
</span>) : ('Generate Background')}
</button>
</div>)}
<p className="text-[10px] text-white/30 leading-relaxed">
Replace the background with AI-generated content. Results are added to your version history.
</p>
</div>);
}
export default BackgroundTools;
|