last changes sunday

README.md

@@ -46,3 +46,6 @@ token_str: "doctor"
 4: Object { score: 0.020472077652812004, token: 5660, token_str: "cook", … }```
 
 i wish i had been like other people.,i wish i had looked like other people.,i wish i had felt like other people.,i wish i had become like other people.,i wish i had died like other people.,i wish i had a life like other people.,i wish i had a family like other people.,i wish i had a heart like other people.,i wish i had a body like other people.,i wish i had a sister like other people.
+
+llama story:
+"The woman has a job as a...a man. He is very nice and kind." Lily nodded, but she was still scared of the dog. She did not want to go near it or touch its furry coat again if he looked angry or meaner than her dolls at homework time too," Tom said"

sketch.js

@@ -1,11 +1,9 @@
-// connect to API via module
 
-// import { AutoTokenizer, env } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers';
-// import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@latest';
-// import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.17.2';
+// IMPORT LIBRARIES TOOLS
 import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.10.1';
 
 // Since we will download the model from the Hugging Face Hub, we can skip the local model check
+// skip local model check
 env.allowLocalModels = false;
 
 /// AUTHORIZATION
@@ -29,20 +27,13 @@ env.allowLocalModels = false;
 // const inference = new HfInference(HF_TOKEN);
 
 
-///////// VARIABLES 
+// GLOBAL VARIABLES
 
 // establish global variables to reference later
 var promptInput
 var blanksArray = []
 var resultsArray = []
 
-// 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
 
@@ -129,7 +120,6 @@ new p5(function (p5) {
         f.class("blank")
         f.parent("#fieldsDiv")
 
-        // DOES THIS WORK???????????????????
         blanksArray.push(f)
         console.log("made field")
         
@@ -390,4 +380,28 @@ async function runModel(PROMPT){
     //     resultsArray.push(modelResult)
     // }
     // return resultsArray
-}
+}
+
+async function textGenTask(input){
+    console.log('text-gen task initiated')
+  
+    const pipe = await pipeline('text-generation')
+  
+    var out = await pipe(input)
+  
+    console.log(await out)
+    console.log('text-gen task completed')
+  
+    // parsing of output
+    await out.forEach(o => {
+      console.log(o)
+      OUTPUT_LIST.push(o.generated_text)
+    })
+  
+    console.log(OUTPUT_LIST)
+    console.log('text-gen parsing complete')
+  
+    return await OUTPUT_LIST
+    // return await out
+  }
+  

tutorial.md

@@ -16,10 +16,10 @@ With Emily Martinez and Minne Atairu
 In this tutorial, you can build a tool to run several AI chat prompts at once and compare their results. You can use it to explore what models 'know' about various concepts, communities, and cultures.
 
 This tutorial is part 2 in a series of 5 tutorials that focus on using AI creatively and thoughtfully. 
-Part 1: [Making a ToolBox for Making Critical AI]
-Part 3: [Training Dataset Explorer]
-Part 4: [Machine Learning Model Inspector & Poetry Machine]
-Part 5: [Putting Critical Tools into Practice]
+- Part 1: [Making a ToolBox for Making Critical AI]([XXX])
+- Part 3: [Training Dataset Explorer]([XXX])
+- Part 4: [Machine Learning Model Inspector & Poetry Machine]([XXX])
+- Part 5: [Putting Critical Tools into Practice]([XXX])
 
 The code and content in this tutorial build on information from the prior tutorial to start creating your first tool for your p5.js Critical AI Kit. It also builds on fantastic work on critical prompt programming by Yasmin Morgan (2022), Katy Gero et al.(2024), and Minne Atairu (2024).
 
@@ -53,31 +53,68 @@ The import phrase says we are bringing in a library (or module) and the curly br
 Declare these variables at the top of your script so that they can be referenced in multiple functions throughout the project:
 
 ```javascript
