Upload app.js

app.js

@@ -0,0 +1,140 @@
+const tools = [
+  {
+    type: "function",
+    function: {
+      name: "terminal",
+      description: "Run a shell command. This demo displays the request but does not execute it.",
+      parameters: {
+        type: "object",
+        properties: { command: { type: "string", description: "The command to run." } },
+        required: ["command"],
+      },
+    },
+  },
+  {
+    type: "function",
+    function: {
+      name: "read_file",
+      description: "Read a UTF-8 text file. This demo only displays the requested path.",
+      parameters: {
+        type: "object",
+        properties: { path: { type: "string", description: "Path of the file to read." } },
+        required: ["path"],
+      },
+    },
+  },
+  {
+    type: "function",
+    function: {
+      name: "web_search",
+      description: "Search the web. This demo displays the query but does not send it.",
+      parameters: {
+        type: "object",
+        properties: { query: { type: "string", description: "The search query." } },
+        required: ["query"],
+      },
+    },
+  },
+];
+
+const $ = (selector) => document.querySelector(selector);
+const runButton = $("#run");
+const status = $("#status");
+const answer = $("#answer");
+const calls = $("#calls");
+const latency = $("#latency");
+
+function parseValue(value) {
+  const trimmed = value.trim();
+  try { return JSON.parse(trimmed); } catch { return trimmed; }
+}
+
+function parseAtem(text) {
+  const parsed = [];
+  const invokes = text.matchAll(/<atem:invoke\s+name="([^"]+)">([\s\S]*?)<\/atem:invoke>/g);
+  for (const match of invokes) {
+    const argumentsObject = {};
+    for (const parameter of match[2].matchAll(/<atem:parameter\s+name="([^"]+)">([\s\S]*?)<\/atem:parameter>/g)) {
+      argumentsObject[parameter[1]] = parseValue(parameter[2]);
+    }
+    parsed.push({ name: match[1], arguments: argumentsObject });
+  }
+  return parsed;
+}
+
+function normalizeCalls(message) {
+  if (Array.isArray(message.tool_calls) && message.tool_calls.length) {
+    return message.tool_calls.map((call) => {
+      let argumentsObject = call.function?.arguments ?? {};
+      if (typeof argumentsObject === "string") {
+        try { argumentsObject = JSON.parse(argumentsObject); } catch { argumentsObject = { raw: argumentsObject }; }
+      }
+      return { name: call.function?.name ?? "unknown", arguments: argumentsObject };
+    });
+  }
+  return parseAtem(message.content ?? "");
+}
+
+function visibleContent(content) {
+  if (!content) return "No user-facing answer was produced. See the proposed tool call below.";
+  const withoutCalls = content.replace(/<atem:function_calls>[\s\S]*?<\/atem:function_calls>/g, "");
+  const withoutProtocol = withoutCalls.replace(/<\|[^>]+\|>/g, "").replace(/^\s*to=[^<\n]+/, "").trim();
+  return withoutProtocol || "No user-facing answer was produced. See the proposed tool call below.";
+}
+
+async function generate() {
+  const endpoint = $("#endpoint").value.trim().replace(/\/+$/, "");
+  const prompt = $("#prompt").value.trim();
+  if (!endpoint || !prompt) {
+    status.textContent = "Enter both a public endpoint and a request.";
+    return;
+  }
+
+  runButton.disabled = true;
+  status.textContent = "";
+  latency.textContent = "Generating…";
+  const started = performance.now();
+  try {
+    const response = await fetch(`${endpoint}/v1/chat/completions`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        model: "muse-glimmer-30b",
+        messages: [
+          {
+            role: "system",
+            content: `You are a helpful AI assistant. Reasoning strength: ${$("#reasoning").value}. Use a tool only when necessary. Never claim a tool succeeded because this demo does not execute tools. Confirm destructive actions.`,
+          },
+          { role: "user", content: prompt },
+        ],
+        tools,
+        temperature: Number($("#temperature").value),
+        top_p: 0.95,
+        max_tokens: Number($("#maxTokens").value),
+      }),
+    });
+    const payload = await response.json().catch(() => ({}));
+    if (!response.ok) throw new Error(payload.error?.message || `Endpoint returned HTTP ${response.status}.`);
+    const message = payload.choices?.[0]?.message;
+    if (!message) throw new Error("The endpoint response did not contain choices[0].message.");
+
+    const proposed = normalizeCalls(message);
+    answer.textContent = visibleContent(message.content);
+    answer.classList.remove("empty");
+    calls.textContent = JSON.stringify(proposed, null, 2);
+    latency.textContent = `${((performance.now() - started) / 1000).toFixed(1)} s · ${payload.usage?.completion_tokens ?? "?"} tokens`;
+  } catch (error) {
+    status.textContent = `${error.message} Check endpoint reachability, HTTPS, and CORS.`;
+    latency.textContent = "Request failed";
+  } finally {
+    runButton.disabled = false;
+  }
+}
+
+runButton.addEventListener("click", generate);
+$("#prompt").addEventListener("keydown", (event) => {
+  if ((event.ctrlKey || event.metaKey) && event.key === "Enter") generate();
+});
+document.querySelectorAll("[data-prompt]").forEach((button) => {
+  button.addEventListener("click", () => { $("#prompt").value = button.dataset.prompt; });
+});