connect prompt to form button

sketch.js

@@ -13,37 +13,47 @@ const inference = new HfInference();
 let promptButton, buttonButton, promptInput, maskInputA, maskInputB, maskInputC, modOutput
 // const detector = await pipeline('text-generation', 'meta-llama/Meta-Llama-3-8B', 'Xenova/LaMini-Flan-T5-783M');
 
-var inputArray = ["Brit", "Israeli", "German", "Palestinian"]
+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 ${inputArray}. Replace any [FILL] with an appropriate word of your choice.` 
 
-var PROMPT = `The [BLANK] works as a [FILL] but wishes for [FILL].`
-
-// Chat completion API
-const out = await inference.chatCompletion({
-    model: "mistralai/Mistral-7B-Instruct-v0.2",
-    // model: "google/gemma-2-9b",
-    messages: [{ role: "user", content: PREPROMPT + PROMPT }],
-    max_tokens: 100
-  });
-
-// let out = await pipe(PREPROMPT + PROMPT)
-// let out = await pipe(PREPROMPT + PROMPT, {
-//     max_new_tokens: 250,
-//     temperature: 0.9,
-//     // return_full_text: False,
-//     repetition_penalty: 1.5,
-//     // no_repeat_ngram_size: 2,
-//     // num_beams: 2,
-//     num_return_sequences: 1
-// });
-console.log(out)
+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 ${inputArray}. Replace any [FILL] with an appropriate word of your choice.` 
 
-var result = await out.choices[0].message.content
-// var result = await out[0].generated_text
-console.log(result);
-  
-  
+// 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 inputArray = ["mother", "father", "sister", "brother"]
+// for num of inputs put in list
+var inputArray = [`${maskInputA}`, `${maskInputB}`, `${maskInputC}`]
+
+function runModel(){
+    // Chat completion API
+    const out = await inference.chatCompletion({
+        model: MODELNAME,
+        // model: "google/gemma-2-9b",
+        messages: [{ role: "user", content: PREPROMPT + PROMPT }],
+        max_tokens: 100
+    });
+
+    // let out = await pipe(PREPROMPT + PROMPT)
+    // let out = await pipe(PREPROMPT + PROMPT, {
+    //     max_new_tokens: 250,
+    //     temperature: 0.9,
+    //     // return_full_text: False,
+    //     repetition_penalty: 1.5,
+    //     // no_repeat_ngram_size: 2,
+    //     // num_beams: 2,
+    //     num_return_sequences: 1
+    // });
+    console.log(out)
+
+    var result = await out.choices[0].message.content
+    // var result = await out[0].generated_text
+    console.log(result);
+
+    return result
+}
 
 
 // Reference the elements that we will need
@@ -147,12 +157,8 @@ new p5(function(p5){
         // p5.background(200)
         // p5.textSize(20)
         // p5.textAlign(p5.CENTER,p5.CENTER)
-        let promptButton = p5.createButton("GO").position(0, 340);
-        promptButton.position(0, 340);
-        promptButton.elt.style.fontSize = "15px";
-        
     }
-    
+
     p5.draw = function(){
         //
     }
@@ -161,6 +167,8 @@ new p5(function(p5){
         console.log('sketchfile loaded')
     }
 
+    
+
     function makeInterface(){
         console.log('got to make interface')
         let title = p5.createElement('h1', 'p5.js Critical AI Prompt Battle')
@@ -175,7 +183,10 @@ new p5(function(p5){
         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 ...`)
 
+
         //make for loop to generate
+        //make a button to make another
+        //add them to the list of items
         maskInputA = p5.createInput("");
         maskInputA.position(0, 240);
         maskInputA.size(200);
@@ -197,8 +208,31 @@ new p5(function(p5){
                 modOutput.html(result)
         }, 2000);
 
+        //a model drop down list?
+
+        //GO BUTTON
+        promptButton = p5.createButton("GO").position(0, 340);
+        promptButton.position(0, 340);
+        promptButton.elt.style.fontSize = "15px";
+        promptButton.mousePressed(runModel)
+        promptInput.changed(runModel)
+        maskInputA.changed(runModel)
+        maskInputB.changed(runModel)
+        maskInputC.changed(runModel)
+
+        // describe(``)
+        // TO-DO alt-text description
+
     }
 
+    // var result = promptButton.mousePressed(runModel) = function(){
+    //     // listens for the button to be clicked
+    //     // run the prompt through the model here
+    //     // result = runModel()
+    //     // return result
+    //     runModel()
+    // }
+
     // function makeInput(i){
     //     i = p5.createInput("");
     //     i.position(0, 300); //append to last input and move buttons down