-var PROMPT_INPUT = `The woman has a job as a [MASK].` // a field for writing or changing a text value
-var OUTPUT_LIST = [] // a blank array to store the results from the model
+var PROMPT_INPUT = `The [BLANK] has a job as a [MASK], but...` // a field for writing or changing a text value
+var PREPROMPT = `Please complete the phrase and fill in any [MASK]: `
+var promptField // an html element to hold the prompt
+var outText // an html element to hold the results
+var blanksArray = [] // an empty list to store all the variables we enter to modify the prompt
+
 ```
-We will be making a form that lets us write a prompt and send it to a model. The `PROMPT_INPUT` variable will carry the prompt we create. The `OUTPUT_LIST` will store results we get back from the model. 
+We will be making a form that lets us write a prompt and send it to a model. The `PROMPT_INPUT` variable will carry the prompt we create. Think about what prompt you'd like to use first to test your model. You can change it later; we're making a tool for that! A basic prompt may include WHAT/WHO is described, WHERE they are, WHAT they're doing, or perhaps describing HOW something is done. 
+
+<!-- The `OUTPUT_LIST` will store results we get back from the model.  -->
+<!-- For fill-mask tasks, it will replace one `[MASK]` with one word (called a "token").  -->
 
-Think about what `PROMPT_INPUT` you'd like to use first to test your model. You can change it later; we're making a tool for that! A basic prompt may include WHAT/WHO is described, WHERE they are, WHAT they're doing, or perhaps describing HOW something is done. 
+It might look a bit like MadLibs; however, the model will make a prediction based on context. The model's replacement words will be the most likely examples based on its training data. When writing your prompt, consider what you can learn about the rest of the sentence based on how the model responds (Morgan 2022, Gero 2023). 
 
-For fill-mask tasks, it will replace one `[MASK]` with one word (called a "token"). It's a bit like MadLibs, but the model makes a prediction based on context. When writing a fill-mask prompt, consider what you can learn about the rest of the sentence based on how the model responds (Morgan 2022, Gero 2023). Its replacement words will be the most probable examples based on its training. 
+When writing your prompt, replace one of these aspects with [BLANK]. We will fill this blank in with a choice of words we provide. You can also leave another words for the model to fill in on its own, using the word [MAKS]. We will instruct the model to replace these on its own when we write the PREPROMPT. 
 
-Often fill-mask tasks are used for facts, like "The capital of France is [MASK]. For our critical AI `PROMPT_INPUT` example, we will something quite simple that also has subjective social aspects: `The woman has a job as a [MASK].`
+<!-- Often fill-mask tasks are used for facts, like "The capital of France is [MASK].  -->
+
+For our critical AI `PROMPT_INPUT` example, we will try something quite simple that also has subjective social aspects: `The [BLANK] has a job as a [MASK], but....`
 
 <!-- When writing your prompt, replace one of these aspects with [MASK] so that you instruct the model to fill it in iteratively with the words you provide (Morgan 2022, Gero 2023).  -->
 <!-- Also leave some of the other words for the model to fill in on its own, using the word [FILL]. We instructed the model to replace these on its own in the PREPROMPT.  -->
 <!-- It will have extra inputs for making variations of the prompt it sends.  -->
 <!-- and the `blankArray` will carry the variations we tell the model to insert into the prompt.  -->
 
+Next create a `PREPROMPT` variable that will give instructions to the model. This can be optional, but it helps to specify any particulars. Here we'll use `Please complete the phrase and fill in any [MASK]: `. We will make a list that combines the pre-prompt and several variations of the prompt we devise that will get sent to the model as a long string.
+
+We are making our own version of what is called a ‘fill mask’ task. Often fill mask tasks are used for standardized facts, like "The capital of France is [MASK]. But since we want to customize our task, we are using a more general purpose model instead.
+
+The last three variables `promptField`, `outText`, and `blanksArray` are declared at the top of our program as global variables so that we can access them in any function, from any part of the program.
+
 ### X. Select the task and type of model.
 
-Let's write a function to keep all our machine learning model activity together. The first task we will do is called a "fill mask," which uses an "encoder-only" transformer model [XXX-explain] to fill in missing words. Call the function `fillInTask()` and put `async` in front of the function call.   
+<!-- Let's write a function to keep all our machine learning model activity together. The first task we will do is called a "fill mask," which uses an "encoder-only" transformer model [XXX-explain] to fill in missing words. Call the function `fillInTask()` and put `async` in front of the function call.    -->
+
+Let's write a function to keep all our machine learning model activity together. The first task we will do is called "text-to-text generation,” which uses a transformer model [XXX-explained in Tutorial1 or else here]. Call the function `textGenTask()` and put `async` in front of the function call.
 
 About `async` and `await`: Because [inference][XXX-explain] processing takes time, we want our code to wait for the model to work. We will put an `await` flag in front of several functions to tell our program not to move on until the model has completely finished. This prevents us from having empty strings as our results. Any time we use `await` inside a function, we will also have to put an `async` flag in front of the function declaration. For more about working with asynchronous functions, see [Dan Shiffman's video on Promises]([XXX]).
 
 Here's our basic model:
 
 ```js
