sketch.js

// import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@xenova/[email protected]';
import { HfInference } from 'https://cdn.jsdelivr.net/npm/@huggingface/[email protected]/+esm';
const inference = new HfInference();

// let pipe = await pipeline('text-generation', 'mistralai/Mistral-7B-Instruct-v0.2');
// models('Xenova/gpt2', 'Xenova/gpt-3.5-turbo', 'mistralai/Mistral-7B-Instruct-v0.2', 'Xenova/llama-68m', 'meta-llama/Meta-Llama-3-8B', 'Xenova/bloom-560m', 'Xenova/distilgpt2')
// list of models by task: 'https://huggingface.co/docs/transformers.js/index#supported-tasksmodels'


// Since we will download the model from the Hugging Face Hub, we can skip the local model check
// env.allowLocalModels = false;

///////// VARIABLES 



let PROMPT, PREPROMPT, promptResult, submitButton, addButton, promptInput, inputValues, modelDisplay, modelResult

// const detector = await pipeline('text-generation', 'meta-llama/Meta-Llama-3-8B', 'Xenova/LaMini-Flan-T5-783M');

let blankArray = []

let MODELNAME = "meta-llama/Meta-Llama-3-8B-Instruct"
// models('Xenova/gpt2', 'Xenova/gpt-3.5-turbo', 'mistralai/Mistral-7B-Instruct-v0.2', 'Xenova/llama-68m', "meta-llama/Meta-Llama-3-70B-Instruct", 'meta-llama/Meta-Llama-3-8B', 'Xenova/bloom-560m', 'Xenova/distilgpt2', "meta-llama/Meta-Llama-3-70B-Instruct")

///// p5 STUFF


new p5(function(p5){
    p5.setup = function(){
        console.log('p5 loaded')
        p5.noCanvas()
        makeInterface()
    }

    p5.draw = function(){
        //
    }

    window.onload = function(){
        console.log('dom and js loaded')
    }

    let fieldsDiv = document.querySelector("#blanks")

    function makeInterface(){
        console.log('reached makeInterface')
        let title = p5.createElement('h1', 'p5.js Critical AI Prompt Battle')
        // title.position(0,50)

        p5.createElement('p',`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 [XXX][TO-DO]`)
            // .position(0,100)

        promptInput = p5.createInput("")
        // promptInput.position(0,160)
        promptInput.size(600);
        promptInput.attribute('label', `Write a text prompt with at least one [BLANK] that describes someone. You can also write [FILL] where you want the bot to fill in a word on its own.`)
        promptInput.value(`The [BLANK] works as a [FILL] but wishes for...`)
        promptInput.addClass("prompt")
        p5.createP(promptInput.attribute('label'))
            // .position(0,100)

        //make for loop to generate
        //make a button to make another
        //add them to the list of items
        fieldsDiv = p5.createDiv()
        fieldsDiv.id('fieldsDiv')
        // fieldsDiv.position(0,250)

        // initial code to make a single field
        // blankA = p5.createInput("");
        // blankA.position(0, 240);
        // blankA.size(300);
        // blankA.addClass("blank")
        // blankA.parent('#fieldsDiv')

        // function to generate a single BLANK form field instead
        addField()

        // // BUTTONS // // 

        // send prompt to model
        submitButton = p5.createButton("SUBMIT")
        submitButton.position(0,600)
        submitButton.size(200)
        submitButton.class('submit'); 
        submitButton.mousePressed(getInputs)

        // add more blanks to fill in
        addButton = p5.createButton("more blanks")
        addButton.size(200)
        addButton.position(150,600)
        addButton.mousePressed(addField)

        // TO-DO a model drop down list?

        // describe(``)
        // TO-DO alt-text description
    }

    function addField(){
        let f = p5.createInput("")
        f.class("blank")
        f.parent("#fieldsDiv")

        // DOES THIS WORK???????????????????
        blankArray.push(f)
        console.log("made field")
        
        // Cap the number of fields, avoids token limit in prompt
        let blanks = document.querySelectorAll(".blank")
        if (blanks.length > 7){
            console.log(blanks.length)
            addButton.style('visibility','hidden')
        }
    }

    async function getInputs(){
        // Map the list of blanks text values to a new list
        let INPUTVALUES = blankArray.map(i => i.value())
        console.log(INPUTVALUES)
        
        // Do model stuff in this function instead of in general
        PROMPT = promptInput.value() // updated check of the prompt field
        
        // BLANKS = inputValues // get ready to feed array list into model

        PREPROMPT = `Please return an array of sentences. In each sentence, fill in the [BLANK] in the following sentence with each word I provide in the array ${INPUTVALUES}. Replace any [FILL] with an appropriate word of your choice.` 

        // we pass PROMPT and PREPROMPT to the model function, don't need to pass INPUTVALUES bc it's passed into the PREPROMPT already here

        modelResult = await runModel(PREPROMPT, PROMPT)

        await displayModel(modelResult)
    }

    async function displayModel(m){
        modelDisplay = p5.createElement("p", "Results:");
        await modelDisplay.html(m)
    }

    // async function showResults(){
    //     modelDisplay = p5.createElement("p", "Results:");
    //     // modelDisplay.position(0, 380);
    //         setTimeout(() => {
    //             modelDisplay.html(modelResult)
    //     }, 2000);
    // }

    // var modelResult = submitButton.mousePressed(runModel) = function(){
    //     // listens for the button to be clicked
    //     // run the prompt through the model here
    //     // modelResult = runModel()
    //     // return modelResult
    //     runModel()
    // }

    // function makeblank(i){
    //     i = p5.createInput("");
    //     i.position(0, 300); //append to last blank and move buttons down
    //     i.size(200);
    //   }    
});


