fixed face detection page

app.py

@@ -13,9 +13,12 @@ def intro_page():
     st.subheader("Introduction")
 
     st.write(
-        """Welcome to the interactive tutorial on creating your very own Face Recognition Application! In this tutorial, you will learn how to build 
-    a simple application that can detect and recognise faces from a given photo. Face recognition has revolutionized 
-    various industries, including security, entertainment, and personal identification. Are you ready to dive into the exciting world of face recognition?"""
+        """Welcome to the interactive tutorial on creating your very own Face Recognition Application! 
+        
+        In this tutorial, you will learn how to build a simple application that can detect and recognise faces from a given photo. Face recognition has revolutionized 
+    various industries, including security, entertainment, and personal identification. 
+    
+    Are you ready to dive into the exciting world of face recognition?"""
     )
 
     # st.image(

pages/1_Technology Behind It.py

@@ -10,7 +10,7 @@ initialize_level()
 
 
 def step1_page():
-    st.header("How does it work?")
+    st.header("Technology Behind It")
     st.markdown(
         """
     ### How does it work?
@@ -26,28 +26,27 @@ def step1_page():
 
     2. **Face Encodings**: Next, the application pays attention to learn about face encodings, a technique that extracts unique 
     facial characteristics and represents them as numerical vectors. These features capture unique characteristics that enable reliable comparisons between faces.
-    Here we will gereate face encodings for the known faces to create a data base.
+    Here we will generate face encodings for the known faces to create a data base.
     """
     )
-    st.image(
-        "https://media.istockphoto.com/id/1136827583/photo/futuristic-and-technological-scanning-of-face-for-facial-recognition.jpg?s=612x612&w=0&k=20&c=GsqBYxvE64TS8HY__OSn6qZU5HPBhIemnqjyf37TkQo=",
-        use_column_width=True,
-    )
+    # st.image(
+    #     "https://media.istockphoto.com/id/1136827583/photo/futuristic-and-technological-scanning-of-face-for-facial-recognition.jpg?s=612x612&w=0&k=20&c=GsqBYxvE64TS8HY__OSn6qZU5HPBhIemnqjyf37TkQo=",
+    #     use_column_width=True,
+    # )
     st.markdown(
         """
     3. **Face Recognition**: Dive into the world of face recognition algorithms, where you will understand the mechanisms 
     behind comparing face encodings and making accurate matches. It uses the face encoding of unknown face against the face encodings of known faces to compare and find matching features.
     """
     )
-    st.image(
-        "https://miro.medium.com/v2/resize:fit:1200/1*4rjT-RSOTdlPqp1UwcF3tg.jpeg",
-        use_column_width=True,
-    )
+    # st.image(
+    #     "https://miro.medium.com/v2/resize:fit:1200/1*4rjT-RSOTdlPqp1UwcF3tg.jpeg",
+    #     use_column_width=True,
+    # )
     st.markdown(
         """
-    So, our emotion detection model is like a clever brain that looks at faces, notices important features, and guesses
-    how someone is feeling based on those features. It's a way for computers to understand emotions, just like we do as
-    humans!
+    So, our face recognition model is like a clever brain that looks at faces, notices important features, and identifies the person by name if it already knows their name. 
+    It's a way for computers to recognize faces, just like we do as humans!
     """
     )
 

pages/{2_Collecting Your Data.py → 2_Face Detection and Creating Database.py}

@@ -14,15 +14,43 @@ LEVEL = 2
 
 
 def step2_page():
-    st.header("Face Detection")
+    st.header("Face Detection and Creating your own known-faces database")
+
     st.write(
-        "Now it's time to collect the pictures we need to create our known-faces data base for our face recognition model. "
-        "But remember, we should always ask for permission before taking someone's picture. We can use a smartphone or a digital camera to capture pictures, and it's important to take pictures of different people. This will help our application to have a good known-faces database!"
+        """
+        ### Face Detection: How it works?
+        Face detection is the process of identifying and locating human faces within an image or video frame. 
+        It is a fundamental step in many computer vision applications, including face recognition, facial expression analysis, and augmented reality.
+        """
     )
 
+    st.write(
+        """
+        In simple terms, here's how face detection works:
+
+        1. **Image Preparation**: The input image is initially preprocessed to enhance its quality and improve the chances of detecting faces accurately. This may involve resizing, grayscale conversion, or contrast adjustments.
+
+        2. **Feature Extraction**: The face detection algorithm analyzes the image to identify distinctive features that are commonly found in human faces. These features can include the presence of eyes, nose, mouth, and other facial characteristics.
+
+        3. **Classification or Regression**: Once the features are extracted, the algorithm employs a trained model to classify or regressively predict whether each region of the image contains a face or not. This model is typically trained using machine learning techniques on large datasets of labeled face and non-face samples.
+
+        4. **Face Localization**: If a face is detected, the algorithm determines the position and size of the face within the image. This information is usually represented as a bounding box that encloses the detected face region.
+
+        5. **Post-processing**: After initial detection, post-processing steps may be performed to refine the results. These steps could involve filtering out false positives or adjusting the size and position of the detected face regions to align them more accurately.
+        """
+
+    )
+
+
     img_dir = os.path.join(".sessions", get_login()["username"], "known_faces")
     os.makedirs(img_dir, exist_ok=True)
-
+    st.write(
+        """
+        ### Creating your own known-faces database
+        Now it's time to collect and name the identified faces to create our known-faces data base for our face recognition model. 
+        But remember, we should always ask for permission before taking someone's picture. We can use a smartphone or a digital camera to capture pictures, and it's important to take pictures of different people. This will help our application to have a good known-faces database!
+        """
+    )
     picture = st.camera_input("Take a picture")
     if picture:
         image = face_recognition.load_image_file(picture)
@@ -34,6 +62,7 @@ def step2_page():
         face_locations = face_recognition.face_locations(image)
         st.write("Algorithm found {} face(s) in this photograph.".format(len(face_locations)))
 
+
         cols = st.columns(len(face_locations))
         for i in range(len(face_locations)):
             col = cols[i]
@@ -46,16 +75,16 @@ def step2_page():
                 # You can access the actual face itself like this:
                 face_image = image[top:bottom, left:right]
                 pil_image = Image.fromarray(face_image)
-                st.image(pil_image)
+                col.image(pil_image, use_column_width=True)
                 face_name = st.text_input('Specify name', "This is a placeholder", key="text_"+str(i))
                 if st.button("Save", key="button_"+str(i)):
                     img_name = str(uuid.uuid4()) + f"{face_name}_{i}" + ".jpg"
                     img_path = os.path.join(img_dir, img_name)
-                    with open(img_path, "wb") as f:
-                        f.write(face_image.getvalue())
+                    pil_image.save(img_path)
                     st.success("Face added successfully!")
 
     images = os.listdir(img_dir)
+    st.write(images)
     if st.button("Clear All"):
         for img in images:
             os.remove(os.path.join(img_dir, img))