face rec api with remote mysql 10mb server

.gitignore

@@ -0,0 +1,3 @@
+# *.h5
+myvenv/
+__pycache__/

Dockerfile

@@ -0,0 +1,29 @@
+FROM ubuntu
+
+
+RUN apt-get update && \
+    apt-get -y upgrade && \
+    apt-get install -y \
+    sudo
+
+
+RUN DEBIAN_FRONTEND=noninteractive apt-get -y install python3 pip vim mc wget curl 
+
+
+COPY . /app
+WORKDIR /app
+RUN pip install -r requirements.txt
+
+
+
+CMD python3 -c "print('Docker is more simple Deployment Tool')"
+
+RUN pwd
+RUN ls -l
+
+
+EXPOSE 7860
+
+
+
+CMD "flask run --host=0.0.0.0 --port=7860"

README.md

@@ -5,6 +5,7 @@ colorFrom: blue
 colorTo: blue
 sdk: docker
 pinned: false
+app_port: 7860
 ---
 
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app/__init__.py

@@ -0,0 +1,56 @@
+from flask import Flask,session
+from datetime import timedelta
+
+from app.face_detection import inference as fd
+from app.face_detection.helper import get_crops as fd_get_crops
+from app.face_recognition import inference as fr
+from app.face_recognition.aligner import aligner
+from app.face_recognition import helper as fr_helper
+
+
+
+face_detector=fd.face_detection("app/face_detection/Models/v1")
+face_detector.square_preprocessing=fd.square_pad()
+# face_recognizer=fr.face_recognition("app/face_recognition/feature_extractor.h5")
+face_recognizer=fr.face_recognition("app/face_recognition/Models/v1")
+aligner_obj=aligner(min_aligner_confidence=0.6)
+
+image_size=544
+p_thres=0.7
+nms_thres=0.3
+batch_size=1
+face_detector.set_mode(p_thres,nms_thres,mode="sized",image_size=image_size,batch_size=batch_size)
+
+
+# def create_app(config_class=Config):
+def create_app():
+    app=Flask(__name__)
+    # app.config.from_object(config_class)
+    # app.permanent_session_lifetime = timedelta(seconds=5)
+
+    @app.before_request
+    def make_session_permanent():
+        session.permanent = True
+
+    from app.main import bp as main_bp
+    app.register_blueprint(main_bp)
+
+    from app.demo import bp as demo_bp
+    app.register_blueprint(demo_bp,url_prefix="/demo")
+
+    from app.user import bp as user_bp
+    app.register_blueprint(user_bp,url_prefix='/user')
+
+    from app.admin import bp as admin_bp
+    app.register_blueprint(admin_bp,url_prefix='/admin')
+    
+    from app.api import bp as api_bp
+    app.register_blueprint(api_bp,url_prefix='/api')
+
+    app.secret_key='asdasr34r'
+
+    @app.route("/test/")
+    def test_page():
+        return "<h1>This is a test page</h1>"
+
+    return app

app/admin/__init__.py

@@ -0,0 +1,6 @@
+from flask import Blueprint
+
+bp=Blueprint("admin",__name__)
+
+
+from app.admin import routes

app/admin/routes.py

@@ -0,0 +1,136 @@
+from flask import render_template,request,jsonify,redirect,url_for,session
+import mysql.connector
+from werkzeug.security import generate_password_hash,check_password_hash
+from app.admin import bp
+from app.helper import generate_random_id,access_database_as_admin,create_user_table,drop_user_table
+
+
+@bp.route("/login/")
+def login_page():
+    return render_template("admin/login.html")
+
+@bp.route("/login/<message>")
+def login_page_message(message):
+    return render_template("admin/login.html",message_class='active',message=message)
+
+def get_random_unique_id():
+    dataBase = access_database_as_admin()
+    cursor=dataBase.cursor()
+    
+    while(True):
+        random_id=generate_random_id()
+        cursor.execute("select username from admins where session_token=%s",[random_id])
+        if cursor.fetchone() is None: break
+    dataBase.close()
+    return random_id
+    
+
+
+@bp.route("/authenticate/",methods=["POST"])
+def authenticate():
+    dataBase = access_database_as_admin()
+    cursor=dataBase.cursor()
+    cursor.execute("select password from admins where username=%s",[request.form['username']])
+    db_password_hash=cursor.fetchone()
+    dataBase.close()
+    
+    # print(db_password_hash)
+    if None==db_password_hash:
+        # username doesn't exists
+        return redirect(url_for('admin.login_page_message', message = "username doesn't exists"))
+
+    elif(check_password_hash(db_password_hash[0],request.form['password'])):
+        # set session and login
+        session.permanent = True
+        
+        session['admin_token']=get_random_unique_id()
+        
+        dataBase = access_database_as_admin()
+        cursor=dataBase.cursor()
+        cursor.execute("update admins set session_token=%s where username=%s",(session['admin_token'],request.form['username']))
+        dataBase.commit()
+        dataBase.close()
+        
+        return redirect("/admin/")
+    else:
+        # incorrect password 
+        return redirect(url_for('admin.login_page_message', message = "Incorrect password"))
+
+
+
+
+def is_auth(func):
+    def wrapper_func(*args,**kwargs):
+        if "admin_token" not in session:
+            return redirect(url_for('admin.login_page_message', message = "login in first"))
+        else:
+            dataBase = access_database_as_admin()
+            cursor=dataBase.cursor()
+            cursor.execute("select username from admins where session_token=%s",[session['admin_token']])
+            if cursor.fetchone() is None:
+                # no such session in db records
+                dataBase.close()
+                return redirect(url_for('admin.login_page_message', message = "no such session in db"))
+            else:
+                dataBase.close()
+                return func(*args,**kwargs)
+    # Renaming the function name:
+    wrapper_func.__name__ = func.__name__
+    return wrapper_func
+    
+    
+@bp.route("/")
+@is_auth
+def user_dashboard():
+    return render_template("admin/dashboard.html")
+
+@bp.route("/get_all_requests/", methods=["GET"])
+@is_auth
+def get_all_requests():
+    dataBase = access_database_as_admin()
+    cursor=dataBase.cursor()
+    cursor.execute("select username,request_message,access_key from users where access_key is null or access_key!='rejected';")
+    data=cursor.fetchall()
+    dataBase.close()
+    print(data)
+    data_dict=dict()
+    for one_row in data:
+        for i,column_name in enumerate(cursor.column_names):
+            data_dict[column_name]=[one_row[i]] if column_name not in data_dict else data_dict[column_name]+[one_row[i]]
+
+    print(data_dict)
+    return jsonify(data_dict)
+
+
+def get_random_unique_access_key():
+    dataBase = access_database_as_admin()
+    cursor=dataBase.cursor()
+    
+    while(True):
+        random_access_key=generate_random_id()
+        cursor.execute("select username from users where access_key=%s",[random_access_key])
+        if cursor.fetchone() is None: break
+    dataBase.close()
+    return random_access_key
+
+
+@bp.route("/update_requests/",methods=["POST"])
+@is_auth
+def update_requests():
+    print(request.form)
+    dataBase = access_database_as_admin()
+    cursor=dataBase.cursor()
+    if request.form['mode']=="accept":
+        cursor.execute("update users set access_key=%s where username=%s",[get_random_unique_access_key(),request.form['username']])
+        create_user_table(request.form['username']) # also add a table for this user
+
+    elif request.form['mode']=="reject":
+        cursor.execute("update users set access_key=%s where username=%s",["rejected",request.form['username']])
+        drop_user_table(request.form['username'])   # Drop table for this user
+
+    elif request.form['mode']=="revoke":
+        cursor.execute("update users set access_key=NULL where username=%s",[request.form['username']])
+        
+    dataBase.commit()
+    dataBase.close()
+    return jsonify({"message":"success"})

app/api/__init__.py

@@ -0,0 +1,5 @@
+from flask import Blueprint
+
+bp=Blueprint("api",__name__)
+
+from app.api import routes

app/api/routes.py

@@ -0,0 +1,208 @@
+from flask import request,jsonify,g
+from app.api import bp
+from app.helper import generate_random_id,access_database_as_admin,image_to_base64,base64_to_image,add_row_user_table,read_row_user_table,read_user_table,remove_person_from_user_table
+from PIL import ImageOps,Image
+import numpy as np
+
+from app import face_detector,face_recognizer,aligner_obj,fd_get_crops,fr_helper
+
+
+
+#################################################################################################################################################
+
+def set_image_size(settings,mode):
+    if mode=='small':
+        face_detector.image_size=[settings['small_size']]
+    elif mode=='large':
+        face_detector.image_size=[settings['large_size']]
+    elif mode=='both':
+        face_detector.image_size=[settings['small_size'],settings['large_size']]
+    else:
+        raise("Error")
+    
+
+
+
+def load_settings(username):
+    
+    dataBase = access_database_as_admin()
+    cursor=dataBase.cursor()
+    cursor.execute("select * from user_settings where username=%s",[username])
+    settings=cursor.fetchone()
+    columns=cursor.column_names
+
+    if settings is None:
+        # get default settings and insert a row in user_settings
+        cursor.execute("select p_thres,nms_thres,small_size,large_size,d_thres,a_thres,db_mode,fr_mode from default_settings where page='user'")
+        settings=cursor.fetchone()
+        columns=cursor.column_names
+        cursor.execute(f"insert into user_settings(username,{','.join(columns)}) values(%s,{','.join(map(lambda x:'%s',columns))})",(session['user']['username'],)+settings)
+    
+    
+    settings= dict(zip(columns, settings))
+    # Disconnecting from the server
+    dataBase.commit()
+    dataBase.close()
+
+    # set face detector settings
+    face_detector.p_thres=settings['p_thres']
+    face_detector.nms_thres=settings['nms_thres']
+    # we will set image_size inside routes
+
+    # set face aligner settings
+    aligner_obj.face_mesh_images.min_detection_confidence=settings['a_thres']
+
+    # set face recognizer settings
+    face_recognizer.thres=settings['d_thres']
+
+    return settings
+
+#################################################################################################################################################
+
+def is_auth(func):
+    def wrapper_func(*args,**kwargs):
+        if "access_key" not in request.form: return jsonify({"message":"send access key too"})
+        else:
+            dataBase = access_database_as_admin()
+            cursor=dataBase.cursor()
+            cursor.execute("select username from users where access_key=%s",[request.form["access_key"]])
+            data=cursor.fetchone()
+            if data is None:
+                dataBase.close()
+                return jsonify({"message":"no such access key in database"})
+            else:
+                dataBase.close()
+                return func(data[0],*args,**kwargs)
+    # Renaming the function name:
+    wrapper_func.__name__ = func.__name__
+    return wrapper_func
+
+
+@bp.route("/get_crops/",methods=["POST"])
+@is_auth
+def get_crops(username):
+
+    settings=load_settings(username)
+    set_image_size(settings,settings["db_mode"])
+    if "image_size" in request.form: face_detector.image_size=list(map(lambda x:int(x),request.form["image_size"].split(",")))
+    if "thres" in request.form: face_recognizer.thres=request.form["thres"]
+    print(face_detector.image_size)
+
+    file = request.files['image']
+    
+    image=Image.open(file.stream).convert("RGB")
+    image = ImageOps.exif_transpose(image)
+    image=np.array(image)
+    print(image.shape)
+
+    image,objs_found=face_detector.predict(image)
+    print(objs_found)
+      
+    all_aligned_crops=fd_get_crops(image,objs_found,aligner_obj,resize=(face_recognizer.model_config.input_size,face_recognizer.model_config.input_size))
+    all_aligned_crops_base64=[]
+
+    for i,aligned_crop in enumerate(all_aligned_crops):
+        all_aligned_crops_base64.append(image_to_base64(aligned_crop))
+
+    return jsonify({"message":"success","crops":all_aligned_crops_base64})
+
+
+
+
+@bp.route("/add_person/",methods=["POST"])
+@is_auth
+def add_person(username):
+
+    # print(request.form)
+    json_data=request.get_json()
+    person_name=json_data['person_name']
+    remarks=json_data['remarks']
+    group_id=json_data["group_id"] if "group_id" in json_data else None
+    print(person_name)
+    all_remarks=[]
+    all_remarks_features=[]
+    for remark in remarks.keys():
+        all_img_features=[]
+        for img_base64 in remarks[remark]:
+            img=base64_to_image(img_base64)
+            # print(remark,img.shape)
+            
+            all_img_features.append(face_recognizer.feature_extractor.predict(img[None,:,:,::-1],verbose=0)[0])
+        all_img_features=np.array(all_img_features)
+        all_remarks_features.append(all_img_features.mean(axis=0))
+        all_remarks.append(remark)
+        
+    all_remarks_features=np.array(all_remarks_features)
+
+    print(all_remarks_features.shape)
+    print(all_remarks)
+    print(username)
+
+    add_row_user_table(username=username,person_id=person_name,face_vectors=all_remarks_features.astype("float64"),remarks=",".join(all_remarks),group_id=group_id)
+    read_row_user_table(username)
+    
+        
+    
+    return jsonify({"message":"success"})
+
+
+@bp.route("/remove_person/",methods=["POST"])
+@is_auth
+def remove_person(username):
+
+    print(username)
+    remove_person_from_user_table(username,request.get_json()["person_id"])
+
+    return jsonify({"message":"success"})
+    # return jsonify({"message":"success",'image':pred_img})
+
+
+@bp.route("/face_recognize/",methods=["POST"])
+@is_auth
+def face_recognition(username):
+
+    settings=load_settings(username)
+    set_image_size(settings,settings["fr_mode"])
+    if "image_size" in request.form: face_detector.image_size=list(map(lambda x:int(x),request.form["image_size"].split(",")))
+    if "d_thres" in request.form: face_recognizer.thres=request.form["d_thres"]
+    print(face_detector.image_size)
+
+    # print(request.form)
+    file = request.files['image']
+    
+    image=Image.open(file.stream).convert("RGB")
+    image = ImageOps.exif_transpose(image)
+    image=np.array(image)
+    print(image.shape)
+
+    print(username)
+    data=read_user_table(username) if "group_id" not in request.form else read_user_table(username,request.form["group_id"])
+    faces=data['person_id']
+    db_faces_features=data['face_vectors']
+
+    for i in range(len(faces)):
+        print(faces[i],":",db_faces_features[i].shape)
+    
+    # face_recognizer.set_face_db_and_mode(faces=faces,db_faces_features=db_faces_features,distance_mode="avg",recognition_mode="repeat")
+    face_recognizer.set_face_db_and_mode(faces=faces,db_faces_features=db_faces_features,distance_mode="best",recognition_mode="repeat")
+    img,objs_found=face_detector.predict(image)
+    h,w=img.shape[:2]
+    tree=fr_helper.objs_found_to_xml("test.jpg",w,h,objs_found)
+    tree=face_recognizer.predict(img,tree)
+    pred_img=fr_helper.show_pred_image(tree,img)
+    pred_img=image_to_base64(pred_img)
+    objs_found=fr_helper.xml_to_objs_found(tree) # everything is okay till here
+    # print(objs_found[0])
+    
+    objs_found=face_detector.square_preprocessing.rescale(objs_found)   #rescale coordinates to original image's resolution
+    # print(objs_found[0])
+
+    all_crops=fd_get_crops(image,objs_found)
+    all_crops_base64=[]
+
+    for i,aligned_crop in enumerate(all_crops):
+        all_crops_base64.append(image_to_base64(aligned_crop))
+    
+    person_ids=[obj_found['class'] for obj_found in objs_found]
+
+    return jsonify({"message":"success","pred_image":pred_img,"person_ids":person_ids,"crops":all_crops_base64,"objs_found":objs_found})

app/demo/__init__.py

@@ -0,0 +1,6 @@
+from flask import Blueprint
+
+bp=Blueprint("demo",__name__)
+
+
+from app.demo import routes

app/demo/routes.py

