☰

NoCrypt Colab QOL

Change custom-urls from input to textarea in my colab, and many more...

// ==UserScript==
// @name         NoCrypt Colab QOL
// @namespace    ncpt
// @version      0.8
// @description  Change custom-urls from input to textarea in my colab, and many more...
// @author       NoCrypt
// @match        https://colab.research.google.com/drive/1wEa-tS10h4LlDykd87TF5zzpXIIQoCmq*
// @match        https://huggingface.co/*/tree/*
// @match        https://civitai.com/*
// @icon         https://ssl.gstatic.com/colaboratory-static/common/12df515217423d1c70c00f898e263cb5/img/favicon.ico
// @grant        GM_setValue
// @grant        GM_getValue
// @license      WTFPL
// ==/UserScript==

(function () {
  // if url start with huggingface

  function makeButton() {
    let button = document.createElement("button");
    button.innerText = "+";
    button.style = `

          background-color: #040e17;
          border-radius: 3px;
          border-style: solid;
          border-color: #3bd7ff;
          border-width: 1.5px;
          color: #3bd7ff;
          cursor: pointer;
          outline: none;
          padding: 2px 9px;
          text-decoration: none;
          vertical-align: baseline;
          user-select: none;
          -webkit-user-select: none;
          touch-action: manipulation;
          width: 30px;
          z-index: 999;
          `;
    return button;
  }

  async function addLink(link) {
    let curr = await GM_getValue("nocrypt-qol", "");
    if (curr.indexOf(link) !== -1) {
      alert("Already exists");
      return;
    }

    curr += curr === "" ? link : ", " + link;
    await GM_setValue("nocrypt-qol", curr);
  }

  if (window.location.origin == "https://huggingface.co") {
    setTimeout(() => {
      let links = [];
      let elements = document.querySelectorAll("a");
      for (let i = 0; i < elements.length; i++) {
        if (elements[i].href.indexOf("/resolve/") !== -1)
          if (
            elements[i].href.indexOf(".ckpt") !== -1 ||
            elements[i].href.indexOf(".safetensors") !== -1 ||
            elements[i].href.indexOf(".pt") !== -1 ||
            elements[i].href.indexOf(".yaml") !== -1
          ) {
            // add a button before the element

            let button = makeButton();
            button.onclick = () => {
              addLink(elements[i].href);
            };
            //elements[i].parentNode.insertBefore(button, elements[i]);
            //elements[i].previousElementSibling.style = ""
            elements[i].previousElementSibling.appendChild(button);
          }
      }
    }, 2000);
    // if (links.length > 0) {
    //   alert(links.join(", "));
    // } else {
    //   alert("No links found.");
    // }

    return;
  }

  if (window.location.origin == "https://civitai.com") {
    setTimeout(() => {
      console.log("civit lod");
      let elements = document.querySelectorAll("a");
      for (let i = 0; i < elements.length; i++) {
        if (elements[i].href.indexOf("/api/download/") !== -1) {
          let button = makeButton();
          button.onclick = () => {
            addLink(elements[i].href);
          };
          elements[i].parentNode.insertBefore(button, elements[i]);
        }
      }
    }, 2000);
    return;
  }

  setTimeout(() => {
    // Add everything
    function addThemAll() {
      const paperInput = document.querySelector(
        "colab-form > div > colab-form-input:nth-last-child(3) > div > paper-input"
      );

      const textBox = paperInput.shadowRoot.querySelector(
        "iron-input[id^='input'] > input"
      );

      // hide textbox using opacity
      textBox.style.opacity = 0;
      textBox.style.height = "0px";
      textBox.style.position = "absolute";
      textBox.style.pointerEvents = "none";

      // replace it with textarea
      let textArea = document.createElement("textarea");
      textArea.id = "nocrypt-qol";
      textArea.rows = 5;
      textArea.placeholder =
        "Enter links here. Yet another QOL feature by NoCrypt.";
      const style = document.createElement("style");
      style.innerHTML = `
  textarea#nocrypt-qol {
    width: 100%;
    background-color: #040e17;
    color: #3bd7ff;
    border-radius: 5px;
    border-width: 1px;
    border-color: gray;
    padding: 8px;
    margin-inline: 5px;
    resize: vertical;
  }
  textarea#nocrypt-qol::placeholder {
    color: #3bd7ffcc;
  }

  textarea#nocrypt-qol:focus {
    outline: none;
    border-color: #3bd7ff;
    border-width: 1.5px;
  }

  div#nocrypt-container > div > button, div#nocrypt-container-ngrok > div > button  {
    background-color: #040e17;
    border-radius: 3px;
    border-style: solid;
    border-color: #3bd7ff;
    border-width: 1.5px;
    color: #3bd7ff;
    cursor: pointer;
    margin: 0;
    outline: none;
    padding: 5px 8px;
    text-decoration: none;
    vertical-align: baseline;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
  }

`;
      const originalUrls = textBox.value;
      textArea.value = originalUrls;
      // add event listener to textarea
      textArea.addEventListener("input", (e) => {
        textBox.value = e.target.value;
        textBox.dispatchEvent(new Event("input", { bubbles: true }));
        textBox.dispatchEvent(new Event("change", { bubbles: true }));
      });

      // warp textarea in a div
      let div = document.createElement("div");
      div.id = "nocrypt-container";
      div.style.width = "98%";
      div.style.display = "flex";
      div.style.flexDirection = "column";

      let div2 = document.createElement("div");
      div2.style.display = "flex";
      div2.style.gap = "5px";
      div2.style.margin = "8px";

      let status = document.createElement("span");
      status.innerText = "";

      function statusUpdate(text) {
        status.innerText = text;
        setTimeout(() => {
          status.innerText = "";
        }, 2000);
      }

      let btnSave = document.createElement("button");
      btnSave.innerText = "Save";
      btnSave.addEventListener("click", () => {
        GM_setValue("nocrypt-qol", textArea.value);

        statusUpdate("Saved to local storage");
      });

      let btnLoad = document.createElement("button");
      btnLoad.innerText = "Load";
      btnLoad.addEventListener("click", () => {
        textArea.value = GM_getValue("nocrypt-qol", "");
        textArea.dispatchEvent(new Event("input", { bubbles: true }));
        textArea.dispatchEvent(new Event("change", { bubbles: true }));

        statusUpdate("Loaded from local storage");
      });

      let btnClear = document.createElement("button");
      btnClear.innerText = "Clear";
      btnClear.addEventListener("click", () => {
        textArea.value = "";
        textArea.dispatchEvent(new Event("input", { bubbles: true }));
        textArea.dispatchEvent(new Event("change", { bubbles: true }));

        statusUpdate("Cleared");
      });

      div2.appendChild(btnLoad);
      div2.appendChild(btnSave);
      div2.appendChild(btnClear);
      div2.appendChild(status);

      // add textarea to the page
      div.appendChild(div2);
      div.appendChild(textArea);
      paperInput.parentNode.appendChild(style);
      paperInput.parentNode.appendChild(div);
      paperInput.classList = "";
      paperInput.nextElementSibling.style.display =
        paperInput.previousElementSibling.style.display = "none";
    }
    function addNgrokLoader(){
      const paperInput2 = document.querySelector(
        "colab-form > div > colab-form-input:nth-child(19) > div > paper-input"
      );

      const textBox2 = paperInput2.shadowRoot.querySelector(
        "iron-input[id^='input'] > input"
      );
      let div = document.createElement("div");
      div.id = "nocrypt-container-ngrok";
      div.style.display = "flex";
      div.style.flexDirection = "column";

      let div2 = document.createElement("div");
      div2.style.display = "flex";
      div2.style.gap = "5px";
      div2.style.margin = "8px";

      let btnLoad = document.createElement("button");
      btnLoad.innerText = "Load";
      btnLoad.addEventListener("click", () => {
        textBox2.value = GM_getValue("nocrypt-qol-ngrok", "");
        textBox2.dispatchEvent(new Event("input", { bubbles: true }));
        textBox2.dispatchEvent(new Event("change", { bubbles: true }));
      });
      let btnSave = document.createElement("button");
      btnSave.innerText = "Save";
      btnSave.addEventListener("click", () => {
        GM_setValue("nocrypt-qol-ngrok", textBox2.value);
      });

      div2.appendChild(btnLoad);
      div2.appendChild(btnSave);
      div.appendChild(div2);
      paperInput2.parentNode.appendChild(div);

    }

    // Seperated to a function due to Mutation Observer
    addThemAll();
    addNgrokLoader();

    // Mutation Observer for permanent modification
    let targetNode = document.querySelector("colab-form > div");
    const config = { childList: true };
    const callback = (mutationList, observer) => {
      for (const [idx, mutation] of mutationList.entries()) {
        if (mutation.type === "childList") {
          if (mutation.removedNodes.length > 0 && idx === 0) {
            // means there was a node removed
            // check if my container still exists
            console.log("removed, adding back...");
            if (!document.getElementById("nocrypt-container")) {
              // it doesn't exist, so add it back
              addThemAll();
              addNgrokLoader();

            }
          }
        }
      }
    };

    // Create an observer instance linked to the callback function
    const observer = new MutationObserver(callback);

    // Start observing the target node for configured mutations
    observer.observe(targetNode, config);
  }, 5000); // wait untill page finish rendering
})();