Spaces:
Running
Running
add intro and instruct divs
Browse files
sketch.js
CHANGED
|
@@ -7,7 +7,7 @@ env.allowLocalModels = false;
|
|
| 7 |
|
| 8 |
// GLOBAL VARIABLES
|
| 9 |
|
| 10 |
-
var PREPROMPT = `Please continue the story,
|
| 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
|
| 138 |
-
|
| 139 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 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(){
|