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?
    Our emotion detection application works like a special brain that understands facial expressions and guesses
    how someone is feeling. Here's how it works:

    1. **Looking for Faces**: First, the application looks at a picture of a person's face. It tries to find the
    important parts, like the eyes, nose, and mouth. It's like when we look at a picture and focus on someone's face.

    2. **Noticing Features**: Next, the application pays attention to the different parts of the face. It looks for things
    like the shape of the mouth, the wrinkles around the eyes, and how the eyebrows are positioned. Just like we notice
    if someone is smiling or frowning by looking at their mouth and eyes.
    """
    )
    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. **Understanding Expressions**: Based on these features, the application tries to guess how the person is feeling. It
    knows that a big smile usually means happiness, while a furrowed brow might mean someone is angry or worried. It
    uses all the features it noticed to make its best guess.
    """
    )
    st.image(
        "https://miro.medium.com/v2/resize:fit:1200/1*4rjT-RSOTdlPqp1UwcF3tg.jpeg",
        use_column_width=True,
    )
    st.markdown(
        """
    4. **Practicing and Learning**: Our application gets better at understanding emotions by looking at lots of pictures of
    faces with different expressions. It learns from these pictures and becomes smarter over time, just like we get
    better at recognizing emotions by seeing and experiencing them ourselves.

    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!
    """
    )

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

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


render_page(step1_page, LEVEL)