add more interface

sketch.js

@@ -124,60 +124,94 @@ new p5(function (p5){
   p5.setup = function(){
       p5.noCanvas()
       console.log('p5 instance loaded')
-      makeTextDisplay()
-      makeFields()
-      makeButtons()
+      makeTextModules()
+      makeInputModule()
+      makeOutputModule()
     }
 
-  p5.draw = function(){
-      // 
-  }
-
-  function makeTextDisplay(){
+  function makeTextModules(){
     const introDiv = p5.createDiv().class('module').id('intro')
-    p5.createElement('h1','p5.js Critical AI Prompt Battle')
+    p5.createElement('h1','p5.js Critical AI Prompt Battle').parent(introDiv)
     p5.createP(`What do AI models really 'know' about you — about your community, your language, your culture? What do they 'know' about different concepts, ideas, and worldviews?`).parent(introDiv)
     p5.createP(`This tool lets you compare the results of multiple AI-generated texts and images side-by-side, using blanks you fill in to explore variations on a single prompt. For more info on prompt programming and critical AI, see [TUTORIAL-LINK].`).parent(introDiv)
 
     const instructDiv = p5.createDiv().class('module').id('instructions')
-    p5.createElement('h2', 'Instructions')
+    p5.createElement('h4', 'INSTRUCTIONS').class('header').parent(instructDiv)
     p5.createP(`Write your prompt using [BLANK] and [MASK], where [BLANK] will be the variation you choose and fill in below, and [MASK] is a variation that the model will complete.`).parent(instructDiv)
     p5.createP(`For best results, try to phrase your prompt so that [BLANK] and [MASK] highlight the qualities you want to investigate. <A href="http://p5js.org">See examples.</a>`).parent(instructDiv)
   }
 
-  function makeFields(){
-    promptField = p5.createInput(PROMPT_INPUT) // turns the string into an input; now access the text via PROMPT_INPUT.value()
+  function makeInputModule(){
+    const inputDiv = p5.createDiv()
+    inputDiv.id('inputDiv').class('module')
+    p5.createElement('h4', 'INPUT').class('header').parent(inputDiv)
+    p5.createElement('h3', 'Enter your prompt').class('header').parent(inputDiv)
+    p5.createP('Write your prompt in the box below using one [BLANK] and one [MASK].').parent(inputDiv)
+    p5.createP('e.g. Write "The [BLANK] was a [MASK]..." and in the three blanks choose three occupations.').parent(inputDiv)
+    p5.createP('(This is taken from an actual example used to test GPT-3. (Brown et al. 2020).)').class('caption').parent(inputDiv)
+    promptField = p5.createInput(PROMPT_INPUT).parent(inputDiv) // turns the string into an input; now access the text via PROMPT_INPUT.value()
     promptField.size(700)
-    // promptField.attribute('label', `Write a text prompt with one [MASK] that the model will fill in.`)
-    p5.createP(promptField.attribute('label'))
+    p5.createP(promptField.attribute('label')).parent(inputDiv)
     promptField.addClass("prompt")
 
-    const fieldsDiv = p5.createDiv()
-    fieldsDiv.id('fieldsDiv')
+    p5.createElement('h3', 'Fill in your blanks').class('header').parent(inputDiv)
+    p5.createP('Add three words or phrases in the boxes below that will replace the [BLANK] in your prompt when the model runs.').parent(inputDiv)
+    p5.createP('(e.g. doctor, secretary, circus performer)').parent(inputDiv)
 
     addField()
-  }
-
-  function makeButtons(){
-
-    // press to add more blanks to fill in
-    const addButton = p5.createButton("more blanks")
-    addButton.size(170)
-    // addButton.position(220,500)
-    addButton.mousePressed(addField)
+    addField()
+    addField()
 
     // press to run model
-    const submitButton = p5.createButton("SUBMIT")
+    const submitButton = p5.createButton("RUN PROMPT")
     submitButton.size(170)
-    submitButton.class('submit')
+    submitButton.class('button').parent(inputDiv)
     submitButton.mousePressed(displayResults)
+  }
+
+  function addField(){
+      let f = p5.createInput("").parent(inputDiv)
+      f.class("blank")
+      // f.parent("#inputDiv")
+      blanksArray.push(f)
+      console.log("made variable field")
+      // // Cap the number of fields, avoids token limit in prompt
+      // let blanks = document.querySelectorAll(".blank")
+      // if (blanks.length > 3){
+      //     console.log(blanks.length)
+      //     addButton.style('visibility','hidden')
+      // }
+  }
 
-    // also make results placeholder
-    const outHeader = p5.createElement('h3',"Results")
-    outText = p5.createP('').id('results')
+  // function makeButtons(){
+  //   // // press to add more blanks to fill in
+  //   // const addButton = p5.createButton("more blanks")
+  //   // addButton.size(170)
+  //   // // addButton.position(220,500)
+  //   // addButton.mousePressed(addField)
+  // }
+
+  function makeOutputModule(){
+    const outDiv() = p5.createDiv()
+    outDiv.id('outputDiv').class('module')
+    const outHeader = p5.createElement('h4',"OUTPUT").parent(outDiv)
+
+    //make output placeholders
+
+    // text-only output
+    p5.createElement('h3', 'Text output').class('header').parent(outDiv)
+    outText = p5.createP('').id('outText').parent(outDiv)
+
+    //a placeholder DIV for images and captions
+    p5.createElement('h3', 'Text-to-image output').class('header').parent(outDiv)
+    outPics = p5.createDiv().id('outPics').parent(outDiv)
+        // img1 = p5.createImg('URL')
+        
+    p5.createElement('h3', 'Prompting info').class('header').parent(outDiv)    
+    outInfo = p5.createP('').id('outInfo').parent(OutDiv)
   }
 
-  async function displayResults(){
+  async function displayOutput(){
     console.log('submitButton pressed')
 
     // insert waiting dots into results space of interface
@@ -203,22 +237,9 @@ new p5(function (p5){
     await outText.html(outs, false) // false replaces text instead of appends
   }
 
-  function addField(){
-      let f = p5.createInput("")
-      f.class("blank")
-      f.parent("#fieldsDiv")
-
-      blanksArray.push(f)
-      console.log("made variable field")
-      
-      // Cap the number of fields, avoids token limit in prompt
-      let blanks = document.querySelectorAll(".blank")
-      if (blanks.length > 3){
-          console.log(blanks.length)
-          addButton.style('visibility','hidden')
-      }
+  p5.draw = function(){
+      // 
   }
-  
 });