|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>AI Detector</title> |
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> |
|
<style> |
|
body, html { |
|
height: 100%; |
|
margin: 0; |
|
} |
|
.bg { |
|
background-image: url('your-background-image.jpg'); |
|
height: 100%; |
|
background-position: center; |
|
background-repeat: no-repeat; |
|
background-size: cover; |
|
} |
|
.container { |
|
position: absolute; |
|
left: 50%; |
|
top: 50%; |
|
transform: translate(-50%, -50%); |
|
text-align: center; |
|
} |
|
.title { |
|
font-size: 3em; |
|
} |
|
.submit-btn { |
|
font-size: 1.2em; |
|
padding: 10px 24px; |
|
} |
|
.auto-expand { |
|
overflow-y: hidden; |
|
resize: none; |
|
min-height: 50px; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
|
|
<div class="bg"> |
|
<div class="container"> |
|
<h1 class="title">AI Detector</h1> |
|
<form id="aiForm"> |
|
<div class="form-group"> |
|
<label for="inputData">Baljinder and Jay for ICCAE</label> |
|
<textarea class="form-control auto-expand" id="inputData" placeholder="Enter data"></textarea> |
|
</div> |
|
<button type="submit" class="btn btn-primary submit-btn">Submit</button> |
|
</form> |
|
<p id="result" class="lead"></p> |
|
</div> |
|
</div> |
|
|
|
|
|
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> |
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script> |
|
<script> |
|
|
|
function resizeTextarea (id) { |
|
const textarea = document.getElementById(id); |
|
textarea.style.height = 'auto'; |
|
textarea.style.height = (textarea.scrollHeight) + 'px'; |
|
} |
|
|
|
|
|
resizeTextarea('inputData'); |
|
|
|
|
|
$('#inputData').on('input', function () { |
|
resizeTextarea('inputData'); |
|
}); |
|
|
|
$('#aiForm').submit(function(event) { |
|
event.preventDefault(); |
|
var inputText = $('#inputData').val(); |
|
|
|
|
|
$.ajax({ |
|
type: "POST", |
|
url: "/", |
|
contentType: "application/json;charset=UTF-8", |
|
data: JSON.stringify({text: inputText}), |
|
success: function(response) { |
|
|
|
$('#result').text('Classified as: ' + response.classification); |
|
}, |
|
error: function(error) { |
|
console.log(error); |
|
} |
|
}); |
|
}); |
|
</script> |
|
|
|
</body> |
|
</html> |
|
|
