adding prompt builder feature

index.css

@@ -23,6 +23,7 @@ h4 {
 	display: flex;
 	flex-direction: column;
 	height: 100%;
+	overflow: hidden;
 }
 
 #rows {
@@ -37,14 +38,14 @@ h4 {
 	top: 0;
 	left: 0;
 	width: calc(40% + 20px);
-	height: 100%;
+	height: calc(100% - 55px);
 	display: flex;
 	flex-direction: column;
 	flex-wrap: wrap;
 	opacity: 1;
 	line-height: 140%;
 	box-sizing: border-box;
-	padding: 20px;
+	padding: 20px 20px 60px 20px;
 	overflow: auto;
 	transition: opacity 50ms 100ms linear;
 }
@@ -272,10 +273,11 @@ label.no_matches {
 }
 
 label.category {
+	height: initial;
 	color: #00d5c0;
 	font-weight: bold;
 	padding-bottom: 5px;
-	margin: 10px 40px 0 0;
+	margin: 10px 40px 5px 0;
 	border-bottom: 1px solid #333;
 	opacity: 1;
 }
@@ -576,12 +578,11 @@ input[type="checkbox"]:checked::before {
 	color: #ffe300;
 	font-size: 12px;
 	font-weight: bold;
-	transition: opacity 100ms 200ms linear;
 }
 
 .information_section .buttons div:hover {
 	opacity: 1;
-	transition: opacity 100ms 0ms linear;
+	transition: opacity 100ms linear;
 }
 
 #info_search_input {
@@ -1023,6 +1024,378 @@ input[type="checkbox"]:checked::before {
 	display: none;
 }
 
