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/components/widgets/inputs/NumberInput.vue

@@ -5,6 +5,8 @@
 		:label="label"
 		:spellcheck="false"
 		:disabled="disabled"
+		:style="minWidth > 0 ? `min-width: ${minWidth}px` : ''"
+		:tooltip="tooltip"
 		@textFocused="() => onTextFocused()"
 		@textChanged="() => onTextChanged()"
 		@cancelTextChange="() => onCancelTextChange()"
@@ -107,6 +109,8 @@ export default defineComponent({
 		incrementBehavior: { type: String as PropType<IncrementBehavior>, default: "Add" },
 		incrementFactor: { type: Number as PropType<number>, default: 1 },
 		disabled: { type: Boolean as PropType<boolean>, default: false },
+		minWidth: { type: Number as PropType<number>, default: 0 },
+		tooltip: { type: String as PropType<string | undefined>, required: false },
 
 		// Callbacks
 		incrementCallbackIncrease: { type: Function as PropType<() => void>, required: false },
@@ -122,7 +126,7 @@ export default defineComponent({
 		onTextFocused() {
 			if (this.value === undefined) this.text = "";
 			else if (this.unitIsHiddenWhenEditing) this.text = `${this.value}`;
-			else this.text = `${this.value}${this.unit}`;
+			else this.text = `${this.value}${unPluralize(this.unit, this.value)}`;
 
 			this.editing = true;
 
@@ -201,7 +205,7 @@ export default defineComponent({
 
 			const displayValue = Math.round(value * roundingPower) / roundingPower;
 
-			return `${displayValue}${this.unit}`;
+			return `${displayValue}${unPluralize(this.unit, value)}`;
 		},
 	},
 	watch: {
@@ -222,4 +226,9 @@ export default defineComponent({
 	},
 	components: { FieldInput },
 });
+
+function unPluralize(unit: string, value: number): string {
+	if (value === 1 && unit.endsWith("s")) return unit.slice(0, -1);
+	return unit;
+}
 </script>