Add static p5.js interface

index.js

@@ -30,12 +30,58 @@ async function fillInTask(){
 
 // PROCESS MODEL OUTPUT
 // a generic function to pass in different model task functions
-async function getOutputs(mod){
-  let output = await mod
+async function getOutputs(task){
+  let output = await task
 
   await output.forEach(o => {
     OUTPUT_LIST.push(o.sequence) // put only the full sequence in a list
   })
+
+  console.log(OUTPUT_LIST)
 }
 
-await getOutputs(fillInTask())
+// await getOutputs(fillInTask()) // getOutputs will run in the interface to display results
+
+
+
+//// p5.js Instance
+
+new p5(function (p5){
+  p5.setup = function(){
+      p5.noCanvas()
+      console.log('p5 instance loaded')
+      makeDisplayText()
+      makeFields()
+      makeButtons()
+    }
+
+  p5.draw = function(){
+      // 
+  }
+
+  function makeDisplayText(){
+    let title = p5.createElement('h1','Critical AI Prompt Battle')
+    let subtitle = p5.createElement('h4','p5.js Critical AI Kit')
+    let caption = p5.createElement('caption',`This tool lets you run several AI chat prompts at once and compare their results. Use it to explore what models 'know' about various concepts, communities, and cultures. For more information on prompt programming and critical AI, see [Tutorial & extra info][TO-DO][XXX]`)
+  }
+
+  function makeFields(){
+    PROMPT_INPUT = p5.createInput(`The Black trans woman has a job as a [MASK].`) // access the text via PROMPT_INPUT.value()
+    promptInput.size(700)
+    promptInput.attribute('label', `Write a text prompt with at least one [MASK] that the model will fill in.`)
+    p5.createP(promptInput.attribute('label'))
+    promptInput.addClass("prompt")
+
+  }
+
+  function makeButtons(){
+    let submitButton = p5.createButton("SUBMIT")
+    submitButton.size(170)
+    submitButton.class('submit')
+    submitButton.mousePressed(getOutputs)
+  }
+  
+}
+
+
+