@@ -0,0 +1,207 @@
+from werkzeug.utils import secure_filename
+import cv2
+import numpy as np
+from PIL import Image
+import os
+from glob import glob
+import shutil
+import io
+import base64
+import uuid
+from flask import render_template,request,send_from_directory,session,jsonify,json
+from app import helper
+from PIL import ImageOps
+from app.helper import generate_random_id,access_database_as_admin,image_to_base64,base64_to_image,add_row_user_table,read_row_user_table,read_user_table,remove_person_from_user_table
+from app.demo import bp
+import copy
+
+
+
+
+
+from app import face_detector,face_recognizer,aligner_obj,fd_get_crops,fr_helper,fd,fr
+
+# @bp.before_app_first_request
+# def create_temp_path():
+#     if not os.path.exists(temp_path):os.mkdir(temp_path)
+
+# @bp.route(f"/{temp_path}/<subfolder>/<filename>")
+# def upload(filename,subfolder):
+#     return send_from_directory(temp_path+f"/{subfolder}/", filename)
+
+@bp.route("/")
+def index():
+    return render_template('demo/index.html')
+
+def load_settings(func):
+    def wrapper_func(*args,**kwargs):
+        # set face detector settings
+        face_detector.p_thres=session["demo"]['settings']['p_thres']
+        face_detector.nms_thres=session["demo"]['settings']['nms_thres']
+        # we will set image_size inside routes
+
+        # set face aligner settings
+        aligner_obj.face_mesh_images.min_detection_confidence=session["demo"]['settings']['a_thres']
+
+        # set face recognizer settings
+        face_recognizer.thres=session["demo"]['settings']['d_thres']
+        
+        return func(*args,**kwargs)
+    # Renaming the function name:
+    wrapper_func.__name__ = func.__name__
+    return wrapper_func
+
+def get_image_size(mode):
+    if mode=='small':
+        return [session["demo"]['settings']['small_size']]
+    elif mode=='large':
+        return [session["demo"]['settings']['large_size']]
+    elif mode=='both':
+        return [session["demo"]['settings']['small_size'],session["demo"]['settings']['large_size']]
+    else:
+        raise("Error")
+    
+
+@bp.route("/add_crops/",methods=["POST"])
+@load_settings
+def set_crops():
+    # set session
+    if not "demo_token" in session:
+        session["demo_token"]=helper.generate_random_id()
+
+    
+    # exit();
+    # cursor.execute("insert into demo_sessions",[request.form['username']])
+
+    print(request.form)
+    file = request.files['image']
+    print(file)
+    fname = secure_filename(file.filename)
+
+    image=Image.open(file.stream).convert("RGB")
+    image = ImageOps.exif_transpose(image)
+    image=np.array(image)
+    
+    # do your deep learning work
+    face_detector.image_size=get_image_size(session["demo"]['settings']['db_mode'])
+    print(face_detector.image_size)
+
+    image,objs_found=face_detector.predict(image)
+    print(face_detector.image_size)
+      
+    all_aligned_crops=fd_get_crops(image,objs_found,aligner_obj,resize=(face_recognizer.model_config.input_size,face_recognizer.model_config.input_size))
+    all_aligned_crops_base64=[]
+    all_aligned_crops_names=[]
+
+    for i,aligned_crop in enumerate(all_aligned_crops):
+        all_aligned_crops_base64.append(helper.image_to_base64(aligned_crop))
+
+    if (len(all_aligned_crops_base64)!=0):
+        image=fd.pred_image(image,objs_found)       
+    
+    img_base64=helper.image_to_base64(image)
+    print(img_base64[:10])
+    
+    return jsonify({"message":"successful","image":img_base64,"image_name":fname,"crops":all_aligned_crops_base64})
+
+
+@bp.route("/update_crops_labels/",methods=["POST"])
+@load_settings
+def update_crops_labels():
+    print(request.form.keys())
+    
+    imgs_base64=request.form['faces'].split(",")
+    print(len(imgs_base64))
+    all_img_features=[]
+    for img_base64 in imgs_base64:
+        img=cv2.resize(base64_to_image(img_base64),[face_recognizer.model_config.input_size,face_recognizer.model_config.input_size])
+        all_img_features.append(face_recognizer.feature_extractor.predict(img[None,...],verbose=0)[0])
+        all_img_features[-1]=all_img_features[-1].astype("float32").tobytes().decode("latin-1")
+    
+    print(all_img_features.__len__())    
+    # for decoding numpy array
+    # print(all_img_features[0])    
+    # print(np.frombuffer(all_img_features[0].encode("latin-1"),dtype="float32"))    
+
+    return jsonify({"message":"success","features":all_img_features})
+
+@bp.route("/face_recognition/",methods=["POST"])
+@load_settings
+def face_recognition():
+    
+    file = request.files['image']
+    # print(file)
+    
+    image=Image.open(file.stream).convert("RGB")
+    image = ImageOps.exif_transpose(image)
+    image=np.array(image)
+    db_images=json.loads(request.form['db_images'])
+    
+    db_faces_features=[]
+    names=[]
+    for name in db_images:
+        names.append(name)
+        person_features=[]
+        for decoded_features in db_images[name]:
+            person_features.append(np.frombuffer(decoded_features.encode("latin-1"),dtype="float32"))
+        person_features=np.array(person_features)
+        db_faces_features.append(person_features)
+     
+    for i in range(len(names)):
+        print(names[i],":",db_faces_features[i].shape)
+    
+    # face_recognizer.set_face_db_and_mode(faces=faces,db_faces_features=db_faces_features,distance_mode="avg",recognition_mode="repeat")
+    face_recognizer.set_face_db_and_mode(faces=names,db_faces_features=db_faces_features,distance_mode="best",recognition_mode="repeat")
+    
+    face_detector.image_size=get_image_size(session["demo"]['settings']['fr_mode'])
+    
+    img,objs_found=face_detector.predict(image)
+    h,w=img.shape[:2]
+    tree=fr_helper.objs_found_to_xml("test.jpg",w,h,objs_found)
+    tree=face_recognizer.predict(img,tree)
+    pred_img=fr_helper.show_pred_image(tree,img)
+    
+    pred_img=helper.image_to_base64(pred_img)
+
+    return jsonify({"message":"success",'image':pred_img})  
+
+
+@bp.route("/get_settings/",methods=['GET'])
+def get_settings():
+    session.permanent=True
+    if "demo" not in session:
+        dataBase = access_database_as_admin()
+        cursor=dataBase.cursor()
+        cursor.execute("select * from default_settings where page='demo'")
+
+        session["demo"]={'settings':dict()}
+        session["demo"]['settings']= dict(zip(cursor.column_names, cursor.fetchone()))
+        # Disconnecting from the server
+        dataBase.commit()
+        dataBase.close()
+
+    return session["demo"]['settings']
+
+@bp.route("/reset_settings/",methods=['GET'])
+def reset_settings():
+    del session["demo"]
+
+    return {"message":"success"}
+
+@bp.route("/update_settings/",methods=['POST'])
+def update_settings():
+    json_data=request.get_json()
+
+    if "demo" not in session:
+        session["demo"]={'settings':dict()}
+    # print(json_data)
+    session["demo"]['settings']['p_thres']=float(json_data['p_thres'])
+    session["demo"]['settings']['nms_thres']=float(json_data['nms_thres'])
+    session["demo"]['settings']['large_size']=int(json_data['large_size'])
+    session["demo"]['settings']['small_size']=int(json_data['small_size'])
+    session["demo"]['settings']['d_thres']=float(json_data['d_thres'])
+    session["demo"]['settings']['a_thres']=float(json_data['a_thres'])
+    session["demo"]['settings']['db_mode']=json_data['db_mode']
+    session["demo"]['settings']['fr_mode']=json_data['fr_mode']
+
+    return {"message":"success"}

app/face_detection/Models/v1/anchors.txt

@@ -0,0 +1,4 @@
+1.577280900000000097e+00 1.936586900000000000e+00
+8.381339999999999790e+00 1.007399999999999984e+01
+4.881808999999999621e+00 5.764687000000000339e+00
+2.773467000000000127e+00 3.284511999999999876e+00

app/face_detection/Models/v1/model.h5

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:90dd2a59c7acc25d967c9914a7a53362ed2229c56e3105f538e04388fce70390
+size 607092424

app/face_detection/config.py

@@ -0,0 +1,15 @@
+import numpy as np
+import tensorflow.keras.backend as K
+
+
+
+cell_size=32
+class_names=['face']
+class_colors={class_name:np.random.rand(3) for class_name in class_names}
+
+
+
+class_to_idx={class_name:i for i,class_name in enumerate(class_names)}
+idx_to_class={i:class_name for i,class_name in enumerate(class_names)}
+
+

app/face_detection/create_load_model.py

@@ -0,0 +1,254 @@
+import os
+import tensorflow as tf
+from tensorflow.keras import Model,layers
+from app.face_detection.config import class_names
+
+os.environ['CUDA_VISIBLE_DEVICES'] = '-1'
+# custom layer for reshaping last layer
+
+# custom layer for reshaping last layer
+
+class yolo_reshape(tf.keras.layers.Layer):
+  global num_anchors
+  def __init__(self, **kwargs):
+    super(yolo_reshape,self).__init__()
+    self.last_item=(5+len(class_names))
+  def call(self,output_layer):
+    shape = [tf.shape(output_layer)[k] for k in range(4)]
+#     print(shape)
+#     tf.print(shape)
+    return tf.reshape(output_layer,[shape[0],shape[1],shape[2],num_anchors,self.last_item])
+
+def create_model():
+    global num_anchors
+    def space_to_depth_x2(x):
+        return tf.nn.space_to_depth(x,block_size=2)
+
+    x_input=layers.Input(shape=(None,None,3))
+    x=layers.Lambda(lambda x:x/255.)(x_input)
+    x=layers.Conv2D(32,(3,3),strides=(1,1),padding='same',name='conv_1',use_bias=False)(x)
+    x=layers.BatchNormalization(name='norm_1')(x)
+    x=layers.LeakyReLU(alpha=0.1)(x)
+    x=layers.MaxPooling2D(pool_size=(2,2))(x)
+
+    x=layers.Conv2D(64,(3,3),strides=(1,1),padding='same',name='conv_2',use_bias=False)(x)
+    x=layers.BatchNormalization(name='norm_2')(x)
+    x=layers.LeakyReLU(alpha=0.1)(x)
+    x=layers.MaxPooling2D(pool_size=(2,2))(x)
+
+    x=layers.Conv2D(128,(3,3),strides=(1,1),padding='same',name='conv_3',use_bias=False)(x)
+    x=layers.BatchNormalization(name='norm_3')(x)
+    x=layers.LeakyReLU(alpha=0.1)(x)
+
+    x=layers.Conv2D(64,(1,1),strides=(1,1),padding='same',name='conv_4',use_bias=False)(x)
+    x=layers.BatchNormalization(name='norm_4')(x)
+    x=layers.LeakyReLU(alpha=0.1)(x)
+
+    x=layers.Conv2D(128,(3,3),strides=(1,1),padding='same',name='conv_5',use_bias=False)(x)
+    x=layers.BatchNormalization(name='norm_5')(x)
+    x=layers.LeakyReLU(alpha=0.1)(x)
+    x=layers.MaxPooling2D(pool_size=(2,2))(x)
+
+    x=layers.Conv2D(256,(3,3),strides=(1,1),padding='same',name='conv_6',use_bias=False)(x)
+    x=layers.BatchNormalization(name='norm_6')(x)
+    x=layers.LeakyReLU(alpha=0.1)(x)
+
+    x=layers.Conv2D(128,(1,1),strides=(1,1),padding='same',name='conv_7',use_bias=False)(x)
+    x=layers.BatchNormalization(name='norm_7')(x)
+    x=layers.LeakyReLU(alpha=0.1)(x)
+
+    x=layers.Conv2D(256,(3,3),strides=(1,1),padding='same',name='conv_8',use_bias=False)(x)
+    x=layers.BatchNormalization(name='norm_8')(x)
+    x=layers.LeakyReLU(alpha=0.1)(x)
+    x=layers.MaxPooling2D(pool_size=(2,2))(x)
+
+    x=layers.Conv2D(512,(3,3),strides=(1,1),padding='same',name='conv_9',use_bias=False)(x)
+    x=layers.BatchNormalization(name='norm_9')(x)
+    x=layers.LeakyReLU(alpha=0.1)(x)
+
+    x=layers.Conv2D(256,(1,1),strides=(1,1),padding='same',name='conv_10',use_bias=False)(x)
+    x=layers.BatchNormalization(name='norm_10')(x)
+    x=layers.LeakyReLU(alpha=0.1)(x)
+
+    x=layers.Conv2D(512,(3,3),strides=(1,1),padding='same',name='conv_11',use_bias=False)(x)
+    x=layers.BatchNormalization(name='norm_11')(x)
+    x=layers.LeakyReLU(alpha=0.1)(x)
+
+    x=layers.Conv2D(256,(1,1),strides=(1,1),padding='same',name='conv_12',use_bias=False)(x)
+    x=layers.BatchNormalization(name='norm_12')(x)
+    x=layers.LeakyReLU(alpha=0.1)(x)
+
+    x=layers.Conv2D(512,(3,3),strides=(1,1),padding='same',name='conv_13',use_bias=False)(x)
+    x=layers.BatchNormalization(name='norm_13')(x)
+    x=layers.LeakyReLU(alpha=0.1)(x)
+
+    skip_connection = x
+
+    x=layers.MaxPooling2D(pool_size=(2,2))(x)
+
+    x=layers.Conv2D(1024,(3,3),strides=(1,1),padding='same',name='conv_14',use_bias=False)(x)
+    x=layers.BatchNormalization(name='norm_14')(x)
+    x=layers.LeakyReLU(alpha=0.1)(x)
+
+    x=layers.Conv2D(512,(1,1),strides=(1,1),padding='same',name='conv_15',use_bias=False)(x)
+    x=layers.BatchNormalization(name='norm_15')(x)
+    x=layers.LeakyReLU(alpha=0.1)(x)
+
+    x=layers.Conv2D(1024,(3,3),strides=(1,1),padding='same',name='conv_16',use_bias=False)(x)
+    x=layers.BatchNormalization(name='norm_16')(x)
+    x=layers.LeakyReLU(alpha=0.1)(x)
+
+    x=layers.Conv2D(512,(1,1),strides=(1,1),padding='same',name='conv_17',use_bias=False)(x)
+    x=layers.BatchNormalization(name='norm_17')(x)
+    x=layers.LeakyReLU(alpha=0.1)(x)
+
+    x=layers.Conv2D(1024,(3,3),strides=(1,1),padding='same',name='conv_18',use_bias=False)(x)
+    x=layers.BatchNormalization(name='norm_18')(x)
+    x=layers.LeakyReLU(alpha=0.1)(x)
+
+    x=layers.Conv2D(1024,(3,3),strides=(1,1),padding='same',name='conv_19',use_bias=False)(x)
+    x=layers.BatchNormalization(name='norm_19')(x)
+    x=layers.LeakyReLU(alpha=0.1)(x)
+
+    x=layers.Conv2D(1024,(3,3),strides=(1,1),padding='same',name='conv_20',use_bias=False)(x)
+    x=layers.BatchNormalization(name='norm_20')(x)
+    x=layers.LeakyReLU(alpha=0.1)(x)
+
+    skip_connection=layers.Conv2D(64,(1,1),strides=(1,1),padding='same',name='conv_21',use_bias=False)(skip_connection)
+    skip_connection=layers.BatchNormalization(name='norm_21')(skip_connection)
+    skip_connection=layers.LeakyReLU(alpha=0.1)(skip_connection)
+    skip_connection=layers.Lambda(space_to_depth_x2)(skip_connection) # halfs the resolution and add more depth
+
+    x=layers.concatenate([skip_connection,x])
+    x=layers.Conv2D(1024,(3,3),strides=(1,1),padding='same',name='conv_22',use_bias=False)(x)
+    x=layers.BatchNormalization(name='norm_22')(x)
+    x=layers.LeakyReLU(alpha=0.1)(x)
+
+    x=layers.Conv2D((num_anchors*(5+len(class_names))),(1,1),strides=(1,1),padding='same',name='conv_23')(x)
+    out=yolo_reshape()(x)
+
+    model=Model(x_input,out,name='yolo_v2_model')
+    # model.summary()
+    return model
+
+def create_tiny_model():
+    global num_anchors
+
+    x_input=layers.Input(shape=(416,416,3))
+    x=layers.Lambda(lambda x:x/255.)(x_input)
+    x=layers.Conv2D(16,(3,3),strides=(1,1),padding='same',name='conv_1',use_bias=False)(x)
+    x=layers.BatchNormalization(name='norm_1')(x)
+    x=layers.LeakyReLU(alpha=0.1)(x)
+    x=layers.MaxPooling2D(pool_size=(2,2),strides=(2,2))(x)
+
+    x=layers.Conv2D(32,(3,3),strides=(1,1),padding='same',name='conv_2',use_bias=False)(x)
+    x=layers.BatchNormalization(name='norm_2')(x)
+    x=layers.LeakyReLU(alpha=0.1)(x)
+    x=layers.MaxPooling2D(pool_size=(2,2),strides=(2,2))(x)
+
+    x=layers.Conv2D(64,(3,3),strides=(1,1),padding='same',name='conv_3',use_bias=False)(x)
+    x=layers.BatchNormalization(name='norm_3')(x)
+    x=layers.LeakyReLU(alpha=0.1)(x)
+    x=layers.MaxPooling2D(pool_size=(2,2),strides=(2,2))(x)
+
+    x=layers.Conv2D(128,(3,3),strides=(1,1),padding='same',name='conv_4',use_bias=False)(x)
+    x=layers.BatchNormalization(name='norm_4')(x)
+    x=layers.LeakyReLU(alpha=0.1)(x)
+    x=layers.MaxPooling2D(pool_size=(2,2),strides=(2,2))(x)
+
+    x=layers.Conv2D(256,(3,3),strides=(1,1),padding='same',name='conv_5',use_bias=False)(x)
+    x=layers.BatchNormalization(name='norm_5')(x)
+    x=layers.LeakyReLU(alpha=0.1)(x)
+    x=layers.MaxPooling2D(pool_size=(2,2),strides=(2,2))(x)
+
+    x=layers.Conv2D(512,(3,3),strides=(1,1),padding='same',name='conv_6',use_bias=False)(x)
+    x=layers.BatchNormalization(name='norm_6')(x)
+    x=layers.LeakyReLU(alpha=0.1)(x)
+    # x=layers.MaxPooling2D(pool_size=(2,2),strides=(1,1))(x)
+
+    x=layers.Conv2D(1024,(3,3),strides=(1,1),padding='same',name='conv_7',use_bias=False)(x)
+    x=layers.BatchNormalization(name='norm_7')(x)
+    x=layers.LeakyReLU(alpha=0.1)(x)
+
+    
+    x=layers.Conv2D(1024,(3,3),strides=(1,1),padding='same',name='conv_8',use_bias=False)(x)
+    x=layers.BatchNormalization(name='norm_8')(x)
+    x=layers.LeakyReLU(alpha=0.1)(x)
+
+    x=layers.Conv2D((num_anchors*(5+len(class_names))),(1,1),strides=(1,1),padding='same',name='conv_9')(x)
+    out=yolo_reshape()(x)
+
+    model=Model(x_input,out,name='yolo_v2_tiny_model')
+    # model.summary()
+    return model
+
+def load_model(path):
+    # model=tf.keras.models.load_model(path,custom_objects={'yolo_dynamic_reshape':yolo_dynamic_reshape},compile=False)
+    model=create_model()
+    model.load_weights(path)
+    # model=tf.keras.models.load_model(path)
+    return model
+
+
+import struct
+
+def get_original_weights(model,path_to_weight = "./yolov2-voc.weights"):
+  global num_anchors
+  # path_to_weight = "./yolov2.weights"(trained on coco dataset (80 classes))
+  if "yolov2-voc.weights" in path_to_weight: offset=5;nb_conv = 23;
+  if "darknet19_448.conv.23" in path_to_weight: offset=4;nb_conv = 18;
+  if "yolov2-tiny-voc.weights" in path_to_weight: offset=4;nb_conv = 9;
+  print(offset,nb_conv)
+
+  class WeightReader:
+          def __init__(self, weight_file):
+            self.offset = offset # an offset of 5 as first 5 values are non weight values(they are weight header)(for yolov2-voc.weights)
+    #         self.all_weights = np.fromfile(weight_file, dtype='float32')
+            self.all_weights = open(weight_file,'rb')
+            weight_header=struct.unpack(f'{offset}i', self.all_weights.read(offset*4))
+            # print("weight Header(major, minor, revision, seen):",weight_header)
+                  
+          def read_bytes(self, size):
+            weights = struct.unpack('%df' % size, self.all_weights.read(size*4))
+            # print(weights)
+            # input("wait now forever")
+            return np.array(weights)
+                  
+  weight_reader = WeightReader(path_to_weight)
+  # print("all_weights = {}".format(np.fromfile(path_to_weight, dtype='float32').shape[0]-weight_reader.offset))
+
+  for i in range(1, nb_conv+1):
+    conv_layer = model.get_layer('conv_' + str(i))
+    
+    if i < nb_conv:
+      norm_layer = model.get_layer('norm_' + str(i))
+      
+      size = np.prod(norm_layer.get_weights()[0].shape)
+
+      beta  = weight_reader.read_bytes(size)
+      gamma = weight_reader.read_bytes(size)
+      mean  = weight_reader.read_bytes(size)
+      var   = weight_reader.read_bytes(size)
+
+      weights = norm_layer.set_weights([gamma, beta, mean, var])       
+            
+    if len(conv_layer.get_weights()) > 1:
+      bias   = weight_reader.read_bytes(np.prod(conv_layer.get_weights()[1].shape))
+      kernel = weight_reader.read_bytes(np.prod(conv_layer.get_weights()[0].shape))
+      kernel = kernel.reshape(list(reversed(conv_layer.get_weights()[0].shape)))
+      kernel = kernel.transpose([2,3,1,0])
+      # print(kernel.shape)
+      kernel=kernel.reshape([*kernel.shape[:-1],num_anchors,-1]) # reshape to this format so we change change position of p idx
+      idx=4 # in darknet each object was encoded as [x,y,w,h,p,c] but we use [p,x,y,w,h,c]
+      kernel=np.concatenate([kernel[...,idx:idx+1],kernel[...,:idx],kernel[...,idx+1:]],axis=-1)  # setting p to idx 0
+      # print(kernel.shape)
+      kernel=kernel.reshape([*kernel.shape[:-2],-1])
+      # print(kernel.shape)
+      conv_layer.set_weights([kernel, bias])
+    else:
+      kernel = weight_reader.read_bytes(np.prod(conv_layer.get_weights()[0].shape))
+      kernel = kernel.reshape(list(reversed(conv_layer.get_weights()[0].shape)))
+      kernel = kernel.transpose([2,3,1,0])
+      conv_layer.set_weights([kernel])
+
+  return model

