-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
123 lines (117 loc) · 4.06 KB
/
index.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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta charset="utf-8" />
<title>Question Answering Agent</title>
<script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>
</head>
<style>
body {
background-color:#6d6d6d;
color:#f9f9f9;
margin-left: 25px;
font-family: Verdana, Arial, Sans Serif;
}
textarea {
font-family: Courier New, Lucida Sans Typewriter;
}
.header {
overflow: hidden;
background-color: #d5d5d5;
padding: 30px 10px;
}
.header a {
float: left;
color: #3c3c3c;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 45px;
font-weight: bold;
}
.header a:hover {
background-color: #9fddd0;
color: black;
}
.header a.active {
background-color: #9f87cf;
color: white;
}
.header-right {
float: right;
}
@media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}
</style>
<body>
<div class="header">
<a href="https://github.com/odellus/autolector" class="logo"><span class="iconify" data-icon="entypo:open-book" data-inline="false"></span><span class="iconify" data-icon="fa-solid:robot" data-inline="false"></span>
Autolector</a>
<div class="header-right">
<a class="active" href="#home">Home</a>
<a href="https://github.com/odellus"><i class="fa fa-address-card" aria-hidden="true"></i>
Contact</a>
<a href="http://phytomech.com"><i class="fa fa-book" aria-hidden="true"></i>
About</a>
</div>
</div>
<h3>
Put the text containing the answer in the context box and ask away!</h3><br>
<form name="contextQuestion" method="post">
<label for="Context">Context:</label><br>
<textarea id="context" name="context" rows="10" cols="80" style="background-color:#b2aaea">
The Amazon rainforest (Portuguese: Floresta Amazônica or Amazônia; Spanish: Selva Amazónica, Amazonía or usually Amazonia; French: Forêt amazonienne; Dutch: Amazoneregenwoud), also known in English as Amazonia or the Amazon Jungle, is a moist broadleaf forest that covers most of the Amazon basin of South America. This basin encompasses 7,000,000 square kilometres (2,700,000 sq mi), of which 5,500,000 square kilometres (2,100,000 sq mi) are covered by the rainforest. This region includes territory belonging to nine nations. The majority of the forest is contained within Brazil, with 60% of the rainforest, followed by Peru with 13%, Colombia with 10%, and with minor amounts in Venezuela, Ecuador, Bolivia, Guyana, Suriname and French Guiana. States or departments in four nations contain "Amazonas" in their names. The Amazon represents over half of the planet\'s remaining rainforests, and comprises the largest and most biodiverse tract of tropical rainforest in the world, with an estimated 390 billion individual trees divided into 16,000 species.
</textarea>
<br><br>
<label for="question">Question:</label><br>
<textarea id="question" name="question" rows="1" cols="80" style="background-color:#aacdea">
How many countries contain rainforest?
</textarea>
<br><br>
<input type="submit" value="Ask">
</form>
Answer:<br>
<textarea id="answer" name="answer" rows="1" cols="80" style="background-color:#ed8989">
Survey says...
</textarea>
</body>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script>
$(document).ready(function(){
$('[name="contextQuestion"]').click(function(e)
{
var QuestionContext = JSON.stringify({
question:$("#question").serialize(),
context:$("#context").serialize()
});
console.log(QuestionContext)
$.ajax({
url: "http://127.0.0.1:5000/qa",
type: "POST",
dataType: 'json',
data: QuestionContext,
success:function(response)
{
var str = JSON.stringify(response.answer);
console.log(str);
$('#answer').html(str.slice(1,-1));
}
});
e.preventDefault();
});
});
</script>
</html>