index.js

// IMPORT LIBRARIES TOOLS
import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@xenova/[email protected]';

// skip local model check
env.allowLocalModels = false;

// GLOBAL VARIABLES
let PROMPT_INPUT = `The vice president [MASK] after returning from war.` // a field for writing or changing a text value
let OUTPUT_LIST = [] // a blank array to store the results from the model


// RUN MODEL
async function fillInTask(){
  console.log('fill-in task initiated')

  // PROMPT_INPUT = pField.value()

  const pipe = await pipeline('fill-mask', 'Xenova/bert-base-uncased');
  
  var out = await pipe(PROMPT_INPUT);

  console.log(await out) // yields { score, sequence, token, token_str } for each result
  
  // await out.forEach(o => {
  //   console.log(o) // yields { score, sequence, token, token_str } for each result
  //   OUTPUT_LIST.push(o.sequence) // put only the full sequence in a list
  // })
  
  // console.log(await OUTPUT_LIST)

  // displayResults(await OUTPUT_LIST)

  console.log('fill-in task completed')

  return await out
  // return await OUTPUT_LIST
}

// PROCESS MODEL OUTPUT
// a generic function to pass in different model task functions
// 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)

//   return await OUTPUT_LIST
// }

// await getOutputs(fillInTask()) // getOutputs will later connect to the interface to display results

await fillInTask()

//// p5.js Instance

new p5(function (p5){
  p5.setup = function(){
      p5.noCanvas()
      console.log('p5 instance loaded')
      makeTextDisplay()
      makeFields()
      makeButtons()
    }

  p5.draw = function(){
      // 
  }

  function makeTextDisplay(){
    let title = p5.createElement('h1','p5.js Critical AI Prompt Battle')
    let intro = p5.createP(`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(){
    pField = p5.createInput(PROMPT_INPUT) // turns the string into an input; now access the text via PROMPT_INPUT.value()
    pField.size(700)
    pField.attribute('label', `Write a text prompt with at least one [MASK] that the model will fill in.`)
    p5.createP(pField.attribute('label'))
    pField.addClass("prompt")
    pField.value(PROMPT_INPUT)
    console.log(pField.value())
  }

  function makeButtons(){
    let submitButton = p5.createButton("SUBMIT")
    submitButton.size(170)
    submitButton.class('submit')
    submitButton.mousePressed(fillInTask)
  }

  async function displayResults(text){
    console.log('displayed or pressed')
    text = str(text)
    let outHead = p5.createElement('h4',"Results:") 
    let outText = p5.createP('')
    await outText.html(text)
  }

  // async function makeOutputDisplay(){
  //   console.log('button pressed')
  //   let outHead = p5.createElement('h4',"Results:")

  //   let out = await fillInTask() //just model no parsing
  //   // let out = await getOutputs(fillInTask()) // model and parsing

  //   out = str(await out)
  //   console.log(out)
    
  //   let outText = p5.createP('')
  //   await outText.html(out)
  // }

});