Skip to content

J
JavaScript-SkyAnalyst
Commit def57a77 authored by dtati's avatar dtati
Browse files
Options

first commit

parents
Pipeline #530 failed with stages
      Expand all Hide whitespace changes
      Inline Side-by-side
      Showing with 445 additions and 0 deletions
      README.md 0 → 100644
      View file @ def57a77
      # sky identification JavaScript demo
      ## Getting started
      To make it easy for you to get started with GitLab, here's a list of recommended next steps.
      assets/style.css 0 → 100644
      View file @ def57a77
      h1 {
      text-align: center;
      }
      h2 {
      margin: 0;
      }
      #multi-step-form-container {
      /* margin-top: 5rem; */
      }
      .text-center {
      text-align: center;
      }
      .mx-auto {
      margin-left: auto;
      margin-right: auto;
      }
      .pl-0 {
      padding-left: 0;
      }
      .button {
      padding: 0.7rem 1.5rem;
      border: 1px solid #4361ee;
      background-color: #4361ee;
      color: #fff;
      border-radius: 5px;
      cursor: pointer;
      }
      .submit-btn {
      border: 1px solid #0e9594;
      background-color: #0e9594;
      }
      .mt-3 {
      margin-top: 2rem;
      }
      .d-none {
      display: none;
      }
      .form-step {
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 20px;
      padding: 3rem;
      }
      .font-normal {
      font-weight: normal;
      }
      ul.form-stepper {
      counter-reset: section;
      margin-bottom: 3rem;
      }
      ul.form-stepper .form-stepper-circle {
      position: relative;
      }
      ul.form-stepper .form-stepper-circle span {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateY(-50%) translateX(-50%);
      }
      .form-stepper-horizontal {
      position: relative;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      }
      ul.form-stepper > li:not(:last-of-type) {
      margin-bottom: 0.625rem;
      -webkit-transition: margin-bottom 0.4s;
      -o-transition: margin-bottom 0.4s;
      transition: margin-bottom 0.4s;
      }
      .form-stepper-horizontal > li:not(:last-of-type) {
      margin-bottom: 0 !important;
      }
      .form-stepper-horizontal li {
      position: relative;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      -webkit-box-align: start;
      -ms-flex-align: start;
      align-items: start;
      -webkit-transition: 0.5s;
      transition: 0.5s;
      }
      .form-stepper-horizontal li:not(:last-child):after {
      position: relative;
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      height: 1px;
      content: "";
      top: 32%;
      }
      .form-stepper-horizontal li:after {
      background-color: #dee2e6;
      }
      .form-stepper-horizontal li.form-stepper-completed:after {
      background-color: #4da3ff;
      }
      .form-stepper-horizontal li:last-child {
      flex: unset;
      }
      ul.form-stepper li a .form-stepper-circle {
      display: inline-block;
      width: 40px;
      height: 40px;
      margin-right: 0;
      line-height: 1.7rem;
      text-align: center;
      background: rgba(0, 0, 0, 0.38);
      border-radius: 50%;
      }
      .form-stepper .form-stepper-active .form-stepper-circle {
      background-color: #4361ee !important;
      color: #fff;
      }
      .form-stepper .form-stepper-active .label {
      color: #4361ee !important;
      }
      .form-stepper .form-stepper-active .form-stepper-circle:hover {
      background-color: #4361ee !important;
      color: #fff !important;
      }
      .form-stepper .form-stepper-unfinished .form-stepper-circle {
      background-color: #f8f7ff;
      }
      .form-stepper .form-stepper-completed .form-stepper-circle {
      background-color: #0e9594 !important;
      color: #fff;
      }
      .form-stepper .form-stepper-completed .label {
      color: #0e9594 !important;
      }
      .form-stepper .form-stepper-completed .form-stepper-circle:hover {
      background-color: #0e9594 !important;
      color: #fff !important;
      }
      .form-stepper .form-stepper-active span.text-muted {
      color: #fff !important;
      }
      .form-stepper .form-stepper-completed span.text-muted {
      color: #fff !important;
      }
      .form-stepper .label {
      font-size: 1rem;
      margin-top: 0.5rem;
      }
      .form-stepper a {
      cursor: default;
      }
      #smart_ocr_get_info{
      width: 200px;
      background-color: #4361ee;
      border-radius: 50pc;
      color: white;
      /* text-align: center; */
      height: 30px;
      margin: auto;
      cursor: pointer;
      /* justify-content: center; */
      text-align: center;
      display: flex;
      justify-content: center;
      margin-top: 20px;
      align-items: center;
      }
      input[type="file"] {
      position: relative;
      }
      input[type="file"]::file-selector-button {
      width: 136px;
      color: transparent;
      }
      /* Faked label styles and icon */
      input[type="file"]::before {
      position: absolute;
      pointer-events: none;
      top: 10px;
      left: 16px;
      height: 20px;
      width: 20px;
      content: "";
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230964B0'%3E%3Cpath d='M18 15v3H6v-3H4v3c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-3h-2zM7 9l1.41 1.41L11 7.83V16h2V7.83l2.59 2.58L17 9l-5-5-5 5z'/%3E%3C/svg%3E");
      }
      input[type="file"]::after {
      position: absolute;
      pointer-events: none;
      top: 11px;
      left: 40px;
      color: #0964b0;
      content: "Upload File";
      }
      /* ------- From Step 1 ------- */
      /* file upload button */
      input[type="file"]::file-selector-button {
      border-radius: 4px;
      padding: 0 16px;
      height: 40px;
      cursor: pointer;
      background-color: white;
      border: 1px solid rgba(0, 0, 0, 0.16);
      box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05);
      margin-right: 16px;
      transition: background-color 200ms;
      }
      /* file upload button hover state */
      input[type="file"]::file-selector-button:hover {
      background-color: #f3f4f6;
      }
      /* file upload button active state */
      input[type="file"]::file-selector-button:active {
      background-color: #e5e7eb;
      }
      /* ------------------------ */
      /* default boilerplate to center input */
      body {
      background-color: #E6E6E6;
      /* min-height: 100vh;
      max-width: 100vw;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 5vmax;
      box-sizing: border-box; */
      }
      .IndatacoreIdentity{
      display: flex;
      margin: auto;
      background-color: #263269;
      width: 70px;
      padding: 10px;
      border-radius: 20px;
      }
      /* spiner */
      .loader {
      margin-top: 20px;
      margin-bottom: 20px;
      width: 48px;
      height: 48px;
      margin: auto;
      border: 5px solid #FFF;
      border-bottom-color: #4361ee;
      border-radius: 50%;
      display: inline-block;
      box-sizing: border-box;
      animation: rotation 1s linear infinite;
      }
      @keyframes rotation {
      0% {
      transform: rotate(0deg);
      }
      100% {
      transform: rotate(360deg);
      }
      }
      /* drag and drop style */
      \ No newline at end of file
      index.html 0 → 100644
      View file @ def57a77
      <!DOCTYPE html>
      <html lang="en">
      <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Sky IDentification (Demo)</title>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js"> </script>
      <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
      <link rel="stylesheet" href="assets/style.css">
      </head>
      <body>
      <div>
      <img src="assets/IndatacoreIdentity.png" class="IndatacoreIdentity" alt="">
      </div>
      <div>
      <h1>It Only Takes One More Click To Discover Sky Id</h1>
      <div id="multi-step-form-container">
      <!-- Form Steps / Progress Bar -->
      <ul class="form-stepper form-stepper-horizontal text-center mx-auto pl-0">
      <!-- Step 1 -->
      <li class="form-stepper-active text-center form-stepper-list" step="1">
      <a class="mx-2">
      <span class="form-stepper-circle">
      <span>1</span>
      </span>
      <div class="label">Download Picture</div>
      </a>
      </li>
      <!-- Step 2 -->
      <li class="form-stepper-unfinished text-center form-stepper-list" step="2">
      <a class="mx-2">
      <span class="form-stepper-circle text-muted">
      <span>2</span>
      </span>
      <div class="label text-muted">Liveness</div>
      </a>
      </li>
      <!-- Step 3 -->
      <li class="form-stepper-unfinished text-center form-stepper-list" step="3">
      <a class="mx-2">
      <span class="form-stepper-circle text-muted">
      <span>3</span>
      </span>
      <div class="label text-muted">Matching</div>
      </a>
      </li>
      </ul>
      <!-- Step Wise Form Content -->
      <form id="userAccountSetupForm" name="userAccountSetupForm" enctype="multipart/form-data" method="POST">
      <!-- Step 1 Content -->
      <section id="step-1" class="form-step" style="
      background-color: aliceblue;">
      <h2 class="font-normal" style="
      margin-bottom: 50px;
      margin-top: 0px;
      text-align: center;">Download your picture</h2>
      <input type="file" id="ocrimagge" accept="image/*">
      <div>
      </div>
      <div id="imageContainer" style="
      justify-content: center;
      display: flex;">
      <img id="uploadedImageocr" src="assets/CINcrt.jpg" alt="Uploaded Image" style="
      width: 500px;
      height: 300px;
      margin-top: 20px;
      border-radius: 5px;
      ">
      </div>
      <span style="display: none;" id="loaddataocr" class="loader"></span>
      <div class="mt-3">
      <button class="button btn-navigate-form-step" type="button" style="background: darkgray;" disabled step_number="2">Next</button>
      </div>
      </section>
      <!-- Step 2 Content, default hidden on page load. -->
      <section id="step-2" class="form-step d-none" style="
      background-color: aliceblue;">
      <div style="display: flex;justify-content: center;" id="skyid_liveness"></div>
      <div
      style="margin: auto;justify-content: center;align-items: center;text-align: center;margin-top: 50px;"
      >
      <div id="skyid_fa_start_button" class="button ">
      Start Liveness
      </div>
      <div>
      <span style="display: none;" id="loaddatalvnss" class="loader"></span>
      <strong>###### Result ######</strong>
      <h5 id="responseOneDisplayrealtimefacedetct" style="text-align: center;"></h5>
      </div>
      </div>
      <div class="mt-3">
      <button class="button btn-navigate-form-step" type="button" step_number="1">Prev</button>
      <button class="button btn-navigate-form-step" style="background: darkgray;" disabled type="button" step_number="3">Next</button>
      </div>
      </section>
      <!-- Step 3 Content, default hidden on page load. -->
      <section id="step-3" class="form-step d-none" style="
      background-color: aliceblue;
      ">
      <h2 class="font-normal" style="
      margin-bottom: 50px;
      margin-top: 0px; text-align: center;">Results Face matching</h2>
      <!-- Step 3 input fields -->
      <span style="display: none;" id="loaddatafacemtch" class="loader"></span>
      <h5 id="responseOneDisplayrealtimefacedetcttow" style="text-align: center;"></h5>
      <button class="button btn-navigate-form-step" type="button" step_number="1">Repeat the process</button>
      </section>
      </form>
      </div>
      </div>
      <footer>
      <p style="text-align: left; color: black;"
      >Leader de l'industrie numérique basée sur l'intelligence artificielle et les technologies de Deep Learning. Nous nous efforçons d'innover et d'offrir à nos clients des produits qui répondent à leurs besoins.</p>
      </footer>
      <script src="./sdk/skyid_fa_sdk_bundle.js"></script>
      <script src="./sdk/skyid_imp.js" type="module"></script>
      </body>
      </html>
      \ No newline at end of file
      sdk/skyid_fa_sdk_bundle.js 0 → 100644
      View file @ def57a77
      // =====================================================================================
      // | SkyID Web SDK Editable Variable (messages, server, warnings) |
      // =====================================================================================
      // messages
      var skyid_fa_sdk_access_error_message="Votre token n'est pas valide";
      var skyid_fa_sdk_loading_error_message="Error lors de chargement des modules";
      var skyid_fa_sdk_network_error_message="Error de connexion au serveur, merci de verifier votre connexion internet";
      var skyid_fa_sdk_camera_error_message="Impossible de demmarer votre camera, merci de verifier que votre camera et bien actif";
      var skyid_fa_face_start_message="SVP positionner votre visage au centre sans rotation. puis clique sur start.";
      var skyid_fa_face_loading_message="Chargement des modules, Patietez SVP.";
      // warning
      var skyid_fa_mul_face_warning_msg="SVP representer un seul visage devant le camera.";
      \ No newline at end of file
      sdk/skyid_fa_sdkv2.1-min.js 0 → 100644
      View file @ def57a77
      This source diff could not be displayed because it is too large. You can view the blob instead.
      sdk/skyid_imp.js 0 → 100644
      View file @ def57a77
      This diff is collapsed.
      Markdown is supported
      0% or
      You are about to add 0 people to the discussion. Proceed with caution.
      Finish editing this message first!
      Please register or to comment