+#prompt_builder {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+	position: relative;
+	z-index: 2;
+	height: 54px;
+	padding: 10px;
+	border-top: 1px solid #333;
+	box-sizing: border-box;
+	background-color: #000;
+	transition: height 100ms 0ms ease-out;
+}
+
+#prompt_builder.show {
+	height: 97px;
+	transition: height 200ms 200ms ease-out;
+}
+
+#prompt_selector {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	cursor: pointer;
+}
+
+#prompt_selector > div {
+	display: flex;
+	flex-direction: row;
+	gap: 10px;
+	align-items: center;
+	flex-grow: 1;
+	font-size: 12px;
+	overflow: scroll;
+	-ms-overflow-style: none; /* IE and Edge */
+	scrollbar-width: none; /* Firefox */
+}
+
+#prompt_selector div::-webkit-scrollbar {
+	display: none; /* Chrome, Safari and Opera */
+}
+
+#prompt_builder_title {
+	padding-left: 9px;
+	color: #777;
+	white-space: nowrap;
+	cursor: default;
+}
+
+.prompt_artist {
+	display: flex;
+	gap: 5px;
+	align-items: center;
+	flex-direction: row;
+	padding: 5px 5px;
+	border-radius: 50px;
+	border: 1px solid #333;
+	background-color: #222;
+}
+
+.prompt_artist_count {
+	width: 20px;
+	text-align: center;
+	border-radius: 50px;
+	white-space: nowrap;
+	color: #ffe300;
+	font-weight: bold;
+	cursor: default;
+}
+
+.prompt_artist_left,
+.prompt_artist_right,
+.prompt_artist_remove {
+	padding: 0px 6px;
+	opacity: 0.8;
+	border: 1px solid rgba(0, 255, 230, 0.5);
+	border-radius: 50px;
+	cursor: pointer;
+	white-space: nowrap;
+	background-color: black;
+	color: #00ffe6;
+	font-weight: bold;
+}
+
+.prompt_artist_left:hover,
+.prompt_artist_right:hover,
+.prompt_artist_remove:hover {
+	opacity: 1;
+	transition: opacity 100ms linear;
+}
+
+#prompt_artist_add {
+	display: flex;
+	align-items: center;
+	cursor: pointer;
+}
+#prompt_artist_add div {
+	padding: 0px 10px;
+	border: 2px solid rgba(0, 255, 230, 0.5);
+	border-radius: 50px;
+	color: #00ffe6;
+	white-space: nowrap;
+	opacity: 0.7;
+}
+#prompt_artist_add:hover div {
+	opacity: 1;
+}
+
+.prompt_artist_remove {
+	border-color: rgba(222, 0, 0, 0.5);
+	color: #f00;
+}
+
+.prompt_artist_remove span {
+	display: block;
+}
+
+.prompt_artist_intensity,
+.prompt_artist_combine {
+	display: flex;
+	align-items: center;
+	gap: 5px;
+	height: 21px;
+	position: relative;
+	border: 1px solid #00ffe6;
+	border-radius: 50px;
+	box-sizing: border-box;
+	padding: 0px 10px;
+	cursor: pointer;
+	background-color: rgba(0, 255, 230, 0.2);
+	opacity: 0.8;
+}
+
+.prompt_artist_intensity:hover,
+.prompt_artist_combine:hover {
+	opacity: 1;
+}
+
+.prompt_artist_intensity::after,
+.prompt_artist_combine::after {
+	content: '';
+	min-width: 10px;
+	height: 6px;
+	background-color: #00ffe6;
+	clip-path: polygon(5% 0, 95% 0, 100% 15%, 55% 100%, 45% 100%, 0 15%);
+	position: relative;
+	z-index: 0;
+	left: -15px;
+	margin-right: -15px;
+	/* the arrow isn't clickable, so we position it over the select */
+	/* and the selects' min-widths proves extra space for it */
+}
+
+.prompt_artist select {
+	appearance: none;
+	position: relative;
+	z-index: 1;
+	width: 100%;
+	height: 21px;
+	margin: 0;
+	padding: 0 1px 0 0;
+	border: none;
+	outline: none;
+	background-color: transparent;
+	color: #00d5c0;
+	font-family: inherit;
+	font-size: inherit;
+	cursor: inherit;
+}
+
+.prompt_artist select::-ms-expand {
+	display: none;
+}
+
+.prompt_artist_intensity select {
+	min-width: 4ch;
+}
+
+.prompt_artist_combine select {
+	min-width: 7ch;
+}
+
+.prompt_artist input {
+	width: 150px;
+	height: 21px;
+	border: 1px solid #ffe300;
+	border-radius: 50px;
+	box-sizing: border-box;
+	padding: 0px 10px;
+	background-color: rgba(255, 227, 0, 0.2);
+	color: #ffe300;
+	font-family: inherit;
+	font-size: inherit;
+	opacity: 0.8;
+}
+
+.prompt_artist input:focus{
+	outline: none;
+	border-width: 2px;
+	opacity: 1;
+}
+
+.prompt_artist input:hover {
+	opacity: 1;
+}
+
+.prompt_artist input:valid {
+	border-color: #00ffe6;
+	background-color: #00ffe62e;
+	color: #00ffe6;
+}
+
+#prompt_artist_search {
+	display: none;
+	width: 180px;
+	max-height: 100px;
+	overflow-y: scroll;
+	position: absolute;
+	left: 0;
+	bottom: 91px;
+	border-radius: 10px;
+	border: 1px solid #333;
+	box-sizing: border-box;
+	padding: 10px;
+	background-color: #222;
+	box-shadow: 0 5px 10px #00000090;
+	font-size: 12px;
+	opacity: 0;
+	transition: left 200ms ease-out;
+}
+
+#prompt_artist_search.show {
+	display: block;
+	opacity: 1;
+}
+
+#prompt_artist_search div {
+	opacity: 0.5;
+	cursor: pointer;
+}
+
+#prompt_artist_search div:hover {
+	opacity: 0.8;
+}
+
+#prompt_builder #prompt_builder_hide {
+	visibility: hidden;
+	flex-grow: 0;
+	width: 33px;
+	height: 33px;
+	padding: 0 9px;
+	box-sizing: border-box;
+	cursor: pointer;
+	color: #00ffe6;
+	overflow: hidden;
+	box-shadow: -5px 0 5px #000000;
+	transition: visibility 0ms 500ms;
+}
+
+#prompt_builder #prompt_builder_hide::after {
+	content: '';
+	max-width: 14px;
+	height: 8px;
+	clip-path: polygon(5% 0, 95% 0, 100% 15%, 55% 100%, 45% 100%, 0 15%);
+	background-color: #00ffe6;
+	padding: 0 9px;
+}
+
+#prompt_builder.show #prompt_builder_hide {
+	visibility: visible;
+	opacity: 0.8;
+}
+
+#prompt_builder.show #prompt_builder_hide:hover {
+	opacity: 1;
+}
+
+#prompt_result {
+	display: flex;
+	flex-direction: row;
+	gap: 10px;
+	font-size: 12px;
+}
+
+#prompt_result > div {
+	display: flex;
+	position: relative;
+	flex-grow: 1;
+	align-items: center;
+	height: 33px;
+	max-width: calc(100% - 135px);
+	overflow-x: scroll;
+	padding: 0 5px;
+	border-radius: 50px;
+	box-sizing: border-box;
+	border: 1px solid #333;
+	background-color: #222;
+	color: rgb(160,160,160);
+	white-space: nowrap;
+	opacity: 1;
+	-ms-overflow-style: none; /* IE and Edge */
+	scrollbar-width: none; /* Firefox */
+}
+
+#prompt_result div::-webkit-scrollbar {
+	display: none; /* Chrome, Safari and Opera */
+}
+
+#prompt_result > div::after {
+	content: 'press the / key for more info about this prompt';
+	opacity: 0;
+	display: block;
+	visibility: hidden;
+	position: absolute;
+	bottom: 5px;
+	right: 15px;
+	padding: 2px 10px;
+	border-radius: 50px;
+	background-color: #222;
+	box-shadow: 0 0 10px #222;
+	color: #777;
+}
+
+#prompt_result > div:first-child:hover::after {
+	visibility: visible;
+	opacity: 1;
+	transition: opacity 50ms 1000ms linear;
+}
+
+#prompt_result b {
+	font-style: normal;
+	font-weight: bold;
+	color: #00ffe6;
+	margin: 0 4px;
+}
+
+#prompt_result i {
+	font-style: normal;
+	font-weight: bold;
+	color: #ffe300;
+	margin: 0 4px;
+}
+
+#prompt_result #prompt_result_editable {
+	font-style: normal;
+	font-weight: bold;
+	margin: 0 4px;
+}
+
+#prompt_result:hover #prompt_result_editable {
+	color: rgb(255,255,255);
+}
+
+#prompt_result #prompt_result_copy {
+	flex-grow: 0;
+	display: flex;
+	align-items: center;
+	padding: 0 8px;
+	border-radius: 4px;
+	cursor: pointer;
+	white-space: nowrap;
+	background-color: #ffe300;
+	color: #000;
+	font-weight: bold;
+	opacity: 0.8;
+}
+
+#prompt_result #prompt_result_copy:hover {
+	opacity: 1;
+	transition: opacity 100ms linear;
+}
+
 #layout.edit_mode #edit_most_used {
 	font-weight: bold;
 	color: #ff0000;
@@ -1072,4 +1445,4 @@ input[type="checkbox"]:checked::before {
 
 #layout.edit_mode #favorite_label {
 	cursor: default;
-}
+}

