Upload 9 files

aiml-iit-ropar-56bc742ad36f.json

@@ -0,0 +1,13 @@
+{
+  "type": "service_account",
+  "project_id": "aiml-iitropar",
+  "private_key_id": "d6769bb9a26fb454263106864284c6e1896717a8",
+  "private_key": "-----BEGIN PRIVATE KEY-----\nMIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQDdpaz+CRUTVW6x\nMarM3yP1lX9K8odOt8SFfRoXar3iKIw+4s5x+4HccYRBTJqP4n4TqkWzzdo8wxN9\n9msYZsW2SqEeDNLX/eTqLKCk4tB+lQ0kKoSuNzOA/uMc9bh5ZLrpji+gH4OmVRIj\n/WIo6kUlMYiUxuC3yT45AIcUGnY8NRszDesKNik2vcrzu7leMZuVr/6354xMRx+q\ndkA+VPMmou8MF9wAmRo5dYafhh54HDjtx2Qm24rCGoPNyziCx3fYl9rKxHr+hWUA\ncT8gSyumtp8uXtH68J+K1BwTfGHooDW0KCVe9I0MnQieJQQOJ/gQGCHRr7r9Fw7w\nkhT5Q7G1AgMBAAECggEADAlLxjrU3b5+sEQqdTgr4ib6vpBCPUnY8/J5zio82AZ2\n1pESABoV8KmVx/GtQLbeZ6/QMQYIKH25IKwW9OsF0xL6l2C/urzTUiKCHG94aNtW\nwe9GJ8DLJ6GP0Jozvkc0Uuu8AIXIQX+D/ezWswfvy9KEtdGWppxY0uxz/r6Qy6RG\nb0hGCjrt+ZYsdS1hFwzfBen/ZcU815rJG/K+TaZqbf7woIhWW/9v4J8lNIx3FlMu\nB5KykSGKA1Pzw+Es2dyhZPgCDMWemcs/TpSBCtt33IrNYsPD8jTYHsc5S0K6K9Jw\nyyC2TH6oo2a9TyGYhsiGdEmeRxqMv9ELa9R6p0pouQKBgQDx1M6PaxCZHV50Fo/r\nI/hE6GB1y0u+6ymk9c88uRSsNBqSI0AyuGVPfp9DTreO0P+kZoPIFxGkziQQo04C\nhNezZn/sqGcjCJZ4Ec4P1b/n4YbkNXtFxCwPhe308b2WM6K/MuJWteu4Pnd5FGsQ\nR16XwCSq/U5w2yhUxtOFCC5zLQKBgQDqoiFc8K2HkvHeG1meeDtuawMJZ85wtlnz\n6AEk+f+6/G7FMF6PPI1O6yxzLzbgcpBoPG0up0glg7QMyGoDL/Lan6IqCJCXofnB\niiTgFH4JmDF0tryLn120zz40VRv1ZN+vzk4y2MCgPhyXC9QHOxdJFGqE2KwiJ2oI\nEYW/yX3tqQKBgQDwxMA3GBB5cT0V9VSqdrB64qUPAi3S0k0u+LCws1B6tpFxx/jl\nxqLPR7EHETs9zKWJJ6uyrg0Z+Ub87aoAZgRfkABzPaMZxTYSKx/ushCTq/1h/kFS\nT6LSfbRRd9Ea1yQEmoOwcwVR9Zd7jDGgDn6GNX4MY5ASWpBH/4CeZWvhrQKBgAvK\nG70MxttiEc8kNquUxP+2Vs+5LJFTSE/OH4iZGzVtC6/Sz12JIFyPyor7G1nJx+HE\n74OBmklwRbLCuzjvxtcfYEmWZpWH6QHFjDbKMM8Qm6OOrwig+Fdmdmywvhfleqvd\nxOYfKAalOFCKopu+Z1wfr35/WJ7atiQzpTHO0QoJAoGAZmzL0gEqmlyB7xgUq/8E\nEQcLQqIiZnL/YH06DoanhvJxnBVAR+vYmBBZJvRO8t2p8JG35/apHHOtcS0A7VJF\nVVnq9EOXQ5oWnUxd0piM0iCUQVnnlw5BvNLYJyVzAibtwWeXZl4KpObFjC3WHLj3\nDe/YGfscQE/NS7mreW0sp0I=\n-----END PRIVATE KEY-----\n",
+  "client_email": "firebase-adminsdk-m0gnj@aiml-iitropar.iam.gserviceaccount.com",
+  "client_id": "102551427524879978157",
+  "auth_uri": "https://accounts.google.com/o/oauth2/auth",
+  "token_uri": "https://oauth2.googleapis.com/token",
+  "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
+  "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/firebase-adminsdk-m0gnj%40aiml-iitropar.iam.gserviceaccount.com",
+  "universe_domain": "googleapis.com"
+}

