adding files

Dockerfile

@@ -0,0 +1,13 @@
+FROM python:3.9
+
+RUN useradd -m -u 1000 user
+USER user
+ENV PATH="/home/user/.local/bin:$PATH"
+
+WORKDIR /app
+
+COPY --chown=user ./requirements.txt requirements.txt
+RUN pip install --no-cache-dir --upgrade -r requirements.txt
+
+COPY --chown=user . /app
+CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -1,12 +1,26 @@
----
-title: Human Emotion Detection
-emoji: 👀
-colorFrom: yellow
-colorTo: purple
-sdk: docker
-pinned: false
-license: apache-2.0
-short_description: 'Finetuned efficient-net50 model to classify emotions '
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+## Human Emotion Detection
+A full fledged application that detects human emotion from an Image.
+In this project, I have finetuned Efficient model to achieve 80% accuracy on the validation dataset.
+
+This project uses human emotions dataset from Kaggle to finetune efficientnet model
+
+The application is created using flask framework and deployed on AWS EC2 instance . The docker image was pushed to ECR and pulled into EC2 instance using Github actions as a part of CI/CD pipeline implementation
+
+I tried using TransferNet approach and Finetuning approach. With Transfernet, the model accuracy was only 63% while it increased to 80% with a finetuned model
+
+## Evaluation Metrics
+
+Loss: 0.5
+Accuracy: 80%
+Top_k_accuracy: 93%
+
+### Example: How finetuning improved the model performance
+
+Before finetuning, this image was incorrecly labeled as Sad
+
+![Incorrect labeling with transfer learning](TransferLearning.png)
+
+After finetuning, this image was correctly labeled as happy
+
+![Correct labeling with finetuned model](Finetuning.png)
+

app.py

@@ -0,0 +1,60 @@
+from flask import Flask, request, render_template
+import numpy as np
+import tensorflow
+from tensorflow.keras.models import load_model
+from tensorflow.keras.preprocessing.image import img_to_array
+import os
+import tensorflow as tf
+from PIL import Image
+import cv2
+from transformers import AutoModel
+from huggingface_hub import hf_hub_download
+
+
+# Loading trained model
+
+os.environ["KERAS_BACKEND"] = "tensorflow"
+import keras
+model_path = hf_hub_download(repo_id="avimittal30/emotion_detector", filename="ed_model1.keras")
+model = keras.models.load_model(model_path)
+
+# model=load_model('my_model.keras')
+
+app = Flask(__name__)
+
+
+# Home route to render the upload form
+@app.route('/')
+def index():
+    return render_template('index.html')
+    
+
+# Prediction route
+@app.route('/predict', methods=['POST'])
+def predict():
+    
+    if 'image' not in request.files:
+        return render_template('index.html', error='No image uploaded!')
+
+    file = request.files['image']
+    
+    
+    filepath = os.path.join('static', file.filename)
+    file.save(filepath)
+    print(f'filepath:{filepath}')
+    print(f'file:{file}')
+    # Process the image to be fed to the model for prediction
+    image = cv2.imread(filepath)
+    test_image = cv2.resize(image, (256 ,256))
+    im=tf.constant(test_image, dtype=tf.float32 )  # Resizing the image to make it compatible with model
+    im=tf.expand_dims(im, axis=0)
+    # Predict emotion
+    predictions = model.predict(im)
+    emotion_labels = ['Angry', 'Happy', 'Sad']  # Emotion labels
+    predicted_emotion = emotion_labels[np.argmax(predictions)]
+
+    return render_template('result.html', emotion=predicted_emotion, image_file=filepath)
+
+if __name__ == '__main__':
+    # app.run(debug=True)
+    app.run(host="0.0.0.0", port=8080)

requirements.txt

@@ -0,0 +1,14 @@
+tensorflow=2.18.0
+numpy
+matplotlib
+scikit-learn 
+opencv-python-headless
+seaborn
+Pillow
+albumentations
+tensorflow-datasets
+flask
+huggingface_hub
+transformers
+
+

static/styles.css

