Merge branch 'it19953748' into 'master'

It19953748

See merge request !5

.idea/.gitignore

+# Default ignored files
+/shelf/
+/workspace.xml

.idea/Final.iml

+<?xml version="1.0" encoding="UTF-8"?>
+<module type="PYTHON_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file

.idea/inspectionProfiles/profiles_settings.xml

+<component name="InspectionProjectProfileManager">
+  <settings>
+    <option name="USE_PROJECT_PROFILE" value="false" />
+    <version value="1.0" />
+  </settings>
+</component>
\ No newline at end of file

.idea/modules.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/Final.iml" filepath="$PROJECT_DIR$/.idea/Final.iml" />
+    </modules>
+  </component>
+</project>
\ No newline at end of file

main.py

+from website import create_app 
+ 
+
+app = create_app()
+
+
+if __name__ == '__main__':
+    app.run(debug=True)
\ No newline at end of file

website/__init__.py

+from flask import Flask
+from flask_sqlalchemy import SQLAlchemy
+from os import path
+from flask_login import LoginManager
+
+db = SQLAlchemy()
+DB_NAME = "database.db"
+
+
+def create_app():
+    app = Flask(__name__)
+    app.config['SECRET_KEY'] = 'hjshjhdjah kjshkjdhjs'
+    app.config['SQLALCHEMY_DATABASE_URI'] = f'sqlite:///{DB_NAME}'
+    db.init_app(app)
+
+    from .views import views
+    from .auth import auth
+    
+
+    app.register_blueprint(views, url_prefix='/')
+    app.register_blueprint(auth, url_prefix='/')
+    
+    from .models import User, Note
+    
+    with app.app_context():
+        db.create_all()
+
+    login_manager = LoginManager()
+    login_manager.login_view = 'auth.login'
+    login_manager.init_app(app)
+
+    @login_manager.user_loader
+    def load_user(id):
+        return User.query.get(int(id))
+
+    return app
+
+
+def create_database(app):
+    if not path.exists('website/' + DB_NAME):
+        db.create_all(app=app)
+        print('Created Database!')
+
+
+        
\ No newline at end of file

website/auth.py

