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.
-
-
Save zsviczian/dfd9e56b36147b4ebb7fbcda7433cd3a to your computer and use it in GitHub Desktop.
<%*
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
;
%>