|
<!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"> |
|
<div id="options_info"> |
|
<span class="count">press the <i>/</i> key</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 by:</span> |
|
<span class="link selected" id="sortAR">🎰</span> |
|
<span class="link" id="sortAA">🔠</span> |
|
</div> |
|
<div id="options_tag_sort"> |
|
<span class="count">sort tags by:</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"></span> |
|
</div> |
|
<div class="divider"></div> |
|
<label class="top_control"> |
|
<input type="checkbox" checked="checked" name="mode" value="mode" autocomplete="off"><span>permissive</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> |
|
<div class="divider"></div> |
|
<span id="edit_most_used" class="hidden">edit these</span> |
|
|
|
</div> |
|
<div id="gutter"> |
|
<div data-tooltip="drag slowly"></div> |
|
</div> |
|
<div id="image-container"> |
|
<div id="filtersHidingAll"> |
|
no tags are check-marked<br> |
|
👀 |
|
</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 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">🔍 actions</h2> |
|
<h2 id="info_help">📓 manual</h2> |
|
<h2 id="info_tips">📸 prompts</h2> |
|
<h2 id="info_about">💫 about</h2> |
|
<h2 id="info_export">📤 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" autocomplete="off"> |
|
<div id="info_search_output"></div> |
|
</div> |
|
<div id="information_help" class="information_section"> |
|
<div> |
|
<h3>Click an artist's...</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> enters offline tag-editing mode, see below</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>Important tags</h3> |
|
<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>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>Workflow for these style images</h3> |
|
<ul> |
|
<li> |
|
<strong>All:</strong><br> |
|
Steps: 20, Sampler: DPM++ 2M Karras, CFG scale: 5, Seed: 47, Size: 1024x1024, Model hash: 31e35c80fc, Model: sd_xl_base_1.0, Version: v1.5.1, <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>landscape, outdoor natural scenery, water, bridge<b>:1.0)</b></li> |
|
<strong>negative:</strong><br> |
|
edges, borders, inside, people, person |
|
</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>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.</li> |
|
</ul> |
|
<h3>Disclaimers</h3> |
|
<ul> |
|
<li>This tools is just for fun. This information may NOT be correct! The tags are mostly from manual input with a mix of other sources, some AI generated.</li> |
|
<li>Remember, SDXL is only a crude imitation of these artists. Check out these artists' actual artwork for more inspiration!</li> |
|
<li>This database has more straight white male artists than in the actual population. That's because they've been favored by art-collectors, past and present. Please suggest artists I should add.</li> |
|
<li>My code doesn't use cookies and sends nothing to any server. But it's hosted on Huggingface, and I can't control if they cookie you</li> |
|
<li>Open source. Creatives Commons license. Download for free.</li> |
|
<li>I don't get nor do I want compensation for this. Getting thanks feels great!</li> |
|
<li>I'm not affiliated with Stability AI</li> |
|
<li>Use at your own risk. Contains mild nudity 🧟</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> |
