add button, test functionality

sketch.js

@@ -14,14 +14,16 @@ const inference = new HfInference();
 
 
 
-let promptResult, fillAResult, fillBResult, fillCResult, promptButton, buttonButton, promptInput, fillA, fillB, fillC, modelDisplay, modelResult
+let PROMPT, promptResult, blankAResult, blankBResult, blankCResult, promptButton, blankButton, promptInput, blankA, blankB, blankC, modelDisplay, modelResult
 // const detector = await pipeline('text-generation', 'meta-llama/Meta-Llama-3-8B', 'Xenova/LaMini-Flan-T5-783M');
 
+let blankArray = []
+
 let MODELNAME = 'Xenova/gpt-3.5-turbo'
 // models('Xenova/gpt2', 'Xenova/gpt-3.5-turbo', 'mistralai/Mistral-7B-Instruct-v0.2', 'Xenova/llama-68m', 'meta-llama/Meta-Llama-3-8B', 'Xenova/bloom-560m', 'Xenova/distilgpt2')
 
 
-var PREPROMPT = `Return an array of sentences. In each sentence, fill in the [BLANK] in the following sentence with each word I provide in the array ${fillArray}. Replace any [FILL] with an appropriate word of your choice.` 
+var PREPROMPT = `Return an array of sentences. In each sentence, blank in the [BLANK] in the following sentence with each word I provide in the array ${blankArray}. Replace any [blank] with an appropriate word of your choice.` 
 
 
 ///// p5 STUFF
@@ -57,34 +59,34 @@ new p5(function(p5){
         promptInput = p5.createInput("")
         promptInput.position(0,160)
         promptInput.size(500);
-        promptInput.attribute('label', `Write a text prompt with at least one [BLANK] that describes someone. You can also write [FILL] where you want the bot to fill in a word.`)
-        promptInput.value(`The [BLANK] works as a [FILL] but wishes for [FILL].`)
+        promptInput.attribute('label', `Write a text prompt with at least one [BLANK] that describes someone. You can also write [blank] where you want the bot to blank in a word.`)
+        promptInput.value(`The [BLANK] works as a [blank] but wishes for [blank].`)
         promptInput.elt.style.fontSize = "15px";
         p5.createP(promptInput.attribute('label')).position(0,100)
-        // p5.createP(`For example: "The BLANK has a job as a FILL where their favorite thing to do is ...`)
-        promptResult = promptInput.value()
-
+        // p5.createP(`For example: "The BLANK has a job as a blank where their favorite thing to do is ...`)
 
         //make for loop to generate
         //make a button to make another
         //add them to the list of items
-        fillA = p5.createInput("");
-        fillA.position(0, 240);
-        fillA.size(200);
-        fillA.elt.style.fontSize = "15px"; 
-        fillAResult = fillA.value() 
-
-        fillB = p5.createInput("");
-        fillB.position(0, 270);
-        fillB.size(200);
-        fillB.elt.style.fontSize = "15px";
-        fillBResult = fillB.value()
-
-        fillC = p5.createInput("");
-        fillC.position(0, 300);
-        fillC.size(200);
-        fillC.elt.style.fontSize = "15px";
-        fillCResult = fillC.value()
+        blankA = p5.createInput("");
+        blankA.position(0, 240);
+        blankA.size(200);
+        blankA.elt.style.fontSize = "15px"; 
+        blankA.addClass("blank")
+
+        blankButton = p5.createButton("more blanks").position(230,240)
+        blankButton.elt.style.fontSize = "15px"
+        blankButton.mousePressed(makeBlank)
+
+        // blankB = p5.createInput("");
+        // blankB.position(0, 270);
+        // blankB.size(200);
+        // blankB.elt.style.fontSize = "15px";
+
+        // blankC = p5.createInput("");
+        // blankC.position(0, 300);
+        // blankC.size(200);
+        // blankC.elt.style.fontSize = "15px";
 
         // modelDisplay = p5.createElement("p", "Results:");
         // modelDisplay.position(0, 380);
@@ -104,9 +106,31 @@ new p5(function(p5){
         // TO-DO alt-text description
     }
 
+    function makeBlank(){
+        let i = 
+        let b = p5.createInput("")
+        b.position(0, 240 + (i*30)) // positions new buttons below the prior buttons based on their place in the list
+        b.size(200)
+        b.elt.style.fontSize = "15px" // change this to CSS
+        b.addClass("blank")
+        blankA.append(b)
+    }
+
     function test(){
         console.log('did test')
-        console.log(promptInput.value(), fillAResult, fillBResult, fillCResult)
+        //make sure to set these variables to the values here, at the moment of button press, otherwise they will be blank
+        promptResult = promptInput.value()
+        // blankAResult = blankA.value()
+        // blankBResult = blankB.value()
+        // blankCResult = blankC.value()
+
+        let blanks = document.querySelectorAll("class", "blank")
+
+        for (b in blanks){
+            // b = b.value()
+            inputArray.push(b.value())    
+        }
+        console.log(promptResult, inputArray)
     }
 
     // var modelResult = promptButton.mousePressed(runModel) = function(){
@@ -117,9 +141,9 @@ new p5(function(p5){
     //     runModel()
     // }
 
-    // function makefill(i){
+    // function makeblank(i){
     //     i = p5.createInput("");
-    //     i.position(0, 300); //append to last fill and move buttons down
+    //     i.position(0, 300); //append to last blank and move buttons down
     //     i.size(200);
     //     i.elt.style.fontSize = "15px";
     //   }    
@@ -129,13 +153,13 @@ new p5(function(p5){
 ///// MODEL STUFF
 
 
-// var PROMPT = `The [BLANK] works as a [FILL] but wishes for [FILL].`
-// /// this needs to run on button click, use string variables to fill in the form
-var PROMPT = promptInput.value()
+// var PROMPT = `The [BLANK] works as a [blank] but wishes for [blank].`
+// /// this needs to run on button click, use string variables to blank in the form
+// var PROMPT = promptInput.value()
 
-var fillArray = ["mother", "father", "sister", "brother"]
-// // for num of fills put in list
-// var fillArray = [`${fillAResult}`, `${fillBResult}`, `${fillCResult}`]
+// var blankArray = ["mother", "father", "sister", "brother"]
+// // for num of blanks put in list
+// var blankArray = [`${blankAResult}`, `${blankBResult}`, `${blankCResult}`]
 
 
 // async function runModel(){