index.html

@@ -94,12 +94,71 @@
 				-->
 			</div>
 		</div>
+		<div id="prompt_builder">
+			<div id="prompt_artist_search"></div>
+			<div id="prompt_selector">
+				<div>
+					<div id="prompt_builder_title">build-a-prompt:</div>
+					<div class="prompt_artist">
+						<div class="prompt_artist_count">
+							<div>1</div>
+						</div>
+						<div class="prompt_artist_name">
+							<input type="text" value="" placeholder="search by name" autocomplete="off" required pattern=".+" title="you can also click an artist name to add them here" />
+						</div>
+						<div class="prompt_artist_intensity" title="the weight of this artist">
+							<select autocomplete="off">
+								<option value="1">✖ 1</option>
+								<option value="2">✖ 2</option>
+								<option value="3">✖ 3</option>
+							</select>
+						</div>
+						<div class="prompt_artist_combine" title="the method of combining, type / for more info">
+							<select autocomplete="off">
+								<option value="add">add</option>
+								<option value="loop">loop</option>
+								<option value="swap">swap</option>
+							</select>
+						</div>
+						<div class="prompt_artist_left" title="move an artist left to give them more weight">
+							<div><</div>
+						</div>
+						<div class="prompt_artist_right" title="move an artist right to give them less weight">
+							<div>></div>
+						</div>
+						<div class="prompt_artist_remove" title="remove this artist from the prompt">
+							<span>X</span>
+						</div>
+					</div>
+					<div id="prompt_artist_add">
+						<div>
+							<span>add another</span>
+						</div>
+					</div>
+				</div>
+				<div id="prompt_builder_hide"></div>
+			</div>
+			<div id="prompt_result">
+				<div>
+					<span>
+						<b>(</b>artwork in the style of <i>[</i>name<i>|</i>name<i>]</i><b>:1.5)</b>,
+					</span>
+					<span>
+						<b>(</b>an image<b>:0.5)</b>,
+					</span>
+					<span>
+						<b>(</b><span id="prompt_result_editable" contenteditable="true"></span><b>:1.0)</b>
+					</span>
+				</div>
+				<div id="prompt_result_copy">copy this prompt</div>
+			</div>
+		</div>
 	</div>
 	<div id="information">
 		<div id="info_switcher">
 			<h2 id="info_actions" class="selected">🔍&nbsp;&nbsp;&nbsp;actions</h2>
 			<h2 id="info_help">📓&nbsp;&nbsp;&nbsp;manual</h2>
-			<h2 id="info_tips">📸&nbsp;&nbsp;&nbsp;tips</h2>
+			<h2 id="info_tips">📸&nbsp;&nbsp;&nbsp;prompts</h2>
 			<h2 id="info_about">💫&nbsp;&nbsp;&nbsp;about</h2>
 			<h2 id="info_export">📤&nbsp;&nbsp;&nbsp;export</h2>
 			<h2 id="info_closer">ESC</h2>
@@ -110,7 +169,7 @@
 				<div id="random-tags">see some random tags</div>
 				<div id="copy-all-names">copy visible artist names</div>
 			</div>
-			<input type="text" id="info_search_input" name="info_search_input" value="" data-match="" placeholder="search for tags" autocomplete="off">
+			<input type="text" id="info_search_input" name="info_search_input" value="" placeholder="search for tags" autocomplete="off">
 			<div id="info_search_output"></div>
 		</div>
 		<div id="information_help" class="information_section">
@@ -143,35 +202,54 @@
 				<ul>
 					<li>Click <strong>edit</strong> under the important category to add or remove tags</li>
 				</ul>
+				<h3>Why does the 🎨 prompt sometimes match the 🧑 or 🏞️ prompt?</h3>
+				<ul>
+					<li>
+						The prompt used for the 🎨 images is the intentionally generic, "an image".  If that results in a portrait, that's useful to know.  It indicates that, for that artist, SDXL is more strongly trained to output portraits.  Anything in your prompt that's not related to a person will harder to prompt for in that artist's style.
+					</li>
+				</ul>
 				<h3>✍️ Offline tag-editing</h3>
 				<ul>
 					<li>If you are viewing this from Hugging Face, your tag edits won't be applied.  They'll be saved and applied if you've downloaded the repository and are viewing your local file.  In both cases, your edits will be available for export 📥 as text.  If you want to suggest tag improvements for everyone's benefit, edit tags, copy the text from 📥, and post it as a comment to Hugging Face.  I will incorporate accurate edits ASAP.  Thank you for contributing!</li>
 				</ul>
+				<h3>Build a prompt</h3>
+				<ul>
+					<li>See 📸 prompts</li>
+				</ul>
 			</div>
 		</div>
 		<div id="information_tips" class="information_section">
 			<div>
-				<h3>Prompting artist styles with SDXL</h3>
+				<h3>Building prompts from artist styles</h3>
 				<ul>
-					<li>I recommend this 3-section prompt (auto1111 syntax):
+					<li>Build-a-prompt uses auto1111 syntax, and it creates a 3-section prompt:</li>
+					<li><b>(</b><i>artist stuff</i><b>:1.5)</b>, <b>(</b>an image<b>:0.5)</b>, <b>(</b><i>your prompt words</i><b>:1.0)</b></li>
+					<li>Options:
 						<ul>
