sarahciston commited on
Commit
a04b9b1
1 Parent(s): 581d392

add intro and instruct divs

Browse files
Files changed (1) hide show
  1. sketch.js +10 -4
sketch.js CHANGED
@@ -7,7 +7,7 @@ env.allowLocalModels = false;
7
 
8
  // GLOBAL VARIABLES
9
 
10
- var PREPROMPT = `Please continue the story, and fill any [MASK] with your own words:`
11
  // let PREPROMPT = `Please complete the phrase and fill in any [MASK]: `
12
  var PROMPT_INPUT = `The [BLANK] has a job as a [MASK] but...` // a field for writing or changing a text value
13
  var promptField // an html element to hold the prompt
@@ -134,9 +134,15 @@ new p5(function (p5){
134
  }
135
 
136
  function makeTextDisplay(){
137
- const title = p5.createElement('h1','p5.js Critical AI Prompt Battle')
138
- // const intro = p5.createP(`This tool lets you explore several AI prompts results at once.`)
139
- // p5.createP(`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]`)
 
 
 
 
 
 
140
  }
141
 
142
  function makeFields(){
 
7
 
8
  // GLOBAL VARIABLES
9
 
10
+ var PREPROMPT = `Please continue the story, filling any [MASK] with your own words:`
11
  // let PREPROMPT = `Please complete the phrase and fill in any [MASK]: `
12
  var PROMPT_INPUT = `The [BLANK] has a job as a [MASK] but...` // a field for writing or changing a text value
13
  var promptField // an html element to hold the prompt
 
134
  }
135
 
136
  function makeTextDisplay(){
137
+ const introDiv = p5.createDiv().class('module').id('intro')
138
+ p5.createElement('h1','p5.js Critical AI Prompt Battle')
139
+ 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)
140
+ 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)
141
+
142
+ const instructDiv = p5.createDiv().class('module').id('instructions')
143
+ p5.createElement('h2', 'Instructions')
144
+ 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)
145
+ 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)
146
  }
147
 
148
  function makeFields(){