-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathlayout.html
215 lines (184 loc) · 8.44 KB
/
layout.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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>{% block title %}{% endblock %}</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{{ url_for('static', filename='bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='AdminLTE.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='font-awesome/4.2.0/css/font-awesome.min.css') }}">
<script src="{{ url_for('static', filename='bootstrap.min.js') }}"></script>
<script src="{{ url_for('static', filename='jquery-3.3.1.min.js') }}"></script>
<script src="{{ url_for('static', filename='app.min.js') }}"></script>
<style>
#mydivheader {
padding: 10px;
cursor: move;
z-index: 1032;
background-color: #001f3e;
color: #fff;
}
#mydiv {
z-index: 1031;
}
.paper-content {
max-height: 100px;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<header class="main-header">
<nav class="navbar navbar-static-top bg-navy" style="margin-left:0;padding: 10px">
<div class="main-container">
<div class="navbar-header pull-left">
<img src="{{ url_for('static', filename='pictures/icon.png') }}"
width="30"
class="d-inline-block align-top" alt="" id="trigger-upload">
Retrieval system for COVID-19 related papers based on <a
href="https://pages.semanticscholar.org/coronavirus-research"> CORD19 dataset</a>
</div>
</div>
</nav>
</header>
{% block leftbar %} {% endblock %}
<div class="container">
<div class="row" style="margin: 50px">
<div class="col-md-12">
<!-- <div class="input-group input-group-lg">-->
<!-- <input type="text" class="form-control" id="search-input">-->
<!-- <span class="input-group-btn">-->
<!-- <button type="button" class="btn btn-info btn-flat" id="search-btn">Search</button>-->
<!-- </span>-->
<!-- </div>-->
<!-- <div class="form-group" style="margin-top: 10px">-->
<!-- <label>Models</label><a href="#"><i class="fa fa-fw fa-question-circle"></i></a>-->
<!-- <select class="form-control" id="model-select">-->
<!-- <option>TF-IDF</option>-->
<!-- </select>-->
<!-- </div>-->
<div class="form-group" style="margin-top: 30px">
<label>Insights (Based on the tasks on <a
href="https://www.kaggle.com/allen-institute-for-ai/CORD-19-research-challenge/tasks">kaggle</a>)</label>
<select class="form-control" id="kaggle-tasks">
<option>Select</option>
</select>
</div>
</div>
</div>
<div class="row" style="margin: 10px">
<div class="col-md-12">
<div class="box box-solid">
<div class="box-header with-border">
<h3 class="box-title" id="results-title">Search Results</h3><span id="results-count"></span>
</div>
<div class="box-body" id="display-box">
</div>
</div>
</div>
</div>
</div>
<!--{##}-->
<!--{#<div id="response"></div>#}-->
<!--{##}-->
<!--{#<div id="response"></div>#}-->
<div style="margin-bottom: 100px">
</div>
<footer class="main-footer"
style="margin-left: 0;width:100%;height:50px;text-align: center;position: fixed;bottom: 0">
<strong>Source code can be found in the <a href="https://github.com/wangcongcong123/covidsearch">Github Repository</a> @Congcong Wang</strong>
</footer>
<script type="text/javascript">
$(function () {
var kaggle_tasks = {
"task1": "What is known about transmission, incubation, and environmental stability?",
"task2": "What do we know about COVID-19 risk factors?",
"task3": "What do we know about virus genetics, origin, and evolution?",
"task4": "What do we know about vaccines and therapeutics?",
"task5": "What do we know about non-pharmaceutical interventions?",
"task6": "What has been published about medical care?",
"task7": "Sample task with sample submission",
"task8": "What do we know about diagnostics and surveillance?",
"task9": "What has been published about information sharing and inter-sectoral collaboration?",
"task10": "What has been published about ethical and social science considerations?"
};
$.each(kaggle_tasks, function (name, query) {
var html = "<option>" + name + ": " + query + "</option>";
$("#kaggle-tasks").append(html);
});
$("#kaggle-tasks").change(function () {
var kaggle_task = $(this).val();
if (kaggle_task != "Select") {
var task_name = kaggle_task.split(":")[0];
$.ajax({
type: "POST",
url: "/kaggle_task",
data: JSON.stringify({"task_name": task_name}),
contentType: "application/json",
success: function (data) {
var data_obj = data;
var results = data_obj.result;
var len = data_obj.result.length;
$("#results-title").text(data_obj.response);
$("#results-count").text(" (" + len + ")");
$("#display-box").empty();
$.each(results, function (index, instance) {
var display_content = '<blockquote>' +
'<p class="fa-2x"><a href="' + instance.doi + '">' + instance.title + '</a></p>' +
'<div class="paper-insights"><span style="background-color: #ccffff;"> ' + instance.sentence + '</span></div>' +
'<p style="margin-top: 10px"><small><span>' + instance.authors.slice(0, 15) + ' et al. </span> Published: ' + instance.publish_time + '</small></p></blockquote>';
$("#display-box").append(display_content);
});
}
});
}
});
$('#search-input').keyup(function (e) {
if (e.keyCode == 13) {
var query = $(this).val();
var model_type = $("#model-select").val();
retrieve(query, model_type);
}
});
$("#search-btn").click(function () {
var query = $("#search-input").val();
var model_type = $("#model-select").val();
retrieve(query, model_type);
});
function retrieve(query, model_type) {
if (query == "") {
alert("enter a query !");
return false;
}
$.ajax({
type: "POST",
url: "/search",
data: JSON.stringify({"query": query, "model_type": model_type}),
contentType: "application/json",
success: function (data) {
var data_obj = data;
var results = data_obj.result;
var len = data_obj.result.length;
$("#results-title").text(data_obj.response);
$("#results-count").text(" (" + len + ")");
$("#display-box").empty();
$.each(results, function (index, instance) {
var display_content = '<blockquote>' +
'<p class="fa-2x"><a href="' + instance.doi + '">' + instance.title + '</a></p>' +
'<div class="paper-content"> ' + instance.abstract + '</div>' +
'<p style="margin-top: 10px"><small><span>' + instance.authors.slice(0, 15) + ' et al. </span> Published: ' + instance.publish_time + '</small></p></blockquote>';
$("#display-box").append(display_content);
});
}
});
}
});
</script>
{% block scripts %}
{% endblock %}
</body>
</html>