face_recognition_client/components/search/Search.tsx

// import React, { useRef, useEffect } from "react";
// import "./Search.css"; // Import CSS for styling

// const Search: React.FC = () => {
//   const videoRef = useRef<HTMLVideoElement>(null);
//   const canvasRef = useRef<HTMLCanvasElement>(null);

//   // Automatically open the camera when the component mounts
//   useEffect(() => {
//     const openCamera = async () => {
//       try {
//         const stream = await navigator.mediaDevices.getUserMedia({
//           video: true,
//         });
//         if (videoRef.current) {
//           videoRef.current.srcObject = stream;
//         }
//       } catch (err) {
//         console.error("Error accessing the camera", err);
//       }
//     };

//     openCamera();
//   }, []);

//   // Capture image from video stream
//   const captureImage = () => {
//     const video = videoRef.current;
//     const canvas = canvasRef.current;

//     if (video && canvas) {
//       const context = canvas.getContext("2d");
//       if (context) {
//         context.drawImage(video, 0, 0, canvas.width, canvas.height);
//         canvas.toBlob((blob) => {
//           if (blob) {
//             const file = new File([blob], "captured-image.png", {
//               type: "image/png",
//             });
//             callApi(file);
//           }
//         }, "image/png");
//       }
//     }
//   };

//   // Call API with the captured image file
//   const callApi = async (file: File) => {
//     const formData = new FormData();
//     formData.append("image", file); // Append the file to the form data

//     try {
//       const startTime = performance.now();
//       const response = await fetch(
//         `${process.env.NEXT_PUBLIC_BASE_URL}/search`,
//         {
//           method: "POST",
//           body: formData, // Send the form data
//         }
//       );
//       // End measuring time
//       const endTime = performance.now();
//       const totalTime = (endTime - startTime) / 1000;
//       if (response.ok) {
//         const data = await response.json();
//         console.log("API call successful", data);
//         alert(
//           `Search result: ${data.message}\nName: ${
//             data?.name
//           }\nTime taken: ${totalTime.toFixed(2)} seconds`
//         );
//       } else {
//         console.error("API call failed");
//       }
//     } catch (error) {
//       console.error("Error calling API", error);
//     }
//   };

//   return (
//     <div className="search-container">
//       <h2>Search</h2>
//       <div className="video-container">
//         <video ref={videoRef} autoPlay playsInline className="video" />
//       </div>
//       <button type="button" onClick={captureImage} className="capture-button">
//         Capture Image
//       </button>
//       <canvas
//         ref={canvasRef}
//         style={{ display: "none" }}
//         width="640"
//         height="480"
//       />
//     </div>
//   );
// };

// export default Search;


import React, { useRef, useEffect, useState } from "react";
import "./Search.css"; // Import CSS for styling

const Search: React.FC = () => {
  const videoRef = useRef<HTMLVideoElement>(null);
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const [uploadedFile, setUploadedFile] = useState<File | null>(null);

  // Automatically opennig the camera when the component mounts
  useEffect(() => {
    const openCamera = async () => {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({
          video: true,
        });
        if (videoRef.current) {
          videoRef.current.srcObject = stream;
        }
      } catch (err) {
        console.error("Error accessing the camera", err);
      }
    };

    openCamera();
  }, []);

  // Capturing image from video stream
  const captureImage = () => {
    const video = videoRef.current;
    const canvas = canvasRef.current;

    if (video && canvas) {
      const context = canvas.getContext("2d");
      if (context) {
        context.drawImage(video, 0, 0, canvas.width, canvas.height);
        canvas.toBlob((blob) => {
          if (blob) {
            const file = new File([blob], "captured-image.png", {
              type: "image/png",
            });
            callApi(file);
          }
        }, "image/png");
      }
    }
  };
  // Handling image upload
  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (file) {
      setUploadedFile(file); // Storing the uploaded file in state
      callApi(file); // Calling the API with the uploaded file
    }
  };

  // Calling API with the provided image file
  const callApi = async (file: File) => {
    const formData = new FormData();
    formData.append("image", file); // Appending the file to the form data

    try {
      const startTime = performance.now();
      const response = await fetch(
        `${process.env.NEXT_PUBLIC_BASE_URL}/search`,
        {
          method: "POST",
          body: formData, // Sending the form data
        }
      );
      // Ending measuring time
      const endTime = performance.now();
      const totalTime = (endTime - startTime) / 1000;
      if (response.ok) {
        const data = await response.json();
        console.log("API call successful", data);
        alert(
          `Search result: ${data.message}\nName: ${
            data?.name
          }\nTime taken: ${totalTime.toFixed(2)} seconds`
        );
      } else {
        console.error("API call failed");
      }
    } catch (error) {
      console.error("Error calling API", error);
    }
  };

  return (
    <div className="search-container">
      <h2>Search</h2>
      <div className="video-container">
        <video ref={videoRef} autoPlay playsInline className="video" />
      </div>
      <button type="button" onClick={captureImage} className="capture-button">
        Capture Image
      </button>
      <div>Or</div>
      <div className="upload-container">
        <label htmlFor="upload" className="upload-label">
          Upload Image
        </label>
        <input
          type="file"
          id="upload"
          accept="image/*"
          onChange={handleFileChange}
          className="upload-input"
        />
      </div>
      <canvas
        ref={canvasRef}
        style={{ display: "none" }}
        width="640"
        height="480"
      />
    </div>
  );
};


export default Search;