Upload index.js with huggingface_hub

index.js

@@ -1,13 +1,14 @@
 /**
- * DuckDuckGo AI Chatbot
+ * AI Web Search Assistant
  * Uses DuckDuckGo Instant Answer API for real-time responses
  */
 
 // Configuration
 const CONFIG = {
     DDG_API_BASE: 'https://api.duckduckgo.com/',
-    MAX_TOPICS: 6,
-    DEBOUNCE_MS: 300
+    MAX_TOPICS: 8,
+    // Use a CORS proxy for better compatibility
+    CORS_PROXY: 'https://corsproxy.io/?'
 };
 
 // DOM Elements
@@ -77,64 +78,63 @@ function addMessage(content, isUser = false) {
     return messageDiv;
 }
 
+/**
+ * Create an answer section
+ */
+function createAnswerSection(title, content, className = '', source = null) {
+    const section = document.createElement('div');
+    section.className = `answer-section ${className}`;
+    
+    let html = `<h4>${title}</h4><p>${content}</p>`;
+    
+    if (source) {
+        html += `<p class="source-link">Source: ${source}</p>`;
+    }
+    
+    section.innerHTML = html;
+    return section;
+}
+
 /**
  * Format DuckDuckGo response for display
  */
 function formatDuckDuckGoResponse(data) {
     const container = document.createElement('div');
-    
-    // Check for Answer
-    if (data.Answer) {
-        const answerSection = document.createElement('div');
-        answerSection.className = 'answer-section answer';
-        answerSection.innerHTML = `
-            <h4>💬 Answer</h4>
-            <p>${data.Answer}</p>
-        `;
+    let hasContent = false;
+
+    // Debug: Log the raw response
+    console.log('DuckDuckGo Response:', data);
+
+    // Check for Instant Answer (most prominent)
+    if (data.Answer && data.Answer.trim()) {
+        const answerSection = createAnswerSection('💬 Answer', data.Answer, 'answer');
+        if (data.AnswerType) {
+            answerSection.querySelector('h4').textContent += ` (${data.AnswerType})`;
+        }
         container.appendChild(answerSection);
+        hasContent = true;
     }
 
     // Check for Definition
-    if (data.Definition) {
-        const defSection = document.createElement('div');
-        defSection.className = 'answer-section definition';
-        defSection.innerHTML = `
-            <h4>📖 Definition</h4>
-            <p>${data.Definition}</p>
-        `;
+    if (data.Definition && data.Definition.trim()) {
+        const defSection = createAnswerSection('📖 Definition', data.Definition, 'definition', data.DefinitionSource);
         container.appendChild(defSection);
-        
-        if (data.DefinitionSource) {
-            const source = document.createElement('p');
-            source.style.fontSize = '0.75rem';
-            source.style.color = 'var(--text-muted)';
-            source.style.marginTop = '0.5rem';
-            source.textContent = `Source: ${data.DefinitionSource}`;
-            defSection.querySelector('p').appendChild(source);
-        }
+        hasContent = true;
     }
 
     // Check for Abstract (main topic info)
-    if (data.Abstract) {
-        const abstractSection = document.createElement('div');
-        abstractSection.className = 'answer-section abstract';
-        abstractSection.innerHTML = `
-            <h4>📝 ${data.AbstractTitle || 'Topic'}</h4>
-            <p>${data.Abstract}</p>
-        `;
+    if (data.Abstract && data.Abstract.trim()) {
+        const abstractSection = createAnswerSection(
+            `📝 ${data.AbstractTitle || 'Topic Overview'}`,
+            data.Abstract,
+            'abstract',
+            data.AbstractSource
+        );
         container.appendChild(abstractSection);
-        
-        if (data.AbstractSource) {
-            const source = document.createElement('p');
-            source.style.fontSize = '0.75rem';
-            source.style.color = 'var(--text-muted)';
-            source.style.marginTop = '0.5rem';
-            source.textContent = `Source: ${data.AbstractSource}`;
-            abstractSection.querySelector('p').appendChild(source);
-        }
+        hasContent = true;
     }
 
-    // Check for Related Topics
+    // Check for Related Topics (from main entity)
     if (data.RelatedTopics && data.RelatedTopics.length > 0) {
         const topicsSection = document.createElement('div');
         topicsSection.className = 'related-topics';
@@ -148,24 +148,39 @@ function formatDuckDuckGoResponse(data) {
         
         data.RelatedTopics.slice(0, CONFIG.MAX_TOPICS).forEach(topic => {
             if (topic.Text && topic.FirstURL) {
-                const tag = document.createElement('span');
+                const tag = document.createElement('button');
                 tag.className = 'topic-tag';
-                tag.textContent = topic.Text;
+                tag.textContent = topic.Text.replace(/<[^>]*>/g, '');
                 tag.addEventListener('click', () => {
-                    elements.userInput.value = topic.Text;
+                    elements.userInput.value = topic.Text.replace(/<[^>]*>/g, '');
                     elements.chatForm.dispatchEvent(new Event('submit'));
                 });
                 tagsContainer.appendChild(tag);
+            } else if (topic.Name && topic.Topics) {
+                // Grouped topics (e.g., for famous people)
+                topic.Topics.slice(0, 3).forEach(subTopic => {
+                    if (subTopic.Text && subTopic.FirstURL) {
+                        const tag = document.createElement('button');
+                        tag.className = 'topic-tag';
+                        tag.textContent = subTopic.Text.replace(/<[^>]*>/g, '');
+                        tag.addEventListener('click', () => {
+                            elements.userInput.value = subTopic.Text.replace(/<[^>]*>/g, '');
+                            elements.chatForm.dispatchEvent(new Event('submit'));
+                        });
+                        tagsContainer.appendChild(tag);
+                    }
+                });
             }
         });
         
         if (tagsContainer.children.length > 0) {
             topicsSection.appendChild(tagsContainer);
             container.appendChild(topicsSection);
+            hasContent = true;
         }
     }
 
-    // Check for Results
+    // Check for Results (additional web results)
     if (data.Results && data.Results.length > 0) {
         const resultsSection = document.createElement('div');
         resultsSection.className = 'related-topics';
@@ -179,9 +194,10 @@ function formatDuckDuckGoResponse(data) {
         
         data.Results.slice(0, CONFIG.MAX_TOPICS).forEach(result => {
             if (result.Text && result.FirstURL) {
-                const tag = document.createElement('span');
+                const tag = document.createElement('button');
                 tag.className = 'topic-tag';
-                tag.textContent = result.Text.replace(/<[^>]*>/g, '');
+                tag.textContent = result.Text.replace(/<[^>]*>/g, '').substring(0, 50);
+                tag.title = result.FirstURL;
                 tag.addEventListener('click', () => {
                     window.open(result.FirstURL, '_blank');
                 });
@@ -192,13 +208,31 @@ function formatDuckDuckGoResponse(data) {
         if (tagsContainer.children.length > 0) {
             resultsSection.appendChild(tagsContainer);
             container.appendChild(resultsSection);
+            hasContent = true;
         }
     }
 
-    // If no data found
-    if (container.children.length === 0) {
-        const noResult = document.createElement('p');
-        noResult.textContent = "I couldn't find a specific answer for that. Try asking differently or search for something more specific!";
+    // Check for Redirect (when query needs different search)
+    if (data.Redirect && data.Redirect.trim()) {
+        const redirectMsg = document.createElement('p');
+        redirectMsg.innerHTML = `🔀 For better results, try searching for: <strong>${data.Redirect}</strong>`;
+        container.appendChild(redirectMsg);
+        hasContent = true;
+    }
+
+    // If no data found - provide helpful message
+    if (!hasContent) {
+        const noResult = document.createElement('div');
+        noResult.innerHTML = `
+            <p>😕 I couldn't find specific information for that query.</p>
+            <p style="margin-top: 0.5rem; font-size: 0.875rem; color: var(--text-secondary);">
+                Try:</p>
+            <ul style="margin-left: 1.25rem; margin-top: 0.25rem; color: var(--text-secondary); font-size: 0.875rem;">
+                <li>Using different keywords</li>
+                <li>Asking a factual question</li>
+                <li>Searching for a specific person, place, or concept</li>
+            </ul>
+        `;
         container.appendChild(noResult);
     }
 
@@ -213,24 +247,57 @@ async function fetchDuckDuckGoAnswer(query) {
         q: query,
         format: 'json',
         no_html: '1',
-        skip_disambig: '1'
+        skip_disambig: '1',
+        pretty: '1'
     });
 
     const url = `${CONFIG.DDG_API_BASE}?${params}`;
-
-    try {
-        const response = await fetch(url);
-        
-        if (!response.ok) {
-            throw new Error(`HTTP error! status: ${response.status}`);
+    
+    // Try direct first, then with CORS proxy
+    const urlsToTry = [url, CONFIG.CORS_PROXY + encodeURIComponent(url)];
+    
+    let lastError = null;
+    
+    for (const attemptUrl of urlsToTry) {
+        try {
+            console.log('Trying URL:', attemptUrl);
+            
+            const controller = new AbortController();
+            const timeoutId = setTimeout(() => controller.abort(), 10000);
+            
+            const response = await fetch(attemptUrl, {
+                method: 'GET',
+                headers: {
+                    'Accept': 'application/json',
+                },
+                signal: controller.signal
+            });
+            
+            clearTimeout(timeoutId);
+            
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            
+            const data = await response.json();
+            
+            // Check if we got any meaningful response
+            if (data && (data.Abstract || data.Answer || data.Definition || data.RelatedTopics || data.Results)) {
+                return data;
+            }
+            
+            // If response exists but is empty, try next URL
+            console.log('Empty response, trying next URL');
+            lastError = new Error('Empty response');
+            
+        } catch (error) {
+            console.log('Error with URL:', attemptUrl, error.message);
+            lastError = error;
+            continue;
         }
-        
-        const data = await response.json();
-        return data;
-    } catch (error) {
-        console.error('DuckDuckGo API Error:', error);
-        throw error;
     }
+    
+    throw lastError || new Error('Failed to fetch results');
 }
 
 /**
@@ -255,7 +322,7 @@ async function handleSubmit(event) {
     elements.chatMessages.appendChild(loadingMessage);
     elements.chatMessages.parentElement.scrollTop = elements.chatMessages.parentElement.scrollHeight;
     
-    updateStatus('Searching DuckDuckGo...', 'searching');
+    updateStatus('Searching the web...', 'searching');
 
     try {
         // Fetch from DuckDuckGo
@@ -268,16 +335,23 @@ async function handleSubmit(event) {
         const formattedResponse = formatDuckDuckGoResponse(data);
         addMessage(formattedResponse, false);
         
-        updateStatus('Ready to chat', 'ready');
+        updateStatus('Ready to search', 'ready');
     } catch (error) {
         // Remove loading message
         loadingMessage.remove();
         
-        // Show error message
-        const errorMsg = addMessage('😕 Sorry, I encountered an error while searching. Please try again or check your internet connection.', false);
+        // Show error message with retry suggestion
+        const errorContent = document.createElement('div');
+        errorContent.innerHTML = `
+            <p>😕 Sorry, I couldn't find results for that query.</p>
+            <p style="margin-top: 0.5rem; font-size: 0.875rem; color: var(--text-secondary);">
+                ${error.message.includes('abort') ? 'Request timed out. Please try again.' : 'Try using different keywords or check your internet connection.'}
+            </p>
+        `;
+        addMessage(errorContent, false);
         
         updateStatus('Error occurred', 'error');
-        console.error('Error:', error);
+        console.error('Search Error:', error);
     } finally {
         // Reset loading state
         isLoading = false;
@@ -321,10 +395,10 @@ function init() {
     // Focus input
     elements.userInput.focus();
     
-    updateStatus('Ready to chat', 'ready');
+    updateStatus('Ready to search', 'ready');
     
-    console.log('🦆 DuckDuckGo AI Chatbot initialized!');
-    console.log('Powered by transformers.js and DuckDuckGo Instant Answer API');
+    console.log('🔍 AI Web Search Assistant initialized!');
+    console.log('Powered by DuckDuckGo Instant Answer API');
 }
 
 // Start the app