@@ -0,0 +1,80 @@
+/* Reset some default browser styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background-color: #f3f4f6;
+    color: #333;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+}
+
+.container {
+    background: #ffffff;
+    border-radius: 10px;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+    padding: 30px;
+    text-align: center;
+    width: 400px;
+}
+
+h1 {
+    font-size: 60px;
+    margin-bottom: 20px;
+    color: #00509d;
+}
+
+.upload-section {
+    margin-bottom: 20px;
+}
+
+.upload-btn {
+    display: inline-block;
+    background-color: #0078D7;
+    color: white;
+    padding: 10px 20px;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.upload-btn:hover {
+    background-color: #00509d;
+}
+
+#file-upload {
+    display: none;
+}
+
+.image-preview {
+    margin: 20px 0;
+}
+
+.image-preview img {
+    max-width: 100%;
+    border: 2px solid #0078D7;
+    border-radius: 8px;
+    height: auto;
+}
+
+.result-section {
+    margin-top: 20px;
+}
+
+.result-section h2 {
+    font-size: 20px;
+    margin-bottom: 10px;
+    color: #00509d;
+}
+
+.result-section p {
+    font-size: 16px;
+    color: #666;
+}

templates/index.html

@@ -0,0 +1,49 @@
+<!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="/static/styles.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Emotion Detection from Image</h1>
+
+        <!-- Upload Section -->
+        <div class="upload-section">
+            <!-- Form to upload the image -->
+            <form id="upload-form" action="/predict" method="POST" enctype="multipart/form-data">
+                <label for="file-upload" class="upload-btn">Upload Image</label>
+                <input type="file" id="file-upload" name="image" accept="image/*" onchange="previewImage(event)">
+                <button type="submit">Submit for Emotion Detection</button>
+            </form>
+        </div>
+
+        <!-- Image Preview -->
+        <div class="image-preview" id="image-preview">
+            <img id="output" alt="Your Image Preview Will Appear Here" />
+        </div>
+
+        <!-- Result Section -->
+        <div class="result-section">
+            <h2>Detected Emotion:</h2>
+            <p id="emotion-result">Upload an image to see the result.</p>
+        </div>
+    </div>
+
+    <script>
+        // Function to preview the selected image before upload
+        function previewImage(event) {
+            const output = document.getElementById('output');
+            output.src = URL.createObjectURL(event.target.files[0]);
+            output.onload = () => {
+                URL.revokeObjectURL(output.src); // Free memory after image is loaded
+            };
+            // Reset the motion detection result when a new image is selected
+            const emotionResult = document.getElementById('emotion-result');
+            emotionResult.innerText = "Image selected, ready for detection.";
+        }
+    </script>
+</body>
+</html>

templates/result.html

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Emotion Detection Result</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            text-align: center;
+            background-color: #f0f0f0;
+            padding: 50px;
+        }
+        h1 {
+            color: #333;
+        }
+        img {
+            max-width: 300px;
+            height: auto;
+            border: 2px solid #333;
+            margin-top: 20px;
+        }
+        .result {
+            margin-top: 20px;
+            font-size: 24px;
+            font-weight: bold;
+            color: #333;
+        }
+        .back-button {
+            display: inline-block;
+            margin-top: 20px;
+            padding: 10px 20px;
+            background-color: #4CAF50;
+            color: white;
+            text-decoration: none;
+            border-radius: 5px;
+        }
+    </style>
+</head>
+<body>
+    <h1>Emotion Detection Result</h1>
+
+    <div class="result">
+        <p>Predicted Emotion: <strong>{{ emotion }}</strong></p>
+    </div>
+
+    <div>
+        <img src="{{ image_file }}" alt="Uploaded Image">
+    </div>
+
+    <a href="/" class="back-button">Try Again</a>
+</body>
+</html>

templates/styles.css

@@ -0,0 +1,80 @@
+/* Reset some default browser styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background-color: #f3f4f6;
+    color: #333;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+}
+
+.container {
+    background: #ffffff;
+    border-radius: 10px;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+    padding: 30px;
+    text-align: center;
+    width: 400px;
+}
+
+h1 {
+    font-size: 60px;
+    margin-bottom: 20px;
+    color: #00509d;
+}
+
+.upload-section {
+    margin-bottom: 20px;
+}
+
+.upload-btn {
+    display: inline-block;
+    background-color: #0078D7;
+    color: white;
+    padding: 10px 20px;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.upload-btn:hover {
+    background-color: #00509d;
+}
+
+#file-upload {
+    display: none;
+}
+
+.image-preview {
+    margin: 20px 0;
+}
+
+.image-preview img {
+    max-width: 100%;
+    border: 2px solid #0078D7;
+    border-radius: 8px;
+    height: auto;
+}
+
+.result-section {
+    margin-top: 20px;
+}
+
+.result-section h2 {
+    font-size: 20px;
+    margin-bottom: 10px;
+    color: #00509d;
+}
+
+.result-section p {
+    font-size: 16px;
+    color: #666;
+}

test.py

@@ -0,0 +1,21 @@
+from flask import Flask, request, render_template
+import numpy as np
+from tensorflow.keras.models import load_model
+from tensorflow.keras.preprocessing.image import img_to_array
+import os
+# from PIL import Image
+# import cv2
+
+# Load your pre-trained model
+model = load_model('my_model.keras')  # Replace with your model path
+
+filepath = os.path.join('static', file.filename)
+file.save(filepath)
+
+# Process the image
+image = Image.open(file)
+image = image.convert('RGB')
+image = image.resize((48, 48))  # Resize the image for the model
+image = img_to_array(image)
+image = np.expand_dims(image, axis=0) / 255.0  # Normalize the image
+