Hugging Face's logo

Spaces:
hunkim
/
es-gpt
Runtime error

App Files Community
hunkim commited on
Commit
d695a29
•
1 Parent(s): b8f6efa

Create index.html

Browse files
Files changed (1) hide show
  1. index.html +164 -0
index.html ADDED
@@ -0,0 +1,164 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+
4
+ <head>
5
+ <title>Summary and Search Example</title>
6
+ <script>
7
+
8
+ function search() {
9
+ const resultsElement = document.getElementById("results");
10
+ const query = document.getElementById("query").value;
11
+ const url = `/search?q=${encodeURIComponent(query)}`;
12
+ const eventSource = new EventSource(url);
13
+ console.log(eventSource);
14
+
15
+ eventSource.onerror = function (e) {
16
+ if (e.readyState == EventSource.CLOSED) {
17
+ // Connection was closed.
18
+ }
19
+ eventSource.close();
20
+ };
21
+
22
+ eventSource.onmessage = function (event) {
23
+ console.log(event);
24
+ if (!event.data || event.data == "[DONE]") {
25
+ eventSource.close();
26
+ return;
27
+ }
28
+ const result = JSON.parse(event.data);
29
+ const item = document.createElement("div");
30
+ item.classList.add("search-result");
31
+
32
+ const title = document.createElement("b");
33
+ title.textContent = result._source.title;
34
+ item.appendChild(title);
35
+
36
+ const authors = document.createElement("p");
37
+ authors.textContent = `Authors: ${result._source.author}`;
38
+ item.appendChild(authors);
39
+
40
+ const abs = document.createElement("p");
41
+ abs.classList.add("abstract");
42
+ abs.textContent = `${result._source.abstract.substring(0, 500)}...`;
43
+ item.appendChild(abs);
44
+
45
+ resultsElement.appendChild(item);
46
+ };
47
+ }
48
+
49
+ function summarize() {
50
+ const summaryElement = document.getElementById("summary");
51
+ const query = document.getElementById("query").value;
52
+ const url = `summary?q=${encodeURIComponent(query)}`;
53
+ const eventSource = new EventSource(url);
54
+ eventSource.onmessage = function (event) {
55
+ if (!event.data || event.data == "[DONE]") {
56
+ eventSource.close();
57
+ return;
58
+ }
59
+ const result = JSON.parse(event.data);
60
+ summaryElement.innerHTML += result['choices'][0]['text'];
61
+ };
62
+ }
63
+
64
+ function clearResults() {
65
+ const resultsElement = document.getElementById("results");
66
+ const summaryElement = document.getElementById("summary");
67
+ if (summaryElement) {
68
+ summaryElement.innerHTML = "";
69
+ }
70
+ if (resultsElement) {
71
+ resultsElement.innerHTML = "";
72
+ }
73
+ }
74
+
75
+ function searchAndSummarize() {
76
+ clearResults();
77
+ search();
78
+ summarize();
79
+ }
80
+ </script>
81
+ <style>
82
+ body {
83
+ display: flex;
84
+ flex-wrap: wrap;
85
+ }
86
+
87
+ #search-container {
88
+ flex: 0 0 100%;
89
+ padding: 20px;
90
+ box-sizing: border-box;
91
+ }
92
+
93
+ #results-container {
94
+ flex: 0 0 70%;
95
+ padding: 20px;
96
+ box-sizing: border-box;
97
+ }
98
+
99
+ #summary-container {
100
+ flex: 0 0 30%;
101
+ padding: 20px;
102
+ box-sizing: border-box;
103
+ background-color: #f2f2f2;
104
+ }
105
+
106
+ .search-input-container {
107
+ display: flex;
108
+ margin-bottom: 20px;
109
+ }
110
+
111
+ #query {
112
+ flex: 1;
113
+ margin-right: 10px;
114
+ }
115
+
116
+ #results {
117
+ max-height: 80vh;
118
+ overflow-y: scroll;
119
+ }
120
+
121
+ .search-result {
122
+ margin-bottom: 10px;
123
+ padding-bottom: 10px;
124
+ border-bottom: 1px solid #ddd;
125
+ }
126
+
127
+ .search-result a {
128
+ font-size: 18px;
129
+ font-weight: bold;
130
+ color: #1a0dab;
131
+ text-decoration: none;
132
+ }
133
+
134
+ .search-result a:hover {
135
+ text-decoration: underline;
136
+ }
137
+
138
+ .search-result p {
139
+ margin: 10px 0;
140
+ font-size: 14px;
141
+ }
142
+ </style>
143
+ </head>
144
+
145
+ <body>
146
+ <div id="search-container">
147
+ <h2>Elasticsearch with GPT Summary</h2>
148
+ <div class="search-input-container">
149
+ <input type="text" id="query" placeholder="Enter a query (e.g., bug, gan)" onkeydown="if (event.key === 'Enter') searchAndSummarize()">
150
+ <button onclick="searchAndSummarize()">Search</button>
151
+ </div>
152
+ </div>
153
+ <div id="results-container">
154
+ <h3>Search Results</h3>
155
+ <div id="results"></div>
156
+ </div>
157
+ <div id="summary-container">
158
+ <h3>GPT Summary</h3>
159
+ <div id="summary"></div>
160
+ </div>
161
+ </body>
162
+
163
+
164
+ </html>