Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" /> | |
| <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> | |
| <title>Prediction URL Legitimate or Phishing</title> | |
| </head> | |
| <body> | |
| <div id="Model1" class="Model bg-gradient-to-r from-blue-400 to-blue-700 text-gray-800"> | |
| <section class="flex flex-col justify-between item-center p-8 min-h-screen md:flex-row"> | |
| <main class="bg-white p-16 rounded-lg"> | |
| <h1 class="text-3xl font-bold mb-8">Test if your URL is Phishing or Legitimate</h1> | |
| <form enctype="multipart/form-data" class="flex flex-col" id="upload_form"> | |
| <label for="url" class="mb-2">Write your URL</label> | |
| <input type="text" name="url" placeholder="URL" required="required" class="p-4 bg-gray-100 rounded-md" /> | |
| <button type="submit" class="flex justify-center align-center mt-8 p-4 bg-gradient-to-r from-blue-400 to-blue-700 text-white rounded-md"> | |
| TEST URL<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right ml-4"> | |
| <line x1="5" y1="12" x2="19" y2="12"></line> | |
| <polyline points="12 5 19 12 12 19"></polyline> | |
| </svg> | |
| </button> | |
| </form> | |
| </main> | |
| <section class="mt-8 h-full flex-auto rounded-lg md:mt-0 md:ml-8"> | |
| <div class="bg-white p-16 rounded-lg"> | |
| <h1 class="text-2xl mb-8">Your URL is:</h1> | |
| <h2 class="text-5xl font-bold"><span id="label">Enter an URL</span></h2> | |
| <div class="mt-8"> | |
| <p id="respUrl"></p> | |
| </div> | |
| </div> | |
| </section> | |
| </section> | |
| </div> | |
| <style> | |
| .active { | |
| background-color: rgb(45, 137, 241); | |
| } | |
| </style> | |
| </body> | |
| <script> | |
| function openModel(evt, modelName) { | |
| var i, x, tablinks; | |
| x = document.getElementsByClassName("Model"); | |
| for (i = 0; i < x.length; i++) { | |
| x[i].style.display = "none"; | |
| } | |
| tablinks = document.getElementsByClassName("tablink"); | |
| for (i = 0; i < x.length; i++) { | |
| tablinks[i].className = tablinks[i].className.replace(" active", ""); | |
| } | |
| document.getElementById(modelName).style.display = "block"; | |
| evt.currentTarget.className += " active"; | |
| } | |
| </script> | |
| <script> | |
| $(document).ready(function () { | |
| $("#upload_form").submit(function (event) { | |
| event.preventDefault(); // Prevent the default form submission | |
| // Get the form data | |
| var formData = new FormData(this); | |
| // Make the Ajax request | |
| $.ajax({ | |
| type: "POST", | |
| url: "https://binoubinks-adsp-finalprojectback.hf.space/predict", | |
| data: formData, | |
| processData: false, | |
| contentType: false, | |
| success: function (response) { | |
| // Handle the response data | |
| $('#respUrl').html("<strong>Url:</strong> " + response.url); | |
| $('#label').html(response.label); | |
| console.log(response); | |
| }, | |
| error: function (error) { | |
| console.error("Error:", error); | |
| } | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |