import streamlit as st
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

initialize_login()
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("Training the Model")
    st.markdown(
        """
    ### How It Learns About Emotions?
    Now that we have our pictures of different facial expressions, it's time to teach our emotion detection application how to understand emotions. Here's how the training process works:

    1. **Getting Ready**: Imagine we have a special teacher who will help our application learn about emotions. We gather all the pictures we took and organize them neatly for the teacher to use.

    2. **Showing Examples**: We show our teacher the pictures one by one and tell them what emotion each picture represents. We might say, "This picture shows happiness," or "This picture shows sadness." Our teacher pays close attention to these examples.
    """
    )
    st.image(
        "https://recfaces.com/wp-content/uploads/2021/03/rf-emotion-recognition-rf-830x495-1.jpeg",
        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",
        use_column_width=True,
    )
    st.markdown(
        """
    4. **Learning and Remembering**: The more pictures our teacher sees, the better they become at understanding emotions. They remember the patterns they found and use that knowledge to guess emotions in new pictures. It's like how we get better at recognizing emotions by seeing lots of different faces and expressions.
    5. **Checking Understanding**: To make sure our teacher is doing a good job, we give them more pictures and ask them to guess the emotions. If they make a mistake, we help them understand where they went wrong and show them the correct answer. This helps our teacher learn and improve their understanding of emotions.
    
    By repeating this process many times, our emotion detection application gradually becomes better at recognizing emotions in pictures. It learns from the examples we showed it and gets smarter over time. It's like training a special friend to understand how we feel based on our facial expressions!
    """
    )

    st.info(
        "Now it's your turn to train the model! Click on the button below to train the model with your data!"
    )

    if st.button("Train Model"):
        my_bar = st.progress(0, text="Training...")
        img_dir = os.path.join(".sessions", get_login()["username"], "images")
        images = os.listdir(img_dir)
        if len(images) > 0:
            for i, image in enumerate(images):
                infer(os.path.join(img_dir, image))
                my_bar.progress(int((i + 1) / len(images) * 100), text="Training...")
            my_bar.progress(100, text="Successfully Trained!")
            st.success("Model trained successfully!")
            complete_level(LEVEL)
        else:
            my_bar.empty()
            st.error("You have not taken any images yet! Do the previous steps first!")


render_page(step3_page, LEVEL)