+from flask import Blueprint, render_template, request, flash, redirect, url_for,send_from_directory, Response, jsonify
+from .models import User
+from werkzeug.security import generate_password_hash, check_password_hash
+from . import db   ##means from __init__.py import db
+from flask_login import login_user, login_required, logout_user, current_user
+from werkzeug.utils import secure_filename
+import os
+from PIL import Image
+from werkzeug.utils import secure_filename
+import os
+
+
+
+import face_recognition
+import cv2
+import numpy as np
+
+import threading
+from datetime import datetime
+
+
+auth = Blueprint('auth', __name__)
+
+UPLOAD_FOLDER = 'website/wanted_people_photos'  # Folder where the images will be saved
+ALLOWED_EXTENSIONS = {'jpg', 'jpeg', 'png'}  # Allowed file extensions
+
+# Function to check if a filename has an allowed extension
+def allowed_file(filename):
+    return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
+
+@auth.route('/login', methods=['GET', 'POST'])
+def login():
+    if request.method == 'POST':
+        email = request.form.get('email')
+        password = request.form.get('password')
+
+        user = User.query.filter_by(email=email).first()
+        if user:
+            if check_password_hash(user.password, password):
+                flash('Logged in successfully!', category='success')
+                login_user(user, remember=True)
+                return redirect(url_for('views.home'))
+            else:
+                flash('Incorrect password, try again.', category='error')
+        else:
+            flash('Email does not exist.', category='error')
+
+    return render_template("login.html", user=current_user)
+
+
+@auth.route('/logout')
+@login_required
+def logout():
+    logout_user()
+    return redirect(url_for('auth.login'))
+
+
+@auth.route('/sign-up', methods=['GET', 'POST'])
+def sign_up():
+    if request.method == 'POST':
+        email = request.form.get('email')
+        first_name = request.form.get('firstName')
+        password1 = request.form.get('password1')
+        password2 = request.form.get('password2')
+
+        user = User.query.filter_by(email=email).first()
+        if user:
+            flash('Email already exists.', category='error')
+        elif len(email) < 4:
+            flash('Email must be greater than 3 characters.', category='error')
+        elif len(first_name) < 2:
+            flash('First name must be greater than 1 character.', category='error')
+        elif password1 != password2:
+            flash('Passwords don\'t match.', category='error')
+        elif len(password1) < 7:
+            flash('Password must be at least 7 characters.', category='error')
+        else:
+            new_user = User(email=email, first_name=first_name, password=generate_password_hash(
+                password1, method='sha256'))
+            db.session.add(new_user)
+            db.session.commit()
+            login_user(new_user, remember=True)
+            flash('Account created!', category='success')
+            return redirect(url_for('views.home'))
+
+    return render_template("sign_up.html", user=current_user)
+
+
+
+@auth.route('/upload')
+@login_required
+def upload():
+    
+    
+    return render_template("upload.html", user=current_user)
+
+@auth.route('/video')
+def video():
+    return Response(run_cctv_detection(),mimetype='multipart/x-mixed-replace; boundary=frame')
+
+@auth.route('/person_name')
+def person_name():
+    global real_time_detect_name
+    return real_time_detect_name
+
+#pasindu
+@auth.route('/ticket')
+@login_required
+def ticket():
+    
+    return render_template("ticket.html", user=current_user)
+
+#Malinda
+@auth.route('/static_dasbord')
+@login_required
+def static_dasbord():
+    
+    return render_template("static_dasbord.html", user=current_user)
+
+@auth.route('/upload_image')
+@login_required
+def upload_image():
+    return render_template("upload_image.html", user=current_user)
+
+@auth.route('/upload_images', methods=['GET', 'POST'])
+@login_required
+def upload_images():
+    if request.method == 'POST':
+        # Check if an image file was submitted
+        if 'image' in request.files:
+            image = request.files['image']
+            # Check if the filename is empty or not allowed
+            if image.filename == '' or not allowed_file(image.filename):
+                flash('Invalid image file', category='error')
+            else:
+                # Save the uploaded image to the designated folder
+                filename = secure_filename(image.filename)
+                image.save(os.path.join(UPLOAD_FOLDER, filename))
+                flash('Image uploaded successfully!', category='success')
+                return redirect(url_for('views.home'))
+
+    return render_template("upload_image.html", user=current_user)
+
+
+@auth.route('/detection_list')
+def detection_list():
+    return jsonify([{
+        'person_name': entry.person_name,
+        'time': entry.time
+    } for entry in detection_list])
+
+
+detection_list = []
+
+class DetectionEntry:
+    def __init__(self, person_name):
+        self.person_name = person_name
+        self.time = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
+
+
+real_time_detect_name = 'no one detect'
+# Path to the alert sound file
+
+
+def run_cctv_detection():
+
+    global real_time_detect_name
+
+    video_capture = cv2.VideoCapture(0)
+
+    wn_folder_parth ='C:\RP Final\Final\website\wanted_people_photos'
+    pepl_list = os.listdir(wn_folder_parth)
+    known_face_names = []
+    known_face_encodings = []
+
+    for pepl in pepl_list:
+
+        print(wn_folder_parth+'/'+pepl)
+
+        people_face = face_recognition.load_image_file(wn_folder_parth+'/'+pepl)
+        people_face_encoding = face_recognition.face_encodings(people_face)[0]
+        known_face_encodings.append(people_face_encoding)
+
+        name,format = pepl.split(".")
+        known_face_names.append(name)
+        print('Enterd peoples name - ',name)
+
+
+    face_locations = []
+    face_encodings = []
+    face_names = []
+    process_this_frame = True
+
+    while True:
+        # Grab a single frame of video
+        ret, frame = video_capture.read()
+
+        # Only process every other frame of video to save time
+        if process_this_frame:
+            # Resize frame of video to 1/4 size for faster face recognition processing
+            small_frame = cv2.resize(frame, (0, 0), fx=0.25, fy=0.25)
+            
+            # Convert the image from BGR color (which OpenCV uses) to RGB color (which face_recognition uses)
+            rgb_small_frame = small_frame[:, :, ::-1]
+
+            # Find all the faces and face encodings in the current frame of video
+            face_locations = face_recognition.face_locations(rgb_small_frame)
+            face_encodings = face_recognition.face_encodings(rgb_small_frame, face_locations)
+
+            face_names = []
+            for face_encoding in face_encodings:
+                # See if the face is a match for the known face(s)
+                matches = face_recognition.compare_faces(known_face_encodings, face_encoding)
+                name = "Unknown"
+
+                # # If a match was found in known_face_encodings, just use the first one.
+                # if True in matches:
+                #     first_match_index = matches.index(True)
+                #     name = known_face_names[first_match_index]
+
+                # Or instead, use the known face with the smallest distance to the new face
+                face_distances = face_recognition.face_distance(known_face_encodings, face_encoding)
+                best_match_index = np.argmin(face_distances)
+                if matches[best_match_index]:
+                    name = known_face_names[best_match_index]
+           
+                  
+                 # Add the detection entry to the list
+                detection_entry = DetectionEntry(name)
+                detection_list.append(detection_entry)
+
+                face_names.append(name)
+                
+        process_this_frame = not process_this_frame
+
+        # Display the results
+        for (top, right, bottom, left), name in zip(face_locations, face_names):
+            # Scale back up face locations since the frame we detected in was scaled to 1/4 size
+            top *= 4
+            right *= 4
+            bottom *= 4
+            left *= 4
+
+            # Draw a box around the face
+            cv2.rectangle(frame, (left, top), (right, bottom), (0, 0, 255), 2)
+
+            # Draw a label with a name below the face
+            cv2.rectangle(frame, (left, bottom - 35), (right, bottom), (0, 0, 255), cv2.FILLED)
+            font = cv2.FONT_HERSHEY_DUPLEX
+            cv2.putText(frame, name, (left + 6, bottom - 6), font, 1.0, (255, 255, 255), 1)
+
+            real_time_detect_name = name
+
+        # Display the resulting image
+            
+            frame = cv2.resize(frame, (0, 0), fx=1, fy=1)
+            frame_rgb = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)
+            ret, jpeg = cv2.imencode('.jpg', frame_rgb)
+
+            yield(b'--frame\r\n'
+                    b'Content-Type: image/jpeg\r\n\r\n' + jpeg.tobytes() +  b'\r\n\r\n')
+         
+        
+        # Hit 'q' on the keyboard to quit!
+        if cv2.waitKey(1) & 0xFF == ord('q'):
+            break
+
+def gen():
+    global real_time_detect_name
+
+t1 = threading.Thread(target=run_cctv_detection)
+t1.start()
+
+
+
+# while True:
+#
+#
+#     if real_time_detect_name != 'no one detect':
+#
+#         person_name = real_time_detect_name
+#         real_time_detect_name = 'no one detect'
+#
+#         print(person_name)
+
+
+
+
+def get_face_data():
+
+    global real_time_detect_name
+
+    send_data = str(real_time_detect_name)
+    real_time_detect_name = 'no one detect'
+
+    return send_data
+
+