-							<li><b>(</b><i>style stuff</i><b>:1.5)</b>, <b>(</b>an image<b>:0.5)</b>, <b>(</b><i>content stuff</i><b>:1.0)</b></li>
-						</ul>
-					</li>
-					<li>For example:
-						<ul>
-							<li>safest bet, needed for photographers:</li>
-							<li><b>(</b>by <i>artist full name</i><b>:1.5)</b>, <b>(</b>an image<b>:0.5)</b>, <b>(</b>a landscape, water under a bridge<b>:1.0)</b></li>
-							<li>stronger style, not for photographers:</li>
-							<li><b>(</b>artwork in the style of <i>artist full name</i><b>:1.5)</b>, <b>(</b>an image<b>:0.5)</b>, <b>(</b>a landscape, water under a bridge<b>:1.0)</b></li>
+							<li><strong>Intensity:</strong>
+								<ul>
+									<li>i.e. ✖1, ✖2, ✖3, gives more weight to a style by repeating the artist's name.  This works better than using prompt weighting</li>
+								</ul>
+							</li>
+							<li><strong>Mixing method:</strong>
+								<ul>
+									<li><strong>Add:</strong> puts all the artists' names in the prompt separated by a comma.  Usually the best choice.  Try 'add' and 'loop' and see which works better.</li>
+									<li><strong>Loop:</strong> uses a1111 syntax for alternating the prompt at each step.  This alternates which artist's name appears in the prompt.  If an artist's name is repeated, then it's repeat for multiple steps.</li>
+									<li><strong>Swap:</strong> uses a1111 syntax to swap the prompt after a fraction of the total steps.  This swaps the artist's name after 50% of steps by default.  You can change this fraction.  For example, <b>[</b>A<b>:</b>B<b>:</b>0.1<b>]</b> switches to B after 10% of all steps.</li>
+								</ul>
+							<li><strong>Move left and right:</strong>
+								<ul>
+									<li>tokens closest to the start of the prompt always have more influence.  Therefore, moving an artist's name to the left adds weight to that style.</li>
+								</ul>
+							</li>
 						</ul>
 					</li>
 				</ul>
-				<h3>Explanation of the 3-section prompt</h3>
+				<h3>Why this prompting method?</h3>
 				<ul>
-					<li>The reason for this 3-section prompt is that it's very easy for common words to erase the style.  For example, for some artists that never made portraits, using the word "portrait" in your prompt can erase their style, making the image style generic.</li>
-					<li>To overcome this, we add weight to the <i>style stuff</i> and to remove weight from the <i>content stuff</i>.  I recommend starting with 1.5 and 1.0 respectively, which gives slightly more weight to the style.  As you edit the <i>content stuff</i>, if the style disappears, try other weights, e.g 2.0 and 0.5.</li>
-					<li>The part in the middle "<b>(</b>an image<b>:0.5)</b>" doesn't change the output, but it's sometimes needed when the <i>content stuff</i> weight is less than 1.0.  You can try removing it, and if your output looks garbled, try putting it back in.</li>
+					<li>The reason why build-a-prompt uses 3-sections is that it's very easy for common words in a prompt to erase an artist's style.  For example, for some artists that never made any portraits, using the word "portrait" in your prompt can erase their style entirely.</li>
+					<li>To overcome this, we add weight to the <i>artist stuff</i> and to remove weight from the <i>rest of the prompt</i>.  Built a prompt weights this at <b>1.5</b> and <b>1.0</b> respectively.  This gives slightly more weight to the <i>artist stuff</i>.  As you edit the <i>rest of the promt</i>, if the style disappears, adjust both numbers, e.g. try <b>2.0</b> and <b>0.5</b>.</li>
+					<li>The middle section, "<b>(</b>an image<b>:0.5)</b>" doesn't change the output at all.  However, it's sometimes needed when the weight of the <i>rest of the prompt</i> weight is less than 1.</li>
 				</ul>
 				<h3>An artist's style includes much more than their medium</h3>
 				<ul>
@@ -185,32 +263,13 @@
 					<li>This helps especially when the artist is famous for multiple mediums.  But sometimes it reduces the artist's specific style and more matches the generic style of the medium.</li>
 					<li>Also try adding the <strong>opposite</strong> medium/style to the <strong>negative</strong> prompt.  For example, if the artist you want is a photographer, try "painting, illustration" in the negative prompt.</li>
 				</ul>
-				<h3>Combining the styles of multiple artists</h3>
-				<ul>
-					<li>I recommend either of these patterns (auto1111 syntax):
-						<ul>
-							<li><b>(</b>by <i>artist A</i>, by <i>artist B</i><b>:2.0)</b>, <i>the rest of the prompt</i></li>
-							<li><b>(</b>by <b>[</b><i>artist A</i><b>|</b><i>artist B</i><b>]</b><b>:2.0)</b>, <i>the rest of the prompt</i></li>
-							<li>Which is best depends on the artists.  Try both!</li>
-						</ul>
-					</li>
-					<li>To make one of the artists styles more dominant, make it first in the prompt.  If it's still not strong enough repeat the artist's name.  For example:<br>
-					<b>[</b><i>artist A</i><b>|</b><i>artist A</i><b>|</b><i>artist B</i><b>]</b></li>
-					<li>I've found that adding weight to one of the artists doesn't work, but your mileage may vary.
-				</ul>
 				<h3>Making non-photographic mediums look more photographic</h3>
 				<ul>
-					<li>It's worth trying "photograph by <i>illustration artist</i>" along with "illustration" in the negative prompt.  But that often won't work.
+					<li>It's worth trying "photograph by <i>illustration artist</i>" along with "illustration" in the negative prompt.  But that often won't work.</li>
 					<li>It's also worth trying "<b>[</b><i>by artist A</i><b>:</b><i>style of photograph</i><b>:0.5]</b>".  This will start with the artist style and switch to photograph style after 50% of the steps.  Adjust the decimal as needed.</li>
 					<li>I've had best results by sending the output to img2img, then replacing the artist's name in the prompt with "photograph", and setting the de-noise very low.  Then feed the result back to img2img, and slowly nudge it towards photographic.  That will at least maintain the composition.</li>
 					<li>If Reference Controlnet for SDXL has been released, that should work well.</li>
 				</ul>
