Hugging Face's logo

Spaces:
terrariyum
/
SDXL-artists-browser
Running

App Files Community
6
Mattthew commited on
Commit
9e44986
•
1 Parent(s): d72aefa

v1.0

Browse files

new artists, tag improvements, new "deprecated" classification

Files changed (4) hide show
  1. artists_and_tags.js +0 -0
  2. index.css +10 -5
  3. index.html +14 -3
  4. index.js +100 -34
artists_and_tags.js CHANGED
The diff for this file is too large to render. See raw diff
 
index.css CHANGED
@@ -111,7 +111,7 @@ footer {
111
  color: #aaa;
112
  background-color: #222;
113
  border-top: 1px solid black;
114
- font-size: 10px;
115
  }
116
 
117
  footer.special {
@@ -253,8 +253,6 @@ footer.special #close_footer strong {
253
  font-style: normal;
254
  }
255
 
256
-
257
-
258
  #toggles #artistsMatching {
259
  opacity: 0.8;
260
  cursor: default;
@@ -513,10 +511,10 @@ footer.special #close_footer strong {
513
  height: 100%;
514
  background-color: #666;
515
  opacity: 0;
516
- transition: opacity 100ms linear;
517
  }
518
 
519
- .image-item .imgTools:hover {
520
  opacity: 1;
521
  }
522
 
@@ -629,6 +627,13 @@ footer.special #close_footer strong {
629
  }
630
  }
631
 
 
 
 
 
 
 
 
632
  .image-item img {
633
  display: block;
634
  width: 256px;
 
111
  color: #aaa;
112
  background-color: #222;
113
  border-top: 1px solid black;
114
+ font-size: 12px;
115
  }
116
 
117
  footer.special {
 
253
  font-style: normal;
254
  }
255
 
 
 
256
  #toggles #artistsMatching {
257
  opacity: 0.8;
258
  cursor: default;
 
511
  height: 100%;
512
  background-color: #666;
513
  opacity: 0;
514
+ transition: opacity 200ms 50ms linear;
515
  }
516
 
517
+ .image-item:hover .imgTools {
518
  opacity: 1;
519
  }
520
 
 
627
  }
628
  }
629
 
