Upload 5 files

comparator.js

@@ -0,0 +1,200 @@
+const unknownImage =
+  'https://mohitpawar.com/wp-content/uploads/2010/10/unknown.jpg';
+
+function handleKnownKeyExceptions(key) {
+  switch (key) {
+    case 'danika"cbg19"leemassey':
+      return 'cbg';
+    case 'joannarudaxsh':
+      return 'rudaxsh';
+    case 'cyberpunk2077:v':
+      return 'v';
+    case 'character:danascully':
+      return 'gilliananderson';
+    default:
+      return key;
+  }
+}
+
+function isKnownSkippableKey(key) {
+  if (key.startsWith('concept:') 
+    || key.startsWith('style:')
+    || key.startsWith('clothing:')) {
+    return true;
+  }
+
+  switch (key) {
+    case "sdxl0.9betatests:famouspeople":
+      return true;
+    default:
+      return false;
+  }
+}
+
+function prepareKey(name) {
+  return handleKnownKeyExceptions(
+    name
+      .toLowerCase()
+      .replaceAll(' ', '')
+      .replaceAll('-', '')
+      .replaceAll("'", '')
+      .replaceAll('ł', 'l')
+      .normalize('NFD')
+      .replace(/\p{Diacritic}/gu, ''),
+  );
+}
+
+function setImageUrl(key, imageUrl) {
+  if (!presence[key].imageUrl) {
+    presence[key].imageUrl = imageUrl;
+  }
+}
+
+function clearCurrentSearchValue() {
+  document.getElementById('search').value = '';
+}
+
+function getCurrentSearchValue() {
+  return document.getElementById('search').value;
+}
+
+function getCurrentSearchMode() {
+  return document.getElementById('searchMode').value;
+}
+
+function escapeHtml(unsafe) {
+  return unsafe
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;');
+}
+
+function formatNumber(num) {
+  return Math.abs(num) > 999
+    ? `${Math.sign(num) * (Math.abs(num) / 1000).toFixed(1)}k`
+    : Math.sign(num) * Math.abs(num);
+}
+
+function compare(a, b) {
+  if (a.name < b.name) {
+    return -1;
+  }
+  if (a.name > b.name) {
+    return 1;
+  }
+  return 0;
+}
+
+function linkPrefix(url) {
+  if (!url) return '';
+
+  return `<a href='${url}' target='_blank'>`;
+}
+
+function linkSuffix(url) {
+  if (!url) return '';
+  return '</a>';
+}
+
+function filterByType(element) {
+  switch (getCurrentSearchMode()) {
+    case 'available':
+      if (document.getElementById('selectedLocon').checked && !element.locon) {
+        return false;
+      }
+
+      if (document.getElementById('selectedLora').checked && !element.lora) {
+        return false;
+      }
+
+      if (
+        document.getElementById('selectedEmbedding').checked &&
+        !element.embedding
+      ) {
+        return false;
+      }
+	  
+	  if (document.getElementById('selectedFlux').checked && !element.flux) {
+        return false;
+      }
+      break;
+    case 'missing': {
+      if (document.getElementById('selectedLocon').checked && element.locon) {
+        return false;
+      }
+
+      if (document.getElementById('selectedLora').checked && element.lora) {
+        return false;
+      }
+
+      if (
+        document.getElementById('selectedEmbedding').checked &&
+        element.embedding
+      ) {
+        return false;
+      }
+	  
+	  if (document.getElementById('selectedFlux').checked && element.flux) {
+        return false;
+      }
+      break;
+    }
+  }
+
+  return true;
+}
+
+function searchModels(value) {
+  const lowerCaseValue = value.toLowerCase();
+
+  const filtered = presenceModels.filter((element) => {
+    return (
+      (element.key.toLowerCase().includes(lowerCaseValue) || value === '*') &&
+      filterByType(element)
+    );
+  });
+
+  document.getElementById('found').value = filtered.length;
+
+  let htmlContent = '';
+  const contentDiv = document.getElementById('mainContent');
+
+  let keys = [];
+  filtered.forEach((element) => {
+    keys.push(element.key);
+    htmlContent += `<div class="element">
+        <div class="modelName" title="${escapeHtml(element.key)}">${
+      element.key
+    }</div>
+
+        <div><img src='${
+          element.imageUrl ?? unknownImage
+        }' height="264" width="192"'/>
+        </div>
+
+        <div class="statsBox">
+            Locon: ${yesNo(element.locon)}
+            ${linkPrefix(element.loconHFLink)} HF: ${yesNo(
+      element.loconHF,
+    )}${linkSuffix(element.loconHFLink)}<br>
+            Lora:&nbsp;${yesNo(element.lora)}
+            ${linkPrefix(element.loraHFLink)}HF: ${yesNo(
+      element.loraHF,
+    )}${linkSuffix(element.loraHFLink)}
+            Embedding: ${yesNo(element.embedding)}
+            ${linkPrefix(element.embeddingHFLink)}HF: ${yesNo(
+      element.embeddingHF,
+    )}${linkSuffix(element.embeddingHFLink)}
+			Flux: ${yesNo(element.flux)} ${linkPrefix(element.fluxHFLink)}HF: ${yesNo(
+      element.fluxHF,
+    )}${linkSuffix(element.fluxHFLink)}
+        </div>
+    </div>`;
+  });
+
+  console.log('keys', keys);
+
+  contentDiv.innerHTML = htmlContent;
+}

index.html

@@ -1,19 +1,239 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+
+<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>