app.py

@@ -0,0 +1,118 @@
+from flask import Flask, render_template, jsonify, request
+from flask_socketio import SocketIO, emit
+from fire import firestore_client as fc
+import dlib
+import base64
+import cv2
+import numpy as np
+import time
+
+
+app = Flask(__name__)
+app.config['SECRET_KEY'] = 'secret!'
+socket = SocketIO(app, async_mode="eventlet")
+img = None
+
+hog_face_detector = dlib.get_frontal_face_detector() 
+
+
+def base64_to_img(base64_image):
+
+    # Remove the "data:image/jpeg;base64," prefix from the string
+    image_data = base64_image.split(',')[1]
+
+    # Decode the base64-encoded image data
+    decoded_data = base64.b64decode(image_data)
+
+    # Convert the binary data to a NumPy array
+    np_array = np.frombuffer(decoded_data, np.uint8)
+
+    # Decode the NumPy array to an OpenCV image
+    image = cv2.imdecode(np_array, cv2.IMREAD_COLOR)
+
+    return image
+
+def prep_image(image,name,fc):
+    image = base64_to_img(image)
+    count = 0
+    while count < 10:
+        time.sleep(2)
+        face_hog = hog_face_detector(image,1)
+        for face in face_hog:
+            x = face.left()
+            y = face.top()
+            w = face.right() - x
+            h = face.bottom() - y 
+        crop = image[y:y+h,x:x+w] 
+        crop = cv2.resize(crop, (224, 224)) 
+        retval, buffer = cv2.imencode('.jpg', crop)
+        res = base64.b64encode(buffer)
+        doc= name+"_"+str(count)
+        print(res)
+        doc_ref = fc.collection("faces").document(str(doc))
+        doc_ref.set({
+            "img":res
+        })
+        count += 1
+    
+    return(count)    
+
+@socket.on("connect")
+def test_connect():
+    print("Connected")
+    emit("my response", {"data": "Connected"})
+
+@socket.on("image")
+def receive_image(image):
+    global img
+    img = image['image']
+    # Emit the received image as base64 string to the '/camera' route
+    socket.emit('forward_image', {'image': img}, namespace='/camera')
+
+@app.route("/")
+def home():
+    return render_template("index.html")
+
+@app.route("/camera", methods=['POST',"GET"])
+def camera():
+    if request.method == 'GET':
+        # image_data = request.form['image']
+        # Process the received image data as needed
+
+        # Return the processed image data
+        return jsonify({'image': img})
+    else:
+        return "Method Not Allowed", 405
+
+@app.route("/login")
+def login():
+    doc_ref = fc.collection("current_users").document('user')
+    doc = doc_ref.get()
+    if doc.exists:
+        doc = doc.to_dict()
+    else:
+        print("No such document!")
+    res = doc['name']
+    
+    return render_template('login.html',name = res)
+
+@app.route("/sign", methods=('GET', 'POST'))
+def sign():
+    doc_ref = fc.collection("faces").document('users')
+    doc = doc_ref.get()
+    if doc.exists:
+        doc = doc.to_dict()
+    else:
+        print("No such document!")
+    res = doc['name']
+    result = "error"
+
+    if request.method == "POST":
+        name = request.form.get("name")
+        res.append(name)   
+        result = prep_image(img,name,fc) 
+    
+    return render_template('sign.html',data = result)
+
+if __name__ == '__main__':
+    socket.run(app, debug=True, port=8080)

requirements.txt

