ui updated
This commit is contained in:
parent
d50ac4ed64
commit
adf9d8ef3e
@ -1,144 +1,8 @@
|
||||
// "use client";
|
||||
// import React, { useRef, useState, useEffect } from "react";
|
||||
// import "./Register.css"; // Import CSS for styling
|
||||
|
||||
// const Register: React.FC = () => {
|
||||
// const videoRef = useRef<HTMLVideoElement>(null);
|
||||
// const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||
// const [name, setName] = useState<string>("");
|
||||
// const [error, setError] = useState<string>(""); // State for error message
|
||||
|
||||
// // 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 = () => {
|
||||
// if (!name.trim()) {
|
||||
// setError("Name is required"); // Set error message if name is empty
|
||||
// return;
|
||||
// }
|
||||
|
||||
// const video = videoRef.current;
|
||||
// const canvas = canvasRef.current;
|
||||
|
||||
// if (video && canvas) {
|
||||
// const context = canvas.getContext("2d");
|
||||
// if (context) {
|
||||
// // Draw the current frame from the video on the canvas
|
||||
// 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(name, file);
|
||||
// }
|
||||
// }, "image/png");
|
||||
// }
|
||||
// }
|
||||
// };
|
||||
|
||||
// // Call API with name and image file
|
||||
// const callApi = async (name: string, file: File) => {
|
||||
// const formData = new FormData();
|
||||
// formData.append("name", name);
|
||||
// formData.append("image", file);
|
||||
|
||||
// try {
|
||||
// const startTime = performance.now();
|
||||
// const response = await fetch(
|
||||
// `${process.env.NEXT_PUBLIC_BASE_URL}/register`,
|
||||
// {
|
||||
// method: "POST",
|
||||
// body: formData,
|
||||
// }
|
||||
// );
|
||||
|
||||
// // End measuring time
|
||||
// const endTime = performance.now();
|
||||
// const totalTime = (endTime - startTime) / 1000; // Convert milliseconds to seconds
|
||||
|
||||
// if (response.ok) {
|
||||
// const data = await response.json();
|
||||
// console.log("API call successful");
|
||||
// alert(
|
||||
// `Message: ${data.message}\nName: ${
|
||||
// data?.name
|
||||
// }\nTime taken: ${totalTime.toFixed(2)} seconds`
|
||||
// ); // Show success message with time taken
|
||||
// setError(""); // Clear error message on success
|
||||
// } else {
|
||||
// console.error("API call failed");
|
||||
// setError("Failed to register. Please try again."); // Set error message on failure
|
||||
// }
|
||||
// } catch (error) {
|
||||
// console.error("Error calling API", error);
|
||||
// setError("An error occurred. Please try again."); // Set error message on exception
|
||||
// }
|
||||
// };
|
||||
|
||||
// return (
|
||||
// <div className="container">
|
||||
// <h1 className="title">Face Capture Form</h1>
|
||||
// <form className="form">
|
||||
// <div className="form-group">
|
||||
// <label htmlFor="name" className="label">
|
||||
// Name:
|
||||
// </label>
|
||||
// <input
|
||||
// id="name"
|
||||
// type="text"
|
||||
// value={name}
|
||||
// onChange={(e) => {
|
||||
// setName(e.target.value);
|
||||
// setError(""); // Clear error message when user starts typing
|
||||
// }}
|
||||
// className="input"
|
||||
// placeholder="Enter your name"
|
||||
// required
|
||||
// />
|
||||
// {error && !name.trim() && (
|
||||
// <p className="error-message">{error}</p> // Display error message if name is empty
|
||||
// )}
|
||||
// </div>
|
||||
// <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"
|
||||
// />
|
||||
// </form>
|
||||
// </div>
|
||||
// );
|
||||
// };
|
||||
|
||||
// export default Register;
|
||||
|
||||
|
||||
"use client";
|
||||
import React, { useRef, useState, useEffect } from "react";
|
||||
import "./Register.css"; // Import CSS for styling
|
||||
import { toast } from "@/hooks/use-toast";
|
||||
import { Button } from "../ui/button";
|
||||
|
||||
const Register: React.FC = () => {
|
||||
const videoRef = useRef<HTMLVideoElement>(null);
|
||||
@ -235,18 +99,19 @@ const Register: React.FC = () => {
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
console.log("API call successful");
|
||||
alert(
|
||||
`Message: ${data.message}\nName: ${data?.name}\nTime taken: ${totalTime.toFixed(2)} seconds`
|
||||
); // Show success message with time taken
|
||||
setError(""); // Clear error message on success
|
||||
console.log("API call successful", totalTime);
|
||||
toast({
|
||||
title: data.message,
|
||||
description: `Name: ${data?.name} `,
|
||||
});
|
||||
setError("");
|
||||
} else {
|
||||
console.error("API call failed");
|
||||
setError("Failed to register. Please try again."); // Set error message on failure
|
||||
setError("Failed to register. Please try again.");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error calling API", error);
|
||||
setError("An error occurred. Please try again."); // Set error message on exception
|
||||
setError("An error occurred. Please try again.");
|
||||
}
|
||||
};
|
||||
|
||||
@ -275,15 +140,20 @@ const Register: React.FC = () => {
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="video-container">
|
||||
<video ref={videoRef} autoPlay playsInline className="video" />
|
||||
<button
|
||||
<div className="mb-5">
|
||||
<video
|
||||
ref={videoRef}
|
||||
autoPlay
|
||||
playsInline
|
||||
className="w-full max-w-[500px] rounded-lg shadow-md scale-x-[-1]"
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={captureImage}
|
||||
className="capture-button"
|
||||
>
|
||||
Capture Image
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
<div>Or</div>
|
||||
|
||||
|
||||
@ -43,6 +43,6 @@
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.upload-container{
|
||||
.upload-container {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
@ -1,105 +1,7 @@
|
||||
// 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 } from "react";
|
||||
import "./Search.css"; // Import CSS for styling
|
||||
import { Button } from "../ui/button";
|
||||
import { toast } from "@/hooks/use-toast";
|
||||
|
||||
const Search: React.FC = () => {
|
||||
const videoRef = useRef<HTMLVideoElement>(null);
|
||||
@ -169,11 +71,12 @@ const Search: React.FC = () => {
|
||||
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`
|
||||
);
|
||||
toast({
|
||||
title: data.message,
|
||||
description: `Name: ${data?.name}\n\nTime taken: ${totalTime.toFixed(
|
||||
2
|
||||
)} seconds`,
|
||||
});
|
||||
} else {
|
||||
console.error("API call failed");
|
||||
}
|
||||
@ -188,9 +91,9 @@ const Search: React.FC = () => {
|
||||
<div className="video-container">
|
||||
<video ref={videoRef} autoPlay playsInline className="video" />
|
||||
</div>
|
||||
<button type="button" onClick={captureImage} className="capture-button">
|
||||
<Button type="button" onClick={captureImage} className="capture-button">
|
||||
Capture Image
|
||||
</button>
|
||||
</Button>
|
||||
<div>Or</div>
|
||||
<div className="upload-container">
|
||||
<label htmlFor="upload" className="upload-label">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user