Spaces:

AiCoderv2
/

anycoder-bba383d3

Running

App Files Files Community

AiCoderv2 commited on Dec 8, 2025

Commit

0fe09d3

verified ·

1 Parent(s): 78505c8

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +223 -323

index.html CHANGED Viewed

@@ -1,11 +1,11 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8" />
-  <title>DuckDuckGo AI Chatbot - Enhanced Multi-Source</title>
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <meta name="description" content="An enhanced chatbot that answers using multiple data sources: DuckDuckGo, Wikipedia, and various APIs." />
   <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
@@ -28,12 +28,9 @@
       --radius: 14px;
     }
-    * {
-      box-sizing: border-box
-    }
-    html,
-    body {
       margin: 0;
       padding: 0;
       height: 100%;
@@ -47,9 +44,7 @@
       background-attachment: fixed;
     }
-    a {
-      color: var(--accent)
-    }
     .app {
       display: flex;
@@ -274,12 +269,9 @@
       color: #e9efff;
     }
-    .answer p {
-      margin: 0 0 10px 0;
-    }
-    .answer ul,
-    .answer ol {
       margin: 6px 0 10px 18px;
     }
@@ -422,34 +414,15 @@
       animation: blink 1.4s infinite ease-in-out;
     }
-    .dot:nth-child(2) {
-      animation-delay: .2s
-    }
-    .dot:nth-child(3) {
-      animation-delay: .4s
-    }
     @keyframes blink {
-      0%,
-      80%,
-      100% {
-        transform: translateY(0);
-        opacity: .5
-      }
-      40% {
-        transform: translateY(-3px);
-        opacity: 1
-      }
     }
-    .hint {
-      font-size: 12px;
-      color: var(--muted);
-      padding: 4px 2px 0 2px;
-    }
     .footer-note {
       text-align: center;
@@ -484,6 +457,11 @@
       border-color: rgba(168, 85, 247, 0.4);
     }
     .source-badge {
       font-size: 10px;
       padding: 1px 4px;
@@ -492,62 +470,6 @@
       margin-left: 4px;
     }
-    /* Responsive */
-    @media (max-width: 720px) {
-      .topbar {
-        padding: 12px
-      }
-      .titles .title {
-        font-size: 17px
-      }
-      .links {
-        display: none
-      }
-      .bubble {
-        max-width: min(760px, 92vw)
-      }
-      .suggestions {
-        bottom: 60px
-      }
-    }
-    /* Scrollbar */
-    .chat::-webkit-scrollbar {
-      width: 10px
-    }
-    .chat::-webkit-scrollbar-thumb {
-      background: #16214a;
-      border-radius: 10px;
-      border: 2px solid transparent;
-      background-clip: padding-box;
-    }
-    .chat::-webkit-scrollbar-track {
-      background: transparent
-    }
-    /* Simple fade-in for messages */
-    .fade-in {
-      animation: fadeIn .22s ease-out;
-    }
-    @keyframes fadeIn {
-      from {
-        opacity: 0;
-        transform: translateY(6px)
-      }
-      to {
-        opacity: 1;
-        transform: translateY(0)
-      }
-    }
     .mono {
       font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
       font-size: 12px;
@@ -593,6 +515,62 @@
       color: #c7d5ff;
       margin-top: 2px;
     }
   </style>
 </head>
@@ -604,21 +582,20 @@
           <div class="logo" aria-hidden="true"></div>
           <div class="titles">
             <div class="title">Enhanced Multi-Source AI Chatbot</div>
-            <div class="subtitle">Answers from DuckDuckGo, Wikipedia, Weather APIs, and more.</div>
           </div>
         </div>
         <div class="links">
           <a class="btn ghost" href="https://duckduckgo.com/" target="_blank" rel="noopener noreferrer">
             <svg class="icon" viewBox="0 0 24 24" fill="none">
-              <path
-                d="M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2Zm0 0c2.5 0 4.5 5 4.5 5s-2 5-4.5 5-4.5-5-4.5-5 2-5 4.5-5Zm0 10c4.5 0 6 5 6 5"
-                stroke="currentColor" stroke-width="2" stroke-linecap="round" />
             </svg>
             DuckDuckGo
           </a>
           <a class="btn ghost" href="https://en.wikipedia.org/" target="_blank" rel="noopener noreferrer">
             <svg class="icon" viewBox="0 0 24 24" fill="none">
