${name ? `Tarot Reading for ${name}` : "Tarot Reader"}

2a:null 2b:["$","title",null,{"children":"Tarot Backend (ChatGPT fortune teller) | Tom Larkworthy | Observable"}] 30:T96e,# Tarot Backend (ChatGPT fortune teller) Welcome curious traveler to the Tarot backend. Its purpose is to show you how you can make a fully working app entirely from the comfort of an Observable notebook. You can fork this notebook and create your own. The Tarot Backend uses [OpenAI](https://openai.com/) to interpret a 3 card tarot spread. The OpenAI API key is kept secret by executing it serverside in an API endpoint defined inline to the notebook using [webcode.run](https://webcode.run). You can bring your own OpenAI API key so you can run that remote logic locally which is useful during development. A history of readings is stored in a Firebase realtime database, and is protected with a service_account, again you can bring your own service account and execute it locally. The service account also has access to Google Cloud Storage During an API call, the notebook prerenders a social image and a HTML landing page for that reading. These artifacts are uploaded to Google Cloud Storage. When a user visits [thetarot.online](https://thetarot.online), we use Netlify rewrite rules to redirect to Google Cloud Storage [source](https://github.com/endpointservices/thetarot.online), this is the only code outside of Observable. It provides are really quick and simple way to provide a vanity domain. The UI is designed hierarchically and assembled into a single cell, following the [scalable UI development methodology](https://observablehq.com/@tomlarkworthy/ui-development). This keeps the client notebook slim, it also simplifies embedding, and allows us to embed the application into other sites using [native Observable embedding functionality](https://observablehq.com/@observablehq/introduction-to-embedding). We the API request process across several Observable reactive dataflow cells using a [flowQueue](https://observablehq.com/@tomlarkworthy/flow-queue). If a step has a bug, we can then fix that individual line and the trace will continue which makes development very ergonomic. Furthermore, by exploiting [webcode.run](https://webcode.run) live coding, production traffic will be traced in the development notebook, and we can develop and debug directly on prod. Errors in prod are recorded with [Sentry](https://observablehq.com/@endpointservices/sentry), and active monitoring is performed with [uptimerobot + healthcheck](https://observablehq.com/@endpointservices/healthcheck). 31:T6e5,viewof display = (font, console.log("viewof display"), view``)32:Ta48,transitions = { display; restartAction; // recompute when display changes loadPreviousFortune; // Load history (happens once) console.log("transition"); viewof display.style.display = "block"; viewof display.name.style.display = "block"; viewof display.question.style.display = "block"; viewof display.deck.style.display = "block"; if (display.name.length == 0) { // User has not filled in their name, hide everything except the name control viewof display.question.style.display = "none"; viewof display.deck.style.display = "none"; viewof display.cards.style.display = "none"; viewof display.fortune.style.display = "none"; viewof display.share.style.display = "none"; viewof display.restart.style.display = "none"; var state = "askName"; } else if (display.question.length == 0) { viewof display.deck.style.display = "none"; viewof display.cards.style.display = "none"; viewof display.fortune.style.display = "none"; viewof display.share.style.display = "none"; viewof display.restart.style.display = "none"; display.cards.cards = await getCards({ numCards: 3 }); var state = "askQuestion"; } else if (display.deck < 3) { viewof display.cards.style.display = "none"; viewof display.fortune.style.display = "none"; viewof display.restart.style.display = "none"; } else if (display.deck >= 3) { viewof display.cards.style.display = "block"; viewof display.fortune.style.display = "block"; viewof display.name.style.display = "none"; viewof display.question.style.display = "none"; viewof display.deck.style.display = "none"; viewof display.restart.style.display = "inline-block"; var state = "showCards"; } if (viewof display.fortune.value.length === 0 && display.deck >= 0) { // generate fortune *once*, and only once we are messing with cards viewof display.fortune.value = "..."; viewof display.share.style.display = "none"; getFortune({ token: user.getIdToken(), name: display.name, cards: display.cards.cards, question: display.question }) .then((fortune) => { viewof display.share.style.display = "inline-block"; viewof display.share.value = `${baseURL}/${fortune.id}`; viewof display.fortune.value = fortune.reading; // We will also fetch it to prewarm the cache fetch(viewof display.share.value); }) .catch((err) => { viewof display.fortune.value = err.message; }); viewof display.name.singleton.disabled = true; viewof display.question.singleton.disabled = true; } }33:Ta47,pickCards = () => { let state = "stack"; const stack = () => htl.svg` ${Array.from({ length: 78 }).map( (_, i) => htl.svg` { if (state === "stack") { state = "spread"; const spreads = ui.querySelectorAll(".spread"); for (const i in spreads) { const element = spreads[i]; if (element.classList) { element.classList.add("pickable"); const spread = htl.svg``; element.appendChild(spread); spread.beginElement(); } } ui.value = 0; ui.dispatchEvent(new Event("input", { bubbles: true })); } else if (state === "spread") { const slide = htl.svg``; const fade = htl.svg``; evt.target.appendChild(slide); evt.target.appendChild(fade); slide.beginElement(); fade.beginElement(); ui.value++; ui.dispatchEvent(new Event("input", { bubbles: true })); } }}> ` )} `; const pickPrompt = htl.svg`Pick 3 cards`; const ui = htl.svg``; ui.reset = () => { ui.innerHTML = pickPrompt.outerHTML; ui.appendChild(stack()); state = ui.value = "stack"; ui.dispatchEvent(new Event("input", { bubbles: true })); }; return ui; }34:T519,socialImageInner = async ({ reading, cards } = {}) => { const promises = []; const ui = svg``; await Promise.all( [...ui.querySelectorAll("image")].map((img) => img.decode()) ).catch(() => {}); return ui; }35:T535,contentFilter = async ({ content, API_KEY } = {}) => { const response = await fetch( `https://api.openai.com/v1/engines/content-filter-alpha/completions`, { method: "POST", headers: { "Content-Type": "application/json", Authorization: `Bearer ${API_KEY}` }, body: JSON.stringify({ prompt: `<|endoftext|>${content}\n--\nLabel:`, temperature: 0, max_tokens: 1, top_p: 0, logprobs: 10 }) } ); if (response.status !== 200) throw new Error(await response.text()); const responseJson = await response.json(); var output_label = responseJson["choices"][0]["text"]; const toxic_threshold = -0.355; if (output_label == "2") { const logprobs = responseJson["choices"][0]["logprobs"]["top_logprobs"][0]; if (logprobs["2"] < toxic_threshold) { const logprob_0 = logprobs["0"]; const logprob_1 = logprobs["1"]; if (logprob_0 && logprob_1) { if (logprob_0 >= logprob_1) { output_label = "0"; } else { output_label = "1"; } } else if (logprob_0) { output_label = "0"; } else { output_label = "1"; } } } if (!["0", "1", "2"].includes(output_label)) { output_label = "2"; } return Number.parseInt(output_label); }36:T78b,page = ({ name, question, imgURL, shareId, debug = false } = {}) => ` ${name ? `Tarot Reading for ${name}` : "Tarot Reader"}

