Public
Edited
Jun 25, 2023
mutable messages = [
{
role: "system",
content:
"You are an AI coding assistant running inside an ObservableHQ Javascript notebook. Make helpful use of available functions to proactively assist the user in the context of this environment. When providing text responses to the user, you should be brief."
}
]
mutable chatCompletionRequest = ({ messages: [] })
chatCompletion = {
if (!chatCompletionRequest?.messages?.length) return;
return createChatCompletion(chatCompletionRequest);
}
mutable functions = [
{
name: "updateUserInterface",
parameters: {
type: "object",
properties: {
placeholder: {
type: "string",
description:
"The text to be displayed to the user as the placeholder of the input where they type their message"
},
name: {
type: "string",
description: "The name of the AI assistant"
},
message: {
type: "string",
description: "The AI assistant response to show to the user"
}
}
}
}
]
htl.html`<button onclick=${(e) => {
mutable chatCompletionRequest = {
temperature: 1.5,
model: models.gpt3Beta,
functions: mutable functions,
messages: [
...mutable messages,
{
role: "user",
content:
"Tell me a believable story as it would appear in a newspaper where a hero programmer saves the world using regex"
}
],
n: 2
};
}}>Test`
renderedMessages = {
const template = this || autoAnimate(htl.html`<ul></ul>`);
template.children
return template;
}
renderedChatCompletion = {
const { choices = [] } = chatCompletion || {};
const renders = choices.map(
({ role, content, function_call, finish_reason }) => htl.html`
<div>
<span><strong>${role}</strong><span aria-busy="${!finish_reason}"></span></span>
<div>
${content && md`${content}`}
${function_call && code(function_call.arguments)}
</div>
</div>`
);
return reconcile(
this,
renders.length === 1
? renders[0]
: autoAnimate(
htl.html`<ul>${renders.map(
(render) => htl.html`<li>${render}</li>`
)}</ul>`
)
);
}
async function* createChatCompletion(
chatCompletionRequest,
{ apiKey = OPENAI_API_KEY, ...chatCompletionRequestOptions } = {}
) {
// https://platform.openai.com/docs/api-reference/chat/create
chatCompletionRequest = Object.assign(
{
model: models.gpt3,
messages:
typeof chatCompletionRequest == "string"
? [{ role: "user", content: chatCompletionRequest }]
: [],
stream: "aggregate"
},
typeof chatCompletionRequest == "string" ? {} : chatCompletionRequest,
chatCompletionRequestOptions
);
const aggregate = chatCompletionRequest.stream === "aggregate";
chatCompletionRequest.stream = Boolean(chatCompletionRequest.stream);
// filter "error" messages and "done" properties that this function outputs
chatCompletionRequest.messages = chatCompletionRequest.messages
?.filter(({ role }) => role !== "error")
.map(({ done, ...message }) => message);
// send the request to OpenAI
const response = await fetch("https://api.openai.com/v1/chat/completions", {
method: "POST",
headers: {
authorization: `Bearer ${apiKey}`,
"content-type": "application/json"
},
body: JSON.stringify(chatCompletionRequest)
});
// if there is an error with the response, return an error reply
if (!response.ok) {
const content = await response.text();
console.error(content);
return yield {
id: "",
object: "chat.completion.chunk",
model: chatCompletionRequest.model,
created: Date.now(),
choices: [
{
role: "error",
finish_reason: "error",
content: tryParseJson(content)?.error?.message || content
}
]
};
}
const choices = [];
try {
// if the caller does not want to stream, return full reply
if (!chatCompletionRequest.stream) {
const data = await response.json();
console.log(data);
return yield data;
}
// process the data-only server-sent events from the stream
const reader = response.body.getReader();
const decoder = new TextDecoder("utf-8");
while (true) {
const { value, done } = await reader.read();
if (done) return;
for (let line of decoder.decode(value).split("\n\n")) {
if (!line || line === "data: [DONE]") continue;
line = line.slice(6); // trim the prefix "data: "
console.log(line);
const reply = JSON.parse(line);
if (reply.error) throw reply.error;
if (aggregate) {
reply.choices.forEach(({ index, delta, finish_reason }) => {
choices[index] = aggregateObjects(delta, choices[index]);
choices[index].finish_reason = finish_reason;
if (Object.keys(delta).length) choices[index].delta = delta;
else delete choices[index].delta;
});
reply.choices = choices;
}
yield reply;
}
}
} catch (error) {
console.error(error);
choices.forEach((choice) => {
if (!choice.finish_reason) choice.finish_reason = "error";
});
choices.push({
role: "error",
finish_reason: "error",
content: error.message || error
});
return yield {
id: "",
object: "chat.completion.chunk",
model: chatCompletionRequest.model,
created: Date.now(),
choices: choices
};
}
}
(await visibility(),
$from(
createChatCompletion(
"Create two random quirky personas. What would the first say to the second?",
{ temperature: 1.25 }
)
).map(
(completion) =>
htl.html`<div>${completion.choices.map(({ content }) => md`${content}`)}`
))
(await visibility(),
$from(
createChatCompletion(
"make a creative and artistic svg for a logo for my online gaming identity called Keystroke",
{
model: models.gpt3Beta,
temperature: 0.1,
function_call: { name: "showUserOutput" },
functions: [
{
name: "showUserOutput",
parameters: {
type: "object",
properties: {
notice: {
type: "string",
description:
"Brief text message to user, letting them know their request is understood and is being processed."
},
markdown: {
type: "string",
description: "Markdown content relevant to satify user request"
},
code: {
type: "string",
description: "Computer code relevant to satify user request"
},
reviewOfCode: {
type: "string",
description: "Critique of provided code"
},
urls: {
type: "array",
items: {
type: "string"
},
description: "Relevant urls to satisfy user request"
}
},
required: ["notice", "markdown", "code"]
}
}
]
}
)
).map((completion) => {
const {
choices: [
{
function_call: { arguments: args }
}
]
} = completion;
const data = tryParseJson(args);
if (!data) return code(args, "javascript");
return htl.html`
<ul>${Object.entries(data)
.filter(([key]) => key !== "code")
.map(
([key, value]) => htl.html`<li><strong>${key}: </strong> ${value}</li>`
)}
</ul>`;
}))
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.