-              <path d="M4 4h16v16H4z" stroke="currentColor" stroke-width="2"/><path d="M7 8h10M7 12h10M7 16h6" stroke="currentColor" stroke-width="2"/>
             </svg>
             Wikipedia
           </a>
@@ -630,8 +607,7 @@
             <svg class="icon" viewBox="0 0 24 24" fill="none"><path d="M3 6h18M8 6v12m8-12v12M5 6l1 14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2L19 6M9 6V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
             Clear
           </button>
-          <a class="btn" href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" rel="noopener noreferrer"
-            title="Built with anycoder">
             Built with anycoder
           </a>
         </div>
@@ -649,8 +625,8 @@
                 <span>Multi-Source AI Assistant</span>
               </div>
               <div class="answer">
-                <p>Hi! I'm your enhanced AI assistant with access to multiple data sources including DuckDuckGo Instant Answers, Wikipedia, Weather APIs, and general web search.</p>
-                <p class="hint">Try asking about: facts, definitions, weather, time zones, calculations, historical events, scientific information, or general knowledge questions.</p>
               </div>
             </div>
           </div>
@@ -675,10 +651,15 @@
     </main>
     <div class="footer-note">
-      Enhanced with multiple data sources: DuckDuckGo Instant Answers, Wikipedia API, Open-Meteo Weather API, and web search capabilities.
     </div>
   </div>
   <script>
     // Utilities
     const $ = (sel, el=document) => el.querySelector(sel);
@@ -686,6 +667,13 @@
     const escapeHTML = (s) => s.replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
     const stripTags = (s) => s.replace(/<[^>]*>/g, '');
     const truncate = (s, n=220) => s.length > n ? s.slice(0, n-1) + '…' : s;
     // DOM elements
     const chatEl = $('#chat');
@@ -696,14 +684,34 @@
     const suggestionsEl = $('#suggestions');
     const clearBtn = $('#clearBtn');
     const exportBtn = $('#exportBtn');
     // State
     let history = [];
     let abortController = null;
