VQGAN + CLIP Text Token Randomizer

gistfile1.txt

%%html
<style>
  @import url("https://fonts.googleapis.com/css2?family=Arvo:wght@400;700&display=swap");
* {
  font-family: "Arvo";
}

h3 {
  margin-left:10%;
  width: 80%;
  display: flex;
  align-content: center;
  justify-content: center;
  color: white;
  background: black;
  font-weight: 800;
  box-shadow: 3px 3px 3px #abcaabbb;
  padding: 1em;
  border-radius:4px;
}

input {
  border: 0;
  border-bottom: 3px double black;
  color:#000;
  border-radius: 2px;
  box-shadow: 3px 3px 3px #abcaabbb;
}
button {
  background: #666b;
  color: white;
  border: 0;
  border-radius: 4px;
  padding: 0.7em;
  margin: 0.2em;
  box-shadow: 3px 3px 3px #abcaabbb;
}
.form {
  width: 50%;
  margin-left: 25%;
  text-align: center;
}

.info {
  font-size: 0.8em;
  display: flex;
  align-content: center;
  justify-content: center;
}

#tokenList {
  display: flex;
  list-style: none;
}

.tokenLI {
  border: 0;
  border-radius: 4px;
  padding: 0.4em;
  margin: 0.4em;
  box-shadow: 3px 3px 3px #abcaabbb;
}
h4 a {
  color: #fff3;
}
.info {
  padding: 2em;
  margin: 1em;
}

.small{
    margin:2em;
}
</style>



<h3>JS Token Generator for VQGAN + CLIP</h3>

<div class="info">
  <p class="small">
    Select your total number of frames at the top, the interval is how many frames you want in between two sets of keyframed randomized values, and your tokens will be the phrases you want to use as input for vqgan+clip.
  </p>
  <p class="small"> Once you are satisfied with your settings, copy the text below the token buttons and paste it into your text prompts in vqgan+clip. The values are all semi-random- feel free to fork this guy and make it better!

  </p>
</div>

<br />

<div class="form">

  <label for="totalFrames">Total Frames</label>
  <input type="text" id="totalFrames" value="250"></input>
  <br />

  <label for="intervalInput">Interval</label>
  <input type="text" id="intervalInput" value="20"></input>
  <br />

  <label for="tokenText">Token</label>
  <input type="text" id="tokenText"></input>
  <br />
  <button id="submitText">Add token</button>
</div>
<ul id="tokenList">
</ul>
<p id="pyString">
</p>


<script>
  let tokenText = [];
let total_frames = 250;
let interval = 20;

let tokenTextInput = document.getElementById("tokenText");

const button = document.getElementById("submitText");
const tokenListUL = document.getElementById("tokenList");
const pyString = document.getElementById("pyString");
let totalFramesInput = document.getElementById("totalFrames");
let intervalInput = document.getElementById("intervalInput");

document.addEventListener("keypress", (e) => {
  if (e.key === "Enter") {
    addText();
  }
});

button.addEventListener("click", () => addText());
intervalInput.addEventListener("change", () => displayString());
totalFramesInput.addEventListener("change", () => displayString());

function addText() {
  let inp = tokenTextInput.value;
  if (inp.length > 0) {
    tokenText.push(inp);
    displayTokens();
    displayString();
    tokenTextInput.value = "";
  }
}

function removeText(text) {
  tokenText.indexOf(text) > -1
    ? tokenText.splice(tokenText.indexOf(text), 1)
    : tokenText;
  displayTokens();
  displayString();
}

function displayTokens() {
  console.log(tokenText);
  tokenListUL.innerHTML = `...`;
  if (tokenText.length > 0)
    tokenListUL.innerHTML = tokenText.map(
      (x) => `
  <li class="tokenLI"> ${x} <button onclick="removeText('${x}')">x</button> </li>
`
    );
}

function displayString() {
  pyString.innerText = "";
  if (tokenText.length > 0) {
    const bins = Math.floor(
      (parseInt(document.getElementById("totalFrames").value) ?? total_frames) /
        (parseInt(document.getElementById("intervalInput").value) ?? interval)
    );
    const binArr = new Array(bins).fill("");
    const output = binArr.map((x, i) => {
      return (
        (parseInt(document.getElementById("intervalInput").value) ?? interval) *
          i +
        ": (" +
        tokenText.map((i) => `${i}: ${Math.random().toFixed(3)}`).join("| ") +
        "), "
      );
    });

    const displayOut = output.join("").slice(0, output.join("").length - 2);
    pyString.innerText = displayOut;
  }
}

</script>