Upload 12 files

.gitattributes

@@ -0,0 +1,3 @@
+cover.png filter=lfs diff=lfs merge=lfs -text
+model/RAFDB_Custom.h5 filter=lfs diff=lfs merge=lfs -text
+static/resources/RTED.png filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -0,0 +1,31 @@
+# Use an official lightweight Python image
+FROM python:3.9
+
+# Set the working directory
+WORKDIR /app
+
+# Install required system libraries (fixes OpenCV OpenGL issue)
+RUN apt-get update && apt-get install -y \
+    libgl1-mesa-glx \
+    libglib2.0-0 \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy required files
+COPY requirements.txt .
+COPY app.py .
+COPY wsgi.py .
+COPY model/ model/
+COPY templates/ templates/
+COPY static/ static/
+
+# Install Python dependencies
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Set environment variables to avoid TensorFlow warnings
+ENV TF_CPP_MIN_LOG_LEVEL=3
+
+# Expose the default Hugging Face Spaces port
+EXPOSE 7860
+
+# Start the app using gunicorn with optimizations
+CMD ["gunicorn", "--bind", "0.0.0.0:7860", "--workers=1", "--threads=2", "--timeout=120", "wsgi:application"]

README.md

@@ -0,0 +1,35 @@
+---
+title: "Real-Time Emotion Detection (RTED)"
+emoji: "😊"
+cover_image: "cover.png"
+sdk: "docker"
+sdk_version: "3.0.0"
+app_file: "app.py"
+python_version: "3.9"
+pinned: false
+---
+
+
+# Real-Time Emotion Detection (RTED)
+
+This app uses a deep learning model to classify emotions from images and real-time video streams.
+
+### How It Works
+1. **Choose a Detection Mode:**  
+   - **Static Detection:** Upload an image.  
+   - **Real-Time Detection:** (Currently disabled due to Hugging Face webcam restrictions).  
+
+2. **Model Predictions:**  
+   - The model predicts emotions from 7 categories:  
+     **Angry, Disgust, Fear, Happy, Neutral, Sad, Surprise**  
+
+3. **File Structure:**  
+   - **Model File:** `model/RAFDB_Custom.h5` (Ensure this exists)  
+   - **Static Files:** Inside `static/`  
+
+---
+
+### Running the App Locally  
+```bash
+pip install -r requirements.txt
+python app.py

app.py

@@ -0,0 +1,89 @@
+import base64
+import numpy as np
+import cv2
+from flask import Flask, render_template, request, jsonify
+import tensorflow as tf
+from PIL import Image
+import io
+from mtcnn import MTCNN
+import os
+
+app = Flask(__name__, static_folder='static', template_folder='templates')
+app.secret_key = 'shamstabrez'
+
+# Load Model
+model_path = os.path.join("model", "RAFDB_Custom.h5")
+if not os.path.exists(model_path):
+    raise FileNotFoundError(f"Model file not found: {model_path}")
+
+model = tf.keras.models.load_model(model_path)
+class_labels = ['Angry', 'Disgust', 'Fear', 'Happy', 'Neutral', 'Sad', 'Surprise']
+IMG_SIZE = (48, 48)
+detector = MTCNN()
+
+streaming = False
+
+def detect_and_classify(frame):
+    faces = detector.detect_faces(frame)
+    detected_faces = []
+    if faces:
+        for face in faces:
+            x, y, w, h = face['box']
+            x, y = max(0, x), max(0, y)
+            cropped_face = frame[y:y+h, x:x+w]
+
+            if cropped_face.shape[0] > 0 and cropped_face.shape[1] > 0:
+                face_rgb = cv2.resize(cropped_face, IMG_SIZE)
+                face_array = tf.keras.preprocessing.image.img_to_array(face_rgb) / 255.0
+                face_array = np.expand_dims(face_array, axis=0)
+
+                predictions = model.predict(face_array)[0]
+                top_indices = np.argsort(predictions)[-3:][::-1]  # Get top 3 emotions
+                top_emotions = [(class_labels[i], round(predictions[i] * 100, 2)) for i in top_indices]
+
+                cv2.rectangle(frame, (x, y), (x+w, y+h), (0, 255, 0), 1)  # Thin border
+                for i, (emotion, percentage) in enumerate(top_emotions):
+                    text = f"{emotion} ({percentage}%)"
+                    cv2.putText(frame, text, (x, y - (i * 20) - 10), cv2.FONT_HERSHEY_SIMPLEX, 0.5, (0, 255, 0), 1)
+                detected_faces.extend(top_emotions)
+    return frame, detected_faces
+
+@app.route('/')
+def index():
+    return render_template('index.html', top_emotions=None, img_base64=None, show_upload=True, show_camera=False, initial_image=True)
+
+@app.route('/classify', methods=['POST'])
+def classify_image():
+    image = request.files['image']
+    img = Image.open(image)
+    img = np.array(img)
+    img = cv2.cvtColor(img, cv2.COLOR_RGB2BGR)
+    processed_frame, top_emotions = detect_and_classify(img)
+
+    _, buffer = cv2.imencode('.png', processed_frame)
+    img_base64 = base64.b64encode(buffer).decode('utf-8')
+
+    return render_template('index.html', top_emotions=top_emotions, img_base64=img_base64, show_upload=True, show_camera=False, initial_image=False)
+
+@app.route('/predict_video', methods=['POST'])
+def predict_video():
+    data = request.json
+    image_data = data.get("image")
+
+    if not image_data:
+        return jsonify({"error": "No image data received"}), 400
+
+    image_data = image_data.split(",")[1]
+    image_bytes = base64.b64decode(image_data)
+    image = Image.open(io.BytesIO(image_bytes))
+    frame = np.array(image)
+    frame = cv2.cvtColor(frame, cv2.COLOR_RGB2BGR)
+
+    processed_frame, detected_faces = detect_and_classify(frame)
+    _, buffer = cv2.imencode(".jpg", processed_frame)
+    processed_image_base64 = base64.b64encode(buffer).decode("utf-8")
+
+    return jsonify({"processed_frame": processed_image_base64, "emotions": detected_faces})
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=7860)

gitattributes

@@ -0,0 +1,38 @@
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text
+static/resources/RTED.png filter=lfs diff=lfs merge=lfs -text
+RTED.png filter=lfs diff=lfs merge=lfs -text
+cover.png filter=lfs diff=lfs merge=lfs -text

model/RAFDB_Custom.h5

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:59bf57cef329e4ed0bd204f88a26446836481667f54e62e023f4027645c705b9
+size 50885928

requirements.txt

@@ -0,0 +1,7 @@
+Flask==2.3.2
+tensorflow-cpu==2.18.0
+Pillow==10.0.1
+numpy==1.26.4
+gunicorn==20.1.0
+opencv-python-headless==4.9.0.80
+mtcnn==0.1.1

static/style.css

@@ -0,0 +1,289 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+/* General Styles */
+body {
+    font-family: 'Poppins', sans-serif;
+    background-color: #f8fafc;
+    color: #333;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+}
+
+/* Header Navbar */
+header {
+    width: 100%;
+    background-color: #1E293B;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 15px 20px;
+    position: relative;
+}
+
+header .sidebar-toggle {
+    position: absolute;
+    left: 15px; 
+    min-width: 120px; 
+    max-width: 150px; 
+    text-align: center;
+    white-space: nowrap;
+    background-color: #334155;
+    color: white;
+    padding: 8px 12px; 
+    border: none;
+    border-radius: 6px;
+    font-size: 14px; 
+    cursor: pointer;
+    transition: background 0.3s ease-in-out, transform 0.2s ease-in-out;
+}
+
+/* Hover Effect */
+header .sidebar-toggle:hover {
+    background-color: #475569;
+    transform: scale(1.05); /* Slight zoom effect on hover */
+}
+
+/* Mobile Optimization */
+@media (max-width: 400px) {
+    header .sidebar-toggle {
+        min-width: 90px;
+        font-size: 12px;
+        padding: 5px 8px;
+    }
+}
+
+@media (max-width: 320px) {
+    header .sidebar-toggle {
+        min-width: 85px; 
+        font-size: 11px; 
+        padding: 4px 6px;
+    }
+}
+
+
+
+.header-content {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+header img {
+    height: 40px;
+}
+
+/* Sidebar Navigation */
+nav {
+    position: fixed;
+    top: 0;
+    left: -250px;
+    height: 100vh;
+    width: 250px;
+    background-color: #1E293B;
+    color: white;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 20px;
+    transition: left 0.3s ease-in-out;
+    box-shadow: 4px 0 10px rgba(0, 0, 0, 0.2);
+}
+
+nav.show {
+    left: 0;
+}
+
+nav .nav-header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 15px;
+}
+
+nav img {
+    height: 30px;
+}
+
+nav h2 {
+    font-size: 20px;
+    font-weight: bold;
+}
+
+/* Sidebar Buttons */
+nav button, nav a {
+    width: 100%;
+    padding: 12px;
+    font-size: 16px;
+    background-color: #334155;
+    border: none;
+    color: white;
+    cursor: pointer;
+    transition: background 0.3s;
+    margin-bottom: 10px;
+    border-radius: 6px;
+    font-weight: bold;
+    text-align: center;
+    text-decoration: none;
+}
+
+nav button:hover, nav a:hover {
+    background-color: #475569;
+}
+
+nav .linkedin-link {
+    margin-top: 20px;
+    color: #0077B5; 
+    font-weight: 300;
+    text-decoration: none; 
+    background: none; 
+    padding: 8px 0;
+    border: none; 
+    display: block;
+    text-align: center;
+    transition: color 0.2s ease-in-out;
+}
+
+nav .linkedin-link:hover {
+    text-decoration: underline;
+    color: #005582; 
+}
+
+
+
+/* Main Content */
+.container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 40px;
+}
+
+/* Hide Sections Initially */
+#upload-container, #video-container {
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+    background: white;
+    max-width: 600px;
+    width: 100%;
+}
+
+#upload-container.active, #video-container.active {
+    display: flex;
+}
+
+/* Upload Form */
+.upload-form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+}
+
+.upload-form input[type="file"] {
+    display: none;
+}
+
+.upload-title {
+    margin-bottom: 15px; 
+}
+
+.upload-buttons {
+    display: flex;
+    gap: 15px; 
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    width: 100%; 
+    max-width: 400px; 
+}
+
+.custom-file-upload {
+    background-color: #3B82F6;
+    color: white;
+    padding: 10px 20px;
+    border-radius: 6px;
+    font-size: 16px;
+    font-weight: bold;
+    cursor: pointer;
+    transition: all 0.3s ease-in-out;
+    display: inline-block;
+}
+
+.custom-file-upload:hover {
+    background-color: #2563EB;
+}
+
+.upload-buttons button {
+    background-color: #3B82F6;
+    color: white;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 6px;
+    font-size: 16px;
+    cursor: pointer;
+    font-weight: bold;
+    transition: all 0.3s ease-in-out;
+}
+
+.upload-buttons button:hover {
+    background-color: #2563EB;
+}
+
+
+
+/* Emotion List */
+.emotion-list {
+    list-style: none;
+    padding: 0;
+    margin-top: 10px;
+    font-size: 16px;
+    font-family: 'Roboto', sans-serif;
+    font-weight: 300;
+    line-height: 1.6;
+}
+
+/* Video Controls */
+.video-controls {
+    display: flex;
+    justify-content: center;
+    gap: 15px;
+    margin-top: 10px;
+}
+
+.video-controls button {
+    background-color: #3B82F6;
+    color: white;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 6px;
+    font-size: 16px;
+    cursor: pointer;
+    font-weight: bold;
+    transition: all 0.3s ease-in-out;
+}
+
+.video-controls button:hover {
+    background-color: #2563EB;
+}
+
+/* Styled Images */
+.result-image, video {
+    width: 100%;
+    max-width: 600px;
+    border-radius: 8px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+    margin-top: 10px;
+}

templates/index.html

@@ -0,0 +1,161 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Real-Time Emotion Detection (RTED)</title>
+    <link rel="stylesheet" href="/static/style.css">
+</head>
+<body>
+    <header>
+        <button onclick="toggleSidebar()" class="sidebar-toggle">Switch Detection</button>
+        <div class="header-content">
+            <img src="/static/resources/Logo.webp" alt="Logo">
+            <h1>Real-Time Emotion Detection</h1>
+        </div>
+    </header>
+
+    <nav id="sidebar">
+        <button onclick="toggleSidebar()" class="close-btn">✖</button>
+        <div class="nav-header">
+            <img src="/static/resources/Logo.webp" alt="Logo">
+            <h2>RTED</h2>
+        </div>
+        <button onclick="showUpload()">Static Detection</button>
+        <button onclick="showCamera()">Real-Time Detection</button>
+        <a href="https://www.linkedin.com/in/shamskhan404/" target="_blank" class="linkedin-link">Connect on LinkedIn</a>
+    </nav>
+
+    <div class="container">
+        <div id="upload-container" class="active">
+            <h2 class="upload-title">Upload an image to detect emotion</h2>
+            <form action="/classify" method="POST" enctype="multipart/form-data" class="upload-form">
+                <div class="upload-buttons">
+                    <label for="file-upload" class="custom-file-upload">Choose File</label>
+                    <input id="file-upload" type="file" name="image" required>
+                    <button type="submit">Detect Emotion</button>
+                </div>
+            </form>
+
+
+            <img id="static-image" src="{% if initial_image %}/static/resources/RTED.png{% else %}data:image/png;base64,{{ img_base64 }}{% endif %}" class="result-image">
+            {% if top_emotions %}
+                <h2>Detected Emotions:</h2>
+                <ul class="emotion-list">
+                    {% for emotion, percent in top_emotions[:3] %}
+                        <li>{{ percent }}% {{ emotion }}</li>
+                    {% endfor %}
+                </ul>
+            {% endif %}
+        </div>
+
+        <div id="video-container">
+            <h2>Use the camera to detect emotions</h2>
+            <img id="rted-placeholder" src="/static/resources/RTED.png" alt="RTED Placeholder" style="width: 100%; max-width: 640px; display: block;">
+            <video id="video-feed" width="640" height="480" autoplay style="display: none;"></video>
+          <img id="processed-video-frame" src="" alt="Processed Frame" style="display: none; width: 100%; max-width: 640px;">
+
+            <h2 id="emotion-result"></h2>
+            <div class="video-controls">
+                <button onclick="startCamera()">Start Detection</button>
+                <button onclick="stopCamera()">Stop Detection</button>
+            </div>
+        </div>
+    </div>
+
+    <script>
+    function toggleSidebar() {
+        let sidebar = document.getElementById("sidebar");
+        sidebar.classList.toggle("show");
+    }
+
+    function showUpload() {
+        document.getElementById("upload-container").classList.add("active");
+        document.getElementById("video-container").classList.remove("active");
+    }
+
+    function showCamera() {
+        document.getElementById("upload-container").classList.remove("active");
+        document.getElementById("video-container").classList.add("active");
+        toggleSidebar(); 
+    }
+
+    let videoStream = null;
+    let video = document.getElementById("video-feed");
+    let canvas = document.createElement("canvas");
+    let ctx = canvas.getContext("2d");
+    let intervalId = null;
+
+    function startCamera() {
+        if (videoStream) {
+            stopCamera();
+        }
+
+        navigator.mediaDevices.getUserMedia({ video: true })
+            .then(stream => {
+                videoStream = stream;
+                video.srcObject = stream;
+                video.style.display = "block"; 
+                document.getElementById("rted-placeholder").style.display = "none"; 
+                startSendingFrames();
+            })
+            .catch(err => {
+                console.error("Error accessing camera: ", err);
+                alert("Could not access the camera. Please allow camera permissions.");
+            });
+    }
+
+    function stopCamera() {
+    if (videoStream) {
+        videoStream.getTracks().forEach(track => track.stop());
+        videoStream = null;
+    }
+
+    clearInterval(intervalId);
+    intervalId = null;
+
+    video.srcObject = null;
+    video.style.display = "none"; 
+    document.getElementById("processed-video-frame").style.display = "none"; // Hide processed frame
+    document.getElementById("processed-video-frame").src = ""; // Clear the last frame
+    document.getElementById("rted-placeholder").style.display = "block"; 
+    document.getElementById("emotion-result").innerText = "";
+    }
+
+
+    function startSendingFrames() {
+    intervalId = setInterval(() => {
+        if (!videoStream) return;
+
+        canvas.width = video.videoWidth;
+        canvas.height = video.videoHeight;
+        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+
+        let imageData = canvas.toDataURL("image/jpeg");
+
+        fetch("/predict_video", {
+            method: "POST",
+            body: JSON.stringify({ image: imageData }),
+            headers: { "Content-Type": "application/json" }
+        })
+        .then(response => response.json())
+        .then(data => {
+            // Display processed frame with bounding boxes
+            document.getElementById("video-feed").style.display = "none"; // Hide original feed
+            document.getElementById("rted-placeholder").style.display = "none"; // Hide placeholder
+            document.getElementById("processed-video-frame").src = "data:image/jpeg;base64," + data.processed_frame;
+            document.getElementById("processed-video-frame").style.display = "block";
+
+            // Show detected emotions
+            if (data.emotions.length > 0) {
+                let emotionsText = data.emotions.slice(0, 3).map(e => `${e[0]} (${e[1]}%)`).join(', ');
+                document.getElementById("emotion-result").innerText = `Detected: ${emotionsText}`;
+            }
+        })
+        .catch(error => console.error("Error:", error));
+    }, 500); // 2 frames 1 FPS
+}
+
+</script>
+</body>
+</html>