initial commit

.dockerignore

@@ -0,0 +1,93 @@
+# Git
+.git
+.gitignore
+
+# CI
+.codeclimate.yml
+.travis.yml
+.taskcluster.yml
+
+# Docker
+docker-compose.yml
+.docker
+
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*/__pycache__/
+*/*/__pycache__/
+*/*/*/__pycache__/
+*.py[cod]
+*/*.py[cod]
+*/*/*.py[cod]
+*/*/*/*.py[cod]
+
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+env/
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+*.egg-info/
+.installed.cfg
+*.egg
+
+# PyInstaller
+#  Usually these files are written by a python script from a template
+#  before PyInstaller builds the exe, so as to inject date/other infos into it.
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.coverage
+.cache
+nosetests.xml
+coverage.xml
+
+# Translations
+*.mo
+*.pot
+
+# Django stuff:
+*.log
+
+# Sphinx documentation
+docs/_build/
+
+# PyBuilder
+target/
+
+# Virtual environment
+.env/
+.venv/
+venv/
+
+# PyCharm
+.idea
+
+# Python mode for VIM
+.ropeproject
+*/.ropeproject
+*/*/.ropeproject
+*/*/*/.ropeproject
+
+# Vim swap files
+*.swp
+*/*.swp
+*/*/*.swp
+*/*/*/*.swp

Dockerfile

@@ -0,0 +1,15 @@
+FROM python:3.10-slim-buster
+
+WORKDIR /app
+
+COPY requirements.txt requirements.txt
+
+RUN pip3 install --upgrade pip
+
+RUN pip3 install -r requirements.txt
+
+RUN apt-get update && apt-get install ffmpeg libsm6 libxext6  -y
+
+COPY . .
+
+CMD ["python", "-m", "flask", "run", "--host=0.0.0.0", "--port=7860"]

app.py

@@ -0,0 +1,84 @@
+from flask import Flask, render_template, request, jsonify
+import cv2
+from mtcnn import MTCNN
+import time
+import concurrent.futures
+import base64
+import numpy as np
+
+app = Flask(__name__)
+
+def load_and_detect_haar(gray_img):
+    print("inside haar")
+    ff = cv2.CascadeClassifier(cv2.data.haarcascades + 'haarcascade_frontalface_default.xml')
+    ff_alt = cv2.CascadeClassifier(cv2.data.haarcascades + 'haarcascade_frontalface_alt.xml')
+    ff_alt2 = cv2.CascadeClassifier(cv2.data.haarcascades + 'haarcascade_frontalface_alt2.xml')
+    pf = cv2.CascadeClassifier(cv2.data.haarcascades + 'haarcascade_profileface.xml')
+
+    ff_faces = ff.detectMultiScale(gray_img, scaleFactor=1.2, minNeighbors=10, minSize=(25, 25))
+    ff_alt2_faces = ff_alt2.detectMultiScale(gray_img, scaleFactor=1.05, minNeighbors=10, minSize=(20, 20))
+    pf_faces = pf.detectMultiScale(gray_img, scaleFactor=1.05, minNeighbors=5, minSize=(20, 20))
+
+    return ff_faces, ff_alt2_faces, pf_faces
+
+def load_and_detect_mtcnn(image):
+    print("inside mtcnn")
+    mtcnn = MTCNN()
+    faces = mtcnn.detect_faces(image)
+    mt_faces = [face['box'] for face in faces]
+    return mt_faces
+
+def get_unique_face_locations(all_face_locations):
+    unique_detected_faces = []
+    for (x1, y1, w1, h1) in all_face_locations:
+        unique = True
+        for (x2, y2, w2, h2) in unique_detected_faces:
+            if abs(x1 - x2) < 50 and abs(y1 - y2) < 50:
+                unique = False
+                break
+        if unique:
+            unique_detected_faces.append((x1, y1, w1, h1))
+    
+    return unique_detected_faces
+
+@app.route('/')
+def index():
+    return render_template('pg1.html')
+
+@app.route('/camera')
+def camera():
+    return render_template("pg2.html")
+
+@app.route('/report')
+def report():
+    return render_template("pg4.html")
+
+@app.route('/detect_faces', methods=['POST'])
+def detect_faces():
+    filestr = request.files["img_upload"].read()
+    file_bytes = np.fromstring(filestr, np.uint8) 
+    img = cv2.imdecode(file_bytes, cv2.IMREAD_UNCHANGED)
+    gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)
+
+    with concurrent.futures.ThreadPoolExecutor() as executor:
+        haar_detections = executor.submit(load_and_detect_haar, gray)
+        mtcnn_detections = executor.submit(load_and_detect_mtcnn, img)
+        
+        ff_faces, ff_alt2_faces, pf_faces = haar_detections.result()
+        mt_faces = mtcnn_detections.result()
+
+        all_faces = [*ff_faces, *ff_alt2_faces, *pf_faces, *mt_faces]
+        unique_detected_faces = get_unique_face_locations(all_faces)
+
+        for (x, y, w, h) in unique_detected_faces:
+            cv2.rectangle(img, (x, y), (x + w, y + h), (0, 255, 0), 3)
+
+        img = cv2.putText(img, f"{len(unique_detected_faces)} Faces", (100, 300), cv2.FONT_HERSHEY_SIMPLEX, 6, (0, 0, 0), 10)
+
+    _, buffer = cv2.imencode(".jpg", cv2.resize(img, (0, 0), fx=0.5, fy=0.5))
+    b64 = base64.b64encode(buffer)
+
+    return render_template("pg1.html", img_data = b64.decode('utf-8'))
+
+if __name__ == '__main__':
+    app.run(debug=False)

app1.py

@@ -0,0 +1,120 @@
+# from flask import Flask, render_template, Response
+# import cv2
+# from mtcnn import MTCNN
+# import base64
+# import numpy as np
+# import concurrent.futures
+
+# app = Flask(__name__)
+
+# class FaceDetector:
+#     def __init__(self):
+#         self.detector = MTCNN()
+#         self.face_count = 0
+
+#     def detect_faces(self, frame):
+#         faces = self.detector.detect_faces(frame)
+#         self.face_count = len(faces)
+#         return faces
+
+# face_detector = FaceDetector()
+
+# def generate_frames():
+#     camera = cv2.VideoCapture(0)  # 0 indicates the default camera (you can change it to the camera index you want to use)
+
+#     while True:
+#         success, frame = camera.read()
+#         if not success:
+#             break
+
+#         gray_frame = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)
+
+#         # Perform face detection
+#         faces = face_detector.detect_faces(frame)
+
+#         for face in faces:
+#             x, y, w, h = face['box']
+#             cv2.rectangle(frame, (x, y), (x + w, y + h), (0, 255, 0), 3)
+
+#         # Display face count on each frame
+#         font = cv2.FONT_HERSHEY_SIMPLEX
+#         cv2.putText(frame, f'Faces: {face_detector.face_count}', (10, 30), font, 1, (255, 255, 255), 2, cv2.LINE_AA)
+
+#         _, buffer = cv2.imencode(".jpg", cv2.resize(frame, (0, 0), fx=0.5, fy=0.5))
+#         img_data = buffer.tobytes()
+
+#         yield (b'--frame\r\n'
+#                b'Content-Type: image/jpeg\r\n\r\n' + img_data + b'\r\n\r\n')
+
+#     camera.release()
+
+# @app.route('/')
+# def index():
+#     return render_template('index.html')
+
+# @app.route('/detect_faces')
+# def detect_faces():
+#     return Response(generate_frames(), mimetype='multipart/x-mixed-replace; boundary=frame')
+
+# if __name__ == '__main__':
+#     app.run(debug=True)
+
+
+from flask import Flask, render_template, Response, request
+import cv2
+from mtcnn import MTCNN
+import numpy as np
+import concurrent.futures
+
+app = Flask(__name__)
+
+class FaceDetector:
+    def __init__(self):
+        self.detector = MTCNN()
+        self.face_count = 0
+
+    def detect_faces(self, frame):
+        faces = self.detector.detect_faces(frame)
+        self.face_count = len(faces)
+        return faces
+
+face_detector = FaceDetector()
+
+def generate_frames(camera_index):
+    camera = cv2.VideoCapture(camera_index)
+
+    while True:
+        success, frame = camera.read()
+        if not success:
+            break
+
+        # Perform face detection
+        faces = face_detector.detect_faces(frame)
+
+        for face in faces:
+            x, y, w, h = face['box']
+            cv2.rectangle(frame, (x, y), (x + w, y + h), (0, 255, 0), 3)
+
+        # Display face count on each frame
+        font = cv2.FONT_HERSHEY_SIMPLEX
+        cv2.putText(frame, f'Faces: {face_detector.face_count}', (10, 30), font, 1, (255, 255, 255), 2, cv2.LINE_AA)
+
+        _, buffer = cv2.imencode(".jpg", cv2.resize(frame, (0, 0), fx=0.5, fy=0.5))
+        img_data = buffer.tobytes()
+
+        yield (b'--frame\r\n'
+               b'Content-Type: image/jpeg\r\n\r\n' + img_data + b'\r\n\r\n')
+
+    camera.release()
+
+@app.route('/')
+def index():
+    return render_template('pg2.html')
+
+@app.route('/detect_faces')
+def detect_faces():
+    camera_index = int(request.args.get('camera_index', 1))
+    return Response(generate_frames(camera_index), mimetype='multipart/x-mixed-replace; boundary=frame')
+
+if __name__ == '__main__':
+    app.run(debug=True)

docker-compose.yml

@@ -0,0 +1,6 @@
+version: '3'
+services:
+  flask-app:
+    build: '.'
+    ports:
+      - '7860:7860'

requirements.txt

@@ -0,0 +1,53 @@
+absl-py==2.1.0
+astunparse==1.6.3
+blinker==1.7.0
+cachetools==5.3.2
+certifi==2023.11.17
+charset-normalizer==3.3.2
+click==8.1.7
+dm-tree==0.1.8
+Flask==3.0.1
+flatbuffers==23.5.26
+gast==0.5.4
+google-auth==2.26.2
+google-auth-oauthlib==1.2.0
+google-pasta==0.2.0
+grpcio==1.60.0
+h5py==3.10.0
+idna==3.6
+itsdangerous==2.1.2
+Jinja2==3.1.3
+keras==2.15.0
+libclang==16.0.6
+Markdown==3.5.2
+markdown-it-py==3.0.0
+MarkupSafe==2.1.3
+mdurl==0.1.2
+ml-dtypes==0.2.0
+mtcnn==0.1.1
+namex==0.0.7
+numpy==1.26.3
+oauthlib==3.2.2
+opencv-python==4.9.0.80
+opt-einsum==3.3.0
+packaging==23.2
+pillow==10.2.0
+protobuf==4.23.4
+pyasn1==0.5.1
+pyasn1-modules==0.3.0
+Pygments==2.17.2
+requests==2.31.0
+requests-oauthlib==1.3.1
+rich==13.7.0
+rsa==4.9
+six==1.16.0
+tensorboard==2.15.1
+tensorboard-data-server==0.7.2
+tensorflow==2.15.0.post1
+tensorflow-estimator==2.15.0
+tensorflow-io-gcs-filesystem==0.35.0
+termcolor==2.4.0
+typing_extensions==4.9.0
+urllib3==2.1.0
+Werkzeug==3.0.1
+wrapt==1.14.1

templates/camera.css

@@ -0,0 +1,15 @@
+/* camera.css */
+
+.camera-section {
+    background-color: #f5f5f5e8;
+    text-align: center;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
+    
+}
+
+#cameraFeed {
+    max-width: 100%;
+    border-radius: 10px;
+}