-    // Enhanced suggestions
     const defaultChips = [
-      'weather in Tokyo', 'time in London', 'define artificial intelligence', 'who was Einstein',
       'sqrt(144)', 'USD to EUR', 'prime factors of 91', 'Python programming history',
       'what is machine learning', 'how tall is Mount Everest', 'capital of France',
       'latest news about AI', 'JavaScript vs Python', 'quantum computing explained'
@@ -745,7 +753,6 @@
       if (q && !hasHistory) chips.push(q + ' history');
       if (q && !hasScience) chips.push(q + ' science');
-      // de-dup
       const unique = [...new Set(chips)].filter(Boolean).slice(0,6);
       if (unique.length === 0) renderSuggestions(defaultChips);
       else renderSuggestions(unique);
@@ -769,14 +776,14 @@
       badge.className = 'badge';
       badge.textContent = role === 'bot' ? (meta.badge || 'AI Assistant') : 'You';
       metaEl.appendChild(badge);
       if (meta.source) {
         const sourceEl = document.createElement('span');
         sourceEl.className = `data-source-indicator ${meta.source.className || ''}`;
         sourceEl.innerHTML = `${meta.source.icon || '📡'} ${meta.source.name}`;
         metaEl.appendChild(sourceEl);
       }
       if (meta.note){
         const note = document.createElement('span');
         note.textContent = meta.note;
@@ -809,7 +816,7 @@
       row.appendChild(avatar);
       row.appendChild(bubble);
       messagesEl.appendChild(row);
-      chatEl.scrollTop = chatEl.scrollHeight; // Auto scroll down
       return bubble;
     }
@@ -836,7 +843,7 @@
       row.appendChild(avatar);
       row.appendChild(bubble);
       messagesEl.appendChild(row);
-      chatEl.scrollTop = chatEl.scrollHeight; // Auto scroll down
       return row;
     }
     function removeTyping(){
@@ -856,14 +863,14 @@
       for (const buildProxy of CORS_PROXIES){
         const proxyUrl = buildProxy(targetUrl);
         try{
-          const res = await fetch(proxyUrl, { signal, headers: { 'Accept': 'application/json' } });
           if (!res.ok) throw new Error(`HTTP ${res.status}`);
           const contentType = res.headers.get('content-type') || '';
-          if (!contentType.includes('application/json') && !contentType.includes('text/plain')) {
-            throw new Error('Unexpected content-type: ' + contentType);
-          }
           const text = await res.text();
-          const data = JSON.parse(text);
           return data;
         }catch(err){
           lastErr = err;
@@ -880,6 +887,40 @@
         this.className = className;
       }
       async search(query, signal) { throw new Error('Not implemented'); }
     }
     class DuckDuckGoSource extends DataSource {
@@ -897,59 +938,66 @@
         return url.toString();
       }
       async search(query, signal) {
         const targetUrl = this.buildDDGUrl(query);
-        const data = await fetchWithCorsProxies(targetUrl, signal);
-        const sources = [];
-        if (Array.isArray(data.Results)) {
-          data.Results.forEach(r => {
-            if (r && r.FirstURL && r.Text) sources.push({ href: r.FirstURL, label: new URL(r.FirstURL).hostname.replace('www.','') });
-          });
-        }
-        if (data.AbstractURL) sources.push({ href: data.AbstractURL, label: new URL(data.AbstractURL).hostname.replace('www.','') });
-        if (data.Answer && data.AnswerURL) sources.push({ href: data.AnswerURL, label: new URL(data.AnswerURL).hostname.replace('www.','') });
-        let primary = '';
-        let note = '';
-        if (data.Answer && data.Answer.trim()){
-          primary = data.Answer;
-          note = 'Instant Answer';
-        } else if (data.Definition && data.Definition.trim()){
-          primary = data.Definition;
-          note = data.DefinitionSource ? ('Definition • ' + data.DefinitionSource) : 'Definition';
-          if (data.DefinitionURL) sources.push({ href: data.DefinitionURL, label: new URL(data.DefinitionURL).hostname.replace('www.','') });
-        } else if (data.AbstractText && data.AbstractText.trim()){
-          primary = data.AbstractText;
-          note = data.Heading ? ('About: ' + data.Heading) : (data.AbstractSource ? data.AbstractSource : 'Abstract');
-        } else if (data.RelatedTopics && data.RelatedTopics.length){
-          const items = [];
-          for (const t of data.RelatedTopics){
-            if (t && t.Text && t.FirstURL) {
-              items.push(`<li><a href="${t.FirstURL}" target="_blank" rel="noopener noreferrer">${escapeHTML(t.Text)}</a></li>`);
-            } else if (Array.isArray(t.Topics)) {
-              for (const tt of t.Topics){
-                if (tt && tt.Text && tt.FirstURL) {
-                  items.push(`<li><a href="${tt.FirstURL}" target="_blank" rel="noopener noreferrer">${escapeHTML(tt.Text)}</a></li>`);
                 }
               }
             }
-            if (items.length >= 6) break;
           }
-          if (items.length){
-            primary = `<p>Here are some related topics I found:</p><ul>${items.join('')}</ul>`;
-            note = 'Related topics';
           }
-        }
-        return {
-          found: !!primary,
-          html: primary || `<p>No direct answer from DuckDuckGo.</p>`,
-          sources,
-          note,
-          raw: data
-        };
       }
     }
