Integrate Stable Diffusion with the Imaginate layer (#784)

* Add AI Artist layer

* WIP add a button to download the rendered folder under an AI Artist layer

* Successfully download the correct image

* Break out image downloading JS into helper function

* Change file download from using data URLs to blob URLs

* WIP rasterize to blob

* Remove dimensions from AI Artist layer

* Successfully draw rasterized image on layer after calculation

* Working txt2img generation based on user prompt

* Add img2img and the main parameters

* Fix ability to rasterize multi-depth documents with blob URL images by switching them to base64

* Fix test

* Rasterize with artboard background color

* Allow aspect ratio stretch of AI Artist images

* Add automatic resolution choosing

* Add a terminate button, and make the lifecycle more robust

* Add negative prompt

* Add range bounds for parameter inputs

* Add seed

* Add tiling and restore faces

* Add server status check, server hostname customization, and resizing layer to fit AI Artist resolution

* Fix background color of infinite canvas rasterization

* Escape prompt text sent in the JSON

* Revoke blob URLs when cleared/replaced to reduce memory leak

* Fix welcome screen logo color

* Add PreferencesMessageHandler

* Add persistent storage of preferences

* Fix crash introduced in previous commit when moving mouse on page load

* Add tooltips to the AI Artist layer properties

* Integrate AI Artist tool into the raster section of the tool shelf

* Add a refresh button to the connection status

* Fix crash when generating and switching to a different document tab

* Add persistent image storage to AI Artist layers and fix duplication bugs

* Add a generate with random seed button

* Simplify and standardize message names

* Majorly improve robustness of networking code

* Fix race condition causing default server hostname to show disconnected when app loads with AI Artist layer selected (probably, not confirmed fixed)

* Clean up messages and function calls by changing arguments into structs

* Update API to more recent server commit

* Add support for picking the sampling method

* Add machinery for filtering selected layers with type

* Replace placeholder button icons

* Improve the random icon by tilting the dice

* Use selected_layers() instead of repeating that code

* Fix borrow error

* Change message flow in progress towards fixing #797

* Allow loading image on non-active document (fixes #797)

* Reduce code duplication with rasterization

* Add AI Artist tool and layer icons, and remove ugly node layer icon style

* Rename "AI Artist" codename to "Imaginate" feature name

Co-authored-by: otdavies <oliver@psyfer.io>
Co-authored-by: 0hypercube <0hypercube@gmail.com>

frontend/src/utility-functions/files.ts

@@ -52,3 +52,31 @@ export async function upload<T extends "text" | "data">(acceptedExtensions: stri
 }
 export type UploadResult<T> = { filename: string; type: string; content: UploadResultType<T> };
 type UploadResultType<T> = T extends "text" ? string : T extends "data" ? Uint8Array : never;
+
+export function blobToBase64(blob: Blob): Promise<string> {
+	return new Promise((resolve) => {
+		const reader = new FileReader();
+		reader.onloadend = (): void => resolve(typeof reader.result === "string" ? reader.result : "");
+		reader.readAsDataURL(blob);
+	});
+}
+
+export async function replaceBlobURLsWithBase64(svg: string): Promise<string> {
+	const splitByBlobs = svg.split(/(?<=")(blob:.*?)(?=")/);
+	const onlyBlobs = splitByBlobs.filter((_, i) => i % 2 === 1);
+
+	const onlyBlobsConverted = onlyBlobs.map(async (blobURL) => {
+		const data = await fetch(blobURL);
+		const dataBlob = await data.blob();
+		return blobToBase64(dataBlob);
+	});
+	const base64Images = await Promise.all(onlyBlobsConverted);
+
+	const substituted = splitByBlobs.map((segment, i) => {
+		if (i % 2 === 0) return segment;
+
+		const blobsIndex = Math.floor(i / 2);
+		return base64Images[blobsIndex];
+	});
+	return substituted.join("");
+}