2c:null 2d:["$","title",null,{"children":"Front-end image generation test | Denis Schluppeck | Observable"}] 32:T5df,const output = html`

`; const button = html``; const slug = `${randomVerb}-the-${randomNoun}`.toLowerCase().replace(/[^a-z0-9]+/g, "-"); const downloadButton = (img) => html` (e.currentTarget.style.background = "#1d4ed8")} onmouseout=${(e) => (e.currentTarget.style.background = "#2563eb")} > Download PNG `; button.onclick = async () => { button.disabled = true; output.textContent = "Generating…"; try { const img = await puter.ai.txt2img(fullPrompt); img.style.width = "512px"; img.style.height = "512px"; img.style.display = "block"; img.style.borderRadius = "8px"; output.replaceChildren(downloadButton(img), img); } catch (error) { output.textContent = `Error: ${error?.message ?? JSON.stringify(error)}`; } finally { button.disabled = false; } }; display(html`

${button}

${fullPrompt}

${slug}

${output}

`);33:[] 30:{"id":"96728eebf1baa0d6","slug":"front-end-image-generation-test","title":"Front-end image generation test","thumbnail":"8d6e3b7a472ca812379835f90df5d81555d51b86f6fb906f9f2c103e77104944","access_level":"public","create_time":"$D2026-10-13T09:23:47.107Z","update_time":"$D2026-10-13T10:21:04.893Z","view_time":null,"first_public_time":"$D2026-10-13T10:11:57.343Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"a764b52c2ede58a1","login":"schluppeck","name":"Denis Schluppeck","avatar_url":"https://avatars-next.observableusercontent.com/439d4d45c16d80d39003d3b7e23ab8422ccbcf829bec434f676a4ca2aeb54d72","tier":"starter_2024","bio":"Neuroscientist at University of Nottingham @nottingham-neuroimaging\n #matlab #rstats #julialang"},"version":98,"publish_version":98,"role":null,"authored":false,"authors":[{"type":"individual","id":"f89e2a2af4e8359b","login":"schluppeck","name":"Denis Schluppeck","avatar_url":"https://avatars-next.observableusercontent.com/439d4d45c16d80d39003d3b7e23ab8422ccbcf829bec434f676a4ca2aeb54d72","tier":null,"bio":"Neuroscientist at University of Nottingham @nottingham-neuroimaging\n #matlab #rstats #julialang"}],"members":[{"type":"team","id":"a764b52c2ede58a1","login":"schluppeck","name":"Denis Schluppeck","avatar_url":"https://avatars-next.observableusercontent.com/439d4d45c16d80d39003d3b7e23ab8422ccbcf829bec434f676a4ca2aeb54d72","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Front-end image generation test","cells":[{"id":1,"value":"# Front-end image generation test\n\nUsing `puter.ai` javascript library... will this work?\n\nIf you want to generate an image, you will have to link a google account or similar to `puter.ai` on first use. There looks to be a pretty generous free tier bit, but if you refresh many times and try to create lots of images, you may run into rate limits or run out of credit $5/$10?\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"viewof startingLetter","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"viewof randomVerb","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"viewof randomNoun","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$32","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"# Notes and imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"import {viewof randomVerb, viewof randomNoun, viewof startingLetter} from \"@schluppeck/verb-the-noun\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"import {puter} from \"npm:@heyputer/puter.js\";","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"fullPrompt = defaultPromptWrapper + \" \" + randomVerb + \" the \" + randomNoun","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"defaultPromptWrapper = \"Create a picture using strong colors and a witty feel that capture the following slightly, whimiscal life motto. A cartoony, stylyised feel would be preferred: \"\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"2"}} 31:"$30:body"