comparator.js

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;
}