Spaces:
Runtime error
Runtime error
Upload 9 files
Browse files- aiml-iit-ropar-56bc742ad36f.json +13 -0
- app.py +118 -0
- requirements.txt +11 -0
- static/login.js +25 -0
- static/main.js +89 -0
- static/styles.css +6 -0
- templates/index.html +65 -0
- templates/login.html +103 -0
- templates/sign.html +103 -0
aiml-iit-ropar-56bc742ad36f.json
ADDED
@@ -0,0 +1,13 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
{
|
2 |
+
"type": "service_account",
|
3 |
+
"project_id": "aiml-iitropar",
|
4 |
+
"private_key_id": "d6769bb9a26fb454263106864284c6e1896717a8",
|
5 |
+
"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",
|
6 |
+
"client_email": "[email protected]",
|
7 |
+
"client_id": "102551427524879978157",
|
8 |
+
"auth_uri": "https://accounts.google.com/o/oauth2/auth",
|
9 |
+
"token_uri": "https://oauth2.googleapis.com/token",
|
10 |
+
"auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
|
11 |
+
"client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/firebase-adminsdk-m0gnj%40aiml-iitropar.iam.gserviceaccount.com",
|
12 |
+
"universe_domain": "googleapis.com"
|
13 |
+
}
|
app.py
ADDED
@@ -0,0 +1,118 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
from flask import Flask, render_template, jsonify, request
|
2 |
+
from flask_socketio import SocketIO, emit
|
3 |
+
from fire import firestore_client as fc
|
4 |
+
import dlib
|
5 |
+
import base64
|
6 |
+
import cv2
|
7 |
+
import numpy as np
|
8 |
+
import time
|
9 |
+
|
10 |
+
|
11 |
+
app = Flask(__name__)
|
12 |
+
app.config['SECRET_KEY'] = 'secret!'
|
13 |
+
socket = SocketIO(app, async_mode="eventlet")
|
14 |
+
img = None
|
15 |
+
|
16 |
+
hog_face_detector = dlib.get_frontal_face_detector()
|
17 |
+
|
18 |
+
|
19 |
+
def base64_to_img(base64_image):
|
20 |
+
|
21 |
+
# Remove the "data:image/jpeg;base64," prefix from the string
|
22 |
+
image_data = base64_image.split(',')[1]
|
23 |
+
|
24 |
+
# Decode the base64-encoded image data
|
25 |
+
decoded_data = base64.b64decode(image_data)
|
26 |
+
|
27 |
+
# Convert the binary data to a NumPy array
|
28 |
+
np_array = np.frombuffer(decoded_data, np.uint8)
|
29 |
+
|
30 |
+
# Decode the NumPy array to an OpenCV image
|
31 |
+
image = cv2.imdecode(np_array, cv2.IMREAD_COLOR)
|
32 |
+
|
33 |
+
return image
|
34 |
+
|
35 |
+
def prep_image(image,name,fc):
|
36 |
+
image = base64_to_img(image)
|
37 |
+
count = 0
|
38 |
+
while count < 10:
|
39 |
+
time.sleep(2)
|
40 |
+
face_hog = hog_face_detector(image,1)
|
41 |
+
for face in face_hog:
|
42 |
+
x = face.left()
|
43 |
+
y = face.top()
|
44 |
+
w = face.right() - x
|
45 |
+
h = face.bottom() - y
|
46 |
+
crop = image[y:y+h,x:x+w]
|
47 |
+
crop = cv2.resize(crop, (224, 224))
|
48 |
+
retval, buffer = cv2.imencode('.jpg', crop)
|
49 |
+
res = base64.b64encode(buffer)
|
50 |
+
doc= name+"_"+str(count)
|
51 |
+
print(res)
|
52 |
+
doc_ref = fc.collection("faces").document(str(doc))
|
53 |
+
doc_ref.set({
|
54 |
+
"img":res
|
55 |
+
})
|
56 |
+
count += 1
|
57 |
+
|
58 |
+
return(count)
|
59 |
+
|
60 |
+
@socket.on("connect")
|
61 |
+
def test_connect():
|
62 |
+
print("Connected")
|
63 |
+
emit("my response", {"data": "Connected"})
|
64 |
+
|
65 |
+
@socket.on("image")
|
66 |
+
def receive_image(image):
|
67 |
+
global img
|
68 |
+
img = image['image']
|
69 |
+
# Emit the received image as base64 string to the '/camera' route
|
70 |
+
socket.emit('forward_image', {'image': img}, namespace='/camera')
|
71 |
+
|
72 |
+
@app.route("/")
|
73 |
+
def home():
|
74 |
+
return render_template("index.html")
|
75 |
+
|
76 |
+
@app.route("/camera", methods=['POST',"GET"])
|
77 |
+
def camera():
|
78 |
+
if request.method == 'GET':
|
79 |
+
# image_data = request.form['image']
|
80 |
+
# Process the received image data as needed
|
81 |
+
|
82 |
+
# Return the processed image data
|
83 |
+
return jsonify({'image': img})
|
84 |
+
else:
|
85 |
+
return "Method Not Allowed", 405
|
86 |
+
|
87 |
+
@app.route("/login")
|
88 |
+
def login():
|
89 |
+
doc_ref = fc.collection("current_users").document('user')
|
90 |
+
doc = doc_ref.get()
|
91 |
+
if doc.exists:
|
92 |
+
doc = doc.to_dict()
|
93 |
+
else:
|
94 |
+
print("No such document!")
|
95 |
+
res = doc['name']
|
96 |
+
|
97 |
+
return render_template('login.html',name = res)
|
98 |
+
|
99 |
+
@app.route("/sign", methods=('GET', 'POST'))
|
100 |
+
def sign():
|
101 |
+
doc_ref = fc.collection("faces").document('users')
|
102 |
+
doc = doc_ref.get()
|
103 |
+
if doc.exists:
|
104 |
+
doc = doc.to_dict()
|
105 |
+
else:
|
106 |
+
print("No such document!")
|
107 |
+
res = doc['name']
|
108 |
+
result = "error"
|
109 |
+
|
110 |
+
if request.method == "POST":
|
111 |
+
name = request.form.get("name")
|
112 |
+
res.append(name)
|
113 |
+
result = prep_image(img,name,fc)
|
114 |
+
|
115 |
+
return render_template('sign.html',data = result)
|
116 |
+
|
117 |
+
if __name__ == '__main__':
|
118 |
+
socket.run(app, debug=True, port=8080)
|
requirements.txt
ADDED
@@ -0,0 +1,11 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
Flask-SocketIO
|
2 |
+
python-engineio
|
3 |
+
dlib
|
4 |
+
python-socketio
|
5 |
+
Flask
|
6 |
+
Werkzeug
|
7 |
+
opencv_python
|
8 |
+
numpy
|
9 |
+
gunicorn
|
10 |
+
eventlet
|
11 |
+
tensorflow
|
static/login.js
ADDED
@@ -0,0 +1,25 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
// Get the video element
|
2 |
+
var video = document.getElementById('videoElement');
|
3 |
+
|
4 |
+
// Check if the browser supports getUserMedia
|
5 |
+
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
|
6 |
+
// Access the webcam stream
|
7 |
+
navigator.mediaDevices.getUserMedia({ video: true })
|
8 |
+
.then(function(stream) {
|
9 |
+
// Set the video source to the webcam stream
|
10 |
+
video.srcObject = stream;
|
11 |
+
})
|
12 |
+
.catch(function(error) {
|
13 |
+
console.error('Error accessing the webcam:', error);
|
14 |
+
});
|
15 |
+
} else {
|
16 |
+
console.error('getUserMedia is not supported in this browser.');
|
17 |
+
}
|
18 |
+
|
19 |
+
function login(){
|
20 |
+
window.open('https://my.spline.design/untitled-051cda2896c04da7313ac239da48d293/')
|
21 |
+
}
|
22 |
+
var count = window.getElementById('data').innerHTML;
|
23 |
+
if (count==10){
|
24 |
+
window.open('https://my.spline.design/untitled-051cda2896c04da7313ac239da48d293/')
|
25 |
+
}
|
static/main.js
ADDED
@@ -0,0 +1,89 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
// establishing connection between client and server by getting the URL.
|
2 |
+
var socket = io.connect(window.location.protocol + '//' + document.domain + ':' + location.port, {
|
3 |
+
transports: ['websocket'],
|
4 |
+
path: '/socket.io'
|
5 |
+
});
|
6 |
+
|
7 |
+
// once connected, print out "Connected"
|
8 |
+
socket.on('connect', function () {
|
9 |
+
console.log("Connected...!", socket.connected)
|
10 |
+
});
|
11 |
+
|
12 |
+
// print results
|
13 |
+
var result = document.getElementById('count')
|
14 |
+
|
15 |
+
socket.on('result', function (count) {
|
16 |
+
result.innerHTML = count.count;
|
17 |
+
if (count.count === "Done") {
|
18 |
+
// Handle the "Done" message
|
19 |
+
stop_camera();
|
20 |
+
}
|
21 |
+
});
|
22 |
+
|
23 |
+
// global variables for video and output
|
24 |
+
var video = document.getElementById('videoElement');
|
25 |
+
var canvas = document.getElementById('canvas');
|
26 |
+
var context = canvas.getContext('2d');
|
27 |
+
var send_data;
|
28 |
+
|
29 |
+
// set video dimensions
|
30 |
+
video.width = 400;
|
31 |
+
video.height = 300;
|
32 |
+
|
33 |
+
// rate of sending image
|
34 |
+
const FPS = 10;
|
35 |
+
|
36 |
+
// function for sending the webcam input
|
37 |
+
function send() {
|
38 |
+
width = video.width;
|
39 |
+
height = video.height;
|
40 |
+
context.drawImage(video, 0, 0, width, height);
|
41 |
+
var data = canvas.toDataURL('image/jpeg', 0.5);
|
42 |
+
context.clearRect(0, 0, width, height);
|
43 |
+
socket.emit('image', {image: data});
|
44 |
+
}
|
45 |
+
|
46 |
+
var start = document.getElementById("start");
|
47 |
+
start.onclick = function () {
|
48 |
+
send_data = setInterval(send, 1000 / FPS);
|
49 |
+
}
|
50 |
+
|
51 |
+
// function to start webcam on client side
|
52 |
+
function start_camera() {
|
53 |
+
let devices = navigator.mediaDevices;
|
54 |
+
if (!devices || !devices.getUserMedia) {
|
55 |
+
console.log("getUserMedia() not supported.");
|
56 |
+
return;
|
57 |
+
}
|
58 |
+
devices.getUserMedia({
|
59 |
+
video: true
|
60 |
+
})
|
61 |
+
.then(function (vidstream) {
|
62 |
+
if ("srcObject" in video) {
|
63 |
+
video.srcObject = vidstream;
|
64 |
+
} else {
|
65 |
+
video.src = window.src = window.URL.createObjectURL(vidstream);
|
66 |
+
}
|
67 |
+
video.onloadeddata = function (e) {
|
68 |
+
video.play();
|
69 |
+
};
|
70 |
+
})
|
71 |
+
.catch(function (e) {
|
72 |
+
console.log(e.name + ": " + e.message);
|
73 |
+
});
|
74 |
+
}
|
75 |
+
|
76 |
+
// stopping camera input and sending data
|
77 |
+
function stop_camera() {
|
78 |
+
clearInterval(send_data);
|
79 |
+
socket.disconnect();
|
80 |
+
}
|
81 |
+
|
82 |
+
function login() {
|
83 |
+
window.open("/login","_blank")
|
84 |
+
}
|
85 |
+
|
86 |
+
function signup(){
|
87 |
+
window.open("/sign","_blank")
|
88 |
+
}
|
89 |
+
|
static/styles.css
ADDED
@@ -0,0 +1,6 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
.login{
|
2 |
+
margin-right: 10px;
|
3 |
+
}
|
4 |
+
body{
|
5 |
+
background-image: radial-gradient(circle at center, rgb(185, 147, 214) 24.00%,rgb(204, 187, 187) 100.00%);
|
6 |
+
}
|
templates/index.html
ADDED
@@ -0,0 +1,65 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<!doctype html>
|
2 |
+
<html lang="en">
|
3 |
+
|
4 |
+
<head>
|
5 |
+
<meta charset="utf-8">
|
6 |
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
7 |
+
<title>Startup</title>
|
8 |
+
<script src="https://cdn.socket.io/4.5.4/socket.io.min.js"
|
9 |
+
crossorigin="anonymous"></script>
|
10 |
+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
|
11 |
+
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
|
12 |
+
<link rel="stylesheet" href="../static/styles.css">
|
13 |
+
</head>
|
14 |
+
|
15 |
+
<body onload="start_camera()">
|
16 |
+
<nav class="navbar bg-light bg-body-tertiary border-bottom">
|
17 |
+
<div class="container-fluid">
|
18 |
+
<a class="navbar-brand">Navbar</a>
|
19 |
+
<form class="d-flex">
|
20 |
+
<button class="btn mr-5 btn-outline-success" type="submit" >Login</button>
|
21 |
+
<button class="btn btn-outline-danger" type="submit" onclick="signup()">Sign up</button>
|
22 |
+
</form>
|
23 |
+
</div>
|
24 |
+
</nav>
|
25 |
+
<div class="container mt-5 ">
|
26 |
+
<div class="col shadow min-vh-75 h-75 p-3 rounded aling-self-center bg-dark">
|
27 |
+
<div class="row">
|
28 |
+
<div class="col">
|
29 |
+
<div class="card rounded" style="width: 18rem;">
|
30 |
+
<div class="card-body">
|
31 |
+
<h5 class="card-title">face identification login</h5>
|
32 |
+
<p class="card-text">this system uses facial land marks to identify user and further login
|
33 |
+
just using the facial identification.</p>
|
34 |
+
<button type="button" class="btn btn-primary" id="start">Start Camera</button>
|
35 |
+
|
36 |
+
<button type="button" class="btn btn-danger" onclick="stop_camera()">Stop Camera</button>
|
37 |
+
<button type="button" class="btn btn-outline-danger" onclick="login()">Login</button>
|
38 |
+
</div>
|
39 |
+
</div>
|
40 |
+
</div>
|
41 |
+
<div class="col">
|
42 |
+
<div class="card rounded" style="width: 18rem;">
|
43 |
+
<video autoplay="true" id="videoElement" class="card-img-top"></video>
|
44 |
+
<canvas id="canvas" width="400" height="300" class="d-none"></canvas>
|
45 |
+
<div class="card-body">
|
46 |
+
<p class="class-text" id="count">Please keep your face to the center of the frame and don't move</p>
|
47 |
+
<p class="card-text">click login if you are already registered otherwise click sign-up to register your face</p>
|
48 |
+
</div>
|
49 |
+
</div>
|
50 |
+
</div>
|
51 |
+
</div>
|
52 |
+
</div>
|
53 |
+
</div>
|
54 |
+
|
55 |
+
</div>
|
56 |
+
|
57 |
+
|
58 |
+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
|
59 |
+
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
|
60 |
+
crossorigin="anonymous"></script>
|
61 |
+
<script src="../static/main.js"></script>
|
62 |
+
<script src="{{ url_for('static',filename='main.js') }}"></script>
|
63 |
+
</body>
|
64 |
+
|
65 |
+
</html>
|
templates/login.html
ADDED
@@ -0,0 +1,103 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<!-- <!doctype html>
|
2 |
+
<html lang="en">
|
3 |
+
|
4 |
+
<head>
|
5 |
+
<meta charset="utf-8">
|
6 |
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
7 |
+
<title>Startup</title>
|
8 |
+
<script src="https://cdn.socket.io/4.5.4/socket.io.min.js"
|
9 |
+
crossorigin="anonymous"></script>
|
10 |
+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
|
11 |
+
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
|
12 |
+
<link rel="stylesheet" href="../static/styles.css">
|
13 |
+
</head>
|
14 |
+
|
15 |
+
<body onload="start_camera()">
|
16 |
+
<nav class="navbar bg-light bg-body-tertiary border-bottom">
|
17 |
+
<div class="container-fluid">
|
18 |
+
<a class="navbar-brand">Navbar</a>
|
19 |
+
<form class="d-flex" role="search">
|
20 |
+
<button class="btn mr-5 btn-outline-success" type="submit">Login</button>
|
21 |
+
<button class="btn btn-outline-danger" type="submit" onclick="signup()">Sign up</button>
|
22 |
+
</form>
|
23 |
+
</div>
|
24 |
+
</nav>
|
25 |
+
<div class="container mt-5 ">
|
26 |
+
<div class="col shadow min-vh-75 h-75 p-3 rounded aling-self-center bg-dark">
|
27 |
+
<div class="row">
|
28 |
+
<div class="col">
|
29 |
+
<div class="card rounded" style="width: 18rem;">
|
30 |
+
<div class="card-body">
|
31 |
+
<h5 class="card-title">face identification login</h5>
|
32 |
+
<p class="card-text">this system uses facial land marks to identify user and further login
|
33 |
+
just using the facial identification.</p>
|
34 |
+
<button type="button" class="btn btn-primary" id="start">Start Camera</button>
|
35 |
+
|
36 |
+
<button type="button" class="btn btn-danger" onclick="stop_camera()">Stop Camera</button>
|
37 |
+
<button type="button" class="btn btn-outline-danger" onclick="login()">Login</button>
|
38 |
+
</div>
|
39 |
+
</div>
|
40 |
+
</div>
|
41 |
+
<div class="col">
|
42 |
+
<div class="card rounded" style="width: 18rem;">
|
43 |
+
<video autoplay="true" id="videoElement" class="card-img-top"></video>
|
44 |
+
<canvas id="canvas" width="400" height="300" class="d-none"></canvas>
|
45 |
+
<div class="card-body">
|
46 |
+
<p class="class-text" id="count">Please keep your face to the center of the frame and don't move</p>
|
47 |
+
<p class="card-text">click login if you are already registered otherwise click sign-up to register your face</p>
|
48 |
+
</div>
|
49 |
+
</div>
|
50 |
+
</div>
|
51 |
+
</div>
|
52 |
+
</div>
|
53 |
+
</div>
|
54 |
+
|
55 |
+
</div>
|
56 |
+
|
57 |
+
|
58 |
+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
|
59 |
+
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
|
60 |
+
crossorigin="anonymous"></script>
|
61 |
+
<script src="../static/main.js"></script>
|
62 |
+
<script src="{{ url_for('static',filename='app.js') }}"></script>
|
63 |
+
</body>
|
64 |
+
|
65 |
+
</html> -->
|
66 |
+
<!DOCTYPE html>
|
67 |
+
<html>
|
68 |
+
|
69 |
+
<head>
|
70 |
+
<title>Video Form</title>
|
71 |
+
<!-- Add Bootstrap CSS -->
|
72 |
+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
|
73 |
+
</head>
|
74 |
+
|
75 |
+
<body>
|
76 |
+
<div class="container">
|
77 |
+
<div class="d-flex row justify-content-center">
|
78 |
+
<div class="col-md-6">
|
79 |
+
<form action="{{url_for('login')}}" method="post">
|
80 |
+
<h1 class="text-center">Login</h1>
|
81 |
+
<div class="embed-responsive rounded embed-responsive-16by9">
|
82 |
+
<video autoplay="true" id="videoElement" class="embed-responsive-item"></video>
|
83 |
+
<canvas id="canvas" width="400" height="300" class="d-none"></canvas>
|
84 |
+
</div>
|
85 |
+
<div class="form-group mt-3">
|
86 |
+
<label id="res">{{name}}</label>
|
87 |
+
<input type="text" class="form-control" id="inputText" placeholder="password">
|
88 |
+
</div>
|
89 |
+
<button type="submit" class="btn rounded center btn-primary" onclick="home()">Submit</button>
|
90 |
+
</form>
|
91 |
+
</div>
|
92 |
+
</div>
|
93 |
+
</div>
|
94 |
+
|
95 |
+
<!-- Add Bootstrap JS -->
|
96 |
+
<script src="../static/login.js"></script>
|
97 |
+
<script src="{{ url_for('static',filename='login.js') }}"></script>
|
98 |
+
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
|
99 |
+
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
|
100 |
+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
|
101 |
+
</body>
|
102 |
+
|
103 |
+
</html>
|
templates/sign.html
ADDED
@@ -0,0 +1,103 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<!-- <!doctype html>
|
2 |
+
<html lang="en">
|
3 |
+
|
4 |
+
<head>
|
5 |
+
<meta charset="utf-8">
|
6 |
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
7 |
+
<title>Startup</title>
|
8 |
+
<script src="https://cdn.socket.io/4.5.4/socket.io.min.js"
|
9 |
+
crossorigin="anonymous"></script>
|
10 |
+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
|
11 |
+
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
|
12 |
+
<link rel="stylesheet" href="../static/styles.css">
|
13 |
+
</head>
|
14 |
+
|
15 |
+
<body onload="start_camera()">
|
16 |
+
<nav class="navbar bg-light bg-body-tertiary border-bottom">
|
17 |
+
<div class="container-fluid">
|
18 |
+
<a class="navbar-brand">Navbar</a>
|
19 |
+
<form class="d-flex" role="search">
|
20 |
+
<button class="btn mr-5 btn-outline-success" type="submit">Login</button>
|
21 |
+
<button class="btn btn-outline-danger" type="submit" onclick="signup()">Sign up</button>
|
22 |
+
</form>
|
23 |
+
</div>
|
24 |
+
</nav>
|
25 |
+
<div class="container mt-5 ">
|
26 |
+
<div class="col shadow min-vh-75 h-75 p-3 rounded aling-self-center bg-dark">
|
27 |
+
<div class="row">
|
28 |
+
<div class="col">
|
29 |
+
<div class="card rounded" style="width: 18rem;">
|
30 |
+
<div class="card-body">
|
31 |
+
<h5 class="card-title">face identification login</h5>
|
32 |
+
<p class="card-text">this system uses facial land marks to identify user and further login
|
33 |
+
just using the facial identification.</p>
|
34 |
+
<button type="button" class="btn btn-primary" id="start">Start Camera</button>
|
35 |
+
|
36 |
+
<button type="button" class="btn btn-danger" onclick="stop_camera()">Stop Camera</button>
|
37 |
+
<button type="button" class="btn btn-outline-danger" onclick="login()">Login</button>
|
38 |
+
</div>
|
39 |
+
</div>
|
40 |
+
</div>
|
41 |
+
<div class="col">
|
42 |
+
<div class="card rounded" style="width: 18rem;">
|
43 |
+
<video autoplay="true" id="videoElement" class="card-img-top"></video>
|
44 |
+
<canvas id="canvas" width="400" height="300" class="d-none"></canvas>
|
45 |
+
<div class="card-body">
|
46 |
+
<p class="class-text" id="count">Please keep your face to the center of the frame and don't move</p>
|
47 |
+
<p class="card-text">click login if you are already registered otherwise click sign-up to register your face</p>
|
48 |
+
</div>
|
49 |
+
</div>
|
50 |
+
</div>
|
51 |
+
</div>
|
52 |
+
</div>
|
53 |
+
</div>
|
54 |
+
|
55 |
+
</div>
|
56 |
+
|
57 |
+
|
58 |
+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
|
59 |
+
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
|
60 |
+
crossorigin="anonymous"></script>
|
61 |
+
<script src="../static/main.js"></script>
|
62 |
+
<script src="{{ url_for('static',filename='app.js') }}"></script>
|
63 |
+
</body>
|
64 |
+
|
65 |
+
</html> -->
|
66 |
+
<!DOCTYPE html>
|
67 |
+
<html>
|
68 |
+
|
69 |
+
<head>
|
70 |
+
<title>Video Form</title>
|
71 |
+
<!-- Add Bootstrap CSS -->
|
72 |
+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
|
73 |
+
</head>
|
74 |
+
|
75 |
+
<body>
|
76 |
+
<div class="container">
|
77 |
+
<div class="d-flex row justify-content-center">
|
78 |
+
<div class="col-md-6">
|
79 |
+
<form action="{{url_for('sign')}}" method="post">
|
80 |
+
<h1 class="text-center">Sign up</h1>
|
81 |
+
<div class="embed-responsive rounded embed-responsive-16by9">
|
82 |
+
<video autoplay="true" id="videoElement" class="embed-responsive-item"></video>
|
83 |
+
<canvas id="canvas" width="400" height="300" class="d-none"></canvas>
|
84 |
+
</div>
|
85 |
+
<div class="form-group mt-3">
|
86 |
+
<input type="text" class="form-control" name="name" id="inputText" placeholder="name">
|
87 |
+
</div>
|
88 |
+
<button type="submit" class="btn rounded center btn-primary">Submit</button>
|
89 |
+
<h1 id="data">{{data}}</h1>
|
90 |
+
</form>
|
91 |
+
</div>
|
92 |
+
</div>
|
93 |
+
</div>
|
94 |
+
|
95 |
+
<!-- Add Bootstrap JS -->
|
96 |
+
<script src="../static/login.js"></script>
|
97 |
+
<script src="{{ url_for('static',filename='login.js') }}"></script>
|
98 |
+
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
|
99 |
+
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
|
100 |
+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
|
101 |
+
</body>
|
102 |
+
|
103 |
+
</html>
|