@@ -958,33 +1006,33 @@
         super('Wikipedia', '📚', 'wiki');
       }
       async search(query, signal) {
         try {
-          // Search for pages
-          const searchUrl = `https://en.wikipedia.org/api/rest_v1/page/summary/${encodeURIComponent(query)}`;
           const data = await fetchWithCorsProxies(searchUrl, signal);
           if (data.extract) {
             const sources = [];
             if (data.content_urls?.desktop?.page) {
-              sources.push({
-                href: data.content_urls.desktop.page,
-                label: 'Wikipedia Article',
-                multi: true
-              });
             }
             let html = `<p>${escapeHTML(data.extract)}</p>`;
             if (data.extract_html) {
               html = data.extract_html;
             }
-            // Add thumbnail if available
             if (data.thumbnail?.source) {
               html = `<img src="${data.thumbnail.source}" alt="${escapeHTML(data.title || 'Image')}" style="max-width: 200px; border-radius: 8px; margin-bottom: 10px;" /><br/>${html}`;
             }
             return {
               found: true,
               html,
@@ -993,154 +1041,6 @@
               raw: data
             };
           }
           return { found: false, html: '<p>No Wikipedia article found.</p>', sources: [], note: 'Wikipedia', raw: data };
         } catch (err) {
-          return { found: false, html: '<p>Error fetching Wikipedia data.</p>', sources: [], note: 'Wikipedia', raw: null };
-        }
-      }
-    }
-    class WeatherSource extends DataSource {
-      constructor() {
-        super('Weather', '🌤️', 'weather');
-      }
-      async search(query, signal) {
-        const cityMatch = query.match(/\b(?:weather\s+in|weather|temperature\s+in|forecast\s+in)\s+([a-zA-Z\s,]+)/i);
-        if (!cityMatch) {
-          return { found: false, html: '<p>No city specified for weather.</p>', sources: [], note: 'Weather API' };
-        }
-        const city = cityMatch[1].trim();
-        try {
-          // Using Open-Meteo API (free, no API key needed)
-          const geocodeUrl = `https://geocoding-api.open-meteo.com/v1/search?name=${encodeURIComponent(city)}&count=1&language=en&format=json`;
-          const geoData = await fetchWithCorsProxies(geocodeUrl, signal);
-          if (geoData.results && geoData.results.length > 0) {
-            const location = geoData.results[0];
-            const weatherUrl = `https://api.open-meteo.com/v1/forecast?latitude=${location.latitude}&longitude=${location.longitude}&current=temperature_2m,weather_code,wind_speed_10m&temperature_unit=celsius&wind_speed_unit=kmh`;
-            const weatherData = await fetchWithCorsProxies(weatherUrl, signal);
-            if (weatherData.current) {
-              const temp = weatherData.current.temperature_2m;
-              const weatherCode = weatherData.current.weather_code;
-              const windSpeed = weatherData.current.wind_speed_10m;
-              const weatherDescription = this.getWeatherDescription(weatherCode);
-              const sources = [
-                { href: `https://open-meteo.com/`, label: 'Open-Meteo API', multi: true }
-              ];
-              const html = `
-                <div class="search-results">
-                  <h4>Current Weather in ${escapeHTML(location.name)}, ${escapeHTML(location.country_code)}</h4>
-                  <p><strong>Temperature:</strong> ${temp}°C (${Math.round(temp * 9/5 + 32)}°F)</p>
-                  <p><strong>Conditions:</strong> ${weatherDescription}</p>
-                  <p><strong>Wind Speed:</strong> ${windSpeed} km/h</p>
-                </div>
-              `;
-              return {
-                found: true,
-                html,
-                sources,
-                note: `Weather in ${location.name}`,
-                raw: { location, weather: weatherData }
-              };
-            }
-          }
-          return { found: false, html: '<p>Could not find weather data for that location.</p>', sources: [], note: 'Weather API' };
-        } catch (err) {
-          return { found: false, html: '<p>Error fetching weather data.</p>', sources: [], note: 'Weather API' };
-        }
-      }
-      getWeatherDescription(code) {
-        const weatherCodes = {
-          0: "Clear sky",
-          1: "Mainly clear",
-          2: "Partly cloudy",
-          3: "Overcast",
-          45: "Fog",
-          48: "Depositing rime fog",
-          51: "Light drizzle",
-          53: "Moderate drizzle",
-          55: "Dense drizzle",
-          56: "Light freezing drizzle",
-          57: "Dense freezing drizzle",
-          61: "Slight rain",
-          63: "Moderate rain",
-          65: "Heavy rain",
-          66: "Light freezing rain",
-          67: "Heavy freezing rain",
-          71: "Slight snow fall",
-          73: "Moderate snow fall",
-          75: "Heavy snow fall",
-          77: "Snow grains",
-          80: "Slight rain showers",
-          81: "Moderate rain showers",
-          82: "Violent rain showers",
-          85: "Slight snow showers",
-          86: "Heavy snow showers",
-          95: "Slight thunderstorm",
-          96: "Thunderstorm with slight hail",
-          99: "Thunderstorm with heavy hail"
-        };
-        return weatherCodes[code] || "Unknown";
-      }
-    }
-    class CalculatorSource extends DataSource {
-      constructor() {
-        super('Calculator', '🧮', 'calc');
-      }
-      async search(query, signal) {
-        // Simple math expression evaluation
-        const mathMatch = query.match(/([\d\+\-\*\/\^\(\)\.\s]+)/);
-        if (!mathMatch) {
-          return { found: false, html: '<p>No mathematical expression found.</p>', sources: [], note: 'Calculator' };
-        }
-        try {
-          // Simple and safe evaluation for basic math
-          const expression = mathMatch[1].replace(/\s/g, '');
-          // Basic validation to prevent code injection
-          if (!/^[\d\+\-\*\/\^\(\)\.]+$/.test(expression)) {
-            return { found: false, html: '<p>Invalid mathematical expression.</p>', sources: [], note: 'Calculator' };
-          }
-          // Very basic math evaluation (you might want to use a proper math library)
-          const result = this.safeEval(expression);
-          if (result !== null && result !== undefined) {
-            const html = `
-              <div class="search-results">
-                <h4>Calculation Result</h4>
-                <p><strong>Expression:</strong> <code>${escapeHTML(expression)}</code></p>
-                <p><strong>Result:</strong> <span style="font-size: 18px; color: var(--success);">${result}</span></p>
-              </div>
-            `;
-            return {
-              found: true,
-              html,
-              sources: [],
-              note: `Math Calculation`,
-              raw: { expression, result }
-            };
-          }
-          return { found: false, html: '<p>Could not evaluate the expression.</p>', sources: [], note: 'Calculator' };
-        } catch (err) {
-          return { found: false, html: '<p>Error evaluating mathematical expression.</p>', sources: [], note: 'Calculator' };
-        }
-      }
-      safeEval(expression) {
-        try {
-          // This is a very basic evaluator. For production,

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8" />
+  <title>Enhanced Multi-Source AI Chatbot</title>
   <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="description"
+    content="A responsive multi-source chatbot that answers using DuckDuckGo, Wikipedia, Weather APIs, and built-in offline knowledge/fallbacks." />
   <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
       --radius: 14px;
     }
+    * { box-sizing: border-box }
+    html, body {
       margin: 0;
       padding: 0;
       height: 100%;
       background-attachment: fixed;
     }
+    a { color: var(--accent) }
     .app {
       display: flex;
       color: #e9efff;
     }
+    .answer p { margin: 0 0 10px 0; }
+    .answer ul, .answer ol {
       margin: 6px 0 10px 18px;
     }
       animation: blink 1.4s infinite ease-in-out;
     }
+    .dot:nth-child(2) { animation-delay: .2s }
+    .dot:nth-child(3) { animation-delay: .4s }
     @keyframes blink {
+      0%, 80%, 100% { transform: translateY(0); opacity: .5 }
+      40% { transform: translateY(-3px); opacity: 1 }
     }
+    .hint { font-size: 12px; color: var(--muted); padding: 4px 2px 0 2px; }
     .footer-note {
       text-align: center;
       border-color: rgba(168, 85, 247, 0.4);
     }
+    .data-source-indicator.offline {
+      background: rgba(248, 113, 113, 0.2);
+      border-color: rgba(248, 113, 113, 0.4);
+    }
     .source-badge {
       font-size: 10px;
       padding: 1px 4px;
       margin-left: 4px;
     }
     .mono {
       font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
       font-size: 12px;
       color: #c7d5ff;
       margin-top: 2px;
     }
+    .status {
+      position: fixed;
+      bottom: 10px;
+      right: 12px;
+      background: rgba(12, 19, 48, 0.8);
+      border: 1px solid rgba(255, 255, 255, .1);
+      padding: 6px 10px;
+      border-radius: 999px;
+      font-size: 12px;
+      color: var(--muted);
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      backdrop-filter: blur(6px);
+    }
+    .status-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: var(--warning);
+      box-shadow: 0 0 8px var(--warning);
+    }
+    .status-dot.ok { background: var(--success); box-shadow: 0 0 8px var(--success); }
+    .status-dot.err { background: var(--danger); box-shadow: 0 0 8px var(--danger); }
+    /* Responsive */
+    @media (max-width: 720px) {
+      .topbar { padding: 12px }
+      .titles .title { font-size: 17px }
+      .links { display: none }
+      .bubble { max-width: min(760px, 92vw) }
+      .suggestions { bottom: 60px }
+    }
+    /* Scrollbar */
+    .chat::-webkit-scrollbar { width: 10px }
+    .chat::-webkit-scrollbar-thumb {
+      background: #16214a;
+      border-radius: 10px;
+      border: 2px solid transparent;
+      background-clip: padding-box;
+    }
+    .chat::-webkit-scrollbar-track { background: transparent }
+    /* Simple fade-in for messages */
+    .fade-in {
+      animation: fadeIn .22s ease-out;
+    }
+    @keyframes fadeIn {
+      from { opacity: 0; transform: translateY(6px) }
+      to { opacity: 1; transform: translateY(0) }
+    }
   </style>
 </head>
           <div class="logo" aria-hidden="true"></div>
           <div class="titles">
             <div class="title">Enhanced Multi-Source AI Chatbot</div>
