Spaces:

Habeeb13
/

mitsface

Runtime error

App Files Files Community

Habeeb13 commited on Jan 11, 2025

Commit

f98d0eb

verified ·

1 Parent(s): c41ca88

Upload 5 files

Browse files

Files changed (5) hide show

app.py +53 -0
index.html +120 -0
script.js +98 -0
styles.css +45 -0
unique_face_expression_model_.h5 +3 -0

app.py ADDED Viewed

	@@ -0,0 +1,53 @@

+from flask import Flask, render_template, request, jsonify
+import tensorflow as tf
+from PIL import Image
+import numpy as np
+import base64
+import io
+app = Flask(__name__)
+# Load your Keras model (.h5)
+model = tf.keras.models.load_model('unique_face_expression_model_.h5')
+class_labels = ['Angry', 'Disgust', 'Fear', 'Happy', 'Neutral', 'Sad', 'Surprise']
+# Function to preprocess the image before prediction
+def preprocess_image(image):
+    image = image.resize((48, 48))  # Resize image to match the model input size
+    image = image.convert('L')  # Convert image to grayscale (if required by the model)
+    image = np.array(image) / 255.0  # Normalize image to [0, 1]
+    image = np.expand_dims(image, axis=-1)  # Add channel dimension for grayscale
+    image = np.expand_dims(image, axis=0)  # Add batch dimension
+    return image
+@app.route('/')
+def index():
+    return render_template('index.html')
+@app.route('/predict', methods=['POST'])
+def predict():
+    if request.is_json and 'image' in request.json:
+        # Handle real-time video frame (Base64 string)
+        image_data = request.json['image'].split(",")[1]  # Extract base64-encoded image
+        image = Image.open(io.BytesIO(base64.b64decode(image_data)))
+    elif 'image' in request.files:
+        # Handle uploaded image (from file input)
+        image_file = request.files['image']
+        image = Image.open(image_file)
+    else:
+        return jsonify({'error': 'No image provided'}), 400
+    # Preprocess the image
+    processed_image = preprocess_image(image)
+    # Make prediction using the Keras model
+    prediction = model.predict(processed_image)
+    predicted_class = np.argmax(prediction)
+    predicted_label = class_labels[predicted_class]
+    # Return prediction result
+    result = {'prediction': predicted_label}
+    return jsonify(result)
+if __name__ == '__main__':
+    app.run(debug=True)

index.html ADDED Viewed

	@@ -0,0 +1,120 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Facial Expression Recognition</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #f4f4f4;
+            text-align: center;
+            margin: 0;
+            padding: 0;
+        }
+        .container {
+            width: 70%;
+            margin: auto;
+            padding: 20px;
+            background: white;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            margin-top: 50px;
+        }
+        button, input[type="file"] {
+            margin: 10px;
+            padding: 10px 15px;
+            border: none;
+            border-radius: 5px;
+            background: #007BFF;
+            color: white;
+            cursor: pointer;
+        }
+        button:hover {
+            background: #0056b3;
+        }
+        input[type="file"] {
+            cursor: pointer;
+        }
+        .output {
+            margin-top: 20px;
+            font-size: 18px;
+            color: #333;
+        }
+    </style>
+</head>
+<body>
+    <h1>Facial Expression Recognition</h1>
+    <div class="container">
+        <!-- Real-Time Detection Section -->
+        <h2>Real-Time Detection</h2>
+        <video id="video" width="480" height="360" autoplay></video>
+        <button onclick="startRealTimePrediction()">Start Real-Time Detection</button>
+        <div id="realTimeOutput" class="output"></div>
+        <!-- Image Upload Section -->
+        <h2>Image Upload</h2>
+        <input type="file" id="imageInput" accept="image/*">
+        <button onclick="uploadImage()">Upload and Predict</button>
+        <div id="uploadOutput" class="output"></div>
+    </div>
+    <script>
+        // Real-Time Prediction (using Base64)
+        function startRealTimePrediction() {
+            const video = document.getElementById('video');
+            navigator.mediaDevices.getUserMedia({ video: true })
+                .then(stream => {
+                    video.srcObject = stream;
+                })
+                .catch(err => {
+                    console.error("Error accessing camera: ", err);
+                });
+            setInterval(() => {
+                const canvas = document.createElement('canvas');
+                canvas.width = video.videoWidth;
+                canvas.height = video.videoHeight;
+                canvas.getContext('2d').drawImage(video, 0, 0);
+                const imageData = canvas.toDataURL('image/png');
+                fetch('/predict', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({ image: imageData })
+                })
+                    .then(response => response.json())
+                    .then(data => {
+                        document.getElementById('realTimeOutput').textContent = `Prediction: ${data.prediction}`;
+                    })
+                    .catch(error => console.error('Error:', error));
+            }, 1000); // Perform predictions every second
+        }
+        // Upload Image Prediction
+        function uploadImage() {
+            const input = document.getElementById('imageInput');
+            const file = input.files[0];
+            if (!file) {
+                alert('Please upload an image.');
+                return;
+            }
+            const formData = new FormData();
+            formData.append('image', file);
+            fetch('/predict', {
+                method: 'POST',
+                body: formData
+            })
+                .then(response => response.json())
+                .then(data => {
+                    document.getElementById('uploadOutput').textContent = `Prediction: ${data.prediction}`;
+                })
+                .catch(error => console.error('Error:', error));
+        }
+    </script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,98 @@

