${item.title}

${item.description}

${makeShortDate(item.pubDate)}

\n ◉︎\n

\n`;\n};\n\nconst writeTopic = (topic: any) => {\n if (topic.news.length > 0) {\n const plot = plotTopic(topic.count, topic.plotParams);\n return `\n

\n ${topic.topic}\n

day.counts + acc, 0)\n } noticias en los últimos ${topic.plotParams.days} días\" class=\"topicPlot\">\n ${plot}\n

\n ${topic.news.map(writeItem).join(\"\")}\n

\n `;\n }\n};\n\nconst writePage = (data: any, style: string, script: string, plotDays: number = 30) => {\n const title = \"digest\";\n const favicon =\n \"iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAD6AAAA+gBtXtSawAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAI3SURBVFiF7ZbNS1RhFIef8167Ox3ICGultu0Dnelu3FwoqkVSG1f9Dy100R8RSv9BSO3cSVKGwmxCnA8HKhdFmi0iKadQGQjxfU+LSZiPe4dxnEsE/nb3vPfyPPfrvAdO848jx70gDMOeSsUPrGXIGM4DOMd3VbOZSv3OZ7PZw0QERkZuXzNGJ4G7wNmY08rAgqqZXlt79bYrAul0eE71zIyIPABMm74OeOZ5diqXWy53LJDJ3Lqsyjww1Ca4MZsi3CsUXr8/tsBf+Bugr0P4UXaNkbF8fnG9bYEguNFvrbcKXDoh/ChbznlBqfTyR+NC5Dt1znvSRTjAoDH2cdRC0xMYHb1zVcSV4uROECfiMoXCUqm22AQRcVMJwAGMqvewiVd7EIZhz/6+vw30JyAAUO7tPRiobVZ1d1qp+EGCcID+vb2eTG2hTsDajv/3tmOM1DHqBES4kLSAqrkYKwCiSQuAq2M0fu3fksarytdYAWN0K2kBcF9iBQYHU6sgOwnSy319h4VYgbm5OQu6kBRdROcbB5aIjuemAZsA34LMNBabBIrFpXfA827TVZmNmgsie77vyyTwqYv8zyIHj6IWIgVWVhZ/GiP3gd0uwHeNkfFiMRv5ccfuevn84rrn2QD4cAL4RqtpqKUAQC63/NHz7BgwS3XQbDdWRJ/6vgSt4HCMsTydvnkFvEnQcWJ3TNkBXojodKtBtCOBo0xMTHgbG7+uV3c1GahWdVtVNoeHU4VqLznNf5Q/zs6/KOtEX1YAAAAASUVORK5CYII=\";\n return `\n\n\n \n \n \n \n \n \n \n ${title}\n \n \n

${title}

\n ${data.map(writeTopic).join(\"\")}\n

\n \n \n\n `;\n};\n\nconst plotTopic = (data, params) => {\n const document = parseHTML(\"\").document;\n const markOptions = {\n x: \"pubDate\",\n y: \"counts\",\n z: \"topic\",\n sort: { channel: \"x\" },\n curve: \"basis\",\n };\n const scaleOptions = {\n ticks: 0,\n label: null,\n };\n return Plot.plot({\n document,\n height: 40,\n width: 50,\n marginTop: 2,\n marginBottom: 10,\n marginLeft: 5,\n marginRight: 5,\n y: {\n ...scaleOptions,\n domain: [0, params.maxY],\n },\n x: {\n ...scaleOptions,\n domain: [params.minX, new Date().getTime()],\n },\n marks: [\n Plot.line(data, {\n ...markOptions,\n strokeWidth: 1.5,\n }),\n ],\n });\n};\n\nconst makeReadable = async (link: string) => {\n console.log(\"fetch\");\n const response = await fetch(link, { signal: AbortSignal.timeout(5000) });\n const text = await response.text();\n console.log(\"parse\");\n const doc = new JSDOM(text);\n const reader = new Readability(doc.window.document);\n const article = reader.parse();\n const html = parse(article.content);\n console.log(\"select\");\n const content = html.querySelectorAll(\"p\").filter(p => p.textContent.trim() != \"\").map(p =>\n `

${p.textContent.trim()}

`\n ).join(\"\");\n console.log(\"return\");\n return `

${content}

element and has an alttext attribute\n    if (element.nodeName.toLowerCase() === \"math\") {\n      let latex = element.getAttribute(\"data-latex\");\n      let alttext = element.getAttribute(\"alttext\");\n      if (latex) {\n        return latex.trim();\n      } else if (alttext) {\n        return alttext.trim();\n      }\n      console.log(\"No latex or alttext found for math element:\", element);\n    }\n\n    // If not, look for a nested element with alttext\n    const mathElement = element.querySelector(\"math[alttext]\");\n    if (mathElement) {\n      const alttext = mathElement.getAttribute(\"alttext\");\n      if (alttext) {\n        return alttext.trim();\n      }\n    }\n\n    const annotation = element.querySelector(\n      'annotation[encoding=\"application/x-tex\"]',\n    );\n    if (annotation?.textContent) {\n      return annotation.textContent.trim();\n    }\n\n    const mathNode = element.nodeName.toLowerCase() === \"math\"\n      ? element\n      : element.querySelector(\"math\");\n    if (mathNode) {\n      return MathMLToLaTeX.convert(mathNode.outerHTML);\n    }\n\n    const imgNode = element.querySelector(\"img\");\n    return imgNode?.getAttribute(\"alt\") || \"\";\n  }\n\n  try {\n    let markdown = turndownService.turndown(processedContent);\n    debugLog(\"Markdown\", \"Markdown conversion successful\");\n\n    // Remove the title from the beginning of the content if it exists\n    const titleMatch = markdown.match(/^# .+\\n+/);\n    if (titleMatch) {\n      markdown = markdown.slice(titleMatch[0].length);\n    }\n\n    // Remove any empty links e.g. [](example.com) that remain, along with surrounding newlines\n    // But don't affect image links like ![](image.jpg)\n    markdown = markdown.replace(/\\n*(? 0) {\n      markdown += \"\\n\\n---\\n\\n\";\n      for (const [id, content] of Object.entries(footnotes)) {\n        markdown += `[^${id}]: ${content}\\n\\n`;\n      }\n    }\n\n    // Clear the footnotes object for the next conversion\n    Object.keys(footnotes).forEach((key) => delete footnotes[key]);\n\n    return markdown.trim();\n  } catch (error) {\n    console.error(\"Error converting HTML to Markdown:\", error);\n    console.log(\n      \"Problematic content:\",\n      processedContent.substring(0, 1000) + \"...\",\n    );\n    return `Partial conversion completed with errors. Original HTML:\\n\\n${processedContent}`;\n  }\n}\n\n// let htmlStr =\n//   `

Testing

\"use server-entry\";

export async function Comments() {
  // Load data from a database...
  let comments = await db.getComments();

  return comments.map((comment) => (
    <article key={comment.id}>
      <p>Posted by: {comment.user}</p>
      {renderMarkdown(comment.body)}
    </article>
  ));
}

element and has an alttext attribute\n    if (element.nodeName.toLowerCase() === \"math\") {\n      let latex = element.getAttribute(\"data-latex\");\n      let alttext = element.getAttribute(\"alttext\");\n      if (latex) {\n        return latex.trim();\n      } else if (alttext) {\n        return alttext.trim();\n      }\n      console.log(\"No latex or alttext found for math element:\", element);\n    }\n\n    // If not, look for a nested element with alttext\n    const mathElement = element.querySelector(\"math[alttext]\");\n    if (mathElement) {\n      const alttext = mathElement.getAttribute(\"alttext\");\n      if (alttext) {\n        return alttext.trim();\n      }\n    }\n\n    const annotation = element.querySelector(\n      'annotation[encoding=\"application/x-tex\"]',\n    );\n    if (annotation?.textContent) {\n      return annotation.textContent.trim();\n    }\n\n    const mathNode = element.nodeName.toLowerCase() === \"math\"\n      ? element\n      : element.querySelector(\"math\");\n    if (mathNode) {\n      return MathMLToLaTeX.convert(mathNode.outerHTML);\n    }\n\n    const imgNode = element.querySelector(\"img\");\n    return imgNode?.getAttribute(\"alt\") || \"\";\n  }\n\n  try {\n    let markdown = turndownService.turndown(processedContent);\n    debugLog(\"Markdown\", \"Markdown conversion successful\");\n\n    // Remove the title from the beginning of the content if it exists\n    const titleMatch = markdown.match(/^# .+\\n+/);\n    if (titleMatch) {\n      markdown = markdown.slice(titleMatch[0].length);\n    }\n\n    // Remove any empty links e.g. [](example.com) that remain, along with surrounding newlines\n    // But don't affect image links like ![](image.jpg)\n    markdown = markdown.replace(/\\n*(? 0) {\n      markdown += \"\\n\\n---\\n\\n\";\n      for (const [id, content] of Object.entries(footnotes)) {\n        markdown += `[^${id}]: ${content}\\n\\n`;\n      }\n    }\n\n    // Clear the footnotes object for the next conversion\n    Object.keys(footnotes).forEach((key) => delete footnotes[key]);\n\n    return markdown.trim();\n  } catch (error) {\n    console.error(\"Error converting HTML to Markdown:\", error);\n    console.log(\n      \"Problematic content:\",\n      processedContent.substring(0, 1000) + \"...\",\n    );\n    return `Partial conversion completed with errors. Original HTML:\\n\\n${processedContent}`;\n  }\n}","2025-09-19T11:40:55.828Z",[268,269,270,271,272,273,275,277,278,279],{"_127":220,"_129":239,"_131":22},{"_127":223,"_129":241,"_131":22},{"_127":128,"_129":243,"_131":138},{"_127":133,"_129":245,"_131":22},{"_127":136,"_129":72,"_131":22},{"_127":274,"_129":249,"_131":22},65,{"_127":276,"_129":72,"_131":22},66,{"_127":248,"_129":254,"_131":138},{"_127":251,"_129":257,"_131":22},{"_127":253,"_129":260,"_131":22},{"_104":281,"_106":282,"_108":231,"_110":283,"_112":284,"_114":285,"_116":234,"_118":235,"_120":236,"_122":-5,"_123":-5,"_124":286,"_144":220},"78aa8706-8d0c-11f0-a9be-0224a6c84d84","https://www.val.town/x/matthamlin/untitled-1066/code/string-utils.ts","string-utils.ts","// deno-lint-ignore-file prefer-const\nimport { DOMParser } from \"npm:linkedom\";\n\n// Cases to handle:\n// Full URLs: https://example.com/x.png\n// URLs without protocol: //example.com/x.png\n// Relative URLs:\n// - x.png\n// - /x.png\n// - img/x.png\n// - ../x.png\n\nexport function makeUrlAbsolute(\n  element: Element,\n  attributeName: string,\n  baseUrl: URL,\n) {\n  const attributeValue = element.getAttribute(attributeName);\n  if (attributeValue) {\n    try {\n      // Create a new URL object from the base URL\n      const resolvedBaseUrl = new URL(baseUrl.href);\n\n      // If the base URL points to a file, remove the filename to get the directory\n      if (!resolvedBaseUrl.pathname.endsWith(\"/\")) {\n        resolvedBaseUrl.pathname = resolvedBaseUrl.pathname.substring(\n          0,\n          resolvedBaseUrl.pathname.lastIndexOf(\"/\") + 1,\n        );\n      }\n\n      const url = new URL(attributeValue, resolvedBaseUrl);\n\n      if (![\"http:\", \"https:\"].includes(url.protocol)) {\n        // Handle non-standard protocols (chrome-extension://, moz-extension://, brave://, etc.)\n        const parts = attributeValue.split(\"/\");\n        const firstSegment = parts[2]; // The segment after the protocol\n\n        if (firstSegment && firstSegment.includes(\".\")) {\n          // If it looks like a domain, replace the non-standard protocol with the current page's protocol\n          const newUrl = `${baseUrl.protocol}//` +\n            attributeValue.split(\"://\")[1];\n          element.setAttribute(attributeName, newUrl);\n        } else {\n          // If it doesn't look like a domain it's probably the extension URL, remove the non-standard protocol part and use baseUrl\n          const path = parts.slice(3).join(\"/\");\n          const newUrl =\n            new URL(path, resolvedBaseUrl.origin + resolvedBaseUrl.pathname)\n              .href;\n          element.setAttribute(attributeName, newUrl);\n        }\n      } else {\n        // Handle other cases (relative URLs, protocol-relative URLs)\n        const newUrl = url.href;\n        element.setAttribute(attributeName, newUrl);\n      }\n    } catch (error) {\n      console.warn(`Failed to process URL: ${attributeValue}`, error);\n      element.setAttribute(attributeName, attributeValue);\n    }\n  }\n}\n\n// @todo rewrite to use linkedom DOMParser\nexport function processUrls(htmlContent: string, baseUrl: URL): string {\n  let parser = new DOMParser();\n  let doc = parser.parseFromString(htmlContent, \"text/html\");\n\n  // const tempDiv = document.createElement(\"div\");\n  // tempDiv.innerHTML = htmlContent;\n\n  // Handle relative URLs for both images and links\n  doc.querySelectorAll(\"img\").forEach((img) =>\n    makeUrlAbsolute(img, \"srcset\", baseUrl)\n  );\n  doc.querySelectorAll(\"img\").forEach((img) =>\n    makeUrlAbsolute(img, \"src\", baseUrl)\n  );\n  doc.querySelectorAll(\"a\").forEach((link) =>\n    makeUrlAbsolute(link, \"href\", baseUrl)\n  );\n\n  return doc.toString();\n}","2025-09-09T00:00:34.929Z",[287,289,290,291,293,295,297,299,300],{"_127":145,"_129":288,"_131":22},"// deno-lint-ignore-file prefer-const",{"_127":220,"_129":224,"_131":138},{"_127":223,"_129":72,"_131":22},{"_127":128,"_129":292,"_131":22},"// Cases to handle:",{"_127":294,"_129":249,"_131":22},62,{"_127":296,"_129":72,"_131":22},63,{"_127":298,"_129":254,"_131":138},64,{"_127":274,"_129":257,"_131":22},{"_127":276,"_129":260,"_131":22},{"_104":302,"_106":303,"_108":304,"_110":111,"_112":305,"_114":306,"_116":307,"_118":308,"_120":236,"_122":-5,"_123":-5,"_124":309,"_144":145},"5206d974-8d02-11f0-924b-0224a6c84d84","https://www.val.town/x/matthamlin/untitled-9497/code/main.ts","5204454c-8d02-11f0-924b-0224a6c84d84","import Defuddle from \"npm:defuddle\";\n// import turndown from \"npm:turndown\";\nimport { DOMParser } from \"npm:linkedom\";\n\nlet htmlExample = `\n\n \n

\n\n\n\nLoad Llama-3.2 WebGPU in your browser from a local folder\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Simon Willison’s Weblog

\n Subscribe\n

\n\n

\n\n\n\n

Load Llama-3.2 WebGPU in your browser from a local folder (via) Inspired by a comment on Hacker News I decided to see if it was possible to modify the transformers.js-examples/tree/main/llama-3.2-webgpu Llama 3.2 chat demo (online here, I wrote about it last November) to add an option to open a local model file directly from a folder on disk, rather than waiting for it to download over the network.

I posed the problem to OpenAI's GPT-5-enabled Codex CLI like this:

git clone https://github.com/huggingface/transformers.js-examples\ncd transformers.js-examples/llama-3.2-webgpu\ncodex\n

Then this prompt:

\n
Modify this application such that it offers the user a file browse button for selecting their own local copy of the model file instead of loading it over the network. Provide a \"download model\" option too.
\n

Codex churned away for several minutes, even running commands like curl -sL https://raw.githubusercontent.com/huggingface/transformers.js/main/src/models.js | sed -n '1,200p' to inspect the source code of the underlying Transformers.js library.

After four prompts total (shown here) it built something which worked!

To try it out you'll need your own local copy of the Llama 3.2 ONNX model. You can get that (a ~1.2GB) download) like so:

git lfs install\ngit clone https://huggingface.co/onnx-community/Llama-3.2-1B-Instruct-q4f16\n

Then visit my llama-3.2-webgpu page in Chrome or Firefox Nightly (since WebGPU is required), click \"Browse folder\", select that folder you just cloned, agree to the \"Upload\" confirmation (confusing since nothing is uploaded from your browser, the model file is opened locally on your machine) and click \"Load local model\".

Here's an animated demo.

$\"GIF.$

I pushed a branch with those changes here. The next step would be to modify this to support other models in addition to the Llama 3.2 demo, but I'm pleased to have got to this proof of concept with so little work beyond throwing some prompts at Codex to see if it could figure it out.

According to the Codex /status command this used 169,818 input tokens, 17,112 output tokens and 1,176,320 cached input tokens. At current GPT-5 token pricing ($1.25/million input, $0.125/million cached input, $10/million output) that would cost 53.942 cents, but Codex CLI hooks into my existing $20/month ChatGPT Plus plan so this was bundled into that.

\n\n

Posted 8th September 2025 at 8:53 pm

\n\n

Recent articles

GPT-5 Thinking in ChatGPT (aka Research Goblin) is shockingly good at search - 6th September 2025
V&A East Storehouse and Operation Mincemeat in London - 27th August 2025
The Summer of Johann: prompt injections as far as the eye can see - 15th August 2025

\n\n\n

\n\n

\n\n\n \n \n javascript\n 720\n \n \n \n ai\n 1551\n \n \n \n generative-ai\n 1360\n \n \n \n llama\n 77\n \n \n \n local-llms\n 139\n \n \n \n llms\n 1331\n \n \n \n ai-assisted-programming\n 230\n \n \n \n transformers-js\n 11\n \n \n \n webgpu\n 9\n \n \n \n llm-pricing\n 53\n \n \n \n vibe-coding\n 39\n \n \n \n gpt-5\n 13\n \n \n \n codex-cli\n 3\n \n \n\n\n

\n Monthly briefing\n

\n Sponsor me for $10/month and get a curated email digest of the month's most important LLM developments.\n

\n Pay me to send you less!\n

\n \n Sponsor & subscribe\n \n

\n \n

\n\n

\n\n\n\n\n\n\n\n\n\n

Colophon
©
2002
2003
2004
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025

\n\n\n\n\n\n\n`;\n\n// let td = new turndown({\n// headingStyle: \"atx\",\n// hr: \"---\",\n// codeBlockStyle: \"fenced\",\n// });\n\n// td.addRule(\"strikethrough\", {\n// filter: [\"del\", \"s\", \"strike\"],\n// replacement: function (content) {\n// return \"~\" + content + \"~\";\n// },\n// });\n\n// td.remove(\"script\");\n// td.remove(\"style\");\n\n// let res = td.turndown(htmlExample);\n\nlet dp = new DOMParser();\n\nlet doc = dp.parseFromString(htmlExample, \"text/html\");\n\nlet { content, ...res } = new Defuddle(doc, {\n url: \"https://simonwillison.net/2025/Sep/8/webgpu-local-folder/\",\n markdown: true,\n}).parse();\n\nconsole.log(res);","2025-09-08T23:23:15.889Z","untitled-9497","https://www.val.town/x/matthamlin/untitled-9497/code/",[310,312,314,315,316],{"_127":145,"_129":311,"_131":22},"import Defuddle from \"npm:defuddle\";",{"_127":220,"_129":313,"_131":22},"// import turndown from \"npm:turndown\";",{"_127":223,"_129":224,"_131":138},{"_127":128,"_129":72,"_131":22},{"_127":133,"_129":317,"_131":22},"let htmlExample = `",{"_104":319,"_106":320,"_108":321,"_110":322,"_112":323,"_114":324,"_116":325,"_118":326,"_120":327,"_122":-5,"_123":-5,"_124":328,"_144":145},"bb4a7996-82bb-11f0-82ed-0224a6c84d84","https://www.val.town/x/join/campy/code/main.tsx","bb475946-82bb-11f0-82ed-0224a6c84d84","main.tsx","// @ts-ignore\nimport { OpenAI } from \"https://esm.town/v/std/openai?v=4\";\n// @ts-ignore\nimport { DOMParser } from \"npm:linkedom\";\n\n// --- AI & TOOL DEFINITIONS ---\n\nconst openai = new OpenAI();\n\n// This is the \"mind\" of Campy. It defines its persona, goals, and available tools.\nconst CAMPY_SYSTEM_PROMPT = `\nYou are Campy, an expert A.I. campaign advisor with a friendly, proactive, and encouraging personality.\nYour user is a first-time political candidate. Your primary goal is to help them build and execute a winning campaign strategy.\nYou operate within a web interface that you can control. You have a chat interface to talk to the user and a 'workspace' div where you can render UI components.\nThink step-by-step. When the user asks for something, determine if you need to use one of your available tools. You can combine tools to accomplish complex tasks.\nFor example, to provide a media briefing, you could first use 'get_current_events' to find relevant news, then 'generate_talking_points' based on that news. Finally, you would use 'render_ui_component' to display this briefing in the user's workspace.\nAlways inform the user what you're doing. Be conversational and guide the user through the process.\n`;\n\n// These are the functions that Campy can decide to call.\nconst tools = [\n {\n type: \"function\" as const,\n function: {\n name: \"render_ui_component\",\n description:\n \"Generates and renders a new UI component in the user's workspace to display information. This is your primary way of showing complex data.\",\n parameters: {\n type: \"object\" as const,\n properties: {\n task_description: {\n type: \"string\",\n description:\n \"A detailed, clear description of the UI component to be built. For example: 'Create a 12-week campaign roadmap calendar view based on the strategic plan.' or 'Display these talking points in a clean, three-column layout.'\",\n },\n data: {\n type: \"object\",\n description:\n \"The data to be included in the component. This will be passed to the UI generation prompt.\",\n },\n },\n required: [\"task_description\", \"data\"],\n },\n },\n },\n {\n type: \"function\" as const,\n function: {\n name: \"get_current_events\",\n description:\n \"Fetches the top 5 recent news headlines for a given topic to inform strategy. Uses a simulated news feed.\",\n parameters: {\n type: \"object\" as const,\n properties: {\n topic: {\n type: \"string\",\n description:\n \"The topic to search for, e.g., 'local economy', 'healthcare policy'.\",\n },\n },\n required: [\"topic\"],\n },\n },\n },\n {\n type: \"function\" as const,\n function: {\n name: \"generate_talking_points\",\n description:\n \"Generates 3-4 concise talking points on a given subject, informed by context.\",\n parameters: {\n type: \"object\" as const,\n properties: {\n subject: {\n type: \"string\",\n description: \"The core subject for the talking points.\",\n },\n context: {\n type: \"string\",\n description:\n \"Relevant context, such as recent news or the campaign's core values, to ensure the points are on-brand.\",\n },\n },\n required: [\"subject\", \"context\"],\n },\n },\n },\n];\n\n// --- BACKEND TOOL IMPLEMENTATION ---\n\n// This function generates UI code using an LLM. It's Campy's \"wizardry\".\nasync function generate_ui_code(task_description: string, data: any) {\n const code_generation_prompt = `\n You are an expert front-end developer. Your sole job is to write clean, modern, single-file HTML and JavaScript code to be injected into a webpage.\n The user is already using a modern browser and a CSS framework with utility classes for styles like backgrounds, padding, grids, etc.\n (Available CSS classes resemble Tailwind: bg-white, p-4, rounded-lg, shadow-md, grid, grid-cols-3, gap-4, text-lg, font-bold, etc.)\n\n RULES:\n 1. Return ONLY a single JSON object. Do not include any other text or markdown.\n 2. The JSON object must have two keys: \"html\" and \"js\".\n 3. The \"html\" key must contain the HTML string for the component. Use a unique ID for the root element.\n 4. The \"js\" key must contain a JavaScript string. This code will be executed on the client. It should be an IIFE ((() => { ... })()) to avoid scope pollution. It should handle rendering the data into the HTML. The 'data' will be available in a variable named 'componentData'.\n\n TASK: ${task_description}\n `;\n\n const completion = await openai.chat.completions.create({\n model: \"gpt-4o\",\n messages: [\n { role: \"system\", content: code_generation_prompt },\n {\n role: \"user\",\n content: `Here is the data to incorporate: ${JSON.stringify(data)}`,\n },\n ],\n response_format: { type: \"json_object\" },\n });\n\n return JSON.parse(completion.choices[0].message.content);\n}\n\n// A simulated news fetcher. In a real scenario, this would call a News API.\nfunction get_current_events(topic: string) {\n const headlines = [\n `City Council Approves New Funding for Downtown Revitalization Projects, Impacting '${topic}'`,\n `National Report Shows Consumer Confidence Fluctuating Amidst New '${topic}' Policies`,\n `Tech Hubs See Growth, Sparking Debate on Local '${topic}' and Housing`,\n `Healthcare Experts Discuss the Future of Telemedicine and its link to the '${topic}'`,\n `Local Election Heats Up as Candidates Focus on '${topic}' as a Key Issue`,\n ];\n return { headlines: headlines.slice(0, 5) };\n}\n\nasync function generate_talking_points(subject: string, context: string) {\n const completion = await openai.chat.completions.create({\n model: \"gpt-4o\",\n messages: [\n {\n role: \"system\",\n content:\n 'You are a master communications director. Generate 3-4 concise, powerful, and memorable talking points. Respond with a JSON object: { \"points\": [...] }.',\n },\n { role: \"user\", content: `Subject: ${subject}\\nContext: ${context}` },\n ],\n response_format: { type: \"json_object\" },\n });\n\n return JSON.parse(completion.choices[0].message.content);\n}\n\n// --- HTML & FRONTEND ---\nfunction generateHtml(sourceUrl: string) {\n return `\n\n\n \n \n Campy | Your A.I. Campaign Advisor\n \n \n \n \n\n\n\n\n

\n Campy, Your A.I. Campaign Advisor\n

\n\n

\n \n

\n\n\n\n`;\n}\n\n// --- BACKEND LOGIC ---\nexport default async function (req: Request) {\n const url = new URL(req.url);\n const action = url.searchParams.get(\"action\");\n\n if (req.method === \"POST\" && action === \"chat\") {\n const { messages } = await req.json();\n\n // 1. Send the conversation to OpenAI\n const response = await openai.chat.completions.create({\n model: \"gpt-4o\",\n messages: [{ role: \"system\", content: CAMPY_SYSTEM_PROMPT }, ...messages],\n tools: tools,\n tool_choice: \"auto\",\n });\n\n const responseMessage = response.choices[0].message;\n const toolCalls = responseMessage.tool_calls;\n\n let clientResponses = [];\n\n // 2. If there's a simple text response, add it to the queue.\n if (responseMessage.content) {\n clientResponses.push({\n type: \"message\",\n payload: responseMessage.content,\n });\n }\n\n // 3. If the model wants to call tools, execute them.\n if (toolCalls) {\n // We'll send the tool call message back to the history for context\n messages.push(responseMessage);\n\n for (const toolCall of toolCalls) {\n const functionName = toolCall.function.name;\n const functionArgs = JSON.parse(toolCall.function.arguments);\n let functionResponse;\n\n if (functionName === \"render_ui_component\") {\n const { task_description, data } = functionArgs;\n clientResponses.push({\n type: \"message\",\n payload:\n `OK, I'm building a UI component to show you: ${task_description}`,\n });\n const code = await generate_ui_code(task_description, data);\n // This tool's result is sent directly to the client to execute\n clientResponses.push({ type: \"code\", payload: { ...code, data } });\n functionResponse = {\n success: true,\n message:\n \"UI component code was generated and sent to the client for rendering.\",\n };\n } else if (functionName === \"get_current_events\") {\n clientResponses.push({\n type: \"message\",\n payload: `Getting the latest news on \"${functionArgs.topic}\"...`,\n });\n functionResponse = get_current_events(functionArgs.topic);\n } else if (functionName === \"generate_talking_points\") {\n clientResponses.push({\n type: \"message\",\n payload:\n `Drafting some talking points about \"${functionArgs.subject}\"...`,\n });\n functionResponse = await generate_talking_points(\n functionArgs.subject,\n functionArgs.context,\n );\n }\n\n // Add the function's result back to the conversation history for the *next* turn\n messages.push({\n tool_call_id: toolCall.id,\n role: \"tool\" as const,\n name: functionName,\n content: JSON.stringify(functionResponse),\n });\n }\n\n // 4. After executing tools, let the model process the results\n const secondResponse = await openai.chat.completions.create({\n model: \"gpt-4o\",\n messages: [\n { role: \"system\", content: CAMPY_SYSTEM_PROMPT },\n ...messages,\n ],\n });\n\n const finalMessage = secondResponse.choices[0].message.content;\n if (finalMessage) {\n clientResponses.push({ type: \"message\", payload: finalMessage });\n }\n }\n\n return new Response(\n JSON.stringify({\n responses: clientResponses,\n // The final state of the assistant's turn to be added to history\n assistant_response: response.choices[0].message,\n }),\n {\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n }\n\n // Handle initial GET request to load the page\n return new Response(generateHtml(req.url), {\n headers: { \"Content-Type\": \"text/html\" },\n });\n}","2025-08-26T20:59:24.597Z","campy","https://www.val.town/x/join/campy/code/","join",[329,331,333,334,335],{"_127":220,"_129":330,"_131":22},"import { OpenAI } from \"https://esm.town/v/std/openai?v=4\";",{"_127":223,"_129":332,"_131":22},"// @ts-ignore",{"_127":128,"_129":224,"_131":138},{"_127":133,"_129":72,"_131":22},{"_127":136,"_129":336,"_131":22},"// --- AI & TOOL DEFINITIONS ---","projectResults",[339],{"_104":340,"_106":341,"_110":342,"_120":343,"_122":-5,"_123":-5,"_344":-5,"_114":345,"_346":347,"_348":220},"d3982b64-25f1-11f0-ad23-569c3dd06744","https://www.val.town/x/stevekrouse/plotLinkeDOMSRRExample/code/","plotLinkeDOMSRRExample","stevekrouse","forked_branch_id","2024-06-11T18:00:08.306Z","user_id","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18","matchCount","userResults",[],"docResults",[353],{"_106":354,"_112":355,"_356":357,"_358":359,"_366":367,"_386":387,"_393":394,"_395":396,"_397":398,"_399":400,"_401":402},"https://docs.val.town/guides/web-scraping/","Web scraping. Copy page Copy page. Copy this page as Markdown for LLMs. View as Markdown View this page as plain text. Open in ChatGPT Ask questions about this page. You can use vals to scrape websites, either by fetching HTML and using a parsing library, or by making an API call to an external service that runs a headless browser for you. Locate the HTML element that contains the data you need. Section titled “Locate the HTML element that contains the data you need” Right click on the section of a website that contains the data you want to fetch and then inspect the element. In Chrome, the option is called Inspect and it highlights the HTML element in the Chrome DevTools panel. For example, to scrape the introduction paragraph of the OpenAI page on Wikipedia, inspect the first word of the first paragraph. In the Elements tab, look for the the data you need and right click the parent element and choose Copy selector to get the CSS selector: #mw-content-text > div.mw-parser-output > p:nth-child(7). If you know a little CSS, it’s better to write your own selector by hand to make it more generic. This can make the selector less vulnerable to the website being updated and, e.g., class names changing. In this case, you can use p:nth-of-type(2). Optionally, use document.querySelector in the Console to check your CSS selector is correct. Parsing HTML. Section titled “Parsing HTML” The OpenAI page on Wikipedia is rendered on the server and arrives as a complete HTML document. This makes it a good fit for cheerio which parses HTML markup and provides an API for traversing/manipulating the resulting data structure. We also recommend node-html-parser and linkedom. ExampleRun in Val Town ↗ import { fetchText } from \"https://esm.town/v/stevekrouse/fetchText?v=6\"; import { load } from \"npm:cheerio\"; const html = await fetchText(\"https://en.wikipedia.org/wiki/OpenAI\"); const $ = load(html); // Cheerio accepts a CSS selector, here we pick the second

Search

Docs1

Docs
1