Added app files

.gitignore

@@ -0,0 +1 @@
+# ML_models/*

DockerFile

@@ -0,0 +1,22 @@
+# Use a compatible Python base image
+FROM python:3.9-slim
+
+# Set environment variables
+ENV PYTHONDONTWRITEBYTECODE=1
+ENV PYTHONUNBUFFERED=1
+
+# Set the working directory
+WORKDIR /app
+
+# Copy requirements and install dependencies
+COPY requirements.txt /app/
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy application files
+COPY . /app
+
+# Expose the required port
+EXPOSE 7860
+
+# Run the app with Flask on port 7860
+CMD ["flask", "run", "--host=0.0.0.0", "--port=7860"]

ML_Models/emotion_detection_imagenet_model.h5

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:33e2efd3ab5fb06e1a54a87df4c6c23200d9b922773736e699dfbb3f9f7909ea
+size 62142968

ML_Models/emotion_detection_mobilenet_model.h5

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:241fca415049825dd51e14832d23309790f8735deaf383afed412c999a5d878c
+size 34281976

ML_Models/emotion_detection_model_base_cnn.h5

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4856f5d08c2411ef0ee2544e268a87dc9f092776b0db989a2449635255ab392e
+size 13802464

ML_Models/emotion_detection_vgg16_model.h5

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5d3ab5f8bfed8c0563463eb0a95412e190300913bf2529a6438756b91b715dea
+size 121987768

README.md

