31:T19fe,observable_js_skill = ({ prompt: "Explain the Observablehq programming model", time: 1700163368139 } && html`

Observable Programming Skill

${md` The JavaScript dialect used in Observable notebooks is almost—but not entirely—vanilla. This is intentional: by building on the native language of the web, Observable is familiar. And you can use the libraries you know and love, such as D3, Lodash, and Apache Arrow. Yet for dataflow, Observable needed to change JavaScript in a few ways. > **Note** > Observable JavaScript is used in notebooks only. Observable Framework uses vanilla JavaScript. Here's a quick overview of what's different from vanilla. ## Cells are Separate Scripts Each cell in a notebook is a separate script that runs independently. A syntax error in one cell won't prevent other cells from running. ~~~javascript // Example of a syntax error in a cell This is English, not JavaScript. ~~~ ~~~javascript // Example of a valid cell assignment myCell = "some string" ~~~ ~~~javascript // Example of a runtime error in a cell { throw new Error("oopsie"); } ~~~ Even if one cell has a syntax or runtime error, it does not affect the execution of other cells. Local variables are only visible to the cell that defines them. For example: ~~~javascript // Defining a local variable in one cell { const local = "I am a local variable."; } ~~~ ~~~javascript // Attempting to use the local variable in another cell local // not defined ~~~ The second cell above will cause a runtime error because \`local\` is not defined in that cell's scope. ## Cells Run in Topological Order In vanilla JavaScript, code runs from top to bottom. Not so here; Observable runs like a spreadsheet, so you can define your cells in whatever order makes sense. ~~~javascript // Using a variable defined in a later cell a + 2 // a is defined below ~~~ ~~~javascript // Defining the variable 'a' a = 1 ~~~ You can define cells in any order you like. Here, \`a\` is successfully used as a variable in the cell before it is defined. However, circular definitions are not allowed: ~~~javascript // Circular reference causing an error c1 = c2 - 1 c2 = c1 + 1 ~~~ Both \`c1\` and \`c2\` will throw a runtime error due to circular definition. ## Cells Re-run When Any Referenced Cell Changes You don't have to run cells explicitly when you edit or interact—the notebook updates automatically. If a cell allocates resources that won't be automatically cleaned up by the garbage collector, such as an animation loop or event listener, use the \`invalidation\` promise to dispose of these resources manually and avoid leaks. ~~~javascript // Using the invalidation promise for cleanup { invalidation.then(() => console.log("I was invalidated.")); } ~~~ ## Cells Implicitly Await Promises Cells can contain promises, and referencing cells will implicitly wait for these promises to resolve before running: ~~~javascript // Defining a cell with a promise hello = new Promise(resolve => { setTimeout(() => { resolve("hello there"); }, 30000); }) ~~~ Referencing cells will wait for \`hello\` to resolve before they execute. ## Cells Implicitly Iterate Over Generators If a cell yields, any referencing cell will see the most recently yielded value. ~~~javascript // Using a generator with yield statements c = { yield 1; yield 2; yield 3; } ~~~ ~~~javascript // Referencing the generator cell c ~~~ Referencing \`c\` will return the most recently yielded value, which in this example would be \`3\`. ## Named Cells are Declarations, Not Assignments Named cells look like, and function almost like, assignment expressions in vanilla JavaScript. But cells can be defined in any order, so think of them as hoisted function declarations. ~~~javascript // Trying to reassign a cell's value foo = 2 { foo = 3 } // SyntaxError: Assignment to constant variable foo ~~~ Cell names must also be unique, and you cannot reassign the value of another cell without using \`mutable\` variables. ## Statements Need Curly Braces, and Return or Yield A cell body can be a simple expression, such as a number or string literal, or a function call. But for statements like loops, you'll need curly braces and a \`return\` statement to give the cell a value. ~~~javascript // Using a block statement with a return { let sum = 0; for (let i = 0; i < 10; ++i) { sum += i; } return sum; } // Output: 45 ~~~ ## Object Literals Need Parentheses or Return Wrap object literals in parentheses or use a block statement with a \`return\` to ensure they are interpreted correctly. ~~~javascript // Correctly defining object literals object = ({ foo: "bar" }) block = { return { foo: "bar" }; } ~~~ Without parentheses or \`return\`, the cell would interpret the object literal incorrectly, leading to undefined behavior. ~~~javascript // Incorrectly defining an object literal label = { foo: "bar" } // Output: undefined ~~~ ## Cells Can Be Views Observable has a special \`viewof\` operator which lets you define interactive values. A view is a cell with two faces: its user interface, and its programmatic value. ~~~javascript // Using viewof to create an interactive text input viewof text = html\`\` // Accessing the value of 'text' text // Output: "edit me" ~~~ ## Cells Can Be Mutables Observable provides the \`mutable\` operator so you can opt into mutable state: ~~~javascript // Defining and using a mutable variable mutable thing = 0 // Mutating the value of \'thing\' ++mutable thing // Output: 1 ~~~ ## Observable Has a Standard Library Observable provides a small standard library for essential features, such as a reactive width and Inputs. ## Cells Can Be Imported from Other Notebooks You can import any named cell from any Obserable notebooks, with syntax similar to static ES imports. ~~~javascript // Importing the 'ramp' function from another notebook import { ramp } from "@mbostock/ramp" // Using the imported 'ramp' function ramp(d3.interpolateBrBG) ~~~ ## Static ES Imports Are Not Supported; Use Dynamic Imports You cannot use normal static ES imports. To use the vanilla JS ecosystem, dynamically import modules from\`esm.sh\` or \`skypack\`. ~~~javascript // Dynamically importing lodash _ = import("https://cdn.skypack.dev/lodash-es@4") // Using lodash function _.camelCase("lodash was here") // Output: "lodashWasHere" ~~~ This completes the overview of Observable's programming model, including specific behaviors and differences from standard JavaScript, emphasizing interactivity, reactivity, and cell independence. `}

`)32:T519,markdown_skill = ({ prompt: "Write a markdown skill cell", time: 1699719020249, comment: "Complex markdown skill cell" } && md` ## Markdown Skill This demonstrates advanced usage of markdown \`md\` literal

example

${md`## Mermaid Diagram ${mermaid` graph TB; A-->B; A-->C; B-->D; C-->D; `} ## Live JavaScript Execution ${(function () { const span = htl.html``; let count = 0; span.textContent = count; setInterval(() => { count++; span.textContent = count; }, 1000); return span; })()} ## KaTeX The quadratic formula is ${tex`x = {-b \pm \sqrt{b^2-4ac} \over 2a}`} ${tex` \begin{aligned} (a+b)^2 &= (a+b)(a+b) \\ &= a^2 + 2ab + b^2 \end{aligned} `} ## Details/Summary

Expandable content

${md` - Item 1 - Item 2 - Item 3 `}

## HTML Figure

Figure: Endpoint Services. Click to visit the Roboco-op subreddit.

## Blocks \`Backticks\` need to be escaped, it is easier to use ~ instead ~~~js () => throw Error() ~~~ `}

`)33:T798,viewof observable_ui_skill = ({ prompt: "Document example cells of Observable Inputs as UI components but hide them rendering", time: 1700262095526 } && Inputs.form({ myText: Inputs.text({ label: "Text Input", placeholder: "Enter some text", value: "hi!" }), myTextarea: Inputs.textarea({ label: "Textarea Input", rows: 3, placeholder: "Enter multiple lines of text" }), myRange: Inputs.range([0, 100], { label: "Range Input", step: 1, value: 50 }), mySelect: Inputs.select( new Map([ ["Short", 8], ["Tall", 12], ["Grande", 16], ["Venti", 20] ]), { value: 12, label: "Size", format: ([name, value]) => name + " " + value + "oz" } ), myRadio: Inputs.radio(["Option A", "Option B", "Option C"], { label: "Radio Input" }), myButton: Inputs.button("Click Me", { title: "Button Input" }), mySearch: Inputs.search(["Item 1", "Item 2", "Item 3"], { placeholder: "Search here" }), myTable: Inputs.table( [ { column1: "Row 1", column2: "Data 1" }, { column1: "Row 2", column2: "Data 2" } ], { label: "Table Input" } ), myFile: Inputs.file({ label: "File Input" }), myColor: Inputs.color({ label: "Color Input", value: "#ff0000" }), myDate: Inputs.date({ label: "Date Input" }), myObjectForm: Inputs.form({ r: Inputs.range([0, 255], { step: 1, label: "r" }), g: Inputs.range([0, 255], { step: 1, label: "g" }), b: Inputs.range([0, 255], { step: 1, label: "b" }) }), myArrayForm: Inputs.form([ Inputs.range([0, 255], { step: 1, label: "r" }), Inputs.range([0, 255], { step: 1, label: "g" }), Inputs.range([0, 255], { step: 1, label: "b" }) ]) }) && md`## Observable Inputs UI Skill UI components in notebooks `)34:Tbe9,viewof bindableUISkill = ({ prompt: "Demonstrate how to use the bidirection bindable UI composer, the view literal", time: 1700263368139, comment: "Binding inputs, composing within HTML and accessing via a viewof" } && view`

${md` ## Styled View UI Skill ~~~js import {view} from '@tomlarkworthy/view' // required notebook import for bindable UI ~~~ The view literal can compose bidirectional HTML UIs, whose value can be written to and the UI will visually update. They can decorated views with HTML. `}

example

Text Input

${[ "textInput", Inputs.text({ placeholder: "Type something...", value: "Hello World!" }) ]}

Select Input

${[ "selectInput", Inputs.select(["Option 1", "Option 2", "Option 3"], { value: "Option 2", label: "Choose an option" }) ]}

Input Arrays

${[ "array", Array.from({ length: 3 }, (_, i) => Inputs.text({ placeholder: `Input ${i + 1}` }) ), (value) => Inputs.text({ value: value }) ]}

Button Action

${[ "buttonAction", htl.html`

Radio Input

${[ "radioInput", Inputs.radio(["Choice A", "Choice B", "Choice C"], { value: "Choice B", label: "Pick one" }) ]}

Checkbox Input

${[ "checkboxInput", Inputs.checkbox(["Check 1", "Check 2"], { values: ["Check 1"], label: "Select checks" }) ]}

`)35:[{"id":"7937434e7ffba2538979e250764442e70c5763920c108ee19dae9c6843e2e5c55b65443266ff1ee2aef112f6f286cc08992ad889f08250caee4c017616102362","href":"https://static.observableusercontent.com/files/7937434e7ffba2538979e250764442e70c5763920c108ee19dae9c6843e2e5c55b65443266ff1ee2aef112f6f286cc08992ad889f08250caee4c017616102362","name":"DALL·E 2023-11-18 17.33.23 - A human and a robot, arm in arm, standing in front of a magnificent neon-lit tech tree. The scene conveys a sense of partnership and contemplation, as.png","type":"image/png","lastModified":1700325288985.957,"size":567868}] 2f:{"title":"Roboco-op Skills","cells":[{"id":2534,"value":"$${await FileAttachment(\"DALL·E 2023-11-18 17.33.23 - A human and a robot, arm in arm, standing in front of a magnificent neon-lit tech tree. The scene conveys a sense of partnership and contemplation, as.png\").image({style: \"float: right; padding: 10px; width: 300px\"})}\n\n\n# Roboco-op Skills\n\nCopy and paste skills into a [roboco-op](https://observablehq.com/@tomlarkworthy/robocoop) notebook to level-up your LLM, start a new notebook from a [blank slate](https://observablehq.com/@tomlarkworthy/robocoop-blank-slate)\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":2761,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2695,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2807,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":2434,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":2525,"value":"import { view } from \"@tomlarkworthy/view\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2712,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":81,"value":"viewof prompt","pinned":false,"hidden":false,"mode":"ojs"},{"id":2852,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1014,"value":"Inputs.button(\"copy code\", {\n reduce: () => {\n navigator.clipboard.writeText(suggestion);\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"viewof suggestion","pinned":false,"hidden":false,"mode":"ojs"},{"id":1463,"value":"## Current Chat context","pinned":false,"hidden":false,"mode":"md"},{"id":1252,"value":"viewof context_viz","pinned":false,"hidden":false,"mode":"ojs"},{"id":1470,"value":"tick the cells to include in the next prompt","pinned":false,"hidden":false,"mode":"md"},{"id":1473,"value":"viewof feedback_cells_selector","pinned":false,"hidden":false,"mode":"ojs"},{"id":1542,"value":"feedback_prompt","pinned":false,"hidden":false,"mode":"ojs"},{"id":1692,"value":"### AI Settings","pinned":false,"hidden":false,"mode":"md"},{"id":29,"value":"viewof OPENAI_API_KEY","pinned":false,"hidden":false,"mode":"ojs"},{"id":2061,"value":"viewof api_endpoint","pinned":false,"hidden":false,"mode":"ojs"},{"id":2163,"value":"viewof settings","pinned":false,"hidden":false,"mode":"ojs"},{"id":2193,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":2114,"value":"import {\n ask,\n excludes,\n cells,\n update_context,\n on_prompt,\n api_call_response,\n viewof reset,\n mutable context,\n viewof prompt,\n viewof suggestion,\n viewof settings,\n viewof OPENAI_API_KEY,\n viewof api_endpoint,\n feedback_prompt,\n viewof feedback_cells_selector,\n viewof context_viz\n} from \"@tomlarkworthy/robocoop\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2179,"value":"workers = {\n update_context;\n on_prompt;\n return api_call_response;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}