templates/camera.js

@@ -0,0 +1,9 @@
+// Get access to the user's camera
+navigator.mediaDevices.getUserMedia({ video: true })
+    .then(function (stream) {
+        var videoElement = document.getElementById('cameraFeed');
+        videoElement.srcObject = stream;
+    })
+    .catch(function (error) {
+        console.error('Error accessing camera: ' + error);
+    });

templates/common.css

@@ -0,0 +1,104 @@
+/* common.css */
+
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-image: url('https://www.gsfcuni.edu.in/upload/slider/php949D_NcK1628833893.jpeg'); /* Replace 'your-image.jpg' with the path to your background image */
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    }
+
+
+nav {
+    background-color: #212529;
+    color: #fff;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px;
+    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
+}
+
+nav img {
+    max-width: 150px;
+}
+
+nav ul {
+    list-style-type: none;
+    display: flex;
+}
+
+nav ul li {
+    margin-right: 20px;
+}
+
+nav ul li a {
+    text-decoration: none;
+    color: #fff;
+    font-weight: bold;
+    transition: color 0.3s ease;
+}
+
+nav ul li a:hover {
+    color: #ff5733;
+}
+
+section {
+    padding: 20px;
+    background-color: #fff;
+    border-radius: 10px;
+    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
+    margin: 20px;
+}
+
+h1 {
+    color: #1b2850;
+    margin-bottom: 20px;
+}
+
+footer {
+    background-color: rgba(27, 40, 80, 1);
+    color: #fff;
+    text-align: center;
+    padding: 10px;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+}
+
+
+
+.carousel-caption {
+    position: absolute;
+    right: 15%;
+    bottom: 20%;
+    left: 15%;
+    z-index: 10;
+    padding-top: 20px;
+    padding-bottom: 20px;
+    text-align: center;
+    background-color: rgba(0, 0, 0, 0.084);
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
+    border: 0px solid rgba(0, 0, 0, 0.2);
+    border-radius: 4px;
+}
+
+/* Add this CSS to your website's CSS file */
+
+.carousel-caption h3 {
+    font-size: 100px;
+    font-weight: 700;
+    color: #fff;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+ span {
+    font-size: 70px;
+    color: #26386e; /* Desired text color */
+    font-weight: bold;
+}