@@ -0,0 +1,11 @@
+Flask-SocketIO
+python-engineio
+dlib
+python-socketio
+Flask
+Werkzeug
+opencv_python
+numpy
+gunicorn
+eventlet
+tensorflow

static/login.js

@@ -0,0 +1,25 @@
+// Get the video element
+var video = document.getElementById('videoElement');
+
+// Check if the browser supports getUserMedia
+if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
+    // Access the webcam stream
+    navigator.mediaDevices.getUserMedia({ video: true })
+        .then(function(stream) {
+            // Set the video source to the webcam stream
+            video.srcObject = stream;
+        })
+        .catch(function(error) {
+            console.error('Error accessing the webcam:', error);
+        });
+} else {
+    console.error('getUserMedia is not supported in this browser.');
+}
+
+function login(){
+    window.open('https://my.spline.design/untitled-051cda2896c04da7313ac239da48d293/')
+}
+var count = window.getElementById('data').innerHTML;
+if (count==10){
+    window.open('https://my.spline.design/untitled-051cda2896c04da7313ac239da48d293/')
+}

static/main.js

@@ -0,0 +1,89 @@
+// establishing connection between client and server by getting the URL.
+var socket = io.connect(window.location.protocol + '//' + document.domain + ':' + location.port, {
+    transports: ['websocket'],
+    path: '/socket.io'
+});
+
+// once connected, print out "Connected"
+socket.on('connect', function () {
+    console.log("Connected...!", socket.connected)
+});
+
+// print results
+var result = document.getElementById('count')
+
+socket.on('result', function (count) {
+    result.innerHTML = count.count;
+    if (count.count === "Done") {
+        // Handle the "Done" message
+        stop_camera();
+    }
+});
+
+// global variables for video and output
+var video = document.getElementById('videoElement');
+var canvas = document.getElementById('canvas');
+var context = canvas.getContext('2d');
+var send_data;
+
+// set video dimensions
+video.width = 400;
+video.height = 300;
+
+// rate of sending image
+const FPS = 10;
+
+// function for sending the webcam input
+function send() {
+    width = video.width;
+    height = video.height;
+    context.drawImage(video, 0, 0, width, height);
+    var data = canvas.toDataURL('image/jpeg', 0.5);
+    context.clearRect(0, 0, width, height);
+    socket.emit('image', {image: data});
+}
+
+var start = document.getElementById("start");
+start.onclick = function () {
+    send_data = setInterval(send, 1000 / FPS);
+}
+
+// function to start webcam on client side
+function start_camera() {
+    let devices = navigator.mediaDevices;
+    if (!devices || !devices.getUserMedia) {
+        console.log("getUserMedia() not supported.");
+        return;
+    }
+    devices.getUserMedia({
+        video: true
+    })
+        .then(function (vidstream) {
+            if ("srcObject" in video) {
+                video.srcObject = vidstream;
+            } else {
+                video.src = window.src = window.URL.createObjectURL(vidstream);
+            }
+            video.onloadeddata = function (e) {
+                video.play();
+            };
+        })
+        .catch(function (e) {
+            console.log(e.name + ": " + e.message);
+        });
+}
+
+// stopping camera input and sending data
+function stop_camera() {
+    clearInterval(send_data);
+    socket.disconnect();
+}
+
+function login() {
+    window.open("/login","_blank")
+}
+
+function signup(){
+    window.open("/sign","_blank")
+}
+

static/styles.css

@@ -0,0 +1,6 @@
+.login{
+    margin-right: 10px;
+}
+body{
+    background-image: radial-gradient(circle at center, rgb(185, 147, 214) 24.00%,rgb(204, 187, 187) 100.00%);
+}

templates/index.html

