Live programming @ University of Washington
Public
Edited
Mar 5, 2024
1 fork
Importers
diff(updated_file, updated_file_with_highlights)
diff(old_annotated_file, updated_file_with_highlights)
html`Copy full prompt ${copy(prompt)}`
diff(prompts['highlight'], prompts['naive'])
prompts = ({
naive: (old_annotated_file, updated_file) => `Consider the task of annotation updating. Look at the following old annotated file, then copy the annotations to the updated version of the file below it. In this case, annotations are represented by numbered opening and closing tags, like <1> </1>. Your response should be only the updated file with annotations transferred to analogous positions.
OLD ANNOTATED FILE:
${old_annotated_file}
END OLD ANNOTATED FILE
UPDATED FILE:
${updated_file}
END UPDATED FILE
Write your answer below. Again, your response should be only the updated file with annotations transferred to analogous positions. Do not include "END UPDATED FILE" or similar in your response.
`,
highlight: (old_annotated_file, updated_file) => `Consider the task of annotation updating.
You will be shown an old annotated file with a section highlighted and a newer version of the file without the highlight applied. Your task will be to copy the highlight to the updated version of the file. In this case, highlights are represented by numbered opening and closing tags, like <1> </1>. Your response should be only the updated file with highlights included.
OLD ANNOTATED FILE:
${old_annotated_file}
END OLD ANNOTATED FILE
UPDATED FILE:
${updated_file}
END UPDATED FILE
Write your answer below. Again, your response should be only the updated file with highlights included. Do not include "END UPDATED FILE" or similar in your response.
`,
highlight2: (old_annotated_file, updated_file) => `Consider the task of annotation updating.
You will be shown an old annotated file with a section highlighted and a newer version of the file without the highlight applied. Your task will be to copy the highlight to the updated version of the file. In this case, highlights are represented by numbered opening and closing tags, like <1> </1>. Your response should be only the updated file with highlights included.
If the file has been edited, the highlight must move to continue to surround the section it reasonably applies to.
OLD ANNOTATED FILE:
${old_annotated_file}
END OLD ANNOTATED FILE
UPDATED FILE:
${updated_file}
END UPDATED FILE
Write your answer below. Again, your response should be only the updated file with highlights included. Do not include "END UPDATED FILE" or similar in your response.
`,
by_example: (old_annotated_file, updated_file) => `Given an old file with some tags marking a highlight, when the file is updated, we can copy out a new properly tagged file like so:
<OLD TAGGED>
<1>Lorem ipsum dolor sit amet</1>, consectetur adipiscing elit, sed...
</OLD TAGGED>
<NEW UNTAGGED>
Lom *ipsum* dolr sitAMETerf0nsec-tetur adipiscing elit, sed...
</NEW UNTAGGED>
<NEW TAGGED>
<1>Lom *ipsum* dolr sitAMET</1>erf0nsec-tetur adipiscing elit, sed...
</NEW TAGGED>
Now, re-tag the following file:
<OLD TAGGED>
${old_annotated_file}
</OLD TAGGED>
<NEW UNTAGGED>
${updated_file}
</NEW UNTAGGED>
Write your answer below. Again, your response should be only the updated file with highlight tags included. Do not include <NEW TAGGED> or </NEW TAGGED> in your response.
`,
highlight_star: (old_annotated_file, updated_file) => `Consider the task of annotation updating.
You will be shown an old annotated file with a section highlighted and a newer version of the file without the highlight applied. Your task will be to copy the highlight to the updated version of the file. In this case, highlights are represented by 2 star characters, like so: ★highlighted text★. Your response should be only the updated file with highlights included.
OLD ANNOTATED FILE:
${old_annotated_file}
END OLD ANNOTATED FILE
UPDATED FILE:
${updated_file}
END UPDATED FILE
Write your answer below. Again, your response should be only the updated file with highlights included. Do not include "END UPDATED FILE" or similar in your response. Your response should be a character-for-character match with the UPDATED FILE, except for the additional 2 characters for highlights.
`
})
{
updated_file, model, prompt, example
mutable updated_file_with_highlights = 'Click Update button'
}
prompt = prompts[prompt_name](old_annotated_file, updated_file)
mutable updated_file_with_highlights = null
getHistory()
// appendHistory({test: 'this is a test'})
// resetHistory()
JSON.parse(localStorage.getItem('reannotate-history'))
getHistory = () => JSON.parse(localStorage.getItem('reannotate-history')) || []
resetHistory = () => localStorage.setItem('reannotate-history', JSON.stringify([]))
appendHistory = o => {
const historyStr = localStorage.getItem('reannotate-history')
if (!historyStr) { localStorage.setItem('reannotate-history', JSON.stringify([])) }
const history = JSON.parse(localStorage.getItem('reannotate-history'))
history.push(o)
localStorage.setItem('reannotate-history', JSON.stringify(history))
}
localStorageArray = name => {
return ({
set: v => localStorage.setItem(name, JSON.stringify(v)),
get: () => JSON.parse(localStorage.getItem(name)) || [],
push: o => {
const historyStr = localStorage.getItem(name)
if (!historyStr) { localStorage.setItem(name, JSON.stringify([])) }
const history = JSON.parse(localStorage.getItem(name))
history.push(o)
localStorage.setItem(name, JSON.stringify(history))
},
pop: () => {
const history = JSON.parse(localStorage.getItem(name))
const item = history.pop()
localStorage.setItem(name, JSON.stringify(history))
return item
}
})
}
usageHistory = localStorageArray('usage-history')
expr = 'test'
lsv2 = name => ({
get [expr]() {
return JSON.parse(localStorage.getItem(name))[expr]
},
set [expr](val) {
const o = JSON.parse(localStorage.getItem(name))
o[expr] = val
localStorage.setItem(name, JSON.stringify(o))
}
})
testValue = localStorageValue('temp-test')
examples = ({
alphabet: ['abcd<1>fgh</1>ijkln', 'ABCDEFGHIJKLMN'],
alphabet_with_spaces: ['abcd <1>fg h</1> ijk ln', 'ABCD EFG H IJK LMN'],
alphabet_with_spaces_double: ['abcd <1>fg h</1> ijk ln', 'ABCD EFG H IJK LMN ABCD EFG H IJK LMN'],
Python: []
})
import { CodeMirror, myDefaultTheme } from '@andy0130tw/codemirror'
import {diff} from "@jobleonard/diff-tool"
// {
// update
// mutable updated_file_with_highlights = 'test'
// }
// {
// updated_file
// mutable updated_file_with_highlights = undefined
// }
// askChatGPT(prompt1)
// await openai.chat.completions.create({
// model: "gpt-3.5-turbo",
// messages: [
// {role: 'user', content: prompt1
// }
// ]
// })
import {copy, asyncCopy} from '@ryanseddon/copy'
import {secret} from "@tmcw/secret"
openai = new OpenAI({
apiKey: OPENAI_API_KEY,
dangerouslyAllowBrowser: true
})
OpenAI = (await import("https://esm.sh/openai@4.19.0")).OpenAI
import {md5} from '@elmisback/zero-import-md5-hash'
// test = {
// let completion = await openai.chat.completions.create({
// model: "gpt-3.5-turbo",
// messages: [
// //{ role: "system", content: "You are a helpful assistant." },
// { role: "user", content: "What is 2 times 2?" },
// // {
// // role: "assistant",
// // content: "4"
// // },
// // { role: "user", content: "What is 3 times 3?" }
// ]
// });
// console.log(completion.choices[0]);
// return completion;
// }
// test.choices[0].message.content
messages = [
//{ role: "system", content: "You are a helpful assistant." },
{ role: "user", content: prompt },
// {
// role: "assistant",
// content: "4"
// },
// { role: "user", content: "What is 3 times 3?" }
]
function getFirstChoice(completion) {
return completion.choices[0].message.content
}
async function getChatCompletion(model, messages) {
let completion = await openai.chat.completions.create({
model, //: "gpt-3.5-turbo",
messages
})
return completion;
}
//getChatCompletion([{role: 'user', content: prompt1}])
async function askChatGPT(prompt, model='gpt-3.5-turbo') {
const completion = await getChatCompletion(model, [{role: 'user', content: prompt}])
usageHistory.push({model: completion.model, usage: completion.usage})
return getFirstChoice(completion)
}
/*
TODO
Model may need fine-tune or introductory examples of how this process works, especially for covering corner cases.
* Test effect of structure of language on success
* Maybe in some places error is tolerated?
* Could it learn through examples?
* Probably should let the user help the model fit the domain
Things to do with the snippet
* Translate into English
* Execute
* Visualize
* Structured editing/Livelits
* Using AST/types would let you attach visualizations to particular branches
* Test different models
* would want to know what users "mean" by section
* what about one-to-many mappings (code duplication)
* Git 3-way-merge as baseline -- good as anecdote
*
* Gradient of change types
* insertions, deletions, movements, insertion in the highlight, broken code, stuff similar to highlight
* Needs a rationale for programmer experience
* Highlighting -- what is the use?
* Writing -- reviewer annotations -- reconciling after changes
*
* TODO https://platform.openai.com/docs/guides/text-generation/reproducible-outputs
*/
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.