-				<h3>Why does the 🎨 prompt sometimes match the 🧑 or 🏞️ prompt?</h3>
-				<ul>
-					<li>
-						The prompt used for the 🎨 images is the intentionally generic, "an image".  If that results in a portrait, that's useful to know.  It indicates that, for that artist, SDXL is more strongly trained to output portraits.  Anything in your prompt that's not related to a person will harder to prompt for in that artist's style.
-					</li>
-				</ul>
 			</div>
 		</div>
 		<div id="information_about" class="information_section">

index.js

@@ -17,6 +17,8 @@ var startUpTime;
 var tagsConcatenated = new Set();
 var editedArtists = new Set();
 var storingAccessType = 'none';
+// the longer prompt is better for non-photographers
+var promptStyleWords = ['artwork in the style of','by|||']
 var start = performance.now();
 const lowCountThreshold = 3;
 //
@@ -52,6 +54,8 @@ async function startUp() {
 	showHideLowCountTags();
 	makeStyleRuleForDrag();
 	teasePartition();
+	promptBuilderAddArtist(true);
+	updatePromptBuilderParts();
 	addAllListeners();
 }
 
@@ -982,52 +986,43 @@ function showInformation(tab) {
 
 function searchForTagsInfo(event) {
 	let input = document.getElementById('info_search_input');
-	if(input.dataset.match != '') {
+	if(input.dataset.match !== undefined) {
 		event.preventDefault();
 		if(event.key === 'Backspace' || event.keyCode === 8) {
 			input.value = '';
-			input.dataset.match = '';
+			delete input.dataset.match;
 		} else {
 			input.value = input.dataset.match;
 		}
-		return;
-	}
-	let output = document.getElementById('info_search_output');
-	output.innerHTML = '';
-	let matches = 0;
-	let match = '';
-	let range = 'start'
-	let tags = document.querySelectorAll('#toggles label:not(.top_control):not(.category):not([data-is-in-category="other"]');
-	tags.forEach(function(tag) {
-		let tagName = tag.querySelector('input').name;
-		if(tagName.toLowerCase().indexOf(input.value.toLowerCase()) > -1) {
-			range = 'continue';
-			let label = tag.cloneNode(true);
-			label.addEventListener('change', function(e) {
-				toggleMatchingTag(this);
-			});
-			output.appendChild(label);
-			match = tagName;
-			matches++;
-		} else {
-			if(range != 'start') {
-				range = 'stop';
+	} else {
+		let matches = 0;
+		let output = document.getElementById('info_search_output');
+		output.innerHTML = '';
+		let match = '';
+		let tags = document.querySelectorAll('#toggles label:not(.top_control):not(.category):not([data-is-in-category="other"]');
+		tags.forEach(function(tag) {
+			let tagName = tag.querySelector('input').name;
+			if(tagName.toLowerCase().indexOf(input.value.toLowerCase()) > -1) {
+				let label = tag.cloneNode(true);
+				label.addEventListener('change', function(e) {
+					toggleMatchingTag(this);
+				});
+				output.appendChild(label);
+				match = tagName;
+				matches++;
 			}
+		});
+		if(matches == 0) {
+			let noneFound = document.createElement('label');
+			noneFound.textContent = 'no matching tags';
+			output.appendChild(noneFound);
+		} else if(matches == 1) {
+			input.value = match;
+			event.preventDefault();
+			input.dataset.match = match;
+		} else {
+//			sortInfoSearchTags(output);
 		}
-		if(range == 'stop') {
-			return;
-		}
-	});
-	if(matches == 0) {
-		let noneFound = document.createElement('label');
-		noneFound.textContent = 'no matching tags';
-		output.appendChild(noneFound);
-	} else if(matches == 1) {
-		input.value = match;
-		event.preventDefault();
-		input.dataset.match = match;
-	} else {
-		sortInfoSearchTags(output);
 	}
 }
 
@@ -1499,7 +1494,7 @@ function enterExitEditMostUsedMode(doExit) {
 				// clean up classes added to track moved tags during edit mode
 				label.classList.remove('was_moved');
 			});
-			document.getElementById('toggles').style.width = 'calc(' + gutterEndPercentX + '% - 20px)';
+			document.getElementById('toggles').style.width = 'calc(' + gutterEndPercentX + '% + 20px)';
 			document.getElementById('gutter').style.left =  gutterEndPercentX + '%';
 			document.getElementById('image-container').style.marginLeft = 'calc(' + gutterEndPercentX + '% + 50px)';
 			updateArtistsCountPerCategory();
@@ -1699,6 +1694,17 @@ function copyStuffToClipboard(item,stuff) {
 		} else {
 			doAlert('No artists are visible!',1);
 		}
+	} else if(stuff == 'prompt') {
+		let prompt_result = document.getElementById('prompt_result').querySelector('div');
+		let prompt = prompt_result.innerText.trim();
+		prompt = prompt.replace(/(\r\n|\n|\r)/gm, '');
+		navigator.clipboard.writeText(prompt)
+			.then(() => {
+				doAlert('Copied prompt to clipboard!',1);
+			})
+			.catch(() => {
+				doAlert('😭😭 Can\'t access clipboard',1);
+			});
 	}
 }
 
@@ -1774,7 +1780,7 @@ function hideLowCountSingle(checkbox) {
 		// only present if the tag is below the hide threshhold but not hidden because the checkbox was checked
 		checkbox.parentNode.classList.add('hidden');
 		checkbox.parentNode.dataset.hideDeferred = false;
-		doAlert('low-use tag hidden',0);
+		doAlert('Low-use tag hidden',0);
 	}
 }
 