website/models.py

+from . import db
+from flask_login import UserMixin
+from sqlalchemy.sql import func
+
+
+
+class Note(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    data = db.Column(db.String(10000))
+    date = db.Column(db.DateTime(timezone=True), default=func.now())
+    user_id = db.Column(db.Integer, db.ForeignKey('user.id'))
+
+
+class User(db.Model, UserMixin):
+    id = db.Column(db.Integer, primary_key=True)
+    email = db.Column(db.String(150), unique=True)
+    password = db.Column(db.String(150))
+    first_name = db.Column(db.String(150))
+    notes = db.relationship('Note')
+
+

website/templates/base.html

+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <style>
+    body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
+    
+    body, html {
+      height: 100%;
+      line-height: 1.8;
+    }
+    
+    /* Full height image header */
+    .bgimg-1 {
+      background-position: center;
+      background-size: cover;
+      background-image: url("../static/2.jpg");
+      min-height: 100%;
+    }
+    
+    .w3-bar .w3-button {
+      padding: 16px;
+    }
+    </style>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link
+      rel="stylesheet"
+      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
+      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="stylesheet"
+      href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
+      crossorigin="anonymous"
+    />
+
+    <title>{% block title %}Home{% endblock %}</title>
+  </head>
+  <body>
+   
+      
+          {% if user.is_authenticated %}
+          <!-- Navbar (sit on top) -->
+    <div class="w3-top">
+      <div class="w3-bar w3-white w3-card" id="myNavbar">
+        <a href="#home" class="w3-bar-item w3-button w3-wide"><b><i>Fraud & Crime </i> </b></a>
+        <!-- Right-sided navbar links -->
+        <div class="w3-right w3-hide-small">
+          <a class="w3-bar-item w3-button" id="home" href="/">Home</a>
+          <a class="w3-bar-item w3-button" id="logout" href="/logout">Logout</a>
+          <a class="w3-bar-item w3-button" id="upload" href="/upload">Detection</a>
+          <a class="w3-bar-item w3-button" id="upload" href="/ticket">Ticket system</a>
+          <a class="w3-bar-item w3-button" id="upload" href="/static_dasbord">Static Dashbord</a>
+          <a class="w3-bar-item w3-button" id="upload" href="/upload_image">Upload Images</a>
+          <a href="#about" class="w3-bar-item w3-button">ABOUT</a>
+          <a href="#team" class="w3-bar-item w3-button"><i class="fa fa-user"></i> TEAM</a>
+          <a href="#work" class="w3-bar-item w3-button"><i class="fa fa-th"></i> WORK</a>
+          <a href="#contact" class="w3-bar-item w3-button"><i class="fa fa-envelope"></i> CONTACT</a>
+        
+        <!-- Hide right-floated links on small screens and replace them with a menu icon -->
+    
+         
+          {% else %}
+          <a class="w3-bar-item w3-button" id="login" href="/login">Login</a>
+          <a class="w3-bar-item w3-button" id="signUp" href="/sign-up">Sign Up</a>
+          {% endif %}
+        </div>
+      </div>
+    </div>
+   
+
+    {% with messages = get_flashed_messages(with_categories=true) %} {% if
+    messages %} {% for category, message in messages %} {% if category ==
+    'error' %}
+    <div class="alert alert-danger alter-dismissable fade show" role="alert">
+      {{ message }}
+      <button type="button" class="close" data-dismiss="alert">
+        <span aria-hidden="true">&times;</span>
+      </button>
+    </div>
+    {% else %}
+    <div class="alert alert-success alter-dismissable fade show" role="alert">
+      {{ message }}
+      <button type="button" class="close" data-dismiss="alert">
+        <span aria-hidden="true">&times;</span>
+      </button>
+    </div>
+    {% endif %} {% endfor %} {% endif %} {% endwith %}
+
+    <div class="container">{% block content %} {% endblock %}</div>
+    <script
+      src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
+      integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
+      integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
+      integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
+      crossorigin="anonymous"
+    ></script>
+
+{% block javascript %}
+    <script type="text/javascript">
+      function deleteNote(noteId) {
+  fetch("/delete-note", {
+    method: "POST",
+    body: JSON.stringify({ noteId: noteId }),
+  }).then((_res) => {
+    window.location.href = "/";
+  });
+  }
+</script>
+{% endblock %}
+  </body>
+</html>
\ No newline at end of file

website/templates/index.html

+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Video Feed</title>
+  </head>
+  <body>
+    <h1>Video Feed</h1>
+    <img src="{{ url_for('video_feed_route') }}">
+  </body>
+</html>

website/templates/login.html

+{% extends "base.html" %} {% block title %}Login{% endblock %} {% block content
+  %}
+  
+
+
+
+    <section class="vh-100">
+      <div class="container-fluid h-custom">
+        <div class="row d-flex justify-content-center align-items-center h-100">
+          <div class="col-md-9 col-lg-6 col-xl-5">
+            <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-login-form/draw2.webp"
+              class="img-fluid" alt="Sample image">
+          </div>
+          <div class="col-md-8 col-lg-6 col-xl-4 offset-xl-1">
+            <form method="POST">
+             
+    
+              <div class="divider d-flex align-items-center my-4">
+               
+              </div>
+    
+              <!-- Email input -->
+              <div class="form-outline mb-4">
+                <input type="email" id="form3Example3" name="email" class="form-control form-control-lg"
+                  placeholder="Enter a valid email address" />
+                <label class="form-label" for="form3Example3">Email address</label>
+              </div>
+    
+              <!-- Password input -->
+              <div class="form-outline mb-3">
+                <input type="password" id="form3Example4" name="password" class="form-control form-control-lg"
+                  placeholder="Enter password" />
+                <label class="form-label" for="form3Example4">Password</label>
+              </div>
+    
+              <div class="d-flex justify-content-between align-items-center">
+                <!-- Checkbox -->
+                <div class="form-check mb-0">
+                  <input class="form-check-input me-2" type="checkbox" value="" id="form2Example3" />
+                  <label class="form-check-label" for="form2Example3">
+                    Remember me
+                  </label>
+                </div>
+                <a href="#!" class="text-body">Forgot password?</a>
+              </div>
+    
+              <div class="text-center text-lg-start mt-4 pt-2">
+                <button type="submit" class="btn btn-primary btn-lg"
+                  style="padding-left: 2.5rem; padding-right: 2.5rem;">Login</button>
+                <p class="small fw-bold mt-2 pt-1 mb-0">Don't have an account? <a href="#!"
+                    class="link-danger">Register</a></p>
+              </div>
+    
+            </form>
+          </div>
+        </div>
+      </div>
+      <div
+        class="d-flex flex-column flex-md-row text-center text-md-start justify-content-between py-4 px-4 px-xl-5 bg-primary">
+        <!-- Copyright -->
+        <div class="text-white mb-3 mb-md-0">
+          Frud & crime investigation
+        </div>
+        <!-- Copyright -->
+    
+        <!-- Right -->
+        <div>
+          <a href="#!" class="text-white me-4">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="#!" class="text-white me-4">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="#!" class="text-white me-4">
+            <i class="fab fa-google"></i>
+          </a>
+          <a href="#!" class="text-white">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+        </div>
+        <!-- Right -->
+      </div>
+    </section>
+  </form>
+  {% endblock %}
+ 
\ No newline at end of file

website/templates/sign_up.html

+{% extends "base.html" %} {% block title %}Sign Up{% endblock %} {% block
+    content %}
+    <form method="POST">
+      <h3 align="center">Sign Up</h3>
+      <div class="form-group">
+        <label for="email">Email Address</label>
+        <input
+          type="email"
+          class="form-control"
+          id="email"
+          name="email"
+          placeholder="Enter email"
+        />
+      </div>
+      <div class="form-group">
+        <label for="firstName">First Name</label>
+        <input
+          type="text"
+          class="form-control"
+          id="firstName"
+          name="firstName"
+          placeholder="Enter first name"
+        />
+      </div>
+      <div class="form-group">
+        <label for="password1">Password</label>
+        <input
+          type="password"
+          class="form-control"
+          id="password1"
+          name="password1"
+          placeholder="Enter password"
+        />
+      </div>
+      <div class="form-group">
+        <label for="password2">Password (Confirm)</label>
+        <input
+          type="password"
+          class="form-control"
+          id="password2"
+          name="password2"
+          placeholder="Confirm password"
+        />
+      </div>
+      <br />
+      <button type="submit" class="btn btn-primary">Submit</button>
+    </form>
+    {% endblock %}
\ No newline at end of file

website/templates/static_dasbord.html

+{% extends "base.html" %} {% block title %}Static Dashbord{% endblock %} {% block content
+    %}
+
+    <div>
+        <br>
+        <br>
+        <br>
+        
+        
+        <iframe src="http://localhost:8501/" name="iframe_a" style="border-style: none;" frameborder="0" border="0" cellspacing="0" height="800px" width="100%" title="Iframe Example"></iframe>
+    
+    </div>
+            
+    
+    </body>
+
+
+
+{% endblock %}
\ No newline at end of file

website/templates/ticket.html

+{% extends "base.html" %} {% block title %}Login{% endblock %} {% block content
+    %}
+
+    <div>
+        <br>
+        <br>
+        <br>
+        
+        
+        <iframe src="http://localhost:3000/" name="iframe_a" style="border-style: none;" frameborder="0" border="0" cellspacing="0" height="700px" width="100%" title="Iframe Example"></iframe>
+    
+    </div>
+            
+    
+    </body>
+
+
+
+{% endblock %}
\ No newline at end of file

website/templates/upload.html

+{% extends "base.html" %} {% block title %}Person detection{% endblock %} {% block content
+    %}
+   
+    
+
+        <html>
+          <head>
+            <title>Real-time Face Detection</title>
+            <style>
+              #video-container {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+              }
+            </style>
+          </head>
+          <body>
+            <br>
+            <br>
+            <br>
+            <br>
+            
+
+  <h1>Real-time Face Detection</h1>
+  <div id="video-container">
+    <img id="video-feed" src="{{ url_for('auth.video') }}" width="640" height="480">
+  </div>
+  <h2 id="person-name">Detected Person: {{ real_time_detect_name }}</h2>
+  <div id="detection-list">
+    <h3>Detection List:</h3>
+    <ul id="person-list"></ul>
+  </div>
+  <script>
+    const personNameElement = document.getElementById("person-name");
+    const personListElement = document.getElementById("person-list");
+
+    function updatePersonName() {
+      fetch("/person_name")
+        .then((response) => response.text())
+        .then((data) => {
+          personNameElement.textContent = "Detected Person: " + data;
+        });
+    }
+
+    function updateDetectionList() {
+      fetch("/detection_list")
+        .then((response) => response.json())
+        .then((data) => {
+          personListElement.innerHTML = "";
+          data.forEach((entry) => {
+            const listItem = document.createElement("li");
+            listItem.textContent = `${entry.person_name} - ${entry.time}`;
+            personListElement.appendChild(listItem);
+          });
+        });
+    }
+
+    setInterval(updatePersonName, 1000);
+    setInterval(updateDetectionList, 5000);
+  </script>
+</body>
+        </html>
+      
+    {% endblock %}
+
+
+
+
+    
\ No newline at end of file

website/templates/upload_image.html

+{% extends "base.html" %}{% block title %}UPLOAD{% endblock %}{% block content %}
+<br>
+<br>
+<style>
+    @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Poppins", sans-serif;
+}
+
+.container {
+  height: 100vh;
+  width: 100%;
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  background-color: #fcfcfc;
+}
+
+.card {
+  border-radius: 10px;
+  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.3);
+  width: 600px;
+  height: 260px;
+  background-color: #ffffff;
+  padding: 10px 30px 40px;
+}
+
+.card h3 {
+  font-size: 22px;
+  font-weight: 600;
+  
+}
+
+.drop_box {
+  margin: 10px 0;
+  padding: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  border: 3px dotted #a3a3a3;
+  border-radius: 5px;
+}
+
+.drop_box h4 {
+  font-size: 16px;
+  font-weight: 400;
+  color: #2e2e2e;
+}
+
+.drop_box p {
+  margin-top: 10px;
+  margin-bottom: 20px;
+  font-size: 12px;
+  color: #a3a3a3;
+}
+
+.btn {
+  text-decoration: none;
+  background-color: #005af0;
+  color: #ffffff;
+  padding: 10px 20px;
+  border: none;
+  outline: none;
+  transition: 0.3s;
+}
+
+.btn:hover{
+  text-decoration: none;
+  background-color: #ffffff;
+  color: #005af0;
+  padding: 10px 20px;
+  border: none;
+  outline: 1px solid #010101;
+}
+.form input {
+  margin: 10px 0;
+  width: 100%;
+  background-color: #e2e2e2;
+  border: none;
+  outline: none;
+  padding: 12px 20px;
+  border-radius: 4px;
+}
+
+    .gallery {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        grid-gap: 20px;
+        max-width: 800px;
+        margin: 0 auto;
+        padding: 20px;
+    }
+
+    .gallery img {
+        width: 100%;
+        height: auto;
+    }
+</style>
+<br>
+<div class="container">
+    <div class="card">
+        <header>
+    <h4>crime persone photos uplode here! </h4>
+          </header>
+    <h1>Upload Image</h1>
+    <form action="{{ url_for('auth.upload_images') }}" method="POST" enctype="multipart/form-data">
+        <input type="file" name="image" accept="image/*" required>
+        <input type="submit" value="Upload">
+    </form>
+
+    
+
+{% endblock %}