+            <div class="subtitle">DuckDuckGo, Wikipedia, Weather, Calculator + Offline Fallbacks</div>
           </div>
         </div>
         <div class="links">
           <a class="btn ghost" href="https://duckduckgo.com/" target="_blank" rel="noopener noreferrer">
             <svg class="icon" viewBox="0 0 24 24" fill="none">
+              <path d="M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2Zm0 0c2.5 0 4.5 5 4.5 5s-2 5-4.5 5-4.5-5-4.5-5 2-5 4.5-5Zm0 10c4.5 0 6 5 6 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
             </svg>
             DuckDuckGo
           </a>
           <a class="btn ghost" href="https://en.wikipedia.org/" target="_blank" rel="noopener noreferrer">
             <svg class="icon" viewBox="0 0 24 24" fill="none">
+              <path d="M4 4h16v16H4z" stroke="currentColor" stroke-width="2" />
+              <path d="M7 8h10M7 12h10M7 16h6" stroke="currentColor" stroke-width="2" />
             </svg>
             Wikipedia
           </a>
             <svg class="icon" viewBox="0 0 24 24" fill="none"><path d="M3 6h18M8 6v12m8-12v12M5 6l1 14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2L19 6M9 6V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
             Clear
           </button>
+          <a class="btn" href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" rel="noopener noreferrer" title="Built with anycoder">
             Built with anycoder
           </a>
         </div>
                 <span>Multi-Source AI Assistant</span>
               </div>
               <div class="answer">