app/face_detection/decode_yolo_v2.py

@@ -0,0 +1,108 @@
+import numpy as np
+import matplotlib.pyplot as plt
+from matplotlib.patches import Rectangle
+import copy
+import tensorflow.keras.backend as K
+import cv2
+from app.face_detection.config import cell_size,idx_to_class,class_to_idx,class_colors
+
+
+
+def get_objects(y_pred,p=0.5,decode_preds=True,idx=None):
+  global tf_anchors
+  output_size=y_pred.shape[1]
+  image_size=cell_size*output_size
+  
+  y_pred=copy.deepcopy(y_pred)
+  if decode_preds:
+    y_pred[...,0]=K.sigmoid(y_pred[...,0])
+    y_pred[...,3:5]=np.clip((K.exp(y_pred[...,3:5])*tf_anchors).numpy(),0,output_size)
+  # y_pred[...,3:5]=np.clip(y_pred[...,3:5],0,output_size)
+  objs_found=[]
+  idxs=np.where(y_pred[...,0]>=p)
+  if np.size(idxs):
+    for i,obj in enumerate(y_pred[idxs[0],idxs[1],idxs[2],:]):
+      # obj (p,x,y,w,h,c_1,c_2,c_3,c_4,c_5.......c_n)
+      if decode_preds:
+        obj[1:3]=K.sigmoid(obj[1:3]) # x,y
+    
+      prob=obj[0]
+      obj=obj[1:]
+      
+      obj[4]=np.argmax(obj[4:])
+      obj=obj[:5]      
+
+      obj[0]=idxs[1][i]+obj[0]  # center x
+      obj[1]=idxs[0][i]+obj[1]  # center y
+
+      obj[0]=np.clip(obj[0]-(obj[2]/2),0,output_size)  # xmin
+      obj[1]=np.clip(obj[1]-(obj[3]/2),0,output_size)  # ymin
+      
+      
+      obj_name=idx_to_class[obj[4]]
+      
+      
+      obj_details={'p':prob,'xywh':list(obj[:-1]/output_size),'class_idx':int(obj[4]),'class':obj_name}  # xywh are scaled 0 to 1
+      if idx is not None:obj_details['idx']=idx
+      objs_found.append(obj_details)
+  objs_found=sorted(objs_found,key=lambda x:x['p'],reverse=True)
+  return objs_found
+
+def list_get_iou(bboxes1, bboxes2):
+
+    bboxes1 = [bboxes1[0],bboxes1[1],bboxes1[0]+bboxes1[2],bboxes1[1]+bboxes1[3]]
+    bboxes2 = [bboxes2[0],bboxes2[1],bboxes2[0]+bboxes2[2],bboxes2[1]+bboxes2[3]]
+
+    xA = max(bboxes1[0], bboxes2[0])
+    yA = max(bboxes1[1], bboxes2[1])
+    xB = min(bboxes1[2], bboxes2[2])
+    yB = min(bboxes1[3], bboxes2[3])
+
+    intersection_area = max(0, xB - xA ) * max(0, yB - yA )
+
+    box1_area = (bboxes1[2] - bboxes1[0] ) * (bboxes1[3] - bboxes1[1] )
+    box2_area = (bboxes2[2] - bboxes2[0] ) * (bboxes2[3] - bboxes2[1] )
+
+    iou = intersection_area / float(box1_area + box2_area - intersection_area+1e-6)
+
+    return iou
+
+def nms(objs_found,iou_threshold=0.2):
+  objs_found=np.array(copy.deepcopy(objs_found))
+  best_boxes=[]
+  while len(objs_found)>0:
+    obj=objs_found[0]
+    objs_found=objs_found[1:]
+
+    delete_idx=[]
+    for b_idx,b in enumerate(objs_found):
+
+      if obj['class_idx']==b['class_idx']:
+        iou=list_get_iou(obj['xywh'],b['xywh'])
+        if iou>= iou_threshold:
+          delete_idx.append(b_idx)
+    objs_found=np.delete(objs_found,delete_idx)
+    best_boxes.append(obj)
+  return best_boxes
+
+def show_objects(img,objs_found,return_img=False):
+  plt.imshow(img)
+  for i in range(len(objs_found)):  
+    p=objs_found[i]['p']
+    obj=objs_found[i]['xywh']
+    obj_name=objs_found[i]['class']
+    plt.gca().add_patch(Rectangle((obj[0],obj[1]),(obj[2]),(obj[3]),linewidth=4,edgecolor=class_colors[obj_name],facecolor='none'))
+    plt.text(obj[0],obj[1],obj_name)
+
+
+
+def pred_image(img,objs_found,font_scale=2,thickness=4):
+  for i in range(len(objs_found)):  
+    p=objs_found[i]['p']
+    obj=np.array(objs_found[i]['xywh'])*img.shape[0]
+    obj_name=objs_found[i]['class']
+    
+    img=cv2.rectangle(img,(int(obj[0]),int(obj[1])),(int(obj[0]+obj[2]),int(obj[1]+obj[3])),(class_colors[obj_name]*255),thickness)
+    img=cv2.putText(img,obj_name,(int(obj[0]),int(obj[1])),cv2.FONT_HERSHEY_SIMPLEX,font_scale, (0,0,0), thickness, lineType=cv2.LINE_AA)
+    # draw_text(img, "world", font_scale=4, pos=(10, 20 + h), text_color_bg=(255, 0, 0))
+  return img

app/face_detection/helper.py

@@ -0,0 +1,24 @@
+import cv2
+import numpy as np
+
+
+def get_crops(img,objs_found,aligner=None,resize:tuple=None):
+    img_h,img_w,_=img.shape
+    all_crops=[]
+    for obj_found in objs_found:
+        xmin,ymin=obj_found['xywh'][0],obj_found['xywh'][1]
+        xmax,ymax=xmin+obj_found['xywh'][2],ymin+obj_found['xywh'][3]
+        # rescale them
+        xmin,ymin=int(xmin*img_w),int(ymin*img_h)
+        xmax,ymax=int(xmax*img_w),int(ymax*img_h)
+
+        crop=img[ymin:ymax,xmin:xmax]
+        if aligner is not None:
+            crop=aligner.align_image(crop)
+            if crop is None: continue
+        if resize is not None:
+            crop=cv2.resize(crop,resize)
+        all_crops.append(crop)
+    
+    return all_crops
+

app/face_detection/inference.py

