31:T7b3,async function getWebLLMCompletionStream( systemPrompt, prompt, { temperature = 0.0 } = {} ) { const outputElement = document.getElementById("webllm-output"); outputElement.textContent = ""; if (prompt.length == 0) { return; } let messages = []; if (systemPrompt) { messages.push({ role: "system", content: systemPrompt }); } messages.push({ role: "user", content: prompt }); const stream = await engine.chat.completions.create({ messages: messages, temperature: temperature, stream: true }); for await (const part of stream) { const text = part.choices[0]?.delta?.content || ""; outputElement.textContent += text; } console.log(outputElement.textContent); const functionCall = extractJsonFromFunctionTags(outputElement.textContent); console.log(functionCall); try { if (!functionCall || !functionCall.name || !functionCall.parameters) { return; } else { const toolResponse = await callAPI( functionCall.name, functionCall.parameters ); console.log(toolResponse); messages.push({ role: "assistant", content: outputElement.textContent }); messages.push({ role: "user", content: `Your function call was successful. Please read the output below and use this context to respond to my original query in natural language. Output from function call \`${functionCall.name}(${ functionCall.parameters })\`: ${JSON.stringify(toolResponse)}.` }); const stream2 = await engine.chat.completions.create({ messages: messages, temperature: temperature, stream: true }); outputElement.textContent += "\n"; for await (const part of stream2) { const text = part.choices[0]?.delta?.content || ""; outputElement.textContent += text; } } } catch (error) { console.error(`Error during the following function call: ${functionCall}`); } }32:T707,async function getWeeklyWeatherUSA(city, state) { // Geocoding using OpenStreetMap Nominatim API const geoUrl = `https://nominatim.openstreetmap.org/search?city=${city}&state=${state}&country=US&format=json&limit=1`; try { const geoResponse = await fetch(geoUrl, { method: "GET" }); const geoData = await geoResponse.json(); if (!geoData.length) { throw new Error("Unable to geocode the given city and state."); } const { lat, lon } = geoData[0]; // NWS Weather Forecast Office (WFO) grid forecast endpoint from latitude and longitude const gridForecastEndpointUrl = `https://api.weather.gov/points/${lat},${lon}`; const gridForecastEndpointResponse = await fetch(gridForecastEndpointUrl); const gridForecastEndpointData = await gridForecastEndpointResponse.json(); // Weather data using the grid forecast endpoint const weatherUrl = gridForecastEndpointData.properties.forecast; const weatherResponse = await fetch(weatherUrl); const weatherData = (await weatherResponse.json()).properties.periods; // Return filtered object const filterKeys = (obj, keysToKeep) => { return Object.keys(obj).reduce((accumulator, key) => { if (keysToKeep.includes(key)) { accumulator[key] = obj[key]; } return accumulator; }, {}); }; const dataToKeep = [ "name", "temperature", "temperatureUnit", "probabilityOfPrecipitation", "windSpeed", "windDirection", "shortForecast", "detailedForecast" ]; const filteredWeatherData = weatherData.map((obj) => filterKeys(obj, dataToKeep) ); return filteredWeatherData; } catch (error) { console.error("Error fetching data:", error); return null; } }33:T520,systemPromptForToolUse = `You are a helpful assistant that can call relevant functions, when appropriate. If a user query can be answered using one of the tools listed under 'Available tools', utilize them as described under 'Instructions on tool use'. If none of the listed tools are relevant to respond to the user, ignore the tools and respond naturally in plain language. # Available tools - The JSON below lists the functions available to you. \`\`\`json ${JSON.stringify(tools)} \`\`\` # Instructions on tool use If you choose to call one of the functions available to you, ONLY reply in the following format: {"name": function name, "parameters": dictionary of argument name and its value} Here is an example, {"name": "example_function_name", "parameters": {"example_name": "example_value"}} Reminder: - Function calls MUST follow the specified format and use BOTH and . - Required parameters MUST be specified. - Only call one function at a time. - When calling a function, do NOT say anything else. ONLY display the function call in the specified format. - Do not ask for the user's permission to make the function call. Use your judgement and make the call when appropriate. - Put the entire function call reply on one line. `34:[] 2f:{"title":"WebLLM - function calling","cells":[{"id":0,"value":"# WebLLM - function calling","pinned":false,"hidden":false,"mode":"md"},{"id":19,"value":"viewof selectedModel = Inputs.select(availableModels, {\n value: \"Llama-3.2-1B-Instruct-q4f32-MLC\",\n label: \"Model\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":33,"value":"viewof webllmParams = guard(\n ({ template }) =>\n Inputs.form(\n {\n temperature: Inputs.range([0, 2], {\n value: 0.0,\n step: 0.1,\n label: \"Temperature\"\n }),\n systemPrompt: Inputs.textarea({\n label: \"System prompt for tool use\",\n value: systemPromptForToolUse\n }),\n prompt: Inputs.textarea({ label: \"Message WebLLM\" })\n },\n { template }\n ),\n { submitLabel: \"Submit\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"\n\n

","pinned":false,"hidden":false,"mode":"html"},{"id":45,"value":"getWebLLMCompletionStream(webllmParams.systemPrompt, webllmParams.prompt, {\n temperature: webllmParams.temperature,\n model: webllmParams.model\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"# Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":26,"value":"webllm = import(\"https://esm.run/@mlc-ai/web-llm@0.2.71\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"availableModels = webllm.prebuiltAppConfig.model_list.map((m) => m.model_id)","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"engine = {\n const setLabel = (id, text) => {\n const label = document.getElementById(id);\n if (label == null) {\n throw Error(\"Cannot find label \" + id);\n }\n label.innerText = text;\n };\n\n const initProgressCallback = (report) => {\n setLabel(\"model-load\", report.text);\n };\n\n return webllm.CreateMLCEngine(selectedModel, {\n initProgressCallback: initProgressCallback\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":154,"value":"function extractJsonFromFunctionTags(textContent) {\n const regex = /(.*?)<\\/function>/s;\n const match = regex.exec(textContent);\n\n if (match) {\n const jsonContent = match[1];\n\n try {\n return JSON.parse(jsonContent);\n } catch (error) {\n return null;\n }\n } else {\n return null;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":97,"value":"async function callAPI(apiName, params) {\n switch (apiName) {\n case \"getWeeklyWeatherUSA\":\n try {\n const city = params.city;\n const state = params.state;\n return await getWeeklyWeatherUSA(city, state);\n } catch (error) {\n console.error(\"Error parsing parameters or fetching weather:\", error);\n return Promise.reject(\"Error processing getWeeklyWeatherUSA request.\");\n }\n\n default:\n return Promise.resolve(\"No functions found by that name\");\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"tools = [weatherApiSpec]","pinned":true,"hidden":false,"mode":"ojs"},{"id":70,"value":"weatherApiSpec = ({\n type: \"function\",\n function: {\n name: \"getWeeklyWeatherUSA\",\n description:\n \"Get the weather for the upcoming week at a given location within the United States of America.\",\n parameters: {\n type: \"object\",\n properties: {\n city: {\n type: \"string\",\n description: \"The name of the US city\"\n },\n state: {\n type: \"string\",\n description: \"The two-letter US state code\"\n }\n },\n required: [\"city\", \"state\"]\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":35,"value":"import { guard } from \"@mootari/inputs-submit\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}