feat: live PhoneLLM (pipecat-ai/phonellm-alpha-1) endpoint integration with full tool calling protocol

index.html

@@ -117,6 +117,45 @@
       position: relative;
     }
 
+    
+    .endpoint-details {
+      background: #fefce8;
+      border: 2px solid var(--ink);
+      border-radius: 12px;
+      padding: 10px 14px;
+      margin-bottom: 14px;
+      box-shadow: var(--shadow-hard-sm);
+      font-size: 0.9rem;
+      font-weight: 700;
+    }
+    .endpoint-details summary {
+      cursor: pointer;
+      outline: none;
+      user-select: none;
+    }
+    .endpoint-config-grid {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      margin-top: 10px;
+      padding-top: 8px;
+      border-top: 2px dashed var(--ink);
+    }
+    .input-group label {
+      display: block;
+      font-size: 0.8rem;
+      font-family: 'JetBrains Mono', monospace;
+      margin-bottom: 3px;
+    }
+    .input-group input {
+      width: 100%;
+      padding: 6px 10px;
+      border: 1.5px solid var(--ink);
+      border-radius: 6px;
+      font-size: 0.85rem;
+      font-family: 'JetBrains Mono', monospace;
+    }
+
     /* TTS Controls Banner */
     .tts-controls-box {
       background: #fefce8;
@@ -428,6 +467,25 @@
     <!-- Left Voice & Speech Bubble Panel -->
     <div class="panel">
       <!-- TTS Engine & Voice Config -->
+            <!-- PhoneLLM Model Endpoint Configuration -->
+      <details class="endpoint-details">
+        <summary>⚙️ <strong>PhoneLLM Model Endpoint Settings (vLLM / Modal / SGLang / HF)</strong></summary>
+        <div class="endpoint-config-grid">
+          <div class="input-group">
+            <label>API Base URL (OpenAI-compatible):</label>
+            <input id="api-base-url" type="text" placeholder="e.g. https://your-modal-app.modal.run/v1 or http://localhost:8000/v1" />
+          </div>
+          <div class="input-group">
+            <label>API Key (Optional):</label>
+            <input id="api-key" type="password" placeholder="Bearer Token / API Key" />
+          </div>
+          <div class="input-group">
+            <label>Model ID:</label>
+            <input id="model-id" type="text" value="pipecat-ai/phonellm-alpha-1" />
+          </div>
+        </div>
+      </details>
+
       <div class="tts-controls-box">
         <div class="tts-row">
           <span>🧠 <strong>TTS Engine:</strong></span>
@@ -689,11 +747,176 @@
       return { comic: await toolGetRandomXkcd(), topic: cleanTopic };
     }
 
