File size: 7,399 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 164 165 | /**
* OutpaintTools - Canvas extension tools for the Edit page.
*
* Provides controls for extending images beyond their original boundaries:
* - Direction selection (left, right, up, down, horizontal, vertical, all)
* - Extension amount slider (64-1024 pixels)
* - Optional prompt for guiding generated content
*
* This component is additive and can be dropped into any page.
*/
import React, { useState } from 'react';
import { Loader2, Expand, ArrowRight, ArrowLeft, ArrowUp, ArrowDown, MoveHorizontal, MoveVertical, Maximize, } from 'lucide-react';
import { outpaintImage, EXTEND_DIRECTIONS } from '../enhance/outpaintApi';
/**
* OutpaintTools component for canvas extension.
*
* @example
* ```tsx
* <OutpaintTools
* backendUrl="http://localhost:8000"
* imageUrl={currentImage}
* onResult={(url, direction, newSize) => {
* console.log(`Extended ${direction}: ${url}, new size: ${newSize}`)
* setCurrentImage(url)
* }}
* onError={(err) => setError(err)}
* />
* ```
*/
export function OutpaintTools({ backendUrl, apiKey, imageUrl, onResult, onError, disabled = false, }) {
const [loading, setLoading] = useState(false);
const [selectedDirection, setSelectedDirection] = useState('right');
const [extendPixels, setExtendPixels] = useState(256);
const [prompt, setPrompt] = useState('');
const [showAdvanced, setShowAdvanced] = useState(false);
const handleExtend = async () => {
if (!imageUrl || loading || disabled)
return;
setLoading(true);
try {
const result = await outpaintImage({
backendUrl,
apiKey,
imageUrl,
direction: selectedDirection,
extendPixels,
prompt: prompt.trim() || undefined,
});
const resultUrl = result?.media?.images?.[0];
if (resultUrl) {
const newSize = result.new_size ?? [0, 0];
onResult(resultUrl, selectedDirection, newSize);
setPrompt(''); // Clear prompt after success
}
else {
onError('Outpaint completed but no image was returned.');
}
}
catch (e) {
onError(e instanceof Error ? e.message : 'Outpaint failed');
}
finally {
setLoading(false);
}
};
const getDirectionIcon = (direction) => {
switch (direction) {
case 'right':
return <ArrowRight size={14}/>;
case 'left':
return <ArrowLeft size={14}/>;
case 'up':
return <ArrowUp size={14}/>;
case 'down':
return <ArrowDown size={14}/>;
case 'horizontal':
return <MoveHorizontal size={14}/>;
case 'vertical':
return <MoveVertical size={14}/>;
case 'all':
return <Maximize size={14}/>;
}
};
const isDisabled = !imageUrl || disabled;
return (<div className="space-y-3">
<div className="text-xs uppercase tracking-wider text-white/40 font-semibold flex items-center gap-2">
<Expand size={14}/>
Extend / Outpaint
</div>
{/* Direction Grid */}
<div className="grid grid-cols-4 gap-1.5">
{EXTEND_DIRECTIONS.map((dir) => (<button key={dir.id} onClick={() => setSelectedDirection(dir.id)} disabled={isDisabled} title={dir.description} className={`
p-2 rounded-lg transition-all text-center
${selectedDirection === dir.id
? 'bg-green-500/30 border-green-500/50 text-green-300 border'
: isDisabled
? 'bg-white/5 text-white/30 cursor-not-allowed border border-transparent'
: 'bg-white/5 text-white/60 hover:bg-green-500/20 hover:text-green-300 border border-transparent hover:border-green-500/30'}
`}>
<div className="flex flex-col items-center gap-1">
{getDirectionIcon(dir.id)}
<span className="text-[9px] font-medium">{dir.label}</span>
</div>
</button>))}
</div>
{/* Extend Amount Slider */}
<div className="space-y-2">
<div className="flex justify-between text-xs">
<span className="uppercase tracking-wider text-white/40 font-semibold">
Extend Amount
</span>
<span className="text-white/60">{extendPixels}px</span>
</div>
<input type="range" min={64} max={1024} step={64} value={extendPixels} onChange={(e) => setExtendPixels(Number(e.target.value))} disabled={isDisabled} className="w-full h-1.5 bg-white/10 rounded-full appearance-none cursor-pointer disabled:opacity-50 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:bg-green-400 [&::-webkit-slider-thumb]:rounded-full"/>
<div className="flex justify-between text-[9px] text-white/30">
<span>64px</span>
<span>512px</span>
<span>1024px</span>
</div>
</div>
{/* Advanced Options Toggle */}
<button onClick={() => setShowAdvanced(!showAdvanced)} disabled={isDisabled} className="w-full text-left text-xs text-white/50 hover:text-white/70 disabled:opacity-50 transition-colors">
{showAdvanced ? '▼' : '▶'} Advanced Options
</button>
{/* Advanced Options */}
{showAdvanced && (<div className="space-y-2 p-3 rounded-xl bg-white/5 border border-white/10 animate-in fade-in slide-in-from-top-2">
<label className="text-xs text-white/50">
Prompt (optional)
</label>
<input type="text" value={prompt} onChange={(e) => setPrompt(e.target.value)} placeholder="e.g., continue the landscape, add mountains..." disabled={isDisabled} 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-green-500/50 focus:outline-none disabled:opacity-50"/>
<p className="text-[9px] text-white/30">
Guide what should appear in the extended area
</p>
</div>)}
{/* Extend Button */}
<button onClick={handleExtend} disabled={isDisabled || loading} className={`
w-full flex items-center justify-center gap-2 p-3 rounded-xl font-medium text-sm transition-all
${loading
? 'bg-green-500/30 text-green-300 border border-green-500/40'
: isDisabled
? 'bg-white/5 text-white/30 cursor-not-allowed border border-transparent'
: 'bg-green-500/20 text-green-300 hover:bg-green-500/30 border border-green-500/30 hover:border-green-500/50'}
`}>
{loading ? (<>
<Loader2 size={16} className="animate-spin"/>
Extending...
</>) : (<>
<Expand size={16}/>
Extend {selectedDirection === 'all' ? 'All Sides' : selectedDirection.charAt(0).toUpperCase() + selectedDirection.slice(1)}
</>)}
</button>
<p className="text-[10px] text-white/30 leading-relaxed">
Extend the image canvas and AI will generate seamless content beyond the borders.
Results are added to your version history.
</p>
</div>);
}
export default OutpaintTools;
|