templates/pg1.html

@@ -0,0 +1,242 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+        /* common.css */
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            background-image: url('https://www.gsfcuni.edu.in/upload/slider/php949D_NcK1628833893.jpeg');
+            background-size: cover;
+            background-repeat: no-repeat;
+            background-attachment: fixed;
+        }
+
+        nav {
+            background-color: #212529;
+            color: #fff;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 20px;
+            box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
+        }
+
+        nav img {
+            max-width: 100%;
+            height: auto;
+        }
+
+        nav ul {
+            list-style-type: none;
+            display: flex;
+            flex-wrap: wrap;
+            /* Added for mobile responsiveness */
+        }
+
+        nav ul li {
+            margin-right: 20px;
+            margin-bottom: 10px;
+            /* Added for mobile responsiveness */
+        }
+
+        nav ul li a {
+            text-decoration: none;
+            color: #fff;
+            font-weight: bold;
+            transition: color 0.3s ease;
+        }
+
+        nav ul li a:hover {
+            color: #ff5733;
+        }
+
+        section {
+            padding: 20px;
+            background-color: #fff;
+            border-radius: 10px;
+            box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
+            margin: 20px;
+        }
+
+        h1 {
+            color: #1b2850;
+            margin-bottom: 20px;
+        }
+
+        footer {
+            background-color: rgba(27, 40, 80, 1);
+            color: #fff;
+            text-align: center;
+            padding: 10px;
+            position: fixed;
+            bottom: 0;
+            width: 100%;
+        }
+
+        .carousel-caption {
+            position: absolute;
+            right: 15%;
+            bottom: 20%;
+            left: 15%;
+            z-index: 10;
+            padding-top: 20px;
+            padding-bottom: 20px;
+            text-align: center;
+            background-color: rgba(0, 0, 0, 0.084);
+            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
+            border: 0px solid rgba(0, 0, 0, 0.2);
+            border-radius: 4px;
+        }
+
+        .carousel-caption h3 {
+            font-size: 100px;
+            font-weight: 700;
+            color: #fff;
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            margin-top: 0;
+            margin-bottom: 0;
+        }
+
+        span {
+            font-size: 70px;
+            color: #26386e;
+            font-weight: bold;
+        }
+
+        /* upload.css */
+        .upload-section {
+            background-color: #f5f5f5;
+            text-align: center;
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
+            opacity: 1;
+        }
+
+        #imageUpload {
+            display: block;
+            margin: 0 auto;
+            padding: 10px;
+            border: 2px dashed #ccc;
+            border-radius: 10px;
+            background-color: #fff;
+            cursor: pointer;
+        }
+
+        #imageUpload:hover {
+            border-color: #1b2850;
+        }
+
+        #imageUploadLabel {
+            display: block;
+            font-weight: bold;
+            margin-top: 10px;
+        }
+
+        #imagePreview {
+            max-width: 100%;
+            margin-top: 20px;
+            border-radius: 10px;
+        }
+
+        /* custom.css */
+        #imagePreviewContainer {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            text-align: center;
+            background-color: rgba(255, 255, 255, 0.9);
+            border-radius: 10px;
+            padding: 20px;
+            margin-top: 20px;
+            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
+        }
+
+        #imagePreviewContainer h2 {
+            color: #1b2850;
+            font-size: 24px;
+            font-weight: bold;
+        }
+
+        #imagePreview {
+            max-width: 100%;
+            height: auto;
+            margin-top: 10px;
+            border: 2px solid #1b2850;
+            border-radius: 5px;
+        }
+
+        #previewButton {
+            background-color: #1b2850;
+            color: #fff;
+            border: none;
+            padding: 10px 20px;
+            margin-top: 10px;
+            font-size: 16px;
+            font-weight: bold;
+            border-radius: 5px;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+
+        #previewButton:hover {
+            background-color: #ff5733;
+        }
+
+        @media only screen and (max-width: 768px) {
+            .carousel-caption {
+                font-size: 24px;
+            }
+
+            .carousel-caption h3 {
+                font-size: 50px;
+            }
+
+            span {
+                font-size: 40px;
+            }
+
+            #previewButton {
+                font-size: 14px;
+            }
+        }
+    </style>
+    <title>Page 1</title>
+</head>
+
+<body>
+    <nav>
+        <img src="https://www.gsfcuni.edu.in/public/logo/White1.png" alt="Logo">
+        <ul>
+            <li><a href="/">Image</a></li>
+            <li><a href="/camera">Camera</a></li>
+        </ul>
+    </nav>
+    <section class="upload-section">
+        <h1>UPLOAD</h1>
+        <label for="imageUpload" id="imageUploadLabel">Choose an image</label>
+        <form method="post" action="http://localhost:5000/detect_faces" enctype="multipart/form-data">
+            <input type="file" id="imageUpload" name="img_upload" accept="image/*">
+            <input type="submit" value="Submit Form" id="previewButton">
+        </form>
+        <div id="imagePreviewContainer">
+            {% if img_data: %}
+            <h2>Image Preview</h2>
+            <div>
+                <img id="imagePreview" src="data:image/jpeg;base64,{{ img_data }}" width="800" height="600">
+            </div>
+            {% endif %}
+        </div>
+    </section>
+    <footer>
+        Developed by Kshipra and Viraj
+    </footer>
+</body>
+
+</html>

