-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathtext.html
71 lines (68 loc) · 2.76 KB
/
text.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!-- query.html -->
<html>
<head>
<title>Query</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js.cookie.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" integrity="sha384-b6lVK+yci+bfDmaY1u0zE8YYJt0TZxLEAFyYSLHId4xoVvsrQu3INevFKo+Xir8e" crossorigin="anonymous">
<script>
$(document).ready(function() {
// Send the form on enter keypress and avoid if shift is pressed
$('#prompt').keypress(function(event) {
if (event.keyCode === 13 && !event.shiftKey) {
event.preventDefault();
$('form').submit();
}
});
$('form').on('submit', function(event) {
event.preventDefault();
// get the CSRF token from the cookie
var csrftoken = Cookies.get('csrftoken');
// set the CSRF token in the AJAX headers
$.ajaxSetup({
headers: { 'X-CSRFToken': csrftoken }
});
// Get the prompt
var prompt = $('#prompt').val();
var dateTime = new Date();
var time = dateTime.toLocaleTimeString();
// Add the prompt to the response div
$('#response').append('<p id="GFG1">('+ time + ') <i class="bi bi-person"></i>: ' + prompt + '</p>');
$('#response #GFG1').css({"color": "green", "width": "90%", "float": "left"});
// Clear the prompt
$('#prompt').val('');
$.ajax({
url: '/',
type: 'POST',
data: {prompt: prompt},
dataType: 'json',
success: function(data) {
$('#response').append('<p id="GFG2">('+ time + ') <i class="bi bi-robot"></i>: ' + data.response + '</p>');
$('#response #GFG2').css({"color": "red", "width": "90%", "float": "right"});
}
});
});
});
</script>
</head>
<body>
<div class="container p-3">
<h3>GFG ChatGPT Clone</h3>
<div class="mb-3">
<form method="post" action="">
<label for="prompt" class="form-label"><strong>Prompt: </strong></label>
<textarea class="form-control" type="textarea" id="prompt" name="prompt" rows="3"></textarea>
<br>
<button class="btn btn-primary " type="submit">Submit</button>
</form>
</div>
<br>
<div class="mb-3">
<h6>Response:</h6>
<div class="container border overflow-auto h-50" id="response"></div>
</div>
</div>
</body>
</html>