@@ -0,0 +1,65 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Startup</title>
+    <script src="https://cdn.socket.io/4.5.4/socket.io.min.js"
+    crossorigin="anonymous"></script>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
+    <link rel="stylesheet" href="../static/styles.css">
+</head>
+
+<body onload="start_camera()">
+    <nav class="navbar bg-light bg-body-tertiary border-bottom">
+        <div class="container-fluid">
+            <a class="navbar-brand">Navbar</a>
+            <form class="d-flex">
+                <button class="btn mr-5 btn-outline-success" type="submit" >Login</button>
+                <button class="btn btn-outline-danger" type="submit" onclick="signup()">Sign up</button>
+            </form>
+        </div>
+    </nav>
+    <div class="container mt-5 ">
+        <div class="col shadow min-vh-75 h-75 p-3 rounded aling-self-center bg-dark">
+            <div class="row">
+                <div class="col">
+                    <div class="card rounded" style="width: 18rem;">
+                        <div class="card-body">
+                            <h5 class="card-title">face identification login</h5>
+                            <p class="card-text">this system uses facial land marks to identify user and further login
+                                just using the facial identification.</p>
+                                <button type="button" class="btn btn-primary" id="start">Start Camera</button>
+                                
+                                <button type="button" class="btn btn-danger" onclick="stop_camera()">Stop Camera</button>
+                                <button type="button" class="btn btn-outline-danger" onclick="login()">Login</button>
+                        </div>
+                    </div>
+                </div>
+                <div class="col">
+                    <div class="card rounded" style="width: 18rem;">
+                        <video autoplay="true" id="videoElement" class="card-img-top"></video>
+                        <canvas id="canvas" width="400" height="300" class="d-none"></canvas>
+                        <div class="card-body">
+                            <p class="class-text" id="count">Please keep your face to the center of the frame and don't move</p>
+                            <p class="card-text">click login if you are already registered otherwise click sign-up to register your face</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    </div>
+
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
+        crossorigin="anonymous"></script>
+        <script src="../static/main.js"></script>
+        <script src="{{ url_for('static',filename='main.js') }}"></script>
+</body>
+
+</html>

templates/login.html

@@ -0,0 +1,103 @@
+<!-- <!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Startup</title>
+    <script src="https://cdn.socket.io/4.5.4/socket.io.min.js"
+    crossorigin="anonymous"></script>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
+    <link rel="stylesheet" href="../static/styles.css">
+</head>
+
+<body onload="start_camera()">
+    <nav class="navbar bg-light bg-body-tertiary border-bottom">
+        <div class="container-fluid">
+            <a class="navbar-brand">Navbar</a>
+            <form class="d-flex" role="search">
+                <button class="btn mr-5 btn-outline-success" type="submit">Login</button>
+                <button class="btn btn-outline-danger" type="submit" onclick="signup()">Sign up</button>
+            </form>
+        </div>
+    </nav>
+    <div class="container mt-5 ">
+        <div class="col shadow min-vh-75 h-75 p-3 rounded aling-self-center bg-dark">
+            <div class="row">
+                <div class="col">
+                    <div class="card rounded" style="width: 18rem;">
+                        <div class="card-body">
+                            <h5 class="card-title">face identification login</h5>
+                            <p class="card-text">this system uses facial land marks to identify user and further login
+                                just using the facial identification.</p>
+                                <button type="button" class="btn btn-primary" id="start">Start Camera</button>
+                                
+                                <button type="button" class="btn btn-danger" onclick="stop_camera()">Stop Camera</button>
+                                <button type="button" class="btn btn-outline-danger" onclick="login()">Login</button>
+                        </div>
+                    </div>
+                </div>
+                <div class="col">
+                    <div class="card rounded" style="width: 18rem;">
+                        <video autoplay="true" id="videoElement" class="card-img-top"></video>
+                        <canvas id="canvas" width="400" height="300" class="d-none"></canvas>
+                        <div class="card-body">
+                            <p class="class-text" id="count">Please keep your face to the center of the frame and don't move</p>
+                            <p class="card-text">click login if you are already registered otherwise click sign-up to register your face</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    </div>
+
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
+        crossorigin="anonymous"></script>
+        <script src="../static/main.js"></script>
+        <script src="{{ url_for('static',filename='app.js') }}"></script>
+</body>
+
+</html> -->
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Video Form</title>
+    <!-- Add Bootstrap CSS -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
+</head>
+
+<body>
+    <div class="container">
+        <div class="d-flex row justify-content-center">
+            <div class="col-md-6">
+                <form action="{{url_for('login')}}" method="post">
+                    <h1 class="text-center">Login</h1>
+                    <div class="embed-responsive rounded embed-responsive-16by9">
+                        <video autoplay="true" id="videoElement" class="embed-responsive-item"></video>
+                        <canvas id="canvas" width="400" height="300" class="d-none"></canvas>
+                    </div>
+                    <div class="form-group mt-3">
+                        <label id="res">{{name}}</label>
+                        <input type="text" class="form-control" id="inputText" placeholder="password">
+                    </div>
+                    <button type="submit" class="btn rounded center btn-primary" onclick="home()">Submit</button>
+                </form>
+            </div>
+        </div>
+    </div>
+
+    <!-- Add Bootstrap JS -->
+    <script src="../static/login.js"></script>
+    <script src="{{ url_for('static',filename='login.js') }}"></script>
+    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
+</body>
+
+</html>