///// MODEL STUFF


// var PROMPT = `The [BLANK] works as a [blank] but wishes for [blank].`
// /// this needs to run on button click, use string variables to blank in the form
// var PROMPT = promptInput.value()


// var blankArray = ["mother", "father", "sister", "brother"]
// // for num of blanks put in list
// var blankArray = [`${blankAResult}`, `${blankBResult}`, `${blankCResult}`]

//Error: Server Xenova/distilgpt2 does not seem to support chat completion. Error: HfApiJson(Deserialize(Error("unknown variant `transformers.js`, expected one of `text-generation-inference`, `transformers`, `allennlp`, `flair`, `espnet`, `asteroid`, `speechbrain`, `timm`, `sentence-transformers`, `spacy`, `sklearn`, `stanza`, `adapter-transformers`, `fasttext`, `fairseq`, `pyannote-audio`, `doctr`, `nemo`, `fastai`, `k2`, `diffusers`, `paddlenlp`, `mindspore`, `open_clip`, `span-marker`, `bertopic`, `peft`, `setfit`", line: 1, column: 397)))


async function runModel(PREPROMPT, PROMPT){
    // Chat completion API
    const out = await inference.chat_completion({    //inference.fill_mask({
        model: MODELNAME,
        // model: "google/gemma-2-9b",
        // messages: [{ role: "user", content: PREPROMPT + PROMPT }],
        max_tokens: 100
    });

    // let out = await pipe(PREPROMPT + PROMPT)
    // let out = await pipe(PREPROMPT + PROMPT, {
    //     max_new_tokens: 250,
    //     temperature: 0.9,
    //     // return_full_text: False,
    //     repetition_penalty: 1.5,
    //     // no_repeat_ngram_size: 2,
    //     // num_beams: 2,
    //     num_return_sequences: 1
    // });
    console.log(out)

    // var modelResult = await out.choices[0].message.content
    var modelResult = await out[0].generated_text
    console.log(modelResult);

    return modelResult
}


// Reference the elements that we will need
// const status = document.getElementById('status');
// const fileUpload = document.getElementById('upload');
// const imageContainer = document.getElementById('container');
// const example = document.getElementById('example');

// const EXAMPLE_URL = 'https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/city-streets.jpg';

// Create a new object detection pipeline
// status.textContent = 'Loading model...';
// const detector = await pipeline('object-detection', 'Xenova/detr-resnet-50');

// status.textContent = 'Ready';

// example.addEventListener('click', (e) => {
//     e.preventDefault();
//     detect(EXAMPLE_URL);
// });

// fileUpload.addEventListener('change', function (e) {
//     const file = e.target.files[0];
//     if (!file) {
//         return;
//     }

//     const reader = new FileReader();

//     // Set up a callback when the file is loaded
//     reader.onload = e2 => detect(e2.target.result);

//     reader.readAsDataURL(file);
// });


// // Detect objects in the image
// async function detect(img) {
//     imageContainer.innerHTML = '';
//     imageContainer.style.backgroundImage = `url(${img})`;

//     status.textContent = 'Analysing...';
//     const output = await detector(img, {
//         threshold: 0.5,
//         percentage: true,
//     });
//     status.textContent = '';
//     output.forEach(renderBox);
// }

// // Render a bounding box and label on the image
// function renderBox({ box, label }) {
//     const { xmax, xmin, ymax, ymin } = box;

//     // Generate a random color for the box
//     const color = '#' + Math.floor(Math.random() * 0xFFFFFF).toString(16).padStart(6, 0);

//     // Draw the box
//     const boxElement = document.createElement('div');
//     boxElement.className = 'bounding-box';
//     Object.assign(boxElement.style, {
//         borderColor: color,
//         left: 100 * xmin + '%',
//         top: 100 * ymin + '%',
//         width: 100 * (xmax - xmin) + '%',
//         height: 100 * (ymax - ymin) + '%',
//     })

//     // Draw label
//     const labelElement = document.createElement('span');
//     labelElement.textContent = label;
//     labelElement.className = 'bounding-box-label';
//     labelElement.style.backgroundColor = color;

//     boxElement.appendChild(labelElement);
//     imageContainer.appendChild(boxElement);
// }