SDXL-artists-browser / index.html
Mattthew
added slash command and tag search
fcab9ad
raw
history blame
11.5 kB
<!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="information">
<div id="info_switcher">
<h2 id="info_actions" class="selected">πŸ”&nbsp;&nbsp;&nbsp;actions</h2>
<h2 id="info_help">⁉️&nbsp;&nbsp;&nbsp;how to</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="copy-all-names">copy matching artist names</div>
</div>
<input type="text" id="info_search_input" name="info_search_input" value="" data-match="" placeholder="search for tags" autocomplete="off">
<div id="info_search_output"></div>
</div>
<div id="information_help" class="information_section">
<div>
<h3>Clicking an artist's...</h3>
<ul>
<li><strong>name</strong> copies them to clipboard</li>
<li><strong>tags</strong> toggles those checkmarks</li>
<li><strong>star</strong> marks them as favorite</li>
<li>🎨, πŸ§‘, and 🏞️ switches the prompt/image</li>
<li>✍️ enters 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>use unchecked to filter 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>note that all hidden tags are unchecked</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 whar SDXL doesn't know, but the images may be removed.</li>
</ul>
<h3>When using Stable Diffusion</h3>
<ul>
<li>Reproduce these styles with the prompt with "by {Artist full name}, ...."</li>
<li>Adding the style tags to the prompt can also help</li>
<li>You can combine the styles of two are more artists</li>
</ul>
<h3>✍️ Tag-editing is only for offline use!</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 suggestions for tag improvements for everyone's benefit, then 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_about" class="information_section">
<div>
<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><a href="https://huggingface.co/spaces/mattthew/SDXL-artists-browser/discussions" target="_blank">Leave all feedback on Huggingface</a></li>
<li>I don't need money. Thanks always feels nice!</li>
</ul>
<h3>Image parameters</h3>
<ul>
<li>
All: Steps: 20, Sampler: DPM++ 2M Karras, CFG scale: 10, Seed: 42 or 43, Size: 1024x1024, Model hash: 31e35c80fc, Model: sd_xl_base_1.0, Version: v1.5.1 (no refiner pass)
</li>
<li>
🎨 Prompt: by {Artist full name}, artwork image, Negative prompt: frame, border, text, signature
</li>
<li>
πŸ§‘ Prompt: by {Artist full name}, image of a gently smiling face, portrait of a person, head and torso, sitting in their room, Negative prompt: self-portrait, outside, frame, border, text, signature
</li>
<li>
🏞️ Prompt: by {Artist full name}, image of a landscape, outdoor natural scenery, water, bridge, Negative prompt: people, person, frame, border, text, signature
</li>
</ul>
<h3>Disclaimers</h3>
<ul>
<li>This tools is just for fun. This information NOT be correct! The tags are from a mix of sources and manual input. Many tags are AI generated. I make corrections when I happen to spot them or when submitted.</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</li>
<li>I'm not affiliated with Stability AI</li>
<li>Use at your own risk 🧟</li>
</ul>
<h3>Why do many images show a car?</h3>
<ul>
<li>
It's an artifact of the way SDXL was trained. It appears consistently, but not always, for any prompt doesn't include a specific subject. Surprisingly, the car appears for many artists, for many different seeds, and for many different prompts and negative prompts. For example, I use the non-specific 🎨 prompt, "artwork image". I picked that intentionally to reveal the subject matter biases SDXL has for each artist. This artifact of SDXL probably reveals a bias of the model towards generating car images.
</li>
</ul>
<h3>Missing images</h3>
<p>
If artists are listed in the database file, but their image files are missing, the files are listed below.
</p>
<ul id="missing_images_report"></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="toggles">
<div id="options_info">
<span class="count">press <i>/</i> key for actions</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>
<label class="top_control">
<input type="checkbox" checked="checked" name="favorite" value="favorite" autocomplete="off"><span>favorited</span><span class="count"></span>
</label>
<div class="divider"></div>
<span id="edit_most_used" class="hidden">edit</span>
<!-- JS will insert checkboxes here -->
</div>
<div id="gutter">
<div data-tooltip="drag slowly"></div>
</div>
<div id="image-container">
<div id="filtersHidingAll">
these filters hide every image<br>
check-mark any tag or β€Ÿpermissive”<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>
<footer>
<div>
<span>SDXL Artist Style Explorer, v1.0, by</span>
<a href="https://huggingface.co/mattthew" target="_blank">Mattthew</a>
<div id="close_footer"><strong>&nbsp;&nbsp;x&nbsp;&nbsp;</strong></div>
</div>
</footer>
</div>
<div id="alert"></div>
</body>
</html>