+                <p>Hi! I'm your enhanced AI assistant with multiple data sources including DuckDuckGo Instant Answers, Wikipedia, Weather APIs, Calculator, and robust offline fallbacks.</p>
+                <p class="hint">Try asking about: facts, definitions, weather, time zones, calculations, historical events, or general knowledge.</p>
               </div>
             </div>
           </div>
     </main>
     <div class="footer-note">
+      Enhanced with multiple data sources: DuckDuckGo, Wikipedia, Open-Meteo Weather API, Calculator, and offline knowledge.
     </div>
   </div>
+  <div class="status" id="status">
+    <span class="status-dot" id="statusDot"></span>
+    <span id="statusText">Checking network...</span>
+  </div>
   <script>
     // Utilities
     const $ = (sel, el=document) => el.querySelector(sel);
     const escapeHTML = (s) => s.replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
     const stripTags = (s) => s.replace(/<[^>]*>/g, '');
     const truncate = (s, n=220) => s.length > n ? s.slice(0, n-1) + '…' : s;
+    const nowTime = () => new Date().toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'});
+    function updateTextareaHeight() {
+      const el = $('#prompt');
+      el.style.height = 'auto';
+      el.style.height = Math.min(el.scrollHeight, 200) + 'px';
+    }
     // DOM elements
     const chatEl = $('#chat');
     const suggestionsEl = $('#suggestions');
     const clearBtn = $('#clearBtn');
     const exportBtn = $('#exportBtn');
+    const statusDot = $('#statusDot');
+    const statusText = $('#statusText');
     // State
     let history = [];
     let abortController = null;
