frontend

561aaf73 · Julien Angelo Yoganathan · 0683ca04 · 561aaf73 · 561aaf73 · 561aaf73
Commit 561aaf73 authored May 27, 2022 by Julien Angelo Yoganathan
6 changed files
--- a/FrontendUI/Demo_PP1/cfg/yolov4-obj.cfg
+++ b/FrontendUI/Demo_PP1/cfg/yolov4-obj.cfg
--- a/FrontendUI/Demo_PP1/static/css/main.css
+++ b/FrontendUI/Demo_PP1/static/css/main.css
+.img-preview {
+    width: 256px;
+    height: 256px;
+    position: relative;
+    border: 5px solid #F8F8F8;
+    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
+    margin-top: 1em;
+    margin-bottom: 1em;    
+}
+
+.img-preview>div {
+    width: 100%;
+    height: 100%;
+    background-size: 256px 256px;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+input[type="file"] {
+    display: none;
+}
+
+.upload-label{
+    display: inline-block;
+    padding: 12px 30px;
+    background: #39D2B4;
+    color: #fff;
+    font-size: 1em;
+    transition: all .4s;
+    cursor: pointer;
+}
+
+.upload-label:hover{
+    background: #34495E;
+    color: #39D2B4;
+}
+
+.loader {
+    border: 8px solid #f3f3f3; /* Light grey */
+    border-top: 8px solid #3498db; /* Blue */
+    border-radius: 50%;
+    width: 50px;
+    height: 50px;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
\ No newline at end of file
--- a/FrontendUI/Demo_PP1/static/js/main.js
+++ b/FrontendUI/Demo_PP1/static/js/main.js
+$(document).ready(function () {
+    // Init
+    $('.image-section').hide();
+    $('.loader').hide();
+    $('#result').hide();
+
+    // Upload Preview
+    function readURL(input) {
+        if (input.files && input.files[0]) {
+            var reader = new FileReader();
+            reader.onload = function (e) {
+                $('#imagePreview').css('background-image', 'url(' + e.target.result + ')');
+                $('#imagePreview').hide();
+                $('#imagePreview').fadeIn(650);
+            }
+            reader.readAsDataURL(input.files[0]);
+        }
+    }
+    $("#imageUpload").change(function () {
+        $('.image-section').show();
+        $('#btn-predict').show();
+        $('#result').text('');
+        $('#result').hide();
+        readURL(this);
+    });
+
+    // Predict
+    $('#btn-predict').click(function () {
+        var form_data = new FormData($('#upload-file')[0]);
+
+        // Show loading animation
+        $(this).hide();
+        $('.loader').show();
+
+        // Make prediction by calling api /predict
+        $.ajax({
+            type: 'POST',
+            url: '/predict',
+            data: form_data,
+            contentType: false,
+            cache: false,
+            processData: false,
+            async: true,
+            success: function (data) {
+                // Get and display the result
+                $('.loader').hide();
+                $('#result').fadeIn(600);
+                $('#result').text(' Result:  ' + data);
+                console.log('Success!');
+            },
+        });
+    });
+
+});
--- a/FrontendUI/Demo_PP1/templates/base.html
+++ b/FrontendUI/Demo_PP1/templates/base.html
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Demo</title>
+    <link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
+    <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js"></script>
+    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
+    <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
+    <link href="{{ url_for('static', filename='css/main.css') }}" rel="stylesheet">      
+</head>
+
+<body>
+    <nav class="navbar navbar-dark bg-dark">
+        <div class="container">
+            <a class="navbar-brand" href="#">Static Sign Detection Demo</a>
+            <button class="btn btn-outline-secondary my-2 my-sm-0" type="submit">Help</button>
+        </div>
+    </nav>
+    <div class="container">
+        <div id="content" style="margin-top:2em">{% block content %}{% endblock %}</div>
+    </div>
+</body>
+
+<footer>
+    <script src="{{ url_for('static', filename='js/main.js') }}" type="text/javascript"></script>    
+</footer>
+
+</html>
\ No newline at end of file
--- a/FrontendUI/Demo_PP1/templates/index.html
+++ b/FrontendUI/Demo_PP1/templates/index.html
+{% extends "base.html" %} {% block content %}
+
+<h2>Image Classifier</h2>
+
+<div>
+    <form id="upload-file" method="post" enctype="multipart/form-data">
+        <label for="imageUpload" class="upload-label">
+            Select Image
+        </label>
+        <input type="file" name="file" id="imageUpload" accept=".jpg, .jpeg">
+    </form>
+
+    <div class="image-section" style="display:none;">
+        <div class="img-preview">
+            <div id="imagePreview">
+            </div>
+        </div>
+        <div>
+            <button type="button" class="btn btn-primary btn-lg " id="btn-predict">Predict!</button>
+        </div>
+    </div>
+
+    <div class="loader" style="display:none;"></div>
+
+    <h3 id="result">
+        <span> </span>
+    </h3>
+
+</div>
+
+{% endblock %}
\ No newline at end of file
--- a/FrontendUI/README.md
+++ b/FrontendUI/README.md
+# 2022-303
+
+Research Project on 'Real-Time Translation of Sinhala Sign Language to Sinhala Text'
+
+**Main Objective**
+Bridging the communication barrier between the hearing impaired/ aurally handicapped community and the general public
+
+**Main Research questions**
+1. How do preprocess the video and determine the sign type on a real-time basis
+2. How to classify static and dynamic gestures in real-time
+3. How to generate a meaningful Sinhala text based on the classified gestures
+4. How to handle uninterpreted gestures
+
+**Individual research question**
+1.  Video Preprocessing and Sign Type Determination
+        How to identify key moments of a sign in a real-time video feed ? 
+        How to identify hands in a given image frame ?
+        How to detect whether the sign is a static or a dynamic?
+
+2. Static Gesture classifier
+        How to create a efficient dataset?
+        How to train the model for accurate and efficient communication?
+        How to ensure accurate sign prediction and classification?
+        How to handle uninterpreted gestures?
+
+3. Dynamic Gesture classifier
+        How to create a efficient dataset?
+        How to train the model for accurate and efficient communication?
+        How to ensure accurate video classification?
+        How to handle uninterpreted gestures?
+
+4. Generate Sinhala Text
+        How to generate Sinhala text ?
+        How to make a sentence ?
+        How to check grammar ?
+        What is the best way to give correct output ?
+
+**Individual Objectives**
+
+1.  Video Preprocessing and Sign Type Determination : Identify signs in a real-time video feed and detect whether the sign is a static sign or a dynamic sign.
+
+2. Static Gesture classifier : Real-time classification of static gestures in order to provide an accurate interpretation and an appropriate prediction for the recognized sign
+
+3. Dynamic Gesture classifier : Real-time identification of dynamic gestures with optimum accuracy
+        
+4. Generate Sinhala Text : Display correct Sinhala sentence or word for the signs.
+
+**Other necessary information**
+Technology Stack
+*     Python
+*     TensorFlow
+*     Keras
+*     OpenCV
+*     Google Colaboratory
+*     Flutter
+