SDXL-artists-browser / index.html
Mattthew
adding a credit for Reggie Montoya
724928b
<!DOCTYPE html>
<html>
<head>
<title>SDXL Artist Style Explorer by Mattthew</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="artists_and_tags.js"></script>
<script type="text/javascript" src="index.js"></script>
<link rel="stylesheet" href="index.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
<div id="layout">
<div id="rows">
<div id="toggles" class="start">
<div id="options_info">
<span class="count" title="type / key for the app menu">press the <i>/</i> key to start</span>
</div>
<div id="options_pinned">
<span class="count" title="pin an artist to find similar artists"><i>πŸ“Œ</i><span>No artist pinned yet</span></span>
</div>
<div id="options_prompts">
<span class="count">show me:</span>
<span class="link selected" id="promptA">🎨</span>
<span class="link" id="promptP">πŸ§‘</span>
<span class="link" id="promptL">🏞️</span>
</div>
<div id="options_artist_sort">
<span class="count">sort artists:</span>
<span class="link selected" id="sortAR">🎰</span>
<span class="link" id="sortAA">πŸ” </span>
<span class="link" id="sortAP">πŸ“Œ</span>
</div>
<div id="options_tag_sort">
<span class="count">sort tags:</span>
<span class="link selected" id="sortTC">πŸ“Ά</span>
<span class="link" id="sortTA">πŸ” </span>
</div>
<div class="divider"></div>
<label class="top_control top_all">
<input type="checkbox" checked="checked" name="check-all" value="check-all" autocomplete="off"><span>all artists</span><span class="count"></span>
</label>
<div id="artistsShown" class="top_control">
<span class="count">shown - %</span>
</div>
<div class="divider"></div>
<label class="top_control">
<input type="checkbox" checked="checked" name="mode" value="mode" autocomplete="off"><span>permissive filter</span><span class="count"></span>
</label>
<label class="top_control">
<input type="checkbox" checked="checked" name="use_categories" value="use_categories" autocomplete="off"><span>use categories</span><span class="count"></span>
</label>
<label class="top_control">
<input type="checkbox" checked="checked" name="low_count" value="low_count" autocomplete="off"><span>hide low-use tags</span><span class="count"></span>
</label>
<label class="top_control">
<input type="checkbox" checked="checked" name="deprecated" value="deprecated" autocomplete="off"><span>hide unknown to SDXL</span><span class="count"></span>
</label>
<label class="top_control">
<input type="checkbox" name="censored" value="censored" autocomplete="off"><span>show risquΓ© images</span><span class="count"></span>
</label>
<div class="divider"></div>
<span id="edit_most_used" class="hidden">edit these</span>
<!-- JS will insert checkboxes here -->
</div>
<div id="gutter">
<div data-tooltip="← β†’"></div>
</div>
<div id="image-container">
<div id="filtersHidingAll">
no tags are check-marked<br>
πŸ‘€
</div>
<!-- JS will insert images here -->
<!--
<div class="image-item tag1 tag2">
<span>
<h3>
<span class="firstN">Name</span>
<span class="lastN">Name</span>
</h3>
<h4>
tag1, tag2
</h4>
</span>
<div>
<div class="imgTools">
<div class="art_prev"></div>
<div class="art_star"></div>
<div class="art_next"></div>
<div class="art_edit"></div>
</div>
<div class="imgBox">
<img alt="First Last - art" src="images/SDXL_1_0/First_Last-artwork.jpg">
<img alt="First Last - art" src="images/SDXL_1_0/First_Last-potrait.jpg">
<img alt="First Last - art" src="images/SDXL_1_0/First_Last-landscape.jpg">
</div>
</div>
</div>
-->
</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 tap 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;search</h2>
<h2 id="info_help">πŸ““&nbsp;&nbsp;&nbsp;features</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>
</div>
<div id="information_actions" class="information_section selected">
<div class="buttons">
<div id="info-toggle-all">toggle all tags</div>
<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="" placeholder="search for tags or artists" autocomplete="off">
<div id="info_search_output"></div>
</div>
<div id="information_help" class="information_section">
<div>
<h3>Hover over an artist and tap...</h3>
<ul>
<li><strong>name</strong> to copy them to clipboard</li>
<li><strong>tags</strong> to copy them to clipboard</li>
<li><strong>⭐️</strong> to toggle them as favorited</li>
<li><strong>πŸ“Œ</strong> to find similar artists</li>
<li><strong>🌐</strong> to search the web for the artist</li>
<li><strong>πŸŽ¨πŸ§‘πŸžοΈ</strong> rotate between the 3 prompts</li>
<li><strong>image set</strong> rotate between 4 image sets</li>
</ul>
<h3>Sort the artist list and tag list</h3>
<ul>
<li><strong>🎰</strong> sort artists randomly to explore</li>
<li><strong>πŸ“Œ</strong> sort artists by similarity to the pinned artist</li>
<li><strong>πŸ” </strong> sort artists or tags alphabetically</li>
<li><strong>πŸ“Ά</strong> sort tags by which match the most artists</li>
</ul>
<h3>The image sets</h3>
<ul>
<li><strong>The artists' actual artwork:</strong>
<ul>
<li>These images weren't generated by any SDXL model.</li>
<li>These are screenshots of the artists' work available on the public web.</li>
<li>I believe these tiny thumbnails are educational fair use.</li>
<li>If you own any image and want it removed, please message me.</li>
</ul>
</li>
<li><strong>SDXL 1.0 model from StabilityAI:</strong>
<ul>
<li>As the base model, 1.0 preserves all artist styles better than any other fine tune.</li>
<li>Also has more diversity that any other model, except for anatomy.</li>
<li>The trade-off is that it's less aesthetic and causes more artifacts.</li>
</ul>
</li>
<li><strong>DynaVision:</strong>
<ul>
<li>Makes cute faces, removes artifacts, saturates colors, while preserving artist style.</li>
<li>Makes cleaner and smoother images at the expense of grungier styles.</li>
<li>For landscapes, it reduces artist style strongly but improves composition.</li>
<li>Improves anatomy and leans towards NSFW. Proportions are somewhat cartoonish.</li>
<li>To remove the "big eyes" effect, use "anime" in the negative prompt.</li>
<li>I have no relationship with the makers of this model.</li>
</ul>
</li>
<li><strong>Crystal Clear:</strong>
<ul>
<li>Adds detail and removes artifacts while while strongly preserving artist style.</li>
<li>Preserves styles even for landscapes and even for messy/grungy artists.</li>
<li>Makes faces more aesthetic, improves anatomy, and leans towards realism.</li>
<li>I have no relationship with the makers of this model.</li>
</ul>
</li>
</ul>
<h3>Permissive filter</h3>
<ul>
<li><strong>checked:</strong> artists matching <strong>any</strong> checked tags</li>
<li><strong>unchecked:</strong> artists matching <strong>all</strong> checked tags</li>
<li>useful for filtering your favorites</li>
</ul>
<h3>Hide low-use tags</h3>
<ul>
<li><strong>checked:</strong> hides tags that match less than 4 artists, ~50% of all tags</li>
<li>you can access hidden tags via search, or if they're marked as important</li>
</ul>
<h3>Hide unknown to SDXL</h3>
<ul>
<li>I've hand verified that SDXL doesn't know these artists' styles</li>
<li>If you prompt with their names, the result will be unlike their actual style and generic, and you can achieve similar results by prompting "a painting", etc.</li>
<li>They're included in the database for the record of what SDXL doesn't know</li>
</ul>
<h3>Show risquΓ© images</h3>
<ul>
<li>You can blur out all images that aren't G-rated and 100% SFW by extremely conservative standards. This app contains now X-rated or hardcore images.</li>
</ul>
<h3>Important tags</h3>
<ul>
<li>Tap <strong>edit</strong> under the important category to add or remove tags to that category. This lets you save your "favorite" tags for easier access.</li>
</ul>
<h3>Build a prompt</h3>
<ul>
<li>See πŸ“Έ prompts</li>
</ul>
<h3>But wait, there's more...</h3>
<ul>
<li>Quickly toggle any tag by typing the / key, then typing the first few letters of the tag</li>
<li>Need inspo? Try the "see some random tags" button from the search tab. Does what it says on the tin</li>
<li>"Copy visible artist names" from the search tab lets you export all artists that match you filters as plain text</li>
<il>The export tab lets you copy data from one device to another</il>
</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 mode</h3>
<ul>
<li>This feature is only for editing tags offline. If you are viewing this from Hugging Face, any tag edits won't be applied, but they'll be saved. If you've downloaded the repository and are viewing your local file, tag edits are applied. 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>
-->
</div>
</div>
<div id="information_tips" class="information_section">
<div>
<h3>Building prompts from artist styles</h3>
<ul>
<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><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>Why this prompting method?</h3>
<ul>
<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>
<li>Using an artists name influences the output in several ways beyond the medium, e.g. "painting style". It includes typical subject matter, colors palette, clothing and hairstyles of the artist's time, composition and layout, even specific faces of people, and other aesthetic choices.</li>
<li>It can be hard to get just the aesthetic style and not the other stuff, e.g. a renaissance painting style with modern clothing.</li>
<li>Sometimes you can strengthen just the artist's style by putting their medium in the prompt like this:
<ul>
<li><b>(</b><strong>watercolor</strong> in the style of <i>artist full name</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>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>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>
<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>
</div>
</div>
<div id="information_about" class="information_section">
<div>
<h3>SDXL Artist Style Explorer</h3>
<ul>
<li>Code and tagging by <a href="https://huggingface.co/mattthew" target="_blank">Mattthew</a></li>
</ul>
<h3>How to support this project</h3>
<ul>
<li>Please tell a friends or share on your socials</li>
<li>Suggest artists I should add or remove</li>
<li>Suggest features and report bugs</li>
<li>Leave all feedback on <a href="https://huggingface.co/spaces/mattthew/SDXL-artists-browser/discussions" target="_blank">Huggingface</a></li>
</ul>
<h3>Special thanks to</h3>
<ul>
<li><strong>Reggie Montoya</strong> for help with python coding and suggesting the sort by similarity feature.
</ul>
<h3>Workflow for almost all of these images</h3>
<ul>
<li>
<strong>All:</strong><br>
Steps: 20, Sampler: DPM++ 2M Karras, CFG scale: 5, Seed: 47, Size: 1024x1024, <strong>(refiner not used)</strong>
</li>
<li>
<strong>🎨 prompt:</strong><br>
<b>(</b>artwork in the style of<i>artist full name</i><b>:1.5)</b>, <b>(</b>an image<b>:1.5)</b></li>
<strong>negative:</strong><br>
edges, borders
</li>
<li>
<strong>πŸ§‘ prompt:</strong><br>
<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>portrait of a person, inside a place<b>:1.0)</b></li>
<strong>negative:</strong><br>
edges, borders, outside, about, the artist, themselves
</li>
<li>
<strong>🏞️ prompt:</strong><br>
<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>landscape, outdoor natural scenery, water, bridge<b>:1.0)</b></li>
<strong>negative:</strong><br>
edges, borders, inside, people, person
</li>
<li>
<strong>exceptions:</strong><br>
For most photographers, "artwork in the style of <i>name</i>" was replaced with "by <i>name</i>". Rarely, seed 48 was used. For Dynavision I used negative prompt keywords to reduce NSFW.</li>
</ul>
<h3>Disclaimers</h3>
<ul>
<li>I believe the purpose of art is to share ideas and to inspire. New art is only possible by imitating and remixing old art. SDXL and this app promote art, inspire, and educate. For now, AI can only crudely imitate each artist. I encourage you to explore the real artwork and history of each artist you enjoy.</li>
<li>To create the tags, I've used a mix of LLM lots of manual research and edits. But the tags may be incorrect! Let me know if you have any corrections.</li>
<li>This database has a larger proportion of straight white male artists than the actual population. That's because, in the past and present, woman and minorities have had fewer opportunities to devote time to and sell their artwork. Please suggest under-represented artists that I can add to this app.</li>
<li>My code doesn't use cookies, and it sends nothing to any server. But it's hosted on Hugging Face, and I can't control if they cookie you.</li>
<li>This app is open source and Creatives Commons license. Download for free, use offline, modify as you wish.</li>
<li>I don't get, nor do I want, any compensation for this. Getting thanked feels great though!</li>
<li>I'm not affiliated with Stability AI, any model makers, or any organization.</li>
<li>This app is only for fun and education. Use at your own risk. You're responsible for your own actions. Void where prohibited.</li>
</ul>
</div>
</div>
<div id="information_export" class="information_section">
<div>
<h3>Export/Import favorited artists</h3>
<textarea id="export_favorites_list" value="" placeholder="You haven't favorited any artists yet." autocomplete="off"></textarea>
<div class="buttons">
<div id="export_favorites_button">copy to clipboard</div>
<div id="import_favorites_button">import</div>
</div>
<h3>Export tag-edits to send to author</h3>
<textarea id="export_edits_list" value="" placeholder="You haven't edited any tags yet." autocomplete="off" disabled="true"></textarea>
<div class="buttons">
<div id="export_edits_button">copy to clipboard</div>
<div id="delete_edits_button">restore official database</div>
</div>
<h3>Export database</h3>
<textarea id="export_artists_list" value="" placeholder="If this is visible, there's a bug" autocomplete="off" disabled="true"></textarea>
<div class="buttons">
<div id="export_artists_button">copy to clipboard</div>
</div>
</div>
</div>
</div>
<div id="alert"></div>
</body>
</html>