Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <!-- Required meta tags --> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <meta | |
| name="viewport" | |
| content="width=device-width, initial-scale=1, shrink-to-fit=yes" | |
| /> | |
| <!-- Bootstrap CSS --> | |
| <link | |
| href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" | |
| rel="stylesheet" | |
| integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" | |
| crossorigin="anonymous" | |
| /> | |
| <script | |
| src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" | |
| integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" | |
| crossorigin="anonymous" | |
| ></script> | |
| <title>Face detector</title> | |
| </head> | |
| <body> | |
| <div class="text-center p-5"> | |
| <h2 class="text-center p-2">Face detection App</h2> | |
| <label for="formFile" class="form-label" | |
| >Upload file to detect faces on the image</label | |
| > | |
| <form method="post" action="/predict-img" enctype="multipart/form-data"> | |
| <div class="w-25 p-2 mx-auto"> | |
| <input class="form-control" type="file" id="formFile" name="file" /> | |
| </div> | |
| <button type="submit" class="btn btn-primary mx-auto ml-4"> | |
| Detect faces | |
| </button> | |
| </form> | |
| {% if img %} | |
| <h2 class="text-center p-4">Predicted faces</h2> | |
| <img src="data:image/jpeg;base64,{{ img }}" /> | |
| {% endif %} | |
| </div> | |
| <script | |
| src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" | |
| integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" | |
| crossorigin="anonymous" | |
| ></script> | |
| <script | |
| src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" | |
| integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" | |
| crossorigin="anonymous" | |
| ></script> | |
| </body> | |
| </html> | |