File size: 2,808 Bytes
bfbdcb9 |
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 |
import React, { useRef, useState } from "react";
import axios from "axios";
import ImageDisplay from "./ImageDisplay";
const MainContent = () => {
const fileInput = useRef(null);
const [isSuccessUpload, setIsSuccessUpload] = useState(false);
const [uid, setUid] = useState("");
const [videoPreview, setVideoPreview] = useState(null);
const [isLoading, setIsLoading] = useState(false);
const handleFileSelect = () => {
const file = fileInput.current.files[0];
if (file) {
setVideoPreview(URL.createObjectURL(file));
}
};
const handleUpload = async () => {
setIsLoading(true);
const formData = new FormData();
formData.append('file', fileInput.current.files[0]);
try {
const response = await axios.post('http://localhost:8000/uploadvideo/', formData, {
headers: {
'Content-Type': 'multipart/form-data',
},
});
alert(response.data.message);
setUid(response.data.uid);
setIsSuccessUpload(true);
} catch (error) {
alert('Failed to upload video. ' + error.message);
} finally {
setIsLoading(false);
}
};
return (
<div className="text-black bg-gray-400 p-5 min-h-[calc(100vh-100px)]">
<div className=" text-black font-bold text-4xl">Video Face Swap</div>
<div className="bg-gray-400 border-2 border-dashed border-gray-300 rounded p-5 my-5">
<div className="flex justify-between items-start gap-4">
{videoPreview && (
<video
className="w-1/2 md:w-1/4"
controls
src={videoPreview}
></video>
)}
{isSuccessUpload && (
<div className="w-1/2 md:w-1/2">
<ImageDisplay uid={uid} />
</div>
)}
</div>
<div className="text-center mt-4 flex flex-col items-center">
<div className="w-3/4 md:w-1/2">
<label
htmlFor="video-file"
className="block w-full px-4 py-2 bg-blue-600 text-white rounded cursor-pointer mb-2 transition-colors duration-300 hover:bg-blue-700"
>
Choose Video File
</label>
<input
id="video-file"
type="file"
ref={fileInput}
className="hidden"
accept="video/*"
onChange={handleFileSelect}
/>
</div>
<button
className="px-5 py-2.5 bg-green-500 text-white rounded cursor-pointer transition-colors duration-300 hover:bg-green-600"
onClick={handleUpload}
disabled={isLoading}
>
{isLoading ? "Uploading..." : "Upload"}
</button>
</div>
</div>
</div>
);
};
export default MainContent;
|