Upload 36 files

app.py

@@ -57,9 +57,9 @@ def face_recognition(face_payload):
     resp = send_rapidapi(url, face_payload)
     return resp
 
-@app.route("/")
+@app.route("/", methods=['GET'])
 def index():
-    return redirect(url_for('id_type'))
+    return render_template('intro.html')
 
 @app.route("/id_type/", methods=['GET'])
 def id_type():
@@ -155,7 +155,7 @@ def fr_file_done():
     "image": fr_base64
     })
 
-    print("Liveness Result:", liveness_api_resp)
+    print("Liveness Result:", liveness_api_resp) 
 
     if 'data' in liveness_api_resp and 'result' in liveness_api_resp['data']:
         liveness_res = liveness_api_resp['data']['result']        
@@ -190,6 +190,7 @@ def fr_detail():
             if 'data' in recog_api_resp and 'result' in recog_api_resp['data']:
                 recog_res = recog_api_resp['data']['result']
                 recog_similarity = recog_api_resp['data']['similarity']
+                recog_api_resp['data']['liveness'] = liveness_res
 
             print("Matching Result", recog_api_resp)
         return render_template('fr_detail.html', 
@@ -201,7 +202,9 @@ def fr_detail():
                                selfie = 'data:image/png;base64,' + sess_fr_selfie, 
                                liveness_res = liveness_res.upper(), 
                                recog_res = recog_res.upper(), 
-                               recog_similarity = recog_similarity * 100)
+                               recog_similarity = recog_similarity * 100, 
+                               ocr_result = json.dumps(sess_id_res), 
+                               fr_result = json.dumps(recog_api_resp))
     else:
         return redirect(url_for('fr_file'))
 

requirements.txt

@@ -1,4 +1,3 @@
 flask
 flask-wtf
-requests
-werkzeug
+requests

templates/fr_detail.html

@@ -125,51 +125,11 @@
         <script type="text/javascript" src="/static/jsi18n.js"></script>
         <!-- data js -->
         <script id="ocr-result" type="application/json">
-            {
-                "mrz_type": "TD3",
-                "valid_score": 100,
-                "raw_text": "PBLRADAMOVICHMARYIA\nPD00000004BLR9001011F31082734010190B000PB060",
-                "type": "P",
-                "country": "Belarus",
-                "number": "PD0000000",
-                "date_of_birth": "1990-01-01",
-                "expired": false,
-                "expiration_date": "2031-08-27",
-                "nationality": "BLR",
-                "sex": "Female",
-                "names": "MARYIA",
-                "first_name": "MARYIA",
-                "surname": "ADAMOVICH",
-                "last_name": "ADAMOVICH",
-                "personal_number": "4010190B000PB0",
-                "check_number": "4",
-                "check_date_of_birth": "1",
-                "check_expiration_date": "3",
-                "check_composite": "0",
-                "check_personal_number": "6",
-                "valid_number": true,
-                "valid_date_of_birth": true,
-                "valid_expiration_date": true,
-                "valid_composite": true,
-                "valid_personal_number": true,
-                "document_type": "passport"
-            }</script>
+            {{ocr_result|safe}}</script>
         <script id="fr-result" type="application/json">
-            {
-                "success": true,
-                "is_match": false,
-                "score": 30.758,
-                "result": {
-                    "is_match": false,
-                    "score": 30.758,
-                    "one_e3": 62.327,
-                    "one_e4": 69.101,
-                    "one_e5": 73.975
-                },
-                "is_liveness_passed": true
-            }</script>
+            {{fr_result|safe}}</script>
         <script id="ocr-type-url" type="application/json">
-            "/id_type/"</script>
+            "/"</script>
         <!-- JQuery -->
         <script type="text/javascript" src="/static/vendor/mdbootstrap/jquery.min.js"></script>
         <!-- Bootstrap tooltips -->

templates/fr_file.html

@@ -94,14 +94,6 @@
                             <lottie-player src="/static/img/lottie/fr_file.json" background="transparent" speed="1" style="width: 300px; height: 300px;" loop autoplay></lottie-player>
                         </div>
                     </div>
-                    <!--div class="row mt-5">
-                        <div class="col-lg-12 text-d-neutral">
-                            
-                                We are commited to protecting your privacy. By proceeding, you agree to our <a href="" target="_blank" class="new-window-link">Terms &amp; Conditions</a>.
-                                View our Global Privacy Statement <a href="" target="_blank" class="new-window-link">here</a>.
-                            
-                        </div>
-                    </div-->
                 </div>
                 <div class="preview-container" style="display: none;">
                     <img id="img-preview" width="100%">