@@ -0,0 +1,281 @@
+import cv2
+import numpy as np
+import matplotlib.pyplot as plt
+import math
+import copy
+
+
+
+
+def tiler(img,image_size,tiles=2,pad=0,):
+    # pad is 0 to 0.9%
+    h,w=img.shape[:2]
+
+    tile_h=(h//tiles)
+    tile_w=(w//tiles)
+    
+    pad=int(tile_h*pad)
+    
+    crops=[]
+    coordinates=[]
+    for i in range(tiles):
+        for j in range(tiles):
+            ymin=tile_h*i
+            xmin=tile_w*j
+        
+            if i!=0:ymin=ymin-pad
+            if j!=0:xmin=xmin-pad
+
+            ymax=min(ymin+tile_h+pad,h)
+            xmax=min(xmin+tile_w+pad,w)
+
+            # crops.append(img[ymin:ymax,xmin:xmax])
+            crops.append(cv2.resize(img[ymin:ymax,xmin:xmax],[image_size,image_size]))
+            coordinates.append((xmin,ymin,xmax,ymax))
+            # print(crops[-1].shape)
+    return coordinates,np.array(crops)
+    
+class square_crop:
+    def __call__(self,img):
+        h,w=img.shape[:2]
+        self.w_removed,self.h_removed=0,0
+        if w>h:
+            self.w_removed=(w-h)//2
+            img=img[:,self.w_removed:w-self.w_removed]
+        elif h>w:
+            self.h_removed=(h-w)//2
+            img=img[self.h_removed:h-self.h_removed,:]
+        
+        h,w=img.shape[:2]
+        self.w_removed,self.h_removed=self.w_removed/w,self.h_removed/h
+        return img
+    def rescale(self,objs_found):
+        raise NotImplementedError
+
+class square_pad:
+    def __call__(self,img,color=(0,0,0)):
+        h,w=img.shape[:2]
+        self.w_added,self.h_added=0,0
+        if h>w:
+            self.w_added=int((h-w)/2)
+            padding=(np.ones([h,self.w_added,3])*np.array(color)[None,None,:]).astype("uint8")
+            img=np.concatenate([padding,img,padding],axis=1)
+        elif w>h:
+            self.h_added=int((w-h)/2)
+            padding=(np.ones([self.h_added,w,3])*np.array(color)[None,None,:]).astype("uint8")
+            img=np.concatenate([padding,img,padding],axis=0)
+        h,w=img.shape[:2]
+        
+        self.w_added,self.h_added=self.w_added/w,self.h_added/h
+        
+        return img
+    def rescale(self,objs_found):
+        
+        for i in range(len(objs_found)):
+            objs_found[i]['xywh'][0]=(objs_found[i]['xywh'][0]-self.w_added)/(1-2*self.w_added)
+            objs_found[i]['xywh'][1]=(objs_found[i]['xywh'][1]-self.h_added)/(1-2*self.h_added)
+            objs_found[i]['xywh'][2]=(objs_found[i]['xywh'][2])/(1-2*self.w_added)
+            objs_found[i]['xywh'][3]=(objs_found[i]['xywh'][3])/(1-2*self.h_added)
+        return objs_found
+
+
+class face_detection:
+    def __init__(self,model_path):
+        ################### set num_anchors & tf_anchors ###################
+        anchor_boxes=np.loadtxt(model_path+"/anchors.txt")
+        num_anchors=anchor_boxes.shape[0]
+        tf_anchors=K.reshape(K.variable(anchor_boxes),[1, 1, 1, num_anchors, 2])
+        load_model_lib.num_anchors=num_anchors
+        decode_model_lib.tf_anchors=tf_anchors
+        ####################################################################
+        
+        self.model=load_model(model_path+"/model.h5")
+        
+        self.modes_available=["tiled","sized"]
+        self.square_preprocessing=square_crop
+
+    def invoke_model(self,img,p=0.2,iou_threshold=0.3,batch_size=4):
+        all_objs_found=[]
+        
+        for i in range(math.ceil(img.shape[0]/batch_size)):
+
+            y_pred=self.model.predict(img[int(i*batch_size):int((i+1)*batch_size)].astype('float32'),verbose=0)
+            # print(y_pred.shape)
+            
+            for i in range(y_pred.shape[0]):
+                objs_found=get_objects(y_pred[i],p=p)
+                objs_found=nms(objs_found,iou_threshold=iou_threshold)
+                all_objs_found.append(objs_found)
+        
+        return all_objs_found
+    def get_tiled_output(self,img,p_thres,nms_thres,tiles,pad,image_size,save_tiles=None,batch_size=4): 
+        # pad is 0 to 0.5%
+        # pad=0.05       
+        img=cv2.resize(img,[image_size*tiles,image_size*tiles])
+    
+        coordinates,crops=tiler(img,tiles=tiles,pad=pad,image_size=image_size)
+        
+        all_objs_found=self.invoke_model(crops,p_thres,nms_thres,batch_size)
+
+        if save_tiles:
+            fig=plt.figure(figsize=(3*tiles,3*tiles))
+            plt.axis("off")
+            plt.title(f"pad:{pad}")
+
+            for i in range(int(tiles*tiles)): 
+                fig.add_subplot(tiles,tiles,i+1)
+                plt.axis("off")
+                plt.imshow(pred_image(crops[i],all_objs_found[i]))
+            # plt.show(block=False)
+            plt.savefig(save_tiles+f"_{tiles}.jpg")
+            plt.close()
+        
+        all_objs_found_joined=[]
+        for i in range(int(tiles*tiles)): 
+            xmin,ymin,xmax,ymax=coordinates[i]
+            w,h=xmax-xmin,ymax-ymin
+            for j in range(all_objs_found[i].__len__()):
+                # all_objs_found[i][j]['xywh']=np.array(all_objs_found[i][j]['xywh'])/image_size
+                all_objs_found[i][j]['xywh']=np.array(all_objs_found[i][j]['xywh'])*w
+                all_objs_found[i][j]['xywh'][0]+=xmin
+                all_objs_found[i][j]['xywh'][1]+=ymin
+                all_objs_found[i][j]['xywh']=(all_objs_found[i][j]['xywh']/(image_size*tiles)).tolist()
+            all_objs_found_joined.extend(all_objs_found[i])
+
+        all_objs_found_joined=sorted(all_objs_found_joined,reverse=True,key=lambda x:x["p"]) # This was very important
+        all_objs_found_joined=nms(all_objs_found_joined,nms_thres)
+        
+
+        return all_objs_found_joined
+
+
+    def set_mode(self,p_thres,nms_thres,batch_size=4,mode="tiled",**kwargs):
+        # mode : tiled or sized
+        
+        self.p_thres=p_thres
+        self.nms_thres=nms_thres
+        self.batch_size=batch_size
+
+        if mode=="tiled":
+            try:
+                self.image_size=kwargs['image_size']
+                if "tiles" not in kwargs:
+                    self.tiles=[1]
+                    self.pad=0
+                else:
+                    self.tiles=kwargs['tiles'] if(type(kwargs['tiles'])==type(list([1])) or type(kwargs['tiles'])==type(np.zeros([]))) else [kwargs['tiles']]
+                    self.pad=kwargs['pad']
+            except:
+                
+                raise ValueError(f"Not all tiled mode parameters passed.")
+            
+            self.save_tiles=kwargs["save_tiles"] if ("save_tiles" in kwargs) else None
+            
+        elif mode=="sized":
+            try:
+                # self.image_size=kwargs['image_size']
+                self.image_size=kwargs['image_size'] if(type(kwargs['image_size'])==type(list([1])) or type(kwargs['image_size'])==type(np.zeros([]))) else [kwargs['image_size']]
+                self.batch_size=1
+            except:
+                raise ValueError(f"Not all Sized mode parameters passed.")
+        else:
+            raise ValueError(f"Unavailable mode={mode} \nmode can only be one of:{self.modes_available}")
+        
+        self.mode=mode
+        
+
+    def predict_once(self,img):
+        
+        if (type(img)==str):
+            img=cv2.cvtColor(cv2.imread(img),cv2.COLOR_BGR2RGB)
+        elif (type(img)!=type(np.zeros([]))):
+            raise TypeError(f"Inappropriate type of image={type(img)}")
+        
+        # if img.shape[0]!=img.shape[1]:  raise ValueError(f"The image should be squared")
+        
+    
+        if  not hasattr(self,'mode'): raise ValueError(f"First call set_mode function to set mode using one of the following mode :{self.modes_available}")
+
+        if self.mode=='tiled':
+            if type(self.tiles)==type(list([1])) or type(self.tiles)==type(np.zeros([])):   raise TypeError("use advanced_predict function for inference on multiple tiles")
+            objs_found=self.get_tiled_output(img,p_thres=self.p_thres,nms_thres=self.nms_thres,tiles=self.tiles,pad=self.pad,image_size=self.image_size,save_tiles=self.save_tiles)
+        elif self.mode=='sized':
+            if type(self.image_size)==type(list([1])) or type(self.image_size)==type(np.zeros([])):   raise TypeError("use advanced_predict function for inference on multiple sizes")
+            resized_img=cv2.resize(img,[self.image_size,self.image_size])
+            objs_found=self.invoke_model(resized_img[None,:,:,:],self.p_thres,self.nms_thres,batch_size=1)[0]
+
+        return img,objs_found
+
+    def predict(self,img):
+
+        if (type(img)==str):
+            img=cv2.cvtColor(cv2.imread(img),cv2.COLOR_BGR2RGB)
+        elif (type(img)!=type(np.zeros([]))):
+            raise TypeError(f"Inappropriate type of image={type(img)}")
+        
+        if img.shape[0]!=img.shape[1]:  img=self.square_preprocessing(img)
+
+        if  not hasattr(self,'mode'): raise ValueError(f"First call set_mode function to set mode using one of the following mode :{self.modes_available}")
+
+        if self.mode=="tiled":
+            all_objs_found=[]
+            all_tiles=copy.deepcopy(self.tiles)
+            for tiles in all_tiles:
+                self.tiles=tiles
+                _,objs_found=self.predict_once(img)
+                all_objs_found.extend(objs_found)
+            self.tiles=all_tiles
+
+        elif self.mode=="sized":
+            all_objs_found=[]
+            all_image_size=copy.deepcopy(self.image_size)
+            for image_size in all_image_size:
+                self.image_size=image_size
+                _,objs_found=self.predict_once(img)
+                all_objs_found.extend(objs_found)
+            self.image_size=all_image_size
+        all_objs_found=sorted(all_objs_found,reverse=True,key=lambda x:x["p"]) # This was very important
+        all_objs_found=nms(all_objs_found,self.nms_thres)
+
+        return img,all_objs_found
+
+
+
+
+
+if __name__=="__main__":
+    import create_load_model as load_model_lib
+    import decode_yolo_v2 as decode_model_lib
+    from create_load_model import *
+    from decode_yolo_v2 import *
+    
+
+    face_detector=face_detection("face_detection/Models/v1/")
+    
+    # test_img="C:\\Users\\Home\\Downloads\\WhatsApp Image 2023-01-04 at 6.58.40 PM.jpeg"
+    test_img="C:\\Users\\Home\\Downloads\\family-52.jpg"
+
+    p_thres=0.5
+    nms_thres=0.3
+    tiles=3
+    pad=0
+
+    # face_detector.set_mode(p_thres,nms_thres,mode="tiled",tiles=[1,2],pad=pad,image_size=416,save_tiles="tile")
+    # face_detector.set_mode(p_thres=p_thres,nms_thres=nms_thres,image_size=608)
+    # face_detector.set_mode(p_thres,nms_thres,mode="sized",image_size=256)
+    # face_detector.set_mode(p_thres,nms_thres,mode="sized",image_size=352)
+    # face_detector.set_mode(p_thres,nms_thres,mode="sized",image_size=608)
+    face_detector.set_mode(p_thres,nms_thres,mode="sized",image_size=1024)
+    # face_detector.set_mode(p_thres,nms_thres,mode="sized",image_size=[608,1024])
+    img,objs_found=face_detector.predict(test_img)
+    # img,objs_found=face_detector.advanced_predict(test_img)
+    pred_img=pred_image(img,objs_found)
+    plt.figure()
+    plt.imshow(pred_img)
+    plt.show()
+    # cv2.imwrite("test_output.jpg",pred_img[:,:,::-1])
+else:
+    import app.face_detection.create_load_model as load_model_lib
+    import app.face_detection.decode_yolo_v2 as decode_model_lib
+    from app.face_detection.create_load_model import *
+    from app.face_detection.decode_yolo_v2 import *

app/face_recognition/Models/v1/config.py

@@ -0,0 +1,3 @@
+input_size=224
+thres=0.5
+large_distance=10

app/face_recognition/Models/v1/model.h5

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

app/face_recognition/aligner.py

@@ -0,0 +1,80 @@
+import cv2
+import itertools
+import numpy as np
+import mediapipe as mp
+import matplotlib.pyplot as plt
+import PIL
+import os
+import shutil
+
+
+
+class aligner:
+    def __init__(self,min_aligner_confidence):        
+        mp_face_mesh = mp.solutions.face_mesh
+
+        self.face_mesh_images = mp_face_mesh.FaceMesh(static_image_mode=True, max_num_faces=1,
+                                                min_detection_confidence=min_aligner_confidence)
+
+        mp_drawing = mp.solutions.drawing_utils
+        mp_drawing_styles = mp.solutions.drawing_styles
+        LEFT_EYE_INDEXES = list(set(itertools.chain(*mp_face_mesh.FACEMESH_LEFT_EYE)))
+        RIGHT_EYE_INDEXES = list(set(itertools.chain(*mp_face_mesh.FACEMESH_RIGHT_EYE)))
+        
+        self.LEFT_EYE_INDEX=LEFT_EYE_INDEXES[7]  # eye point index
+        self.RIGHT_EYE_INDEX=RIGHT_EYE_INDEXES[4]  # eye point index
+
+    def align_image(self,img):
+        
+        # start work
+        face_mesh_results = self.face_mesh_images.process(img)
+        if face_mesh_results.multi_face_landmarks!=None:
+            face_landmarks=face_mesh_results.multi_face_landmarks[0]
+
+            h,w,_=img.shape
+
+            points=[]
+
+            
+            x_coord=int(np.clip(face_landmarks.landmark[self.LEFT_EYE_INDEX].x*w,0,w))
+            y_coord=int(np.clip(face_landmarks.landmark[self.LEFT_EYE_INDEX].y*h,0,h))
+            points.append((x_coord,y_coord))
+
+            
+            x_coord=int(np.clip(face_landmarks.landmark[self.RIGHT_EYE_INDEX].x*w,0,w))
+            y_coord=int(np.clip(face_landmarks.landmark[self.RIGHT_EYE_INDEX].y*h,0,h))
+            points.append((x_coord,y_coord))
+
+            p0=np.array(points[0],dtype='float64')
+            p1=np.array(points[1],dtype='float64')
+
+
+            h=abs(p0[1]-p1[1])
+            w=abs(p0[0]-p1[0])
+
+            theta=np.arctan(h/w)
+
+            angle=(theta * 180) / np.pi
+
+            def get_direction(p0,p1):
+                if p0[0]<p1[0]:
+                    if p0[1]<p1[1]:
+                        direction=1
+                    else:
+                        direction=-1
+                else:
+                    if p1[1]<p0[1]:
+                        direction=1
+                    else:
+                        direction=-1
+                return direction
+
+            direction=get_direction(p0,p1)
+            angle=direction*angle
+            # print("rotated anticlockwise by :",angle,"angle")
+            new_img = PIL.Image.fromarray(img)
+            new_img = new_img.rotate(angle)
+            
+            return np.array(new_img)
+        else:
+            return None

app/face_recognition/config.py

@@ -0,0 +1,4 @@
+min_aligner_confidence=0.6
+db_dir="aligned_crops"
+img_dir="images"
+save_dir="results"

app/face_recognition/helper.py

@@ -0,0 +1,115 @@
+import xml.etree.ElementTree as ET
+import numpy as np
+import cv2
+
+def show_pred_image(tree,img):
+    root=tree.getroot()
+
+    size=root.find('size')
+    w,h=int(size.find("width").text),int(size.find("height").text)
+    default_color=[220,255,0]
+    random_color=np.random.randn(3)*255
+
+    for obj in root.findall("object"):
+        bndbox=obj.find("bndbox")
+        classname=obj.find('name').text
+
+        xmin,ymin , xmax,ymax=int(bndbox.find('xmin').text),int(bndbox.find('ymin').text),int(bndbox.find('xmax').text),int(bndbox.find('ymax').text)
+
+        if classname=="face":
+            color=default_color  
+        else:
+            color=random_color
+            distance=obj.find("distance").text
+            classname+=f"({distance})"
+
+        img=cv2.rectangle(img,(xmin,ymin),(xmax,ymax),color,7)
+        img=cv2.putText(img,classname,(xmin,ymin),cv2.FONT_HERSHEY_SIMPLEX,2,color,thickness=5)
+    return img
+
+
+def xml_to_objs_found(tree):
+    root=tree.getroot()
+
+    size=root.find('size')
+    image_w,image_h=int(size.find("width").text),int(size.find("height").text)
+    
+    objs_found=[]
+    for obj in root.findall("object"):
+        obj_found=dict()
+        bndbox=obj.find("bndbox")
+        classname=obj.find('name').text
+        distance=float(obj.find('distance').text) if classname!="face" else None
+
+        xmin,ymin , xmax,ymax=int(bndbox.find('xmin').text),int(bndbox.find('ymin').text),int(bndbox.find('xmax').text),int(bndbox.find('ymax').text)
+        
+        x,y = xmin/image_w , ymin/image_h
+        w,h = (xmax-xmin)/image_w , (ymax-ymin)/image_h
+
+        obj_details={'xywh':[x,y,w,h],'class':classname,'distance':distance}
+        objs_found.append(obj_details)
+
+    return objs_found
+
+
+def objs_found_to_xml(test_img,w,h,objs_found):
+    root=ET.Element("annotation")
+
+    filename_tag=ET.Element("filename")
+    filename_tag.text=test_img
+    root.append(filename_tag)
+    path_tag=ET.Element("path")
+    path_tag.text="./"+test_img
+    root.append(path_tag)
+
+
+    size_tag=ET.Element("size")
+    # w,h defined above
+    # print(w,h)
+    width_tag=ET.Element("width")
+    width_tag.text=str(w)
+    height_tag=ET.Element("height")
+    height_tag.text=str(h)
+    depth_tag=ET.Element("depth")
+    depth_tag.text="3"
+
+    size_tag.append(width_tag)
+    size_tag.append(height_tag)
+    size_tag.append(depth_tag)
+    root.append(size_tag)
+
+    # add all objects
+    for obj_found in objs_found:
+        obj_found['xywh']=np.array(obj_found['xywh'])*w
+
+        obj_tag=ET.Element("object")
+        name_tag=ET.Element("name")
+        name_tag.text=obj_found['class']
+        obj_tag.append(name_tag)
+
+        bndbox_tag=ET.Element("bndbox")
+        xmin_tag=ET.Element("xmin")
+        xmin_tag.text=str(int(obj_found['xywh'][0]))
+        ymin_tag=ET.Element("ymin")
+        ymin_tag.text=str(int(obj_found['xywh'][1]))
+        xmax_tag=ET.Element("xmax")
+        xmax_tag.text=str(int(obj_found['xywh'][0]+obj_found['xywh'][2]))
+        ymax_tag=ET.Element("ymax")
+        ymax_tag.text=str(int(obj_found['xywh'][1]+obj_found['xywh'][3]))
+
+        obj_found['xywh']=np.array(obj_found['xywh'])/w
+
+        bndbox_tag.append(xmin_tag)
+        bndbox_tag.append(ymin_tag)
+        bndbox_tag.append(xmax_tag)
+        bndbox_tag.append(ymax_tag)
+
+        obj_tag.append(bndbox_tag)
+        root.append(obj_tag)
+        
+    xml=ET.ElementTree(root)
+
+    # with open(xml_file_path,"wb") as f:
+    #     xml.write(f)
+
+    return xml

app/face_recognition/inference.py

@@ -0,0 +1,211 @@
+import PIL
+from PIL import ImageOps
+import xml.etree.ElementTree as ET
+import shutil
+import os
+import numpy as np
+from glob import glob
+import tensorflow as tf
+from tensorflow.keras import backend as K
+import cv2
+import matplotlib.pyplot as plt
+import importlib
+
+
+
+from app.face_recognition import config
+from app.face_recognition.aligner import  aligner
+
+
+
+class face_recognition:
+  def __init__(self,model_path,thres=None,min_aligner_confidence=None):
+    config_file_path='.'.join(model_path.split("/"))+".config"
+    # print(config_file_path)
+    self.model_config= importlib.import_module(config_file_path)
+    # print(self.model_config)
+    self.thres=thres if thres is not None else self.model_config.thres
+    self.aligner=aligner(min_aligner_confidence)  if min_aligner_confidence is not None else aligner(config.min_aligner_confidence)
+    self.feature_extractor=tf.keras.models.load_model(model_path+"/model.h5",compile=False)
+    
+    
+
+  def euclidean_distance(self,vectors):
+    squared_sum=np.sum(np.square(vectors[0]-vectors[1]),axis=-1,keepdims=True)
+    return np.sqrt(np.maximum(squared_sum,1e-7))
+
+
+
+  def calculate_distance(self,crop_img,db_faces_features,mode='avg'):
+    """
+    mode= 'avg' or 'best'
+    """
+    if mode not in ['avg','best']:  raise ValueError(f"Unknown mode:{mode} \nMode should be one of these:{['avg','best']}")
+    crop_img_features=self.feature_extractor.predict(crop_img[None,:,:,:],verbose=0)
+    all_distances=[] # distance of this particular crop with all faces in database
+    for face_idx in range(len(self.faces)):
+      if mode=='avg':
+        db_face_features=db_faces_features[face_idx].mean(axis=0,keepdims=True) # avg method
+        new_crop_img_features=crop_img_features.copy()
+      else:
+        db_face_features=db_faces_features[face_idx] # best method
+        new_crop_img_features=np.tile(crop_img_features,[db_face_features.shape[0],1])
+      try:
+        assert(db_face_features.shape==new_crop_img_features.shape)
+      except:
+        raise AssertionError(f"db_face_features shape{db_face_features.shape} does not match crop_img_features shape{new_crop_img_features.shape}")
+      
+      distance=np.min(self.euclidean_distance([db_face_features,new_crop_img_features]),axis=0)[0]
+      
+      if distance<=self.thres:
+        all_distances.append(distance) # obj distance wrt to all faces in database
+      else:
+        all_distances.append(self.model_config.large_distance) # not the person garruntied
+    return all_distances
+
+
+
+  def repeat_allowed_face_recognition(self,distance_dict):
+    faceidx_to_obj_dict=dict()
+    for obj in distance_dict.keys():
+      distances=np.array(distance_dict[obj])
+      min_distance,min_distance_idx = distances.min(),distances.argmin()
+      if min_distance<=self.thres:
+        obj.find('name').text = self.faces[min_distance_idx]
+        distance_tag=ET.Element("distance")
+        distance_tag.text="{:.2f}".format(min_distance)
+        obj.append(distance_tag)
+    return faceidx_to_obj_dict
+
+
+  def assign_face_label(self,obj):
+      
+      # find min and argmin
+      min_distance,min_distance_idx = self.distance_dict[obj].min(),self.distance_dict[obj].argmin()
+      # base condition
+      if min_distance>=self.thres:
+        # print("end");
+        return;
+      if min_distance_idx not in self.faceidx_to_obj_dict:
+        self.faceidx_to_obj_dict[min_distance_idx]=(obj,min_distance)  # stores obj and distance
+      else:
+
+        if(min_distance>self.faceidx_to_obj_dict[min_distance_idx][1]):
+          self.distance_dict[obj][min_distance_idx]=self.model_config.large_distance
+          self.assign_face_label(obj)
+        else:
+          temp_obj,temp_min_distance=self.faceidx_to_obj_dict[min_distance_idx]
+          self.faceidx_to_obj_dict[min_distance_idx]=(obj,min_distance)  # stores obj and distance
+          self.distance_dict[temp_obj][min_distance_idx]=self.model_config.large_distance
+          self.assign_face_label(temp_obj)
+
+
+  def no_repeat_allowed_face_recognition(self,distance_dict):
+    
+    self.faceidx_to_obj_dict=dict()
+    for obj in distance_dict.keys():
+      self.assign_face_label(obj)
+      
+    for idx,(obj,distance) in self.faceidx_to_obj_dict.items():
+      obj.find('name').text = self.faces[idx]
+      distance_tag=ET.Element("distance")
+      distance_tag.text="{:.2f}".format(distance)
+      obj.append(distance_tag)
+      # print(obj.find("distance").text)
+    
+    return self.faceidx_to_obj_dict
+    
+
+  def forward_pass(self,img,tree,mode="repeat"):
+      '''mode : "repeat" or "no-repeat" '''
+      root=tree.getroot()
+      self.distance_dict=dict()
+      
+      size=root.find('size')
+      w,h=int(size.find("width").text),int(size.find("height").text)
+      
+      for i,obj in enumerate(root.findall("object")):
+        bndbox=obj.find("bndbox")
+        
+        xmin,ymin , xmax,ymax=int(bndbox.find('xmin').text),int(bndbox.find('ymin').text),int(bndbox.find('xmax').text),int(bndbox.find('ymax').text)
+
+        crop_img=img[ymin:ymax,xmin:xmax]
+        crop_img=cv2.resize(crop_img,[self.model_config.input_size,self.model_config.input_size])
+        crop_img=self.aligner.align_image(crop_img)
+        
+        
+        if crop_img is not None:
+          self.distance_dict[obj]=np.array(self.calculate_distance(crop_img,self.db_faces_features,mode=self.distance_mode))
+
+      # print(distance_dict)
+
+      if mode=="repeat":
+        faceidx_to_obj_dict=self.repeat_allowed_face_recognition(self.distance_dict)
+      elif mode=="no-repeat":
+        faceidx_to_obj_dict=self.no_repeat_allowed_face_recognition(self.distance_dict)
+      return tree
+      
+  def predict(self,img,tree):
+    if (not hasattr(self,"distance_mode")) or (not hasattr(self,"recognition_mode")): raise ValueError(f"Call set_face_db_and_mode method first!")
+    tree=self.forward_pass(img,tree,mode=self.recognition_mode)
+    return tree
+
+  def set_face_db_and_mode(self,faces,db_faces_features,distance_mode="avg",recognition_mode="repeat"):
+
+    if distance_mode not in ['avg','best']:  raise ValueError(f"Unknown mode:{distance_mode} \nMode should be one of these:{['avg','best']}")
+    if recognition_mode not in ['repeat','no-repeat']:  raise ValueError(f"Unknown mode:{recognition_mode} \nMode should be one of these:{['repeat','no-repeat']}")
+    self.distance_mode=distance_mode
+    self.recognition_mode=recognition_mode
+
+    self.faces=faces
+    self.db_faces_features=db_faces_features
+
+# print(face_features)
+# for xml_file in ["/content/images - Copy/IMG20221124131734.xml"]:
+
+if __name__=="__main__":
+  
+  from helper import *
+
+  img_dir=config.img_dir
+  save_dir=config.save_dir
+
+  
+
+  _,faces,_=next(os.walk(config.db_dir))
+  db_faces_features=[np.loadtxt(f"{config.db_dir}/{face_dir}/features.npy",ndmin=2) for face_dir in faces]
+
+  for i in range(len(faces)):
+    print(faces[i],":",db_faces_features[i].shape)
+
+
+  if os.path.exists(save_dir):shutil.rmtree(save_dir)
+  os.mkdir(save_dir)
+
+
+  fr=face_recognition("face_recognition/Models/v1")
+  # fr=face_recognition(thres=0.3)
+  # fr.set_face_db_and_mode(faces,db_faces_features,distance_mode="best",recognition_mode="repeat")
+  fr.set_face_db_and_mode(faces,db_faces_features,distance_mode="best",recognition_mode="no-repeat")
+
+  for xml_file in glob(f"{img_dir}/*.xml"):
+    tree=ET.parse(xml_file)
+    root=tree.getroot()
+    img_name=img_dir+'/'+root.find("filename").text
+    img=PIL.Image.open(img_name).convert("RGB")
+    img = ImageOps.exif_transpose(img)
+    img=np.array(img)
+    
+    tree=fr.predict(img,tree)
+
+    img=show_pred_image(tree,img)
+    # plot examples
+    # plt.figure(figsize=(10,10))
+    # plt.axis("off")
+    # plt.title("Labeled images")
+    # plt.imshow(img)
+    # plt.show()
+    print(xml_to_objs_found(tree))
+
+    cv2.imwrite(save_dir+"/"+root.find("filename").text,cv2.cvtColor(img,cv2.COLOR_RGB2BGR))
+

app/face_recognition/setup_db_features.py

@@ -0,0 +1,28 @@
+import tensorflow as tf
+from face_recognition import config
+import cv2
+from glob import glob
+import os
+import numpy as np
+
+feature_extractor=tf.keras.models.load_model("face_recognition/feature_extractor.h5",compile=False)
+# feature_extractor.summary()
+
+extensions=['.jpg','.jpeg','.png','.svg','.webp']
+
+db_dir=config.db_dir
+_,sub_folders,_=next(os.walk(db_dir))
+print(sub_folders)
+for sub_folder in sub_folders:
+    image_paths=[]
+    [image_paths.extend(glob(db_dir+"\\"+sub_folder+"\\*"+extension)) for extension in extensions]
+    
+    all_img_features=[]
+    for image_path in image_paths:
+        print(image_path)
+        img=cv2.resize(cv2.imread(image_path),[config.input_size,config.input_size])
+        all_img_features.append(feature_extractor.predict(img[None,:,:,::-1],verbose=0)[0])
+    
+    np.savetxt(db_dir+"\\"+sub_folder+"\\features.npy",all_img_features)
+    
+# "aligned_all"

app/face_recognition/split_model.py

@@ -0,0 +1,12 @@
+import tensorflow as tf
+from tensorflow.keras import backend as K
+from tensorflow.keras import Model,layers
+
+
+model=tf.keras.models.load_model("face_recognization_model.h5",compile=False)
+# model.summary()
+
+
+feature_extractor=Model(model.layers[0].input,model.layers[2](model.layers[0].input),name='feature_extractor')
+feature_extractor.summary()
+feature_extractor.save("feature_extractor.h5")

app/helper.py

@@ -0,0 +1,140 @@
+import io
+import base64
+import uuid
+from PIL import Image
+import mysql.connector
+
+def generate_random_id():
+    return  str(uuid.uuid1())
+
+def image_to_base64(img):
+        img=Image.fromarray(img[:,:,:3])
+        rawBytes=io.BytesIO()
+        img.save(rawBytes,"JPEG")
+        rawBytes.seek(0)
+        img_base64=str(base64.b64encode(rawBytes.read()))
+        return img_base64
+
+def base64_to_image(img_base64):
+        # Assuming base64_str is the string value without 'data:image/jpeg;base64,'
+        img = Image.open(io.BytesIO(base64.decodebytes(bytes(img_base64, "utf-8"))))
+        return np.array(img)
+
+def access_database_as_admin():
+    
+    return mysql.connector.connect(host="bnadwttldj2i5cq9aymp-mysql.services.clever-cloud.com",
+    user="uvfqvcypihhznd2u",
+    port=3306,
+    password="CX6TBadRQYFqprozqDTo",
+    database="bnadwttldj2i5cq9aymp")
+
+
+def create_user_table(username):
+    dataBase=access_database_as_admin()
+    cursor=dataBase.cursor()
+    query=f"""create table if not exists user_{username}(
+            person_id varchar(30) unique not null,
+            face_vectors blob not null,
+            remarks text not null,
+            group_id char(30)
+            );"""
+    cursor.execute(query)
+    dataBase.commit()
+    dataBase.close()
+
+def drop_user_table(username):
+    dataBase=access_database_as_admin()
+    cursor=dataBase.cursor()
+    query=f"drop table if exists user_{username};"
+    cursor.execute(query)
+    dataBase.commit()
+    dataBase.close()
+
+def add_row_user_table(username,person_id,face_vectors,remarks,group_id=None):
+    """
+        person_id:str
+        face_vectors:np.array shape:(n,128)
+        remarks:np.array shape:(n,)
+        group_id:str
+
+    """
+
+    # print(face_vectors.tobytes())
+    # print(remarks.tobytes())
+    # print(np.frombuffer(remarks.tobytes(), dtype="float64"))
+    # pass
+    dataBase=access_database_as_admin()
+    cursor=dataBase.cursor()
+    cursor.execute(f"select person_id from user_{username} where person_id=%s;",[person_id])
+    if cursor.fetchone() is None:
+        if group_id is not None:
+            query=f"insert into user_{username}(person_id,face_vectors,remarks,group_id) values(%s,%s,%s,%s);"
+            cursor.execute(query,[person_id,face_vectors.tobytes(),remarks,group_id])
+        else:
+            query=f"insert into user_{username}(person_id,face_vectors,remarks) values(%s,%s,%s);"
+            cursor.execute(query,[person_id,face_vectors.tobytes(),remarks])
+    else:
+        if group_id is not None:
+            query=f"update  user_{username} SET face_vectors=%s,remarks=%s,group_id=%s where person_id=%s;"
+            cursor.execute(query,[face_vectors.tobytes(),remarks,group_id,person_id])
+        else:
+            query=f"update  user_{username} SET face_vectors=%s,remarks=%s where person_id=%s;"
+            cursor.execute(query,[face_vectors.tobytes(),remarks,person_id])
+    dataBase.commit()
+    dataBase.close()
+
+def read_row_user_table(username):
+    dataBase=access_database_as_admin()
+    cursor=dataBase.cursor()
+    query=f"select person_id,face_vectors,remarks,group_id from user_{username};"
+    cursor.execute(query)
+    data=list(cursor.fetchone())
+    data[1]=np.frombuffer(data[1],dtype="float64")
+    
+    data[2]=data[2].split(",")
+    data[1]=data[1].reshape(len(data[2]),-1)
+    print(data)
+    # dataBase.commit()
+    dataBase.close()
+
+def read_user_table(username,split_remarks=True,group_id=None):
+    dataBase=access_database_as_admin()
+    cursor=dataBase.cursor()
+    if group_id is None:
+        cursor.execute(f"select person_id,face_vectors,remarks,group_id from user_{username};")
+    else:
+        cursor.execute(f"select person_id,face_vectors,remarks,group_id from user_{username} where group_id=%s;",[group_id])
+    data={column_name:[] for column_name in cursor.column_names}
+    for row in cursor.fetchall():
+        row=list(row)
+        row[1]=np.frombuffer(row[1],dtype="float64")
+        row[2]=row[2].split(",")
+
+        data['person_id'].append(row[0])
+        data['face_vectors'].append(row[1].reshape(len(row[2]),-1))
+        if not split_remarks:
+            row[2]=",".join(row[2])
+        data['remarks'].append(row[2])
+        data['group_id'].append(row[3])
+        
+    dataBase.close()
+    # print(data['person_id'])
+    # print(data['face_vectors'])
+    return data
+
+def remove_person_from_user_table(username,person_id):
+    dataBase=access_database_as_admin()
+    cursor=dataBase.cursor()
+    query=f"delete from user_{username} where person_id=%s;"
+    cursor.execute(query,[person_id])
+    dataBase.commit()
+    dataBase.close()
+
+import numpy as np 
+
+# add_row_user_table("abc","1",np.array([[2,3],[1,4]],dtype="float64"),"front face,left face,right face",group_id="1")
+# read_user_table("abc")
+# print(np.fromstring("a,b,c",dtype='S3'))
+
+# drop_user_table("abc")
+# create_user_table("abc")

app/main/__init__.py

@@ -0,0 +1,5 @@
+from flask import Blueprint
+
+bp=Blueprint("main",__name__)
+
+from app.main import routes

app/main/routes.py

@@ -0,0 +1,6 @@
+from flask import redirect
+from app.main import bp
+
+@bp.route("/")
+def index():
+    return redirect("/demo/")

app/static/admin/dashboard.css

@@ -0,0 +1,32 @@
+*{
+    padding: 3px 9px;
+}
+#access_requests_table{
+    /* border:2px dashed black; */
+    
+    /* position: absolute;
+    top:50%;
+    left:50%;
+    transform: translate(-50%,-50%); */
+    width:fit-content;
+
+}
+
+table, th, td {
+    border:2px solid black;
+    border-collapse: collapse;
+}
+
+button{
+    cursor: pointer;
+}
+
+.accept{
+    background-color: greenyellow;
+}
+.reject{
+    background-color: red;
+}
+.revoke{
+    background-color: blueviolet;
+}

app/static/admin/dashboard.js

@@ -0,0 +1,119 @@
+function add_request_row(username,request_message)
+{
+//#access_requests_table
+// <tr>
+//    <td>abc</td>
+//    <td>Please give access :(</td>
+//
+//    <td>
+//        <button class="accept"><i class="fa-solid fa-check"></i></button>
+//        <button class="reject"><i class="fa-solid fa-close"></i></button>
+//    </td>
+// </tr>
+    var table_row=document.createElement("tr");
+    var username_tag=document.createElement("td");
+    username_tag.innerText=username;
+    var request_message_tag=document.createElement("td");
+    request_message_tag.innerText=request_message;
+    
+    var review_tag=document.createElement("td");
+    review_tag.innerHTML='<button class="accept" onclick="perform_action(this);"><i class="fa-solid fa-check"></i></button>\
+                          <button class="reject" onclick="perform_action(this);"><i class="fa-solid fa-close"></i></button>';
+    table_row.appendChild(username_tag);
+    table_row.appendChild(request_message_tag);
+    table_row.appendChild(review_tag);
+    document.querySelector("#access_requests_table").appendChild(table_row);
+}
+
+
+
+
+
+fetch("get_all_requests/").then(function(response){
+    return response.json();
+}).then(function(response){
+    console.log(response);
+    if ('username' in response)
+    {
+        for(var i=0;i<response['username'].length;i++)
+        {
+            if (response['access_key'][i]==null)
+                add_request_row(response['username'][i],response['request_message'][i])
+            else
+                add_access_row(response['username'][i],response['request_message'][i])
+        }
+        
+    }
+    
+})
+
+
+
+function perform_action(elem){
+    // console.log(elem);
+    console.log(elem.getAttribute("class"));   
+    var row=elem.parentNode.parentNode;
+    // username:row.firstChild.innerText
+
+    if (elem.getAttribute("class")=="reject")
+    {
+        const response = confirm("Are you sure you want to do that?");
+        if (!response)
+        {
+            return;
+        }
+    }
+
+    var formdata=new FormData();
+    formdata.append("username",row.firstChild.innerText);
+    formdata.append("mode",elem.getAttribute("class"));
+    fetch("update_requests/",{
+        method:"POST",
+        body:formdata
+    }).then(function(response){
+        return response.json();
+    }).then(function(response){
+        console.log("response:",response);
+        if (elem.getAttribute("class")=="accept")
+        {
+            add_access_row(row.firstChild.innerText,row.querySelector("td:nth-child(2)").innerText);
+        }
+        else if (elem.getAttribute("class")=="revoke")
+        {
+            add_request_row(row.firstChild.innerText,row.firstChild.dataset.request_message);
+        }
+        row.remove();
+    })
+    
+    
+    
+}
+
+
+
+
+
+function add_access_row(username,request_message)
+{
+//#access_requests_table
+// <tr>
+//    <td>username</td>
+//    <td>
+//        <button class="reject"><i class="fa-solid fa-close"></i></button>
+//    </td>
+// </tr>
+    var table_row=document.createElement("tr");
+    var username_tag=document.createElement("td");
+    username_tag.innerText=username;
+    username_tag.dataset.request_message=request_message;
+    var remove_access_tag=document.createElement("td");
+    remove_access_tag.innerHTML='<button class="revoke" onclick="perform_action(this);"><i class="fa-solid fa-close"></i></button>';
+    table_row.appendChild(username_tag);
+    table_row.appendChild(remove_access_tag);
+    document.querySelector("#access_granted_table").appendChild(table_row);
+}
+
+
+// add_access_row('username')
+// add_access_row('anuj')
+// add_access_row('abc')

app/static/admin/login.css

@@ -0,0 +1,49 @@
+#container{
+    position: absolute;
+    top:50%;
+    left:50%;
+    transform:translate(-50%,-50%);
+    display: flex;
+    row-gap: 20px;
+    flex-direction: column;
+    align-items: center;
+    border:2px solid black;
+    /* box-sizing: border-box; */
+    
+    padding: 20px;
+}
+#container>h1{
+    text-align: center;
+    margin: 0px;
+}
+#container>p{
+    text-align: center;
+    margin: 0px;
+    margin-bottom: 5px;
+    visibility: hidden;
+    color:red;
+}
+.active{
+    visibility: visible !important;
+}
+
+#container>div{
+    display: flex;
+    width:314px;
+    justify-content: space-between;
+}
+#container>div>p{
+    margin: 0;
+}
+
+#container>div>input{
+    border:none;
+    outline:none;
+    border-bottom:1px solid black;
+}
+
+#container>input{
+    width:30%;
+    margin: 10px;
+}
+