templates/pg2.html

@@ -0,0 +1,173 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+        /* Common styles for all screen sizes */
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            background-image: url('https://www.gsfcuni.edu.in/upload/slider/php949D_NcK1628833893.jpeg');
+            background-size: cover;
+            background-repeat: no-repeat;
+            background-attachment: fixed;
+        }
+
+        nav {
+            background-color: #212529;
+            color: #fff;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 20px;
+            box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
+        }
+
+        nav img {
+            max-width: 100%;
+            height: auto;
+        }
+
+        nav ul {
+            list-style-type: none;
+            display: flex;
+            flex-wrap: wrap;
+            /* Added for mobile responsiveness */
+        }
+
+        nav ul li {
+            margin-right: 20px;
+            margin-bottom: 10px;
+            /* Added for mobile responsiveness */
+        }
+
+        nav ul li a {
+            text-decoration: none;
+            color: #fff;
+            font-weight: bold;
+            transition: color 0.3s ease;
+        }
+
+        nav ul li a:hover {
+            color: #ff5733;
+        }
+
+        section {
+            padding: 20px;
+            background-color: #fff;
+            border-radius: 10px;
+            box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
+            margin: 20px;
+        }
+
+        h1 {
+            color: #1b2850;
+            margin-bottom: 20px;
+        }
+
+        footer {
+            background-color: rgba(27, 40, 80, 1);
+            color: #fff;
+            text-align: center;
+            padding: 10px;
+            position: fixed;
+            bottom: 0;
+            width: 100%;
+        }
+
+        /* Responsive styles */
+        @media only screen and (max-width: 768px) {
+
+            /* Common styles for small screens */
+            nav ul li {
+                margin-right: 10px;
+            }
+
+            h1 {
+                font-size: 24px;
+            }
+
+            /* Styles for small screens */
+            .camera-section img {
+                width: 100%;
+                /* Use 100% width */
+                max-width: none;
+                /* Remove max-width */
+            }
+        }
+
+        /* Styles for medium to large screens */
+        @media only screen and (min-width: 769px) {
+            nav ul li {
+                margin-right: 20px;
+                margin-bottom: 0;
+            }
+
+            h1 {
+                font-size: 36px;
+            }
+
+            /* Styles for laptop and tablet views */
+            .camera-section {
+                text-align: center;
+                /* Center-align the container */
+            }
+
+            .camera-section img {
+                width: 70%;
+                /* Adjust width as needed */
+                max-width: 800px;
+                /* Set a maximum width */
+                margin: 0 auto;
+                /* Center the image */
+            }
+        }
+
+        /* Styles for the camera section */
+        .camera-section {
+            background-color: #f5f5f5e8;
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
+            margin-top: 20px;
+        }
+
+        #cameraFeed {
+            width: 100%;
+            /* Use 100% width of the container */
+            max-width: 800px;
+            /* Set a maximum width for larger screens */
+            border-radius: 10px;
+            align-items: center;
+        }
+    </style>
+    <title>Page 1</title>
+</head>
+
+<body>
+    <nav>
+        <img src="https://www.gsfcuni.edu.in/public/logo/White1.png" alt="Logo">
+        <ul>
+            <li><a href="/">Image</a></li>
+            <li><a href="/camera">Camera</a></li>
+            <li><a href="/report">Report</a></li>
+        </ul>
+    </nav>
+
+    <section class="camera-section">
+        <h1>Access Camera Section</h1>
+        <!-- Add code to turn on and display the camera feed using JavaScript -->
+        <img src="{{ url_for('detect_faces', camera_index=0) }}" alt="Face Detection">
+        <video id="cameraFeed" autoplay></video>
+    </section>
+
+    <footer>
+        Developed by Kshipra and Viraj
+    </footer>
+    <script src="camera.js"></script>
+</body>
+
+</html>