@@ -141,13 +133,30 @@
                         <img src="/static/img/faceonlive.png" width="42" />&emsp;
                         <div>
                             <span class="text-c-neutral">Powered by</span><br />
-                            <a href="https://www.faceonlive.com">FaceOnLive</a>
+                            <a href="https://www.faceonlive.com" target="_blank" rel="noopener noreferrer">FaceOnLive</a>
                         </div>
                     </div>
                 
             </footer>
         
-    <!-- Error Modal -->
+        {% if error_model %}
+        <!-- Error Modal -->
+        <div class="modal fade auto-show" id="error-modal-0" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-hidden="true">
+            <div class="modal-dialog modal-dialog-centered modal-sm">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <div class="modal-title mx-auto">Please Retake Selfie</div>
+                    </div>
+                    <div class="modal-body">
+                        <p>No face or multiple face detected in the selfie.</p>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-primary mx-auto" data-dismiss="modal">Close</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        {% endif %}
     
 
     </div>

templates/id_detail.html

@@ -91,7 +91,7 @@
                 <img src="/static/img/faceonlive.png" width="42" />&emsp;
                 <div>
                     <span class="text-c-neutral">Powered by</span><br />
-                    <a href="https://www.faceonlive.com">FaceOnLive</a>
+                    <a href="https://www.faceonlive.com" target="_blank" rel="noopener noreferrer">FaceOnLive</a>
                 </div>
             </div>
 

templates/id_file.html

@@ -159,15 +159,29 @@
                 <img src="/static/img/faceonlive.png" width="42" />&emsp;
                 <div>
                     <span class="text-c-neutral">Powered by</span><br />
-                    <a href="https://www.faceonlive.com">FaceOnLive</a>
+                    <a href="https://www.faceonlive.com" target="_blank" rel="noopener noreferrer">FaceOnLive</a>
                 </div>
             </div>
 
         </footer>
-
+        {% if error_model %}
         <!-- Error Modal -->
-
-
+        <div class="modal fade auto-show" id="error-modal-0" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-hidden="true">
+            <div class="modal-dialog modal-dialog-centered modal-sm">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <div class="modal-title mx-auto">Please Retake ID</div>
+                    </div>
+                    <div class="modal-body">
+                        <p>Error parsing ID Document, please ensure there is no obstacles or glare and All corners should be visible.</p>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-primary mx-auto" data-dismiss="modal">Close</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        {% endif %}
     </div>
     <!-- django js translation -->
     <script type="text/javascript" src="/static/jsi18n.js"></script>

templates/id_type.html

@@ -92,7 +92,7 @@
                                     Identity Card
                                     <br/>
                             <span class="text-10">
-                                ID Cards, Driving Licenses, etc
+                                ID Cards, Driving Licenses, etc (Front & Back Side)
                             </span>
                                 </button>
                             </div>
@@ -115,7 +115,7 @@
                 <img src="/static/img/faceonlive.png" width="42" />&emsp;
                 <div>
                     <span class="text-c-neutral">Powered by</span><br />
-                    <a href="https://www.faceonlive.com">FaceOnLive</a>
+                    <a href="https://www.faceonlive.com" target="_blank" rel="noopener noreferrer">FaceOnLive</a>
                 </div>
             </div>
 

templates/intro.html

