added face encodings page

app.py

@@ -13,19 +13,23 @@ def intro_page():
     st.subheader("Introduction")
 
     st.write(
-        """Welcome to the interactive tutorial on creating your very own Face Recognition Application! 
+        """
+        Welcome to the interactive tutorial on creating your very own Face Recognition Application!
+        """
+    )
+
+    st.image(
+        "https://static.wixstatic.com/media/abb909_35aa4b27e4b840659a20fd69f0a18354~mv2.gif",
+        use_column_width=True,
+    )
         
+    st.write(
+        """
         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?"""
+    various industries, including security, entertainment, and personal identification. Are you ready to dive into the exciting world of face recognition?
+    """
     )
 
-    # st.image(
-    #     "https://miro.medium.com/v2/resize:fit:720/0*Ko6oX3rRb0aTgdUI.gif",
-    #     use_column_width=True,
-    # )
-
     st.info(f"Click on the button below to start the tutorial!")
 
     if st.button("I am Ready!"):

pages/1_Technology Behind It.py

@@ -27,22 +27,17 @@ 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 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.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://user-images.githubusercontent.com/31125521/41526995-1a90e4e6-72e6-11e8-96d4-8b2ccdee5f79.gif",
+        use_column_width=True,
+    )
+
     st.markdown(
         """
     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. 

pages/2_Face Detection and Creating Database.py

@@ -18,7 +18,7 @@ def step2_page():
 
     st.write(
         """
-        ### Face Detection: How it works?
+        ### 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.
         """
@@ -83,7 +83,7 @@ def step2_page():
                 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_name = str(uuid.uuid4()) + f"_{face_name}_{i}" + ".jpg"
                     img_path = os.path.join(img_dir, img_name)
                     pil_image.save(img_path)
                     st.success("Face added successfully!")

pages/{3_Training the Model.py → 3_Face Encodings.py}

@@ -1,9 +1,11 @@
 import streamlit as st
+from PIL import Image
 from utils.levels import complete_level, render_page, initialize_level
 from utils.login import get_login, initialize_login
 from utils.inference import query
 import os
 import time
+import face_recognition
 import json
 
 initialize_login()
@@ -11,17 +13,6 @@ initialize_level()
 
 LEVEL = 3
 
-
-def infer(image):
-    time.sleep(1)
-    output = query(image)
-    cols = st.columns(2)
-    cols[0].image(image, use_column_width=True)
-    with cols[1]:
-        for item in output:
-            st.progress(item["score"], text=item["label"])
-
-
 def step3_page():
     st.header("Feature encoding")
     st.markdown(
@@ -35,18 +26,10 @@ def step3_page():
     """
     )
     st.image(
-        "https://1.bp.blogspot.com/-Cehw4NbX2L8/X1-DJeQgtmI/AAAAAAAAKeE/fA55q9EXsgQLU0trbgX_vJkiFMwR927yQCLcBGAsYHQ/s853/final.gif",
-        use_column_width=True,
-    )
-    st.markdown(
-        """
-    3. **Finding Patterns**: Our teacher starts to notice patterns in the pictures and the emotions we assigned to them. They might see that smiling faces usually mean happiness, or that certain features are common in sad expressions. These patterns help the teacher understand how emotions are expressed on people's faces.
-    """
-    )
-    st.image(
-        "https://miro.medium.com/v2/resize:fit:1358/1*KoHwRNZGrVrhdbye3BDEew.png",
+        "https://miro.medium.com/v2/resize:fit:720/format:webp/1*V_wNVR0QvLQ7JZyUwMTv8w.jpeg",
         use_column_width=True,
     )
+
     st.markdown(
         """
         Once the face encodings are obtained, they can be stored in a database or used for face recognition tasks. 
@@ -57,16 +40,16 @@ def step3_page():
     )
 
     st.info(
-        "Now it's your turn to create face encodings to the face database you have created earlier!"
+        "Now it's your turn to create face encodings to each of the faces in the known-face database that you have created in the previous step!"
     )
 
     img_dir = os.path.join(".sessions", get_login()["username"], "known_faces")
     images = os.listdir(img_dir)
     if len(images) > 0:
-        st.subheader("Lets see your available images in your known-face database.")
+        st.subheader("Let's see your saved faces in your known-face database.")
         cols = st.columns(len(images))
         for i, img in enumerate(images):
-            face_name = img.split("_")[0]
+            face_name = img.split("_")[1]
             cols[i].image(os.path.join(img_dir, img), use_column_width=True)
             cols[i].write(face_name)
     st.subheader("Lets create face encodings for the known-faces.")
@@ -75,11 +58,10 @@ def step3_page():
         my_bar = st.progress(0, text="Generating encodings...")
         if len(images) > 0:
             for i, img in enumerate(images):
-                with open(os.path.join(img_dir, img), "rb") as f:
-                    face_image = f.read()
+                face_image = Image.open(os.path.join(img_dir, img))
                 my_face_encoding = face_recognition.face_encodings(face_image)[0]
                 my_bar.progress(int((i + 1) / len(images) * 100), text="Generating encodings...")
-                face_encodings_dict[img] = my_face_encoding
+                face_encodings_dict[img.split("_")[1]] = my_face_encoding
             my_bar.progress(100, text="Successfully encoded all the known faces!")
             st.success("Face encoding completed successfully!")
             with open(os.path.join(".sessions", get_login()["username"], "face_encodings.json"), "w") as write_file: