// import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.10.1';
import { HfInference } from 'https://cdn.jsdelivr.net/npm/@huggingface/inference@2.7.0/+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, promptResult, blankAResult, blankBResult, blankCResult, submitButton, addButton, promptInput, blankA, blankB, blankC, modelDisplay, modelResult
// const detector = await pipeline('text-generation', 'meta-llama/Meta-Llama-3-8B', 'Xenova/LaMini-Flan-T5-783M');

let blankArray = []

let MODELNAME = 'Xenova/gpt-3.5-turbo'
// 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')


var PREPROMPT = `Return an array of sentences. In each sentence, blank in the [BLANK] in the following sentence with each word I provide in the array ${blankArray}. Replace any [blank] with an appropriate word of your choice.` 


///// 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)

        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 [blank] where you want the bot to blank in a word.`)
        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.class('submit'); 
        submitButton.mousePressed(getInputs)

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

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

        // 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 > 5){
            console.log(blanks.length)
            addButton.style('visibility','hidden')
        }
    }

    function getInputs(){
        console.log('did test')

        // Map the list of blanks text values to a new list

        let inputValues = blankArray.map(i => i.value())
        console.log(inputValues)
    }

    // 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}`]


// async function runModel(){
//     // Chat completion API
//     const out = await inference.chatCompletion({
//         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);
// }

// function setup(){
//     let canvas = createCanvas(200,200)
//     canvas.position(300, 1000);
//     background(200)
//     textSize(20)
//     textAlign(CENTER,CENTER)
//     console.log('p5 loaded')
    
// }

// function draw(){
//     //
// }