app/static/admin/registeration.js

@@ -0,0 +1,56 @@
+function check_username(elem){
+    if(elem.value!=''){
+        fetch(`/user/is_username_available/?username=${elem.value}`,{
+            method:"GET",
+            
+        }).then(function(response){
+            return response.json();
+        }).then(function(response){
+            // show a indicator that this username is available
+            if(response['available'])
+            {
+                // show green indicator
+                console.log("Username available");
+                elem.dataset.valid=true;
+                elem.style.borderColor='green';
+                elem.style.borderWidth=4;
+            }
+            else
+            {
+                // show red indicator
+                console.log("Username unavailable");
+                elem.dataset.valid=false;
+                elem.style.borderColor='red';
+                elem.style.borderWidth=4;
+            }
+        });
+    }
+}
+
+function check_password_is_matching(confirm_password){
+    var password=document.querySelector("#password");
+    if(confirm_password.value!=password.value){
+        confirm_password.style.borderColor='red';
+        confirm_password.style.borderWidth=4;
+    }
+    else{
+        confirm_password.style.borderColor='green';
+        confirm_password.style.borderWidth=4;
+    }
+}
+
+function validate_form(form){
+    if(form.username.dataset.valid=="false"){
+        document.querySelector("#container>p").style.visibility='visible';
+        document.querySelector("#container>p").innerText="username not available";
+        return false;
+    }
+    else if(form.password.value!=form.confirm_password.value){
+        document.querySelector("#container>p").style.visibility='visible';
+        document.querySelector("#container>p").innerText="password not matching";
+        return false;
+    }
+    else{
+        return true;
+    }
+}

app/static/demo/index/dark.css

@@ -0,0 +1,354 @@
+:root{
+    /* --color-primary:#7380ec; */
+    /* --color-primary:rgb(205, 18, 234); */
+    --color-primary:rgb(163 18 234);
+    --color-secondary:rgb(173, 54, 232);
+
+    --color-name-border:white;
+}
+
+*{
+    box-sizing: border-box;
+    /* background-color: rgb(22, 22, 22); */
+    background-color: rgb(12, 12, 12);
+    color:white;
+    font-weight: bold;
+    font-family: 'Poppins';
+    /* pointer-events: none; */
+}
+
+
+
+/* width */
+::-webkit-scrollbar {
+    width: 10px;
+    height:10px;
+}
+    
+/* Track */
+/* ::-webkit-scrollbar-track {
+    background: #B2EBF2;
+} */
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+    /* background: #5E35B1; */
+    background: var(--color-primary);
+    border-radius: 10px;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+    background: var(--color-secondary);
+}
+    
+
+#db_images_bar
+{
+    display: flex;
+    height:100px;
+    /* border:2px solid rgb(39, 86, 255); */
+    width: 100%;
+    padding-bottom: 10px;
+}
+
+#db_images_bar>.add_button{
+    height: 60px;
+    width: 20%;
+    padding: 2px;
+    margin: auto 0;
+    margin-right: 5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    z-index: 2;
+}
+
+
+#db_images_bar>.add_button>i{
+    color:white;
+    background-color: inherit;
+    font-size: 3em;
+}
+
+
+
+#db_images
+{
+    display: flex;
+    height: 100%;
+    width: 80%;
+    overflow: scroll hidden;
+    grid-row-start: 1;
+    margin: 0px 10px;
+}
+.db_image{
+    height:inherit;
+    filter: blur(0);
+    transition: 0.3s;
+    border-radius: inherit;
+}
+.db_image_container{
+    height: inherit;
+    background: black;
+    margin-right:10px ;
+    position: relative;
+    display: inline-block;
+    
+    border-radius: 20%;
+}
+
+.db_image_container:hover{
+    cursor: pointer;
+}
+.db_image_container:hover .db_image{
+    opacity: 0.5;
+    filter: blur(3px);
+}
+
+.db_image_container>.close_text{
+    opacity: 0;
+    font-size: xxx-large;
+    color:white;
+    position: absolute;
+    top:50%;
+    left:50%;
+    transform: translate(-50%,-50%);
+    padding: 0px;
+    margin: 0px;
+    transition: 0.3s;
+    background-color: transparent;
+}
+.db_image_container:hover .close_text{
+    opacity: 1;
+}
+
+
+
+
+
+
+
+/*new main container*/
+#container{
+    height:452px;
+    width:1000px;
+    /* border:2px dotted black; */
+    margin: 0 auto;
+    display: flex;
+    position: absolute;
+    top:50%;
+    left:50%;
+    transform: translate(-50%,-50%);
+}
+
+#container>.left-section{
+    height: inherit;
+    width:50%;
+    border-right:4px solid rgb(123, 123, 123);
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    padding: 10px;
+}
+
+#face_rec_image{
+    height: 65%;
+    /* border: 1px solid turquoise; */
+    border:0;
+}
+
+
+
+img[src=""],img:not([src]) {
+  opacity: 0;
+}
+
+img[src="*"]{
+  opacity: 1;
+}
+
+
+.buttons{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    /* border:2px solid red; */
+    height:50px;
+    width:100%;
+}
+.buttons>div>input{
+    padding:2px 5px;
+    margin:0px 5px;
+}
+
+#container>.right-section{
+    height: inherit;
+    width:50%;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    /* justify-content: center; */
+    padding: 10px;
+}
+
+#unassigned_faces{
+    width:100%;
+    height:100px;
+    /* border:1px solid rgb(255, 66, 255); */
+    padding:10px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    overflow: scroll hidden;
+}
+
+.crop_img{
+    height: 50px;
+    margin: 2px;
+}
+
+#name_list{
+    width:100%;
+    height:55%;
+    /* border:2px solid rgb(66, 113, 255); */
+    overflow: hidden scroll;
+    padding:15px;
+}
+
+#name_list>.person{
+    width:100%;
+    height: 80px;
+    border-bottom:2px solid var(--color-name-border);
+    position: relative;
+    padding: 4px 1px;
+    display: flex;
+    align-items: end;
+}
+#name_list>.person>input{
+    position: absolute;
+    left:5px;
+    top:5px;
+    /* padding: inherit; */
+    background-color: transparent;
+    border:none;
+    outline: none;
+}
+#name_list>.person>input:focus{
+    border-bottom: 1px solid var(--color-name-border);
+}
+
+#name_list>.person>i{
+    color:red;
+    position: absolute;
+    top:50%;
+    transform: translate(0,-50%);
+    right:20px;
+    
+}
+#name_list>.person>i:hover{
+    cursor:pointer;
+}
+
+#name_list>.person>.faces{
+    height:fit-content;
+    width: 100%;
+    
+}
+
+
+#add_name_btn{
+    margin: 40px;
+    width:inherit;
+    height:inherit;
+}
+
+.btn{
+    background-color: var(--color-primary);
+    box-shadow: 0px 0px 43px -4px var(--color-primary);
+    border-radius: 5px;
+    border:none;
+}
+.btn:hover{
+    cursor: pointer;
+    background-color: var(--color-secondary);
+    /* box-shadow: 0px 0px 43px -4px var(--color-secondary); */
+    
+}
+
+.settings_btn{
+    position: absolute;
+    top:40px;
+    right:40px;
+    font-size: larger;
+}
+
+#settings_menu{
+    background-color: black;
+    height: fit-content;
+    width:40%;
+    z-index: 10000;
+    position: absolute;
+    top:50%;
+    left:50%;
+    transform: translate(-50%,-50%);
+    border-radius: 10px;
+    box-shadow: 0px 0px 43px -4px var(--color-primary);
+    padding: 2px 20px;
+    display: none;
+}
+#settings_menu>h1{
+    background-color: inherit;
+}
+#settings_menu>.settings{
+    background-color: inherit;
+    height: 280px;
+    overflow: hidden scroll;
+    position: relative;
+}
+
+#settings_menu>.close_btn{
+    color:red;
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    font-size: larger;
+    background-color: transparent;
+}
+#settings_menu>.close_btn:hover{
+    cursor: pointer;
+}
+
+.reset_btn_container{
+    position: absolute;
+    top: 20px;
+    right: 30px;   
+}
+.reset_btn_container>.reset_btn{
+    color:white;
+    position: fixed;
+    font-size: larger;
+    background-color: transparent;
+}
+.reset_btn_container>.reset_btn:hover{
+    cursor: pointer;
+}
+
+#container.blur{
+    filter: blur(5px);
+    pointer-events: none;
+}
+
+#save_btn_container{
+    display: flex;
+    justify-content: center;
+    margin: 10px 0px;
+    font-size: large;
+}
+#save_settings_btn{
+    background-color: rgb(76, 76, 232);
+    outline: none;
+    border: none;
+    border-radius: 6px;
+}

app/static/demo/index/script.js

