diff options
24 files changed, 578 insertions, 92 deletions
diff --git a/webui/index.html b/webui/index.html new file mode 100644 index 0000000..e16e613 --- /dev/null +++ b/webui/index.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> +<html lang="en-us"> + <head> + <title>Raspberry Pi Face Recognition</title> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <meta itemprop="name" content="Raspberry Pi Face Recognition"> + <meta itemprop="description" content="My Mini Project"> + <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png"> + <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png"> + <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"> + <link rel="stylesheet" type="text/css" href="style.css"> + <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> + </head> + <body id="page"> + <div id="spotlight" class="animated fadeIn"> + <div id="home-center"> + <h1 id="home-title">Raspberry Pi Face Recognition</h1> + <p id="home-subtitle">This project aims to develop a portable and wireless Face Recognition System (FRS) using Raspberry Pi with a Camera Module attachment.</p> + <nav id="home-nav" class="site-nav"> + <a href="/live">Live-feed</a> + <a href="/login">Login</a> + </nav> + <button id="button1" class="buttonclick" role="button">1. Input Face</button> + <button id="button2" class="buttonclick" role="button">2. Train Model</button> + <button id="button3" class="buttonclick" role="button">3. Face Recognizer</button> + </div> + + <div id="home-social"> + <a href="https://github.com/justsaumit/opencv-face-recognition" target="_blank" rel="noopener me" title="github"> + <svg xmlns="http://www.w3.org/2000/svg" class="feather" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg> + </a> + </div> + + <div id="home-footer"> + <p>© 2023 <a href="https://draconyan.xyz/">TEAM 3 - Meer Junaid, Bikram Kumar Poddar, Saumit Dinesan</a></p> + </div> + </div> + + <script src="main.js"></script> + + <!-- Math rendering --> + <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css"> + <script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js"></script> + <script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js" onload="renderMathInElement(document.body, { delimiters: [ {left: '$$', right: '$$', display: true}, {left: '$', right: '$', display: false}, {left: '\\[', right: '\\]', display: true}, {left: '\\(', right: '\\)', display: false}] });"></script> + <link href="https://unpkg.com/highlightjs-badge/highlightjs/styles/railscasts.css" rel="stylesheet"> + <script src="https://unpkg.com/highlightjs-badge/highlightjs/highlight.pack.js"></script> + <script src="https://unpkg.com/highlightjs-badge/highlightjs-badge.min.js"></script> + <script> + var pres = document.querySelectorAll("pre>code"); + for (var i = 0; i < pres.length; i++) { + hljs.highlightBlock(pres[i]); + } + </script> + <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script> + <script> + var options = { + copyIconClass: "gg-clipboard", + checkIconClass: "gg-check" + }; + window.highlightJsBadge(options); + </script> + </body> +</html> diff --git a/webui/main.py b/webui/main.py new file mode 100644 index 0000000..c281aac --- /dev/null +++ b/webui/main.py @@ -0,0 +1,12 @@ +from website import create_app +from flask import render_template + +app = create_app() + +# Define the route for the custom 404 error +@app.errorhandler(404) +def page_not_found(e): + return render_template('404.html'), 404 + +if __name__ == '__main__': + app.run(debug=True) diff --git a/webui/stream.py b/webui/stream.py new file mode 100644 index 0000000..5560efb --- /dev/null +++ b/webui/stream.py @@ -0,0 +1,94 @@ +#!/usr/bin/python3 + +# Run this script, then point a web browser at http:<this-ip-address>:8000 + +import io +import logging +import socketserver +from http import server +from threading import Condition + +from picamera2 import Picamera2 +from picamera2.encoders import JpegEncoder +from picamera2.outputs import FileOutput + +PAGE = """\ +<html> +<head> +<title>picamera2 MJPEG streaming demo</title> +</head> +<body> +<h1>Picamera2 MJPEG Streaming Demo</h1> +<img src="stream.mjpg" width="640" height="480" /> +</body> +</html> +""" + + +class StreamingOutput(io.BufferedIOBase): + def __init__(self): + self.frame = None + self.condition = Condition() + + def write(self, buf): + with self.condition: + self.frame = buf + self.condition.notify_all() + + +class StreamingHandler(server.BaseHTTPRequestHandler): + def do_GET(self): + if self.path == '/': + self.send_response(301) + self.send_header('Location', '/index.html') + self.end_headers() + elif self.path == '/index.html': + content = PAGE.encode('utf-8') + self.send_response(200) + self.send_header('Content-Type', 'text/html') + self.send_header('Content-Length', len(content)) + self.end_headers() + self.wfile.write(content) + elif self.path == '/stream.mjpg': + self.send_response(200) + self.send_header('Age', 0) + self.send_header('Cache-Control', 'no-cache, private') + self.send_header('Pragma', 'no-cache') + self.send_header('Content-Type', 'multipart/x-mixed-replace; boundary=FRAME') + self.end_headers() + try: + while True: + with output.condition: + output.condition.wait() + frame = output.frame + self.wfile.write(b'--FRAME\r\n') + self.send_header('Content-Type', 'image/jpeg') + self.send_header('Content-Length', len(frame)) + self.end_headers() + self.wfile.write(frame) + self.wfile.write(b'\r\n') + except Exception as e: + logging.warning( + 'Removed streaming client %s: %s', + self.client_address, str(e)) + else: + self.send_error(404) + self.end_headers() + + +class StreamingServer(socketserver.ThreadingMixIn, server.HTTPServer): + allow_reuse_address = True + daemon_threads = True + + +picam2 = Picamera2() +picam2.configure(picam2.create_video_configuration(main={"size": (640, 480)})) +output = StreamingOutput() +picam2.start_recording(JpegEncoder(), FileOutput(output)) + +try: + address = ('', 80) + server = StreamingServer(address, StreamingHandler) + server.serve_forever() +finally: + picam2.stop_recording() diff --git a/webui/stream2.py b/webui/stream2.py new file mode 100644 index 0000000..67439c8 --- /dev/null +++ b/webui/stream2.py @@ -0,0 +1,95 @@ +#!/usr/bin/python3 + +import io +import logging +import socketserver +from http import server +from threading import Condition + +from picamera2 import Picamera2 +from picamera2.encoders import JpegEncoder +from picamera2.outputs import FileOutput + +PAGE = """\ +<html> +<head> +<title>picamera2 MJPEG streaming demo</title> +</head> +<body> +<h1>Picamera2 MJPEG Streaming Demo</h1> +<img src="stream.mjpg" width="640" height="480" /> +</body> +</html> +""" + + +class StreamingOutput(io.BufferedIOBase): + def __init__(self): + self.frame = None + self.condition = Condition() + + def write(self, buf): + with self.condition: + self.frame = buf + self.condition.notify_all() + + +class StreamingHandler(server.BaseHTTPRequestHandler): + def do_GET(self): + if self.path == '/': + self.send_response(301) + self.send_header('Location', '/index.html') + self.end_headers() + elif self.path == '/index.html': + content = PAGE.encode('utf-8') + self.send_response(200) + self.send_header('Content-Type', 'text/html') + self.send_header('Content-Length', len(content)) + self.end_headers() + self.wfile.write(content) + elif self.path == '/stream.mjpg': + self.send_response(200) + self.send_header('Age', 0) + self.send_header('Cache-Control', 'no-cache, private') + self.send_header('Pragma', 'no-cache') + self.send_header('Content-Type', 'multipart/x-mixed-replace; boundary=FRAME') + self.end_headers() + try: + while True: + with output.condition: + output.condition.wait() + frame = output.frame + self.wfile.write(b'--FRAME\r\n') + self.send_header('Content-Type', 'image/jpeg') + self.send_header('Content-Length', len(frame)) + self.end_headers() + self.wfile.write(frame) + self.wfile.write(b'\r\n') + except Exception as e: + logging.warning( + 'Removed streaming client %s: %s', + self.client_address, str(e)) + else: + self.send_error(404) + self.end_headers() + + +class StreamingServer(socketserver.ThreadingMixIn, server.HTTPServer): + allow_reuse_address = True + daemon_threads = True + + +picam2 = Picamera2() +picam2.preview_configuration.main.size = (640, 480) +picam2.start_preview() + +output = StreamingOutput() +picam2.start_recording(JpegEncoder(), FileOutput(output)) + +try: + address = ('', 8000) + server = StreamingServer(address, StreamingHandler) + server.serve_forever() +finally: + picam2.stop_recording() + picam2.stop_preview() diff --git a/webui/templates/404.html b/webui/templates/404.html deleted file mode 100644 index f8414f0..0000000 --- a/webui/templates/404.html +++ /dev/null @@ -1,3 +0,0 @@ -<!doctype html> -<title>404 Not Found</title> -<h1>404 Not Found</h1> diff --git a/webui/templates/index.html b/webui/templates/index.html deleted file mode 100644 index 195dcb1..0000000 --- a/webui/templates/index.html +++ /dev/null @@ -1,89 +0,0 @@ -<!DOCTYPE html> -<html lang="en-us"> - <meta charset="UTF-8" /> - <meta name="viewport" content="width=device-width, initial-scale=1.0" /> - <meta http-equiv="X-UA-Compatible" content="ie=edge" /> - <meta itemprop="name" content="Raspberry Pi Face Recognition" /> - <meta itemprop="description" content="My Mini Project" /> - <link rel="icon" href="{{ url_for('static', filename='favicon-32x32.png') }}" type="image/png"> - <link - rel="icon" - type="image/png" - sizes="16x16" - href="/favicon-16x16.png" - /> - <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon"> - <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}"> - <title>Raspberry Pi Face Recognition</title> - <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}"> - <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> - <body id="page"> - <div id="spotlight" class="animated fadeIn"> - <div id="home-center"> - <h1 id="home-title">Raspberry Pi Face Recognition</h1> - <p id="home-subtitle">This project aims to develop a portable and wireless Face Recognition System (FRS) using Raspberry Pi with a Camera Module attachment.</p> - <nav id="home-nav" class="site-nav"> - <a href="/live">Live-feed</a> - <a href="/login">Login</a> - </nav> - <button id="button1" class="buttonclick" role="button">1.Input Face</button> - <button id="button2" class="buttonclick" role="button">2.Train Model</button> - <button id="button2" class="buttonclick" role="button">3.Face Recognizer</button> - </div> - <div id="home-social"> - <a href="https://github.com/justsaumit/opencv-face-recognition" target="_blank" rel="noopener me" - title="github"> - <script> - $(document).ready(function() { - $('#button1').click(function() { - $.ajax({ - url: 'face_recognition.py', - success: function(data) { - alert('Face recognition completed successfully.'); - }, - error: function() { - alert('Error: Failed to run face recognition script.'); - } - }); - }); - }); - </script> - <svg xmlns="http://www.w3.org/2000/svg" class="feather" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> - <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path> - </svg> - </a> - </div> - <div id="home-footer"> - <p>© 2023 - <a href="https://draconyan.xyz/">TEAM 3- Meer Junaid, Bikram Kumar Poddar, Saumit Dinesan</a> - </a> - </p> - </div> - </div> - <script src="{{ url_for('static', filename='main.js') }}"></script> - <!-- Math rendering --> - <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous"> - <script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script> - <script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous" - onload="renderMathInElement(document.body, { delimiters: [ {left: '$$', right: '$$', display: true}, {left: '$', right: '$', display: false}, {left: '\\[', right: '\\]', display: true}, {left: '\\(', right: '\\)', display: false}]});"></script> - <link href="https://unpkg.com/highlightjs-badge/highlightjs/styles/railscasts.css" rel="stylesheet"> - <!-- https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.1.1/build/styles/ for min version --> - <script src="https://unpkg.com/highlightjs-badge/highlightjs/highlight.pack.js"></script> - <script src="https://unpkg.com/highlightjs-badge/highlightjs-badge.min.js"></script> - <script> - var pres = document.querySelectorAll("pre>code"); - for (var i = 0; i < pres.length; i++) { - hljs.highlightBlock(pres[i]); - } - </script> - <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script> - <script> - var options = { - copyIconClass: "gg-clipboard", - checkIconClass: "gg-check" - }; - window.highlightJsBadge(options); - </script> - <script src="{{ url_for('static', filename='main.js') }}"></script> - </body> -</html> diff --git a/webui/website/__init__.py b/webui/website/__init__.py new file mode 100644 index 0000000..4ca4c4b --- /dev/null +++ b/webui/website/__init__.py @@ -0,0 +1,13 @@ +from flask import Flask + +def create_app(): + app = Flask(__name__) + app.config['SECRET_KEY'] = 'fdbcawejhfbwef' + + from .views import views + from .auth import auth + + app.register_blueprint(views, url_prefix='/') + app.register_blueprint(auth, url_prefix='/') + + return app
\ No newline at end of file diff --git a/webui/website/auth.py b/webui/website/auth.py new file mode 100644 index 0000000..c44b421 --- /dev/null +++ b/webui/website/auth.py @@ -0,0 +1,15 @@ +from flask import Blueprint, render_template + +auth = Blueprint('auth', __name__) + +@auth.route('/login') +def login(): + return render_template("404.html") + +@auth.route('/logout') +def logout(): + return render_template("404.html") + +@auth.route('/signup') +def signup(): + return render_template("404.html")
\ No newline at end of file diff --git a/webui/website/models.py b/webui/website/models.py new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/webui/website/models.py diff --git a/webui/static/favicon-32x32.png b/webui/website/static/favicon-32x32.png Binary files differindex b56e05f..b56e05f 100644 --- a/webui/static/favicon-32x32.png +++ b/webui/website/static/favicon-32x32.png diff --git a/webui/static/favicon.ico b/webui/website/static/favicon.ico Binary files differindex ab8f313..ab8f313 100644 --- a/webui/static/favicon.ico +++ b/webui/website/static/favicon.ico diff --git a/webui/static/main.js b/webui/website/static/main.js index a40c504..a40c504 100644 --- a/webui/static/main.js +++ b/webui/website/static/main.js diff --git a/webui/website/static/navbar.css b/webui/website/static/navbar.css new file mode 100644 index 0000000..45c5fd3 --- /dev/null +++ b/webui/website/static/navbar.css @@ -0,0 +1,60 @@ +/* Add a black background color to the top navigation */
+.topnav {
+ background-color: #333;
+ overflow: hidden;
+ position: fixed;
+ top: 0;
+ width: 100%;
+ z-index: 100;
+}
+
+/* Style the links inside the navigation bar */
+.topnav a {
+ float: left;
+ display: block;
+ color: #f2f2f2;
+ text-align: center;
+ padding: 14px 16px;
+ text-decoration: none;
+ font-size: 17px;
+}
+
+/* Change the color of links on hover */
+.topnav a:hover {
+ background-color: #ddd;
+ color: black;
+}
+
+/* Add an active class to highlight the current page */
+.topnav a.active {
+ background-color: #4b6298;
+ color: white;
+}
+
+/* Hide the link that should open and close the topnav on small screens */
+.topnav .icon {
+ display: none;
+}
+/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
+@media screen and (max-width: 600px) {
+ .topnav a:not(:first-child) {display: none;}
+ .topnav a.icon {
+ float: right;
+ display: block;
+ }
+}
+
+/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
+@media screen and (max-width: 600px) {
+ .topnav.responsive {position: relative;}
+ .topnav.responsive a.icon {
+ position: absolute;
+ right: 0;
+ top: 0;
+ }
+ .topnav.responsive a {
+ float: none;
+ display: block;
+ text-align: left;
+ }
+}
diff --git a/webui/static/robots.txt b/webui/website/static/robots.txt index a252a5f..a252a5f 100644 --- a/webui/static/robots.txt +++ b/webui/website/static/robots.txt diff --git a/webui/static/style.css b/webui/website/static/style.css index 1fa7d1b..1fa7d1b 100644 --- a/webui/static/style.css +++ b/webui/website/static/style.css diff --git a/webui/static/style2.css b/webui/website/static/style2.css index f50e8f0..f50e8f0 100644 --- a/webui/static/style2.css +++ b/webui/website/static/style2.css diff --git a/webui/website/templates/404.html b/webui/website/templates/404.html new file mode 100644 index 0000000..e207e9e --- /dev/null +++ b/webui/website/templates/404.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> +<head> + <title>Page Not Found</title> + <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}"> +</head> +<body> + <div class="error-container"> + <h1>404 - Page Not Found</h1> + <p>This feature will soon be added!</p> + </div> +</body> +</html>
\ No newline at end of file diff --git a/webui/website/templates/base.html b/webui/website/templates/base.html new file mode 100644 index 0000000..ed37c38 --- /dev/null +++ b/webui/website/templates/base.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<html lang="en-us"> + <head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <meta itemprop="name" content="Raspberry Pi Face Recognition"> + <meta itemprop="description" content="My Mini Project"> + <link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='favicon-32x32.png') }}"> + <link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='favicon-16x16.png') }}"> + <link rel="shortcut icon" type="image/x-icon" href="{{ url_for('static', filename='favicon.ico') }}"> + <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}"> + <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style2.css') }}"> + <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='navbar.css') }}"> + <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" crossorigin="anonymous"> + + <title>{% block title %}Raspberry Pi Face Recognition{% endblock %}</title> + </head> + <body> + + <div class="topnav" id="myTopnav"> + <a href="/" class="active">Home</a> + <a href="/live">Live-feed</a> + <a href="/login">Login</a> + <!-- <a href="/logout">Logout</a> --> + <a href="javascript:void(0);" class="icon" onclick="myFunction()"> + <i class="fa fa-bars"></i> + </a> + </div> + + <div class="container">{% block content %} {% endblock %}</div> + <div id="home-social"> + <a href="https://github.com/justsaumit/opencv-face-recognition" target="_blank" rel="noopener"> + <svg xmlns="http://www.w3.org/2000/svg" class="feather" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> + <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path> + </svg> + </a> + </div> + <div id="home-footer"> + <p>© 2023 + <a>TEAM 3 - Meer Junaid, Bikram Kumar Poddar, Saumit Dinesan</a> + </p> + </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> + <script> + function myFunction() { + var x = document.getElementById("myTopnav"); + if (x.className === "topnav") { + x.className += " responsive"; + } else { + x.className = "topnav"; + } + } + </script> + <script src="{{ url_for('static', filename='main.js') }}"></script> + </body> +</html> diff --git a/webui/website/templates/home.html b/webui/website/templates/home.html new file mode 100644 index 0000000..a2c4191 --- /dev/null +++ b/webui/website/templates/home.html @@ -0,0 +1,19 @@ +{% extends "base.html" %} +{% block title %}Raspberry Pi Face Recognition{% endblock %} + +{% block content %} +<body id="page"> + + <div id="spotlight" class="animated fadeIn"> + <div id="home-center"> + <h1 id="home-title">Raspberry Pi Face Recognition</h1> + <p id="home-subtitle">This project aims to develop a portable and wireless Face Recognition System (FRS) using Raspberry Pi with a Camera Module attachment.</p> + <nav id="home-nav" class="site-nav"> + <a href="/live">Live-feed</a> + <a href="/login">Login</a> + </nav> + </div> + + + +{% endblock %}
\ No newline at end of file diff --git a/webui/website/templates/html.html b/webui/website/templates/html.html new file mode 100644 index 0000000..8387ebb --- /dev/null +++ b/webui/website/templates/html.html @@ -0,0 +1,44 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+ <meta charset="UTF-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Document</title>
+ <link rel="stylesheet" href="css.css">
+</head>
+<body>
+ <div class="nav">
+ <input type="checkbox" id="nav-check">
+ <div class="nav-header">
+ <div class="nav-title">
+ MysteryCode
+ </div>
+ </div>
+ <div class="nav-btn">
+ <label for="nav-check">
+ <span></span>
+ <span></span>
+ <span></span>
+ </label>
+ </div>
+
+ <div class="nav-links">
+ <ul>
+ <li><a href="#" target="_blank">Home</a></li>
+ <li><a href="#" target="_blank">About</a></li>
+ <li><a href="#" target="_blank">Services</a></li>
+ <li><a href="#" target="_blank">Portfolio</a></li>
+ <li><a href="#" target="_blank">Contact</a></li>
+ <a class="icon">
+ <i class="fa fa-twitter"></i>
+ <i class="fa fa-linkedin"></i>
+ <i class="fa fa-youtube"></i>
+
+ </a>
+ </ul>
+ </div>
+ </div>
+</body>
+</html>
\ No newline at end of file diff --git a/webui/website/templates/index2.html b/webui/website/templates/index2.html new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/webui/website/templates/index2.html diff --git a/webui/website/templates/index3.html b/webui/website/templates/index3.html new file mode 100644 index 0000000..1c33be9 --- /dev/null +++ b/webui/website/templates/index3.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html lang="en-us"> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <meta http-equiv="X-UA-Compatible" content="ie=edge"> + <meta itemprop="name" content="Raspberry Pi Face Recognition"> + <meta itemprop="description" content="My Mini Project"> + + <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png" /> + <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png" /> + <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> + <link rel="stylesheet" type="text/css" href="style.css"> + <link rel="stylesheet" type="text/css" href="style2.css"> + <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> + <title>Raspberry Pi Face Recognition</title> + + <body id="page"> + <div id="spotlight" class="animated fadeIn"> + <div id="home-center"> + <h1 id="home-title">Raspberry Pi Face Recognition</h1> + <p id="home-subtitle">This project aims to develop a portable and wireless Face Recognition System (FRS) using Raspberry Pi with a Camera Module attachment.</p> + <nav id="home-nav" class="site-nav"> + <a href="/live">Live-feed</a> + <a href="/login">Login</a> + </nav> + <button id="button1" class="buttonclick" role="button">1.Input Face</button> + <button id="button2" class="buttonclick" role="button">2.Train Model</button> + <button id="button2" class="buttonclick" role="button">3.Face Recognizer</button> + </div> + + <div id="home-social"> + <a href="https://github.com/justsaumit/opencv-face-recognition" target="_blank" rel="noopener me" title="github"> + <svg xmlns="http://www.w3.org/2000/svg" class="feather" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg> + </a> + </div> + + <div id="home-footer"> + <p>© 2023 + <a href="https://draconyan.xyz/">TEAM 3- Meer Junaid, Bikram Kumar Poddar, Saumit Dinesan</a> + </a> + </p> + </div> + + <script src="main.js"></script> + + <!-- Math rendering --> + <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous"> + <script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script> + <script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous" onload="renderMathInElement(document.body, { delimiters: [ {left: '$$', right: '$$', display: true}, {left: '$', right: '$', display: false}, {left: '\\[', right: '\\]', display: true}, {left: '\\(', right: '\\)', display: false}]});"></script> + <link href="https://unpkg.com/highlightjs-badge/highlightjs/styles/railscasts.css" rel="stylesheet"> + <script src="https://unpkg.com/highlightjs-badge/highlightjs/highlight.pack.js"></script> + <script src="https://unpkg.com/highlightjs-badge/highlightjs-badge.min.js"></script> + <script> var pres = document.querySelectorAll("pre>code"); for (var i = 0; i < pres.length; i++) { hljs.highlightBlock(pres[i]);}</script> + <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script> + <script>var options = {copyIconClass: "gg-clipboard",checkIconClass: "gg-check"};window.highlightJsBadge(options);</script> + + </body> +</html>
\ No newline at end of file diff --git a/webui/website/templates/live.html b/webui/website/templates/live.html new file mode 100644 index 0000000..5d7d62f --- /dev/null +++ b/webui/website/templates/live.html @@ -0,0 +1,9 @@ +{% extends "base.html" %} +{% block title %}Live feed{% endblock %} +{% block content %} +<body id="page"> + <div id="spotlight" class="animated fadeIn"> + <h1>Hi<h1> + </div> + +{% endblock %}
\ No newline at end of file diff --git a/webui/website/views.py b/webui/website/views.py new file mode 100644 index 0000000..47a02f5 --- /dev/null +++ b/webui/website/views.py @@ -0,0 +1,12 @@ +from flask import Blueprint, render_template + +views = Blueprint('views', __name__) + +@views.route('/') +def home(): + return render_template("home.html") + +@views.route('/live') +def live(): + return render_template("live.html") + |
