added tutorial content

.sessions/johndoe/level.txt

@@ -1 +1 @@
-3
+5

0_Introduction.py

@@ -5,20 +5,28 @@ from utils.login import initialize_login
 initialize_login()
 initialize_level()
 
-LEVEL=0
+LEVEL = 0
+
 
 def intro_page():
-    st.header("AI Eye Tutorial Template")
-    st.subheader("Level 0: Introduction")
+    st.header("Facial Emotion Recognition")
+    st.subheader("Introduction")
+
+    st.write(
+        """Welcome to the interactive tutorial on creating your very own Emotion Detection Application! In this tutorial, you will learn how to build 
+    a simple application that can recognize and detect emotions from facial expressions. Emotion detection is a fascinating field that combines computer vision 
+    and machine learning techniques. Are you ready to dive into the exciting world of emotion detection?"""
+    )
 
-    st.write("""Welcome to the AI Eye Tutorial Template! This template is designed to help you create your own AI Eye tutorial.
-    The template is divided into levels, and each level has a set of tasks that you need to complete before you can move on to the next level.
-    You can use this template to create your own tutorial by completing the tasks in each level and adding your own content. You can also use 
-    this template to learn how to use AI Eye by completing the tasks in each level.""")
+    st.image(
+        "https://miro.medium.com/v2/resize:fit:720/0*Ko6oX3rRb0aTgdUI.gif",
+        use_column_width=True,
+    )
 
-    st.info(f"Current Level: {get_level()}")
+    st.info(f"Click on the button below to start the tutorial!")
 
-    if st.button("Complete"):
+    if st.button("I am Ready!"):
         complete_level(LEVEL)
 
-render_page(intro_page, LEVEL)
+
+render_page(intro_page, LEVEL)

README.md

@@ -1,8 +1,8 @@
 ---
-title: Aieye Tutorial Template
-emoji: 🌍
-colorFrom: green
-colorTo: purple
+title: Emotion Detection
+emoji: 🧑🏻‍🤝‍🧑🏾
+colorFrom: yellow
+colorTo: orange
 sdk: streamlit
 sdk_version: 1.21.0
 app_file: 0_Introduction.py

pages/1_Step_1.py

@@ -1,15 +0,0 @@
-import streamlit as st
-from utils.levels import complete_level, render_page, initialize_level
-LEVEL = 1
-
-initialize_level()
-
-def step1_page():
-    st.header("Step 1")
-    st.subheader("Level 1: Introduction")
-    st.write("This is the first step of the tutorial. You can add your own content here.")
-
-    if st.button("Complete"):
-        complete_level(LEVEL)
-
-render_page(step1_page, LEVEL)

pages/1_Technology Behind It.py

@@ -0,0 +1,61 @@
+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)

pages/2_Collecting Your Data.py

@@ -0,0 +1,56 @@
+import streamlit as st
+from utils.levels import complete_level, render_page, initialize_level
+from utils.login import get_login
+import os
+import uuid
+from utils.login import initialize_login
+
+initialize_login()
+initialize_level()
+
+LEVEL = 2
+
+
+def step2_page():
+    st.header("Collecting Your Data")
+    st.write(
+        "Now it's time to collect the pictures we need to teach our application about emotions. But remember, we should always ask for permission before taking someone's picture. We can use a smartphone or a digital camera to capture different facial expressions. It's important to take pictures of different people and show different emotions like happiness, sadness, surprise, and more. This will help our application understand emotions better!"
+    )
+
+    img_dir = os.path.join(".sessions", get_login()["username"], "images")
+    os.makedirs(img_dir, exist_ok=True)
+
+    emotion = st.selectbox(
+        "Select an emotion",
+        ("Happy", "Sad", "Surprised", "Angry", "Disgusted", "Neutral", "Fearful"),
+    )
+    picture = st.camera_input("Take a picture")
+    if picture:
+        if st.button("Save"):
+            img_name = str(uuid.uuid4()) + f"_{emotion}_" + ".jpg"
+            img_path = os.path.join(img_dir, img_name)
+            with open(img_path, "wb") as f:
+                f.write(picture.getvalue())
+            st.success("Image added successfully!")
+
+    images = os.listdir(img_dir)
+    if len(images) > 0:
+        st.subheader("Your Images")
+        cols = st.columns(4)
+        for i, img in enumerate(images):
+            img_emotion = img.split("_")[1]
+            cols[i % 4].image(os.path.join(img_dir, img), use_column_width=True)
+            cols[i % 4].write(img_emotion)
+
+    if st.button("Clear All"):
+        for img in images:
+            os.remove(os.path.join(img_dir, img))
+        st.success("All images cleared!")
+        st.experimental_rerun()
+
+    st.info("If you are satisfied with your images, click on the button below to complete this level.")
+    if st.button("Complete"):
+        complete_level(LEVEL)
+
+
+render_page(step2_page, LEVEL)