website/views.py

+from flask import Blueprint, render_template, request, flash, jsonify
+from flask_login import login_required, current_user
+from .models import Note
+from . import db
+import json
+from PIL import Image
+views = Blueprint('views', __name__)
+
+
+@views.route('/', methods=['GET', 'POST'])
+@login_required
+def home():
+    if request.method == 'POST': 
+        note = request.form.get('note')#Gets the note from the HTML 
+
+        if len(note) < 1:
+            flash('Note is too short!', category='error') 
+        else:
+            new_note = Note(data=note, user_id=current_user.id)  #providing the schema for the note 
+            db.session.add(new_note) #adding the note to the database 
+            db.session.commit()
+            flash('Note added!', category='success')
+
+    return render_template("home.html", user=current_user)
+
+
+@views.route('/delete-note', methods=['POST'])
+def delete_note():  
+    note = json.loads(request.data) # this function expects a JSON from the INDEX.js file 
+    noteId = note['noteId']
+    note = Note.query.get(noteId)
+    if note:
+        if note.user_id == current_user.id:
+            db.session.delete(note)
+            db.session.commit()
+
+    return jsonify({})
+

website/web_cam.py

+from flask import Flask, render_template, Response
+import cv2
+
+app = Flask(__name__)
+
+# Access the video feed
+def video_feed():
+    video_capture = cv2.VideoCapture(0)
+
+    while True:
+        # Read a single frame from the video capture
+        ret, frame = video_capture.read()
+
+        # Convert the frame to JPEG format
+        ret, jpeg = cv2.imencode('.jpg', frame)
+
+        # Yield the frame as a byte array for the streaming response
+        yield (b'--frame\r\n'
+               b'Content-Type: image/jpeg\r\n\r\n' + jpeg.tobytes() + b'\r\n\r\n')
+
+# Route for the HTML page
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+# Route for the video streaming
+@app.route('/video_feed')
+def video_feed_route():
+    return Response(video_feed(), mimetype='multipart/x-mixed-replace; boundary=frame')
+  
+
+if __name__ == '__main__':
+    app.run(debug=True)