Spaces:
Running
Running
| <head> | |
| <meta charset="utf-8" /> | |
| <script type="text/javascript" src="data-civitai.js"></script> | |
| <script type="text/javascript" src="data-local.js"></script> | |
| <script type="text/javascript" src="comparator.js"></script> | |
| <style> | |
| body { | |
| color: whitesmoke; | |
| background-color: rgb(13, 46, 11); | |
| } | |
| a { | |
| text-decoration: none; | |
| color: white; | |
| } | |
| .mainContent { | |
| position: absolute; | |
| margin-top: 20px; | |
| display: flex; | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| } | |
| .searchBox { | |
| margin-top: 15px; | |
| margin-left: 20px; | |
| } | |
| .found { | |
| width: 30px; | |
| } | |
| .element { | |
| padding: 0; | |
| margin: 3px; | |
| border: 1px solid rgb(5, 90, 0); | |
| display: inline-block; | |
| position: relative; | |
| width: 192px; | |
| height: 283px; | |
| } | |
| .element .modelType { | |
| position: absolute; | |
| padding: 2px; | |
| padding-left: 4px; | |
| padding-right: 4px; | |
| right: 0; | |
| background-color: rgba(0, 0, 0, 0.5); | |
| bottom: 22px; | |
| } | |
| .element .modelName { | |
| background-color: rgba(50, 217, 8, 0.15); | |
| text-overflow: ellipsis; | |
| overflow: hidden; | |
| white-space: nowrap; | |
| padding-left: 2px; | |
| } | |
| .element .modelCreator { | |
| position: absolute; | |
| background-color: rgba(0, 0, 0, 0.5); | |
| padding: 2px; | |
| padding-left: 4px; | |
| padding-right: 4px; | |
| bottom: 22px; | |
| } | |
| .statsBox { | |
| position: relative; | |
| top: -88px; | |
| padding-left: 6px; | |
| background-color: rgba(0, 0, 0, 0.5); | |
| } | |
| .statsBox .statsDownloadCount { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| } | |
| .statsBox .statsFavoriteCount { | |
| position: absolute; | |
| top: 0; | |
| left: 52px; | |
| } | |
| .statsBox .statsCommentCount { | |
| position: absolute; | |
| top: 0; | |
| left: 105px; | |
| } | |
| .statsBox .statsRating { | |
| position: absolute; | |
| top: 0; | |
| left: 141px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <input | |
| class="searchBox" | |
| id="search" | |
| type="text" | |
| onkeyup="javascript:searchModels(this.value);" | |
| placeholder="search" | |
| /> | |
| <button | |
| onclick="javascript:clearCurrentSearchValue(); javascript:searchModels(getCurrentSearchValue())" | |
| > | |
| Clear | |
| </button> | |
| Found: <input class="found" id="found" type="text" readonly /> | |
| <label for="searchMode">Mode</label> | |
| <select | |
| name="searchMode" | |
| id="searchMode" | |
| onchange="javascript:searchModels(getCurrentSearchValue());" | |
| > | |
| <option value="available">Available</option> | |
| <option value="missing">Missing</option> | |
| </select> | |
| <label> | |
| <input | |
| id="selectedLora" | |
| type="checkbox" | |
| onclick="javascript:searchModels(getCurrentSearchValue());" | |
| /> | |
| LoRA | |
| </label> | |
| <label> | |
| <input | |
| id="selectedLocon" | |
| type="checkbox" | |
| onclick="javascript:searchModels(getCurrentSearchValue());" | |
| /> | |
| LoCon | |
| </label> | |
| <label> | |
| <input | |
| id="selectedEmbedding" | |
| type="checkbox" | |
| onclick="javascript:searchModels(getCurrentSearchValue());" | |
| /> | |
| Embedding | |
| </label> | |
| <label> | |
| <input | |
| id="selectedFlux" | |
| type="checkbox" | |
| onclick="javascript:searchModels(getCurrentSearchValue());" | |
| /> | |
| Flux | |
| </label> | |
| <div id="mainContent" class="mainContent"></div> | |
| <script type="text/javascript"> | |
| function yesNo(value) { | |
| if (value === undefined) { | |
| return '❓'; | |
| } | |
| return value ? '✅' : '❌'; | |
| } | |
| const notMatched = { | |
| lycoris: [], | |
| lora: [], | |
| embedding: [], | |
| flux: [], | |
| }; | |
| models.lycorises.forEach((lycoris) => { | |
| const key = prepareKey(lycoris.name); | |
| if (presence[key] !== undefined) { | |
| presence[key].loconCivitai = true; | |
| setImageUrl(key, lycoris.imageUrl); | |
| presence[key].loconCivitaiLink = lycoris.url; | |
| } else if (!isKnownSkippableKey(key)) { | |
| notMatched.lycoris.push(key); | |
| } | |
| }); | |
| models.loras.forEach((lora) => { | |
| const key = prepareKey(lora.name); | |
| if (presence[key] !== undefined) { | |
| presence[key].loraCivitai = true; | |
| setImageUrl(key, lora.imageUrl); | |
| presence[key].loraCivitaiLink = lora.url; | |
| } else if (!isKnownSkippableKey(key)) { | |
| notMatched.lora.push(key); | |
| } | |
| }); | |
| models.embeddings.forEach((embedding) => { | |
| const key = prepareKey(embedding.name); | |
| if (presence[key] !== undefined) { | |
| presence[key].embeddingCivitai = true; | |
| setImageUrl(key, embedding.imageUrl); | |
| presence[key].embeddingCivitaiLink = embedding.url; | |
| } else if (!isKnownSkippableKey(key)) { | |
| notMatched.embedding.push(key); | |
| } | |
| }); | |
| console.log(notMatched); | |
| const presenceModels = []; | |
| for (const property in presence) { | |
| const element = { | |
| key: property, | |
| locon: presence[property].locon, | |
| lora: presence[property].lora, | |
| embedding: presence[property].embedding, | |
| flux: presence[property].flux, | |
| mega: undefined, | |
| imageUrl: presence[property]?.imageUrl ?? undefined, | |
| }; | |
| presenceModels.push(element); | |
| } | |
| searchModels(getCurrentSearchValue()); | |
| </script> | |
| </body> | |