templates/sign.html

@@ -0,0 +1,103 @@
+<!-- <!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Startup</title>
+    <script src="https://cdn.socket.io/4.5.4/socket.io.min.js"
+    crossorigin="anonymous"></script>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
+    <link rel="stylesheet" href="../static/styles.css">
+</head>
+
+<body onload="start_camera()">
+    <nav class="navbar bg-light bg-body-tertiary border-bottom">
+        <div class="container-fluid">
+            <a class="navbar-brand">Navbar</a>
+            <form class="d-flex" role="search">
+                <button class="btn mr-5 btn-outline-success" type="submit">Login</button>
+                <button class="btn btn-outline-danger" type="submit" onclick="signup()">Sign up</button>
+            </form>
+        </div>
+    </nav>
+    <div class="container mt-5 ">
+        <div class="col shadow min-vh-75 h-75 p-3 rounded aling-self-center bg-dark">
+            <div class="row">
+                <div class="col">
+                    <div class="card rounded" style="width: 18rem;">
+                        <div class="card-body">
+                            <h5 class="card-title">face identification login</h5>
+                            <p class="card-text">this system uses facial land marks to identify user and further login
+                                just using the facial identification.</p>
+                                <button type="button" class="btn btn-primary" id="start">Start Camera</button>
+                                
+                                <button type="button" class="btn btn-danger" onclick="stop_camera()">Stop Camera</button>
+                                <button type="button" class="btn btn-outline-danger" onclick="login()">Login</button>
+                        </div>
+                    </div>
+                </div>
+                <div class="col">
+                    <div class="card rounded" style="width: 18rem;">
+                        <video autoplay="true" id="videoElement" class="card-img-top"></video>
+                        <canvas id="canvas" width="400" height="300" class="d-none"></canvas>
+                        <div class="card-body">
+                            <p class="class-text" id="count">Please keep your face to the center of the frame and don't move</p>
+                            <p class="card-text">click login if you are already registered otherwise click sign-up to register your face</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    </div>
+
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
+        crossorigin="anonymous"></script>
+        <script src="../static/main.js"></script>
+        <script src="{{ url_for('static',filename='app.js') }}"></script>
+</body>
+
+</html> -->
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Video Form</title>
+    <!-- Add Bootstrap CSS -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
+</head>
+
+<body>
+    <div class="container">
+        <div class="d-flex row justify-content-center">
+            <div class="col-md-6">
+                <form action="{{url_for('sign')}}" method="post">
+                    <h1 class="text-center">Sign up</h1>
+                    <div class="embed-responsive rounded embed-responsive-16by9">
+                        <video autoplay="true" id="videoElement" class="embed-responsive-item"></video>
+                        <canvas id="canvas" width="400" height="300" class="d-none"></canvas>
+                    </div>
+                    <div class="form-group mt-3">
+                        <input type="text" class="form-control" name="name" id="inputText" placeholder="name">
+                    </div>
+                    <button type="submit" class="btn rounded center btn-primary">Submit</button>
+                    <h1 id="data">{{data}}</h1>
+                </form>
+            </div>
+        </div>
+    </div>
+
+    <!-- Add Bootstrap JS -->
+    <script src="../static/login.js"></script>
+    <script src="{{ url_for('static',filename='login.js') }}"></script>
+    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
+</body>
+
+</html>