Create scripts.js

scripts.js

@@ -0,0 +1,208 @@
+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 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`);
+        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();