@@ -1869,7 +1875,7 @@ function movePartition(e) {
 		newPos = window.innerWidth - 350;
 	}
 	let gutterEndPercentX = (newPos / window.innerWidth) * 100;
-	document.getElementById('toggles').style.width = 'calc(' + gutterEndPercentX + '% - 20px)';
+	document.getElementById('toggles').style.width = 'calc(' + gutterEndPercentX + '% + 20px)';
 	document.getElementById('gutter').style.left =  gutterEndPercentX + '%';
 	document.getElementById('image-container').style.marginLeft = 'calc(' + gutterEndPercentX + '% + 50px)';
 	imgHoverRule.style.width = gutterEndPercentX + '%';
@@ -2185,6 +2191,409 @@ function deleteAllEdits() {
 	}
 }
 
+function promptBuilderAddArtist(isStart) {
+	let ogPart = document.querySelector('.prompt_artist');
+	let part = ogPart.cloneNode(true);
+	document.querySelector('#prompt_artist_add').before(part);
+	let input = part.querySelector('.prompt_artist_name input');
+	input.value = '';
+	delete input.dataset.match;
+	delete input.dataset.isPhoto;
+	input.addEventListener('focus', function(e) {
+		this.dataset.hasFocus = 'yes';
+		setXPosOfSearchOutput();
+	});
+	input.addEventListener('keyup', function(e) {
+		promptBuilderSearch(this,e);
+	});
+	input.addEventListener('blur', function(e) {
+		// need to give time for search result row click event
+		timer = setTimeout(promptBuilderBlur.bind(this, this), 100);
+		if(this.dataset.match === undefined) {
+			this.value = '';
+		}
+	});
+	let intensity = part.querySelector('.prompt_artist_intensity select');
+	intensity.selectedIndex = 'x1';
+	intensity.addEventListener('change', function(e) {
+		writePrompt();
+	});
+	let combine = part.querySelector('.prompt_artist_combine select');
+	combine.selectedIndex = 'mix';
+	combine.addEventListener('change', function(e) {
+		writePrompt();
+	});
+	let remove = part.querySelector('.prompt_artist_remove');
+	remove.addEventListener('click', function(e) {
+		promptBuilderRemoveArtist(this);
+		writePrompt();
+	});
+	let left = part.querySelector('.prompt_artist_left');
+	left.addEventListener('click', function(e) {
+		promptBuilderMove(this.parentNode,'left');
+		writePrompt();
+	});
+	let right = part.querySelector('.prompt_artist_right');
+	right.addEventListener('click', function(e) {
+		promptBuilderMove(this.parentNode,'right');
+		writePrompt();
+	});
+	if(isStart) {
+		// start copies then removes the HTML part so that
+		// the event listeners don't need defined twice in the code
+		ogPart.remove();
+	}
+	updatePromptBuilderParts();
+	writePrompt();
+}
+
+function promptBuilderBlur(input) {
+	delete input.dataset.hasFocus;
+	document.getElementById('prompt_artist_search').classList.remove('show');
+	writePrompt();
+}
+
+function updatePromptBuilderParts() {
+	let count = 1;
+	let parts = Array.from(document.querySelectorAll('.prompt_artist'));
+	if(parts.length == 1) {
+		let part = parts[0];
+		let intensity = part.querySelector('.prompt_artist_intensity');
+		let combine = part.querySelector('.prompt_artist_combine');
+		let left = part.querySelector('.prompt_artist_left');
+		let right = part.querySelector('.prompt_artist_right');
+		let remove = part.querySelector('.prompt_artist_remove');
+		intensity.style.display = 'none';
+		combine.style.display = 'none';
+		left.style.display = 'none';
+		right.style.display = 'none';
+		remove.style.display = 'none';
+	} else {
+		for(i=0,il=parts.length; i<il; i++) {
+			let part = parts[i];
+			let countEl = part.querySelector('.prompt_artist_count div');
+			let intensity = part.querySelector('.prompt_artist_intensity');
+			let combine = part.querySelector('.prompt_artist_combine');
+			let left = part.querySelector('.prompt_artist_left');
+			let right = part.querySelector('.prompt_artist_right');
+			let remove = part.querySelector('.prompt_artist_remove');
+			countEl.textContent = count;
+			count++;
+			intensity.style.display = '';
+			combine.style.display = '';
+			left.style.display = '';
+			right.style.display = '';
+			remove.style.display = '';
+			if(i==0) {
+				left.style.display = 'none';
+				combine.style.display = 'none';
+				if(il==1) {
+					right.style.display = 'none';
+				}
+			} else if(i==il-1) {
+				right.style.display = 'none';
+			}
+		}
+	}
+}
+
+function promptBuilderMove(part,direction) {
+	if(direction == 'left') {
+		part.previousElementSibling.before(part);
+	} else if(direction == 'right') {
+		part.nextElementSibling.after(part);
+	}
+	updatePromptBuilderParts();
+}
+
+function promptBuilderRemoveArtist(removeButton) {
+	if(removeButton.textContent.trim() == 'X') {
+		removeButton.textContent = 'again';
+		timer = setTimeout(cleanupRemoveButton.bind(this, removeButton), 1000);
+	} else {
+		removeButton.parentNode.remove();
+		updatePromptBuilderParts();
+	}
+}
+
+function cleanupRemoveButton(removeButton) {
+	removeButton.textContent = 'X';
+}
+
+function promptBuilderFillArtist(item,e) {
+	var name = item.closest('.image-item').getElementsByClassName('firstN')[0].textContent +
+	' ' + item.closest('.image-item').getElementsByClassName('lastN')[0].textContent;
+	let inputs = Array.from(document.querySelectorAll('.prompt_artist_name input'));
+	for(i=0,il=inputs.length; i<il; i++) {
+		if(inputs[i].value == '') {
+			inputs[i].value = name;
+			promptBuilderSearch(inputs[i],e);
+			break;
+		}
+	}
+}
+
+function promptBuilderHide() {
+	document.querySelector('#prompt_builder').classList.remove('show');
+}
+
+function promptBuilderShow() {
+	document.querySelector('#prompt_builder').classList.add('show');
+}
+
+function promptBuilderSearch(input,event) {
+	if(input.dataset.match !== undefined) {
+		event.preventDefault();
+		if(event.key === 'Backspace' || event.keyCode === 8) {
+			input.value = '';
+			delete input.dataset.match;
+			delete input.dataset.isPhoto;
+		} else {
+			input.value = input.dataset.match;
+		}
+	} else {
+		let matches = 0;
+		let output = document.getElementById('prompt_artist_search');
+		output.innerHTML = '';
+		let match = '';
+		let isPhoto = false;
+		for(i=0,il=artistsData.length; i<il; i++) {
+			let artistName = artistsData[i][1] + ' ' + artistsData[i][0];
+			if(artistName.toLowerCase().indexOf(input.value.toLowerCase()) > -1) {
+				let outputRow = document.createElement('div');
+				outputRow.textContent = artistName;
+				outputRow.addEventListener('click', function(e) {
+					let input = document.querySelector('input[data-has-focus="yes"]');
+					input.value = this.textContent;
+					promptBuilderSearch(input,e);
+					input.focus();
+				});
+				output.appendChild(outputRow);
+				matches++;
+				match = artistName;
+				if(artistsData[i][2].toLowerCase().indexOf('photography') > -1) {
+					isPhoto = true;
+				}
+			}
+		}
+		if(matches == 0) {
+			let noneFound = document.createElement('div');
+			noneFound.textContent = 'no matching names';
+			output.appendChild(noneFound);
+		} else if(matches == 1) {
+			input.value = match;
+			event.preventDefault();
+			input.dataset.match = match;
+			if(isPhoto) {
+				input.dataset.isPhoto = 'yes';
+			} else {
+				input.dataset.isPhoto = 'no';
+			}
+			output.classList.remove('show');
+			writePrompt();
+		} else {
+			output.classList.add('show');
+			promptBuilderSearchSortOutput(output);
+		}
+	}
+}
+
+function debounceSetXPosOfSearchOutput(func, delay) {
+    let debounceTimer;
+    return function() {
+        const context = this;
+        const args = arguments;
+        clearTimeout(debounceTimer);
+        debounceTimer = setTimeout(() => func.apply(context, args), delay);
+    };
+}
+
+function setXPosOfSearchOutput() {
+	let input = document.querySelector('.prompt_artist input:focus');
+	if(input) {
+		let output = document.getElementById('prompt_artist_search');
+		let xPos = input.getBoundingClientRect().left;
+		output.style.left = xPos + 'px';
+	}
+}
+
+function promptBuilderSearchSortOutput(output) {
+	let rows = Array.from(output.querySelectorAll('div'));
+	rows.sort(function(a, b) {
+		var aValue = a.textContent;
+		var bValue = b.textContent;
+		return aValue.localeCompare(bValue);
+	});
+	rows.forEach(function(row) {
+		output.appendChild(row);
+	});
+}
+
+
+function writePrompt() {
+	let prompt = '';
+	let edited = true;
+	let editable = document.querySelector('#prompt_result_editable').textContent.trim();
+	let editMe = ['you can edit me','pick an artist, then edit me',''];
+	if(editable == editMe[0] || editable == editMe[1] || editable == editMe[2]) {
+		edited = false;
+	}
+	let parts = Array.from(document.querySelectorAll('.prompt_artist'));
+	let nextCombine = 'start';
+	let startAt = 0;
+	let missingName = false;
+	if(parts.length == 1) {
+		let part = parts[0];
+		let name = part.querySelector('input').value;
+		if(name == '') {
+			missingName = true;
+		}
+		let style = promptStyleWords[0];
+		let isPhoto = part.querySelector('input').dataset.isPhoto;
+		if(isPhoto == 'yes') {
+			style = promptStyleWords[1];
+		}
+		if(name != '') {
+			prompt = style + ' ' + name;
+		}
+	} else {
+		for(pCount=1,pLength=parts.length; pCount<pLength; pCount++) {
+			// i starts at 1 because first part's combine value is ignored
+			let part = parts[pCount];
+			let thisCombine = part.querySelector('.prompt_artist_combine select').value;
+			if(parts[pCount+1]) {
+				if(nextCombine == 'start') {
+					nextCombine = parts[pCount+1].querySelector('.prompt_artist_combine select').value;
+				}
+			} else {
+				nextCombine = 'end';
+			}
+			if(thisCombine != nextCombine || nextCombine == 'end' || thisCombine == 'swap') {
+				if(thisCombine == 'loop') {
+					prompt = '[' + prompt;
+				} else if(thisCombine == 'swap') {
+					prompt = '[' + prompt;
+				}
+				// loop through artists with matching combine
+				for(j=startAt,jl=pCount+1; j<jl; j++) {
+					part = parts[j];
+					let name = part.querySelector('input').value;
+					if(name == '') {
+						missingName = true;
+						break;
+					}
+					let style = promptStyleWords[0];
+					let isPhoto = part.querySelector('input').dataset.isPhoto;
+					if(isPhoto == 'yes') {
+						style = promptStyleWords[1];
+					}
+					let intensityNum = parseInt(part.querySelector('.prompt_artist_intensity select').value);
+					// repeat based on intensity
+					for(k=0,kl=intensityNum; k<kl; k++) {
+						if(thisCombine == 'add') {
+							prompt += style + ' ' + name + ',';
+						} else if(thisCombine == 'loop') {
+							prompt += style + ' ' + name + '|';
+						} else if(thisCombine == 'swap') {
+							prompt += style + ' ' + name + ',';
+						}
+					}
+					if(thisCombine == 'swap') {
+						prompt = prompt.substring(0,prompt.length-1);
+						prompt += ':';
+					}
+				}
+				prompt = prompt.substring(0,prompt.length-1);
+				if(thisCombine == 'loop') {
+					prompt += ']'
+				} else if(thisCombine == 'swap') {
+					prompt += ':0.5]'
+				}
+				startAt = pCount;
+			}
+		}
+	}
+	if(missingName) {
+		// no artists are selected
+		if(!edited) {
+			editable = editMe[1];
+		}
+		prompt = '<span id="prompt_result_editable" contenteditable="true">' + editable + '</span>';
+	} else {
+		// 1 or more artists selected
+		if(!edited) {
+			editable = editMe[0];
+		}
+		prompt = formatPrompt(prompt);
+		prompt = '<span><b>(</b>' + prompt + '<b>:1.5)</b></span>, ' +
+			'<span><b>(</b>an image<b>:0.5)</b>, </span>' +
+			'<span><b>(</b><span id="prompt_result_editable" contenteditable="true">' + editable + '</span><b>:1.0)</b></span>';
+	}
+	document.querySelector('#prompt_result div').innerHTML = prompt;
+	document.getElementById('prompt_result_editable').addEventListener('blur', function(e) {
+		let str = this.innerText;
+		this.innerHTML = str;
+	});
+
+}
+
+function formatPrompt(prompt) {
+	let promptArr = [];
+	let style = promptStyleWords[0];
+	if(prompt.indexOf(promptStyleWords[0]) > -1 && prompt.indexOf(promptStyleWords[1]) < 0) {
+		// prompt contains only non-photographers
+		// so use the style words for st
+		promptArr = prompt.split(promptStyleWords[0]);
+	/*
+	} else if(prompt.indexOf(promptStyleWords[0]) < 0 && prompt.indexOf(promptStyleWords[1]) > -1) {
+		// prompt contains only photographers
+		promptArr = prompt.split(promptStyleWords[1]);
+		style = promptStyleWords[1];
+	*/
+	} else {
+		// prompt contains only both photographers and non
+		// using the shorter prompt event though it makes the style weaker
+		// because it uses for fewer tokens for multiple artists
+		let regStr = new RegExp(promptStyleWords[0],'g');
+		prompt = prompt.replace(regStr,promptStyleWords[1]);
+		promptArr = prompt.split(promptStyleWords[1]);
+		style = promptStyleWords[1];
+
+	}
+	if(promptArr.length > 0) {
+		prompt = style + ' ';
+		for(i=0,il=promptArr.length; i<il; i++) {
+			prompt += promptArr[i];
+		}
+	}
+	prompt = prompt.replace('|||','');
+	prompt = prompt.replace(/\[ |\[/g,'<i>[</i>');
+	prompt = prompt.replace(/\| |\|/g,'<i>|</i>');
+	prompt = prompt.replace(/: |:/g,'<i>:</i>');
+	prompt = prompt.replace(/]/g,'<i>]</i>');
+	return prompt;
+}
+
+/*
+**
+**
+**
+**
+**
+**
+**
+**
+**
+**
+**
+**
+**
+**
+**
+**
+**
+*/
+
 function addAllListeners() {
 	// global
 	document.addEventListener('keydown', function(event) {
@@ -2436,6 +2845,7 @@ function addAllListeners() {
 		});
 		imageItem.getElementsByTagName('h3')[0].addEventListener('click', function(e) {
 			copyStuffToClipboard(this,'name');
+			promptBuilderFillArtist(this,e);
 		});
 		imageItem.getElementsByTagName('h4')[0].addEventListener('click', function(e) {
 			if(!this.classList.contains('edit_mode')) {
@@ -2455,4 +2865,26 @@ function addAllListeners() {
 			gutter.removeEventListener('mousemove', movePartition, false);
 		}, false);
 	}, false);
+	// prompt builder
+	var prompt_builder = document.getElementById('prompt_builder');
+	prompt_builder.addEventListener('click', function(e) {
+		promptBuilderShow();
+	});
+	var prompt_builder_hide = document.getElementById('prompt_builder_hide');
+	prompt_builder_hide.addEventListener('click', function(e) {
+		promptBuilderHide();
+		e.stopPropagation();
+	});
+	var prompt_result_copy = document.getElementById('prompt_result_copy');
+	prompt_result_copy.addEventListener('click', function(e) {
+		copyStuffToClipboard(null,'prompt');
+	});
+	var prompt_artist_add = document.getElementById('prompt_artist_add');
+	prompt_artist_add.addEventListener('click', function(e) {
+		promptBuilderAddArtist();
+	});
+	var prompt_selector_div = document.querySelector('#prompt_selector > div');
+	prompt_selector_div.addEventListener('scroll', debounceSetXPosOfSearchOutput(function() {
+		setXPosOfSearchOutput();
+	}, 100));
 }