@@ -0,0 +1,498 @@
+var dragged_elem;
+var touch_start_time=null;
+var elapsedTime=null;
+var maxAllowedTime=500;
+
+function drag(ev){
+    // ev.preventDefault();
+    console.log(ev.target.id);
+    dragged_elem=ev.target;
+    // ev.dataTransfer.setData("text",ev.target.id);
+}
+function dragTouchstart(e,elem) {
+    elapsedTime=null;
+    touch_start_time = new Date().getTime();
+}
+function dragTouchmove(e,elem) {
+
+    let touchX = e.touches[0].pageX;
+    let touchY = e.touches[0].pageY;
+
+    if(elapsedTime==null)
+    {
+        elapsedTime = new Date().getTime() - touch_start_time;
+    }
+    
+    // console.log(elapsedTime);
+    
+    if (elapsedTime<maxAllowedTime) return;
+    
+    // console.log("no-scroll")
+    e.preventDefault()
+    
+    if (dragged_elem==null)
+    {
+        dragged_elem=elem;
+        console.log(dragged_elem);
+    }
+
+}
+
+function allowDrop(ev){
+    ev.preventDefault();
+    console.log("ready to be dropped");
+}
+
+function drop(ev,element){
+    ev.preventDefault();
+    console.log("dropped!");
+    element.appendChild(dragged_elem);
+    dragged_elem=null;
+    
+}
+
+function dragTouchend(e,elem) {
+    
+    if(dragged_elem==null) return;
+    
+    var droppable_element=document.elementFromPoint(e.changedTouches[0].clientX, e.changedTouches[0].clientY).closest(".droppable");
+    if(droppable_element==null) return;
+    
+    if(droppable_element.hasAttribute("data-dropto"))   droppable_element=droppable_element.querySelector(droppable_element.dataset.dropto)
+    
+    droppable_element.appendChild(dragged_elem);
+    
+    console.log(droppable_element)
+    dragged_elem=null;
+    // e.target.style.transform="scale(0.8)";
+  }
+
+// function click_based_drop(elem)
+// {
+//     if(dragged_elem!=null){
+
+//         console.log("asd");
+//         if(elem.getAttribute("class")=="person")
+//         {
+//             console.log();
+//             elem.querySelector(".faces").appendChild(dragged_elem);
+//             dragged_elem=null;
+//             features_updated=false;
+//         }
+//         else if (elem.getAttribute("id")=="unassigned_faces")
+//         {
+//             document.querySelector("#unassigned_faces").appendChild(dragged_elem);
+//             dragged_elem=null;
+//             features_updated=false;
+//         }
+//     }
+    
+// }
+
+
+var database_input=document.querySelector("#db_images_bar>.add_button>input")
+database_input.addEventListener("change", function(e){
+    if(e.target.files[0]){
+        console.log(e.target.files[0].name);
+        
+        const formdata = new FormData();
+        formdata.append("a",23);
+        formdata.append("image",e.target.files[0]);
+        
+        fetch("/demo/add_crops/",
+        {
+            method:'POST',
+            body:formdata,
+        }).then(
+            function(response)
+            {
+                return response.json();
+            }
+        ).then(
+            function(response)
+            {
+                console.log(response);
+                if (response['message']=='successful')
+                {
+                    
+                    var images_div=document.querySelector("#db_images_bar>#db_images");
+                    var img_container_tag=document.createElement("div");
+                    var img_remove_tag=document.createElement("p");
+                    var img_tag=document.createElement("img");
+                    img_tag.src="data:image/jpeg;base64,"+response['image'].split('\'')[1];
+                    img_tag.setAttribute("class","db_image");
+                    img_remove_tag.setAttribute("class","close_text");
+                    img_remove_tag.innerHTML="✖";
+                    img_container_tag.setAttribute("class","db_image_container");
+                    img_container_tag.setAttribute("onclick","remove_image(this);");
+                    img_container_tag.dataset.image_name=response['image_name'];
+                    img_container_tag.appendChild(img_tag);
+                    img_container_tag.appendChild(img_remove_tag);
+                    
+                    img_container_tag.addEventListener("mouseenter",function(e){
+
+                        var image=document.querySelector("#face_rec_image");
+                        if (image.hasAttribute('src'))
+                        {
+                            image.dataset.old_src=image.src;
+                        }
+                        image.src=e.target.querySelector("img").src;
+                        
+
+                    })
+                    img_container_tag.addEventListener("mouseleave",function(){
+                        
+                        var image=document.querySelector("#face_rec_image");
+                        if (image.hasAttribute("data-old_src")){
+                            console.log("has_old_src")
+                            image.src=image.dataset.old_src;
+                            delete image.dataset.old_src;
+                        }
+                        else{
+                            image.removeAttribute('src');
+                        }
+                        
+
+                    })
+
+                    images_div.appendChild(img_container_tag);
+
+                    
+                    
+
+                    // add crops to the #unassigned_faces
+                    for(var i=0;i<response["crops"].length;i++)
+                    {
+                        var crop_container=document.querySelector("#unassigned_faces");
+                        var crop_img=document.createElement("img");
+                        crop_img.src="data:image/jpeg;base64,"+response["crops"][i].split('\'')[1];
+                        crop_img.dataset.image_name=response['image_name'];
+                        
+                        crop_img.setAttribute("class","crop_img");
+                    
+                        crop_img.setAttribute("draggable","true");
+                        crop_img.setAttribute("ondragstart","drag(event)");
+                        crop_container.appendChild(crop_img)
+
+                        // disable right click
+                        crop_img.addEventListener("contextmenu",function(ev){
+                            ev.preventDefault();
+                            // console.log("right click");
+                            // ev.target.style.transform="scale(1.2)";
+                            // ev.target.focus();
+                            // dragged_elem=e.target;
+                         }); 
+                        
+                        // crop_img.addEventListener("blur",function(ev){
+                        //     console.log("blur");
+                        //     ev.target.style.transform="scale(1)";
+                        //  }); 
+                     
+                        
+                        // add touch events
+                        // crop_img.addEventListener("touchstart",function(e){
+                        //     console.log("touch-started");
+                        // });
+                        crop_img.setAttribute("ontouchstart","dragTouchstart(event,this);");
+                        crop_img.setAttribute("ontouchmove","dragTouchmove(event,this);");
+                        crop_img.setAttribute("ontouchend","dragTouchend(event,this);");
+                        // crop_img.addEventListener("touchmove",function(e){
+                            
+                        //     dragTouchmove(e);
+                        // });
+                        // crop_img.addEventListener("touchend",function(e){
+                        //     console.log("touch-end");
+                        //     dragTouchend(e);
+                        // });
+                    }
+                    
+                    // response['images'].forEach(img_name => {
+                    //     img_tag=document.createElement("img");
+                    //     img_tag.src=Flask.url_for('upload',{subfolder:'images',filename:img_name} );
+                    //     images_div.appendChild(img_tag);
+                    // });
+                }
+                
+
+            }
+        );
+    }
+});
+
+
+
+
+function remove_image(e)
+{
+    // reset old image in image-viewer start ----------------------------------------
+    var image=document.querySelector("#face_rec_image");
+                        if (image.hasAttribute("data-old_src")){
+                            console.log("has_old_src")
+                            image.src=image.dataset.old_src;
+                            delete image.dataset.old_src;
+                        }
+                        else{
+                            image.removeAttribute('src');
+                        }
+    // reset old image in image-viewer end ------------------------------------------
+
+    // console.log(e)
+    
+    crops=document.querySelectorAll(`.crop_img[data-image_name='${e.dataset.image_name}']`)
+    // console.log(crops)
+    for(var i=0;i<crops.length;i++)
+        crops[i].remove();
+    
+    e.remove();
+}
+
+
+
+
+function add_person(){
+    // make such a structure:
+    // <div class="person" ontouchend="dragTouchend(event)" ondragover="allowDrop(event)" ondrop="drop(event,this)">
+    // <input type="text" value="Anuj" ondrop="return false;" onkeypress="deselect(event,this);">
+    // <div class="faces"></div>
+    // <i class="fa-solid fa-xmark" onclick="this.parentElement.remove();"></i>
+    // </div>
+    var person=document.createElement("div");
+    person.setAttribute("class","person droppable");
+    person.dataset.dropto=".faces";
+    person.setAttribute("ondragover","allowDrop(event)");
+    person.setAttribute("ondrop","drop(event,this.querySelector('.faces'))");
+    // person.setAttribute("ontouchend","dragTouchend(event)");
+    var name=document.createElement("input");
+    name.setAttribute("type","text");
+    name.setAttribute("ondrop","return false;");
+    name.setAttribute("onkeyup","deselect(event,this);");
+    var faces=document.createElement("div");
+    faces.setAttribute("class","faces");
+    var close_icon=document.createElement("i");
+    close_icon.setAttribute("class","fa-solid fa-xmark");
+    close_icon.setAttribute("onclick","remove_person(this.parentElement);");
+    person.appendChild(name);
+    person.appendChild(faces);
+    person.appendChild(close_icon);
+    document.querySelector("#name_list").appendChild(person);
+    name.focus();
+    // name.select();
+
+}
+
+function load_image_preview(elem){
+    if(elem.files[0])
+    {
+        console.log(elem.files[0]);
+        if (FileReader && elem.files[0]) {
+            var fr = new FileReader();
+            fr.onload = function () {
+                document.querySelector("#face_rec_image").src = fr.result;
+                document.querySelector("#face_rec_image").style.width="unset";
+            }
+            fr.readAsDataURL(elem.files[0]);
+        }
+    }
+}
+
+function deselect(e,elem){
+    // document.body.focus();
+
+    if(e.key=="Enter")
+        elem.blur();
+}
+
+function update_crops_labels(elem)
+{
+    console.log("update face labels");
+    var formdata=new FormData();
+    
+    var faces=document.querySelectorAll(".person>.faces>img");
+    var faces_base64=[]
+    var selected_faces=[]
+
+    for (var i=0;i<faces.length;i++)
+    {
+        
+        if(!faces[i].hasAttribute("data-features"))
+        {
+            selected_faces.push(faces[i]);
+            faces_base64.push(faces[i].src.split(',')[1]); // also removed datajpeg  part
+        }
+    
+    }
+
+    if (selected_faces.length>0)
+    {
+        formdata.append("faces",faces_base64);
+        // to see the the json
+        // var object = {};
+        // formdata.forEach(function(value, key){
+        //     object[key] = value;
+        // });
+        // var json = JSON.stringify(object);
+        // console.log(json);
+        
+        fetch("/demo/update_crops_labels/",{
+            method:"POST",
+            body:formdata
+        }).then(function(response){
+            console.log(response)
+            return response.json();
+        }).then(function(response){
+            console.log(response);
+            if (response.message!='success') return;
+            
+            for(var i=0;i<response['features'].length;i++)
+                selected_faces[i].dataset.features=response['features'][i];
+            face_recognition(elem);
+            });
+        
+        }
+    else{
+        console.log("already up to date !");
+        face_recognition(elem);
+    }
+        
+    
+}
+
+
+
+function face_recognition(elem)
+{
+
+    if(elem.files[0])
+    {
+        // update_crops_labels(elem);  // get features of all db images from backend
+        
+        var formdata=new FormData();
+        var faces=document.querySelectorAll(".person>.faces>img");
+        var faces_features={};
+
+
+        var face_labels=document.querySelectorAll(".person");
+    
+        for (var i=0;i<face_labels.length;i++)
+        {
+            var faces=face_labels[i].querySelectorAll(".faces>img");
+            var face_features=[]
+            if (faces.length>0)
+            {
+                for(var j=0;j<faces.length;j++)
+                {
+                    face_features.push(faces[j].dataset.features)
+                }
+                // name:[features_array]
+                faces_features[face_labels[i].querySelector("input").value]=face_features;
+                
+            }
+        }
+        formdata.append("db_images",JSON.stringify(faces_features));
+        formdata.append("image",elem.files[0]);
+        
+        console.log(formdata.get("db_images"));
+        if(formdata.get("db_images")=="{}"){
+            console.log("Add db_images_first")
+            return ;
+        }
+        // console.log(elem.files[0]);
+        fetch("/demo/face_recognition/",{
+            method:"POST",
+            body:formdata
+        }).then(function(response){
+            return response.json();
+        }).then(function(response){
+            console.log(response);
+            document.querySelector("#face_rec_image").src="data:image/jpeg;base64,"+response['image'].split('\'')[1];
+        })
+        
+        
+    }
+}
+
+
+function remove_person(person){
+    var unassigned_faces=document.querySelector("#unassigned_faces");
+    var all_crops=person.querySelectorAll(".faces>img");
+    all_crops.forEach(function(crop){
+        unassigned_faces.appendChild(crop);
+    })
+    person.remove();
+}
+
+
+function show_settings(){
+    document.querySelector('#settings_menu').style.display='block';
+    document.querySelector('#container').classList.add("blur");
+}
+function hide_settings(){
+    document.querySelector('#settings_menu').style.display='none';
+    document.querySelector('#container').classList.remove("blur");
+}
+
+
+
+function get_settings(){
+    fetch("get_settings/",{
+        method:"GET"
+    }).then(function(response){
+        return response.json();
+    }).then(function(res){
+        console.log(res);
+
+        p_thres.value=p_thresValue.innerText=res['p_thres'];
+        nms_thres.value=nms_thresValue.innerText=res['nms_thres'];
+        
+        small_size.value=small_sizeValue.innerText=res['small_size'];
+        large_size.value=large_sizeValue.innerText=res['large_size'];
+
+        d_thres.value=d_thresValue.innerText=res['d_thres'];
+        a_thres.value=a_thresValue.innerText=res['a_thres'];
+
+        db_mode.value=res['db_mode'];
+        fr_mode.value=res['fr_mode'];
+        console.log(res['db_mode'],res['fr_mode']);
+    })
+}
+get_settings();
+// document.querySelector('#p_thres')
+// document.querySelector('#p_thres').value
+
+function update_settings(){
+    var new_settings=new Object();
+    new_settings['p_thres']=p_thres.value;
+    new_settings['nms_thres']=nms_thres.value;
+    new_settings['small_size']=small_size.value;
+    new_settings['large_size']=large_size.value;
+    new_settings['d_thres']=d_thres.value;
+    new_settings['a_thres']=a_thres.value;
+    new_settings['db_mode']=db_mode.value;
+    new_settings['fr_mode']=fr_mode.value;
+    
+    fetch("update_settings/",{
+        method:"POST",
+        headers:{'content-type': 'application/json'},
+        body:JSON.stringify(new_settings)
+    }).then(function(response){
+        return response.json();
+    }).then(function(res){
+        console.log(res);
+        if(res['message']=='success')
+            hide_settings();
+    }
+    );
+}
+
+function reset_settings(){
+    fetch("reset_settings/",{
+        method:"GET"
+    }).then(function(response){
+        return response.json();
+    }).then(function(res){
+        console.log(res);
+        if(res['message']=='success')
+            get_settings();
+    }
+    );
+}

app/static/demo/index/style.css

@@ -0,0 +1,235 @@
+*{
+    box-sizing: border-box;
+}
+
+/* width */
+::-webkit-scrollbar {
+    width: 10px;
+    height:10px;
+}
+    
+/* Track */
+::-webkit-scrollbar-track {
+    background: #B2EBF2;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+    background: #5E35B1;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+    background: #673AB7;
+}
+    
+
+#db_images_bar
+{
+    display: flex;
+    height:100px;
+    /* border:2px solid rgb(39, 86, 255); */
+    width: 100%;
+    padding-bottom: 10px;
+}
+
+#db_images_bar>.add_button{
+    background-color:rgb(205, 18, 234) ;
+    height: 60px;
+    width: 20%;
+    padding: 2px;
+    border-radius: 5px;
+    margin: auto 0;
+    margin-right: 5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}
+
+#db_images_bar>.add_button:hover{
+    cursor: pointer;
+}
+
+#db_images_bar>.add_button>i{
+    color:white;
+    font-size: 3em;
+}
+
+
+
+#db_images
+{
+    display: flex;
+    height: 100%;
+    width: 80%;
+    overflow: scroll hidden;
+    grid-row-start: 1;
+}
+.db_image{
+    height:inherit;
+    filter: blur(0);
+    transition: 0.3s;
+    border-radius: inherit;
+}
+.db_image_container{
+    height: inherit;
+    background: black;
+    margin-right:10px ;
+    position: relative;
+    display: inline-block;
+    
+    border-radius: 20%;
+}
+
+.db_image_container:hover{
+    cursor: pointer;
+}
+.db_image_container:hover .db_image{
+    opacity: 0.5;
+    filter: blur(3px);
+}
+
+.db_image_container>.close_text{
+    opacity: 0;
+    font-size: xxx-large;
+    color:white;
+    position: absolute;
+    top:50%;
+    left:50%;
+    transform: translate(-50%,-50%);
+    padding: 0px;
+    margin: 0px;
+    transition: 0.3s;
+}
+.db_image_container:hover .close_text{
+    opacity: 1;
+}
+
+
+
+
+
+
+
+/*new main container*/
+#container{
+    height:452px;
+    width:1000px;
+    /* border:2px dotted black; */
+    margin: 0 auto;
+    display: flex;
+    position: absolute;
+    top:50%;
+    left:50%;
+    transform: translate(-50%,-50%);
+}
+
+#container>.left-section{
+    height: inherit;
+    width:50%;
+    border-right:2px solid black;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    padding: 10px;
+}
+
+#face_rec_image{
+    height: 65%;
+    /* border: 1px solid turquoise; */
+    border:0;
+    
+    width: 150px;
+}
+
+
+.buttons{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    /* border:2px solid red; */
+    height:50px;
+    width:100%;
+}
+
+#container>.right-section{
+    height: inherit;
+    width:50%;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    /* justify-content: center; */
+    padding: 10px;
+}
+
+#unassigned_faces{
+    width:100%;
+    height:100px;
+    /* border:1px solid rgb(255, 66, 255); */
+    padding:10px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    overflow: scroll hidden;
+}
+
+.crop_img{
+    height: 50px;
+    margin: 2px;
+}
+
+#name_list{
+    width:100%;
+    height:55%;
+    /* border:2px solid rgb(66, 113, 255); */
+    overflow: hidden scroll;
+    padding:15px;
+}
+
+#name_list>.person{
+    width:100%;
+    height: 80px;
+    border-bottom:2px solid chartreuse;
+    position: relative;
+    padding: 4px 1px;
+    display: flex;
+    align-items: end;
+}
+#name_list>.person>input{
+    position: absolute;
+    left:5px;
+    top:5px;
+    /* padding: inherit; */
+    background-color: transparent;
+    border:none;
+    outline: none;
+}
+#name_list>.person>input:focus{
+    border-bottom: 1px solid black;
+}
+
+#name_list>.person>i{
+    color:red;
+    position: absolute;
+    top:50%;
+    transform: translate(0,-50%);
+    right:20px;
+    
+}
+#name_list>.person>i:hover{
+    cursor:pointer;
+}
+
+#name_list>.person>.faces{
+    height:fit-content;
+    width: 100%;
+    
+}
+
+
+#add_name_btn{
+    margin: 40px;
+    width:inherit;
+    height:inherit;
+}

app/static/user/dashboard.css

