add images to tutorials and updates from tester

Author: sarahciston

src/content/tutorials/en/criticalAI1-chatting-with-about-code.mdx

@@ -24,31 +24,33 @@ import Callout from "../../../components/Callout/index.astro";
 
 This tutorial teaches you how to use generative AI to write p5.js code — including tips and warnings. You'll also learn why critical perspectives on AI matter for artists and anyone creating with p5.js. Whether you're looking for more ways to work with p5.js or already using generative AI to help you write code, this tutorial is for you. 
 
-![A screenshot of a chatGPT conversation with a prompt about creating halftone webcam images with p5.js](../images/featured/criticalAItutorial1.png)
+![A screenshot of a chatGPT conversation with a prompt about creating halftone webcam images with p5.js](../images/criticalAI/criticalAI-t1-chat.png)
 
-## Get to know code-generating AI
+## How to use it: Code-generating AI
 
 You are likely familiar with text-generating AI tools like ChatGPT. They might seem intelligent, but they actually use statistics. They predict what is most likely to appear next, based on having analyzed huge amounts of existing text. They do this so convincingly that they can even generate code! 
 
 You might ask, why not have it write all my code for me? Why do I even need tutorials like this one any more? There are caveats: It is easy to end up with faulty code, biased code, boring code. 
 
-In this tutorial, we will walk through the process of creative coding with a code-writing AI text-generator. Along the way, we will share tips, warnings, and critical considerations about how we use AI. They will be flagged "Try This!" for tips, "Warning" for cautions, and "Critical Context" for reflections. 
+In this tutorial, we will walk through the process of creative coding with a code-writing AI text-generator. Along the way, we will share tips, warnings, and critical considerations about how we use AI. They will be flagged "Try This!" for tips, "Warning" for cautions, and "Critical Context" for mindful reflections. 
 
 This tutorial is Part 1 in a series of four tutorials that focus on using AI creatively and thoughtfully. Feel free to adapt them for your own critical exploration of AI systems: 
 
 - Part 2: [Critical AI Prompt Battle](criticalAI2-prompt-battle)  
 - Part 3: [Sentiment Training Dataset Explorer](criticalAI3-sentiment-dataset-explorer)  
 - Part 4: [The No-AI Critical AI Chatbot](criticalAI4-no-ai-chatbot) 
 
-## Steps
+## How to make it
 
-### 1. Describe your idea
+### Step 1. Describe your idea
 
 Pick something you'd like to create with p5.js. Write down your idea for yourself, with as many details as you can imagine. Try to describe it in a few different ways: How does it look? What does it do? How does it work? 
 
 For this example, I chose a tutorial I haven't been able to find elsewhere: 
 
-`Convert webcam video to a halftone look where the dot size is equivalent to the darkness in that area of the image.`
+`Convert webcam video to a halftone look where the dot size is based on the darkness in that area of the image.`
+
+![screenshot of halftone GIF made using p5.js and ChatGPT](../images/criticalAI/criticalAI-t1-halftone.png)
 
 <Callout>
 Keep the project scope small to start. Do you have different versions of the idea, a simpler version and a more complex one? Write them out separately. For example, here are some other features that would be nice to include, but let's wait to add them later:  