@@ -8,4 +8,23 @@ pinned: false
 license: gpl-2.0
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Emotion Recognition from Facial Expression
+### Samsung Innovation Campus 2024 Capstone Project
+Group 12 Innov8
+
+## Motivation
+Emotion recognition can be a valuable tool for enhancing both human and machine understanding of emotional states, aiding in fields such as mental health diagnostics, where understanding non-verbal cues is critical. The ability to recognize emotions accurately could also improve customer interactions in automated services by making responses more empathetic.
+
+## Objective
+To develop a high-accuracy CNN model that can recognize and categorize a range of emotions from facial expressions in real time, deployable in a web application. This application will allow users to upload images and receive emotion classifications, bridging the gap between advanced AI models and accessible, practical tools for various applications.
+
+## Team Members
+-	Akshat Mistry
+-	Abhinav Kottayil
+-	Raj Dinesh Jagasia
+-	Ishita Jagasia
+-	Alyssa Ang De Guzman
+-	Muhammed Ameen
+
+## App Screenshot
+![image](https://github.com/user-attachments/assets/95778fb7-4353-4b01-b2dc-4dad4aa6424e)

app.py

@@ -0,0 +1,163 @@
+from flask import Flask, render_template, request, url_for
+from tensorflow.keras.preprocessing.image import img_to_array, load_img
+import numpy as np
+from keras.models import load_model
+import cv2
+import os
+
+# Define paths for the models
+MODEL_PATHS = {
+    "Scratch CNN Model": './ML_Models/emotion_detection_model_base_cnn.h5',
+    "ImageNet Model": './ML_Models/emotion_detection_imagenet_model.h5',
+    "MobileNet Model": './ML_Models/emotion_detection_mobilenet_model.h5',
+    "VGG16 Model": './ML_Models/emotion_detection_vgg16_model.h5'
+}
+
+
+def extract_face(image_path, output_path="./static/cropped_face.jpg"):
+    # Load the Haar cascade for face detection
+    cascade_path = os.path.join(
+        cv2.data.haarcascades, "haarcascade_frontalface_default.xml")
+    face_cascade = cv2.CascadeClassifier(cascade_path)
+
+    # Read the image in grayscale mode
+    img = cv2.imread(image_path, cv2.IMREAD_GRAYSCALE)
+
+    if img is None:
+        print("Could not read the image.")
+        return "No face detected."
+
+    # Save the grayscale image
+    gray_output_path = "gray_" + output_path
+    cv2.imwrite(gray_output_path, img)
+    print(f"Grayscale image saved as {gray_output_path}")
+
+    # Detect faces in the grayscale image
+    faces = face_cascade.detectMultiScale(
+        img, scaleFactor=1.1, minNeighbors=5, minSize=(30, 30))
+
+    # Check if a face is detected
+    if len(faces) == 0:
+        print("No face detected.")
+        return "No face detected."
+
+    # Extract the first detected face (assuming there's only one face)
+    x, y, w, h = faces[0]
+    face = img[y:y+h, x:x+w]
+
+    # Resize the face to 48x48 pixels
+    face_resized = cv2.resize(face, (48, 48))
+
+    # Save the cropped and resized grayscale face
+    cv2.imwrite(output_path, face_resized)
+    print(f"Face extracted, resized to 48x48, and saved as {output_path}")
+
+
+def preprocess_image(image_path, model_name, target_size=(48, 48)):
+    # Load the image in grayscale
+    image = load_img(image_path, color_mode='grayscale',
+                     target_size=target_size)
+    image = img_to_array(image)  # Convert to array
+    image = image / 255.0  # Normalize pixel values
+
+    # Repeat channels if model is not base_cnn
+    if model_name != "Scratch CNN Model":
+        image = np.repeat(image, 3, axis=-1)
+
+    # Add batch dimension
+    image = np.expand_dims(image, axis=0)
+    return image
+
+
+def predict_emotion(image_path, model, model_name, emotion_list):
+    image = preprocess_image(image_path, model_name)
+    prediction = model.predict(image)
+    predicted_emotion = emotion_list[np.argmax(prediction)]
+    return predicted_emotion
+
+
+def draw_bounding_box(image_path, output_path="./static/face_with_bounding_box.jpg"):
+    # Load the Haar cascade for face detection
+    cascade_path = os.path.join(
+        cv2.data.haarcascades, "haarcascade_frontalface_default.xml")
+    face_cascade = cv2.CascadeClassifier(cascade_path)
+
+    # Read the image
+    img = cv2.imread(image_path)
+    if img is None:
+        print("Could not read the image.")
+        return "No face detected."
+
+    # Convert the image to grayscale for face detection
+    gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)
+
+    # Detect faces in the grayscale image
+    faces = face_cascade.detectMultiScale(
+        gray, scaleFactor=1.1, minNeighbors=5, minSize=(30, 30))
+
+    # Check if a face is detected
+    if len(faces) == 0:
+        print("No face detected.")
+        return "No face detected."
+
+    # Draw a bounding box around the first detected face
+    x, y, w, h = faces[0]
+    cv2.rectangle(img, (x, y), (x+w, y+h), (255, 0, 0), 2)
+
+    # Save the image with the bounding box
+    cv2.imwrite(output_path, img)
+    print(f"Image with bounding box saved as {output_path}")
+    return f"Image with bounding box saved as {output_path}"
+
+
+app = Flask(__name__)
+emotion_list = ['angry', 'disgust', 'fear',
+                'happy', 'neutral', 'sad', 'surprise']
+
+
+def getResult(selected_option, image):
+    image.save("./static/image.jpg")
+    model_path = MODEL_PATHS[selected_option]
+    model = load_model(model_path)
+
+    bounding_face_result = draw_bounding_box("./static/image.jpg")
+    if bounding_face_result == "No face detected.":
+        return bounding_face_result, [], None
+
+    extract_face_result = extract_face(
+        "./static/image.jpg", output_path="./static/cropped_face.jpg")
+    if extract_face_result == "No face detected.":
+        return extract_face_result, [], None
+
+    image_path = './static/cropped_face.jpg'
+    predicted_emotion = predict_emotion(
+        image_path, model, selected_option, emotion_list)
+
+    images = [url_for('static', filename='face_with_bounding_box.jpg'),
+              url_for('static', filename='cropped_face.jpg')]
+
+    return "The predicted emotion is:", images, predicted_emotion
+
+
+@app.route('/', methods=['GET', 'POST'])
+def index():
+    result = None
+    images = []
+    predicted_emotion = None
+
+    dropdown_options = ["Select a model", "Scratch CNN Model", "ImageNet Model",
+                        "MobileNet Model", "VGG16 Model"]
+
+    if request.method == 'POST':
+        selected_option = request.form.get('option')
+        image = request.files.get('image')
+        if selected_option != "Select a model":
+            result, images, predicted_emotion = getResult(
+                selected_option, image)
+        return render_template('index.html', result=result, dropdown_options=dropdown_options, images=images, predicted_emotion=predicted_emotion, model_name=selected_option)
+
+    return render_template('index.html', result=result, dropdown_options=dropdown_options, images=[], predicted_emotion=None, model_name="Select")
+
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=7860, debug=True)

function.py

@@ -0,0 +1,31 @@
+from tensorflow.keras.preprocessing.image import img_to_array, load_img
+import numpy as np
+
+
+def preprocess_image(image_path, target_size=(48, 48)):
+    # Load the image
+    image = load_img(image_path, color_mode='grayscale',
+                     target_size=target_size)
+    # Convert the image to array
+    image = img_to_array(image)
+    # Normalize the pixel values
+    image = image / 255.0
+    # Reshape the image to add batch dimension
+    image = np.expand_dims(image, axis=0)
+    return image
+
+
+def predict_emotion(image_path, model, emotion_list):
+    # Preprocess the image
+    image = preprocess_image(image_path)
+    # Make prediction
+    prediction = model.predict(image)
+    # Decode the prediction
+    # return prediction
+    predicted_emotion = emotion_list[np.argmax(prediction)]
+    return predicted_emotion
+
+
+image_path = 'cropped_face.jpg'
+
+# Predict the emotion

