Merge branch 'main' of hf.co:spaces/ppaihack/PoCInnovation

front/src/VerificationScene.tsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { motion } from "framer-motion";
 import BoxContainer from "./components/BoxContainer";
 import VideoWrapper from "@/components/VideoWrapper.tsx";
 import ResultContainer from "@/components/ResultContainer.tsx";
@@ -26,11 +27,12 @@ export default function VerificationScene() {
   const [profilePicture, setProfilePicture] = useState<string>();
 
   const handleNextStep = () => {
-    if (currentStep == StepType.result) return;
+    if (currentStep === StepType.result) return;
     setCurrentStep((currentStep + 1) % stepsArray.length);
   };
+
   const handlePrevStep = () => {
-    if (currentStep == StepType.takeId) return;
+    if (currentStep === StepType.takeId) return;
     setCurrentStep((currentStep - 1) % stepsArray.length);
   };
 
@@ -61,11 +63,23 @@ export default function VerificationScene() {
     }
   };
 
+  // Animation settings for Framer Motion
+  const animationProps = {
+    initial: { opacity: 0, y: 50 },
+    animate: { opacity: 1, y: 0 },
+    exit: { opacity: 0, y: -50 },
+    transition: { duration: 0.5 },
+  };
+
   let stepContent = undefined;
 
-  if (currentStep == StepType.takeId) {
+  if (currentStep === StepType.takeId) {
     stepContent = (
-      <>
+      <motion.div
+        key="takeId"
+        {...animationProps}
+        className="flex flex-col items-center"
+      >
         <h1 className="text-black text-2xl mt-20 text-center px-28">
           Take a picture of the Capture the front side of your ID Card
         </h1>
@@ -76,16 +90,20 @@ export default function VerificationScene() {
           height="250px"
           width="400px"
         />
-      </>
+      </motion.div>
     );
   }
-  if (currentStep == StepType.verifyId) {
+  if (currentStep === StepType.verifyId) {
     stepContent = (
-      <>
+      <motion.div
+        key="verifyId"
+        {...animationProps}
+        className="flex flex-col items-center"
+      >
         <div className="overflow-hidden w-2/3 h-2/4 mt-10">
           <img src={idCardPicture} alt="captured" />
         </div>
-        <h1 className="text-2xl font-bold">Is This Picture Correct ?</h1>
+        <h1 className="text-2xl font-bold mt-10">Is This Picture Correct?</h1>
         <div className="mt-32 space-x-20">
           <button
             onClick={handlePrevStep}
@@ -100,29 +118,37 @@ export default function VerificationScene() {
             Yes
           </button>
         </div>
-      </>
+      </motion.div>
     );
   }
 
-  if (currentStep == StepType.takeFrontPic) {
+  if (currentStep === StepType.takeFrontPic) {
     stepContent = (
-      <>
+      <motion.div
+        key="takeFrontPic"
+        {...animationProps}
+        className="flex flex-col items-center"
+      >
         <h1 className="mt-5 font-bold text-lg">Center your face</h1>
         <DarkVideoWrapper
           setImage={setProfilePicture}
-          className="mt-20  w-2/4 h-3/5 overflow-hidden"
+          className="mt-12 w-3/4 h-3/5 overflow-hidden"
           handleNextStep={handleNextStep}
         />
-      </>
+      </motion.div>
     );
   }
-  if (currentStep == StepType.verifyProfile) {
+  if (currentStep === StepType.verifyProfile) {
     stepContent = (
-      <>
+      <motion.div
+        key="verifyProfile"
+        {...animationProps}
+        className="flex flex-col items-center"
+      >
         <div className="overflow-hidden w-2/3 h-2/4 mt-10">
           <img src={profilePicture} alt="captured" />
         </div>
-        <h1 className="text-2xl font-bold">Is This Picture Correct ?</h1>
+        <h1 className="text-2xl font-bold mt-10">Is This Picture Correct?</h1>
         <div className="mt-32 space-x-20">
           <button
             onClick={handlePrevStep}
@@ -137,17 +163,23 @@ export default function VerificationScene() {
             Yes (Submit)
           </button>
         </div>
-      </>
+      </motion.div>
     );
   }
 
-  if (currentStep == StepType.result) {
+  if (currentStep === StepType.result) {
     stepContent = (
-      <ResultContainer
-        sendImageToServer={sendImageToServer}
-        idCardPicture={idCardPicture ?? ""}
-        profileImage={profilePicture ?? ""}
-      />
+      <motion.div
+        key="result"
+        {...animationProps}
+        className="flex flex-col items-center"
+      >
+        <ResultContainer
+          sendImageToServer={sendImageToServer}
+          idCardPicture={idCardPicture ?? ""}
+          profileImage={profilePicture ?? ""}
+        />
+      </motion.div>
     );
   }
 
@@ -155,7 +187,7 @@ export default function VerificationScene() {
     <>
       <div className="bg-gray-100">
         <BoxContainer headerName="Identity Verification Required">
-          <div className="h-full w-full flex flex-col items-center overflow-hidden">
+          <div className="h-full w-full flex flex-col items-center justify-center overflow-hidden">
             {stepContent}
           </div>
         </BoxContainer>

front/src/components/ResultContainer.tsx

@@ -18,5 +18,13 @@ export default function ResultContainer({
   useEffect(() => {
     sendImageToServer(idCardPicture ?? "", profileImage ?? "", setLoading);
   }, []);
-  return <>{loading ? <>Fetching</> : <>Perfect</>}</>;
+  return (
+    <div className="flex w-full h-full items-center justify-center">
+      {loading ? (
+        <h1 className="text-2xl font-bold text-orange-600">Fetching....</h1>
+      ) : (
+        <h1 className="text-2xl font-bold text-green-800">Process Completed</h1>
+      )}
+    </div>
+  );
 }