Excalidraw Scripting - Daily Quote Illustrations in Obsidian with Templater, Excalidraw and OpenAI

readme.md

Watch this youtube video to understand the background to this gist. Download the Demo Obsidian Vault ZIP following the link. Download DNP.md, or open it in "Raw" view to copy.

DNP.md

<%* const ea = ExcalidrawAutomate; const imageSize = 1024x1024; const instruction = "Return a single message with the generated image prompt in a codeblock"; const systemPrompt = "Your task involves transforming a user-provided quote into a detailed and imaginative illustration. Craft a visual representation that captures the essence of the quote and resonates well with a broad audience. Additionally, provide preferences for styling, such as the chosen medium and artistic direction, to guide the image creation process. Ensure the resulting image remains text-free. Your task output should comprise a descriptive and detailed narrative aimed at facilitating the creation of a captivating illustration from the quote.";

//--------------------------------------- //Get Quote from stoic quotes //--------------------------------------- const quoteString = await request({url: "https://stoic-quotes.com/api/quote"}); const quoteJSON = JSON.parse(quoteString); const {text, author} = quoteJSON; if(!text) return;

const filename = text.replaceAll(/[<>:"\|?*#]/g," ").substring(0,25)+"..."; const foldername = tp.file.folder(false);

//--------------------------------------- //Generate image //--------------------------------------- //1. Generate Image Prompt based on quote const OPENAI_API_KEY = ea.plugin.settings.openAIAPIToken; if(!OPENAI_API_KEY || OPENAI_API_KEY === "") { new Notice("You must first configure your API key in Excalidraw Plugin Settings"); return; } const requestObject = { text, systemPrompt, instruction }; const result = await ea.postOpenAI(requestObject); console.log({result, json:result?.json}); if(!result?.json?.hasOwnProperty("choices")) { new Notice(Something went wrong: ${result?.json?.error?.message}); return; } const content = ea.extractCodeBlocks(result.json.choices[0]?.message?.content)[0]?.data; if(!content) { new Notice("Unexpected error extracting the image prompt from the response"); return; } new Notice("Image prompt ready");

//2. Generate image using Dall-e const generateImage = async(text) => { const requestObject = { text, imageGenerationProperties: {size: imageSize, n:1}, }; const result = await ea.postOpenAI(requestObject); console.log({result, json:result?.json}); if(!result?.json?.data?.[0]?.url) { new Notice(Something went wrong with generating the image: ${result?.json?.error?.message}); return; } new Notice(Image is ready: ${result.json.data[0].url}); return result.json.data[0].url; }

const imageURL = await generateImage(content); if(!imageURL) return;

//3. Save image as local file const imageResult = await requestUrl(imageURL); if(!imageResult || imageResult.status !== 200) { new Notice("Unexpected error downloading the image"); console.log(imageResult); return; } const imageFilePath = await ea.getNewUniqueFilepath(filename+".png",foldername); const imageFile = await app.vault.createBinary(imageFilePath,imageResult.arrayBuffer); new Notice("Image file saved");

//--------------------------------------- //Generate Excalidraw Drawing //--------------------------------------- ea.reset(); const textId = ea.generateElementId(); const imageId = await ea.addImage(0,0,imageFile,false,false); const imageEl = ea.getElement(imageId); ea.style.backgroundColor = "transparent"; const rectId = ea.addText( 0,imageEl.y+imageEl.height+30,${text}\n${author}, {wrapAt:80,textAlign:"center",box:"box",boxPadding:10}, textId ); const rectEl = ea.getElement(rectId); const textEl = ea.getElement(textId); rectEl.x += (imageEl.width-rectEl.width)/2; textEl.x += (imageEl.width-rectEl.width)/2; rectEl.strokeColor = "transparent"; const fpath = await ea.create({ filename, foldername, onNewPane: true, plaintext: Author:: [[${author}]]\n\n> ${text} ^quote }); //Embed image into Markdown document tR += ![[${fpath}]]\n; %>