fix: add search_xkcd_by_topic tool for topics like Python (#353), Git (#1597), and SQL (#327)

index.html

@@ -408,7 +408,7 @@
       <a class="badge peach" href="https://xkcd.hemanth.deno.net/" target="_blank">🌐 xkcd.hemanth.deno.net</a>
     </div>
     <h1>PhoneLLM XKCD Voice Agent</h1>
-    <p class="sub">Soft pastel voice interface with high-fidelity on-device neural speech & live XKCD tool calls.</p>
+    <p class="sub">Soft pastel voice interface with high-fidelity on-device neural speech & live XKCD topic search.</p>
   </header>
 
   <main class="main-grid">
@@ -429,16 +429,17 @@
       </div>
 
       <div class="chips-row">
-        <button class="chip" onclick="sendQuery('Show me the latest XKCD comic')">✨ Latest Comic</button>
-        <button class="chip" onclick="sendQuery('Give me a random XKCD comic and explain it')">🎲 Random Comic</button>
+        <button class="chip" onclick="sendQuery('Show me a comic on Python programming language')">🐍 Python Comic</button>
         <button class="chip" onclick="sendQuery('What is XKCD comic 327 (Little Bobby Tables)?')">💻 Little Bobby Tables (#327)</button>
-        <button class="chip" onclick="sendQuery('Show comic 300')">📱 Comic #300</button>
+        <button class="chip" onclick="sendQuery('Show me a comic about Git version control')">🌿 Git Comic</button>
+        <button class="chip" onclick="sendQuery('Show me the latest XKCD comic')">✨ Latest Comic</button>
+        <button class="chip" onclick="sendQuery('Give me a random XKCD comic')">🎲 Random Comic</button>
       </div>
 
       <div id="chat-box" class="chat-box"></div>
 
       <div class="input-row">
-        <input id="user-input" type="text" placeholder="Speak or type (e.g. 'Get a random comic')..." />
+        <input id="user-input" type="text" placeholder="Speak or type (e.g. 'Show me a comic on Python')..." />
         <button id="send-btn" class="btn-send">Send</button>
       </div>
     </div>
@@ -469,6 +470,43 @@
     let selectedVoice = null;
     let availableVoices = [];
 
+    // Topic Knowledge Index for iconic XKCD comics
+    const TOPIC_INDEX = {
+      "python": 353,
+      "antigravity": 353,
+      "sql": 327,
+      "database": 327,
+      "injection": 327,
+      "bobby tables": 327,
+      "little bobby tables": 327,
+      "git": 1597,
+      "version control": 1597,
+      "tar": 1168,
+      "zip": 1168,
+      "archive": 1168,
+      "regex": 208,
+      "regular expression": 208,
+      "password": 936,
+      "correct horse": 936,
+      "machine learning": 1838,
+      "ai": 1838,
+      "artificial intelligence": 1838,
+      "compiling": 303,
+      "sword fight": 303,
+      "standards": 927,
+      "facebook": 300,
+      "social media": 300,
+      "wisdom of the ancients": 979,
+      "sudo": 149,
+      "sandwich": 149,
+      "lisp": 224,
+      "c++": 435,
+      "rust": 2248,
+      "javascript": 2248,
+      "linux": 272,
+      "kernel": 272
+    };
+
     // Initialize High-Quality On-Device TTS Voices
     function loadVoices() {
       if (!('speechSynthesis' in window)) return;
@@ -477,7 +515,6 @@
 
       voiceSelect.innerHTML = '';
       
-      // Filter for premium / natural English voices (Samantha, Daniel, Siri, Google US, Natural, etc.)
       const preferred = availableVoices.filter(v => 
         v.lang.startsWith('en') && 
         (v.name.includes('Natural') || v.name.includes('Neural') || v.name.includes('Samantha') || v.name.includes('Google') || v.name.includes('Siri') || v.name.includes('Daniel') || v.name.includes('Karen') || v.name.includes('Alex'))
@@ -492,7 +529,6 @@
         voiceSelect.appendChild(opt);
       });
 
-      // Default to the highest quality natural neural voice
       selectedVoice = voicesToShow[0] || availableVoices[0];
       voiceSelect.onchange = () => {
         selectedVoice = voicesToShow[voiceSelect.value] || availableVoices[0];
@@ -549,6 +585,16 @@
       return json.data || json;
     }
 
+    async function toolSearchXkcdByTopic(topic) {
+      const cleanTopic = topic.toLowerCase().trim();
+      for (const [key, num] of Object.entries(TOPIC_INDEX)) {
+        if (cleanTopic.includes(key) || key.includes(cleanTopic)) {
+          return { comic: await toolGetXkcdByNumber(num), topic: key };
+        }
+      }
+      return { comic: await toolGetRandomXkcd(), topic: cleanTopic };
+    }
+
     // PhoneLLM Conversational & Tool Calling Engine
     async function processPhoneLLMTurn(userText) {
       statusBadge.textContent = "⚡ PhoneLLM Reasoning...";
@@ -561,7 +607,22 @@
 
       const numMatch = lower.match(/\b(?:comic|number|#)?\s*(\d+)\b/);
 
-      if (lower.includes("random") || lower.includes("any comic")) {
+      // Check for topic queries first (e.g. "comic on Python", "about git", "database comic")
+      let matchedTopic = null;
+      for (const key of Object.keys(TOPIC_INDEX)) {
+        if (lower.includes(key)) {
+          matchedTopic = key;
+          break;
+        }
+      }
+
+      if (matchedTopic && (lower.includes("about") || lower.includes("on") || lower.includes("show") || lower.includes("comic") || lower.includes("tell") || lower.includes("find") || lower.includes("give") || lower.includes("python") || lower.includes("git") || lower.includes("sql"))) {
+        toolName = `search_xkcd_by_topic(topic="${matchedTopic}")`;
+        statusBadge.textContent = `⚙️ Executing search_xkcd_by_topic("${matchedTopic}")...`;
+        const res = await toolSearchXkcdByTopic(matchedTopic);
+        comic = res.comic;
+        replyText = `Here is the iconic XKCD comic on ${matchedTopic.toUpperCase()}: #${comic.num} titled "${comic.title}". The punchline alt text says: "${comic.alt}"`;
+      } else if (lower.includes("random") || lower.includes("any comic")) {
         toolName = "get_random_xkcd()";
         statusBadge.textContent = "⚙️ Executing get_random_xkcd...";
         comic = await toolGetRandomXkcd();
@@ -572,13 +633,13 @@
         statusBadge.textContent = `⚙️ Executing get_xkcd_by_number(${comicNum})...`;
         comic = await toolGetXkcdByNumber(comicNum);
         replyText = `Here is XKCD comic #${comic.num}: "${comic.title}". The punchline alt text says: "${comic.alt}"`;
-      } else if (lower.includes("latest") || lower.includes("newest") || lower.includes("today") || lower.includes("recent") || lower.includes("comic") || lower.includes("xkcd")) {
+      } else if (lower.includes("latest") || lower.includes("newest") || lower.includes("today") || lower.includes("recent")) {
         toolName = "get_latest_xkcd()";
         statusBadge.textContent = "⚙️ Executing get_latest_xkcd...";
         comic = await toolGetLatestXkcd();
         replyText = `Here is the latest XKCD comic: #${comic.num} titled "${comic.title}". The alt text says: "${comic.alt}"`;
       } else {
-        replyText = `I am your XKCD voice assistant powered by PhoneLLM Alpha 1. You can ask me to fetch the latest comic, get a random comic, or look up any specific comic number like #327!`;
+        replyText = `I am your XKCD voice assistant powered by PhoneLLM Alpha 1. You can ask me for comics on Python, Git, SQL/Bobby Tables, or ask for the latest or random comics!`;
       }
 
       addMessage(replyText, "agent", toolName);
@@ -676,7 +737,7 @@
 
     // Initial greeting
     setTimeout(() => {
-      addMessage("Hello! I am your Pipecat voice assistant powered by PhoneLLM Alpha 1. Tap the glowing pastel orb or select a prompt below to look up XKCD comics!", "agent");
+      addMessage("Hello! I am your Pipecat voice assistant powered by PhoneLLM Alpha 1. Try asking: 'Show me a comic on Python' or 'What is Little Bobby Tables?'", "agent");
     }, 400);
   </script>
 </body>