change input fields to input results

sketch.js

@@ -10,7 +10,7 @@ const inference = new HfInference();
 // Since we will download the model from the Hugging Face Hub, we can skip the local model check
 // env.allowLocalModels = false;
 
-let promptButton, buttonButton, promptInput, maskInputA, maskInputB, maskInputC, modOutput, result
+let promptResult, maskAResult, maskBResult, maskCResult, promptButton, buttonButton, promptInput, maskInputA, maskInputB, maskInputC, modelDisplay, modelResult
 // const detector = await pipeline('text-generation', 'meta-llama/Meta-Llama-3-8B', 'Xenova/LaMini-Flan-T5-783M');
 
 let MODELNAME = 'Xenova/gpt-3.5-turbo'
@@ -21,11 +21,11 @@ var PREPROMPT = `Return an array of sentences. In each sentence, fill in the [BL
 
 // 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}`
+var PROMPT = `${promptResult}`
 
 // var inputArray = ["mother", "father", "sister", "brother"]
 // for num of inputs put in list
-var inputArray = [`${maskInputA}`, `${maskInputB}`, `${maskInputC}`]
+var inputArray = [`${maskAResult}`, `${maskBResult}`, `${maskCResult}`]
 
 // async function runModel(){
 //     // Chat completion API
@@ -48,11 +48,11 @@ var inputArray = [`${maskInputA}`, `${maskInputB}`, `${maskInputC}`]
 //     // });
 //     console.log(out)
 
-//     var result = await out.choices[0].message.content
-//     // var result = await out[0].generated_text
-//     console.log(result);
+//     var modelResult = await out.choices[0].message.content
+//     // var modelResult = await out[0].generated_text
+//     console.log(modelResult);
 
-//     return result
+//     return modelResult
 // }
 
 
@@ -178,7 +178,7 @@ new p5(function(p5){
         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(`For example: "The [BLANK] has a job as a ...`)
+        promptResult = promptInput.value(`For example: "The [BLANK] has a job as a ...`)
         promptInput.elt.style.fontSize = "15px";
         p5.createP(promptInput.attribute('label')).position(0,100)
         // p5.createP(`For example: "The BLANK has a job as a MASK where their favorite thing to do is ...`)
@@ -190,22 +190,25 @@ new p5(function(p5){
         maskInputA = p5.createInput("");
         maskInputA.position(0, 240);
         maskInputA.size(200);
-        maskInputA.elt.style.fontSize = "15px";  
+        maskInputA.elt.style.fontSize = "15px"; 
+        maskAResult = maskInputA.value() 
 
         maskInputB = p5.createInput("");
         maskInputB.position(0, 270);
         maskInputB.size(200);
         maskInputB.elt.style.fontSize = "15px";
+        maskBResult = maskInputB.value()
 
         maskInputC = p5.createInput("");
         maskInputC.position(0, 300);
         maskInputC.size(200);
         maskInputC.elt.style.fontSize = "15px";
+        maskCResult = maskInputC.value()
 
-        modOutput = p5.createElement("p", "Results:");
-        modOutput.position(0, 380);
+        modelDisplay = p5.createElement("p", "Results:");
+        modelDisplay.position(0, 380);
             // setTimeout(() => {
-                modOutput.html(result)
+                modelDisplay.html(modelResult)
         // }, 2000);
 
         //a model drop down list?
@@ -215,10 +218,10 @@ new p5(function(p5){
         promptButton.position(0, 340);
         promptButton.elt.style.fontSize = "15px";
         promptButton.mousePressed(test)
-        promptInput.changed(test)
-        maskInputA.changed(test)
-        maskInputB.changed(test)
-        maskInputC.changed(test)
+        // promptInput.changed(test)
+        // maskInputA.changed(test)
+        // maskInputB.changed(test)
+        // maskInputC.changed(test)
 
         // describe(``)
         // TO-DO alt-text description
@@ -231,11 +234,11 @@ new p5(function(p5){
         console.log(inputArray)
     }
 
-    // var result = promptButton.mousePressed(runModel) = function(){
+    // var modelResult = promptButton.mousePressed(runModel) = function(){
     //     // listens for the button to be clicked
     //     // run the prompt through the model here
-    //     // result = runModel()
-    //     // return result
+    //     // modelResult = runModel()
+    //     // return modelResult
     //     runModel()
     // }