30:T6c2,viewof ui = reconcile( this, htl.html`

${mutable bots[ this?.querySelector("option:checked").value || "basic" ].render( [ ...(chatCompletionRequest?.messages || []), { ...chatCompletion } ].filter((i) => (i?.content || i?.function_call) && i.role !== "system") )}

{ e.preventDefault(); const input = e.target.querySelector('input[type="text"]'); if (input.value && !input.disabled) { input.blur(); const bot = mutable bots[e.target.querySelector("option:checked").value]; mutable chatCompletionRequest = bot.completion({ messages: [ ...(chatCompletionRequest?.messages || []), ...(chatCompletion ? [chatCompletion] : []), { role: "user", content: input.value } ] }); input.value = ""; } }}> ${ chatCompletion && !chatCompletion.done ? htl.html` ` : htl.html` ` }

` )31:Td24,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 }; } }32:Tf5f,mutable bots = ({ basic: { title: "Basic chat bot", completion: (chatCompletionRequest) => Object.assign({ temperature: 0.8 }, chatCompletionRequest, { model: models.gpt3 }), render: (messages) => messages.map( ({ role, content }) => htl.html`

${md`${content || ""}`}` ) }, programmer: { title: "Programmer chat bot", completion: (chatCompletionRequest) => { chatCompletionRequest = Object.assign( { temperature: 0.5 }, chatCompletionRequest, { model: models.gpt3Beta, function_call: { name: "render_code" }, functions: [ { name: "render_code", description: "Displays provided information to the user in a compatible format", parameters: { type: "object", properties: { goal: { type: "string", description: "A description of the goal that the supplied code should demonstrate or achieve" }, thoughts: { type: "string", description: "A description of what should be considered when creating code to achieve the goal" }, language: { type: "string", description: "The language identifier of the provided code, as recognized by markdown plugins for syntax highlighting" }, code: { type: "string", description: "Valid code that should achieve the goal" }, explanation: { type: "string", description: "An explanation of the provided code" }, review: { type: "string", description: "A critique of the provided code" } }, required: [ "goal", "thoughts", "language", "code", "explanation", "review" ] } } ] } ); chatCompletionRequest.messages = [ { role: "system", content: "If user does not specify which language to use, assume javascript" }, ...(chatCompletionRequest.messages || []) ]; return chatCompletionRequest; }, render: (messages) => messages.map( ({ role, content, function_call: { arguments: args } = {} }) => { const data = tryParseJson(args) || tryParseJson(`${args}\"}`) || tryParseJson(`${args}\"\"}`) || tryParseJson(`${args}\"\":\"\"}`) || tryParseJson(`${args}\":\"\"}`) || tryParseJson(`${args}}`); if (data?.code) { return htl.html`

${md`${content || ""}`} ${code(data.code, data.language)}

Details

${key}: ${value}

`; } else { return htl.html`

${md`${content || ""}`} ${md`${data?.goal || ""}`} ${md`${data?.thoughts || ""}`}`; } } ) } })33:T6fa,(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`

${key}: ${value}

`; }))34:T426,// logic required to coordinate with browser password manager viewof OPENAI_API_KEY = { const input = htl.html` { if (input.matches(":autofill") || input.matches(":-webkit-autofill")) form.querySelector('button[type="submit"]').click(); }}>`; const form = htl.html`

{ e.preventDefault(); control.resolve(input.value); control.removeAttribute("open"); input.disabled = true; //form.replaceWith(html`API Key: ${input}`); form.remove(); history.pushState({}, null); }}> API Key: ${input}Create a new key on OpenAI and store it in your browser password manager. `; const control = htl.html`

${form}

`; control.value = new Promise((resolve) => (control.resolve = resolve)); autoAnimate(control); return control; }35:T926,tryParseFunctionCall = { const TAGS = [ ["{", "}"], ["[", "]"], ['"', '"'] ]; return function tryParseFunctionCall(chatCompletion) { const { function_call: { name, arguments: args } = {} } = chatCompletion; if (!name) return null; const data = tryParseJson(args); const result = { name, data, partial: Boolean(args && !data), args }; if (result.partial) { // attempt to complete the string let text = args; const maybe = parseJson(args); result.data = maybe.json; result.debug = maybe.text; } return result; }; return function tryParseFunctionCall2(chatCompletion) { const { function_call: { name, arguments: args } = {} } = chatCompletion; const data = tryParseJson(args); const result = { name, data, debug: null, partial: Boolean(args && !data), args }; if (result.partial) { const maybe = parseJson(args); result.data = maybe.json; result.debug = maybe.text; } return result; }; function parseJson(partialText) { let lastOpeningTag = TAGS[0]; let depth = 0; let escapeNext = false; let inString = false; for (let i = 0; i < partialText.length; i++) { if (inString && partialText[i] === "\\" && !escapeNext) { escapeNext = true; continue; } for (const tag of TAGS) { if (tag[0] === '"' || tag[0] === "'" || !inString) { if (!escapeNext && partialText.startsWith(tag[0], i)) { if (tag[0] === '"' || tag[0] === "'") { inString = !inString; } if (!inString || tag[0] === '"' || tag[0] === "'") { depth++; lastOpeningTag = tag; } } else if (!escapeNext && partialText.startsWith(tag[1], i)) { if (tag[1] === '"' || tag[1] === "'") { inString = !inString; } if (!inString || tag[1] === '"' || tag[1] === "'") { depth--; } } } } escapeNext = false; } // Append the closing tags for (let i = 0; i < depth; i++) { partialText += lastOpeningTag[1]; } // Parse the JSON string return { json: tryParseJson(partialText), text: partialText }; } }36:[] 2e:{"title":"OpenAI","cells":[{"id":1865,"value":"renderedHeader = htl.html`\n

OpenAI

\n${viewof OPENAI_API_KEY}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":815,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":500,"value":"
\n## State","pinned":false,"hidden":false,"mode":"md"},{"id":506,"value":"mutable messages = [\n {\n role: \"system\",\n content:\n \"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.\"\n }\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":955,"value":"mutable chatCompletionRequest = ({ messages: [] })","pinned":true,"hidden":false,"mode":"ojs"},{"id":622,"value":"chatCompletion = {\n if (!chatCompletionRequest?.messages?.length) return;\n return createChatCompletion(chatCompletionRequest);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1916,"value":"mutable functions = [\n {\n name: \"updateUserInterface\",\n parameters: {\n type: \"object\",\n properties: {\n placeholder: {\n type: \"string\",\n description:\n \"The text to be displayed to the user as the placeholder of the input where they type their message\"\n },\n name: {\n type: \"string\",\n description: \"The name of the AI assistant\"\n },\n message: {\n type: \"string\",\n description: \"The AI assistant response to show to the user\"\n }\n }\n }\n }\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1945,"value":"htl.html`