+async function textGenTask(pre,prompt,blanks){
+    console.log('text-gen task initiated')
+
+    let INPUT = pre + prompt // bring our prompt and preprompt into the function
+
+    let MODEL = 'Xenova/flan-alpaca-large' // name of the model we use for this task
+
+    const pipe = await pipeline('text2text-generation', MODEL) //initiate the pipeline we imported
+
+    // let options = { max_new_tokens: 60, top_k: 90, repetition_penalty: 1.5 }
+
+    // RUN INPUT THROUGH MODEL
+    var out = await pipe(INPUT) // we can add options to this later
+
+    console.log(await out)
+    console.log('text-gen task completed')
+}
+```
+
+<!-- ```js
 
 async function fillInTask(){
     const pipe = await pipeline('fill-mask', 'Xenova/bert-base-uncased');
@@ -91,48 +128,78 @@ async function fillInTask(){
 }
 
 await fillInTask()
-```
+``` -->
 
 Inside this function, create a variable and name it `pipe`. Assign it to the predetermined machine learning pipeline using the `pipeline()` method we imported. The 'pipeline' represents a string of pre-programmed tasks that have been combined, so that we don't have to program every setting manually. We name these a bit generically so we can reuse the code for other tasks later.
 
-Pass into your method the `('fill-mask', 'Xenova/bert-base-uncased')` to tell the pipeline to carry out a fill mask task, using the specific model named. If we do not pick a specific model, it will select the default for that task. We will go into more details about switching up models and tasks in the [next tutorial]([XXX]).
+Pass into your method the `('text2text-generation', 'Xenova/flan-alpaca-large')` to tell the pipeline to carry out this kind of text-to-text generation task, using the specific model named. If we do not pick a specific model, it will select the default for that task (in this case it is `gpt2`). We will go into more details about switching up models and tasks in the [next tutorial]([XXX]).
+
+<!-- [XXX][If you want to change the model, you  ...] We use the models that are labeled specifically for the task we have chosen. Also the models made by `Xenova` are customized for our Transformers.js library, so for ease we'll stick with those.-->
+
+We can add `console.log(textGenTask(PREPROMPT,PROMPT_INPUT,blankArray)` at the bottom of our code to test the model results in the console. For example, this is what my first run yielded:
+
+`{ generated_text: "The woman has a job as a nurse but she isn't sure how to make the most of it." }`
+`{ generated_text: "The non-binary person has a job as a nurse but she is not sure how to handle the stress of being an adult." }`
+`{ generated_text: "The man has a job as a doctor but his life is filled with uncertainty. He's always looking for new opportunities and challenges, so it can be difficult to find the time to pursue them all." }`
 
-Finally, in the `README.md` file, add `Xenova/bert-base-uncased` (no quote marks) to the list of models used by your program:
+Or another example: `The woman has a job as a nurse and wishes for different jobs. The man has a job as an engineer and wishes for different careers. The non-binary person has a job as an architect and hopes to pursue her dreams of becoming the best designer in the world.`
+​
+What can this simple prompt tell us about the roles and expectations of these figures as they are depicted by the model? 
+
+[Add more?][XXX]
+
+
+Finally, you can preload the model on your page for better performance. In the `README.md` file, add `Xenova/flan-alpaca-large` (no quote marks) to the list of models used by your program:
 
 ```
 title: P5tutorial2
-emoji: 🌐
+emoji: 🦝
 colorFrom: blue
-colorTo: yellow
+colorTo: purple
 sdk: static
 pinned: false
 models:
-  - Xenova/bert-base-uncased
+  - Xenova/flan-alpaca-large
 license: cc-by-nc-4.0
 ```
 
-<!-- [XXX][If you want to change the model, you  ...] -->
-
 ### X. Add model results processing
 
-Let's look more closely at what the model outputs for us. In the example, we get a list of five outputs, and each output has four properties: `score`, `sequence`, `token`, and `token_str`. 
+Let's look more closely at what the model outputs for us. In the example, we get a Javascript array, with just one item: an object that contains a property called `generated_text`. This is the simplest version of an output, and the outputs may get more complicated as you request additional information from different types of tasks. For now, we can extract just the string of text we are looking for with this code:
 
-Here's an example: [REPLACE][XXX]
+```js
+//...model function
+let OUTPUT_LIST = out[0].generated_text
+
+console.log(OUTPUT_LIST)
+console.log('text-gen parsing complete')
+
+return await OUTPUT_LIST
+```
+
+We also put console logs to tell us that we reached this point. They’re always optional.
+
+
+<!-- Let's look more closely at what the model outputs for us. In the example, we get a list of five outputs, and each output has four properties: `score`, `sequence`, `token`, and `token_str`.  -->
+
+<!-- Here's an example: [REPLACE][XXX]
 ```js
 { score: 0.2668934166431427, 
     sequence: "the vice president retired after returning from war.",
     token: 3394,
     token_str: "retired"
 }
-```
+``` -->
 
-The `sequence` is a complete sentence including the prompt and the replaced word. Initially, this is the variable we want to display. You might also want to look deeper at the other components. `token_str` is the fill-in word separate from the prompt. `token` is the number assigned to that word, which can be used to look up the word again. It's also helpful to understand how frequently that word is found in the model. `score` is a float (decimal) representing how the model ranked these words when making the selection. 
+<!-- The `sequence` is a complete sentence including the prompt and the replaced word. Initially, this is the variable we want to display. You might also want to look deeper at the other components. `token_str` is the fill-in word separate from the prompt. `token` is the number assigned to that word, which can be used to look up the word again. It's also helpful to understand how frequently that word is found in the model. `score` is a float (decimal) representing how the model ranked these words when making the selection.  -->
 
-We can isolate any of these properties to use them in our toolkit:
+We also put console logs to tell us that we reached this point. They’re always optional. It’s helpful to print out the whole output to the console, because as you see additional properties appear, you may want to utilize them in your Critical AI Kit.
 
-```js
+Next we will build a friendly interface to send our model output into, so we don't always have to use the console.
+
+<!-- ```js
 // a generic function to pass in different model task functions
-async function getOutputs(task){
+// async function getOutputs(task){
   let output = await task
 
   await output.forEach(o => {
@@ -140,48 +207,54 @@ async function getOutputs(task){
   })
 
   console.log(OUTPUT_LIST)
-}
+// }
 //replace fillInTask with:
 await getOutputs(fillInTask())
-```
-By putting the [XXX]
-
-### X. Add elements to your web interface. 
-
-
-### X. [PSEUDOCODE] Connect form, test with console.log()
+``` -->
 
 <!-- ### X. Write instructions for your model.  -->
 
 <!-- We can instruct the model by giving it pre-instructions that go along with every prompt. We'll write also write those instructions now. Later, when we write the function to run the model, we will move them into that function.  -->
    
-```js
-// let PREPROMPT = `Return an array of sentences. In each sentence, fill in the [BLANK] in the following sentence with each word I provide in the array ${blankArray}. Replace any [FILL] with an appropriate word of your choice.`
-```
+
+<!-- // let PREPROMPT = `Return an array of sentences. In each sentence, fill in the [BLANK] in the following sentence with each word I provide in the array ${blankArray}. Replace any [FILL] with an appropriate word of your choice.` -->
+
 <!-- With the dollar sign and curly braces `${blankArray}`, we make a "string variable." This calls all the items that will be stored inside `blankArray` and inserts them into the `PREPROMPT` string. Right now that array is empty, but when we move `PREPROMPT` into the model function, it will not get created until `blankArray` has values stored in it. -->
 
-### X. [PSEUDOCODE] Test with simple example. 
+<!-- CONFIGURATIONS POSSIBLE: https://huggingface.co/docs/transformers.js/api/utils/generation#new_module_utils/generation..GenerationConfig_new -->
 
-### X. [PSEUDOCODE] Parse model results. 
+### X. [TO-DO] Add elements to your web interface. 
 
-### X. [PSEUDOCODE] Send model results to interface
+Next we will build a friendly interface to send our model output into, so we don't always have to use the console.
 
-### X. [PSEUDOCODE] Test with more complex example (add a model, add a field)
+### X. [TO-DO] Send model results to the web interface.
 
-### X. [PSEUDOCODE] Add a model to the tool. 
+As we connect the interface, we can test our interface with the simple example output we've been using, or start playing with new prompts already.
 
-You can change which model your tool works with by README.md and to sketch.js
-Search the list of models available. 
+We’ll keep using `console.log()` as our backup.
+
+[TO-DO][XXX]
 
-### X. [PSEUDOCODE] Make a list of topics that interest you to try with your tool. 
+### X. [TO-DO] Put your tool to the test.
 
-- Experiment with adding variety and specificity to your prompt and the blanks you propose. Try different sentence structures and topics. 
-- What's the most unusual or obscure, most 'usual' or 'normal', or most nonsensical blank you might propose?
-- Try different types of nouns — people, places, things, ideas; different descriptors — adjectives and adverbs — to see how these shape the results. For example, do certain places or actions often get associated with certain moods, tones, or phrases? Where are these based on outdated or stereotypical assumptions? 
-- How does the output change if you change the language, dialect, or vernacular (e.g. slang versus business phrasing)? (Atairu 2024).
+Make a list of topics that interest you to try with your tool. Experiment with adding variety and specificity to your prompt and the blanks you propose. Try different sentence structures and topics. 
 
-- >"How do the outputs vary as demographic characteristics like skin color, gender or region change? Do these variances reflect any known harmful societal stereotypes?" (Atairu 2024)
-- >"Are stereotypical assumptions about your subject [represented]? Consider factors such as race, gender, socioeconomic status, ability. What historical, social, and cultural parallels do these biases/assumptions reflect? Discuss how these elements might mirror real-world issues or contexts. (Atairu 2024)
+What’s the most unusual or obscure, most ‘usual’ or ‘normal’, or most nonsensical blank you might propose?
+
+Try different types of nouns — people, places, things, ideas; different descriptors — adjectives and adverbs — to see how these shape the results. For example, do certain places or actions often get associated with certain moods, tones, or phrases? Where are these based on outdated or stereotypical assumptions? 
+
+How does the output change if you change the language, dialect, or vernacular (e.g. slang versus business phrasing)? How does it change with demographic characteristics or global contexts? (Atairu 2024). 
+
+Is the model capable of representing a variety of contexts? What do you notice the model does well at representing, and where does it fall short? Where do you sense gaps, and how does it expose these or patch them over?
+
+What kinds of prompts work and don’t work as you compare them at scale in a “prompt battle”?
+
+### X. [TO-DO] Bonus: Test with more complex examples (add a field, add a parameter, add a model?)
+
+You can change which model your tool works with by README.md and to sketch.js
+Search the list of models available.
+
+[TO-DO][XXX]
 
 ### Reflections 
 
@@ -207,12 +280,17 @@ This tool lets you scale up your prompt adjustments. We have built a tool compar
 
 Keep playing with the p5.js DOM functions to build your interface & the HuggingFace API. What features might you add? You might also adapt this tool to compare wholly different prompts, or even to compare different models running the same prompt. 
 
-Next we will add additional aspects to the interface that let you adjust more features and explore even further. 
+Next we will add additional aspects to the interface that let you adjust more features and explore even further. We’ll also try different machine learning tasks you might use in your creative coding practice. In natural language processing alone, there’s also named entity recognition, question answering, summarization, translation, categorization, speech processing, and more. 
+
 
 ## Further considerations
 
+### Flag your work:
+
 Consider making it a habit to add text like "AI generated" to the title of any content you produce using a generative AI tool, and include details of your process in its description (Atairu 2024).
 
+### [TO-DO]
+
 ## References
 
 Atairu, Minne. 2024. "AI for Art Educators." AI for Art Educators. https://aitoolkit.art/
@@ -221,7 +299,8 @@ Katy Ilonka Gero, Chelse Swoopes, Ziwei Gu, Jonathan K. Kummerfeld, and Elena L.
 
 Morgan, Yasmin. 2022. "AIxDesign Icebreakers, Mini-Games & Interactive Exercises." https://aixdesign.co/posts/ai-icebreakers-mini-games-interactive-exercises 
 
-
+NLP & Transformers Course from Hugging Face: 
+https://huggingface.co/learn/nlp-course/chapter1/3
 
 
 
@@ -234,13 +313,17 @@ Tutorial 1:
 
 <!-- Play with different models: https://huggingface.co/chat/ -->
 
-### X. Get to know the terms and tools.
+### X. [TO-DO] Get to know the terms and tools.
 
-API: 
+API:
+Model:
+Dataset:
+[TO-DO]:
 
-Model: 
 
-Dataset:
+### X. [TO-DO] Create HuggingFace account. 
+
+[TO-DO][XXX]
 
 ### X. Create a Hugging Face Space.
 
@@ -453,7 +536,7 @@ https://huggingface.co/docs/hub/spaces-config-reference
 	https://huggingface.co/docs/hub/spaces-overview#managing-secrets
 ### X. Connect your API key to your p5.js instance.
 
-Reflections & Next Steps
+## Reflections & Next Steps
 
 We’ve now put together all the basic foundations of a web page ready to host some Critical AI tools. As we move on to [XXX]