630
+ .image-item .deprecated {
631
+ color: #888;
632
+ text-align: center;
633
+ display: block;
634
+ padding: 70px 20px 20px 20px;
635
+ }
636
+
637
  .image-item img {
638
  display: block;
639
  width: 256px;
index.html CHANGED
@@ -1,6 +1,7 @@
1
  <!DOCTYPE html>
2
  <html>
3
  <head>
 
4
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5
  <script type="text/javascript" src="artists_and_tags.js"></script>
6
  <script type="text/javascript" src="index.js"></script>
@@ -33,6 +34,14 @@
33
  <li><strong>checked:</strong> hides tags that match less than 3 artists</li>
34
  <li>note that all hidden tags are unchecked</li>
35
  </ul>
 
 
 
 
 
 
 
 
36
  <h3>When using Stable Diffusion</h3>
37
  <ul>
38
  <li>Reproduce these styles with the prompt with "by {Artist full name}, ...."
@@ -145,6 +154,9 @@
145
  <label class="top_control">
146
  <input type="checkbox" checked="checked" name="low_count" value="low_count" autocomplete="off"><span>hide low-use tags</span><span class="count"></span>
147
  </label>
 
 
 
148
  <label class="top_control">
149
  <input type="checkbox" checked="checked" name="favorite" value="favorite" autocomplete="off"><span>favorited</span><span class="count"></span>
150
  </label>
@@ -187,10 +199,9 @@
187
  -->
188
  </div>
189
  </div>
190
- <footer class="special">
191
  <div>
192
- <span><strong>Temporarily 500 artists while in Beta.</strong> To learn more click the 📓 at the top left -</span>
193
- <span>SDXL Artist Style Explorer, v0.9, by</span>
194
  <a href="https://huggingface.co/mattthew" target="_blank">Mattthew</a>
195
  <div id="close_footer"><strong>&nbsp;&nbsp;x&nbsp;&nbsp;</strong></div>
196
  </div>
 
1
  <!DOCTYPE html>
2
  <html>
3
  <head>
4
+ <title>SDXL Artist Style Explorer by Mattthew</title>
5
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6
  <script type="text/javascript" src="artists_and_tags.js"></script>
7
  <script type="text/javascript" src="index.js"></script>
 
34
  <li><strong>checked:</strong> hides tags that match less than 3 artists</li>
35
  <li>note that all hidden tags are unchecked</li>
36
  </ul>
37
+ <h3>Hide deprecated artists</h3>
38
+ <ul>
39
+ <li>I've hand verified that SDXL doesn't know these artists' styles</li>
40
+ <li>If you prompt with their names, the result...</li>
41
+ <li>...will be unlike their actual style and generic.</li>
42
+ <li>You're better off prompting "a painting", etc.</li>
43
+ <li>I may eventually remove the artists from the database</li>
44
+ </ul>
45
  <h3>When using Stable Diffusion</h3>
46
  <ul>
47
  <li>Reproduce these styles with the prompt with "by {Artist full name}, ...."
 
154
  <label class="top_control">
155
  <input type="checkbox" checked="checked" name="low_count" value="low_count" autocomplete="off"><span>hide low-use tags</span><span class="count"></span>
156
  </label>
157
+ <label class="top_control">
158
+ <input type="checkbox" checked="checked" name="deprecated" value="deprecated" autocomplete="off"><span>hide deprecated</span><span class="count"></span>
159
+ </label>
160
  <label class="top_control">
161
  <input type="checkbox" checked="checked" name="favorite" value="favorite" autocomplete="off"><span>favorited</span><span class="count"></span>
162
  </label>
 
199
  -->
200
  </div>
201
  </div>
202
+ <footer>
203
  <div>
204
+ <span>SDXL Artist Style Explorer, v1.0, by</span>
 
205
  <a href="https://huggingface.co/mattthew" target="_blank">Mattthew</a>
206
  <div id="close_footer"><strong>&nbsp;&nbsp;x&nbsp;&nbsp;</strong></div>
207
  </div>
index.js CHANGED
@@ -62,6 +62,9 @@ function insertArtists() {
62
  tags2 = tags2.replace(/, added-(\d|-)*/g,'');
63
  var itemDiv = document.createElement('div');
64
  itemDiv.className = 'image-item ' + tags1;
 
 
 
65
  var itemHeader = document.createElement('span');
66
  var h3 = document.createElement('h3');
67
  itemHeader.appendChild(h3);
@@ -126,32 +129,54 @@ function insertArtists() {
126
  box.appendChild(imgBox);
127
  itemDiv.appendChild(box);
128
  container.appendChild(itemDiv);
129
- return Promise.allSettled([
130
- new Promise((resolve, reject) => {
131
- imgArtwork.onload = resolve;
132
- imgArtwork.onerror = () => {
133
- missingFiles += '<li>' + first + '_' + last + '-artwork.webp</li>';
134
- reject();
135
- };
136
- imgArtwork.src = src + '-artwork.webp';
137
- }),
138
- new Promise((resolve, reject) => {
139
- imgPortrait.onload = resolve;
140
- imgPortrait.onerror = () => {
141
- missingFiles += '<li>' + first + '_' + last + '-portrait.webp</li>';
142
- reject();
143
- };
144
- imgPortrait.src = src + '-portrait.webp';
145
- }),
146
- new Promise((resolve, reject) => {
147
- imgLandscape.onload = resolve;
148
- imgLandscape.onerror = () => {
149
- missingFiles += '<li>' + first + '_' + last + '-landscape.webp</li>';
150
- reject();
151
- };
152
- imgLandscape.src = src + '-landscape.webp';
153
- })
154
- ]);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
155
  });
156
  let report = document.getElementById('missing_images_report');
157
  Promise.allSettled(imagePromises).then(() => {
@@ -196,9 +221,6 @@ function insertCheckboxesFromArtistsData() {
196
  toggles.appendChild(label);
197
  }
198
  }
199
- var checkAll = document.querySelector('input[name="check-all"]');
200
- var divs = document.querySelectorAll('.image-item');
201
- checkAll.parentNode.querySelector('.count').textContent = ' - ' + divs.length.toLocaleString();
202
  }
203
 
204
  function insertCheckboxesFromCategories() {
@@ -465,18 +487,29 @@ function updateArtistsCountPerCategory() {
465
  }
466
 
467
  function updateCountOfArtistsShown(divs, hiddenDivs) {
 
 
 
468
  if(!divs) {
469
  // when this is called by change of a checkbox, divs is not passed
470
  var divs = document.querySelectorAll('.image-item');
471
  var hiddenDivs = document.querySelectorAll('.image-item.hidden');
472
  }
473
- var visible = divs.length - hiddenDivs.length;
474
- var percent = Math.round((visible / divs.length) * 100) + '%';
 
 
 
 
 
 
 
 
475
  if(percent == '0%') {
476
  percent = '<1%';
477
  }
478
- var el = document.getElementById('artistsShown').querySelector('.count');
479
- el.textContent = 'shown - ' + visible.toLocaleString() + ' / ' + percent;
480
  }
481
 
482
  function checkAllInCategory(theCheckbox) {
@@ -552,6 +585,7 @@ function unhideArtistsPermissive() {
552
  imageItem.classList.remove('hidden');
553
  }
554
  });
 
555
  }