pages/2_Step_2.py

@@ -1,16 +0,0 @@
-import streamlit as st
-from utils.levels import complete_level, render_page, initialize_level
-
-initialize_level()
-
-LEVEL = 2
-
-def step2_page():
-    st.header("Step 2")
-    st.subheader("Level 2: Introduction")
-    st.write("This is the second step of the tutorial. You can add your own content here.")
-
-    if st.button("Complete"):
-        complete_level(LEVEL)
-
-render_page(step2_page, LEVEL)

pages/3_Training the Model.py

@@ -0,0 +1,78 @@
+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://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",
+        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)

pages/4_Trying It Out.py

@@ -0,0 +1,81 @@
+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 = 4
+
+
+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 step4_page():
+    st.header("Trying It Out")
+    st.markdown(
+        """
+    ### How Our Emotion Detection Application Works
+    Now that we have trained our emotion detection application, let's see how it works in action! Here's a simple explanation of how the application recognizes emotions:
+
+    1. **Looking at Faces**: When we use our emotion detection application, we can show it a picture of a face or use a camera to capture a real-time image. It's like giving our application a chance to see someone's expression.
+
+    2. **Observing the Features**: The application carefully looks at the face and pays attention to different parts, like the eyes, mouth, and eyebrows. It tries to understand the expressions by noticing how these parts look and how they are positioned. It's like the application is taking a close look at the face, just like we do when we try to understand someone's emotions.
+    """
+    )
+    st.image(
+        "https://camo.githubusercontent.com/3bb4e2eba7c8a91d71916496bc775e870222f19bb5098cb4bc514ed60078c1e7/68747470733a2f2f626c6f672e7161746573746c61622e636f6d2f77702d636f6e74656e742f75706c6f6164732f323032302f30312f4d4c5f6578616d706c652e6769663f7261773d74727565",
+        use_column_width=True,
+    )
+    st.markdown(
+        """
+    3. **Guessing the Emotion**: Based on what it observed, our application uses the knowledge it learned during training to make its best guess about the person's emotion. It remembers the patterns it saw before and tries to match them with the features it observed. It might think the person looks happy, sad, or maybe surprised!
+    """
+    )
+    st.image(
+        "https://miro.medium.com/v2/resize:fit:1358/1*KoHwRNZGrVrhdbye3BDEew.png",
+        use_column_width=True,
+    )
+    st.markdown(
+        """
+    4. **Providing a Result**: Finally, our emotion detection application tells us what emotion it thinks the person is feeling. It might say, "I think this person looks happy!" or "I think this person looks sad." It's like having a virtual friend who can give us their guess about someone's emotion.
+
+    By going through these steps, our emotion detection application can quickly analyze faces and give us an idea of how someone might be feeling. It's like having a special friend who can understand and guess emotions based on facial expressions!
+    """
+    )
+
+    st.info(
+        "Now that we know how our emotion detection application works, let's try it out!"
+    )
+
+    st.info("Select an image to analyze!")
+    input_type = st.radio("Select the Input Type", ["Image", "Camera"])
+
+    if input_type == "Camera":
+        image = st.camera_input("Take a picture")
+        byte_image = image.getvalue() if image else None
+    else:
+        image = st.file_uploader("Upload an image", type=["png", "jpg", "jpeg"])
+        byte_image = image.read() if image else None
+    try_img = os.path.join(".sessions", get_login()["username"], "images", "try.jpg")
+    if byte_image:
+        with open(try_img, "wb") as f:
+            f.write(byte_image)
+        infer(try_img)
+
+    st.info("Click on the button below to complete this level!")
+    if st.button("Complete Level"):
+        complete_level(LEVEL)
+
+
+render_page(step4_page, LEVEL)

pages/{3_Congratulations.py → 5_Congratulations.py}

@@ -1,13 +1,12 @@
 import streamlit as st
-from utils.levels import complete_level, render_page, initialize_level
+from utils.levels import render_page, initialize_level
 
 initialize_level()
 
-LEVEL = 3
+LEVEL = 5
 
-def step1_page():
+def complete_page():
     st.header("Congratulations!")
     st.subheader("You have completed the tutorial!")
-    st.write("You can now use this template to create your own tutorial.")
 
-render_page(step1_page, LEVEL)
+render_page(complete_page, LEVEL)

utils/inference.py

@@ -0,0 +1,10 @@
+import requests
+
+API_URL = "https://api-inference.huggingface.co/models/CynthiaCR/emotions_classifier"
+headers = {"Authorization": "Bearer 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"}
+
+def query(filename):
+    with open(filename, "rb") as f:
+        data = f.read()
+    response = requests.post(API_URL, headers=headers, data=data)
+    return response.json()