| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <title>HelpingAI Search</title> |
| <link rel="icon" href="https://www.gstatic.com/favicon/favicon.ico" type="image/x-icon"> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet"> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> |
| <style> |
| *{box-sizing:border-box} |
| body{margin:0;padding:0;font-family:"Poppins",sans-serif;background-color:#f8f9fa} |
| a{text-decoration:none;color:#1a0dab} |
| a:hover{text-decoration:underline} |
| .main-content{display:flex;flex-direction:column;align-items:center;padding:50px 20px} |
| .search-container{width:100%;max-width:700px;position:relative;width:60%;margin-bottom:20px} |
| .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} |
| .search-box:focus-within{box-shadow:0 4px 8px rgba(32,33,36,0.35);border-color:#ea4335} |
| #search-query{width:calc(100% - 40px);border:none;outline:0;font-size:16px;padding:4px 0;transition:font-size .2s ease} |
| #search-query::placeholder{color:#9aa0a6;transition:color .2s ease} |
| #search-query:focus{font-size:18px} |
| #search-query:focus::placeholder{color:transparent} |
| #search-form button{background:0 0;border:none;cursor:pointer;padding:8px;margin-left:10px;transition:transform .2s ease} |
| #search-form button:hover{transform:scale(1.1)} |
| #search-form button svg{display:none} |
| #search-form button::after{content:"\f002";color:#9aa0a6;transition:color .2s ease,transform .2s ease;font:900 1.2em "Font Awesome 5 Free"} |
| #search-form button:hover::after{color:#4285f4;transform:scale(1.1)} |
| #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} |
| @keyframes spin { |
| 0%{transform:rotate(0)} |
| 100%{transform:rotate(360deg)} |
| } |
| #suggestions ul{list-style-type:none;padding:0;margin:0} |
| #suggestions li{padding:8px 12px;cursor:pointer;border-bottom:1px solid #eee;transition:background-color .2s ease} |
| #suggestions li:hover{background-color:#e9e9e9} |
| #suggestions li.selected{background-color:#f0f0f0} |
| .search-box:focus-within+#suggestions,.search-box:hover+#suggestions{display:block;opacity:1;transform:translateY(0)} |
| #results{width:100%;max-width:700px;margin-top:20px} |
| .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} |
| .ai-result{background-color:#f0f0f5;width:100%;max-width:800px} |
| @keyframes fadeInUp { |
| from{opacity:0;transform:translateY(20px)} |
| to{opacity:1;transform:translateY(0)} |
| } |
| .result.show,.ai-result.show{opacity:1;transform:translateY(0)} |
| .result:hover,.ai-result:hover{box-shadow:0 4px 8px rgba(0,0,0,0.2)} |
| .result h3{margin:0 0 5px;font-size:1.2rem;color:#222} |
| .result .url{color:#202124;font-size:.9rem;margin-bottom:8px;display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} |
| .result p{color:#555;font-size:.9rem;line-height:1.6em;margin:0} |
| .loading-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0);z-index:1000} |
| .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} |
| @keyframes spin { |
| 0%{transform:rotate(0deg)} |
| 100%{transform:rotate(360deg)} |
| } |
| .loading-spinner{width:40px;height:40px;border-radius:50%;border:5px solid #f3f3f3;border-top:5px solid #3498db;animation:spin 1.2s linear infinite} |
| .loading-text{margin-left:10px;font-size:1rem;color:#333} |
| #no-results{display:none;text-align:center;padding:20px;font-size:1.1em;color:#555} |
| .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} |
| .result .actions button:hover{background-color:#e0e0e0;box-shadow:0 2px 4px rgba(0,0,0,0.1)} |
| .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} |
| .summary-popup .close,.answer-popup .close{position:absolute;top:15px;right:15px;cursor:pointer;font-size:1.5em;color:#666;transition:color .2s ease} |
| .summary-popup .close:hover,.answer-popup .close:hover{color:#333} |
| .summary-popup .loading,.answer-popup .loading{display:flex;justify-content:center;align-items:center;height:100px;display:none} |
| .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} |
| .summary-popup .content,.answer-popup .content{padding:20px;font-size:1rem;line-height:1.5} |
| .summary-popup #summaryContent,.answer-popup #answerContent{font-family:'Poppins',sans-serif;margin-bottom:20px} |
| #no-results{display:none;text-align:center;padding:20px;font-size:1.1em;color:#555} |
| #loading-more{display:none;text-align:center;padding:10px} |
| #loading-more.active{display:block} |
| .ai-result h2{margin:0 0 10px;font-size:1.5rem;font-weight:700;color:#333} |
| .ai-result p{color:#444;font-size:.9rem;line-height:1.5em;margin:0;display:flex;flex-direction:column} |
| .ai-result .actions { |
| display: flex; |
| justify-content: flex-end; |
| margin-top: 10px; |
| } |
| |
| .ai-result .actions button { |
| background-color: #f2f2f2; |
| color: #000; |
| border: 1px solid #ddd; |
| padding: 8px 12px; |
| border-radius: 20px; |
| font-size: .9rem; |
| font-weight: 700; |
| cursor: pointer; |
| transition: background-color .2s ease, box-shadow .2s ease; |
| margin-left: 10px; |
| } |
| |
| .ai-result .actions button:hover { |
| background-color: #e0e0e0; |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
| } |
| |
| .ai-result .actions button i { |
| font-size: 1.2rem; |
| color: #333; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="main-content"> |
| <div class="search-container"> |
| <form id="search-form"> |
| <div class="search-box"> |
| <input type="text" id="search-query" placeholder="Search the web" autocomplete="off"> |
| <button type="submit"></button> |
| </div> |
| <div id="suggestions"></div> |
| </form> |
| </div> |
| <div id="ai-response"></div> |
| <div id="results-info" style="text-align: center;"></div> |
| <div id="results"></div> |
| <div id="no-results"> |
| <p>No results found. Try refining your search.</p> |
| </div> |
| <div id="loading-more">Loading more results...</div> |
| <div class="loading-overlay"> |
| <div class="loading-spinner"></div> |
| </div> |
| </div> |
| <div id="summaryPopup" class="summary-popup" style="display: none;"> |
| <span class="close">×</span> |
| <div class="content"> |
| <div class="loading"> |
| <div class="loading-spinner"></div> |
| <p class="loading-text">Loading...</p> |
| </div> |
| <div id="summaryContent"></div> |
| </div> |
| </div> |
| <div id="answerPopup" class="answer-popup" style="display: none;"> |
| <span class="close">×</span> |
| <div class="content"> |
| <div class="loading"> |
| <div class="loading-spinner"></div> |
| <p class="loading-text">Loading...</p> |
| </div> |
| <div id="answerContent"></div> |
| </div> |
| </div> |
| <script> |
| const BASE_URL = "https://oevortex-webscout-api.hf.space"; |
| const searchForm = document.getElementById("search-form"); |
| const searchQueryInput = document.getElementById("search-query"); |
| const resultsContainer = document.getElementById("results"); |
| const suggestionsContainer = document.getElementById("suggestions"); |
| const loadingOverlay = document.querySelector('.loading-overlay'); |
| const noResultsMessage = document.getElementById('no-results'); |
| const loadingMoreIndicator = document.getElementById('loading-more'); |
| const aiResponseContainer = document.getElementById('ai-response'); |
| const INITIAL_RESULTS = 5; |
| const CACHED_RESULTS = 50; |
| const RESULTS_PER_PAGE = 5; |
| let allResultsFetched = false; |
| const seenUrls = new Set(); |
| let selectedSuggestionIndex = -1; |
| let suggestionRequestTimeout; |
| let cachedSearchResults = []; |
| const suggestionCache = {}; |
| let prefetchTimeout; |
| let allResults = []; |
| let startTime; |
| |
| function debounce(func, delay) { |
| return function() { |
| clearTimeout(suggestionRequestTimeout); |
| suggestionRequestTimeout = setTimeout(() => { |
| func.apply(this, arguments); |
| }, delay); |
| }; |
| } |
| async function fetchSuggestions(query) { |
| if (suggestionCache[query]) { |
| return suggestionCache[query]; |
| } |
| try { |
| const response = await fetch(`${BASE_URL}/api/suggestions?q=${encodeURIComponent(query)}`); |
| if (response.ok) { |
| const suggestions = await response.json(); |
| suggestionCache[query] = suggestions; |
| return suggestions; |
| } else { |
| console.error("Error fetching suggestions:", response.status); |
| return []; |
| } |
| } catch (error) { |
| console.error("Error fetching suggestions:", error); |
| return []; |
| } |
| } |
| searchQueryInput.addEventListener("input", () => { |
| clearTimeout(prefetchTimeout); |
| const searchQuery = searchQueryInput.value.trim(); |
| if (searchQuery === "") { |
| suggestionsContainer.style.display = "none"; |
| return; |
| } |
| prefetchTimeout = setTimeout(async () => { |
| const suggestions = await fetchSuggestions(searchQuery); |
| displaySuggestions(suggestions); |
| }, 100); |
| }); |
| |
| function displaySuggestions(suggestions) { |
| suggestionsContainer.innerHTML = ""; |
| if (suggestions.length === 0 || searchQueryInput.value.trim() === "") { |
| suggestionsContainer.style.display = "none"; |
| return; |
| } |
| const suggestionList = document.createElement("ul"); |
| suggestions.forEach((suggestion, index) => { |
| const listItem = document.createElement("li"); |
| listItem.textContent = suggestion.phrase; |
| listItem.addEventListener("click", () => { |
| searchQueryInput.value = suggestion.phrase; |
| suggestionsContainer.style.display = "none"; |
| performSearch(suggestion.phrase); |
| }); |
| listItem.addEventListener("focus", () => { |
| selectedSuggestionIndex = index; |
| updateSuggestionSelection(); |
| }); |
| suggestionList.appendChild(listItem); |
| }); |
| suggestionsContainer.appendChild(suggestionList); |
| suggestionsContainer.style.display = "block"; |
| } |
| |
| function updateSuggestionSelection() { |
| const suggestionItems = suggestionsContainer.querySelectorAll("li"); |
| suggestionItems.forEach((item, index) => { |
| item.classList.toggle("selected", index === selectedSuggestionIndex); |
| }); |
| } |
| |
| function showLoading() { |
| loadingOverlay.style.display = 'block'; |
| } |
| |
| function hideLoading() { |
| loadingOverlay.style.display = 'none'; |
| } |
| async function performSearch(query) { |
| showLoading(); |
| aiResponseContainer.style.display = 'none'; |
| suggestionsContainer.style.display = "none"; |
| startTime = performance.now(); |
| seenUrls.clear(); |
| allResultsFetched = false; |
| resultsContainer.innerHTML = ''; |
| noResultsMessage.style.display = 'none'; |
| loadingMoreIndicator.classList.remove('active'); |
| speechSynthesis.cancel(); |
| const initialResults = await fetchResults(query, INITIAL_RESULTS); |
| displayResults(initialResults); |
| hideLoading(); |
| fetchResults(query, CACHED_RESULTS).then(cachedResults => { |
| cachedSearchResults = removeDuplicateResults(cachedResults); |
| allResults = allResults.concat(cachedSearchResults); |
| displayResults(cachedSearchResults.slice(INITIAL_RESULTS, RESULTS_PER_PAGE), true); |
| if (cachedSearchResults.length > RESULTS_PER_PAGE) { |
| allResultsFetched = false; |
| loadingMoreIndicator.classList.add('active'); |
| } |
| }); |
| fetchAIResponse(query).then(aiResponse => { |
| displayAIResponse(aiResponse); |
| aiResponseContainer.style.display = 'block'; |
| }).catch(error => { |
| console.error("Error fetching AI response:", error); |
| }); |
| updateURLWithQuery(query); |
| } |
| async function fetchAIResponse(query) { |
| try { |
| const encodedQuery = encodeURIComponent(query); |
| const websiteURL = 'https://google.com/search?q=${encodedQuery}' |
| 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-3.5`); |
| if (response.ok) { |
| const aiResponse = await response.json(); |
| return aiResponse; |
| } else { |
| console.error("Error fetching AI response from website:", response.status); |
| return null; |
| } |
| } catch (error) { |
| console.error("Error fetching AI response from website:", error); |
| return null; |
| } |
| } |
| |
| function displayAIResponse(response) { |
| aiResponseContainer.innerHTML = ''; |
| if (response) { |
| const aiResultElement = document.createElement('div'); |
| aiResultElement.classList.add('ai-result'); |
| const aiHeading = document.createElement('h2'); |
| aiHeading.textContent = "AI Response"; |
| aiResultElement.appendChild(aiHeading); |
| const aiText = document.createElement('p'); |
| const decodedResponse = decodeHtml(response); |
| const msg = new SpeechSynthesisUtterance(decodedResponse); |
| speechSynthesis.speak(msg); |
| aiText.textContent = decodedResponse; |
| const pauseButton = document.createElement('button'); |
| pauseButton.id = 'pause'; |
| pauseButton.innerHTML = '<i class="fas fa-pause"></i>'; |
| const stopButton = document.createElement('button'); |
| stopButton.id = 'stop'; |
| stopButton.innerHTML = '<i class="fas fa-stop"></i>'; |
| let isPaused = false; |
| let isStoped = false; |
| pauseButton.addEventListener('click', () => { |
| if ('speechSynthesis' in window) { |
| if (isPaused) { |
| window.speechSynthesis.resume(); |
| isPaused = false; |
| stopButton.style.display = 'inline-block'; |
| pauseButton.innerHTML = '<i class="fas fa-pause"></i>'; |
| } else { |
| window.speechSynthesis.pause(); |
| isPaused = true; |
| stopButton.style.display = 'none'; |
| pauseButton.innerHTML = '<i class="fas fa-play"></i>'; |
| } |
| } |
| }); |
| |
| stopButton.addEventListener('click', () => { |
| if ('speechSynthesis' in window) { |
| if (isStoped){ |
| speechSynthesis.speak(msg); |
| isPaused = false; |
| isStoped = false; |
| pauseButton.innerHTML = '<i class="fas fa-pause"></i>'; |
| pauseButton.style.display = 'inline-block'; |
| stopButton.innerHTML = '<i class="fas fa-stop"></i>'; |
| }else{ |
| window.speechSynthesis.cancel(); |
| isPaused = false; |
| isStoped = true; |
| pauseButton.style.display = 'none'; |
| stopButton.innerHTML = '<i class="fas fa-play"></i>'; } |
| } |
| }); |
| |
| |
| aiResultElement.appendChild(pauseButton); |
| aiResultElement.appendChild(stopButton); |
| |
| |
| aiText.setAttribute('style', 'font-size: 1rem; line-height: 1.5rem;'); |
| aiResultElement.appendChild(aiText); |
| aiResponseContainer.appendChild(aiResultElement); |
| } |
| } |
| |
| function updateURLWithQuery(query) { |
| const newURL = `${window.location.pathname}?query=${encodeURIComponent(query)}`; |
| window.history.pushState({ |
| path: newURL |
| }, '', newURL); |
| } |
| |
| function removeDuplicateResults(results) { |
| const uniqueResults = []; |
| const seen = new Set(); |
| for (const result of results) { |
| if (!seen.has(result.href)) { |
| seen.add(result.href); |
| uniqueResults.push(result); |
| } |
| } |
| return uniqueResults; |
| } |
| |
| async function fetchResults(query, resultsPerPage) { |
| const response = await fetch(`${BASE_URL}/api/search?q=${encodeURIComponent(query)}&max_results=${resultsPerPage}`); |
| if (!response.ok) { |
| displayError("An error occurred while fetching results."); |
| hideLoading(); |
| return []; |
| } |
| const searchResults = await response.json(); |
| return searchResults; |
| } |
| |
| const summaryPopup = document.getElementById('summaryPopup'); |
| const summaryContent = document.getElementById('summaryContent'); |
| const answerPopup = document.getElementById('answerPopup'); |
| const answerContent = document.getElementById('answerContent'); |
| const summaryCache = {}; |
| const answerCache = {}; |
| |
| function displayResults(results, append = false) { |
| if (!append) { |
| resultsContainer.innerHTML = ''; |
| } |
| const newResults = results.filter(result => !seenUrls.has(result.href)); |
| newResults.forEach((result, index) => { |
| seenUrls.add(result.href); |
| const resultElement = document.createElement("div"); |
| resultElement.classList.add("result"); |
| const titleElement = document.createElement("h3"); |
| const titleLink = document.createElement("a"); |
| titleLink.href = result.href; |
| titleLink.textContent = result.title; |
| titleLink.target = "_blank"; |
| titleLink.rel = "noopener noreferrer"; |
| titleElement.appendChild(titleLink); |
| const urlElement = document.createElement("div"); |
| urlElement.classList.add("url"); |
| const urlLink = document.createElement("a"); |
| urlLink.href = result.href; |
| urlLink.textContent = result.href; |
| urlLink.target = "_blank"; |
| urlLink.rel = "noopener noreferrer"; |
| urlElement.appendChild(urlLink); |
| const descriptionElement = document.createElement("p"); |
| descriptionElement.textContent = result.body; |
| resultElement.appendChild(titleElement); |
| resultElement.appendChild(urlElement); |
| resultElement.appendChild(descriptionElement); |
| const actionsContainer = document.createElement('div'); |
| actionsContainer.classList.add('actions'); |
| const summarizeButton = document.createElement('button'); |
| summarizeButton.textContent = 'Summarize this site'; |
| summarizeButton.addEventListener('click', () => { |
| showSummaryPopup(result.href); |
| }); |
| actionsContainer.appendChild(summarizeButton); |
| const answerButton = document.createElement('button'); |
| answerButton.textContent = 'Answer from this site'; |
| answerButton.addEventListener('click', () => { |
| showAnswerPopup(result.href); |
| }); |
| actionsContainer.appendChild(answerButton); |
| resultElement.appendChild(actionsContainer); |
| resultsContainer.appendChild(resultElement); |
| setTimeout(() => { |
| resultElement.classList.add("show"); |
| }, 1 * index); |
| }); |
| if (resultsContainer.children.length === 0) { |
| noResultsMessage.style.display = 'block'; |
| } else { |
| noResultsMessage.style.display = 'none'; |
| } |
| if (!append) { |
| const endTime = performance.now(); |
| const timeTaken = (endTime/2 - startTime/2).toFixed(2); |
| document.getElementById('results-info').textContent = `About ${timeTaken} milliseconds`; |
| } |
| } |
| |
| function displayError(message) { |
| resultsContainer.innerHTML = ''; |
| const errorElement = document.createElement("p"); |
| errorElement.textContent = message; |
| errorElement.style.color = "red"; |
| resultsContainer.appendChild(errorElement); |
| } |
| |
| searchQueryInput.addEventListener("input", debounce(async () => { |
| selectedSuggestionIndex = -1; |
| const searchQuery = searchQueryInput.value; |
| if (searchQuery.trim() === "") { |
| suggestionsContainer.style.display = "none"; |
| return; |
| } |
| const suggestions = await fetchSuggestions(searchQuery); |
| displaySuggestions(suggestions); |
| }, 500)); |
| |
| searchQueryInput.addEventListener("focus", () => { |
| if (searchQueryInput.value.trim() !== "") { |
| suggestionsContainer.style.display = "block"; |
| } |
| }); |
| |
| document.addEventListener("click", (event) => { |
| if (!searchForm.contains(event.target)) { |
| suggestionsContainer.style.display = "none"; |
| } |
| }); |
| |
| searchQueryInput.addEventListener("keydown", async (event) => { |
| if (event.key === "ArrowUp" || event.key === "ArrowDown") { |
| event.preventDefault(); |
| const suggestionItems = suggestionsContainer.querySelectorAll("li"); |
| const numSuggestions = suggestionItems.length; |
| if (event.key === "ArrowUp") { |
| selectedSuggestionIndex = (selectedSuggestionIndex - 1 + numSuggestions) % numSuggestions; |
| } else { |
| selectedSuggestionIndex = (selectedSuggestionIndex + 1) % numSuggestions; |
| } |
| updateSuggestionSelection(); |
| if (selectedSuggestionIndex !== -1 && suggestionItems[selectedSuggestionIndex]) { |
| searchQueryInput.value = suggestionItems[selectedSuggestionIndex].textContent; |
| suggestionItems[selectedSuggestionIndex].focus(); |
| } |
| } else if (event.key === "Enter" && selectedSuggestionIndex !== -1) { |
| event.preventDefault(); |
| const selectedSuggestion = suggestionsContainer.querySelectorAll("li")[selectedSuggestionIndex]; |
| if (selectedSuggestion) { |
| searchQueryInput.value = selectedSuggestion.textContent; |
| suggestionsContainer.style.display = "none"; |
| performSearch(searchQueryInput.value); |
| } |
| } |
| }); |
| |
| searchForm.addEventListener("submit", async (event) => { |
| event.preventDefault(); |
| selectedSuggestionIndex = -1; |
| const searchQuery = searchQueryInput.value; |
| performSearch(searchQuery); |
| }); |
| |
| window.addEventListener('scroll', () => { |
| if (allResultsFetched) return; |
| const { |
| scrollTop, |
| scrollHeight, |
| clientHeight |
| } = document.documentElement; |
| const isNearBottom = scrollTop + clientHeight >= scrollHeight - 100; |
| if (isNearBottom && allResults.length > seenUrls.size) { |
| loadingMoreIndicator.classList.add('active'); |
| const resultsToDisplay = allResults.slice(seenUrls.size, seenUrls.size + RESULTS_PER_PAGE); |
| setTimeout(() => { |
| displayResults(resultsToDisplay, true); |
| for (const result of resultsToDisplay) { |
| seenUrls.add(result.href); |
| } |
| if (allResults.length === seenUrls.size) { |
| allResultsFetched = true; |
| loadingMoreIndicator.classList.remove('active'); |
| } |
| }, 300); |
| } |
| }); |
| |
| function getQueryParameter(name) { |
| const urlParams = new URLSearchParams(window.location.search); |
| return urlParams.get(name); |
| } |
| |
| window.addEventListener('load', () => { |
| const initialQuery = getQueryParameter('query'); |
| if (initialQuery) { |
| searchQueryInput.value = initialQuery; |
| performSearch(initialQuery); |
| } |
| }); |
| |
| function decodeHtml(html) { |
| var txt = document.createElement("textarea"); |
| txt.innerHTML = html; |
| return txt.value; |
| } |
| |
| function showSummaryPopup(url) { |
| summaryContent.innerHTML = ''; |
| summaryPopup.querySelector('.loading').style.display = 'block'; |
| summaryPopup.style.display = 'block'; |
| if (summaryCache[url]) { |
| displaySummary(summaryCache[url]); |
| } else { |
| fetchWebsiteSummary(url).then(summary => { |
| summaryCache[url] = summary; |
| displaySummary(summary); |
| }).catch(error => { |
| console.error('Error fetching summary:', error); |
| displaySummary('Error fetching summary.'); |
| }); |
| } |
| } |
| |
| function displaySummary(summary) { |
| summaryPopup.querySelector('.loading').style.display = 'none'; |
| summaryContent.textContent = summary; |
| } |
| |
| async function fetchWebsiteSummary(url) { |
| 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`); |
| if (!response.ok) { |
| throw new Error('Error fetching website summary.'); |
| } |
| const data = await response.json(); |
| return data[0] || 'No summary available'; |
| } |
| |
| function showAnswerPopup(url) { |
| answerContent.innerHTML = ''; |
| answerPopup.querySelector('.loading').style.display = 'block'; |
| answerPopup.style.display = 'block'; |
| if (answerCache[url]) { |
| displayAnswer(answerCache[url]); |
| } else { |
| const question = searchQueryInput.value; |
| fetchWebsiteAnswer(url, question).then(answer => { |
| answerCache[url] = answer; |
| displayAnswer(answer); |
| }).catch(error => { |
| console.error('Error fetching answer:', error); |
| displayAnswer('Error fetching answer.'); |
| }); |
| } |
| } |
| |
| function displayAnswer(answer) { |
| answerPopup.querySelector('.loading').style.display = 'none'; |
| answerContent.textContent = answer; |
| } |
| |
| async function fetchWebsiteAnswer(url, question) { |
| 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`); |
| if (!response.ok) { |
| throw new Error('Error fetching answer from website.'); |
| } |
| const data = await response.json(); |
| return data[0] || 'No answer found.'; |
| } |
| |
| summaryPopup.querySelector('.close').addEventListener('click', () => { |
| summaryPopup.style.display = 'none'; |
| }); |
| |
| answerPopup.querySelector('.close').addEventListener('click', () => { |
| answerPopup.style.display = 'none'; |
| }); |
| </script> |
| </body> |
| </html> |