556
 
557
  function unhideArtistsStrict() {
@@ -581,6 +615,7 @@ function unhideArtistsStrict() {
581
  imageItem.classList.remove('hidden');
582
  });
583
  }
 
584
  }
585
 
586
  function unhideAristsExact() {
@@ -603,6 +638,16 @@ function unhideAristsExact() {
603
  }
604
  });
605
  }
 
 
 
 
 
 
 
 
 
 
606
  }
607
 
608
  function checkOrUncheckAll(isChecked) {
@@ -1185,7 +1230,21 @@ function loadLargerImages(imageItem) {
1185
  reject();
1186
  };
1187
  img.dataset.thumbSrc = img.src;
1188
- img.src = img.src.replace('_thumbs','');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1189
  });
1190
  }
1191
  });
@@ -1290,6 +1349,13 @@ document.addEventListener("DOMContentLoaded", function() {
1290
  showHideLowCountTags();
1291
  storeCheckboxState(e.target);
1292
  });
 
 
 
 
 
 
 
1293
  }
1294
  }
1295
  });
 
62
  tags2 = tags2.replace(/, added-(\d|-)*/g,'');
63
  var itemDiv = document.createElement('div');
64
  itemDiv.className = 'image-item ' + tags1;
65
+ if(artist[3]) {
66
+ itemDiv.dataset.deprecated = true;
67
+ }
68
  var itemHeader = document.createElement('span');
69
  var h3 = document.createElement('h3');
70
  itemHeader.appendChild(h3);
 
129
  box.appendChild(imgBox);
130
  itemDiv.appendChild(box);
131
  container.appendChild(itemDiv);
132
+ if(artist[3]) {
133
+ var deprecatedSpan = document.createElement('span');
134
+ deprecatedSpan.textContent = 'this artist is deprecated. hover to view anyway. more info in the help ⁉️'
135
+ deprecatedSpan.className = 'deprecated';
136
+ imgBox.appendChild(deprecatedSpan);
137
+ return Promise.allSettled([
138
+ new Promise((resolve, reject) => {
139
+ imgArtwork.style.display = 'none';
140
+ imgArtwork.src = 'images/SDXL_1_0_thumbs/1x1.webp';
141
+ }),
142
+ new Promise((resolve, reject) => {
143
+ imgPortrait.style.display = 'none';
144
+ imgPortrait.src = 'images/SDXL_1_0_thumbs/1x1.webp';
145
+ }),
146
+ new Promise((resolve, reject) => {
147
+ imgLandscape.style.display = 'none';
148
+ imgLandscape.src = 'images/SDXL_1_0_thumbs/1x1.webp';
149
+ })
150
+ ]);
151
+ } else {
152
+ // if not flagged as deprecated
153
+ return Promise.allSettled([
154
+ new Promise((resolve, reject) => {
155
+ imgArtwork.onload = resolve;
156
+ imgArtwork.onerror = () => {
157
+ missingFiles += '<li>' + first + '_' + last + '-artwork.webp</li>';
158
+ reject();
159
+ };
160
+ imgArtwork.src = src + '-artwork.webp';
161
+ }),
162
+ new Promise((resolve, reject) => {
163
+ imgPortrait.onload = resolve;
164
+ imgPortrait.onerror = () => {
165
+ missingFiles += '<li>' + first + '_' + last + '-portrait.webp</li>';
166
+ reject();
167
+ };
168
+ imgPortrait.src = src + '-portrait.webp';
169
+ }),
170
+ new Promise((resolve, reject) => {
171
+ imgLandscape.onload = resolve;
172
+ imgLandscape.onerror = () => {
173
+ missingFiles += '<li>' + first + '_' + last + '-landscape.webp</li>';
174
+ reject();
175
+ };
176
+ imgLandscape.src = src + '-landscape.webp';
177
+ })
178
+ ]);
179
+ }
180
  });
