Live programming @ University of Washington
viewof update_button = {
const button = html`<button></button>`
button.textContent = 'Re-tag'
button.onclick = async () => {
mutable processing = true
mutable output = await retagUpdate(old_annotated_file, updated_file, "★")
// appendHistory({
// output,
// model,
// example,
// old_file: examples[example][0],
// new_file: examples[example][1],
// prompt_name,
// prompt
// })
mutable updated_file_with_highlights = mutable output.out
mutable processing = false
}
return button
}
viewof harder_button = {
const button = html`<button></button>`
button.textContent = 'Make it harder'
button.onclick = async () => {
mutable processing = true
set(viewof updated_file, JSON.parse((await openai.chat.completions.create({
messages: [
{
role: "system",
content: "You are a helpful assistant designed to output JSON.",
},
{ role: "user", content: `Change all the variable names, add comments, replace for with foreach, and make sure to change the order of function definitons in the code in this program to make it look different, but do not change any logic or functionality. Your solution must break any text similarity-based comparison with this program. Respond with an object in the form { code: <your code> }.
${updated_file}`}
],
model: "gpt-4-0125-preview",
response_format: { type: "json_object" },
seed: 42
})).choices[0].message.content).code)
// mutable updated_file_with_highlights = mutable output.out
mutable processing = false
}
return button
}
viewof pseudo_button = {
const button = html`<button></button>`
button.textContent = 'Make it psuedocode'
button.onclick = async () => {
mutable processing = true
set(viewof updated_file, JSON.parse((await openai.chat.completions.create({
messages: [
{
role: "system",
content: "You are a helpful assistant designed to output JSON.",
},
{ role: "user", content: `Change all the variable names and rewrite this program as equivalent concise English pseudocode that is semantically equivalent but has minimal textual similarity to this program. Your solution must break any text similarity-based comparison with this program. Respond with an object in the form { code: <your pseudocode> }.
${updated_file}`}
],
model: "gpt-4-0125-preview",
response_format: { type: "json_object" },
seed: 42
})).choices[0].message.content).code)
// mutable updated_file_with_highlights = mutable output.out
mutable processing = false
}
return button
}
//out = (await retagUpdate(train[0].codeWithSnippetDelimited, train[0].updatedCodeWithSnippetDelimited.replaceAll("★", ''), "★"))//, updatedCodeWithoutDelimiters, "★")
import {set} from "@observablehq/synchronized-inputs"
import {retagUpdate} from "@elmisback/magic-markup-retag"
train
viewof update_diff = diff(updated_file, updated_file_with_highlights)
{ // reset when input boxes are touched
updated_file, old_annotated_file;
mutable updated_file_with_highlights = 'Click Re-tag button'
}
mutable updated_file_with_highlights = "Click Re-tag button"
default_old_file_with_annotation = "const cart = [];\n\nfunction addItem(item) {\n cart.push(item);\n}\n\nfunction removeItem(itemName) {\n const index = cart.findIndex(item => item.name === itemName);\n if (index !== -1) {\n cart.splice(index, 1);\n }\n}\n\nfunction calculateTotalPrice() {\n let totalPrice = 0;\n for (let item of cart) {\n totalPrice += ★item.price★;\n }\n return totalPrice;\n}\n\nfunction viewCart() {\n for (let item of cart) {\n console.log(`Item: ${item.name}, Price: ${item.price}`);\n }\n}\n\n// Test the functionality\nconst item1 = { name: 'Apple', price: 0.5 };\nconst item2 = { name: 'Banana', price: 0.25 };\n\naddItem(item1);\naddItem(item2);\nviewCart(); // Output: Item: Apple, Price: 0.5\n // Item: Banana, Price: 0.25\n\nremoveItem('Apple');\nviewCart(); // Output: Item: Banana, Price: 0.25\n\nconsole.log(`Total Price: ${calculateTotalPrice()}`); // Output: Total Price: 0.25"
default_updated_file = "const cart = [];\n\nfunction addItem(item) {\n cart.push(item);\n}\n\nfunction removeItem(itemName) {\n const index = cart.findIndex(item => item.name === itemName);\n if (index !== -1) {\n cart.splice(index, 1);\n }\n}\n\nfunction calculateTotalPrice() {\n let totalPrice = 0;\n for (let item of cart) {\n totalPrice += item.price * item.quantity; // Updated to multiply by the quantity\n }\n return totalPrice;\n}\n\nfunction viewCart() {\n for (let item of cart) {\n console.log(`Item: ${item.name}, Price: ${item.price}, Quantity: ${item.quantity}`); // Updated to display the quantity\n }\n}\n\n// Test the functionality\nconst item1 = { name: 'Apple', price: 0.5, quantity: 2 }; // Added quantity property\nconst item2 = { name: 'Banana', price: 0.25, quantity: 3 }; // Added quantity property\n\naddItem(item1);\naddItem(item2);\nviewCart(); // Output: Item: Apple, Price: 0.5, Quantity: 2\n // Item: Banana, Price: 0.25, Quantity: 3\n\nremoveItem('Apple');\nviewCart(); // Output: Item: Banana, Price: 0.25, Quantity: 3\n\nconsole.log(`Total Price: ${calculateTotalPrice()}`); // Output: Total Price: 0.75"
import {train} from "@elmisback/tagged-code-updates-benchmark"
mutable processing = false
import { CodeMirror, myDefaultTheme } from '@andy0130tw/codemirror'
import {secret} from "@tmcw/secret"
import {diff} from "@jobleonard/diff-tool"
import {view} from '@tomlarkworthy/view'
import {copy, asyncCopy} from '@ryanseddon/copy'
openai = new OpenAI({
apiKey: OPENAI_API_KEY,
dangerouslyAllowBrowser: true
})
OpenAI = (await import("https://esm.sh/openai@4.19.0")).OpenAI
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.