File size: 10,150 Bytes
e871332
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
// connect to API via module

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();

// PIPELINE MODELS
// 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 

// establish global variables to reference later
var promptInput
var blanksArray = []

// pick a model (see list of models)
// INFERENCE MODELS
// let MODELNAME = "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-70B-Instruct", 'meta-llama/Meta-Llama-3-8B', 'Xenova/bloom-560m', 'Xenova/distilgpt2', "meta-llama/Meta-Llama-3-70B-Instruct")

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




///// p5 STUFF

// create an instance of the p5 class as a workspace for all your p5.js code

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

    p5.draw = function(){
        //
    }

    // window.onload = function(){
    //    console.log('p5 instance 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 [Tutorial & extra info][TO-DO][XXX]`)
            // .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 // // 
        // let buttonsDiv = p5.createDiv() // container to organize buttons
        // buttonsDiv.id('buttonsDiv')
        
        // send prompt to model
        let submitButton = p5.createButton("SUBMIT")
        // submitButton.position(0,500)
        submitButton.size(170)
        submitButton.class('submit'); 
        // submitButton.parent('#buttonsDiv')
        submitButton.mousePressed(getInputs)

        // add more blanks to fill in
        let addButton = p5.createButton("more blanks")
        addButton.size(170)
        // addButton.position(220,500)
        // addButton.parent('#buttonsDiv')
        addButton.mousePressed(addField)

        // TO-DO a model drop down list?

        // alt-text description
        // p5.describe(`Pink and black text on a white background with form inputs and two buttons. The text describes a p5.js Critical AI Prompt Battle tool that 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. In the largest form input you can write a prompt to submit. In smaller inputs, you can write variables that will be inserted into that prompt as variations of the prompt when it is run through the model. There is a submit button, a button to add more variations, and when the model is run it adds text at the bottom showing the output results.`)
    }

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

        // DOES THIS WORK???????????????????
        blanksArray.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 BLANKSVALUES = blanksArray.map(i => i.value())
        console.log(BLANKSVALUES)
        
        // Do model stuff in this function instead of in general
        let PROMPT = promptInput.value() // updated check of the prompt field
        
        // BLANKS = inputValues // get ready to feed array list into model

        let PREPROMPT = `In the sentence I provide, please fill in the [BLANK] with each word in the array ${BLANKSVALUES}, replace any [FILL] with a word of your choice. Here is the SAMPLE SENTENCE: ` 

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

        // Please return an array of sentences based on the sample sentence to follow. In each sentence, 

        let modelResult = await runModel(PREPROMPT, PROMPT)

        await displayModel(modelResult)
    }

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


///// MODEL STUFF

async function runModel(PREPROMPT, PROMPT){
    // // Chat completion API

    // pipeline/transformers version
    // let pipe = await pipeline('text-generation', 'Xenova/distilgpt2');
    // seems to work with default model distilgpt2 ugh


    // IMPORTANT: different models have different input/output structures for their API so look to the samples and references on the specific model page for help :)

    // 'meta-llama/Meta-Llama-3-70B-Instruct'
    // 'openai-community/gpt2'
    // 'Xenova/gpt-3.5-turbo'
    // , 'Xenova/distilgpt2'

    // let res = await pipe(inputText, {
    //     max_tokens: 250,
    //     return_full_text: false
    //     repetition_penalty: 1.5,
    //     num_return_sequences: 1 //must be 1 for greedy search
    // })

    // let generator = pipeline("text-generation", "HuggingFaceH4/zephyr-7b-beta")

    let MESSAGES = PREPROMPT + PROMPT
    // for zephyr customizing
    // let MESSAGES = [
    //     {
    //         "role": "system",
    //         "content": PREPROMPT
    //     },{
    //         "role": "user",
    //         "content": PROMPT
    //     }
    // ]

    // let res = await pipe(MESSAGES, {
    //     max_new_tokens: 150,
    //     temperature: 0.7,
    //     top_k: 50,
    //     top_p: 0.95
    // });
    let generator = pipeline('text-generation', 'Xenova/distilgpt2')

    let res = await generator(MESSAGES)
    
    console.log(res)

    var modelResult = await res[0].generated_text
    // var modelResult = await res[0].generated_text[0].content
    console.log(modelResult)

    return modelResult

}


    // inference API version, not working in spaces
    // const out = await inference.chatCompletion({    
    //     model: MODELNAME,
    //     messages: [{ role: "user", content: PREPROMPT + PROMPT }],
    //     max_tokens: 100
    // });

    // console.log(out)

    // // modelResult = await out.messages[0].content

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

    // return modelResult



    //inference.fill_mask({
    // 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
    // });

// Must be one of [text-classification,token-classification,question-answering,fill-mask,summarization,translation,text2text-generation,text-generation,zero-shot-classification,audio-classification,zero-shot-audio-classification,automatic-speech-recognition,text-to-audio,image-to-text,image-classification,image-segmentation,zero-shot-image-classification,object-detection,zero-shot-object-detection,document-question-answering,image-to-image,depth-estimation,feature-extraction]

// 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 blanksArray = ["mother", "father", "sister", "brother"]
// // for num of blanks put in list

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