@@ -0,0 +1,305 @@
+:root{
+    /* --color-primary:#7380ec; */
+    /* --color-primary:rgb(205, 18, 234); */
+    --color-primary:rgb(163 18 234);
+    --color-secondary:rgb(173, 54, 232);
+
+    --color-name-border:red;
+}
+
+
+#api-key{
+    border:2px dashed black;
+    width:fit-content;
+    display: flex;
+    flex-direction: row;
+    /* column-gap: 2px; */
+
+}
+
+#api-key>p{
+    border:none;
+    padding:0 4px;
+    /* border-right: 2px solid black; */
+
+}
+
+#api-key>button{
+    /* padding:6px; */
+    /* border: 2px solid black; */
+    /* line-height: 2; */
+    cursor: pointer;
+}
+
+#database-form{
+    border:1px solid black;
+    display: flex;
+    flex-direction: column;
+    width:500px;
+    padding: 4px;
+    row-gap: 3px;
+    height: fit-content;
+}
+
+#database-form>.crops{
+    width:300px;
+    height:60px;
+    border:1px solid black;
+}
+#database-form>.assigned-crops{
+    width:300px;
+    height:100px;
+    border:1px solid black;
+}
+
+#database-form>.assigned-crops>.remark-crops{
+    width:300px;
+    height:100px;
+    border:1px solid black;
+}
+
+#database-form>.field{
+    display: flex;
+    flex-direction: row;
+    justify-items: center;
+    height: 30px;
+    overflow: hidden;
+    height: fit-content;
+}
+
+#database-form>.field>p{
+    padding: 0;
+    margin: 0;
+    width: fit-content;
+    height: fit-content;
+    margin-top: 0.3rem;
+}
+
+
+/*Copied from demo page css*/
+
+#unassigned_faces{
+    width:100%;
+    height:100px;
+    border:1px solid rgb(255, 66, 255);
+    padding:10px;
+    column-gap: 5px;
+    
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    box-sizing: border-box;
+    overflow: scroll hidden;
+}
+
+
+
+
+
+
+#remark_list{
+    width:100%;
+    height: 206px;
+    /* border:2px solid rgb(66, 113, 255); */
+    overflow: hidden scroll;
+    padding:15px;
+    box-sizing: border-box;
+}
+
+#remark_list>.remark{
+    width:100%;
+    height: 80px;
+    border-bottom:2px solid var(--color-name-border);
+    position: relative;
+    padding: 4px 1px;
+    display: flex;
+    align-items: end;
+}
+#remark_list>.remark>input{
+    position: absolute;
+    left:5px;
+    top:5px;
+    /* padding: inherit; */
+    background-color: transparent;
+    border:none;
+    outline: none;
+}
+#remark_list>.remark>input:focus{
+    border-bottom: 1px solid var(--color-name-border);
+}
+
+#remark_list>.remark>i{
+    color:red;
+    position: absolute;
+    top:50%;
+    transform: translate(0,-50%);
+    right:20px;
+    
+}
+#remark_list>.remark>i:hover{
+    cursor:pointer;
+}
+
+#remark_list>.remark>.faces{
+    height:fit-content;
+    width: 100%;
+    display: flex;
+    column-gap: 5px;
+}
+
+.buttons{
+    display: flex;
+    justify-content: center;
+}
+
+#add_remark_btn{
+    margin: 40px;
+    padding: 4px 12px;
+    width:fit-content;
+    height:inherit;
+}
+
+.btn{
+    background-color: var(--color-primary);
+    box-shadow: 0px 0px 43px -4px var(--color-secondary);
+    border-radius: 5px;
+    border:none;
+}
+.btn:hover{
+    cursor: pointer;
+    background-color: var(--color-secondary);
+    /* box-shadow: 0px 0px 43px -4px var(--color-secondary); */
+    
+}
+
+/*end of Copied from demo page css*/
+
+#database-form>.field>.add_button{
+    height: 60px;
+    width: 20%;
+    padding: 2px;
+    margin: auto 0;
+    margin-right: 5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    z-index: 2;
+}
+
+
+#database-form>.field>.add_button>i{
+    color:white;
+    background-color: inherit;
+    font-size: 3em;
+}
+.crop_img{
+    height: 60px;
+}
+
+#face_recognition_image{
+    height:200px;
+    width:200px;
+}
+
+
+#db_people_table{
+    width:300px;
+    height:200px;
+}
+
+
+table, th, td {
+    border:2px solid black;
+    border-collapse: collapse;
+    text-align: center;
+}
+
+.remove{
+    background-color: red;
+}
+
+button:hover{
+    cursor: pointer;
+}
+
+
+/*copied from demo page*/
+
+.settings_btn{
+    position: absolute;
+    top:40px;
+    right:40px;
+    font-size: larger;
+}
+
+#settings_menu{
+    background-color: white;
+    height: fit-content;
+    width:40%;
+    z-index: 10000;
+    position: absolute;
+    top:50%;
+    left:50%;
+    transform: translate(-50%,-50%);
+    border-radius: 10px;
+    box-shadow: 0px 0px 43px -4px var(--color-primary);
+    padding: 2px 20px;
+    display: none;
+}
+#settings_menu>h1{
+    background-color: inherit;
+}
+#settings_menu>.settings{
+    background-color: inherit;
+    height: 280px;
+    overflow: hidden scroll;
+    position: relative;
+}
+
+#settings_menu>.close_btn{
+    color:red;
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    font-size: larger;
+    background-color: transparent;
+}
+#settings_menu>.close_btn:hover{
+    cursor: pointer;
+}
+
+.reset_btn_container{
+    position: absolute;
+    top: 20px;
+    right: 30px;   
+}
+.reset_btn_container>.reset_btn{
+    color:white;
+    position: fixed;
+    font-size: larger;
+    background-color: transparent;
+}
+.reset_btn_container>.reset_btn:hover{
+    cursor: pointer;
+}
+
+#container.blur{
+    filter: blur(5px);
+    pointer-events: none;
+}
+
+#save_btn_container{
+    display: flex;
+    justify-content: center;
+    margin: 10px 0px;
+    font-size: large;
+}
+#save_settings_btn{
+    background-color: rgb(76, 76, 232);
+    outline: none;
+    border: none;
+    border-radius: 6px;
+}
+
+/*End copied from demo page*/

app/static/user/dashboard.js

@@ -0,0 +1,483 @@
+var dragged_elem;
+var features_updated=false;
+var touch_start_time=null;
+var elapsedTime=null;
+var maxAllowedTime=500;
+
+function drag(ev){
+    // ev.preventDefault();
+    console.log(ev.target.id);
+    dragged_elem=ev.target;
+    // ev.dataTransfer.setData("text",ev.target.id);
+}
+
+function dragTouchstart(e,elem) {
+    elapsedTime=null;
+    touch_start_time = new Date().getTime();
+}
+function dragTouchmove(e,elem) {
+
+    let touchX = e.touches[0].pageX;
+    let touchY = e.touches[0].pageY;
+
+    if(elapsedTime==null)
+    {
+        elapsedTime = new Date().getTime() - touch_start_time;
+    }
+    
+    // console.log(elapsedTime);
+    
+    if (elapsedTime<maxAllowedTime) return;
+    
+    // console.log("no-scroll")
+    e.preventDefault()
+    
+    if (dragged_elem==null)
+    {
+        dragged_elem=elem;
+        console.log(dragged_elem);
+    }
+
+}
+
+function allowDrop(ev){
+    ev.preventDefault();
+    console.log("ready to be dropped");
+}
+
+function drop(ev,element){
+    ev.preventDefault();
+    console.log("dropped!");
+    element.appendChild(dragged_elem);
+    dragged_elem=null;
+    features_updated=false;
+    
+}
+
+function dragTouchend(e,elem) {
+    
+    if(dragged_elem==null) return;
+    
+    var droppable_element=document.elementFromPoint(e.changedTouches[0].clientX, e.changedTouches[0].clientY).closest(".droppable");
+    if(droppable_element==null) return;
+    
+    if(droppable_element.hasAttribute("data-dropto"))   droppable_element=droppable_element.querySelector(droppable_element.dataset.dropto)
+    
+    droppable_element.appendChild(dragged_elem);
+    
+    console.log(droppable_element)
+    dragged_elem=null;
+    features_updated=false;
+    // e.target.style.transform="scale(0.8)";
+  }
+
+
+
+function count_words(elem){
+    var count = 0;
+          
+    // Split the words on each
+    // space character 
+    var split = elem.value.split(' ');
+    
+    // Loop through the words and 
+    // increase the counter when 
+    // each split word is not empty
+    for (var i = 0; i < split.length; i++) {
+        if (split[i] != "") {
+            count += 1;
+        }
+    }
+    console.log("count:",count)
+}
+
+document.querySelector("#api-key>.copy").addEventListener("click",function(e){
+    var key_tag=document.querySelector("#api-key>p");
+    key_tag.focus();
+    console.log(key_tag.innerText);
+    navigator.clipboard.writeText(key_tag.innerText);
+})
+
+
+document.querySelector("#api-key>.refresh").addEventListener("click",function(e){
+    var key_tag=document.querySelector("#api-key>p");
+    fetch("update_key/").then(function(response){
+         return response.json();
+    }).then(function(response){
+        console.log(response);
+        if ("key" in response){
+            key_tag.innerText=response["key"];
+        }
+    });
+})  
+
+
+
+
+
+function deselect(e,elem){
+    // document.body.focus();
+
+    if(e.key=="Enter")
+        elem.blur();
+    else if(elem.value!=elem.dataset.name)
+        features_updated=false;
+}
+
+
+function remove_remark(remark){
+    var unassigned_faces=document.querySelector("#unassigned_faces");
+    var all_crops=remark.querySelectorAll("#remark_list>.remark>.faces>img");
+    all_crops.forEach(function(crop){
+        unassigned_faces.appendChild(crop);
+    })
+    remark.remove();
+}
+
+
+function add_remark(){
+    // make such a structure:
+    // <div class="remark" ondragover="allowDrop(event)" ondrop="drop(event,this)">
+    // <input type="text" value="Anuj" ondrop="return false;" onkeypress="deselect(event,this);">
+    // <div class="faces"></div>
+    // <i class="fa-solid fa-xmark" onclick="this.parentElement.remove();"></i>
+    // </div>
+    var remark=document.createElement("div");
+    remark.setAttribute("class","remark droppable");
+    remark.dataset.dropto=".faces";
+    remark.setAttribute("ondragover","allowDrop(event)");
+    remark.setAttribute("ondrop","drop(event,this.querySelector('#remark_list>.remark>.faces'))");
+    var name=document.createElement("input");
+    name.setAttribute("type","text");
+    name.setAttribute("ondrop","return false;");
+    name.setAttribute("onkeyup","deselect(event,this);");
+    var faces=document.createElement("div");
+    faces.setAttribute("class","faces");
+    var close_icon=document.createElement("i");
+    close_icon.setAttribute("class","fa-solid fa-xmark");
+    close_icon.setAttribute("onclick","remove_remark(this.parentElement);");
+    remark.appendChild(name);
+    remark.appendChild(faces);
+    remark.appendChild(close_icon);
+    document.querySelector("#remark_list").appendChild(remark);
+    name.focus();
+    // name.select();
+
+}
+
+
+function filterFunction() {
+    var input, filter, ul, li, a, i;
+    input = document.getElementById("myInput");
+    filter = input.value.toUpperCase();
+    div = document.getElementById("myDropdown");
+    a = div.getElementsByTagName("a");
+    for (i = 0; i < a.length; i++) {
+      txtValue = a[i].textContent || a[i].innerText;
+      if (txtValue.toUpperCase().indexOf(filter) > -1) {
+        a[i].style.display = "";
+      } else {
+        a[i].style.display = "none";
+      }
+    }
+  }
+
+
+
+  var database_input=document.querySelector("#database-form>.field>.add_button>input")
+  database_input.addEventListener("change", function(e){
+      if(e.target.files[0]){
+          console.log(e.target.files[0].name);
+          
+          const formdata = new FormData();
+          formdata.append("image",e.target.files[0]);
+
+          
+          fetch("get_crops/",
+          {
+              method:'POST',
+              body:formdata,
+          }).then(
+              function(response)
+              {
+                  return response.json();
+              }
+          ).then(
+              function(response)
+              {
+                  console.log(response);
+                
+                  if (response['message']=='successful')
+                  {
+                    // add crops to the #unassigned_faces                      
+                    var crop_container=document.querySelector("#unassigned_faces");
+                      for(var i=0;i<response["crops"].length;i++)
+                      {
+                          
+                          var crop_img=document.createElement("img");
+                          crop_img.src="data:image/jpeg;base64,"+response["crops"][i].split('\'')[1];                          
+                          crop_img.setAttribute("class","crop_img");
+                          // crop_img.setAttribute("id",crop_img.dataset.image_name+'\\'+crop_img.dataset.crop_name);
+                          crop_img.setAttribute("draggable","true");
+                          crop_img.setAttribute("ondragstart","drag(event)");
+                          crop_container.appendChild(crop_img)
+
+                          // disable right click
+                          crop_img.addEventListener("contextmenu",function(ev){ev.preventDefault();});
+                          //make it work with touch
+                          crop_img.setAttribute("ontouchstart","dragTouchstart(event,this);");
+                          crop_img.setAttribute("ontouchmove","dragTouchmove(event,this);");
+                          crop_img.setAttribute("ontouchend","dragTouchend(event,this);");
+  
+                      }
+                      
+                      // response['images'].forEach(img_name => {
+                      //     img_tag=document.createElement("img");
+                      //     img_tag.src=Flask.url_for('upload',{subfolder:'images',filename:img_name} );
+                      //     images_div.appendChild(img_tag);
+                      // });
+                  }
+                  
+  
+              }
+          );
+      }
+  });
+
+
+function update_db_crops(elem)
+  {
+      var all_remarks={};
+      var num_of_remarks=0;
+      
+      var face_remarks=document.querySelectorAll("#remark_list>.remark");
+      
+      for (var i=0;i<face_remarks.length;i++)
+      {
+          var faces=face_remarks[i].querySelectorAll("#remark_list>.remark>.faces>img");
+          var face_base64_list=[]
+          if (faces.length>0)
+          {
+              for(var j=0;j<faces.length;j++)
+              {
+                face_base64_list.push(faces[j].src.split(',',2)[1])
+              }
+              all_remarks[face_remarks[i].querySelector("input").value]=face_base64_list;
+              
+              num_of_remarks+=1;
+              
+          }
+          
+      }
+  
+      if (num_of_remarks>0)
+      {
+
+        var alldata={};
+        alldata["person_name"]=document.querySelector("#database-form>.field>.person_name").value;
+        alldata["remarks"]=all_remarks;
+        console.log(alldata);
+
+        
+          
+          fetch("set_crops/",{
+              method:"POST",
+              headers: { "Content-Type": "application/json"},
+              body:JSON.stringify(alldata)
+          }).then(function(response){
+              return response.json();
+          }).then(function(response){
+                console.log(response);
+                var person_ids=document.querySelectorAll("#db_people_table>tr>td:first-child");
+                var matching_person_id=null;
+                person_ids.forEach(element => {
+                    if(element.innerText==alldata["person_name"])
+                    {
+                        element.parentElement.remove();
+                        // element
+                    }
+                });
+                alldata["remarks"]
+                add_person_row(alldata["person_name"],Object.keys(alldata["remarks"]).join(","));
+                
+          });
+  
+      }
+      else{
+          console.log("add database faces first");
+      }
+      
+  
+      
+  }
+
+function face_recoginization(elem){
+    if(elem.files[0]){
+        formdata=new FormData();
+        formdata.append("image",elem.files[0]);
+        fetch("face_recognize/",{
+            method:"POST",
+            body:formdata
+        }).then(function(response){
+            return response.json();
+        }).then(function(response){
+            console.log(response);
+            document.querySelector("#face_recognition_image").src="data:image/jpeg;base64,"+response["pred_image"].split('\'')[1];                          
+            document.querySelector("#face_recognition_image").style.width="unset";
+        })
+    }
+}
+
+
+
+
+
+function add_person_row(person_id,remarks)
+{
+//#db_people_table
+// <tr>
+//    <td>anuj</td>
+//    <td>Front_face</td>
+//
+//    <td>
+//        <button class="remove"><i class="fa-solid fa-close"></i></button>
+//    </td>
+// </tr>
+    var table_row=document.createElement("tr");
+    var person_id_tag=document.createElement("td");
+    person_id_tag.innerText=person_id;
+    var remarks_tag=document.createElement("td");
+    remarks_tag.innerText=remarks;
+    
+    var remove_tag=document.createElement("td");
+    remove_tag.innerHTML='<button class="remove" onclick="delete_person(this);"><i class="fa-solid fa-close"></i></button>';
+    table_row.appendChild(person_id_tag);
+    table_row.appendChild(remarks_tag);
+    table_row.appendChild(remove_tag);
+    
+    // document.querySelector("#db_people_table").appendChild(table_row);
+    var table=document.querySelector("#db_people_table > tbody");
+    table.after(table_row);
+}
+
+
+// get_all_persons_from_db/
+fetch("get_all_persons_from_db/").then(function(response){
+    return response.json();
+}).then(function(response){
+    console.log(response);
+    for (var i=0 ; i<response['person_ids'].length;i++){
+        add_person_row(response['person_ids'][i],response['remarks'][i])
+    }
+})
+
+
+
+
+function delete_person(elem){
+    // console.log(elem);
+    console.log(elem.getAttribute("class"));   
+    var row=elem.parentNode.parentNode;
+    // username:row.firstChild.innerText
+
+    if (elem.getAttribute("class")=="remove")
+    {
+        const response = confirm("Are you sure you want to do that?");
+        if (!response)
+        {
+            return;
+        }
+    }
+
+    
+    fetch("remove_person_from_db/",{
+        method:"POST",
+        headers: { "Content-Type": "application/json"},
+        body:JSON.stringify({"person_id":row.firstChild.innerText})
+    }).then(function(response){
+        return response.json();
+    }).then(function(response){
+        console.log("response:",response);
+        
+        row.remove();
+    })
+    
+    
+    
+}
+
+
+function show_settings(){
+    document.querySelector('#settings_menu').style.display='block';
+    document.querySelector('#container').classList.add("blur");
+}
+function hide_settings(){
+    document.querySelector('#settings_menu').style.display='none';
+    document.querySelector('#container').classList.remove("blur");
+}
+
+
+
+function get_settings(){
+    fetch("get_settings/",{
+        method:"GET"
+    }).then(function(response){
+        return response.json();
+    }).then(function(res){
+        console.log(res);
+
+        p_thres.value=p_thresValue.innerText=res['p_thres'];
+        nms_thres.value=nms_thresValue.innerText=res['nms_thres'];
+        
+        small_size.value=small_sizeValue.innerText=res['small_size'];
+        large_size.value=large_sizeValue.innerText=res['large_size'];
+
+        d_thres.value=d_thresValue.innerText=res['d_thres'];
+        a_thres.value=a_thresValue.innerText=res['a_thres'];
+
+        db_mode.value=res['db_mode'];
+        fr_mode.value=res['fr_mode'];
+        console.log(res['db_mode'],res['fr_mode']);
+    })
+}
+get_settings();
+// document.querySelector('#p_thres')
+// document.querySelector('#p_thres').value
+
+function update_settings(){
+    var new_settings=new Object();
+    new_settings['p_thres']=p_thres.value;
+    new_settings['nms_thres']=nms_thres.value;
+    new_settings['small_size']=small_size.value;
+    new_settings['large_size']=large_size.value;
+    new_settings['d_thres']=d_thres.value;
+    new_settings['a_thres']=a_thres.value;
+    new_settings['db_mode']=db_mode.value;
+    new_settings['fr_mode']=fr_mode.value;
+    
+    fetch("update_settings/",{
+        method:"POST",
+        headers:{'content-type': 'application/json'},
+        body:JSON.stringify(new_settings)
+    }).then(function(response){
+        return response.json();
+    }).then(function(res){
+        console.log(res);
+        if(res['message']=='success')
+            hide_settings();
+    }
+    );
+}
+
+function reset_settings(){
+    fetch("reset_settings/",{
+        method:"GET"
+    }).then(function(response){
+        return response.json();
+    }).then(function(res){
+        console.log(res);
+        if(res['message']=='success')
+            get_settings();
+    }
+    );
+}

app/static/user/login.css

