Public
Edited
Mar 22
14 forks
Importers
17 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// highlight(example_image)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
models = [
"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",
"gpt-4-turbo",
"gpt-4-turbo-2024-04-09",
"gpt-4-turbo-preview",
"gpt-4-vision-preview",
"gpt-4o",
"gpt-4o-mini",
"o1",
"o1-mini",
"o1-preview",
"o3-mini"
]
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
system_prompt = `
You are a notebook programming assistent for Observablehq notebook. You respond in XML formatted observable notebook cells only.

If a question requires clarification, you can generate a markdown cell writing your question.


EXAMPLES
========

user:
import <LIBRARY>

assistant:
<cell>
<deps></deps>
import("https://esm.sh/<LIBRARY>@2.5.0")
</cell>

user:
create an SVG element

assistant:
<cell>
<deps>htl</deps>
htl.html\`<svg>\`
</cell>

user:
create an UI for temperate variable from -10 to 10

assistant:
<cell>
<deps>Inputs</deps>
viewof temperature = Inputs.range([-10, 10], {label: "set the temperature"})
</cell>

user:
create a 1 second counter

assistant:
<cell>
<deps></deps>
mutable counterIndirect = 0
</cell>
<cell>
<deps>mutable counterIndirect</deps>
mutable counter = {
let i = 0;
while (i < 100) {
mutable counterIndirect = i;
yield Promises.delay(500, ++i);
}
yield i;
}
</cell>

user:
Tell me a joke
assistant:
<cell>
<deps>md</deps>
md\`Why did the chicken cross the road?... to get to the other side\`
</cell>
`
Insert cell
Insert cell
background_tasks = {
submit_summary;
find_context_extensions;
on_prompt;
context_updater;
api_call_response;
}
Insert cell
Insert cell
formatted_instruction = {
if (response.action == "upsert_cells") {
return response.cells.map((r) => r.code).join("\n\n");
}
return response.content;
}
Insert cell
response = on_prompt
Insert cell
on_prompt = {
const extension_context_now = await extension_context({
question: prompt
});
viewof extension_context_previous.value = extension_context_now;
viewof extension_context_previous.dispatchEvent(new Event("input"));
const payload = [
...extension_context_now,
...mutable context,
{
role: "user",
content: prompt
}
];
console.log("on_prompt", payload);
return viewof ask.send(payload);
}
Insert cell
Insert cell
Insert cell
Insert cell
extension_context = async ({ question }) => {
const context = [];
await Promise.all(
[...viewof context_extensions.value].map((fn) => fn({ question, context }))
);
return context;
}
Insert cell
Insert cell
Insert cell
testContext
Insert cell
Insert cell
Insert cell
cells = Promise.all(
[...modules.entries()].map(async ([m, mInfo]) => ({
...mInfo,
cells: await cellMap(m)
}))
)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
highlight_context = Object.entries(code)
.flatMap(([k, cell]) =>
cell.variables[0]._value && cell.variables[0]._value.robocoop
? [
{
cell: cell,
robocoop: cell.variables[0]._value.robocoop
}
]
: []
)
.map(({ cell, robocoop }) =>
robocoop.type === "json"
? {
role: "user",
content: `
The cell \`${cell.cell_name}\` defined as
~~~json
${cell.code}
~~~
evaluated to
~~~${robocoop.type}
${robocoop.value}
~~~
`
}
: {
role: "user",
content: [
{
type: "text",
text: `The cell \`${cell.cell_name}\` defined as
~~~json
${cell.code}
~~~
is an image
`
},
{
type: "image_url",
image_url: {
url: robocoop.value
}
}
]
}
)
Insert cell
Insert cell
Insert cell
Insert cell
excludes = new Set([
...descendants(lookupVariable("mutable context", thisModule)),
...descendants(lookupVariable("viewof prompt", thisModule))
])
Insert cell
mainVariables = [...allVariables].filter((v) => v._module === main)
Insert cell
viewof allVariables = variables(runtime)
Insert cell
Insert cell
Insert cell
viewof history = Inputs.input([])
Insert cell
Insert cell
Insert cell
viewof ask = flowQueue({ timeout_ms: 180000 })
Insert cell
console.log("Ask", ask)
Insert cell
prompt_messages = [
{
role: viewof settings.value.model.startsWith("o1") ? "user" : "system",
content: system_prompt
},
...ask
]
Insert cell
token_analytics = ({
prompt: prompt_messages,
prompt_tokens: prompt_messages.map(
(p) => (p.content || JSON.stringify(p.function_call)).length / 5
)
})
Insert cell
trimmed_prompt = {
console.log("token_analytics", token_analytics);
while (d3.sum(token_analytics.prompt_tokens) > settings.max_prompt_tokens) {
token_analytics.prompt.splice(1, 1);
token_analytics.prompt_tokens.splice(1, 1);
}
console.log("trimmed_prompt", token_analytics);
return token_analytics;
}
Insert cell
modelConfig = (model) => {
if (model.startsWith("claude"))
return {
model: model,
type: "chat",
api: "https://api.anthropic.com/v1/messages",
roles: ["user", "assistant"],
settings: {
temperature: 0.7,
max_tokens: viewof settings.value.max_prompt_tokens,
top_p: 1
},
headers: () => ({
"x-api-key": ANTHROPIC_API_KEY,
"anthropic-version": "2023-06-01",
"anthropic-dangerous-direct-browser-access": "true"
})
};
else if (model.startsWith("dall-e")) {
return {
model: model,
type: "image",
api: "https://api.openai.com/v1/images/generations",
settings: {
n: 1,
size: "1024x1024",
quality: "standard"
},
headers: () => ({
Authorization: `Bearer ${OPENAI_API_KEY}`
})
};
} else if (
model == "o1-mini" ||
model == "o1-preview" ||
model == "o3-mini"
) {
return {
type: "chat",
api: "https://api.openai.com/v1/chat/completions",
roles: ["user", "assistant"],
settings: {
model: model,
temperature: 1,
max_completion_tokens: viewof settings.value.max_tokens,
top_p: 1,
frequency_penalty: 0,
presence_penalty: 0
// response_format: { type: "json_object" }
},
headers: () => ({
Authorization: `Bearer ${OPENAI_API_KEY}`
})
};
} else if (model == "o1") {
return {
api: "https://api.openai.com/v1/chat/completions",
type: "chat",
roles: ["user", "system", "assistant"],
settings: {
//functions: functions,
//function_call: { name: "upsert_cell" },
model: model,
temperature: 1,
max_completion_tokens: viewof settings.value.max_prompt_tokens,
top_p: 1,
frequency_penalty: 0,
presence_penalty: 0
},
headers: () => ({
Authorization: `Bearer ${OPENAI_API_KEY}`
})
};
} else {
return {
api: "https://api.openai.com/v1/chat/completions",
type: "chat",
roles: ["user", "system", "assistant"],
settings: {
//functions: functions,
//function_call: { name: "upsert_cell" },
model: model,
temperature: viewof settings.value.temperature,
max_tokens: viewof settings.value.max_prompt_tokens,
top_p: 1,
frequency_penalty: 0,
presence_penalty: 0
},
headers: () => ({
Authorization: `Bearer ${OPENAI_API_KEY}`
})
};
}
}
Insert cell
openAiResponse = {
const body = {
//functions: functions,
// function_call: { name: "upsert_cell" },
messages: trimmed_prompt.prompt,
...modelConfig(viewof settings.value.model).settings
};
const payload = {
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${OPENAI_API_KEY}`
},
body: JSON.stringify(body)
};
console.log("Sending", body);
const response = await fetch(api_endpoint, payload);

if (response.status !== 200)
throw new Error(`${response.status}: ${await response.text()}`);
const responseJson = response.json();
console.log("Received", await responseJson);
return responseJson;
}
Insert cell
instruction = {
const message = openAiResponse.choices[0].message;
return {
cells: process(message.content),
prompt: ask[ask.length - 1].content,
action: "upsert_cells",
time: Date.now()
};
}
Insert cell
Insert cell
content = process(openAiResponse.choices[0].message.content)
Insert cell
function process(content) {
const doc = domParser.parseFromString(
"<response>" + content + "</response>",
"text/xml"
);
const cells = [...doc.querySelectorAll("cell")];
debugger;
return cells.map((cell) => ({
inputs: cell
.querySelector("deps")
.textContent.split(",")
.map((s) => s.trim()),
code: content
}));
}
Insert cell
api_call_response = viewof ask.resolve(instruction) && instruction
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// import { encode } from "@codingwithfire/gpt-3-encoder"
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
//import { footer } from "@tomlarkworthy/footer"
Insert cell
//footer
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more