added loading bar and did corrections in docs

app/static/demo/index/script.js

@@ -98,7 +98,7 @@ database_input.addEventListener("change", function(e){
         const formdata = new FormData();
         formdata.append("a",23);
         formdata.append("image",e.target.files[0]);
-        
+        show_loading_bar();
         fetch("/demo/add_crops/",
         {
             method:'POST',
@@ -114,7 +114,7 @@ database_input.addEventListener("change", function(e){
                 console.log(response);
                 if (response['message']=='successful')
                 {
-                    
+                    hide_loading_bar();
                     var images_div=document.querySelector("#db_images_bar>#db_images");
                     var img_container_tag=document.createElement("div");
                     var img_remove_tag=document.createElement("p");
@@ -397,12 +397,14 @@ function face_recognition(elem)
             return ;
         }
         // console.log(elem.files[0]);
+        show_loading_bar();
         fetch("/demo/face_recognition/",{
             method:"POST",
             body:formdata
         }).then(function(response){
             return response.json();
         }).then(function(response){
+            hide_loading_bar();
             console.log(response);
             document.querySelector("#face_rec_image").src="data:image/jpeg;base64,"+response['image'].split('\'')[1];
         })
@@ -499,4 +501,16 @@ function reset_settings(){
             update_settings_html(res);
     }
     );
+}
+
+
+
+var loader=document.querySelector(".loader");
+
+function show_loading_bar(){
+    loader.classList.remove("hidden");
+}
+
+function hide_loading_bar(){
+    loader.classList.add("hidden");
 }

app/static/docs/data.json

@@ -31,7 +31,7 @@
             {"name":"message","summary":"\"success\" if everything is fine.","type":"Text"},
             {"name":"pred_image","summary":"image with prediction boxes","type":"base64"},
             {"name":"person_ids","summary":"list of person_id(\"face\" if face is not found)","type":"list of string"},
-            {"name":"crops","summary":"return list of crop images.","type":"list of base64 values"},
+            {"name":"crops","summary":"return list of cropped images.","type":"list of base64 values"},
             {"name":"objs_found","summary":"dictionary of faces found with coordinates and names .","type":"dictionary"}
         ]
     }

app/static/global.css

@@ -0,0 +1,3 @@
+body{
+    position: relative;
+}

app/static/loader.css

@@ -0,0 +1,37 @@
+
+.loader{
+    width: 100%;
+    height:20px;
+    background: white;
+    /* -webkit-box-reflect: below 1px linear-gradient(transparent,#0005); */
+    position: absolute;
+    top: 0;
+    border-radius: 50px;
+    overflow: hidden;
+    z-index: 23;
+}
+
+.loader::before{
+    content:"";
+    position:absolute;
+    inset:0;
+    background: linear-gradient(90deg,#fb0094,#0000ff,#00ff00,#ffff00,#fb0094,#0000ff,#00ff00,#ffff00,#fb0094);
+    animation:loader_animate 20s linear infinite;
+    background-size:500%;
+
+}
+
+@keyframes loader_animate {
+    0%{
+        background-position: 0 0;
+    }
+    0%{
+        background-position: 500% 0;
+    }
+    
+}
+
+.loader.hidden{
+    display: none;
+    
+}

app/static/user/dashboard.js

@@ -191,7 +191,7 @@ function filterFunction() {
           
           const formdata = new FormData();
           formdata.append("image",e.target.files[0]);
-
+          show_loading_bar()
           
           fetch("get_crops/",
           {
@@ -205,6 +205,7 @@ function filterFunction() {
           ).then(
               function(response)
               {
+                  hide_loading_bar()
                   console.log(response);
                 
                   if (response['message']=='successful')
@@ -277,7 +278,7 @@ function update_db_crops(elem)
         alldata["person_name"]=document.querySelector("#database-form>.field>.person_name").value;
         alldata["remarks"]=all_remarks;
         console.log(alldata);
-
+        show_loading_bar();
         
           
           fetch("set_crops/",{
@@ -287,6 +288,7 @@ function update_db_crops(elem)
           }).then(function(response){
               return response.json();
           }).then(function(response){
+                hide_loading_bar();
                 console.log(response);
                 var person_ids=document.querySelectorAll("#db_people_table>tr>td:first-child");
                 var matching_person_id=null;
@@ -315,12 +317,14 @@ function face_recoginization(elem){
     if(elem.files[0]){
         formdata=new FormData();
         formdata.append("image",elem.files[0]);
+        show_loading_bar();
         fetch("face_recognize/",{
             method:"POST",
             body:formdata
         }).then(function(response){
             return response.json();
         }).then(function(response){
+            hide_loading_bar();
             console.log(response);
             document.querySelector("#face_recognition_image").src="data:image/jpeg;base64,"+response["pred_image"].split('\'')[1];                          
             document.querySelector("#face_recognition_image").style.width="unset";
@@ -483,4 +487,15 @@ function reset_settings(){
             update_settings_html(res);
     }
     );
+}
+
+
+var loader=document.querySelector(".loader");
+
+function show_loading_bar(){
+    loader.classList.remove("hidden");
+}
+
+function hide_loading_bar(){
+    loader.classList.add("hidden");
 }

app/templates/base.html

@@ -4,6 +4,7 @@
         <title>{% block title %}Face Recognization{% endblock %}</title>
         
         <link type="image/*" rel="icon" href="{{ url_for('static',filename='demo/index/icon.jpg' ) }}">
+        <link type="text/css" rel="stylesheet" href="{{ url_for('static',filename='global.css' ) }}">
 
         {% block css %}{% endblock %}
     </head>

app/templates/demo/index.html

@@ -6,6 +6,7 @@
     <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
 {% endblock %}
 {% block body %}        
+{% include 'loader.html' %}
     <i  class="fa-solid fa-gear settings_btn" onclick="show_settings();"></i>
     <div id="container">
         <div class="left-section">

app/templates/docs/index.html

@@ -6,7 +6,7 @@
     <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
 {% endblock %}
 {% block body %}        
-        <h1>API documentations</h1>
+        <h1>API documentation</h1>
         
         <div class="container">
             

app/templates/loader.html

@@ -0,0 +1,2 @@
+<link type="text/css" rel="stylesheet" href="{{ url_for('static',filename='loader.css') }}">
+<div class="loader hidden"></div>

app/templates/user/dashboard.html

@@ -22,6 +22,7 @@
     {% elif data_dict['access_key']=='rejected' %}
     <p>sorry you are not given access </p>
     {% else %}
+    {% include 'loader.html' %}
     <i  class="fa-solid fa-gear settings_btn" onclick="show_settings();"></i>
     <div id="container">
         <div id="api-key">