@@ -63,7 +65,7 @@ You can follow along with this example in the [p5.js Web Editor](https://editor.
 When will you choose to use GPT tools for your project, and when will you skip them? A ChatGPT query requires almost 10 times as much electricity as a Google search (O'Brien 2024). Sometimes the code challenge is something you can easily find on Google or StackOverflow. Sometimes it's better just to call a friend and figure it out together!
 </Callout>
 
-### 2. Gather your tools
+### Step 2. Gather your tools
 
 Start by logging into your preferred chat-based AI tool. Some options include [OpenAI's ChatGPT](https://chat.openai.com), [Replit Ghostwriter](https://replit.com/), [Blackbox.ai](https://www.blackbox.ai/) — each of these have limited free access. 
 
@@ -85,15 +87,15 @@ Text-generating AI are created by scraping publicly available code from platform
 
 With all this in mind, once you've picked your tools, you can begin by prompting the same way you would a plaintext chat prompt. For this example, we are using the free plan for ChatGPT, running the GPT-4o model.
 
-### 4. Prompt GPT to generate some p5.js code
+### Step 3. Prompt GPT to generate some p5.js code
 
 Pause. Rather than prompting ChatGPT with your whole project idea at once, let's break it down into parts. It's okay if you don't know every part of the process you want to create — that's why we're asking for help. We do this to understand more about what we are trying to make, and so that we receive less generic code more tailored to our project. Don't forget to tell it we're coding in p5.js!
 
 `Help me code a project in p5.js. I'd like to describe features and then have them added please.`  
 `- First, import webcam video`  
 `- Convert video to pixels`  
 `- Turn pixels into dots`  
-`- Make dot size based on the brightness and contrast of the pixel`
+`- Change dot size based on the brightness and contrast of the pixel`
 
 <Callout>
 Try writing the steps out in pseudocode, where you describe the steps of coding it without actually writing the code. This breaks your steps into smaller, more programmatic steps. For example, I could change the video processing steps to read: 
@@ -118,9 +120,9 @@ Review the answers it provides before you decide to use them. The code may inclu
 Also, its solution may not be the right solution for you. How does your pseudocode compare to the steps it took? There's always more than one way to solve a problem.
 </Callout>
 
-### 5. Adapt the code to your needs
+### Step 4. Adapt the code to your needs
 
-Bring the output code results into the p5.js Editor or your IDE of choice. Rewrite the code by hand, don't cut and paste if possible. This will help you make sure you understand it and that it fits into your project.
+Bring the output code results into the p5.js Editor or your IDE of choice. Retype the code by hand; don't cut and paste if possible. This will help you make sure you understand it and that it fits into your project.
 
 <Callout>
 Use your own knowledge to adapt it, and don't be afraid to rework it to suit your project's needs.
@@ -134,7 +136,7 @@ Don't assume it works. It may not run the way you want it to; it may not run at
 Make sure to cite ChatGPT whenever you use it for writing code (or any other text). Include the date it was prompted and if possible the prompt. You can also include the version of the model if you know it and any other details relevant to how you used the system. This is helpful for future readers of your code who want to understand how you made it. Also, it is an important habit to cite any code or examples you draw from, human or otherwise, even if you end up rewriting the code. 
 </Callout>
 
-### 6. Ask follow-up questions
+### Step 5. Ask follow-up questions
 
 If you don't understand aspects of what the program is doing, you can ask ChatGPT for help and clarification. Try pointing to a specific line in your program and ask what it does. You can also prompt ChatGPT to explain how a general concept works or how it is implemented.
 
@@ -148,7 +150,7 @@ It still may not have the right answer. Try asking about small sections. Try ask
 Be aware of bias, fairness, representation, as with all generated text. [One of the best ways to address bias is to] work with other people, not only bots. We're all fallible, but incorporating other perspectives helps us see the gaps in our thinking.
 </Callout>
 
-### 7. Combine ChatGPT and your own capabilities to enhance your project
+### Step 6. Combine ChatGPT and your own capabilities to enhance your project
 
 You can try prompts that add changes to the code you generated before. This might include addressing bug fixes, adding additional features, making aesthetic adjustments, or anything else. 
 
@@ -158,19 +160,21 @@ For the halftone video, I'd like more control over the look of the video, so let
 
 After asking ChatGPT to help you make adjustments, your program still might not look right to you. But you should feel empowered to make adjustments on your own to make it exactly what you want. Go ahead and read through the code (you typed it in yourself, right?) to look for how you might customize and expand on it. 
 
-For example, if the halftone dots look too big, play with the value for the global variable `gridSize`. A lower number creates a finer-resolution image.
+For example, if the halftone dots look too big overall, play with the value for the global variable `gridSize`. A lower number creates a generally finer-resolution image.
 
 You could also try making it more colorful: 
 
 `Make 2-color halftone pixels instead of grayscale`
 
-Interestingly, this still looks gray, because the two colors it chose for our pixels were black and white! Rather than ask GPT again, let's see if we can do it ourselves. 
+Interestingly, this still looks gray, because the two colors GPT chose for our pixels were black and white! Rather than ask GPT again, let's see if we can do it ourselves. 
 
 Find the line of code that says `let fillColor = isDark ? 0 : 255;` . This determines the two colors it uses to fill the dots. Let's try changing them by first creating some new fill colors, then updating the `fillColor` variable:
 
 ```js
-let fillA = color(255,0,0) //red 
-let fillB = color(0,255,0) //green  
+// let fillA = color(0,0,0) //black
+// let fillB = color(255,255,255) //white
+let fillA = color(255,0,0) //red
+let fillB = color(0,255,0) //green
 let fillColor = isDark ? fillA : fillB;
 ```
 
@@ -182,6 +186,10 @@ function draw() {
 ...}
 ```
 
+<Callout title="Warning">
+Case in point: I noticed that when we added the two-color feature, GPT seemed to have lost the original request we gave it to make the pixels different sizes. In fact, the variation was very tiny because I had set grid size was small. Being able to read through the code and my prior conversation with the bot helped diagnose the problem and helped me find a solution I preferred. Watch out for things like this, and use your own coding abilities to combine the solutions it gives you into the actual solution you need. 
+</Callout>
+
 Now let's add an additional feature, so we can output our videos as GIFs. Here ChatGPT actually gets it wrong, but p5.js has a simple [`saveGif()`](https://p5js.org/reference/p5/saveGif/) function built in. You can add this code at the bottom of your sketch:
 
 ```js
@@ -202,20 +210,24 @@ Now that you have an example of ChatGPT-generated halftone videos, how does the
 Keep experimenting. Work modularly to put smaller pieces together into bigger parts. Toggle back and forth between using ChatGPT and other resources. Explore different methods to find where you need to go.
 </Callout>
 
-### 8. Try many different ways to interact with ChatGPT critically and creatively
+### Step 7. Try many different ways to interact with ChatGPT critically and creatively
 
 Besides generating new code, you can use ChatGPT and tools like it to do lots of other things related to creative coding. In a study of how computer science students used ChatGPT, the most common tasks were to have it explain programming concepts that you'd like to understand better, or to have it give code examples to help illustrate those concepts (Ma 2024). It was also used to interpret error messages and for checking existing code to help you optimize, debug, or clarify a particular section. 
 
 For example, you might experiment with a prompt like: `Here is a piece of p5.js code. Please offer ideas for making it run more efficiently…` Then paste in your code.
 
 The students also cautioned that "ChatGPT may not always give the correct answers or answers they needed, particularly in the context of programming, where multiple solutions exist" (Ma 2024, 6). 
 
-### 9. Bonus: Use code generating as a creative springboard.
+### Step 8. Bonus: Use code generating as a creative springboard.
 
 Instead of prompting it to generate code, have it prompt you to code instead. Ask it for quick code exercises that can spark your imagination, or drills that help you practice your skills. Then you can create the code. For example: 
 
 `Please compose prompts for creative coding exercises using p5.js that help me learn about making web pages` 
 
+<Callout>
+Use code generators to help you be more creative and go deeper with coding, rather than to help you skip the time it takes to engage with code and learn. You can use these techniques for working with p5.js, other programming languages, and also when generating non-code text. Let it empower you to learn more!
+</Callout>
+
 ## Takeaways
 
 ### Critical use of AI in creative coding

src/content/tutorials/en/criticalAI2-prompt-battle.mdx

@@ -29,7 +29,7 @@ In this tutorial, you can build a tool to run several AI text prompts at once an
 ![A screenshot of three AI-generated images from the prompt `The doctor is ['a Pakistani woman', 'a Black man', 'a white man'].` The first image is a portrait, the second a cartoon, and the third is a hallway in shadows.](../images/featured/criticalAItutorial2.png)
 Prompt: `The doctor is ['a Pakistani woman', 'a Black man', 'a white man'].`
 
-## Why compare prompts?
+## How to use it: Why compare prompts?
 
 When we use generative AI to make text, code, or images, how are we able to understand its point of view? How does that point of view influence our work? Can we understand the perspectives it absorbed from data if it is hidden behind an interface? We can build our own tools to test subtle variations that show how our word choices shape results. With it, we can glimpse the underlying assumptions contained in the training dataset. That gives us more information to decide how we select and use these models — and for which contexts. 
 
@@ -51,9 +51,9 @@ This tutorial is Part 2 in a series of four tutorials that focus on using AI cre
 - Part 3: [Sentiment Training Dataset Explorer](criticalAI3-sentiment-dataset-explorer)  
 - Part 4: [The No-AI Critical AI Chatbot](criticalAI4-no-ai-chatbot) 
 
-## Steps
+## How to make it
 
-### 1. Brainstorm prompts
+### Step 1. Brainstorm prompts
 
 Make a list of topics that interest you to try with the tool we will make. Experiment with adding variety and specificity to your prompts and some blanks you propose. Try different sentence structures and topics. 
 
@@ -87,7 +87,7 @@ Here are a few more examples:
 Subtle changes in your inputs can lead to large changes in the output. Sometimes these also reveal large gaps in the model's available knowledge. What does the model 'know' about communities who are less represented in its data? How has this data been limited? 
 </Callout>
 
-### 2. Import the Hugging Face library
+### Step 2. Import the Hugging Face library
 
 Open the [tutorial example](https://editor.p5js.org/sarahciston/sketches/siBTII_bC) in the p5.js Web Editor. Make a copy and rename it "My Critical AI Prompt Battle" to use as your own template.
 
@@ -108,11 +108,13 @@ But we don't yet have an access token! On the line just above that, create a var
 
 Hugging Face keeps a public repository of models and datasets that anyone can contribute to. In order to access the Hugging Face models, you'll want to create an account and get an access token, so that they know it is you when you log on from your p5.js program. This is free. 
 
-Create an account at [Hugging Face](https://huggingface.co). Click "Settings," then "Access Token," then "New Token." Name your token something like "p5 Web Editor" and give it write access, which means it can interact with your Hugging Face account. Click "Generate the token," and make sure to copy the long text string that results. This is your token. Paste it into `const HF_TOKEN = "hf_..."`
+Create an account at [Hugging Face](https://huggingface.co). Click "Settings," then "Access Token," then "New Token." Name your token something like "p5 Web Editor" and your choices for token type are "Fine-grained," "Read," or "Write." Select "Write," which means the token has permission interact with your Hugging Face account and make API calls as you. You don't need to select specific fine-grained choices, but you can if you want. Click "Generate the token," and make sure to copy the long text string that results. This is your token. Paste it into `const HF_TOKEN = "hf_..."`.
 
 Once you have your access token, we are ready to connect to Hugging Face to access their machine learning models.
 
-### 4. Create global variables
+![screenshot of access token setup](../images/criticalAI/criticalAI-t2-accesstoken.png)
+
+### Step 3. Create global variables
 
 Declare these variables at the top of your script so that they can be referenced in multiple functions throughout our project:
 
@@ -131,7 +133,7 @@ When writing your prompt, replace one of these aspects with `*`. We will fill th
 
 The remaining variables `promptField`, `blanksArray`, `modelOutput`, `resText,` and `resImg` are created at the top of our program as global variables so that we can access their values from inside different functions at various parts of the program.
 
-### 5. Select the task and type of model
+### Step 4. 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 "chat-completion." Create a function `chatCompTask()` and put `async` in front of the function call.
 
@@ -178,7 +180,7 @@ Then, we can run the function by trying `console.log(chatCompTask("The woman has
 
 For example, one output we got from that prompt was, `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.`
 
-### 6. Update model to process multiple prompts
+### Step 5. Update model to process multiple prompts
 
 Let's make our model process more than one prompt at once, so that we can compare. Here's the new version:
 
@@ -236,7 +238,7 @@ async function textImgGroupTask(pArray){
 }  
 ```
 
-### 6. Use p5.js DOM elements to display model results
+### Step 6. Use p5.js DOM elements to display model results
 
 We already have a pre-built, friendly web interface using p5.js DOM functions, which lets you enter a prompt to send to the AI model. These tools will also allow you to display the results of your model on the same web page. The console is helpful for testing, so we will keep using `console.log()` as our backup. 
 
@@ -322,7 +324,7 @@ We assign new variables to the results of these models, so that we can then iter
 Look for additional comments in the code for descriptions of each function. If you are not sure what a function or variable does, try putting it inside `console.log()` to print its results out to the console below your code.
 </Callout>
 
-### 8. Bonus: Put your tool to the test
+### Step 7. Bonus: Put your tool to the test
 
 <Callout title="Critical Context">
 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? Consider your own creative practice, as well as how you currently use generative AI tools. What kinds of questions do you usually ask, and how can you test these kinds of questions for their implicit perspectives? How do these perspectives impact your practice?