181
  let report = document.getElementById('missing_images_report');
182
  Promise.allSettled(imagePromises).then(() => {
 
221
  toggles.appendChild(label);
222
  }
223
  }
 
 
 
224
  }
225
 
226
  function insertCheckboxesFromCategories() {
 
487
  }
488
 
489
  function updateCountOfArtistsShown(divs, hiddenDivs) {
490
+ var checkAll = document.querySelector('input[name="check-all"]').parentNode.querySelector('.count');
491
+ var shown = document.getElementById('artistsShown').querySelector('.count');
492
+ var deprecatedItems = document.querySelectorAll('[data-deprecated="true"]');
493
  if(!divs) {
494
  // when this is called by change of a checkbox, divs is not passed
495
  var divs = document.querySelectorAll('.image-item');
496
  var hiddenDivs = document.querySelectorAll('.image-item.hidden');
497
  }
498
+ var total = 0;
499
+ var visible = 0;
500
+ if(document.querySelector('input[name="deprecated"]').checked) {
501
+ total = divs.length - deprecatedItems.length;
502
+ visible = total - hiddenDivs.length + deprecatedItems.length;
503
+ } else {
504
+ total = divs.length;
505
+ visible = total - hiddenDivs.length;
506
+ }
507
+ var percent = Math.round((visible / total) * 100) + '%';
508
  if(percent == '0%') {
509
  percent = '<1%';
510
  }
511
+ checkAll.textContent = ' - ' + total.toLocaleString();
512
+ shown.textContent = 'shown - ' + visible.toLocaleString() + ' / ' + percent;
513
  }
514
 
515
  function checkAllInCategory(theCheckbox) {
 
585
  imageItem.classList.remove('hidden');
586
  }
587
  });
588
+ hideDeprecated();
589
  }
590
 
591
  function unhideArtistsStrict() {
 
615
  imageItem.classList.remove('hidden');
616
  });
617
  }
618
+ hideDeprecated();
619
  }
620
 
621
  function unhideAristsExact() {
 
638
  }
639
  });
640
  }
641
+ hideDeprecated();
642
+ }
643
+
644
+ function hideDeprecated() {
645
+ if(document.querySelector('input[name="deprecated"]').checked) {
646
+ let deprecatedItems = document.querySelectorAll('[data-deprecated="true"]');
647
+ deprecatedItems.forEach(function(item, index) {
648
+ item.classList.add('hidden');
649
+ });
650
+ }
651
  }
652
 
653
  function checkOrUncheckAll(isChecked) {
 
1230
  reject();
1231
  };
1232
  img.dataset.thumbSrc = img.src;
1233
+ // inline style set for deprecated artists
1234
+ img.style.display = '';
1235
+ let src = 'images/SDXL_1_0/';
1236
+ if(first == '') {
1237
+ src += last.replaceAll(' ', '_');
1238
+ } else {
1239
+ src += first.replaceAll(' ', '_') + '_' + last.replaceAll(' ', '_');
1240
+ }
1241
+ if(img.classList.contains('img_artwork')) {
1242
+ img.src = src + '-artwork.webp';
1243
+ } else if(img.classList.contains('img_portrait')) {
1244
+ img.src = src + '-portrait.webp';
1245
+ } else if(img.classList.contains('img_landscape')) {
1246
+ img.src = src + '-landscape.webp';
1247
+ }
1248
  });
1249
  }
1250
  });
 
1349
  showHideLowCountTags();
1350
  storeCheckboxState(e.target);
1351
  });
1352
+ } else if(checkbox.name == 'deprecated') {
1353
+ checkbox.addEventListener('change', function(e) {
1354
+ hideAllArtists();
1355
+ unhideBasedOnPermissiveSetting();
1356
+ updateArtistsCountPerTag('click');
1357
+ storeCheckboxState(e.target);
1358
+ });
1359
  }
1360
  }
1361
  });