try simplified zephyr

sketch.js

@@ -34,7 +34,7 @@ var blanksArray = []
 
 new p5(function (p5) {
     p5.setup = function(){
-        console.log('p5 loaded')
+        console.log('p5 instance loaded')
         p5.noCanvas()
         makeInterface()
     }
@@ -43,9 +43,9 @@ new p5(function (p5) {
         //
     }
 
-    window.onload = function(){
-        console.log('dom and js loaded')
-    }
+    // window.onload = function(){
+    //    console.log('p5 instance loaded')
+    // }
 
     let fieldsDiv = document.querySelector("#blanks")
 
@@ -179,23 +179,26 @@ async function runModel(PREPROMPT, PROMPT){
 
     let pipe = 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 MESSAGES = [
+    //     {
+    //         "role": "system",
+    //         "content": PREPROMPT
+    //     },{
+    //         "role": "user",
+    //         "content": PROMPT
+    //     }
+    // ]
+
+    let res = await pipe(MESSAGES)
+
+    // let res = await pipe(MESSAGES, {
+    //     max_new_tokens: 150,
+    //     temperature: 0.7,
+    //     top_k: 50,
+    //     top_p: 0.95
+    // });
     
     console.log(res)
 

tutorial.mdx → tutorial.md

@@ -7,8 +7,6 @@ editors:
 category: critical-ai
 ---
 
-<!-- more background: https://huggingface.co/tasks/text-generation -->
-
 # p5.js Critical AI Prompt Battle
 By Sarah Ciston
 With Emily Martinez and Minne Atairu
@@ -43,6 +41,8 @@ Put this code at the top of `sketch.js`:
 
 ```javascript
 import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@xenova/[email protected]';
+
+env.allowLocalModels = false;
 ```
 The import phrase says we are bringing in a library (or module) and the curly braces let us specify which specific functions from the library we want to use, in case we don't want to import the entire thing. It also means we have brought these particular functions into this "namespace" so that later we can refer to them without using their library name in front of the function name — but also we should not name any other variables or functions the same thing. More information on importing [Modules]([XXX]).
 
@@ -55,20 +55,25 @@ var promptInput // will be a field for insert a text value
 var blankArray = [] // will be an array to insert a list of text values from multiple fields
 ```
 
+We will be making a form that lets us write a prompt and send it to a model. It will have extra inputs for making variations of the prompt it sends. The `promptInput` variable will carry the prompt we create, and the `blankArray` will carry the variations we tell the model to insert into the prompt. 
+
+#### X. [PSEUDOCODE] Create makeInterface() and add features
+
+#### X. [PSEUDOCODE] Connect form, test with console.log
+
 #### X. Write instructions for your model. 
-   
-Set 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.`
 
-<!-- A [BLANK] family travels to [FILL] and on the way encounters... -->
+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.`
+```
+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] Add async function runModel() wrapping HF API await. {// explain link to await} explain 
 
 #### X. [PSEUDOCODE] Add model results processing with await
 
-#### X. [PSEUDOCODE] Create makeInterface() and add features
-
-#### X. [PSEUDOCODE] Connect form, test with console.log
-
 #### X. [PSEUDOCODE] Connect model results, send model results to interface
 
 #### X. [PSEUDOCODE] Test with simple example. 
@@ -129,3 +134,68 @@ Consider making it a habit to add text like "AI generated" to the title of any c
 Morgan, Yasmin. 2022. "AIxDesign Icebreakers, Mini-Games & Interactive Exercises." https://aixdesign.co/posts/ai-icebreakers-mini-games-interactive-exercises 
 
 > Ref Minne's worksheet (Atairu 2024)
+
+
+
+
+
+============================================
+
+
+Tutorial 1:
+
+#### X. Create a class instance of p5 in `sketch.js`
+
+Because we are going to use several other libraries alongside p5.js, it will be necessary and helpful to use p5.js in "Instance Mode." You may have seen this before in this [Multiple Canvases](https://p5js.org/examples/advanced-canvas-rendering-multiple-canvases/) example. 
+
+Our p5.js Instance is basically a wrapper that allows us to hold all of our p5.js functions together in one place and label them, so that the program can recognize them as belonging to p5.js. 
+
+First we declare a `new p5()` class instance:
+
+```javascript
+new p5(function (p5) {
+    //
+}
+```
+Then, all our usual p5.js coding will happen within these curly braces. 
+
+```js
+new p5(function (p5) {
+    p5.setup = function(){
+        //
+    }
+
+    p5.draw = function(){
+        // 
+    }
+}
+```
+Important: When using any functions specific to p5.js, you will start them out with a label of whatever you called your p5.js instance. In this case we called it `p5` so our functions will be called `p5.setup()` and `p5.draw()` instead of the `setup()` and `draw()` you may recognize. 
+
+This will apply to any other function that is special to p5.js, like `p5.noCanvas`, but *not* to other functions which are standard to Javascript. Anything code written outside of the `new p5(){}` instance will not understand any p5.js syntax. 
+
+Let's add the instance mode version of `p5.noCanvas()` because we will be working directly with the DOM and don't need a canvas.
+
+```js
+new p5(function (p5) {
+    p5.setup = function(){
+        p5.noCanvas()
+        console.log('p5 instance loaded')
+    }
+
+    p5.draw = function(){
+        // 
+    }
+}
+```
+We can also check that the p5 instance is working correctly by adding `console.log('p5 instance loaded')` to `p5.setup()`, since you won't yet see a canvas or any DOM elements
+
+
+Check that the page loaded, since we don't have a canvas
+
+```js
+window.onload = function(){
+    console.log('DOM loaded, sketch.js loaded')
+}
+
+```