Create my.js

my.js

@@ -0,0 +1,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;