requirements.txt

@@ -0,0 +1,5 @@
+flask
+tensorflow
+keras
+numpy
+opencv-python

static/style.css

@@ -0,0 +1,380 @@
+/* Floating container style */
+.floating-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    /* Allows clicks to pass through */
+    overflow: hidden;
+    z-index: -1;
+    /* Default: behind content */
+}
+
+/* Loading overlay style with a lower z-index */
+.loading-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(255, 255, 255, 0.8);
+    /* Semi-transparent background */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 5;
+    /* Ensure it’s behind the floating elements during loading */
+}
+
+/* Hoverable floating elements style */
+.floating-element {
+    position: absolute;
+    bottom: -50px;
+    width: 100px;
+    height: 20px;
+    background-color: #FCBF49;
+    border-radius: 20%;
+    animation: floatAnimation 8s linear infinite;
+    opacity: 0.8;
+}
+
+
+/* Define animation keyframes */
+@keyframes floatAnimation {
+    0% {
+        transform: translateY(0) scale(1);
+        /* Starting point */
+        opacity: 1;
+    }
+
+    100% {
+        transform: translateY(-100vh) scale(0.5);
+        /* Move up and shrink */
+        opacity: 0;
+        /* Fade out */
+    }
+}
+
+
+
+/* Spinner styles */
+.spinner {
+    width: 50px;
+    height: 50px;
+    border: 5px solid #FCBF49;
+    border-top: 5px solid #4a86c5;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+/* Spinner animation */
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+
+
+
+body {
+    font-family: Arial, sans-serif;
+    background-color: #F0F0EE;
+    background-image: repeating-radial-gradient(circle at 0 0, #ccc, #ccc 2px, transparent 2px, transparent 20px);
+    background-size: 20px 20px;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100vw;
+    height: 100vh;
+    color: #283C3C;
+}
+
+
+.container {
+    max-width: 100%;
+    /* Change to fill the entire width */
+    padding: 0;
+    /* Remove padding */
+    background-color: transparent;
+    /* Remove background color to blend with body */
+    box-shadow: none;
+    /* Remove the shadow */
+    border-radius: 0;
+    /* No rounding to match the rest of the page */
+    text-align: center;
+    margin: 0;
+    z-index: 1;
+}
+
+header {
+    margin-bottom: 20px;
+}
+
+header .logo {
+    width: 150px;
+    /* Adjust width according to logo size */
+    /* margin-top: 200px;
+    margin-bottom: 10px; */
+    /* Spacing below the logo */
+    position: absolute;
+    top: 10px;
+    left: 30px;
+}
+
+header h2 {
+    color: #B83A14;
+    /* Red theme color for headings */
+    margin-bottom: 20px;
+    font-size: 1.8rem;
+}
+
+label {
+    display: block;
+    margin: 10px 0 5px;
+    color: #283C3C;
+    /* Black-green theme for labels */
+    font-weight: bold;
+    font-size: larger;
+}
+
+.form-group {
+    margin-bottom: 15px;
+}
+
+select {
+    width: 520px;
+    padding: 15px;
+    border-radius: 10px;
+    /* Rounded corners */
+    border: 1px solid #ccc;
+    font-size: 1rem;
+    background-color: #fff;
+    -webkit-appearance: none;
+    /* Remove default arrow for a custom arrow look */
+    -moz-appearance: none;
+    /* For Firefox */
+    appearance: none;
+    position: relative;
+    /* To position the arrow */
+    padding-right: 30px;
+    /* Extra padding to make space for the arrow */
+}
+
+select::after {
+    content: '';
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    border-left: 6px solid transparent;
+    border-right: 6px solid transparent;
+    border-top: 6px solid #B83A14;
+    pointer-events: none;
+}
+
+input[type="file"] {
+    width: 500px;
+    padding: 10px;
+    border-radius: 10px;
+    /* Rounded corners */
+    border: 1px solid #ccc;
+    font-size: 1rem;
+    background-color: #fff;
+    cursor: pointer;
+}
+
+.form-group {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+
+input[type="file"]::file-selector-button {
+    background-color: #FCBF49;
+    /* Set color similar to button */
+    color: #fff;
+    border: none;
+    border-radius: 8px;
+    /* Rounded corners */
+    padding: 8px 12px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+input[type="file"]::file-selector-button:hover {
+    background-color: #B83A14;
+    /* Darken on hover */
+}
+
+button {
+    background-color: #FCBF49;
+    /* Yellow theme color for buttons */
+    color: #fff;
+    border: none;
+    cursor: pointer;
+    font-weight: bold;
+    transition: background-color 0.3s;
+    border-radius: 30px 62px;
+    /* Set to 10px for a subtle rounded look */
+    padding: 25px 62px;
+    /* Increase padding for a modern look */
+}
+
+button:hover {
+    background-color: #B83A14;
+    /* Darken to red on hover */
+}
+
+.result {
+    margin-top: 5px;
+    margin-bottom: 5px;
+    background-color: #fff3cd;
+    /* Light yellow background for the result */
+    border: 1px solid #ffeeba;
+    border-radius: 30px;
+    text-align: center;
+    /* Center align the result */
+}
+
+.result h3 {
+    color: #B83A14;
+    font-size: 1.8rem;
+    margin-bottom: 5px;
+}
+
+.emotion-display {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 10px;
+}
+
+.emotion-text {
+    font-size: 2rem;
+    font-weight: bold;
+    color: #4a86c5;
+    margin-bottom: 10px;
+    font-family: 'Comic Sans MS', cursive;
+}
+
+.emotion-model {
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: #293747;
+    margin-bottom: 10px;
+    font-family: 'Comic Sans MS', cursive;
+}
+
+.emotion-image {
+    width: 150px;
+    /* Size for larger display */
+    height: 150px;
+    object-fit: contain;
+    /* Contain the image without cropping */
+    padding: 10px;
+    /* Optional: Add padding around the image */
+    border: 2px solid #4a86c5;
+    border-radius: 10px;
+    /* Optional: Soft border rounding */
+    background-color: #ffffff;
+    transition: transform 0.3s ease;
+
+}
+
+.emotion-image:hover {
+    transform: scale(1.05);
+}
+
+
+.result p {
+    color: #283C3C;
+    /* Black-green for result text */
+    font-weight: bold;
+    font-size: 1.2rem;
+}
+
+.image-section {
+    margin-top: 20px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 15px;
+    justify-content: center;
+}
+
+.image-container {}
+
+.form-image {
+    height: 150px;
+    width: auto;
+    object-fit: cover;
+    border-radius: 5px;
+    border: 2px solid #90151c;
+    /* Red border for images */
+    transition: transform 0.3s ease;
+}
+
+.form-image:hover {
+    transform: scale(1.8);
+    /* Slightly scale up the image on hover */
+}
+
+/* technologies-used banner kind top right */
+.technologies-used {
+    position: fixed;
+    bottom: 30px;
+    right: 30px;
+    background-color: #f5c055;
+    color: #303030;
+    padding: 15px 15px;
+    font-size: 1.2rem;
+    z-index: 10;
+    border-radius: 25px;
+    /* shadow */
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
+    /* transition */
+    transition: transform 0.3s ease;
+    height: 300px;
+    width: 250px;
+}
+
+
+.team-members {
+    position: fixed;
+    bottom: 30px;
+    left: 30px;
+    background-color: #9fcafc;
+    color: #303030;
+    padding: 15px 15px;
+    font-size: 1.2rem;
+    z-index: 10;
+    border-radius: 25px;
+    /* shadow */
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
+    /* transition */
+    transition: transform 0.3s ease;
+    height: 300px;
+    width: 250px;
+}
+
+/* technologies-used points */
+.technologies-used ul,
+.team-members ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+}
+
+.technologies-used ul li,
+.team-members ul li {
+    margin-bottom: 5px;
+}

templates/index.html

@@ -0,0 +1,167 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Emotion Detection App</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+</head>
+
+<body>
+    <div class="container">
+        <header>
+            <img src="{{ url_for('static', filename='innov8_logo.png') }}" alt="Logo" class="logo"
+                style="width: 350px; height: auto;">
+            <h2>Emotion Detection From Facial Expressions Model</h2>
+        </header>
+        <form method="POST" enctype="multipart/form-data">
+            <div class="form-group">
+                <label for="option">Choose the ML Model:</label>
+                <select name="option" id="option" required>
+                    {% for option in dropdown_options %}
+                    <option value="{{ option }}">{{ option }}</option>
+                    {% endfor %}
+                </select>
+            </div>
+
+
+            <div class="floating-container"></div>
+
+            <div class="form-group">
+                <label for="image">Upload Face Image:</label>
+                <input type="file" name="image" id="image" accept="image/*" required>
+            </div>
+
+            <button type="submit">Submit</button>
+        </form>
+
+        <div class="image-section">
+            {% for img in images %}
+            <div class="image-container">
+                <img src="{{ img }}" alt="Image {{ loop.index }}" class="form-image">
+                <p>
+                    {{
+                    img.split('/').pop().split('.')[0].replace('_', ' ').capitalize()
+                    }}
+                </p>
+            </div>
+            {% endfor %}
+        </div>
+
+        <!-- Loading overlay -->
+        <div class="loading-overlay" id="loadingOverlay" style="display: none;">
+            <div class="spinner"></div>
+        </div>
+
+        <!-- Result display area -->
+        <div id="result" style="display: none;">
+            <p>Your result will appear here after loading.</p>
+        </div>
+
+
+        {% if result %}
+        <div class="result">
+            <h3>{{ result }}</h3>
+
+            {% if predicted_emotion %}
+            <div class="emotion-display">
+                <span class="emotion-text">{{ predicted_emotion.capitalize() }}</span>
+                <img src="{{ url_for('static', filename=predicted_emotion + '.jpg') }}"
+                    alt="{{ predicted_emotion }} image" class="emotion-image">
+                <span class="emotion-model">Prediction made with {{ model_name.capitalize() }}!</span>
+            </div>
+            {% endif %}
+        </div>
+        {% endif %}
+
+        <div class="technologies-used">
+            <h3>Technologies Used:</h3>
+            <ul>
+                <li>Python</li>
+                <li>Flask</li>
+                <li>HTML</li>
+                <li>CSS</li>
+                <li>JavaScript</li>
+                <li>TensorFlow</li>
+                <li>OpenCV</li>
+                <li>Numpy</li>
+
+            </ul>
+        </div>
+        <div class="team-members">
+            <h3>Team Members:</h3>
+            <ul>
+                <li>Akshat Mistry</li>
+                <li>Abhinav Kottayil</li>
+                <li>Raj Jagasia</li>
+                <li>Ishita Jagasia</li>
+                <li>Alyssa Guzman</li>
+                <li>Muhammed Ameen</li>
+                <li></li>
+                <li></li>
+            </ul>
+            <h3>Group 12: Innov8</h3>
+        </div>
+    </div>
+    <script>
+        function createFloatingElement(duration = 8) {
+            const floatingContainer = document.querySelector('.floating-container');
+            const element = document.createElement('div');
+            element.classList.add('floating-element');
+
+            // Randomize position, size, and animation duration
+            const randomX = Math.floor(Math.random() * 100); // Random horizontal position
+            const randomSize = Math.random() * 20 + 10; // Random size between 10px and 30px
+            const randomDuration = Math.random() * 3 + duration; // Set faster duration for loading effect
+
+            // Apply randomized styles
+            element.style.left = `${randomX}%`;
+            element.style.width = `${randomSize}px`;
+            element.style.height = `${randomSize}px`;
+            element.style.animationDuration = `${randomDuration}s`;
+
+            // Append to container and remove after animation
+            floatingContainer.appendChild(element);
+            setTimeout(() => {
+                floatingContainer.removeChild(element);
+            }, randomDuration * 1000);
+        }
+
+        // Regularly generate floating elements every second
+        let floatingInterval = setInterval(() => createFloatingElement(), 1000);
+
+        function showLoading() {
+            const loadingOverlay = document.getElementById('loadingOverlay');
+            const result = document.getElementById('result');
+            const floatingContainer = document.querySelector('.floating-container');
+
+            // Show loading overlay and adjust z-index for floating elements
+            loadingOverlay.style.display = 'flex';
+            floatingContainer.style.zIndex = '10'; // Bring floating elements in front
+
+            // Create 100 floating elements for a filled effect
+            for (let i = 0; i < 100; i++) {
+                createFloatingElement(4); // Shorter duration for faster movement
+            }
+
+            // After 2 seconds, hide loading overlay and revert z-index
+            setTimeout(() => {
+                loadingOverlay.style.display = 'none';
+                floatingContainer.style.zIndex = '-1'; // Reset to original z-index
+                result.style.display = 'block';
+            }, 2000);
+        }
+
+        // Event listener for form submission
+        document.querySelector("form").addEventListener("submit", function (event) {
+            event.preventDefault(); // Prevents actual form submission for demo purposes
+            showLoading(); // Show loading effect
+            setTimeout(() => this.submit(), 2000); // Submit form after loading is done
+        });
+    </script>
+
+
+</body>
+
+</html>