content = process(openAiResponse.choices[0].message.content)
mainVariables = [...allVariables].filter((v) => v._module === main)
Tech Lead at Taktile.
Formerly Firebase, Google
// highlight(example_image)
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"
]
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>
`
background_tasks = {
submit_summary;
find_context_extensions;
on_prompt;
context_updater;
api_call_response;
}
formatted_instruction = {
if (response.action == "upsert_cells") {
return response.cells.map((r) => r.code).join("\n\n");
}
return response.content;
}
response = on_prompt
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);
}
extension_context = async ({ question }) => {
const context = [];
await Promise.all(
[...viewof context_extensions.value].map((fn) => fn({ question, context }))
);
return context;
}
testContext
cells = Promise.all(
[...modules.entries()].map(async ([m, mInfo]) => ({
...mInfo,
cells: await cellMap(m)
}))
)
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
}
}
]
}
)
excludes = new Set([
...descendants(lookupVariable("mutable context", thisModule)),
...descendants(lookupVariable("viewof prompt", thisModule))
])
viewof allVariables = variables(runtime)
viewof history = Inputs.input([])
viewof ask = flowQueue({ timeout_ms: 180000 })
console.log("Ask", ask)
prompt_messages = [
{
role: viewof settings.value.model.startsWith("o1") ? "user" : "system",
content: system_prompt
},
...ask
]
token_analytics = ({
prompt: prompt_messages,
prompt_tokens: prompt_messages.map(
(p) => (p.content || JSON.stringify(p.function_call)).length / 5
)
})
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;
}
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}`
})
};
}
}
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;
}
instruction = {
const message = openAiResponse.choices[0].message;
return {
cells: process(message.content),
prompt: ask[ask.length - 1].content,
action: "upsert_cells",
time: Date.now()
};
}
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
}));
}
api_call_response = viewof ask.resolve(instruction) && instruction
// import { encode } from "@codingwithfire/gpt-3-encoder"
//import { footer } from "@tomlarkworthy/footer"
//footer
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.