+    let lastQuery = '';
+    let offlineMode = false;
+    // Network indicator
+    function updateNetworkStatus() {
+      if (navigator.onLine) {
+        statusDot.className = 'status-dot ok';
+        statusText.textContent = 'Online';
+        offlineMode = false;
+      } else {
+        statusDot.className = 'status-dot err';
+        statusText.textContent = 'Offline';
+        offlineMode = true;
+      }
+    }
+    window.addEventListener('online', updateNetworkStatus);
+    window.addEventListener('offline', updateNetworkStatus);
+    updateNetworkStatus();
+    // Suggestions
     const defaultChips = [
+      'weather in Tokyo', 'time in London', 'define artificial intelligence', 'who was Einstein',
       'sqrt(144)', 'USD to EUR', 'prime factors of 91', 'Python programming history',
       'what is machine learning', 'how tall is Mount Everest', 'capital of France',
       'latest news about AI', 'JavaScript vs Python', 'quantum computing explained'
       if (q && !hasHistory) chips.push(q + ' history');
       if (q && !hasScience) chips.push(q + ' science');
       const unique = [...new Set(chips)].filter(Boolean).slice(0,6);
       if (unique.length === 0) renderSuggestions(defaultChips);
       else renderSuggestions(unique);
       badge.className = 'badge';
       badge.textContent = role === 'bot' ? (meta.badge || 'AI Assistant') : 'You';
       metaEl.appendChild(badge);
       if (meta.source) {
         const sourceEl = document.createElement('span');
         sourceEl.className = `data-source-indicator ${meta.source.className || ''}`;
         sourceEl.innerHTML = `${meta.source.icon || '📡'} ${meta.source.name}`;
         metaEl.appendChild(sourceEl);
       }
       if (meta.note){
         const note = document.createElement('span');
         note.textContent = meta.note;
       row.appendChild(avatar);
       row.appendChild(bubble);
       messagesEl.appendChild(row);
+      chatEl.scrollTop = chatEl.scrollHeight;
       return bubble;
     }
       row.appendChild(avatar);
       row.appendChild(bubble);
       messagesEl.appendChild(row);
+      chatEl.scrollTop = chatEl.scrollHeight;
       return row;
     }
     function removeTyping(){
       for (const buildProxy of CORS_PROXIES){
         const proxyUrl = buildProxy(targetUrl);
         try{
+          const res = await fetch(proxyUrl, { signal, headers: { 'Accept': 'application/json, text/plain, */*' } });
           if (!res.ok) throw new Error(`HTTP ${res.status}`);
           const contentType = res.headers.get('content-type') || '';
           const text = await res.text();
+          let data = text;
+          if (contentType.includes('application/json')) {
+            try { data = JSON.parse(text); } catch { /* keep text */ }
+          }
           return data;
         }catch(err){
           lastErr = err;
         this.className = className;
       }
       async search(query, signal) { throw new Error('Not implemented'); }
+      getPriority() { return 50; }
+      canHandle() { return false; }
+    }
+    class OfflineSource extends DataSource {
+      constructor() {
+        super('Offline', '💾', 'offline');
+      }
+      canHandle() { return offlineMode; }
+      getPriority() { return 5; } // lowest priority
+      async search(query, signal) {
+        // Use built-in knowledge base as fallback
+        const kb = LocalKnowledgeBase;
+        const found = kb.search(query);
+        if (found) {
+          return {
+            found: true,
+            html: found.html,
+            sources: found.sources || [],
+            note: found.note || 'Offline knowledge',
+            raw: { query }
+          };
+        }
+        return {
+          found: false,
+          html: `<p>I'm currently offline and don't have information about that. Please try a rephrase or check your network connection.</p>`,
+          sources: [],
+          note: 'Offline',
+          raw: { query }
+        };
+      }
     }
     class DuckDuckGoSource extends DataSource {
         return url.toString();
       }
+      canHandle() {
+        return true; // try for general queries
+      }
+      getPriority() { return 40; }
       async search(query, signal) {
         const targetUrl = this.buildDDGUrl(query);
+        try {
+          const data = await fetchWithCorsProxies(targetUrl, signal);
+          const sources = [];
+          if (Array.isArray(data.Results)) {
+            data.Results.forEach(r => {
+              if (r && r.FirstURL && r.Text) sources.push({ href: r.FirstURL, label: new URL(r.FirstURL).hostname.replace('www.','') });
+            });
+          }
+          if (data.AbstractURL) sources.push({ href: data.AbstractURL, label: new URL(data.AbstractURL).hostname.replace('www.','') });
+          if (data.Answer && data.AnswerURL) sources.push({ href: data.AnswerURL, label: new URL(data.AnswerURL).hostname.replace('www.','') });
+          let primary = '';
+          let note = '';
+          if (data.Answer && data.Answer.trim()){
+            primary = data.Answer;
+            note = 'Instant Answer';
+          } else if (data.Definition && data.Definition.trim()){
+            primary = data.Definition;
+            note = data.DefinitionSource ? ('Definition • ' + data.DefinitionSource) : 'Definition';
+            if (data.DefinitionURL) sources.push({ href: data.DefinitionURL, label: new URL(data.DefinitionURL).hostname.replace('www.','') });
+          } else if (data.AbstractText && data.AbstractText.trim()){
+            primary = data.AbstractText;
+            note = data.Heading ? ('About: ' + data.Heading) : (data.AbstractSource ? data.AbstractSource : 'Abstract');
+          } else if (data.RelatedTopics && data.RelatedTopics.length){
+            const items = [];
+            for (const t of data.RelatedTopics){
+              if (t && t.Text && t.FirstURL) {
+                items.push(`<li><a href="${t.FirstURL}" target="_blank" rel="noopener noreferrer">${escapeHTML(t.Text)}</a></li>`);
+              } else if (Array.isArray(t.Topics)) {
+                for (const tt of t.Topics){
+                  if (tt && tt.Text && tt.FirstURL) {
+                    items.push(`<li><a href="${tt.FirstURL}" target="_blank" rel="noopener noreferrer">${escapeHTML(tt.Text)}</a></li>`);
+                  }
                 }
               }
+              if (items.length >= 6) break;
+            }
+            if (items.length){
+              primary = `<p>Here are some related topics I found:</p><ul>${items.join('')}</ul>`;
+              note = 'Related topics';
             }
           }
+          if (!primary) {
+            return { found: false, html: '<p>No direct answer from DuckDuckGo.</p>', sources, note: 'DuckDuckGo', raw: data };
           }
+          return { found: true, html: primary, sources, note, raw: data };
+        } catch (err) {
+          return { found: false, html: '<p>Failed to fetch from DuckDuckGo (possibly blocked by CORS). Try again or use a different query.</p>', sources: [], note: 'DuckDuckGo', raw: null };
+        }
       }
     }
         super('Wikipedia', '📚', 'wiki');
       }
