2f:T625,viewof form = ({ prompt: 'use the already imported view literal to make reactive form which has\n\n2 tabs name "first", "second", which switch between two text areas called "a", "b" with placehoders "A", "B" and a single "submit" button at the bottom. Pressing submit should update the cell bound to the form. The result should be an object shaped {a:..., b:...} where the values map to the text area values.\n', time: 1699298358615, comment: "Create a reactive form with two tabs 'first' and 'second' switching between two text areas 'a' and 'b' with placeholders 'A' and 'B' and a submit button. On submit, it updates the cell bound to the form. The result will be an object shaped {a:..., b:...} where the values map to the text area values." } && cautious( (apply, reset) => view` { document.getElementById("firstContent").style.display = "block"; document.getElementById("secondContent").style.display = "none"; }}> First { document.getElementById("firstContent").style.display = "none"; document.getElementById("secondContent").style.display = "block"; }}> Second

${["a", Inputs.textarea({ placeholder: "A" })]}

` ))30:T4ad,demo_scene = { ({ prompt: "create a THREE cool demo scene using blob_url as a texture", time: 1699303031445, comment: "Creating a 3D scene with a rotating cube using three.js. The cube is textured with the blob URL of the hexbin heatmap SVG." }); const height = 500; // Create a scene const scene = new THREE.Scene(); // Create a camera const camera = new THREE.PerspectiveCamera(15, width / height, 0.1, 1000); camera.position.z = 5; // Create a renderer const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(width, height); // Create a cube const geometry = new THREE.BoxGeometry(1, 1, 1); const loader = new THREE.TextureLoader(); const material = new THREE.MeshBasicMaterial({ map: loader.load(blob_url) }); const cube = new THREE.Mesh(geometry, material); scene.add(cube); // Create an animation loop const animate = () => { cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render(scene, camera); requestAnimationFrame(animate); }; animate(); // Enable orbit controls const controls = new THREE.OrbitControls(camera, renderer.domElement); return renderer.domElement; }31:T4fb,relativity_derivation = ({ prompt: "Using the tex literal (KaTeX) intermingled with markdown, write a derivation of relativity.", time: 1699388874563, comment: "Derivation of relativity equation using KaTeX and markdown" } && md`The derivation of the relativity equation starts from the principle of relativity, which states that the laws of physics are the same in all inertial frames of reference. From this principle, we derive the Lorentz transformation, which describes how measurements of space and time by two observers moving relative to each other are related. The Lorentz transformation in one dimension is: ${tex` \begin{aligned} x' &= \gamma (x - vt) \\ t' &= \gamma \left(t - \frac{vx}{c^2}\right) \end{aligned} `} where: - ${tex`x'`} and ${tex`t'`} are the space and time coordinates measured by the observer moving with velocity ${tex`v`}, - ${tex`x`} and ${tex`t`} are the space and time coordinates measured by the observer at rest, - ${tex`gamma = \frac{1}{\sqrt{1 - v^2/c^2}}`} is the Lorentz factor, and - ${tex`c`} is the speed of light. From the Lorentz transformation, we can derive the famous equation of special relativity, which states that energy is equivalent to mass times the speed of light squared: ${tex`E = mc^2`} `)32:T66a,pong_game = { ({ prompt: "Create an automated retro looking game of pong", time: 1699389743848, comment: "Creating an automated retro-looking game of Pong" }); const canvas = document.createElement("canvas"); canvas.width = width; canvas.height = 200; const context = canvas.getContext("2d"); const ball = { x: width / 2, y: 20, dx: 3, dy: 2, radius: 15 }; const paddle = { x: 5, y: canvas.height / 2, width: 20, height: 60 }; const drawBall = () => { context.beginPath(); context.rect( ball.x, ball.y - ball.radius, ball.radius * 2, ball.radius * 2 ); context.fillStyle = "#FFFFFF"; context.fill(); context.closePath(); }; const drawPaddle = () => { context.beginPath(); context.rect(paddle.x, paddle.y, paddle.width, paddle.height); context.fillStyle = "#FFFFFF"; context.fill(); context.closePath(); }; const update = () => { context.fillStyle = "#000000"; context.fillRect(0, 0, canvas.width, canvas.height); drawBall(); drawPaddle(); if ( ball.x + ball.dx > canvas.width - ball.radius || ball.x + ball.dx < ball.radius + 10 ) { ball.dx = -ball.dx; } if (ball.y + ball.dy < ball.radius) { ball.dy = -ball.dy; } else if (ball.y + ball.dy > canvas.height - ball.radius) { if (ball.x > paddle.x && ball.x < paddle.x + paddle.width) { ball.dy = -ball.dy; } else { ball.dy = -ball.dy; } } ball.x += ball.dx; ball.y += ball.dy; paddle.y = ball.y - 30; }; const interval = setInterval(update, 10); return canvas; }33:T7fa,viewof settings = ({ prompt: '\nThe notebook contains:\n - cell "form" is Object {a: "", b: ""}\nUsing the already imported view literal for configuring a ChatGPT session. Example response \n\n{\n model: "gpt-3.5-turbo"\n temperature: 0.7\n max_tokens: 1000\n top_p: 1\n frequency_penalty: 0\n presence_penalty: 0\n}\n\nUse Inputs.select for model, Inputs.range for max_tokens etc.', time: 1699384189902, comment: "Creating a form to configure a ChatGPT session. The form includes a select input for model, and range inputs for temperature, max_tokens, top_p, frequency_penalty, and presence_penalty." } && Inputs.bind( view`

${[ "model", Inputs.select( [ "gpt-3.5-turbo-1106", "gpt-3.5-turbo", "gpt-3.5-turbo-0301", "gpt-3.5-turbo-0613", "gpt-3.5-turbo-16k", "gpt-3.5-turbo-16k-0613", "gpt-3.5-turbo-instruct", "gpt-3.5-turbo-instruct-0914", "gpt-4-1106-preview", "gpt-4", "gpt-4-32k", "gpt-4-0314", "gpt-4-0613" ].sort(), { label: "model" } ) ]}

${[ "temperature", Inputs.range([0, 1], { step: 0.1, value: 0.7, label: "temperature" }) ]}

${[ "max_tokens", Inputs.range([1, 4000], { value: 1000, label: "max_tokens" }) ]}

${[ "top_p", Inputs.range([0, 1], { step: 0.1, value: 1, label: "top_p" }) ]}

${[ "frequency_penalty", Inputs.range([0, 1], { step: 0.1, value: 0, label: "frequency_penalty" }) ]}

${[ "presence_penalty", Inputs.range([0, 1], { step: 0.1, value: 0, label: "presence_penalty" }) ]}

`, localStorageView("NOTEBOOK_WRITER", { defaultValue: { model: "gpt-3.5-turbo", temperature: 0.7, max_tokens: 1000, top_p: 1, frequency_penalty: 0, presence_penalty: 0 }, json: true }) ))34:T70b,find_prompt = ({ prompt: 'write a cell called find_prompt. Using acorn JS parser, search some JS code for the existence of an Object literal containing fields: "prompt", "time", "comment" and return that object.', time: 1699380798090, comment: "This function search for the existence of an object literal containing fields: 'prompt', 'time', 'comment' in an input JavaScript code using the acorn JS parser. It returns the found object." } && function findPrompt(code) { let ast; let fixed_code; try { fixed_code = "() => " + code; ast = acorn.parse(fixed_code, { ecmaVersion: 2020 }); } catch (e) {} try { fixed_code = "() => (" + code + ")"; ast = ast || acorn.parse(fixed_code, { ecmaVersion: 2020 }); } catch (e) {} function search(node) { if (node.type === "ObjectExpression") { const keys = node.properties.map((p) => p.key?.name); if ( keys.includes("prompt") && keys.includes("time") && keys.includes("comment") ) { const trimmed = fixed_code.slice(0, node.start) + "{}" + fixed_code.slice(node.end + 1); return [ Object.fromEntries( node.properties.map((p) => [p.key.name, p.value.value]) ), trimmed.startsWith("() => (") ? trimmed .substring(7, trimmed.length - 1) .replace("{}&&", "") .trim() : trimmed ]; } } for (const key in node) { if (node[key] && typeof node[key] === "object") { const found = search(node[key]); if (found) return found; } } } return search(ast) || [undefined, code]; })35:[{"id":"554f9a7e6fcfb7f595cb39ca424faa6057f8fc90af50c1b4284afc54012d2eb91e29bc5769de9aee787189eb3f88fca83557e44ca7c683114de6d14d77faec48","href":"https://static.observableusercontent.com/files/554f9a7e6fcfb7f595cb39ca424faa6057f8fc90af50c1b4284afc54012d2eb91e29bc5769de9aee787189eb3f88fca83557e44ca7c683114de6d14d77faec48","name":"DALL·E 2023-11-07 22@2.30.52 - A photo-realistic image of a cyborg with a sleek, metallic frame, detailed with a striking red visor, working alongside an engineer in a cluttered hig.png","type":"image/png","lastModified":1699423733550.943,"size":169252}] 2d:{"title":"Roboco-op: a computational blackboard for efficient human/AI collaboration","cells":[{"id":0,"value":"$${await FileAttachment(\"DALL·E 2023-11-07 22@2.30.52 - A photo-realistic image of a cyborg with a sleek, metallic frame, detailed with a striking red visor, working alongside an engineer in a cluttered hig.png\").image({style: \"float: right; padding: 10px\"})}\n\n# Roboco-op: a computational blackboard for efficient human/AI collaboration\n\nIn Roboco-op, a notebook cell is code, execution, a human prompt and an AI response **in a single unit of remixability**. The chat context is a summation over all the cells. You can edit _anything_ at _any_ time, in _any_ order **without losing state**. **The notebook _is_ the chat state**. The AI will build upon whatever curated knowledge base that has been laid out.","pinned":false,"hidden":false,"mode":"md"},{"id":1283,"value":"## Training\n\nThe following cells were generated by AI, but corrected by me. The aim of training is knowledge transfer from human to the AI.","pinned":false,"hidden":false,"mode":"md"},{"id":2005,"value":"example_markdown2 = ({\n prompt: \"Write an example markdown cell with two sentences separated by a space of one line.\",\n time: 1699221659348,\n comment: \"Example of a markdown cell\"\n} &&\n md` This is a markdown cell. You can use **bold**, _italic_, and [links](http://example.com).`)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1171,"value":"example_markdown = ({\n prompt: \"Write an example markdown cell\",\n time: 1699221659348,\n comment: \"Example of a markdown cell\"\n} &&\n md` This is a markdown cell. You can use **bold**, _italic_, and [links](http://example.com).`)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1312,"value":"hexbin_heatmap = ({\n prompt:\n 'Create a Hexbin heatmap of Olympic athletes aaccording to their weight and height which are filled with a color that encodes frequency. Use the inbuilt dataset \"olympians\" variable',\n time: 1699296536008,\n comment:\n \"Create a Hexbin heatmap of Olympic athletes according to their weight and height filled with a color that encodes frequency.\"\n} &&\n Plot.dot(\n olympians,\n Plot.hexbin({ fill: \"count\" }, { x: \"weight\", y: \"height\" })\n ).plot({ color: { scheme: \"YlGnBu\" } }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1445,"value":"blob_url = ({\n prompt: \"convert the hexbin_heatmap SVGElement to blob URL \",\n time: 1699302857881,\n comment: \"Convert the hexbin_heatmap SVGElement to blob URL\"\n} &&\n URL.createObjectURL(\n new Blob([new XMLSerializer().serializeToString(hexbin_heatmap)], {\n type: \"image/svg+xml\"\n })\n ))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1372,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":1375,"value":"form","pinned":true,"hidden":false,"mode":"ojs"},{"id":1400,"value":"THREE = ({\n prompt: \"Import threeJS with orbit controls as THREE\",\n time: 1699299731104,\n comment: \"Importing three.js with orbit controls as three\"\n} &&\n Promise.all([\n import(\"https://esm.sh/three\"),\n import(\"https://esm.sh/three/examples/jsm/controls/OrbitControls.js\")\n ]).then(([THREE, { OrbitControls }]) => ({ ...THREE, OrbitControls })))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1450,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":1897,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":1927,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":1617,"value":"## Prompt Interface","pinned":false,"hidden":false,"mode":"md"},{"id":81,"value":"viewof prompt = Inputs.textarea({\n placeholder: \"enter what you want to do, CMD + ENTER to submit\",\n rows: 10,\n minlength: 1,\n submit: true\n})","pinned":false,"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 = Inputs.textarea({\n rows: 50,\n disabled: true,\n value: formatted_instruction,\n style: \"height: 500px\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1463,"value":"## Current Chat context","pinned":false,"hidden":false,"mode":"md"},{"id":1252,"value":"viewof context_viz = Inputs.table(\n context.map((r) => ({\n role: r.role,\n content_or_function_call: r.content || r.function_call\n })),\n {\n format: {\n role: (role) =>\n html`${role}`,\n content_or_function_call: (f) =>\n f.arguments ? inspect(JSON.parse(f.arguments)) : f\n },\n layout: \"auto\",\n title: {\n combined: \"foo\"\n }\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1470,"value":"## Cell Values to Include\n\ntick cells to include in the next prompt","pinned":false,"hidden":false,"mode":"md"},{"id":1473,"value":"viewof feedback_cells_selector = Inputs.table(\n Object.entries(variables)\n .map(([name, v]) => ({\n name,\n value: inspect(v._value).innerText.trim()\n }))\n .filter((v) => v.name !== \"null\"),\n {\n layout: \"auto\",\n value: []\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1542,"value":"feedback_prompt = feedback_cells.length > 0\n ? `\nThe notebook contains:\n${feedback_cells\n .map((cell) => ` - cell \"${cell.name}\" is ${cell.value}\\n`)\n .join(\"\")}`\n : \"\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1692,"value":"### AI Settings","pinned":false,"hidden":false,"mode":"md"},{"id":29,"value":"viewof OPENAI_API_KEY = Inputs.bind(\n Inputs.password({\n label: \"OPENAI_API_KEY\",\n placeholder: \"paste openAI key here\"\n }),\n localStorageView(\"OPENAI_API_KEY\")\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1779,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"system_prompt = `\nI am programming an observablehq notebook. You are an inline tool. Our notebook is empty\n\nIf the question requires clarification, generate a markdown cell to express your questions.\n\nWhen a cell is updated I may respond with relevant outputs. \n\nEXAMPLES\n========\n\nupsert_cell({\n comment: \"import with dynamic ES6 module import\",\n cell_name: ,\n code: import()\n})\n\nupsert_cell({\n comment: \"Create SVG, must be wrapped in hypertext-literal\",\n cell_name: \"svg\",\n code: \"htl.html\\`