templates/pg4.html

@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="report.css">
+    <link rel="stylesheet" href="common.css">
+
+    <title>Attendance System Report</title>
+</head>
+
+<body>
+    <nav>
+        <img src="https://www.gsfcuni.edu.in/public/logo/White1.png" alt="Logo">
+        <ul>
+            <li><a href="/">Image</a></li>
+            <li><a href="/camera">Camera</a></li>
+            <li><a href="/table">Table</a></li>
+            <li><a href="/report">Report</a></li>
+        </ul>
+    </nav>
+    <main class="main">
+        <section class="container">
+            <h1>Attendance System Project</h1>
+
+            <h2>Introduction</h2>
+            <p>
+                The Attendance System Project is an innovative solution developed as part of the Computer Vision
+                subject. It leverages the power of YOLO (You Only Look Once), a state-of-the-art object detection
+                framework, to automate attendance tracking in various contexts, such as classrooms, meetings, or events.
+            </p>
+
+            <h2>Features</h2>
+            <ul>
+                <li>Real-time Object Detection</li>
+                <li>Face Recognition</li>
+                <li>Automatic Attendance Recording</li>
+                <li>User-friendly Web Interface</li>
+            </ul>
+
+            <h2>Implementation</h2>
+            <p>
+                The project was implemented using Python and the YOLO framework. It involves training the YOLO model to
+                recognize faces and track them in real-time using a camera feed. When a recognized face is detected, the
+                system records the attendance of the corresponding individual.
+            </p>
+
+            <h2>Challenges</h2>
+            <p>
+                While implementing the project, several challenges were encountered, including real-time processing,
+                optimizing the YOLO model for speed, and ensuring accurate face recognition under various lighting
+                conditions.
+            </p>
+
+            <h2>Conclusion</h2>
+            <p>
+                The Attendance System Project demonstrates the potential of computer vision and deep learning in
+                automating attendance tracking processes. It offers a robust and efficient solution for educational
+                institutions and organizations seeking to streamline attendance management.
+            </p>
+        </section>
+    </main>
+    <footer>
+        Developed by Kshipra and Viraj
+    </footer>
+</body>
+
+</html>

