Spaces:
Sleeping
Sleeping
File size: 5,714 Bytes
f5fe15c |
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 |
import React, { useState } from 'react';
import { Upload } from 'lucide-react';
const FaceSwapForm = () => {
const [sourceFile, setSourceFile] = useState(null);
const [targetFile, setTargetFile] = useState(null);
const [doEnhance, setDoEnhance] = useState(true);
const [sourcePreview, setSourcePreview] = useState('');
const [targetPreview, setTargetPreview] = useState('');
const [isLoading, setIsLoading] = useState(false);
const handleFileChange = (event, type) => {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onloadend = () => {
if (type === 'source') {
setSourceFile(file);
setSourcePreview(reader.result);
} else {
setTargetFile(file);
setTargetPreview(reader.result);
}
};
reader.readAsDataURL(file);
}
};
const handleSubmit = async (e) => {
e.preventDefault();
setIsLoading(true);
try {
// Here you would implement your actual API call
console.log('Processing:', { sourceFile, targetFile, doEnhance });
// Simulate API delay
await new Promise(resolve => setTimeout(resolve, 2000));
} catch (error) {
console.error('Error:', error);
} finally {
setIsLoading(false);
}
};
return (
<div className="max-w-2xl mx-auto p-6 bg-white rounded-lg shadow-md">
<h2 className="text-2xl font-bold mb-6 text-center">Face Swap</h2>
<form onSubmit={handleSubmit} className="space-y-6">
<div className="grid grid-cols-2 gap-6">
{/* Source Image Upload */}
<div className="space-y-2">
<label className="block text-sm font-medium text-gray-700">
Source Image
</label>
<div className="relative">
{sourcePreview ? (
<div className="relative h-48 rounded-lg overflow-hidden">
<img
src={sourcePreview}
alt="Source preview"
className="w-full h-full object-cover"
/>
<button
type="button"
onClick={() => {
setSourceFile(null);
setSourcePreview('');
}}
className="absolute top-2 right-2 bg-red-500 text-white p-1 rounded-full"
>
×
</button>
</div>
) : (
<label className="flex flex-col items-center justify-center h-48 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50">
<Upload className="w-8 h-8 text-gray-400" />
<span className="mt-2 text-sm text-gray-500">Upload source image</span>
<input
type="file"
className="hidden"
accept="image/*"
onChange={(e) => handleFileChange(e, 'source')}
/>
</label>
)}
</div>
</div>
{/* Target Image Upload */}
<div className="space-y-2">
<label className="block text-sm font-medium text-gray-700">
Target Image
</label>
<div className="relative">
{targetPreview ? (
<div className="relative h-48 rounded-lg overflow-hidden">
<img
src={targetPreview}
alt="Target preview"
className="w-full h-full object-cover"
/>
<button
type="button"
onClick={() => {
setTargetFile(null);
setTargetPreview('');
}}
className="absolute top-2 right-2 bg-red-500 text-white p-1 rounded-full"
>
×
</button>
</div>
) : (
<label className="flex flex-col items-center justify-center h-48 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50">
<Upload className="w-8 h-8 text-gray-400" />
<span className="mt-2 text-sm text-gray-500">Upload target image</span>
<input
type="file"
className="hidden"
accept="image/*"
onChange={(e) => handleFileChange(e, 'target')}
/>
</label>
)}
</div>
</div>
</div>
{/* Enhancement Option */}
<div className="flex items-center">
<input
type="checkbox"
id="enhance"
checked={doEnhance}
onChange={(e) => setDoEnhance(e.target.checked)}
className="h-4 w-4 text-blue-600 rounded border-gray-300"
/>
<label htmlFor="enhance" className="ml-2 text-sm text-gray-700">
Enable face enhancement
</label>
</div>
{/* Submit Button */}
<button
type="submit"
disabled={!sourceFile || !targetFile || isLoading}
className={`w-full py-2 px-4 rounded-md text-white font-medium ${
!sourceFile || !targetFile || isLoading
? 'bg-gray-400 cursor-not-allowed'
: 'bg-blue-600 hover:bg-blue-700'
}`}
>
{isLoading ? 'Processing...' : 'Swap Faces'}
</button>
</form>
</div>
);
};
export default FaceSwapForm; |