More Horde options and update civitai stuff

index.html

@@ -1176,7 +1176,14 @@ <h1 class="text-2xl font-bold" id="civitai_modelName">Model Name</h1>
  </button>
  </div>
  <!--Details-->
+
+
  <div class="px-2 pb-2 relative flex flex-col w-1/3">
+ <button type="button"
+ id="civitai_useBtn"
+ class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-2 my-2">
+ Use Model
+ </button>
  <div class="bg-gray-800 rounded mb-2">
  <h3 class="ml-2.5 mt-2 text-lg font-medium text-gray-900 dark:text-gray-100">
  Details
@@ -1906,13 +1913,13 @@ <h2 id="accordion-open-heading-1">
  512</label>
  <input type="range" id="width-slider"
  class="w-48 h-6 px-3 rounded-lg bg-blue-200 appearance-none dark:bg-gray-700 focus:ring-blue-200 dark:focus:ring-blue-800"
- min="128" max="1024" step="64" value="512">
+ min="128" max="2048" step="64" value="512">
  <label id="heightText" class="block mb-2 text-gray-500 dark:text-gray-400"
  for="height-slider">Height:
  512</label>
  <input type="range" id="height-slider"
  class="w-48 h-6 px-3 rounded-lg bg-blue-200 appearance-none dark:bg-gray-700 focus:ring-blue-200 dark:focus:ring-blue-800"
- min="128" max="1024" step="64" value="512">
+ min="128" max="2048" step="64" value="512">
  </div>
 
  <!-- Batch size slider -->
@@ -1942,22 +1949,44 @@ <h2 id="accordion-open-heading-1">
  </div>
 
  <!-- Horde Options-->
-
+ <div class="flex mb-4 horde">
+ <div class="horde mr-8"> 
+ <label for="horde_hires" class="flex items-center cursor-pointer">
+ <span class="block text-gray-500 dark:text-gray-400 mr-2 w-24" >Hires fix</span>
+ <input type="checkbox" id="horde_hires"
+ class="form-checkbox h-6 w-6 text-red-600 dark:text-red-400 rounded-md focus:ring-red-200 dark:focus:ring-red-800">
+ </label>
+ </div>
+ <div class="horde mr-8"> 
+ <label for="horde_karras" class="flex items-center cursor-pointer">
+ <span class="block text-gray-500 dark:text-gray-400 mr-2 w-24" >Karras</span>
+ <input type="checkbox" id="horde_karras" checked
+ class="form-checkbox h-6 w-6 text-red-600 dark:text-red-400 rounded-md focus:ring-red-200 dark:focus:ring-red-800">
+ </label>
+ </div>
+ <div class="horde mr-8"> 
+ <label for="horde_tiling" class="flex items-center cursor-pointer">
+ <span class="block text-gray-500 dark:text-gray-400 mr-2 w-28" title="Create seamless textures">Tiling</span>
+ <input type="checkbox" id="horde_tiling" 
+ class="form-checkbox h-6 w-6 text-red-600 dark:text-red-400 rounded-md focus:ring-red-200 dark:focus:ring-red-800">
+ </label>
+ </div>
+ </div>
 
  <!-- Image Saving-->
  <div class="flex mb-4">
 
  <div class="horde mr-8">
  <label for="allowNSFW" class="flex items-center cursor-pointer">
- <span class="block text-gray-500 dark:text-gray-400 mr-2" title="Allow NSFW content">Allow
+ <span class="block text-gray-500 dark:text-gray-400 mr-2 w-24" title="Allow NSFW content">Allow
  NSFW</span>
  <input type="checkbox" id="allowNSFW" checked
  class="form-checkbox h-6 w-6 text-red-600 dark:text-red-400 rounded-md focus:ring-red-200 dark:focus:ring-red-800">
  </label>
  </div>
  <div class="horde mr-8">
  <label for="slowWorkers" class="flex items-center cursor-pointer">
- <span class="block text-gray-500 dark:text-gray-400 mr-2" title="Enable Slow Workers">Slow
+ <span class="block text-gray-500 dark:text-gray-400 mr-2 w-24" title="Enable Slow Workers">Slow
  Workers</span>
  <input type="checkbox" id="slowWorkers" checked
  class="form-checkbox h-6 w-6 text-green-600 dark:text-green-400 rounded-md focus:ring-green-200 dark:focus:ring-green-800">
@@ -1969,16 +1998,16 @@ <h2 id="accordion-open-heading-1">
  <label for="saveToServer" class=" flex items-center cursor-pointer">
  <span class="block text-gray-500 dark:text-gray-400 mr-2"
  title="Save Images to Automatic1111 outputs. Also shows a grid of the generated images">Save
- images
+
  to server</span>
  <input type="checkbox" id="saveToServer"
  class="form-checkbox h-6 w-6 text-blue-600 dark:text-blue-400 rounded-md focus:ring-blue-200 dark:focus:ring-blue-800">
  </label>
  </div>
  <div>
  <label for="saveToHistory" class="flex items-center cursor-pointer">
