Add Negative Prompt field

image-generator-demo/src/app/app.element.scss

@@ -73,8 +73,9 @@
 	border-radius: 0.5rem;
 }
 
-.config-prompt {
+.config-prompts {
 	display: flex;
+	flex-direction: column;
 	gap: 0.5rem;
 }
 
@@ -118,10 +119,6 @@
 		color: #FFFF;
 	}
 
-	&.prompt {
-		width: 512px;
-	}
-
 	&.seed {
 		width: 96px;
 		appearance: textfield;
@@ -134,8 +131,32 @@
 	}
 }
 
+.prompt {
+	flex: 1 0 0;
+}
+
 .config-field-group {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
 	position: relative;
+
+	.pre-icon {
+		&.red {
+			color: rgb(220, 53, 69);
+			font-size: 1.333rem;
+		}
+		&.green {
+			color: rgb(25, 135, 84);
+			font-size: 1.15rem;
+		}
+	}
+}
+
+.config-row {
+	display: flex;
+	width: 768px;
+	gap: 0.5rem;
 }
 
 .seed-refresh {

image-generator-demo/src/app/app.element.ts

@@ -29,6 +29,7 @@ export class AppElement extends LitElement {
 	@state() loading = true;
 
 	@state() prompt = "";
+	@state() negPrompt = "";
 	@state() seed = randomSeed();
 
 	protected override createRenderRoot = () => this;
@@ -41,10 +42,16 @@ export class AppElement extends LitElement {
 	}
 
 	protected override willUpdate(changes: PropertyValues<this>): void {
-		if (changes.has("prompt") || changes.has("seed") || changes.has("imageCaptureUrl")) {
+		if (
+			changes.has("prompt")
+			|| changes.has("negPrompt")
+			|| changes.has("seed")
+			|| changes.has("imageCaptureUrl")
+		) {
 			// TODO: Send parameters to model
 			console.log("changes:", {
 				prompt: this.prompt,
+				negPrompt: this.negPrompt,
 				seed: this.seed,
 				imageCaptureUrl: this.imageCaptureUrl,
 			});
@@ -91,6 +98,10 @@ export class AppElement extends LitElement {
 		this.prompt = (event.target as HTMLInputElement).value;
 	}
 
+	updateNegPrompt(event: Event): void {
+		this.negPrompt = (event.target as HTMLInputElement).value;
+	}
+
 	refreshSeed(): void {
 		this.seed = randomSeed();
 	}
@@ -164,39 +175,61 @@ export class AppElement extends LitElement {
 					<div class="image-capture placeholder"></div>
 				`}
 
-				<div class="config config-prompt h-center v-end"
+				<div class="config config-prompts h-center v-end"
 					@keydown=${this.stopTextInputBubbling}
 					@keyup=${this.stopTextInputBubbling}
 				>
-					<input
-						class="config-field prompt"
-						type="text"
-						aria-label="Prompt"
-						placeholder="Enter a prompt to customize the output"
-						.value=${this.prompt}
-						@change=${this.updatePrompt}
-						@keydown=${(event: KeyboardEvent) => {
-							if (event.key === "Enter") {
-								event.preventDefault();
-								this.updatePrompt(event);
-							}
-						}}
-					/>
-					<div class="config-field-group">
+					<div class="config-field-group prompt">
+						<sts-icon class="pre-icon green" icon="check"></sts-icon>
 						<input
-							class="config-field seed"
-							type="number"
-							aria-label="Seed"
-							.value=${this.seed.toString()}
-							min="1"
-							max="99999"
+							class="config-field prompt"
+							type="text"
+							aria-label="Affirmative Prompt"
+							placeholder="Enter an affirmative prompt to customize the output"
+							.value=${this.prompt}
+							@change=${this.updatePrompt}
+							@keydown=${(event: KeyboardEvent) => {
+								if (event.key === "Enter") {
+									event.preventDefault();
+									this.updatePrompt(event);
+								}
+							}}
 						/>
-						<button
-							class="seed-refresh"
-							@click=${this.refreshSeed}
-						>
-							<sts-icon icon="rotate"></sts-icon>
-						</button>
+					</div>
+					<div class="config-row">
+						<div class="config-field-group prompt">
+							<sts-icon class="pre-icon red" icon="xmark"></sts-icon>
+							<input
+								class="config-field prompt"
+								type="text"
+								aria-label="Negative Prompt"
+								placeholder="Enter a negative prompt to customize the output"
+								.value=${this.negPrompt}
+								@change=${this.updateNegPrompt}
+								@keydown=${(event: KeyboardEvent) => {
+									if (event.key === "Enter") {
+										event.preventDefault();
+										this.updateNegPrompt(event);
+									}
+								}}
+							/>
+						</div>
+						<div class="config-field-group">
+							<input
+								class="config-field seed"
+								type="number"
+								aria-label="Seed"
+								.value=${this.seed.toString()}
+								min="1"
+								max="99999"
+							/>
+							<button
+								class="seed-refresh"
+								@click=${this.refreshSeed}
+							>
+								<sts-icon icon="rotate"></sts-icon>
+							</button>
+						</div>
 					</div>
 				</div>
 			</div>

studio-ui/src/lib/icon.element.ts

@@ -24,6 +24,10 @@ import fasFloppyDisk from "@fortawesome/fontawesome-pro/svgs/solid/floppy-disk.s
 import farSkeleton from "@fortawesome/fontawesome-pro/svgs/regular/skeleton.svg?raw";
 import farBone from "@fortawesome/fontawesome-pro/svgs/regular/bone.svg?raw";
 import fasBrightness from "@fortawesome/fontawesome-pro/svgs/solid/brightness.svg?raw";
+import fasCheck from "@fortawesome/fontawesome-pro/svgs/solid/check.svg?raw";
+import fasXmark from "@fortawesome/fontawesome-pro/svgs/solid/xmark.svg?raw";
+import fasCircleCheck from "@fortawesome/fontawesome-pro/svgs/solid/circle-check.svg?raw";
+import fasCircleXmark from "@fortawesome/fontawesome-pro/svgs/solid/circle-xmark.svg?raw";
 
 import styles from "./icon.element.scss?inline";
 
@@ -53,7 +57,10 @@ function renderSvg(iconId: string) {
 		"bone": () => farBone,
 		"bwd-fast": () => fasBwdFast,
 		"bwd-step": () => fasBwdStep,
+		"check": () => fasCheck,
+		"circle-check": () => fasCircleCheck,
 		"circle-question": () => fasCircleQuestion,
+		"circle-xmark": () => fasCircleXmark,
 		"caret-right": () => fasCaretRight,
 		"crosshairs": () => farCrosshairs,
 		"cube": () => farCube,
@@ -70,6 +77,7 @@ function renderSvg(iconId: string) {
 		"skeleton": () => farSkeleton,
 		"up-down-left-right": () => farUpDownLeftRight,
 		"video": () => farVideo,
+		"xmark": () => fasXmark,
 		_: () => null,
 	});