`37:T1f10,/** * textFit v2.3.1 * Previously known as jQuery.textFit * 11/2014 by STRML (strml.github.com) * MIT License * * To use: textFit(document.getElementById('target-div'), options); * * Will make the *text* content inside a container scale to fit the container * The container is required to have a set width and height * Uses binary search to fit text with minimal layout calls. * Version 2.0 does not use jQuery. */ /*global define:true, document:true, window:true, HTMLElement:true*/ textFit = { var defaultSettings = { alignVert: false, // if true, textFit will align vertically using css tables alignHoriz: false, // if true, textFit will set text-align: center multiLine: false, // if true, textFit will not set white-space: no-wrap detectMultiLine: true, // disable to turn off automatic multi-line sensing minFontSize: 6, maxFontSize: 80, reProcess: true, // if true, textFit will re-process already-fit nodes. Set to 'false' for better performance widthOnly: false, // if true, textFit will fit text to element width, regardless of text height alignVertWithFlexbox: false // if true, textFit will use flexbox for vertical alignment }; return function textFit(els, options) { if (!options) options = {}; // Extend options. var settings = {}; for (var key in defaultSettings) { if (options.hasOwnProperty(key)) { settings[key] = options[key]; } else { settings[key] = defaultSettings[key]; } } // Convert jQuery objects into arrays if (typeof els.toArray === "function") { els = els.toArray(); } // Support passing a single el var elType = Object.prototype.toString.call(els); if ( elType !== "[object Array]" && elType !== "[object NodeList]" && elType !== "[object HTMLCollection]" ) { els = [els]; } // Process each el we've passed. for (var i = 0; i < els.length; i++) { processItem(els[i], settings); } }; /** * The meat. Given an el, make the text inside it fit its parent. * @param {DOMElement} el Child el. * @param {Object} settings Options for fit. */ function processItem(el, settings) { if ( !isElement(el) || (!settings.reProcess && el.getAttribute("textFitted")) ) { return false; } // Set textFitted attribute so we know this was processed. if (!settings.reProcess) { el.setAttribute("textFitted", 1); } var innerSpan, originalHeight, originalHTML, originalWidth; var low, mid, high; // Get element data. originalHTML = el.innerHTML; originalWidth = innerWidth(el); originalHeight = innerHeight(el); // Don't process if we can't find box dimensions if (!originalWidth || (!settings.widthOnly && !originalHeight)) { if (!settings.widthOnly) throw new Error( "Set a static height and width on the target element " + el.outerHTML + " before using textFit!" ); else throw new Error( "Set a static width on the target element " + el.outerHTML + " before using textFit!" ); } // Add textFitted span inside this container. if (originalHTML.indexOf("textFitted") === -1) { innerSpan = document.createElement("span"); innerSpan.className = "textFitted"; // Inline block ensure it takes on the size of its contents, even if they are enclosed // in other tags like

innerSpan.style["display"] = "inline-block"; innerSpan.innerHTML = originalHTML; el.innerHTML = ""; el.appendChild(innerSpan); } else { // Reprocessing. innerSpan = el.querySelector("span.textFitted"); // Remove vertical align if we're reprocessing. if (hasClass(innerSpan, "textFitAlignVert")) { innerSpan.className = innerSpan.className.replace( "textFitAlignVert", "" ); innerSpan.style["height"] = ""; el.className.replace("textFitAlignVertFlex", ""); } } // Prepare & set alignment if (settings.alignHoriz) { el.style["text-align"] = "center"; innerSpan.style["text-align"] = "center"; } // Check if this string is multiple lines // Not guaranteed to always work if you use wonky line-heights var multiLine = settings.multiLine; if ( settings.detectMultiLine && !multiLine && innerSpan.getBoundingClientRect().height >= parseInt(window.getComputedStyle(innerSpan)["font-size"], 10) * 2 ) { multiLine = true; } // If we're not treating this as a multiline string, don't let it wrap. if (!multiLine) { el.style["white-space"] = "nowrap"; } low = settings.minFontSize; high = settings.maxFontSize; // Binary search for highest best fit var size = low; while (low <= high) { mid = (high + low) >> 1; innerSpan.style.fontSize = mid + "px"; var innerSpanBoundingClientRect = innerSpan.getBoundingClientRect(); if ( innerSpanBoundingClientRect.width <= originalWidth && (settings.widthOnly || innerSpanBoundingClientRect.height <= originalHeight) ) { size = mid; low = mid + 1; } else { high = mid - 1; } // await injection point } // found, updating font if differs: if (innerSpan.style.fontSize != size + "px") innerSpan.style.fontSize = size + "px"; // Our height is finalized. If we are aligning vertically, set that up. if (settings.alignVert) { addStyleSheet(); var height = innerSpan.scrollHeight; if (window.getComputedStyle(el)["position"] === "static") { el.style["position"] = "relative"; } if (!hasClass(innerSpan, "textFitAlignVert")) { innerSpan.className = innerSpan.className + " textFitAlignVert"; } innerSpan.style["height"] = height + "px"; if ( settings.alignVertWithFlexbox && !hasClass(el, "textFitAlignVertFlex") ) { el.className = el.className + " textFitAlignVertFlex"; } } } // Calculate height without padding. function innerHeight(el) { var style = window.getComputedStyle(el, null); return ( el.getBoundingClientRect().height - parseInt(style.getPropertyValue("padding-top"), 10) - parseInt(style.getPropertyValue("padding-bottom"), 10) ); } // Calculate width without padding. function innerWidth(el) { var style = window.getComputedStyle(el, null); return ( el.getBoundingClientRect().width - parseInt(style.getPropertyValue("padding-left"), 10) - parseInt(style.getPropertyValue("padding-right"), 10) ); } //Returns true if it is a DOM element function isElement(o) { return typeof HTMLElement === "object" ? o instanceof HTMLElement //DOM2 : o && typeof o === "object" && o !== null && o.nodeType === 1 && typeof o.nodeName === "string"; } function hasClass(element, cls) { return (" " + element.className + " ").indexOf(" " + cls + " ") > -1; } // Better than a stylesheet dependency function addStyleSheet() { if (document.getElementById("textFitStyleSheet")) return; var style = [ ".textFitAlignVert{", "position: absolute;", "top: 0; right: 0; bottom: 0; left: 0;", "margin: auto;", "display: flex;", "justify-content: center;", "flex-direction: column;", "}", ".textFitAlignVertFlex{", "display: flex;", "}", ".textFitAlignVertFlex .textFitAlignVert{", "position: static;", "}" ].join(""); var css = document.createElement("style"); css.type = "text/css"; css.id = "textFitStyleSheet"; css.innerHTML = style; document.body.appendChild(css); } }38:[{"id":"c754fb284a0de3b6d47a3e5ca84774670b2d9d1407794b401d9b730649f5f5ae27579518c909c5862e0f4d2c9a29da48550c35ada43ba0de457e1f43e0975274","href":"https://static.observableusercontent.com/files/c754fb284a0de3b6d47a3e5ca84774670b2d9d1407794b401d9b730649f5f5ae27579518c909c5862e0f4d2c9a29da48550c35ada43ba0de457e1f43e0975274","name":"image@4.png","type":"image/png","lastModified":1646053238755.477,"size":436943},{"id":"b0dd95e56bf953b915b9fc424a3e34adf2816e7ba3e3a0ff38fc7cb39fdd18fcc339e0d7acd31a09f0d0509ac6108b7b4dd8cf3d98fe86235ad1beb972ecf766","href":"https://static.observableusercontent.com/files/b0dd95e56bf953b915b9fc424a3e34adf2816e7ba3e3a0ff38fc7cb39fdd18fcc339e0d7acd31a09f0d0509ac6108b7b4dd8cf3d98fe86235ad1beb972ecf766","name":"image@1.png","type":"image/png","lastModified":1645193042077.022,"size":1330933},{"id":"50754529e2a76a3b6c106a73040c811d07763baf7b344912d5bbec7157d9c33e2d0307b3e2436d1297fa1befa6a0e053f480dd19f79839f01c0ea4e1e9f14266","href":"https://static.observableusercontent.com/files/50754529e2a76a3b6c106a73040c811d07763baf7b344912d5bbec7157d9c33e2d0307b3e2436d1297fa1befa6a0e053f480dd19f79839f01c0ea4e1e9f14266","name":"image.png","type":"image/png","lastModified":1645022700367.49,"size":591109},{"id":"3561ced6cac97495efcd731ad7b38d12b772cb488d5faf1e99ee9bed833083e99feb1185f542449b046d3a05e102498c0dbcfdf3fcea35b409a423a6b9ea7106","href":"https://static.observableusercontent.com/files/3561ced6cac97495efcd731ad7b38d12b772cb488d5faf1e99ee9bed833083e99feb1185f542449b046d3a05e102498c0dbcfdf3fcea35b409a423a6b9ea7106","name":"image@7.png","type":"image/png","lastModified":1646930143668.419,"size":2939658},{"id":"9991246a526763d7493c377f4a49ddc898cc11e2fa8c63f6741bbdb67ab9a0b20e01de2860e9d15bb1cc29bd8781e6c070a1d3db27c11b59841a54dc29558e93","href":"https://static.observableusercontent.com/files/9991246a526763d7493c377f4a49ddc898cc11e2fa8c63f6741bbdb67ab9a0b20e01de2860e9d15bb1cc29bd8781e6c070a1d3db27c11b59841a54dc29558e93","name":"image@8.png","type":"image/png","lastModified":1646930304540.512,"size":2981164},{"id":"6ba7a7adca1d0ddeff0f06dcfd4148a6b8b125d24312b0f23554a7329e2811c73ba73bca36474bed9ac094d9a00c479fc2b032d62038a0152603cbffdd3ace60","href":"https://static.observableusercontent.com/files/6ba7a7adca1d0ddeff0f06dcfd4148a6b8b125d24312b0f23554a7329e2811c73ba73bca36474bed9ac094d9a00c479fc2b032d62038a0152603cbffdd3ace60","name":"image@9.png","type":"image/png","lastModified":1647440871762.983,"size":382438},{"id":"1b8cd6ab9c7df78a279d435fd0eb4bbf4596f94cdacca6ce8b1526083e62285f358d7813d09671307b616d97164268f9ea49099ae9ab0e63eb7ea2af45d7478e","href":"https://static.observableusercontent.com/files/1b8cd6ab9c7df78a279d435fd0eb4bbf4596f94cdacca6ce8b1526083e62285f358d7813d09671307b616d97164268f9ea49099ae9ab0e63eb7ea2af45d7478e","name":"imgonline-com-ua-TextureSeamless-ddu5gFbCzzWeXp.jpg","type":"image/jpeg","lastModified":1647785737951.29,"size":248852},{"id":"d43230aa295b503aad4ef9dcd43e28813ac9b3a315edc352b9973894c78842303dd7caf2238b0d0695f7d0722eb550582003cf4c9da64d43b72c351779e1439d","href":"https://static.observableusercontent.com/files/d43230aa295b503aad4ef9dcd43e28813ac9b3a315edc352b9973894c78842303dd7caf2238b0d0695f7d0722eb550582003cf4c9da64d43b72c351779e1439d","name":"image-4.webp","type":"image/webp","lastModified":1650366191402.225,"size":91160},{"id":"243c42aef6b56101d952c0e6bda1ff0c7ebcf54b1612f0e39d7bc49858712d76956721397f937923b8c286a0710c717afbc38bbd0a54df221ca63a02fd1f25a9","href":"https://static.observableusercontent.com/files/243c42aef6b56101d952c0e6bda1ff0c7ebcf54b1612f0e39d7bc49858712d76956721397f937923b8c286a0710c717afbc38bbd0a54df221ca63a02fd1f25a9","name":"imgonline-com-ua-TextureSeamless-ddu5gFbCzzWeXp (1) (1).webp","type":"image/webp","lastModified":1650366359025.552,"size":83980}] 2e:{"id":"549f62919a7018eb","slug":"tarot-backend","title":"Tarot Backend (ChatGPT fortune teller)","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2022-02-12T15:32:05.763Z","update_time":"$D2023-10-20T18:33:00.102Z","view_time":null,"first_public_time":"$D2023-04-22T14:49:46.826Z","fork":false,"stars":11,"starred":false,"owner":{"type":"team","id":"7db5ed2b0697d645","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":"starter_2024"},"version":4490,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null}],"members":[{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null,"role":"editor"}],"comments":[{"id":"8adf00500d38d55a","reply_to_id":null,"content":"public auth code: osISBjenKDL2nqzpgOO5","create_time":"$D2023-04-01T13:24:45.342Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null}},{"id":"4fec163e82488859","reply_to_id":"8adf00500d38d55a","content":"public auth code: FsvkyFpxCJCPRndnALgW","create_time":"$D2023-10-08T16:41:23.178Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null}},{"id":"1dd73101f5ec2869","reply_to_id":"8adf00500d38d55a","content":"public auth code: a1FCtDi1ELhTDZhgH4lx","create_time":"$D2024-05-16T16:08:00.425Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null}}],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":7,"collection":null,"type":"notebook","body":{"title":"Tarot Backend (ChatGPT fortune teller)","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1721,"value":"toc(\"h2,h3,h4\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2150,"value":"## Application UI\n\nThis is the final application, it is a composite of all our separately designed UI pieces.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":681,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2161,"value":"## Application Logic\n\nBusiness logic is in seperate cells to the UI, but reevaluates on changes to UI state and drives additional state changes.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2791,"value":"### restartAction\n\nThe restart cell binds to the \"ask another question\" button. It clears the UI state, and yields a value. By having the downstream transition cells reference the value of the restart, we can reset the transitional state too on a restart.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1781,"value":"restartAction = Generators.observe((notify) => {\n const onrestart = () => {\n console.log(\"restart\");\n viewof display.fortune.value = \"\";\n viewof display.name.value = \"\";\n viewof display.question.value = \"\";\n viewof display.name.singleton.disabled = false;\n viewof display.question.singleton.disabled = false;\n viewof display.cards.style.display = \"none\";\n viewof display.deck.reset();\n notify();\n };\n viewof display.restart.addEventListener(\"click\", onrestart);\n invalidation.then(() =>\n viewof display.restart.removeEventListener(\"click\", onrestart)\n );\n\n notify();\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2805,"value":"### Loading shared fortune\n\nIf the URL contains a share id, we load a fortune from history.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2798,"value":"#### shareID\n\nFirst, we detect a share id from either the URL params, or the last path segment.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1982,"value":"shareId = {\n console.log(\"share id\");\n const search = new URLSearchParams(location.search).get(\"share\");\n if (search) return search;\n const path = location.pathname.split(\"/\").slice(-1)[0];\n if (!path.match(/[.$\\[\\]#\\/]/)) return path;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2818,"value":"#### previousFortune\n\nIf a shareId is present we load it from the realtime database, this will return null if shareId is undefined","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1899,"value":"previousFortune = {\n console.log(\"previousFortune\");\n const snapshot = await firebase\n .database()\n .ref(`/@tomlarkworthy/tarot-backend/calls/${shareId}`)\n .once(\"value\");\n return snapshot.val();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2826,"value":"#### loadPreviousFortune\n\nThis cell executes once, and will update the UI with a previousFortune if we have one.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1892,"value":"loadPreviousFortune = {\n console.log(\"loadPreviousFortune\");\n if (previousFortune) {\n viewof display.fortune.value =\n previousFortune.reading.choices[0].text ||\n previousFortune.reading.choices[0].message.content;\n viewof display.name.value = previousFortune.name;\n viewof display.question.value = previousFortune.question;\n viewof display.cards.cards.value = await findCardsByName(\n previousFortune.cards\n );\n viewof display.share.value = `${baseURL}/${shareId}`;\n viewof display.deck.value = 3;\n viewof display.deck.style.display = \"none\";\n viewof display.name.singleton.disabled = true;\n viewof display.question.singleton.disabled = true;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2831,"value":"### Application State transitions\n\nThe core application toggles the UI element visibility, based on their current state (which is modified by the user). ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1224,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2838,"value":"## Configuration","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1882,"value":"baseURL = \"https://thetarot.online\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":196,"value":"## Design","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":37,"value":"cards = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1458,"value":"#### whoInput","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2114,"value":"NAME_MAX_LENGTH = 50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":828,"value":"viewof name = whoInput()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":825,"value":"whoInput = () => {\n const uid = DOM.uid().id;\n const ui = view`Who asks the cards?\n${[\n \"...\",\n htl.html``\n]}\n</label>`;\n return ui;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1465,"value":"#### questionInput","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2117,"value":"QUESTION_MAX_LENGTH = 950 // OpenAI max length 1000 of user input (we spend 50 on the NAME)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":815,"value":"viewof question = questionInput()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":807,"value":"questionInput = () => {\n const uid = DOM.uid().id;\n return view`<label for=${uid} style=\"display:block; color: white; background-color: ${textBackground}; padding: 10px; margin: 5px; border-radius: 10px; border: solid ${borderColor};\" for=\"cheese\">What is the question for the cards? You can include important context.\n ${[\n \"...\",\n htl.html`<textarea id=${uid} style=\"width:100%; display:block; box-sizing:border-box; color: white; background-color: ${textBackground}; padding: 10px; border-radius: 10px;\" rows=10 placeholder=\"Write your question here...\" maxlength=${QUESTION_MAX_LENGTH}>`\n ]}\n`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1470,"value":"#### fortuneOutput","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1412,"value":"fortuneOutput = () => {\n const uid = DOM.uid().id;\n const textarea = htl.html``;\n\n /*\n textarea.addEventListener(\"input\", () => {\n textarea.style.height = `${textarea.scrollHeight}px`;\n });\n setTimeout(() => {\n textarea.style.height = `${textarea.scrollHeight}px`;\n }, 0);\n */\n\n return view`

${[\n \"...\",\n textarea\n ]}\n ⚠️ interpretation by artificial intelligence. For entertainment only.\n

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1417,"value":"viewof fortuneOutputExample = fortuneOutput()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1421,"value":"(viewof fortuneOutputExample.value = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n \n`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1590,"value":"#### Share button","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":969,"value":"shareButton = (url = \"https://example.com\") => {\n const ui = view`

Share this fortune using the following link

🔗

${[\n \"...\",\n htl.html``\n ]}\n \n

`;\n return ui;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1599,"value":"viewof shareButtonExample = shareButton()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1639,"value":"(viewof shareButtonExample.value = \"https://cool2.com \")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1595,"value":"#### restartButton","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1698,"value":"restartButton = (url = \"https://example.com\") => {\n const ui = view``;\n return ui;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1743,"value":"viewof restartButtonExample = restartButton()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1702,"value":"#### pickCards","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1006,"value":"cardBack = FileAttachment(\"image-4.webp\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1014,"value":"backUrl = FileAttachment(\"image-4.webp\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1101,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":974,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":980,"value":"viewof pickCardsExample = pickCards()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1214,"value":"pickCardsExample","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1838,"value":"viewof pickCardsExample.reset()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1047,"value":"viewof spreadConfig = verticalSliders({\n names: [\"dy\", \"oy\", \"da\", \"oa\"],\n labels: [\"dy\", \"oy\", \"da\", \"oa\"],\n mins: [-1000, -1000, -2, -90],\n maxs: [1000, 1000, 2, 90],\n steps: [1, 1, 0.01, 1],\n values: [-818, 948, -0.77, -33]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1073,"value":"spreadConfig","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1331,"value":"#### Show cards","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1336,"value":"showCards = juice(\n (cards) => {\n const ui = htl.svg``;\n return ui;\n },\n { cards: \"[0]\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4016,"value":"viewof showCardsExample = Inputs.toggle({\n label: \"show cards example?\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1341,"value":"viewof exampleCards = {\n if (showCardsExample) return showCards(await getCards({ numCards: 3 }));\n return invalidation;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1394,"value":"exampleCards","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1398,"value":"Inputs.button(\"shuffle\", {\n reduce: async () => (exampleCards.cards = await getCards({ numCards: 3 }))\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":581,"value":"## Social Image Generator Pipeline","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2319,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":2309,"value":"viewof exampleOutput = Inputs.button(\"Run social Image flowQueue\", {\n required: true,\n reduce: () =>\n socialImage({\n shareId: \"-MydHQ7WsdpMYfOwMUcY\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2339,"value":"socialImage = async ({ shareId } = {}) => {\n try {\n return viewof socialImageParams.send({\n shareId\n });\n } catch (err) {\n return undefined;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2298,"value":"viewof socialImageParams = flowQueue({\n timeout_ms: 15000\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2420,"value":"socialImageParams","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2376,"value":"socialData = (\n await adminFirebase\n .database()\n .ref(`@tomlarkworthy/tarot-backend/calls/${socialImageParams.shareId}`)\n .once(\"value\")\n).val()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2197,"value":"import { rasterize } from \"@mbostock/saving-svg\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2171,"value":"image = {\n if (socialData) {\n return socialImageInner({\n cards: await findCardsByName(socialData.cards),\n reading:\n socialData.reading.choices[0].text ||\n socialData.reading.choices[0].message.content\n });\n } else {\n const err = new Error(\"Can't find fortune\");\n err.status = 404;\n viewof socialImageParams.reject(err);\n return err;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3098,"value":"#### socialImageInner","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":237,"value":"boardw = 1218","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":367,"value":"boardh = 618","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":273,"value":"viewof texty = Inputs.range([-100, 500], {\n label: \"text offset y\",\n step: 1,\n value: -45\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":243,"value":"viewof coffsetx = Inputs.range([0, 500], {\n label: \"card offset x\",\n step: 1,\n value: 172\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":249,"value":"viewof coffsety = Inputs.range([0, 500], {\n label: \"card offset y\",\n step: 1,\n value: 74\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":227,"value":"viewof cwidth = Inputs.range([0, 500], {\n label: \"card width\",\n step: 1,\n value: 176\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":234,"value":"viewof cpad = Inputs.range([0, 500], {\n label: \"card spacing\",\n step: 1,\n value: 347\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":502,"value":"viewof textBackground = colorPicker(\"rgba(19, 17, 43, 0.77)\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":557,"value":"viewof borderColor = colorPicker(\"rgb(181, 101, 101)\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2166,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2303,"value":"fitImage = {\n await textFit(image.querySelector(\".fortune\"), {\n alignHoriz: true,\n alignVert: true\n });\n // textFit did not look like it was always applied so I think we need to slow it down\n return new Promise((resolve) => setTimeout(() => resolve(image), 100));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2240,"value":"jpeg = dom2img.toJpeg(fitImage)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2233,"value":"dom2img = await import(\"https://cdn.skypack.dev/html-to-image@1.9.0?min\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3655,"value":"#### End of Social Image Generation Pipeline","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2317,"value":"viewof socialImageParams.respond(jpeg)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1726,"value":"## Business Logic","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":390,"value":"viewof reading = Inputs.input(undefined)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1533,"value":"readingOrEmpty = viewof reading.value || \"\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":170,"value":"### Run tarot reading in remote service\n\nWe can pass the cards and question and name parameters to a webcode.run endpoint, which runs the core code remotely, and injects the OPENAI_API_KEY secret so you do not need to fill this out.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1505,"value":"viewof clientResponse = Inputs.button(\"run remote\", {\n reduce: async () => {\n const data = (\n await getFortune({\n token: user.getIdToken(),\n name: \"Tom\",\n cards: cards.map((c) => c.name),\n question: \"Will I be rich?\"\n })\n ).reading;\n viewof reading.value = data;\n viewof reading.dispatchEvent(new Event(\"input\", { bubbles: true }));\n return data;\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2437,"value":"### getFortune API client ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1496,"value":"getFortune = async ({ name, token, cards, question } = {}) => {\n const url = `${apiServer.href}?config=${btoa(\n JSON.stringify({\n name,\n cards: cards.map((c) => c.name),\n question\n })\n )}`;\n const response = await fetch(url, {\n headers: {\n Authorization: `Bearer ${await user.getIdToken()}`\n }\n });\n if (response.status === 200) return await response.json();\n else {\n throw new Error(`Error ${response.status}: ${await response.text()}`);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":162,"value":"## API Server","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2897,"value":"### [Optional] Local Credentials","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":694,"value":"viewof OPENAI_API_KEY = Inputs.bind(\n Inputs.text({ label: \"OPENAI_API_KEY\", placeholder: \"API KEY\" }),\n localStorageView(\"OPENAI_API_KEY\")\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":700,"value":"viewof ADMIN_SERVICE_ACCOUNT = Inputs.bind(\n Inputs.text({ label: \"TAROT_ADMIN_SERVICE_ACCOUNT\" }),\n localStorageView(\"TAROT_ADMIN_SERVICE_ACCOUNT\")\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":62,"value":"This button uses the local credentials and bypasses the API by writing straight the the pipeline.\n\n${Inputs.button(\"trigger API pipeline using local credentials\", {\n required: true,\n reduce: async () => {\n const data = await viewof config.send({\n name: \"Tom\",\n cards: cards.map((c) => c.name),\n question: \"Will I be rich?\",\n OPENAI_API_KEY,\n ADMIN_SERVICE_ACCOUNT,\n token: await user.getIdToken()\n });\n\n viewof reading.value = data;\n viewof reading.dispatchEvent(new Event(\"input\", { bubbles: true }));\n }\n})}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3943,"value":"### Health check","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3947,"value":"Inputs.button(\"trigger health check\", {\n required: true,\n reduce: async () => {\n return await Promise.all(\n Array.from({ length: 5 }).map(async () =>\n viewof config.send({\n health: true\n })\n )\n );\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3748,"value":"### Load Test\n\nWe had some difficulties with stability, the load test fires 5 overlapping requests to test the concurrent behaviour","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3753,"value":"viewof results = Inputs.button(\n \"trigger 5 API pipeline requests using local credentials\",\n {\n required: true,\n reduce: async () => {\n return await Promise.all(\n Array.from({ length: 5 }).map(async () =>\n viewof config.send({\n name: \"Tom\",\n cards: cards.map((c) => c.name),\n question: \"Will I be rich?\",\n OPENAI_API_KEY,\n ADMIN_SERVICE_ACCOUNT,\n token: await user.getIdToken()\n })\n )\n );\n }\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3792,"value":"### Debug Case From History","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3796,"value":"viewof debugConfig = Inputs.bind(\n Inputs.text({\n label: \"Enter config\"\n }),\n localStorageView(\"tarotConfig\")\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3804,"value":"parsedDebugConfig = {\n try {\n return JSON.parse(atob(debugConfig));\n } catch (err) {\n return invalidation;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3809,"value":"viewof debugResults = Inputs.button(\"run debug case\", {\n required: true,\n reduce: async () =>\n viewof config.send({\n ...parsedDebugConfig,\n OPENAI_API_KEY,\n ADMIN_SERVICE_ACCOUNT,\n token: await user.getIdToken()\n })\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3949,"value":"debugResults","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2901,"value":"### HTTP Endpoint","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":20,"value":"apiServer = endpoint(\n \"api\",\n async (req, res, ctx) => {\n debugger;\n // save in a DB, deduplication, rate limit, authentication\n const config = JSON.parse(\n atob(req.query.config || /* base64('{}') = */ \"e30=\")\n ); // name, cards, questions\n config.health = req.query.health !== undefined;\n config.token = req.headers[\"authorization\"]?.split(\" \")[1];\n config.OPENAI_API_KEY = ctx.secrets.OPENAI_API_KEY; // Mixin API_KEY from secrets\n config.ADMIN_SERVICE_ACCOUNT = ctx.secrets.secretadmin_service_account_key;\n try {\n const response = await viewof config.send(config);\n res.json(response);\n } catch (err) {\n res.status(500).json({\n error: err.toString()\n });\n }\n },\n {\n modifiers: [\"orchistrator\"],\n hostNotebook: \"@tomlarkworthy/tarot-backend\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2905,"value":"### API Request pipeline","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":33,"value":"viewof config = flowQueue({ timeout_ms: 45000 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":794,"value":"config","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3676,"value":"#### Validate User Input","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2123,"value":"validatedConfig = {\n var msg = \"unknown\";\n\n if (config.health) {\n return viewof config.respond(\"ok\"); // Check queue health if param is 'health'\n }\n\n if (!config.question || config.question == \"\") {\n msg = \"No question\";\n } else if (config.question.length >= QUESTION_MAX_LENGTH) {\n msg = \"Question too long\";\n } else if (!config.name || config.name == \"\") {\n msg = \"No name\";\n } else if (config.name.length >= NAME_MAX_LENGTH) {\n msg = \"Name too long\";\n } else {\n return config;\n }\n\n const err = new Error(msg);\n err.status = 400;\n viewof config.reject(err);\n throw new Error(`Invalid request ${msg}`);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3682,"value":"### User token validation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":771,"value":"currentUser = {\n if (!validatedConfig) return invalidation; // Processing stops when doing a health check here.\n try {\n return verifyIdToken(adminFirebase, validatedConfig.token);\n } catch (err) {\n viewof config.reject(err);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3686,"value":"#### Rate limit check","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":785,"value":"currentUsersRequestsInLastDay = requestsInLastDay(currentUser.uid)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":788,"value":"rateLimitOk = {\n if (currentUsersRequestsInLastDay < 20) {\n return true;\n } else {\n console.log(\"currentUsersRequestsInLastDay\", currentUsersRequestsInLastDay);\n const err = new Error(\"You have exceeded your quota\");\n err.status = 402;\n viewof config.reject(err);\n return invalidation;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3691,"value":"#### Call openAI","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":6,"value":"openapi_reponse = (rateLimitOk,\nrecordMeteredUse(currentUser.uid),\nfetchp(\"https://api.openai.com/v1/chat/completions\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n Authorization: `Bearer ${config.OPENAI_API_KEY}`\n },\n body: JSON.stringify({\n model: \"gpt-3.5-turbo\",\n messages: [\n {\n role: \"user\",\n content: `Pretend you are legendary fortune teller. \"${config.name}\" asks \"${config.question}\". The cards are \"${config.cards[0]}\" (past position), \"${config.cards[1]}\" (present) and the \"${config.cards[2]}\" (future). Please respond with just what you would say, including dramatic flare.`\n }\n ],\n ...settings\n })\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4403,"value":"import { fetchp } from \"@tomlarkworthy/fetchp\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3582,"value":"#### OpenAI Generation Settings","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1868,"value":"settings = ({\n temperature: 0.9,\n max_tokens: 500,\n top_p: 1,\n frequency_penalty: 0,\n presence_penalty: 0\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3586,"value":"#### OpenAI Response","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":14,"value":"result = openapi_reponse.status === 200\n ? openapi_reponse.json()\n : viewof config.reject(new Error(await openapi_reponse.text()))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3592,"value":"#### Record OpenAI Response in History","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1873,"value":"id = {\n try {\n return persistHistory({\n ...viewof config.value,\n settings,\n reading: result\n });\n } catch (err) {\n viewof config.respond(result);\n throw err;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1850,"value":"### history","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1854,"value":"persistHistory = async ({ name, cards, question, reading, settings } = {}) => {\n const snap = await adminFirebase\n .database()\n .ref(`/@tomlarkworthy/tarot-backend/calls/`)\n .push({\n name,\n question,\n cards,\n reading,\n settings,\n time: { \".sv\": \"timestamp\" }\n });\n return snap.key;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3599,"value":"#### OpenAI Text Safety Classification","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2090,"value":"// Not needed anymore\nclassification = 0 /*contentFilter({\n content: result.choices[0].text,\n API_KEY: config.OPENAI_API_KEY\n})*/","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":596,"value":"### Rate limiting","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":763,"value":"Inputs.button(\"record use\", {\n reduce: () => recordMeteredUse(user.uid)\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":661,"value":"recordMeteredUse = (uid) =>\n firebase\n .database()\n .ref(`/@tomlarkworthy/tarot-backend/users/${uid}/history/`)\n .push({ \".sv\": \"timestamp\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":635,"value":"requestsInLastDay = async (uid) => {\n const snap = await adminFirebase\n .database()\n .ref(`/@tomlarkworthy/tarot-backend/users/${uid}/history`)\n .once(\"value\");\n return Object.values(snap.val() || {}).reduce(\n (sum, timestamp) =>\n timestamp > Date.now() - 1000 * 60 * 60 * 24 ? sum + 1 : sum,\n 0\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1481,"value":"quota = htl.html`quota records`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2041,"value":"### Content Filter\n\nhttps://beta.openai.com/docs/engines/content-filter\n\n - 0: The text is safe.\n - 1: This text is sensitive. This means that the text could be talking about a sensitive topic, something political, religious, or talking about a protected class such as race or nationality.\n - 2: This text is unsafe. This means that the text contains profane language, prejudiced or hateful language, something that could be NSFW, or text that portrays certain groups/people in a harmful manner.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2046,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2057,"value":"viewof exampleFilter = Inputs.button(\"testContentFilter\", {\n reduce: async () => {\n const text = loremIpsum({\n count: 1, // Number of \"words\", \"sentences\", or \"paragraphs\"\n format: \"plain\", // \"plain\" or \"html\"\n paragraphLowerBound: 3, // Min. number of sentences per paragraph.\n paragraphUpperBound: 7, // Max. number of sentences per paragarph.\n random: Math.random, // A PRNG function\n sentenceLowerBound: 5, // Min. number of words per sentence.\n sentenceUpperBound: 15, // Max. number of words per sentence.\n suffix: \"\\n\", // Line ending, defaults to \"\\n\" or \"\\r\\n\" (win32)\n units: \"paragraph\" // paragraph(s), \"sentence(s)\", or \"word(s)\"\n });\n return await contentFilter({\n API_KEY: OPENAI_API_KEY,\n content: text\n });\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2667,"value":"#### uploadObject to Cloud Storage","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2639,"value":"uploadObject = async ({ name, access_token, content_type, content } = {}) => {\n /*\n curl -X POST --data-binary @data.txt \\\n -H \"Authorization: Bearer $OAUTH2_TOKEN\" \\\n -H \"Content-Type: application/txt\" \\\n \"https://storage.googleapis.com/upload/storage/v1/b/larkworthy-dfb11.appspot.com/o?uploadType=media&name=data.txt\"\n */\n const bucket = \"larkworthy-dfb11.appspot.com\";\n\n const response = await fetch(\n `https://storage.googleapis.com/upload/storage/v1/b/${bucket}/o?uploadType=media&name=${encodeURIComponent(\n name\n )}`,\n {\n method: \"POST\",\n headers: {\n \"content-type\": content_type,\n Authorization: `Bearer ${access_token}`\n },\n body: content\n }\n );\n if (response.status !== 200) throw new Error(`${await response.text()}`);\n else return response.json();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2470,"value":"### Generate Social Image","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2474,"value":"fortuneImg = {\n try {\n return socialImage({\n shareId: id\n });\n } catch (err) {\n viewof config.respond(result);\n throw err;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2488,"value":"fortuneImageData = await fetch(fortuneImg)\n .then((res) => res.blob())\n .then((res) => res.arrayBuffer())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2502,"value":"access_token = getAccessTokenFromServiceAccount(config.ADMIN_SERVICE_ACCOUNT)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2652,"value":"fortuneImageData","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2681,"value":"#### uploadImageToCloud","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2501,"value":"cloudImage = ({\n upload: await uploadObject({\n name: `@tomlarkworthy/tarot-backend/images/${id}`,\n content_type: \"image/jpeg\",\n access_token,\n content: fortuneImageData\n }),\n id\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2672,"value":"#### Render page()","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2692,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3566,"value":"### upload share page","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2660,"value":"uploads = ({\n html: await uploadObject({\n name: `@tomlarkworthy/tarot-backend/pages/${id}`,\n content_type: \"text/html\",\n access_token,\n content: page({\n shareId: id,\n name: config.name,\n question: config.question,\n imgURL: cloudImage.upload.mediaLink\n })\n }),\n img: cloudImage.upload,\n id\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3605,"value":"#### End of Pipeline","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":12,"value":"responder = {\n uploads;\n try {\n if (classification == 0) {\n viewof config.respond({\n id,\n reading: result.choices[0].message.content\n });\n } else {\n const err = new Error(\n `Response was classified as sensative or unsafe. Try a different question.`\n );\n err.status = 400;\n throw err;\n }\n } catch (err) {\n viewof config.reject(err);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4291,"value":"### clientside user","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":4277,"value":"user = {\n try {\n if (getContext().serverless === true) {\n return invalidation;\n }\n } catch (err) {}\n return (await firebase.auth().signInAnonymously()).user;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3561,"value":"### manual deploy index.html","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2723,"value":"Inputs.button(\"update index.html\", {\n reduce: async () => {\n await uploadObject({\n name: `@tomlarkworthy/tarot-backend/pages/index.html`,\n content_type: \"text/html\",\n access_token: await getAccessTokenFromServiceAccount(\n ADMIN_SERVICE_ACCOUNT\n ),\n content: page({})\n });\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4356,"value":"### Test server","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":4320,"value":"deploy(\n \"index\",\n (req, res) => {\n res.send(page({ debug: true }));\n },\n {\n hostNotebook: \"@tomlarkworthy/tarot-backend\"\n }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3821,"value":"### Debugging\n\nWe will allow the notebook state to be serialized","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3883,"value":"import { notebookSnapshot, modules } from \"@tomlarkworthy/notebook-snapshot\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3917,"value":"trackingVariable_e3366d24de62 = true","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3958,"value":"By exporting the state in a endoint we can sample the state of the server via a flatdata collector.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3912,"value":"endpoint(\n \"variables\",\n async (req, res) => {\n res.json(\n (await notebookSnapshot(\"trackingVariable_e3366d24de62\")).map(\n (variable) => ({\n state: variable.state,\n name: variable.name,\n // Note these cells might contain personal information, so we only allow errors values to leave the environment\n ...(variable.state === \"rejected\" && { value: variable.value })\n })\n )\n );\n },\n {\n hostNotebook: \"@tomlarkworthy/tarot-backend\"\n }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":725,"value":"## Firebase Backends","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":612,"value":"import {\n firebase,\n DocView\n} with { userConfig as firebaseConfig } from \"@tomlarkworthy/firebase\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":706,"value":"import { firebase as adminFirebase } with { adminConfig as firebaseConfig } from \"@tomlarkworthy/firebase\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":607,"value":"userConfig = ({\n name: \"userbase\",\n apiKey: \"AIzaSyBN4bxw6d0cM0CGPNzRrkRlBqwFQnPLdN4\",\n authDomain: \"larkworthy-dfb11.firebaseapp.com\",\n databaseURL:\n \"https://larkworthy-dfb11-default-rtdb.europe-west1.firebasedatabase.app\",\n projectId: \"larkworthy-dfb11\",\n storageBucket: \"larkworthy-dfb11.appspot.com\",\n messagingSenderId: \"786910701676\",\n appId: \"1:786910701676:web:8d7dd002acf3b78c74d049\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":704,"value":"adminConfig = ({\n name: \"adminbase\",\n apiKey: \"AIzaSyBN4bxw6d0cM0CGPNzRrkRlBqwFQnPLdN4\",\n authDomain: \"larkworthy-dfb11.firebaseapp.com\",\n databaseURL:\n \"https://larkworthy-dfb11-default-rtdb.europe-west1.firebasedatabase.app\",\n projectId: \"larkworthy-dfb11\",\n storageBucket: \"larkworthy-dfb11.appspot.com\",\n messagingSenderId: \"786910701676\",\n appId: \"1:786910701676:web:8d7dd002acf3b78c74d049\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3007,"value":"## Utilities","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3011,"value":"### findCardsByName","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1923,"value":"findCardsByName = async (cardNames) =>\n await promiseRecursive(\n cardNames\n .map((cardName) => cardData.cards.find((cd) => cd.name === cardName))\n .map((c) => ({\n name: c.name,\n imgURL: fileAttachments[c.img].url()\n }))\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3015,"value":"### promiseRecursive","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1970,"value":"// Thanks you trincot!\n// https://stackoverflow.com/a/44072329/862295\n// A wonderful peice of code contralises all promises in a nexted object to the root.\nfunction promiseRecursive(obj) {\n const getPromises = (obj) =>\n Object.keys(obj).reduce(\n (acc, key) =>\n Object(obj[key]) !== obj[key]\n ? acc\n : acc.concat(\n typeof obj[key].then === \"function\"\n ? [[obj, key]]\n : getPromises(obj[key])\n ),\n []\n );\n const all = getPromises(obj);\n return Promise.all(all.map(([obj, key]) => obj[key])).then(\n (responses) => (\n all.forEach(([obj, key], i) => (obj[key] = responses[i])), obj\n )\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4059,"value":"### textFit v2.3.1 11/2014 by STRML (strml.github.com) (see license in source)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":449,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":439,"value":"loremIpsum = (await require(\"https://bundle.run/lorem-ipsum@2.0.4\")).loremIpsum","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":553,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":3002,"value":"## Dependencies","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":8,"value":"import {\n getCards,\n images as cardData,\n fileAttachments\n} from \"@triptych/tarot-utilities\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":17,"value":"import { endpoint } from \"@endpointservices/webcode\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":25,"value":"import { flowQueue } from \"@tomlarkworthy/flow-queue\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":49,"value":"import { localStorageView } from \"@tomlarkworthy/local-storage-view\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":505,"value":"import { colorPicker } from \"@shaunlebron/color-picker\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":777,"value":"import {\n verifyIdToken,\n getAccessTokenFromServiceAccount\n} from \"@tomlarkworthy/firebase-admin\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":809,"value":"import { view, bindOneWay } from \"@tomlarkworthy/view\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1044,"value":"import { verticalSliders } from \"@tomlarkworthy/vertical-sliders\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1351,"value":"import { juice } from \"@tomlarkworthy/juice\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1718,"value":"import { toc } from \"@nebrius/indented-toc\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2447,"value":"import { deploy, getContext } from \"@endpointservices/serverless-cells\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4227,"value":"import { footer } from \"@endpointservices/footer-with-backups\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4068,"value":"### Analytics & Backup","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1310,"value":"footer","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 2f:"$2e:body"