import streamlit as st
from utils.levels import complete_level, render_page, initialize_level
from utils.login import initialize_login

LEVEL = 1

initialize_login()
initialize_level()

def step1_page():
    st.header("Technology Behind It")
    st.markdown(
        """
    ### How does it work?
    In this tutorial, we will explore the fascinating world of face recognition technology. Through this interactive web application, 
    you will learn the fundamentals of face detection, feature encodings, and face recognition algorithms. 
    
    Throughout the tutorial, you will have the opportunity to upload images and experience the power of face recognition firsthand. 
    Step by step, we will guide you through the process, ensuring that you gain a deep understanding of each concept and its practical implementation.
    Here's how it works:

    1. **Face Detection**: In this first step, discover how face detection algorithms locate and identify faces within an image. 
    You will see how this crucial first step sets the foundation for subsequent face recognition tasks.

    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.
    
    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://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. 
    It's a way for computers to recognize faces, just like we do as humans!
    """
    )

    st.info("Click on the button below to continue!")

    if st.button("Complete"):
        complete_level(LEVEL)


render_page(step1_page, LEVEL)