templates/report.css

@@ -0,0 +1,101 @@
+/* report.css */
+
+
+
+header {
+    background-color: #fff;
+    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
+    padding: 20px 0;
+}
+
+header nav {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+
+header a {
+    text-decoration: none;
+    color: #1b2850;
+    font-weight: bold;
+    transition: color 0.3s ease;
+}
+
+header a:hover {
+    color: #ff5733;
+}
+
+.main {
+    padding: 20px;
+    background-color: #fff;
+    border-radius: 10px;
+    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
+    margin: 20px;
+}
+
+.container {
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+h1 {
+    color: #1b2850;
+    margin-bottom: 20px;
+    font-size: 32px;
+    font-weight: bold;
+}
+
+h2 {
+    color: #1b2850;
+    font-size: 24px;
+    font-weight: bold;
+    margin-top: 20px;
+    margin-bottom: 10px;
+}
+
+p {
+    color: #333;
+    font-size: 18px;
+    line-height: 1.6;
+    margin-bottom: 20px;
+}
+
+ul {
+    list-style-type: disc;
+    margin-left: 20px;
+}
+
+footer {
+    background-color: #1b2850;
+    color: #fff;
+    text-align: center;
+    padding: 20px 0;
+}
+
+.footer-content {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.developer-info {
+    text-align: left;
+}
+
+.developer-info h3 {
+    font-size: 20px;
+    font-weight: bold;
+    margin-bottom: 10px;
+}
+
+.developer-info p {
+    margin: 0;
+}
+
+.additional-info {
+    text-align: right;
+}
+
+.additional-info p {
+    margin: 0;
+}

templates/upload.css

@@ -0,0 +1,85 @@
+/* upload.css */
+
+.upload-section {
+    background-color: #f5f5f5;
+    text-align: center;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
+    opacity: 0.9; /* Adjust the opacity value as needed */
+
+}
+
+#imageUpload {
+    display: block;
+    margin: 0 auto;
+    padding: 10px;
+    border: 2px dashed #ccc;
+    border-radius: 10px;
+    background-color: #fff;
+    cursor: pointer;
+}
+
+#imageUpload:hover {
+    border-color: #1b2850;
+}
+
+#imageUploadLabel {
+    display: block;
+    font-weight: bold;
+    margin-top: 10px;
+}
+
+#imagePreview {
+    max-width: 100%;
+    margin-top: 20px;
+    border-radius: 10px;
+}
+
+/* custom.css */
+
+/* Style for the image preview container */
+#imagePreviewContainer {
+    display: none;
+    text-align: center;
+    background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent white background */
+    border-radius: 10px;
+    padding: 20px;
+    margin-top: 20px;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
+}
+
+/* Style for the h2 element within the image preview container */
+#imagePreviewContainer h2 {
+    color: #1b2850; /* Text color similar to the GSFC University style */
+    font-size: 24px;
+    font-weight: bold;
+}
+
+/* Style for the image within the image preview container */
+#imagePreview {
+    max-width: 100%;
+    height: auto;
+    margin-top: 10px;
+    border: 2px solid #1b2850; /* Border color similar to the GSFC University style */
+    border-radius: 5px;
+}
+
+/* custom.css */
+
+/* Style for the "Preview" button */
+#previewButton {
+    background-color: #1b2850; /* Background color similar to the GSFC University style */
+    color: #fff; /* Text color */
+    border: none;
+    padding: 10px 20px;
+    font-size: 16px;
+    font-weight: bold;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+#previewButton:hover {
+    background-color: #ff5733; /* Change background color on hover */
+}