2f:Tc63,viewof OPENAI_API_KEY = { const id = "OPENAI_API_KEY"; const loginForm = htl.html`

Please provide an API Key to access OpenAI: You must create an account with OpenAI and generate an API key to access this tool. Use your browser password manager to remember and autofill it. `; const input = loginForm.querySelector(`#${id}`); const logoutForm = htl.html` `; const control = htl.html`

OpenAI

${loginForm}

`; // on login submission, verify user-provided API key and complete sign-in; // initialize control value to promise that resolves on sign-in control.value = new Promise((r) => (control.resolve = r)); loginForm.onsubmit = async (e) => { console.log(e); e.preventDefault(); if (!(await validate())) { input.setAttribute("aria-invalid", true); input.setCustomValidity("Invalid API Key"); loginForm.reportValidity(); return; } control.resolve(input.value); loginForm.replaceWith(logoutForm); history.pushState({}, null); control.firstElementChild.removeAttribute("open"); control.firstElementChild.removeAttribute("disabled"); }; // if the user autofills password from browser, autosubmit input.oninput = (e) => { input.removeAttribute("aria-invalid"); input.setCustomValidity(""); if ( e.target.matches(":autofill") || e.target.matches(":-webkit-autofill") ) { document.getElementById("submit").click(); } }; // TODO - do I want to prevent form from being closed before sign-in? // if so remove comment-out this line control.firstElementChild.removeAttribute("disabled"); return htl.html`${control}`; async function validate() { toggleForm(loginForm); try { const ai = new openai.OpenAIApi( new openai.Configuration({ apiKey: input.value }) ); const engines = await ai.listEngines(); console.log({ engines }); return true; } catch (error) { console.error(error); return false; } finally { toggleForm(loginForm); } } }30:T10ad,driver = { picocss; autoAnimate(chat); ai; const control = htl.html`

`; const form = control.querySelector("#chat-input"); const input = control.querySelector("#user-input"); const history = control.querySelector("#chat-history"); const submitButton = control.querySelector("button"); autoAnimate(control); autoAnimate(history); if (chat.firstElementChild !== control) { chat.firstElementChild.replaceWith(control); } input.onkeydown = (e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); submitButton.click(); } }; form.onsubmit = async (e) => { e.preventDefault(); toggleForm(form); const userText = input.value; input.value = ""; const userMessageElement = makeChatHistoryElement("user", userText); history.appendChild(userMessageElement); ( userMessageElement.previousElementSibling || userMessageElement ).scrollIntoView({ behavior: "smooth" }); try { // TODO: send the input text to the backend //await Promises.delay(1000); const completion = await ai.createChatCompletion({ model: "gpt-3.5-turbo", messages: getChatHistoryData() }); console.log(completion); const message = completion.data?.choices[0]?.message; if (message) { const responseElement = makeChatHistoryHtmlElement( message.role, message.content ); console.log(responseElement.outerHTML); await addChatHistoryHtmlMessage(responseElement); } } finally { toggleForm(form); input.focus(); ( userMessageElement.previousElementSibling || userMessageElement ).scrollIntoView({ behavior: "smooth" }); } }; function makeChatHistoryElement(role, content) { if (role === "user") content += "\n\n"; return htl.html`

${( content || "" ).trim()}

`; } function getChatHistoryData() { return [...history.querySelectorAll("p[data-chatRole]")].map((element) => ({ role: element.getAttribute("data-chatRole"), content: element.getAttribute("data-chatContent") })); } async function addChatHistoryMessage(chatHistoryElement) { // Clone chatHistoryElement const clonedElement = chatHistoryElement.cloneNode(true); // Split content into words and wrap each in a span const content = clonedElement.getAttribute("data-chatContent") || ""; const words = content.trim().split(" "); // Clear original content clonedElement.textContent = ""; // Animate and append to history autoAnimate(clonedElement); history.appendChild(clonedElement); // Append each word as a child span for (const word of words) { await Promises.delay(10); const span = document.createElement("span"); span.textContent = word; clonedElement.appendChild(span); clonedElement.appendChild(document.createTextNode(" ")); } } function makeChatHistoryHtmlElement(role, content) { if (role === "user") content += "\n\n"; return htl.html`

${md`${ content || "" }`}

`; } async function addChatHistoryHtmlMessage(chatHistoryElement) { const clonedElement = chatHistoryElement.cloneNode(true); clonedElement.innerHTML = ""; autoAnimate(clonedElement); history.appendChild(clonedElement); await appendChildrenWithDelay(chatHistoryElement, clonedElement); } async function appendChildrenWithDelay(sourceElement, targetElement) { for (const child of sourceElement.children) { await Promises.delay(10); const clonedElement = child.cloneNode(true); clonedElement.innerHTML = ""; autoAnimate(clonedElement); targetElement.appendChild(clonedElement); if (child.children.length > 0) { await appendChildrenWithDelay(child, clonedElement); } } } }31:[] 2d:{"title":"OpenAI - Old","cells":[{"id":479,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":768,"value":"chat = htl.html`

Please sign-in above to get started...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":919,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":618,"value":"https://platform.openai.com/docs/api-reference\n\nhttps://github.com/openai/openai-node","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"openai = import(\"https://cdn.skypack.dev/openai@3.3.0\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":334,"value":"ai = new openai.OpenAIApi(new openai.Configuration({ apiKey: OPENAI_API_KEY }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":876,"value":"ai.listEngines()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1010,"value":"ai.listModels()","pinned":true,"hidden":false,"mode":"ojs"},{"id":64,"value":"async function* $async(factory = async () => Promises.delay(1000)) {\n if (this) {\n yield this;\n } else {\n yield htl.html`

\"Waiting...\"

`;\n }\n yield await factory();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"{\n for await (const i of $async()) {\n yield i;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":115,"value":"picocss = {\n // https://picocss.com/docs/themes.html\n // TODO - only force light on observablehq domain\n document.documentElement.setAttribute(\"data-theme\", \"light\");\n return htl.html`\n