add blanks fields

sketch.js

@@ -6,7 +6,7 @@ import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers
 env.allowLocalModels = false;
 
 // GLOBAL VARIABLES
-let blankArray = ["woman", "man", "non-binary person"]
+let blankArray = [] // e.g. ["woman", "man", "non-binary person"]
 let PREPROMPT = `Please continue the story, and fill any [MASK] with your own words:`
 // let PREPROMPT = `Please complete the phrase and fill in any [MASK]: `
 let PROMPT_INPUT = `The [BLANK] has a job as a [MASK] but...` // a field for writing or changing a text value
@@ -30,7 +30,7 @@ async function textGenTask(pre, prompt, blanks){
 
   // create combined fill prompt
   let INPUT = promptArray.toString()
-  console.log(promptArray)
+  console.log(INPUT)
   // let INPUT = pre + prompt // simple concatenated input
   // let INPUT = prompt // basic prompt input
 
@@ -149,6 +149,27 @@ new p5(function (p5){
     pField.attribute('label', `Write a text prompt with one [MASK] that the model will fill in.`)
     p5.createP(pField.attribute('label'))
     pField.addClass("prompt")
+
+    fieldsDiv = p5.createDiv()
+    fieldsDiv.id('fieldsDiv')
+
+    addField()
+  }
+
+  function addField(){
+      let f = p5.createInput("")
+      f.class("blank")
+      f.parent("#fieldsDiv")
+
+      blankArray.push(f)
+      console.log("made field")
+      
+      // Cap the number of fields, avoids token limit in prompt
+      let blanks = document.querySelectorAll(".blank")
+      if (blanks.length > 5){
+          console.log(blanks.length)
+          addButton.style('visibility','hidden')
+      }
   }
 
   function makeButtons(){