+      canHandle() {
+        return /\b(who is|who was|what is|what was|definition|define|history|historical|article)\b/i.test(lastQuery) ||
+               /\b[a-zA-Z]{3,}\b/.test(lastQuery);
+      }
+      getPriority() { return 35; }
       async search(query, signal) {
         try {
+          // Try primary summary API
+          const title = query.replace(/^(who is|who was|what is|what was|definition|define)\s+/i, '').trim();
+          const searchUrl = `https://en.wikipedia.org/api/rest_v1/page/summary/${encodeURIComponent(title)}`;
           const data = await fetchWithCorsProxies(searchUrl, signal);
           if (data.extract) {
             const sources = [];
             if (data.content_urls?.desktop?.page) {
+              sources.push({ href: data.content_urls.desktop.page, label: 'Wikipedia Article', multi: true });
             }
             let html = `<p>${escapeHTML(data.extract)}</p>`;
             if (data.extract_html) {
               html = data.extract_html;
             }
             if (data.thumbnail?.source) {
               html = `<img src="${data.thumbnail.source}" alt="${escapeHTML(data.title || 'Image')}" style="max-width: 200px; border-radius: 8px; margin-bottom: 10px;" /><br/>${html}`;
             }
             return {
               found: true,
               html,
               raw: data
             };
           }
           return { found: false, html: '<p>No Wikipedia article found.</p>', sources: [], note: 'Wikipedia', raw: data };
         } catch (err) {
+          return { found: false, html: '<p>Error fetching Wikipedia data.</p>', sources: [], note: 'Wikipedia', raw: null };