Hugging Face's logo

Spaces:
gramota
/
ai
Running

App Files Community
ehristoforu commited on
Commit
4844de2
•
1 Parent(s): 322d8d3

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +639 -56
index.html CHANGED
@@ -1,58 +1,641 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1">
6
- <title>HelpingAI Search</title>
7
- <link rel="icon" href="https://www.gstatic.com/favicon/favicon.ico" type="image/x-icon">
8
- <link rel="preconnect" href="https://fonts.googleapis.com">
9
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
- <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
11
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
12
- <link rel="stylesheet" href="styles.css">
13
- </head>
14
- <body>
15
- <div class="main-content">
16
- <div class="search-container">
17
- <form id="search-form">
18
- <div class="search-box">
19
- <input type="text" id="search-query" placeholder="Search the web" autocomplete="off">
20
- <button type="submit"></button>
21
- </div>
22
- <div id="suggestions"></div>
23
- </form>
24
- </div>
25
- <div id="ai-response"></div>
26
- <div id="results-info" style="text-align: center;"></div>
27
- <div id="results"></div>
28
- <div id="no-results">
29
- <p>No results found. Try refining your search.</p>
30
- </div>
31
- <div id="loading-more">Loading more results...</div>
32
- <div class="loading-overlay">
33
- <div class="loading-spinner"></div>
34
- </div>
35
- </div>
36
- <div id="summaryPopup" class="summary-popup" style="display: none;">
37
- <span class="close">×</span>
38
- <div class="content">
39
- <div class="loading">
40
- <div class="loading-spinner"></div>
41
- <p class="loading-text">Loading...</p>
42
- </div>
43
- <div id="summaryContent"></div>
44
- </div>
45
- </div>
46
- <div id="answerPopup" class="answer-popup" style="display: none;">
47
- <span class="close">×</span>
48
- <div class="content">
49
- <div class="loading">
50
- <div class="loading-spinner"></div>
51
- <p class="loading-text">Loading...</p>
52
- </div>
53
- <div id="answerContent"></div>
54
- </div>
55
- </div>
56
- <script src="scripts.js"></script>
57
- </body>
58
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1">
6
+ <title>Грамота.ИИ</title>
7
+ <link rel="icon" href="https://www.gstatic.com/favicon/favicon.ico" type="image/x-icon">
8
+ <link rel="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
11
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
12
+ <style>
13
+ *{box-sizing:border-box}
14
+ body{margin:0;padding:0;font-family:"Poppins",sans-serif;background-color:#f8f9fa}
15
+ a{text-decoration:none;color:#1a0dab}
16
+ a:hover{text-decoration:underline}
17
+ .main-content{display:flex;flex-direction:column;align-items:center;padding:50px 20px}
18
+ .search-container{width:100%;max-width:700px;position:relative;width:60%;margin-bottom:20px}
19
+ .search-box{width:100%;padding:12px 16px;border:2px solid #4285f4;border-radius:24px;box-shadow:0 2px 4px rgba(0,0,0,0.1);transition:box-shadow .2s ease-in-out,width .3s ease,border-color .3s ease;display:flex;align-items:center}
20
+ .search-box:focus-within{box-shadow:0 4px 8px rgba(32,33,36,0.35);border-color:#ea4335}
21
+ #search-query{width:calc(100% - 40px);border:none;outline:0;font-size:16px;padding:4px 0;transition:font-size .2s ease}
22
+ #search-query::placeholder{color:#9aa0a6;transition:color .2s ease}
23
+ #search-query:focus{font-size:18px}
24
+ #search-query:focus::placeholder{color:transparent}
25
+ #search-form button{background:0 0;border:none;cursor:pointer;padding:8px;margin-left:10px;transition:transform .2s ease}
26
+ #search-form button:hover{transform:scale(1.1)}
27
+ #search-form button svg{display:none}
28
+ #search-form button::after{content:"\f002";color:#9aa0a6;transition:color .2s ease,transform .2s ease;font:900 1.2em "Font Awesome 5 Free"}
29
+ #search-form button:hover::after{color:#4285f4;transform:scale(1.1)}
30
+ #suggestions{width:calc(80% - 32px);background-color:#fff;border:none;border-radius:8px;box-shadow:0 4px 6px rgba(32,33,36,0.28);display:none;position:absolute;top:100%;left:0;z-index:10;opacity:0;transform:translateY(10px);transition:opacity .3s ease,transform .3s ease;padding:10px 0}
31
+ @keyframes spin {
32
+ 0%{transform:rotate(0)}
33
+ 100%{transform:rotate(360deg)}
34
+ }
35
+ #suggestions ul{list-style-type:none;padding:0;margin:0}
36
+ #suggestions li{padding:8px 12px;cursor:pointer;border-bottom:1px solid #eee;transition:background-color .2s ease}
37
+ #suggestions li:hover{background-color:#e9e9e9}
38
+ #suggestions li.selected{background-color:#f0f0f0}
39
+ .search-box:focus-within+#suggestions,.search-box:hover+#suggestions{display:block;opacity:1;transform:translateY(0)}
40
+ #results{width:100%;max-width:700px;margin-top:20px}
41
+ .result,.ai-result{margin-bottom:20px;padding:15px;border-radius:8px;background-color:#fff;box-shadow:0 2px 4px rgba(0,0,0,0.1);opacity:0;transform:translateY(10px);transition:opacity .3s ease,transform .3s ease;animation:fadeInUp .5s ease forwards}
42
+ .ai-result{background-color:#f0f0f5;width:100%;max-width:800px}
43
+ @keyframes fadeInUp {
44
+ from{opacity:0;transform:translateY(20px)}
45
+ to{opacity:1;transform:translateY(0)}
46
+ }
47
+ .result.show,.ai-result.show{opacity:1;transform:translateY(0)}
48
+ .result:hover,.ai-result:hover{box-shadow:0 4px 8px rgba(0,0,0,0.2)}
49
+ .result h3{margin:0 0 5px;font-size:1.2rem;color:#222}
50
+ .result .url{color:#202124;font-size:.9rem;margin-bottom:8px;display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
51
+ .result p{color:#555;font-size:.9rem;line-height:1.6em;margin:0}
52
+ .loading-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0);z-index:1000}
53
+ .loading-spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80px;height:80px;border-radius:50%;border:5px solid #f3f3f3;border-top:5px solid #3498db;animation:spin 1.2s linear infinite}
54
+ @keyframes spin {
55
+ 0%{transform:rotate(0deg)}
56
+ 100%{transform:rotate(360deg)}
57
+ }
58
+ .loading-spinner{width:40px;height:40px;border-radius:50%;border:5px solid #f3f3f3;border-top:5px solid #3498db;animation:spin 1.2s linear infinite}
59
+ .loading-text{margin-left:10px;font-size:1rem;color:#333}
60
+ #no-results{display:none;text-align:center;padding:20px;font-size:1.1em;color:#555}
61
+ .result .actions button{background-color:#f2f2f2;color:#000;border:1px solid #ddd;padding:8px 16px;border-radius:20px;font-size:.9rem;font-weight:700;cursor:pointer;transition:background-color .2s ease,box-shadow .2s ease;margin-right:10px}
62
+ .result .actions button:hover{background-color:#e0e0e0;box-shadow:0 2px 4px rgba(0,0,0,0.1)}
63
+ .summary-popup,.answer-popup{border-radius:16px;box-shadow:0 4px 12px rgba(0,0,0,0.25);background-color:#f8f9fa;color:#333;font-family:'Poppins',sans-serif;padding:20px;position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);max-width:80%;max-height:80%;overflow-y:auto;z-index:1001}
64
+ .summary-popup .close,.answer-popup .close{position:absolute;top:15px;right:15px;cursor:pointer;font-size:1.5em;color:#666;transition:color .2s ease}
65
+ .summary-popup .close:hover,.answer-popup .close:hover{color:#333}
66
+ .summary-popup .loading,.answer-popup .loading{display:flex;justify-content:center;align-items:center;height:100px;display:none}
67
+ .summary-popup .loading-spinner,.answer-popup .loading-spinner{width:60px;height:60px;border-radius:50%;border:5px solid #f3f3f3;border-top:5px solid #3498db;animation:spin 1.2s linear infinite}
68
+ .summary-popup .content,.answer-popup .content{padding:20px;font-size:1rem;line-height:1.5}
69
+ .summary-popup #summaryContent,.answer-popup #answerContent{font-family:'Poppins',sans-serif;margin-bottom:20px}
70
+ #no-results{display:none;text-align:center;padding:20px;font-size:1.1em;color:#555}
71
+ #loading-more{display:none;text-align:center;padding:10px}
72
+ #loading-more.active{display:block}
73
+ .ai-result h2{margin:0 0 10px;font-size:1.5rem;font-weight:700;color:#333}
74
+ .ai-result p{color:#444;font-size:.9rem;line-height:1.5em;margin:0;display:flex;flex-direction:column}
75
+ .ai-result .actions {
76
+ display: flex;
77
+ justify-content: flex-end; /* Align buttons to the right */
78
+ margin-top: 10px;
79
+ }
80
+
81
+ .ai-result .actions button {
82
+ background-color: #f2f2f2;
83
+ color: #000;
84
+ border: 1px solid #ddd;
85
+ padding: 8px 12px; /* Adjust padding if needed */
86
+ border-radius: 20px;
87
+ font-size: .9rem;
88
+ font-weight: 700;
89
+ cursor: pointer;
90
+ transition: background-color .2s ease, box-shadow .2s ease;
91
+ margin-left: 10px; /* Add space between buttons */
92
+ }
93
+
94
+ .ai-result .actions button:hover {
95
+ background-color: #e0e0e0;
96
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
97
+ }
98
+
99
+ .ai-result .actions button i { /* Style Font Awesome icons */
100
+ font-size: 1.2rem; /* Adjust icon size as needed */
101
+ color: #333;
102
+ }
103
+ </style>
104
+ </head>
105
+ <body>
106
+ <div class="main-content">
107
+ <div class="search-container">
108
+ <form id="search-form">
109
+ <div class="search-box">
110
+ <input type="text" id="search-query" placeholder="Считанный или считаный?" autocomplete="off">
111
+ <button type="submit"></button>
112
+ </div>
113
+ <div id="suggestions"></div>
114
+ </form>
115
+ </div>
116
+ <div id="ai-response"></div>
117
+ <div id="results-info" style="text-align: center;"></div>
118
+ <div id="results"></div>
119
+ <div id="no-results">
120
+ <p>Проблемы с нашей стороны. Попробуйте ещё раз прямо сейчас.</p>
121
+ </div>
122
+ <div id="loading-more">Загрузка дополнительных ресурсов...</div>
123
+ <div class="loading-overlay">
124
+ <div class="loading-spinner"></div>
125
+ </div>
126
+ </div>
127
+ <div id="summaryPopup" class="summary-popup" style="display: none;">
128
+ <span class="close">×</span>
129
+ <div class="content">
130
+ <div class="loading">
131
+ <div class="loading-spinner"></div>
132
+ <p class="loading-text">Загрузка...</p>
133
+ </div>
134
+ <div id="summaryContent"></div>
135
+ </div>
136
+ </div>
137
+ <div id="answerPopup" class="answer-popup" style="display: none;">
138
+ <span class="close">×</span>
139
+ <div class="content">
140
+ <div class="loading">
141
+ <div class="loading-spinner"></div>
142
+ <p class="loading-text">Загрузка...</p>
143
+ </div>
144
+ <div id="answerContent"></div>
145
+ </div>
146
+ </div>
147
+ <script>
148
+ const BASE_URL = "https://oevortex-webscout-api.hf.space";
149
+ const searchForm = document.getElementById("search-form");
150
+ const searchQueryInput = document.getElementById("search-query");
151
+ const resultsContainer = document.getElementById("results");
152
+ const suggestionsContainer = document.getElementById("suggestions");
153
+ const loadingOverlay = document.querySelector('.loading-overlay');
154
+ const noResultsMessage = document.getElementById('no-results');
155
+ const loadingMoreIndicator = document.getElementById('loading-more');
156
+ const aiResponseContainer = document.getElementById('ai-response');
157
+ const INITIAL_RESULTS = 5;
158
+ const CACHED_RESULTS = 50;
159
+ const RESULTS_PER_PAGE = 5;
160
+ let allResultsFetched = false;
161
+ const seenUrls = new Set();
162
+ let selectedSuggestionIndex = -1;
163
+ let suggestionRequestTimeout;
164
+ let cachedSearchResults = [];
165
+ const suggestionCache = {};
166
+ let prefetchTimeout;
167
+ let allResults = [];
168
+ let startTime;
169
+
170
+ function debounce(func, delay) {
171
+ return function() {
172
+ clearTimeout(suggestionRequestTimeout);
173
+ suggestionRequestTimeout = setTimeout(() => {
174
+ func.apply(this, arguments);
175
+ }, delay);
176
+ };
177
+ }
178
+ async function fetchSuggestions(query) {
179
+ if (suggestionCache[query]) {
180
+ return suggestionCache[query];
181
+ }
182
+ try {
183
+ const response = await fetch(`${BASE_URL}/api/suggestions?q=${encodeURIComponent(query)}`);
184
+ if (response.ok) {
185
+ const suggestions = await response.json();
186
+ suggestionCache[query] = suggestions;
187
+ return suggestions;
188
+ } else {
189
+ console.error("Error fetching suggestions:", response.status);
190
+ return [];
191
+ }
192
+ } catch (error) {
193
+ console.error("Error fetching suggestions:", error);
194
+ return [];
195
+ }
196
+ }
197
+ searchQueryInput.addEventListener("input", () => {
198
+ clearTimeout(prefetchTimeout);
199
+ const searchQuery = searchQueryInput.value.trim();
200
+ if (searchQuery === "") {
201
+ suggestionsContainer.style.display = "none";
202
+ return;
203
+ }
204
+ prefetchTimeout = setTimeout(async () => {
205
+ const suggestions = await fetchSuggestions(searchQuery);
206
+ displaySuggestions(suggestions);
207
+ }, 100);
208
+ });
209
+
210
+ function displaySuggestions(suggestions) {
211
+ suggestionsContainer.innerHTML = "";
212
+ if (suggestions.length === 0 || searchQueryInput.value.trim() === "") {
213
+ suggestionsContainer.style.display = "none";
214
+ return;
215
+ }
216
+ const suggestionList = document.createElement("ul");
217
+ suggestions.forEach((suggestion, index) => {
218
+ const listItem = document.createElement("li");
219
+ listItem.textContent = suggestion.phrase;
220
+ listItem.addEventListener("click", () => {
221
+ searchQueryInput.value = suggestion.phrase;
222
+ suggestionsContainer.style.display = "none";
223
+ performSearch(suggestion.phrase);
224
+ });
225
+ listItem.addEventListener("focus", () => {
226
+ selectedSuggestionIndex = index;
227
+ updateSuggestionSelection();
228
+ });
229
+ suggestionList.appendChild(listItem);
230
+ });
231
+ suggestionsContainer.appendChild(suggestionList);
232
+ suggestionsContainer.style.display = "block";
233
+ }
234
+
235
+ function updateSuggestionSelection() {
236
+ const suggestionItems = suggestionsContainer.querySelectorAll("li");
237
+ suggestionItems.forEach((item, index) => {
238
+ item.classList.toggle("selected", index === selectedSuggestionIndex);
239
+ });
240
+ }
241
+
242
+ function showLoading() {
243
+ loadingOverlay.style.display = 'block';
244
+ }
245
+
246
+ function hideLoading() {
247
+ loadingOverlay.style.display = 'none';
248
+ }
249
+ async function performSearch(query) {
250
+ showLoading();
251
+ aiResponseContainer.style.display = 'none';
252
+ suggestionsContainer.style.display = "none";
253
+ startTime = performance.now();
254
+ seenUrls.clear();
255
+ allResultsFetched = false;
256
+ resultsContainer.innerHTML = '';
257
+ noResultsMessage.style.display = 'none';
258
+ loadingMoreIndicator.classList.remove('active');
259
+ speechSynthesis.cancel();
260
+ const initialResults = await fetchResults(query, INITIAL_RESULTS);
261
+ displayResults(initialResults);
262
+ hideLoading();
263
+ fetchResults(query, CACHED_RESULTS).then(cachedResults => {
264
+ cachedSearchResults = removeDuplicateResults(cachedResults);
265
+ allResults = allResults.concat(cachedSearchResults);
266
+ displayResults(cachedSearchResults.slice(INITIAL_RESULTS, RESULTS_PER_PAGE), true);
267
+ if (cachedSearchResults.length > RESULTS_PER_PAGE) {
268
+ allResultsFetched = false;
269
+ loadingMoreIndicator.classList.add('active');
270
+ }
271
+ });
272
+ fetchAIResponse(query).then(aiResponse => {
273
+ displayAIResponse(aiResponse);
274
+ aiResponseContainer.style.display = 'block';
275
+ }).catch(error => {
276
+ console.error("Error fetching AI response:", error);
277
+ });
278
+ updateURLWithQuery(query);
279
+ }
280
+ async function fetchAIResponse(query) {
281
+ try {
282
+ const encodedQuery = encodeURIComponent(query);
283
+ const websiteURL = 'https://google.com/search?q=${encodedQuery}'
284
+ const response = await fetch(`${BASE_URL}/api/ask_website?url=https://google.com/search?q=${encodedQuery}&question=Answer this question from google search result ${encodedQuery}&model=gpt-4o-mini`);
285
+ if (response.ok) {
286
+ const aiResponse = await response.json();
287
+ return aiResponse;
288
+ } else {
289
+ console.error("Error fetching AI response from website:", response.status);
290
+ return null;
291
+ }
292
+ } catch (error) {
293
+ console.error("Error fetching AI response from website:", error);
294
+ return null;
295
+ }
296
+ }
297
+
298
+ function displayAIResponse(response) {
299
+ aiResponseContainer.innerHTML = '';
300
+ if (response) {
301
+ const aiResultElement = document.createElement('div');
302
+ aiResultElement.classList.add('ai-result');
303
+ const aiHeading = document.createElement('h2');
304
+ aiHeading.textContent = "AI Response";
305
+ aiResultElement.appendChild(aiHeading);
306
+ const aiText = document.createElement('p');
307
+ const decodedResponse = decodeHtml(response);
308
+ const msg = new SpeechSynthesisUtterance(decodedResponse);
309
+ speechSynthesis.speak(msg);
310
+ aiText.textContent = decodedResponse;
311
+ const pauseButton = document.createElement('button');
312
+ pauseButton.id = 'pause';
313
+ pauseButton.innerHTML = '<i class="fas fa-pause"></i>';
314
+ const stopButton = document.createElement('button');
315
+ stopButton.id = 'stop';
316
+ stopButton.innerHTML = '<i class="fas fa-stop"></i>';
317
+ let isPaused = false;
318
+ let isStoped = false;
319
+ pauseButton.addEventListener('click', () => {
320
+ if ('speechSynthesis' in window) {
321
+ if (isPaused) {
322
+ window.speechSynthesis.resume();
323
+ isPaused = false;
324
+ stopButton.style.display = 'inline-block';
325
+ pauseButton.innerHTML = '<i class="fas fa-pause"></i>';
326
+ } else {
327
+ window.speechSynthesis.pause();
328
+ isPaused = true;
329
+ stopButton.style.display = 'none';
330
+ pauseButton.innerHTML = '<i class="fas fa-play"></i>';
331
+ }
332
+ }
333
+ });
334
+
335
+ stopButton.addEventListener('click', () => {
336
+ if ('speechSynthesis' in window) {
337
+ if (isStoped){
338
+ speechSynthesis.speak(msg);
339
+ isPaused = false;
340
+ isStoped = false;
341
+ pauseButton.innerHTML = '<i class="fas fa-pause"></i>';
342
+ pauseButton.style.display = 'inline-block';
343
+ stopButton.innerHTML = '<i class="fas fa-stop"></i>';
344
+ }else{
345
+ window.speechSynthesis.cancel();
346
+ isPaused = false;
347
+ isStoped = true;
348
+ pauseButton.style.display = 'none';
349
+ stopButton.innerHTML = '<i class="fas fa-play"></i>'; }
350
+ }
351
+ });
352
+
353
+ // Add the buttons to the actions container
354
+ aiResultElement.appendChild(pauseButton);
355
+ aiResultElement.appendChild(stopButton);
356
+
357
+ // Style the AI response text
358
+ aiText.setAttribute('style', 'font-size: 1rem; line-height: 1.5rem;');
359
+ aiResultElement.appendChild(aiText);
360
+ aiResponseContainer.appendChild(aiResultElement);
361
+ }
362
+ }
363
+
364
+ function updateURLWithQuery(query) {
365
+ const newURL = `${window.location.pathname}?query=${encodeURIComponent(query)}`;
366
+ window.history.pushState({
367
+ path: newURL
368
+ }, '', newURL);
369
+ }
370
+
371
+ function removeDuplicateResults(results) {
372
+ const uniqueResults = [];
373
+ const seen = new Set();
374
+ for (const result of results) {
375
+ if (!seen.has(result.href)) {
376
+ seen.add(result.href);
377
+ uniqueResults.push(result);
378
+ }
379
+ }
380
+ return uniqueResults;
381
+ }
382
+
383
+ async function fetchResults(query, resultsPerPage) {
384
+ const response = await fetch(`${BASE_URL}/api/search?q=${encodeURIComponent(query)}&max_results=${resultsPerPage}`);
385
+ if (!response.ok) {
386
+ displayError("Ошибка поиска. Словари на тех. передышке...");
387
+ hideLoading();
388
+ return [];
389
+ }
390
+ const searchResults = await response.json();
391
+ return searchResults;
392
+ }
393
+
394
+ const summaryPopup = document.getElementById('summaryPopup');
395
+ const summaryContent = document.getElementById('summaryContent');
396
+ const answerPopup = document.getElementById('answerPopup');
397
+ const answerContent = document.getElementById('answerContent');
398
+ const summaryCache = {};
399
+ const answerCache = {};
400
+
401
+ function displayResults(results, append = false) {
402
+ if (!append) {
403
+ resultsContainer.innerHTML = '';
404
+ }
405
+ const newResults = results.filter(result => !seenUrls.has(result.href));
406
+ newResults.forEach((result, index) => {
407
+ seenUrls.add(result.href);
408
+ const resultElement = document.createElement("div");
409
+ resultElement.classList.add("result");
410
+ const titleElement = document.createElement("h3");
411
+ const titleLink = document.createElement("a");
412
+ titleLink.href = result.href;
413
+ titleLink.textContent = result.title;
414
+ titleLink.target = "_blank";
415
+ titleLink.rel = "noopener noreferrer";
416
+ titleElement.appendChild(titleLink);
417
+ const urlElement = document.createElement("div");
418
+ urlElement.classList.add("url");
419
+ const urlLink = document.createElement("a");
420
+ urlLink.href = result.href;
421
+ urlLink.textContent = result.href;
422
+ urlLink.target = "_blank";
423
+ urlLink.rel = "noopener noreferrer";
424
+ urlElement.appendChild(urlLink);
425
+ const descriptionElement = document.createElement("p");
426
+ descriptionElement.textContent = result.body;
427
+ resultElement.appendChild(titleElement);
428
+ resultElement.appendChild(urlElement);
429
+ resultElement.appendChild(descriptionElement);
430
+ const actionsContainer = document.createElement('div');
431
+ actionsContainer.classList.add('actions');
432
+ const summarizeButton = document.createElement('button');
433
+ summarizeButton.textContent = 'Суммаризируй сайт';
434
+ summarizeButton.addEventListener('click', () => {
435
+ showSummaryPopup(result.href);
436
+ });
437
+ actionsContainer.appendChild(summarizeButton);
438
+ const answerButton = document.createElement('button');
439
+ answerButton.textContent = 'Ответ на этот сайт';
440
+ answerButton.addEventListener('click', () => {
441
+ showAnswerPopup(result.href);
442
+ });
443
+ actionsContainer.appendChild(answerButton);
444
+ resultElement.appendChild(actionsContainer);
445
+ resultsContainer.appendChild(resultElement);
446
+ setTimeout(() => {
447
+ resultElement.classList.add("show");
448
+ }, 1 * index);
449
+ });
450
+ if (resultsContainer.children.length === 0) {
451
+ noResultsMessage.style.display = 'block';
452
+ } else {
453
+ noResultsMessage.style.display = 'none';
454
+ }
455
+ if (!append) {
456
+ const endTime = performance.now();
457
+ const timeTaken = (endTime/2 - startTime/2).toFixed(2);
458
+ document.getElementById('results-info').textContent = `About ${timeTaken} milliseconds`;
459
+ }
460
+ }
461
+
462
+ function displayError(message) {
463
+ resultsContainer.innerHTML = '';
464
+ const errorElement = document.createElement("p");
465
+ errorElement.textContent = message;
466
+ errorElement.style.color = "red";
467
+ resultsContainer.appendChild(errorElement);
468
+ }
469
+
470
+ searchQueryInput.addEventListener("input", debounce(async () => {
471
+ selectedSuggestionIndex = -1;
472
+ const searchQuery = searchQueryInput.value;
473
+ if (searchQuery.trim() === "") {
474
+ suggestionsContainer.style.display = "none";
475
+ return;
476
+ }
477
+ const suggestions = await fetchSuggestions(searchQuery);
478
+ displaySuggestions(suggestions);
479
+ }, 500));
480
+
481
+ searchQueryInput.addEventListener("focus", () => {
482
+ if (searchQueryInput.value.trim() !== "") {
483
+ suggestionsContainer.style.display = "block";
484
+ }
485
+ });
486
+
487
+ document.addEventListener("click", (event) => {
488
+ if (!searchForm.contains(event.target)) {
489
+ suggestionsContainer.style.display = "none";
490
+ }
491
+ });
492
+
493
+ searchQueryInput.addEventListener("keydown", async (event) => {
494
+ if (event.key === "ArrowUp" || event.key === "ArrowDown") {
495
+ event.preventDefault();
496
+ const suggestionItems = suggestionsContainer.querySelectorAll("li");
497
+ const numSuggestions = suggestionItems.length;
498
+ if (event.key === "ArrowUp") {
499
+ selectedSuggestionIndex = (selectedSuggestionIndex - 1 + numSuggestions) % numSuggestions;
500
+ } else {
501
+ selectedSuggestionIndex = (selectedSuggestionIndex + 1) % numSuggestions;
502
+ }
503
+ updateSuggestionSelection();
504
+ if (selectedSuggestionIndex !== -1 && suggestionItems[selectedSuggestionIndex]) {
505
+ searchQueryInput.value = suggestionItems[selectedSuggestionIndex].textContent;
506
+ suggestionItems[selectedSuggestionIndex].focus();
507
+ }
508
+ } else if (event.key === "Enter" && selectedSuggestionIndex !== -1) {
509
+ event.preventDefault();
510
+ const selectedSuggestion = suggestionsContainer.querySelectorAll("li")[selectedSuggestionIndex];
511
+ if (selectedSuggestion) {
512
+ searchQueryInput.value = selectedSuggestion.textContent;
513
+ suggestionsContainer.style.display = "none";
514
+ performSearch(searchQueryInput.value);
515
+ }
516
+ }
517
+ });
518
+
519
+ searchForm.addEventListener("submit", async (event) => {
520
+ event.preventDefault();
521
+ selectedSuggestionIndex = -1;
522
+ const searchQuery = searchQueryInput.value;
523
+ performSearch(searchQuery);
524
+ });
525
+
526
+ window.addEventListener('scroll', () => {
527
+ if (allResultsFetched) return;
528
+ const {
529
+ scrollTop,
530
+ scrollHeight,
531
+ clientHeight
532
+ } = document.documentElement;
533
+ const isNearBottom = scrollTop + clientHeight >= scrollHeight - 100;
534
+ if (isNearBottom && allResults.length > seenUrls.size) {
535
+ loadingMoreIndicator.classList.add('active');
536
+ const resultsToDisplay = allResults.slice(seenUrls.size, seenUrls.size + RESULTS_PER_PAGE);
537
+ setTimeout(() => {
538
+ displayResults(resultsToDisplay, true);
539
+ for (const result of resultsToDisplay) {
540
+ seenUrls.add(result.href);
541
+ }
542
+ if (allResults.length === seenUrls.size) {
543
+ allResultsFetched = true;
544
+ loadingMoreIndicator.classList.remove('active');
545
+ }
546
+ }, 300);
547
+ }
548
+ });
549
+
550
+ function getQueryParameter(name) {
551
+ const urlParams = new URLSearchParams(window.location.search);
552
+ return urlParams.get(name);
553
+ }
554
+
555
+ window.addEventListener('load', () => {
556
+ const initialQuery = getQueryParameter('query');
557
+ if (initialQuery) {
558
+ searchQueryInput.value = initialQuery;
559
+ performSearch(initialQuery);
560
+ }
561
+ });
562
+
563
+ function decodeHtml(html) {
564
+ var txt = document.createElement("textarea");
565
+ txt.innerHTML = html;
566
+ return txt.value;
567
+ }
568
+
569
+ function showSummaryPopup(url) {
570
+ summaryContent.innerHTML = '';
571
+ summaryPopup.querySelector('.loading').style.display = 'block';
572
+ summaryPopup.style.display = 'block';
573
+ if (summaryCache[url]) {
574
+ displaySummary(summaryCache[url]);
575
+ } else {
576
+ fetchWebsiteSummary(url).then(summary => {
577
+ summaryCache[url] = summary;
578
+ displaySummary(summary);
579
+ }).catch(error => {
580
+ console.error('Ошибка суммаризации.:', error);
581
+ displaySummary('Ошибка суммаризации.');
582
+ });
583
+ }
584
+ }
585
+
586
+ function displaySummary(summary) {
587
+ summaryPopup.querySelector('.loading').style.display = 'none';
588
+ summaryContent.textContent = summary;
589
+ }
590
+
591
+ async function fetchWebsiteSummary(url) {
592
+ const response = await fetch(`${BASE_URL}/api/ask_website?url=${url}&question=${encodeURIComponent("Summarize this site in Detail, Do not start with any intro, Just start summarizing. Summarize in this manner which is very important to human user.")}&model=mixtral-8x7b`);
593
+ if (!response.ok) {
594
+ throw new Error('Ошибка суммаризации сайта.');
595
+ }
596
+ const data = await response.json();
597
+ return data[0] || 'Суммаризация недоступна. Придётся прочитать полностью...';
598
+ }
599
+
600
+ function showAnswerPopup(url) {
601
+ answerContent.innerHTML = '';
602
+ answerPopup.querySelector('.loading').style.display = 'block';
603
+ answerPopup.style.display = 'block';
604
+ if (answerCache[url]) {
605
+ displayAnswer(answerCache[url]);
606
+ } else {
607
+ const question = searchQueryInput.value;
608
+ fetchWebsiteAnswer(url, question).then(answer => {
609
+ answerCache[url] = answer;
610
+ displayAnswer(answer);
611
+ }).catch(error => {
612
+ console.error('Ошибка загрузки ответа:', error);
613
+ displayAnswer('Ошибка загрузки ответа.');
614
+ });
615
+ }
616
+ }
617
+
618
+ function displayAnswer(answer) {
619
+ answerPopup.querySelector('.loading').style.display = 'none';
620
+ answerContent.textContent = answer;
621
+ }
622
+
623
+ async function fetchWebsiteAnswer(url, question) {
624
+ const response = await fetch(`${BASE_URL}/api/ask_website?url=${url}&question=${encodeURIComponent(question)}(encodeURIComponent("Answer in concise way, First tell answer then Other thing"))&model=llama-3-70b`);
625
+ if (!response.ok) {
626
+ throw new Error('Ошибка загрузки ответа с сайта.');
627
+ }
628
+ const data = await response.json();
629
+ return data[0] || 'Ответ не найден. Слишком сложный вопрос...';
630
+ }
631
+
632
+ summaryPopup.querySelector('.close').addEventListener('click', () => {
633
+ summaryPopup.style.display = 'none';
634
+ });
635
+
636
+ answerPopup.querySelector('.close').addEventListener('click', () => {
637
+ answerPopup.style.display = 'none';
638
+ });
639
+ </script>
640
+ </body>
641
+ </html>