+// Function to start the webcam
+function startWebcam() {
+    const video = document.getElementById('video');
+    if (video) {
+        navigator.mediaDevices.getUserMedia({ video: true })
+            .then(stream => {
+                video.srcObject = stream;
+            })
+            .catch(error => {
+                console.error("Error accessing the webcam:", error);
+            });
+    } else {
+        console.error("Video element not found.");
+    }
+}
+// Call the startWebcam function once the DOM is fully loaded
+document.addEventListener('DOMContentLoaded', (event) => {
+    startWebcam();
+});
+// Function to start real-time detection
+function startDetection() {
+    const video = document.getElementById('video');
+    const canvas = document.getElementById('overlay');
+    const ctx = canvas.getContext('2d');
+    const realTimeOutputDiv = document.getElementById('realTimeOutput');
+    setInterval(() => {
+        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+        // Convert the captured frame to base64
+        const imageData = canvas.toDataURL('image/png');
+        fetch('/predict', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ image: imageData }),
+        })
+        .then(response => response.json())
+        .then(data => {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            if (data.prediction && data.bbox) {
+                const { x, y, w, h } = data.bbox;
+                // Draw bounding box
+                ctx.strokeStyle = 'red';
+                ctx.lineWidth = 2;
+                ctx.strokeRect(x, y, w, h);
+                // Display prediction label
+                ctx.font = '16px Arial';
+                ctx.fillStyle = 'red';
+                ctx.fillText(data.prediction, x, y - 10);
+                realTimeOutputDiv.innerHTML = `Real-Time Prediction: ${data.prediction}`;
+            } else {
+                realTimeOutputDiv.innerHTML = 'No face detected';
+            }
+        })
+        .catch(error => {
+            console.error('Error:', error);
+        });
+    }, 1000); // Capture and send frame every second
+}
+// Function to upload an image
+function uploadImage() {
+    const fileInput = document.getElementById('imageUpload');
+    const uploadOutputDiv = document.getElementById('uploadOutput');
+    if (fileInput && fileInput.files.length > 0) {
+        const file = fileInput.files[0];
+        const formData = new FormData();
+        formData.append('image', file);
+        fetch('/predict', {
+            method: 'POST',
+            body: formData,
+        })
+        .then(response => response.json())
+        .then(data => {
+            if (data.prediction) {
+                uploadOutputDiv.innerHTML = `Uploaded Image Prediction: ${data.prediction}`;
+            } else {
+                uploadOutputDiv.innerHTML = 'No face detected';
+            }
+        })
+        .catch(error => {
+            console.error('Error:', error);
+        });
+    } else {
+        alert('Please select an image before uploading.');
+    }
+}

styles.css ADDED Viewed

	@@ -0,0 +1,45 @@

+body {
+    font-family: Arial, sans-serif;
+    background-color: #f6f2f2;
+    text-align: center;
+    margin: 0;
+    padding: 20px;
+}
+.container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    gap: 20px;
+}
+.video-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+button {
+    background-color: #007bff;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    cursor: pointer;
+    border-radius: 5px;
+    margin-top: 10px;
+}
+button:hover {
+    background-color: #0056b3;
+}
+.file-upload {
+    margin-top: 20px;
+}
+.output {
+    margin-top: 20px;
+    font-size: 1.2em;
+    color: #333;
+}

unique_face_expression_model_.h5 ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:2b03715700915b1b68929050b2f7116a7848390e0dd6cb5207c771c591d112d4
+size 4275304