@@ -0,0 +1,164 @@
+<!DOCTYPE html>
+<html lang="en" data-bs-theme="dark">
+
+<head>
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>FaceOnLive OpenKYC</title>
+    <link rel="shortcut icon" href="/static/img/favicon.ico">
+
+    <!-- material icons -->
+    <link
+        href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
+        rel="stylesheet">
+    <!-- Font Awesome -->
+    <link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet">
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,700&display=swap" rel="stylesheet">
+    <!-- Bootstrap core CSS -->
+    <link href="/static/vendor/mdbootstrap/bootstrap.min.css" rel="stylesheet">
+    <!-- Material Design Bootstrap -->
+    <link href="/static/vendor/mdbootstrap/mdb.min.css" rel="stylesheet">
+    <!-- other css library based on page -->
+
+    <!-- global css -->
+    <link href="/static/ui/scss/bundle.min.css" rel="stylesheet">
+    <!-- css based on page -->
+    <link rel="stylesheet" href="/static/ui/scss/ocr_type.css">
+
+
+</head>
+
+<body>
+
+    <div class="wrapper">
+
+
+        <!-- Page Loader -->
+        <div class="loader">
+            <div class="spinner-border" role="status">
+                <span class="sr-only"></span>
+            </div>
+        </div>
+        <!-- Header -->
+        <header>
+
+            <div class="header-left">
+                <div class="container">
+
+                </div>
+            </div>
+            <div class="header-middle">
+                <div class="container">
+
+                </div>
+            </div>
+            <div class="header-right">
+                <div class="container">
+
+                </div>
+            </div>
+
+        </header>
+        <!-- Content -->
+        <main>
+
+
+            <form method="post" id="form-intro" autocomplete="off">
+                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
+                <div class="row page-header">
+                    <div class="col-lg-12 text-center">
+                        OpenKYC Introduction
+                    </div>
+                </div>
+                <div class="row page-subheader">
+                    <div class="col-12">
+                        <div class="default-container">
+                            <p class="mb-0">
+                                <h5>Contributions welcome on <a href="https://github.com/FaceOnLive/OpenKYC" target="_blank" rel="noopener noreferrer">Github.</a><br/>
+                                Join our <a href="https://join.slack.com/t/faceonlive/shared_invite/zt-2drx19c5t-vQsR4TUGPD8oL7i7BXdKZA" target="_blank" rel="noopener noreferrer">Slack</a> to discuss and get support.</h5>
+                            </p>
+                            <br/>
+                            <p class="mb-0">
+                                <h5>Steps to setup project (using Free FaceOnLive RapidAPIs)</h5>
+                            </p>
+                            <ol class="mb-0 pl-3">
+                                <li>Please subscribe following 3 RapidAPIs(Free) and get X-RapidAPI-Key there.<br/>
+                                    <a href="https://rapidapi.com/faceonlive-inc-faceonlive-inc-default/api/id-document-recognition2/" target="_blank" rel="noopener noreferrer">ID Document Recognition</a><br/>
+                                    <a href="https://rapidapi.com/faceonlive-inc-faceonlive-inc-default/api/face-liveness-detection3/" target="_blank" rel="noopener noreferrer">Face Liveness Detection</a><br/>
+                                    <a href="https://rapidapi.com/faceonlive-inc-faceonlive-inc-default/api/face-recognition26/" target="_blank" rel="noopener noreferrer">Face Recognition</a>
+                                </li>
+                                <li>Set X-RapidAPI-Key as enrironment variable named API_KEY.</li>
+                                <li>Install python packages from requirements.txt and run "python app.py".</li>
+                            </ol>
+                            <br/>
+                            <p class="mb-0">
+                                <h5><a href="mailto:[email protected]">Contact us</a> for On-Premise deployment</h5>
+                            </p>
+                            <br/>
+                            <p class="mb-0">
+                                <h5>This project is community project supported by <a href="https://faceonlive.com" target="_blank" rel="noopener noreferrer">FaceOnLive</a>.</h5>
+                            </p>        
+                        </div>
+                    </div>
+                </div>
+                <div class="row page-content">
+                    <div class="col-lg-12">
+                    </div>
+                </div>
+                <div class="row page-footer">
+                    <div class="col-6">
+                        <a href="https://faceonlive.com" class="btn btn-outline-primary btn-side px-3" target="_blank" rel="noopener noreferrer">Learn More</a>
+                    </div>
+                    <div class="col-6">
+                        <a href="/id_type/" class="btn btn-primary btn-side px-3">Start</a>
+                    </div>                    
+                </div>
+            </form>
+
+        </main>
+        <!-- Footer -->
+        <footer>
+
+            <div class="container powered">
+                <img src="/static/img/faceonlive.png" width="42" />&emsp;
+                <div>
+                    <span class="text-c-neutral">Powered by</span><br />
+                    <a href="https://www.faceonlive.com" target="_blank" rel="noopener noreferrer">FaceOnLive</a>
+                </div>
+            </div>
+
+        </footer>
+
+        <!-- Error Modal -->
+
+
+    </div>
+    <!-- django js translation -->
+    <script type="text/javascript" src="/static/jsi18n.js"></script>
+    <!-- data js -->
+
+
+    <!-- JQuery -->
+    <script type="text/javascript" src="/static/vendor/mdbootstrap/jquery.min.js"></script>
+    <!-- Bootstrap tooltips -->
+    <script type="text/javascript" src="/static/vendor/mdbootstrap/popper.min.js"></script>
+    <!-- Bootstrap core JavaScript -->
+    <script type="text/javascript" src="/static/vendor/mdbootstrap/bootstrap.min.js.download"></script>
+    <!-- MDB core JavaScript -->
+    <script type="text/javascript" src="/static/vendor/mdbootstrap/mdb.min.js.download"></script>
+    <!-- other js library based on page -->
+
+
+    <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
+
+    <!-- global js -->
+    <script type="text/javascript" src="/static/ui/js/base.js"></script>
+    <!-- js based on page -->
+    <script type="text/javascript" src="/static/ui/js/ocr_type.js"></script>
+</body>
+
+</html>