@@ -0,0 +1,49 @@
+#container{
+    position: absolute;
+    top:50%;
+    left:50%;
+    transform:translate(-50%,-50%);
+    display: flex;
+    row-gap: 20px;
+    flex-direction: column;
+    align-items: center;
+    border:2px solid black;
+    /* box-sizing: border-box; */
+    
+    padding: 20px;
+}
+#container>h1{
+    text-align: center;
+    margin: 0px;
+}
+#container>p{
+    text-align: center;
+    margin: 0px;
+    margin-bottom: 5px;
+    visibility: hidden;
+    color:red;
+}
+.active{
+    visibility: visible !important;
+}
+
+#container>div{
+    display: flex;
+    width:314px;
+    justify-content: space-between;
+}
+#container>div>p{
+    margin: 0;
+}
+
+#container>div>input{
+    border:none;
+    outline:none;
+    border-bottom:1px solid black;
+}
+
+#container>input{
+    width:30%;
+    margin: 10px;
+}
+

app/static/user/registeration.css

@@ -0,0 +1,44 @@
+#container{
+    position: absolute;
+    top:50%;
+    left:50%;
+    transform:translate(-50%,-50%);
+    display: flex;
+    row-gap: 20px;
+    flex-direction: column;
+    align-items: center;
+    border:2px solid black;
+    /* box-sizing: border-box; */
+    
+    padding: 20px;
+}
+#container>h1{
+    text-align: center;
+    margin: 0px;
+}
+#container>p{
+    text-align: center;
+    margin: 0px;
+    margin-bottom: 5px;
+    visibility: hidden;
+    color:red;
+}
+
+#container>div{
+    display: flex;
+    width:314px;
+    justify-content: space-between;
+}
+#container>div>p{
+    margin: 0;
+}
+
+#container>div>input{
+    border:none;
+    outline:none;
+    border-bottom:1px solid black;
+}
+
+#container>input{
+    width:30%;
+}

app/static/user/registeration.js

@@ -0,0 +1,74 @@
+function check_username(elem){
+    if(elem.value!=''){
+        fetch(`/user/is_username_available/?username=${elem.value}`,{
+            method:"GET",
+            
+        }).then(function(response){
+            return response.json();
+        }).then(function(response){
+            // show a indicator that this username is available
+            if(response['available'])
+            {
+                // show green indicator
+                console.log("Username available");
+                elem.dataset.valid=true;
+                elem.style.borderColor='green';
+                elem.style.borderWidth=4;
+            }
+            else
+            {
+                // show red indicator
+                console.log("Username unavailable");
+                elem.dataset.valid=false;
+                elem.style.borderColor='red';
+                elem.style.borderWidth=4;
+            }
+        });
+    }
+}
+
+function check_password_is_matching(confirm_password){
+    var password=document.querySelector("#password");
+    if(confirm_password.value!=password.value){
+        confirm_password.style.borderColor='red';
+        confirm_password.style.borderWidth=4;
+    }
+    else{
+        confirm_password.style.borderColor='green';
+        confirm_password.style.borderWidth=4;
+    }
+}
+
+function validate_form(form){
+    if(form.username.dataset.valid=="false"){
+        document.querySelector("#container>p").style.visibility='visible';
+        document.querySelector("#container>p").innerText="username not available";
+        return false;
+    }
+    else if(form.password.value!=form.confirm_password.value){
+        document.querySelector("#container>p").style.visibility='visible';
+        document.querySelector("#container>p").innerText="password not matching";
+        return false;
+    }
+    else{
+        return true;
+    }
+}
+
+function count_words(elem){
+    var count = 0;
+          
+    // Split the words on each
+    // space character 
+    var split = elem.value.split(' ');
+    
+    // Loop through the words and 
+    // increase the counter when 
+    // each split word is not empty
+    for (var i = 0; i < split.length; i++) {
+        if (split[i] != "") {
+            count += 1;
+        }
+    }
+    console.log("count:",count)
+}

app/templates/admin/dashboard.html

@@ -0,0 +1,28 @@
+{% extends 'base.html' %}
+{% block title %}Dashboard{% endblock %}
+{% block css %}
+    <link type="text/css" rel="stylesheet" href="{{ url_for('static',filename='admin/dashboard.css') }}">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
+{% endblock %}
+{% block body %}        
+
+
+    <table id="access_requests_table">
+        <tr>
+            <th>Username</th>
+            <th>request message</th>
+            <th>accept/cancel</th>
+        </tr> 
+    </table>
+    <br>
+    <br>
+    <table id="access_granted_table">
+        <tr>
+            <th>Username</th>
+            <th>remove_access</th>
+        </tr> 
+    </table>
+        
+        <script src="{{ url_for('static',filename='admin/dashboard.js') }}"></script>
+        
+{% endblock %}

app/templates/admin/login.html

@@ -0,0 +1,25 @@
+{% extends 'base.html' %}
+{% block title %}Login{% endblock %}
+{% block css %}
+    <link type="text/css" rel="stylesheet" href="{{ url_for('static',filename='admin/login.css') }}">
+    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"> -->
+{% endblock %}
+{% block body %}        
+        <form id="container" action="/admin/authenticate/" method="post">
+            <h1>Log-In</h1>
+            <p class="{{message_class}}">{{message}}</p>
+            <div>
+                <p>Enter Username:</p>
+                <input type="username" name="username" required>
+            </div>
+            <div>
+                <p>Enter password:</p>
+                <input type="password" name="password" required>
+            </div>
+            <input type="submit">
+            <!-- <button>Sign-in</button> -->
+            
+        </form>
+        <!-- <script src="{{ url_for('static',filename='/login.js') }}"></script> -->
+        
+{% endblock %}

app/templates/base.html

@@ -0,0 +1,13 @@
+<html>
+    <head>
+        
+        <title>{% block title %}Face Recognization{% endblock %}</title>
+        
+        <link type="image/*" rel="icon" href="{{ url_for('static',filename='demo/index/icon.jpg' ) }}">
+
+        {% block css %}{% endblock %}
+    </head>
+    <body>
+        {% block body %}{% endblock %}
+    </body>
+</html>

app/templates/demo.html

@@ -0,0 +1 @@
+<h1>demo page</h1>

app/templates/demo/index.html

@@ -0,0 +1,130 @@
+{% extends 'base.html' %}
+{% block title %}Face Recognization{% endblock %}
+{% block css %}
+    <link type="text/css" rel="stylesheet" href="{{ url_for('static',filename='demo/index/dark.css') }}">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
+{% endblock %}
+{% block body %}        
+    <i  class="fa-solid fa-gear settings_btn" onclick="show_settings();"></i>
+    <div id="container">
+        <div class="left-section">
+            <!-- Databases images upload -->
+            <div id="db_images_bar">
+                <button class="btn add_button" onclick="document.querySelector('.add_button>input').click();">
+                    <input type="file" accept="image/*" style="display:none;" >
+                    <i class="fa-solid fa-plus"></i>
+                    add image
+                </button>
+                <div id="db_images"></div>
+            </div>
+
+            <!-- Face Recognition output -->
+            <img id="face_rec_image">
+            
+            <!-- Face Recognition buttons -->
+            <div class="buttons">
+                <div>
+                    <input type="file" id="face_rec_input" accept="image/*" style="display:none;" onchange="load_image_preview(this);">
+                    <input type="button" value="Upload" class="btn" onclick="document.querySelector('.buttons>div>#face_rec_input').click();">
+                    <input type="button" value="recognize" class="btn" onclick="update_crops_labels(document.querySelector('.buttons>div>#face_rec_input'))">
+                </div>
+            </div>
+        </div>
+        <div class="right-section">
+            <!--all unassigned cropped images-->
+            <div id="unassigned_faces" class="droppable" ondragover="allowDrop(event)" ondrop="drop(event,this)"></div>
+            <p>Drag faces to names</p>
+            <!--assigned faces with names list-->
+            <div id="name_list">
+                <div class="person droppable" data-dropto=".faces" ondragover="allowDrop(event)" ondrop="drop(event,this.querySelector('.faces'))">
+                    <input type="text" value="person-1" ondrop="return false;" onkeyup="deselect(event,this);">
+                    <div class="faces"></div>
+                    <i class="fa-solid fa-xmark" onclick="remove_person(this.parentElement);"></i>
+                    
+                </div>
+            </div>
+            <!--add name button-->
+            <div class="buttons">
+                <input type="button" value="add name" class="btn" onclick="add_person();" id="add_name_btn">
+            </div>
+            
+
+        </div>
+    </div>
+    
+    <div id="settings_menu">
+        <h1>settings</h1>
+        <i class="fa-solid fa-xmark close_btn" onclick="hide_settings();"></i>
+        
+        <div class="settings">
+            <div class="reset_btn_container">
+                <i class="fa-solid fa-rotate-left reset_btn" onclick="reset_settings();"></i>
+            </div>
+            <dl>
+                <li>Face detector Modes</li>
+                <dd>
+                    <a>db_mode :</a>
+                    <select id="db_mode">
+                        <option value="small">small</option>
+                        <option value="large">large</option>
+                        <option value="both">both</option>
+                      </select>
+                    
+                </dd>
+                <dd>
+                    <a>fr_mode :</a>
+                    <select id="fr_mode">
+                        <option value="small">small</option>
+                        <option value="large">large</option>
+                        <option value="both">both</option>
+                      </select>
+                    
+                </dd>
+                <br>
+                <li>Face detector</li>
+                <dd>
+                    <a>p_thres :</a>
+                    <input id="p_thres" type="range" min="0" max="1" step="0.05" oninput="p_thresValue.innerText=this.value">
+                    <a id="p_thresValue"></a>
+                </dd>
+                <dd>
+                    <a>nms_thres :</a>
+                    <input id="nms_thres" type="range" min="0" max="1" step="0.05" oninput="nms_thresValue.innerText=this.value">
+                    <a id="nms_thresValue"></a>
+                </dd>
+                <dd>
+                    <a>small_size :</a>
+                    <input id="small_size" type="range" min="64" max="2080" step="32" oninput="small_sizeValue.innerText=this.value">
+                    <a id="small_sizeValue"></a>
+                </dd>
+                <dd>
+                    <a>large_size :</a>
+                    <input id="large_size" type="range" min="64" max="2080" step="32" oninput="large_sizeValue.innerText=this.value">
+                    <a id="large_sizeValue"></a>
+                </dd>
+                <br>
+                <li>Face Recognizer</li>
+                <dd>
+                    <a>d_thres :</a>
+                    <input id="d_thres" type="range" min="0" max="1" step="0.05" oninput="d_thresValue.innerText=this.value">
+                    <a id="d_thresValue"></a>
+                </dd>
+                <br>
+                <li>Aligner</li>
+                <dd>
+                    <a>a_thres :</a>
+                    <input id="a_thres" type="range" min="0" max="1" step="0.05" oninput="a_thresValue.innerText=this.value">
+                    <a id="a_thresValue"></a>
+                </dd>
+                
+                
+            </dl>
+        </div>
+        <div id="save_btn_container"><button id="save_settings_btn" onclick="update_settings();">Save</button></div>
+        
+    </div>
+
+    <script src="{{ url_for('static',filename='demo/index/script.js' ) }}"></script>
+
+    {% endblock %}

app/templates/user/dashboard.html

@@ -0,0 +1,157 @@
+{% extends 'base.html' %}
+{% block title %}Dashboard{% endblock %}
+{% block css %}
+    <link type="text/css" rel="stylesheet" href="{{ url_for('static',filename='user/dashboard.css') }}">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
+{% endblock %}
+{% block body %} 
+<!--     
+    <div id="request-api-access">
+        <textarea onkeyup="count_words(this);" id="inputField" rows=10 cols="60">{{data_dict["request_message"]}}</textarea>
+        <button><i class="fa-solid fa-plus"></i> Request Api Access</button>
+    </div> -->
+    
+    <br>
+    <br>
+    
+    {% if data_dict['access_key']==None %}
+
+    <p>You will be soon provided access after someone reviews your api access request</p>
+    
+
+    {% elif data_dict['access_key']=='rejected' %}
+    <p>sorry you are not given access </p>
+    {% else %}
+    <i  class="fa-solid fa-gear settings_btn" onclick="show_settings();"></i>
+    <div id="container">
+        <div id="api-key">
+            <!-- <input type="text" value="{{data_dict['access_key']}}"> -->
+            <p>{{data_dict['access_key']}}</p>
+            <button class="copy"><i class="fa fa-copy"></i></button>
+            <button class="refresh"><i class="fa fa-refresh"></i> Request new key</button>
+        </div>
+            <br>
+        <form id="database-form" onsubmit="return false;">
+            
+            <div class="field">
+                <p>Name:</p>
+                <input class="person_name" type="text">
+            </div>
+
+            <div class="field">
+                <button class="btn add_button" onclick="document.querySelector('.add_button>input').click();">
+                    <input type="file" accept="image/*" style="display:none;" >
+                    <i class="fa-solid fa-plus"></i>
+                    add image
+                </button>
+            </div>
+
+
+            <div id="unassigned_faces" class="droppable" ondragover="allowDrop(event)" ondrop="drop(event,this)"></div>
+            <p>Drag faces to remarks</p>
+
+            <!--assigned faces with names list-->
+            <div id="remark_list">
+                <div class="remark droppable" data-dropto=".faces" ondragover="allowDrop(event)" ondrop="drop(event,this.querySelector('#remark_list>.remark>.faces'))">
+                    <input type="text" value="front-face" ondrop="return false;" onkeyup="deselect(event,this);">
+                    <div class="faces"></div>
+                    <i class="fa-solid fa-xmark" onclick="remove_remark(this.parentElement);"></i>
+                    
+                </div>
+            </div>
+            <!--add name button-->
+            <div class="buttons">
+                <input type="button" value="add remark" class="btn" onclick="add_remark();" id="add_remark_btn">
+            </div>
+            <input type="button" value="submit" onclick="update_db_crops();">       
+        </form>
+        <table id="db_people_table">
+            <tbody>
+                <tr>
+                    <th>Person_ID</th>
+                    <th>Remarks</th>
+                    <th>Remove</th>
+                </tr> 
+            </tbody>
+        </table>
+        <br>
+        <br>
+        <input type="file" onchange="face_recoginization(this);">
+        <img id="face_recognition_image">
+    </div>
+
+    <div id="settings_menu">
+        <h1>settings</h1>
+        <i class="fa-solid fa-xmark close_btn" onclick="hide_settings();"></i>
+        
+        <div class="settings">
+            <div class="reset_btn_container">
+                <i class="fa-solid fa-rotate-left reset_btn" onclick="reset_settings();"></i>
+            </div>
+            <dl>
+                <li>Face detector Modes</li>
+                <dd>
+                    <a>db_mode :</a>
+                    <select id="db_mode">
+                        <option value="small">small</option>
+                        <option value="large">large</option>
+                        <option value="both">both</option>
+                      </select>
+                    
+                </dd>
+                <dd>
+                    <a>fr_mode :</a>
+                    <select id="fr_mode">
+                        <option value="small">small</option>
+                        <option value="large">large</option>
+                        <option value="both">both</option>
+                      </select>
+                    
+                </dd>
+                <br>
+                <li>Face detector</li>
+                <dd>
+                    <a>p_thres :</a>
+                    <input id="p_thres" type="range" min="0" max="1" step="0.05" oninput="p_thresValue.innerText=this.value">
+                    <a id="p_thresValue"></a>
+                </dd>
+                <dd>
+                    <a>nms_thres :</a>
+                    <input id="nms_thres" type="range" min="0" max="1" step="0.05" oninput="nms_thresValue.innerText=this.value">
+                    <a id="nms_thresValue"></a>
+                </dd>
+                <dd>
+                    <a>small_size :</a>
+                    <input id="small_size" type="range" min="64" max="2080" step="32" oninput="small_sizeValue.innerText=this.value">
+                    <a id="small_sizeValue"></a>
+                </dd>
+                <dd>
+                    <a>large_size :</a>
+                    <input id="large_size" type="range" min="64" max="2080" step="32" oninput="large_sizeValue.innerText=this.value">
+                    <a id="large_sizeValue"></a>
+                </dd>
+                <br>
+                <li>Face Recognizer</li>
+                <dd>
+                    <a>d_thres :</a>
+                    <input id="d_thres" type="range" min="0" max="1" step="0.05" oninput="d_thresValue.innerText=this.value">
+                    <a id="d_thresValue"></a>
+                </dd>
+                <br>
+                <li>Aligner</li>
+                <dd>
+                    <a>a_thres :</a>
+                    <input id="a_thres" type="range" min="0" max="1" step="0.05" oninput="a_thresValue.innerText=this.value">
+                    <a id="a_thresValue"></a>
+                </dd>
+                
+                
+            </dl>
+        </div>
+        <div id="save_btn_container"><button id="save_settings_btn" onclick="update_settings();">Save</button></div>
+        
+    </div>
+    <script src="{{ url_for('static',filename='user/dashboard.js') }}"></script>
+    {% endif %}
+        
+{% endblock %}

app/templates/user/login.html

@@ -0,0 +1,25 @@
+{% extends 'base.html' %}
+{% block title %}Login{% endblock %}
+{% block css %}
+    <link type="text/css" rel="stylesheet" href="{{ url_for('static',filename='user/login.css') }}">
+    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"> -->
+{% endblock %}
+{% block body %}        
+        <form id="container" action="/user/authenticate/" method="post">
+            <h1>Log-In</h1>
+            <p class="{{message_class}}">{{message}}</p>
+            <div>
+                <p>Enter Username:</p>
+                <input type="username" name="username" required>
+            </div>
+            <div>
+                <p>Enter password:</p>
+                <input type="password" name="password" required>
+            </div>
+            <input type="submit">
+            <!-- <button>Sign-in</button> -->
+            
+        </form>
+        <script src="{{ url_for('static',filename='user/login.js') }}"></script>
+        
+{% endblock %}

app/templates/user/registeration.html

@@ -0,0 +1,34 @@
+{% extends 'base.html' %}
+{% block title %}Sign Up{% endblock %}
+{% block css %}
+    <link type="text/css" rel="stylesheet" href="{{ url_for('static',filename='user/registeration.css') }}">
+    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"> -->
+{% endblock %}
+{% block body %}        
+        <form id="container" method="post" action="/user/add_account/" onsubmit="return validate_form(this)">
+            <h1>Sign-Up</h1>
+            <p>message</p>
+            <div>
+                <p>Enter Username:</p>
+                <input type="username" name="username" required onblur="check_username(this);">
+            </div>
+            <div>
+                <p>Enter password:</p>
+                <input type="password" name="password" id="password" required>
+            </div>
+            <div>
+                <p>Confirm password:</p>
+                <input type="password" name="confirm_password" required onkeyup="check_password_is_matching(this);">
+            </div>
+            <div>
+                <!-- <p>What will you use this api for:</p> -->
+                <textarea placeholder="What will you use this api for, Write atleast 2-3 lines" rows=10 cols="60" name="request_message" id="request_message" required></textarea>
+                <!-- <input type="text"> -->
+            </div>
+            <input type="submit" >
+            <!-- <button>Sign-in</button> -->
+            
+        </form>
+        <script src="{{ url_for('static',filename='user/registeration.js') }}"></script>
+        
+{% endblock %}

app/user/__init__.py

@@ -0,0 +1,8 @@
+from flask import Blueprint
+from datetime import timedelta
+
+bp=Blueprint("user",__name__)
+session_expiring_time=timedelta(minutes=45)
+settings=dict()
+
+from app.user import routes