+    
+    const apiBaseInput = document.getElementById('api-base-url');
+    const apiKeyInput = document.getElementById('api-key');
+    const modelIdInput = document.getElementById('model-id');
+
+    // PhoneLLM Tool Definition Schema (OpenAI Compatible)
+    const PHONELLM_TOOLS_SCHEMA = [
+      {
+        type: "function",
+        function: {
+          name: "get_latest_xkcd",
+          description: "Fetch the latest published XKCD comic with its title, image URL, and alt-text punchline.",
+          parameters: { type: "object", properties: {}, required: [] }
+        }
+      },
+      {
+        type: "function",
+        function: {
+          name: "get_random_xkcd",
+          description: "Fetch a random XKCD comic strip from the entire archive.",
+          parameters: { type: "object", properties: {}, required: [] }
+        }
+      },
+      {
+        type: "function",
+        function: {
+          name: "search_xkcd_by_topic",
+          description: "Search or retrieve an XKCD comic about a specific topic (e.g. 'python', 'git', 'sql', 'ai', 'tar', 'regex', 'compiling').",
+          parameters: {
+            type: "object",
+            properties: {
+              topic: { type: "string", description: "The topic or programming concept to search for." }
+            },
+            required: ["topic"]
+          }
+        }
+      },
+      {
+        type: "function",
+        function: {
+          name: "get_xkcd_by_number",
+          description: "Fetch a specific XKCD comic by its exact comic number.",
+          parameters: {
+            type: "object",
+            properties: {
+              comic_num: { type: "integer", description: "The exact comic number to retrieve." }
+            },
+            required: ["comic_num"]
+          }
+        }
+      }
+    ];
+
+    let conversationHistory = [
+      {
+        role: "system",
+        content: "You are XKCD Voice Bot, powered by pipecat-ai/phonellm-alpha-1. You have live tool access to https://xkcd.hemanth.deno.net. Always use your tools to look up comics. Keep responses punchy and mention the title, comic number, and punchline alt-text."
+      }
+    ];
+
+    // Call live PhoneLLM vLLM / Modal endpoint if configured
+    async function callLivePhoneLLMEndpoint(userText) {
+      const baseUrl = (apiBaseInput.value || "").trim().replace(/\/+$/, "");
+      if (!baseUrl) return null;
+
+      const apiKey = (apiKeyInput.value || "").trim();
+      const model = (modelIdInput.value || "pipecat-ai/phonellm-alpha-1").trim();
+
+      conversationHistory.push({ role: "user", content: userText });
+
+      const headers = { "Content-Type": "application/json" };
+      if (apiKey) headers["Authorization"] = `Bearer ${apiKey}`;
+
+      try {
+        statusBadge.textContent = "⚡ Calling live PhoneLLM model...";
+        // Call PhoneLLM with temperature=0 & thinking disabled (per PhoneLLM spec)
+        const response = await fetch(`${baseUrl}/chat/completions`, {
+          method: "POST",
+          headers: headers,
+          body: JSON.stringify({
+            model: model,
+            messages: conversationHistory,
+            tools: PHONELLM_TOOLS_SCHEMA,
+            tool_choice: "auto",
+            temperature: 0.0
+          })
+        });
+
+        if (!response.ok) {
+          throw new Error(`PhoneLLM endpoint returned HTTP ${response.status}`);
+        }
+
+        const data = await response.json();
+        const choice = data.choices[0];
+        const message = choice.message;
+        let comic = null;
+        let toolName = null;
+
+        if (message.tool_calls && message.tool_calls.length > 0) {
+          conversationHistory.push(message);
+
+          for (const tc of message.tool_calls) {
+            const fnName = tc.function.name;
+            const fnArgs = JSON.parse(tc.function.arguments || "{}");
+            toolName = `${fnName}(${JSON.stringify(fnArgs)})`;
+            statusBadge.textContent = `⚙️ PhoneLLM invoked tool: ${fnName}...`;
+
+            let toolResult = null;
+            if (fnName === "get_latest_xkcd") {
+              toolResult = await toolGetLatestXkcd();
+              comic = toolResult;
+            } else if (fnName === "get_random_xkcd") {
+              toolResult = await toolGetRandomXkcd();
+              comic = toolResult;
+            } else if (fnName === "get_xkcd_by_number") {
+              toolResult = await toolGetXkcdByNumber(fnArgs.comic_num || 1);
+              comic = toolResult;
+            } else if (fnName === "search_xkcd_by_topic") {
+              const res = await toolSearchXkcdByTopic(fnArgs.topic || "python");
+              toolResult = res.comic;
+              comic = toolResult;
+            }
+
+            conversationHistory.push({
+              role: "tool",
+              tool_call_id: tc.id,
+              content: JSON.stringify(toolResult)
+            });
+          }
+
+          // Request final voice reply from PhoneLLM
+          const finalRes = await fetch(`${baseUrl}/chat/completions`, {
+            method: "POST",
+            headers: headers,
+            body: JSON.stringify({
+              model: model,
+              messages: conversationHistory,
+              temperature: 0.0
+            })
+          });
+
+          const finalData = await finalRes.json();
+          const finalReply = finalData.choices[0].message.content;
+          conversationHistory.push({ role: "assistant", content: finalReply });
+
+          return { replyText: finalReply, comic: comic, toolName: toolName };
+        } else {
+          conversationHistory.push({ role: "assistant", content: message.content });
+          return { replyText: message.content, comic: null, toolName: null };
+        }
+      } catch (err) {
+        console.warn("Live PhoneLLM API failed, falling back to local engine:", err);
+        return null;
+      }
+    }
+
     // PhoneLLM Conversational & Tool Calling Engine
-    async function processPhoneLLMTurn(userText) {
+        async function processPhoneLLMTurn(userText) {
       statusBadge.textContent = "⚡ PhoneLLM Reasoning...";
       addMessage(userText, "user");
 
+      // Try Live PhoneLLM Endpoint first if configured by user
+      const liveResult = await callLivePhoneLLMEndpoint(userText);
+      if (liveResult) {
+        addMessage(liveResult.replyText, "agent", liveResult.toolName);
+        if (liveResult.comic) renderComic(liveResult.comic);
+        speak(liveResult.replyText);
+        return;
+      }
+
       const lower = userText.toLowerCase();
       let comic = null;
       let toolName = null;