- <span class="block text-gray-500 dark:text-gray-400 mr-2"
- title="Save Images to Local History Tab">Save images to History</span>
+ <span class="block text-gray-500 dark:text-gray-400 mr-2 w-28"
+ title="Save Images to Local History Tab">Save to History</span>
  <input type="checkbox" checked id="saveToHistory"
  class="form-checkbox h-6 w-6 text-blue-600 dark:text-blue-400 rounded-md focus:ring-blue-200 dark:focus:ring-blue-800">
  </label>

scripts/civitai.js

@@ -430,12 +430,13 @@ function civitai_addLoraEntry(imageSrc, data, Blurred = null) {
  infoDiv.setAttribute('data-modal-toggle', 'loraInfoModal');
 
  const nameHeading = document.createElement('h3');
- nameHeading.classList.add('text-sm', 'text-gray-700');
+ nameHeading.classList.add('text-sm', 'text-gray-700',"m-1");
 
  const nameLink = document.createElement('a');
- nameLink.classList.add("mb-2", "text-xl", "font-bold", "tracking-tight", "text-gray-900", "dark:text-white", "whitespace-normal", "break-words", "max-h-4", "overflow-hidden");
+ nameLink.classList.add("mb-2","mr-1", "font-bold","text-lg", "tracking-tight", "text-gray-900", "dark:text-white", "whitespace-normal", "break-words", "max-h-4", "overflow-hidden");
 
  const nameText = document.createTextNode(data.name);
+
  nameLink.appendChild(nameText);
 
  const userFlexDiv = document.createElement('div');
@@ -594,6 +595,11 @@ function OpenCivitAiModal(id) {
  var versionData = data.modelVersions[0];
 
  model_name.textContent = data.name;
+
+ document.getElementById("civitai_useBtn").onclick = function () {
+
+ };
+
  tag_container.innerHTML = "";
  data.tags.forEach(tag => {
  const tagSpan = document.createElement("span");
@@ -769,6 +775,11 @@ function loadCivitaiImages(modelId = null, nsfwLevel = null, clear = true, overr
  _image.onerror = function () {
  imageDiv.remove();
  };
+ _image.addEventListener("click", () => {
+ //open https://civitai.com/images/ in new tab
+ window.open("https://civitai.com/images/" + data.items[i].id, '_blank');
+
+ });
 
  if (data.items[i].meta) {
  const infoIcon = document.createElement("i");
@@ -783,6 +794,43 @@ function loadCivitaiImages(modelId = null, nsfwLevel = null, clear = true, overr
  imageDiv.appendChild(infoIcon);
  }
 
+ const reactionDiv = document.createElement("div");
+ //rounded transparent black background horizontal in left corner container
+ reactionDiv.classList.add("absolute", "bottom-2", "left-2", "flex", "items-center", "rounded", "bg-black", "bg-opacity-50", "px-2", "py-0.5");
+
+ var stats = data.items[i].stats;
+ var likeCount = stats.heartCount + stats.likeCount + stats.laughCount
+
+ if(likeCount >0) {
+ const heartIcon = document.createElement("i");
+ heartIcon.classList.add("fa-solid", "fa-heart", "text-red-500", "text-base");
+ reactionDiv.appendChild(heartIcon);
+ const heartText = document.createElement("p");
+ heartText.classList.add("text-white", "text-sm", "ml-1");
+ heartText.textContent = likeCount
+ reactionDiv.appendChild(heartText);
+ }
+ if(stats.commentCount >0) {
+ const commentIcon = document.createElement("i");
+ commentIcon.classList.add("fa-solid", "fa-comment", "text-white", "text-base", "ml-2");
+ reactionDiv.appendChild(commentIcon);
+ const commentText = document.createElement("p");
+ commentText.classList.add("text-white", "text-sm", "ml-1");
+ commentText.textContent = stats.commentCount
+ reactionDiv.appendChild(commentText);
+ }
+
+
+
+
+
+
+
+
+
+
+ imageDiv.appendChild(reactionDiv);
+
  columns[i % 4].appendChild(imageDiv);
  }
  initDropdowns();

scripts/horde.js

@@ -217,6 +217,9 @@ function GenerateHorde() {
  "height": parseInt(height),
  "steps": parseInt(stepsSlider.value),
  "n": parseInt(batchSizeSlider.value),
+ "hires_fix": document.getElementById("horde_hires").checked,
+ "tiling": document.getElementById("horde_tiling").checked,
+ "karras": document.getElementById("horde_karras").checked,
  },
  "nsfw": document.getElementById("allowNSFW").checked,
  "slow_workers": document.getElementById("slowWorkers").checked,
@@ -545,6 +548,7 @@ function horde_AddEmbedding(data, _id=null) {
  });
  return;
  }
+
 
  var name = data.name;
  var id = data.id;

scripts/saving.js

@@ -87,6 +87,9 @@ const InputsToSave = [
  //horde
  {id:"allowNSFW", type:"checked"},
  {id:"slowWorkers", type:"checked"},
+ {id:"horde_karras", type:"checked"},
+ {id:"horde_hires", type:"value"},
+ {id:"horde_tiling", type:"checked"},
  //filters
  {id:"civitai_nsfw", type:"checked"},
  {id:"civitai_favorites", type:"checked"},